fix: add docs and example

example/src/Examples/CustomCss.tsx

@@ -2,10 +2,10 @@ import type { NativeStackScreenProps } from '@react-navigation/native-stack';
 import React from 'react';
 import {
   SafeAreaView,
-  View,
   KeyboardAvoidingView,
   Platform,
   StyleSheet,
+  Button,
 } from 'react-native';
 import {
   CodeBridge,
@@ -52,9 +52,49 @@ export const CustomCss = ({}: NativeStackScreenProps<any, any, any>) => {
 
   return (
     <SafeAreaView style={exampleStyles.fullScreen}>
-      <View style={exampleStyles.fullScreen}>
-        <RichText editor={editor} />
-      </View>
+      <Button
+        title={'Random CodeBlock Color'}
+        onPress={() => {
+          editor.injectCSS(
+            `
+            code {
+              background-color: ${
+                '#' + Math.floor(Math.random() * 16777215).toString(16)
+              };
+              border-radius: 0.25em;
+              border-color: ${
+                '#' + Math.floor(Math.random() * 16777215).toString(16)
+              };
+              border-width: 1px;
+              border-style: solid;
+              box-decoration-break: clone;
+              color: ${'#' + Math.floor(Math.random() * 16777215).toString(16)};
+              font-size: 0.9rem;
+              padding: 0.25em;
+          }
+          `,
+            // Because we are passing CodeBridge name here, the existing css from CodeBridge will be replaced
+            // With the css we are injecting here
+            CodeBridge.name
+          );
+        }}
+      />
+      <Button
+        title={'Random Font Size'}
+        onPress={() => {
+          editor.injectCSS(
+            `
+            * {
+              font-size: ${Math.random() * 60}px;
+            }
+          `,
+            // We are passing a custom tag here, so no bridge css will be replaced, instead a new stylesheet with be created with
+            // the tag 'font-size', and it will only be replaced with we injectCSS again with the same tag
+            'font-size'
+          );
+        }}
+      />
+      <RichText editor={editor} />
       <KeyboardAvoidingView
         behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
         style={exampleStyles.keyboardAvoidingView}

src/RichText/useEditorBridge.tsx

@@ -101,7 +101,6 @@ export const useEditorBridge = (options?: {
   const injectCSS = (cssString: string, tag: string = 'custom-css') => {
     // Generate custom stylesheet with `custom-css` tag
     const customCSS = getStyleSheetCSS(cssString, tag);
-    console.log(customCSS);
     webviewRef.current?.injectJavaScript(customCSS);
   };
 

website/docs/api/EditorBridge.md

@@ -50,6 +50,16 @@ a function that get's html as string and set set's it as the editors content <br
 `(from: number, to: number) => void`<br />
 sets the selection of the editor <br /> extended by [CoreBridge](./BridgeExtensions#coreextension)
 
+#### injectCSS
+
+`(css: string, tag?: string) => void`<br />
+creates or updates the stylesheet with the given tag, see [Dynamically Updating CSS](../examples/customCss/#dynamically-updating-css) <br /> <u>default</u> `tag`: `custom-css`<br /> extended by [CoreBridge](./BridgeExtensions#coreextension)
+
+#### injectJS
+
+`(js: string) => void`<br />
+inject custom javascript into the editor's webview <br /> extended by [CoreBridge](./BridgeExtensions#coreextension)
+
 #### updateScrollThresholdAndMargin
 
 `(offset: number) => void`<br />

website/docs/examples/customCss.md

@@ -45,6 +45,33 @@ const editor = useEditorBridge({
 
 > <strong>NOTE</strong> calling configureCSS more than once will override the previous css.
 
+## Dynamically Updating CSS
+
+Let's say we want to dynamically update css after the editor is initialized.
+We can do this with [injectCSS](../api/EditorBridge/#injectcss).
+`injectCSS` receives two parameters:
+
+- `css`: the css to inject
+- `tag`: the tag of the stylesheet of which to inject the css into
+
+When we call `injectCSS` it gets or creates a stylesheet with the given `tag` and updates it's css.
+
+If we wanted to update our `CodeBridge` css after it has been initialized we could run
+
+```ts
+editor.injectCSS(ourCustomCSS, CodeBridge.name);
+```
+
+then this would replace or create the existing css with whatever we have given it.
+
+Now let's say that we don't want to override a bridges existing css, we could do this by providing a custom tag
+
+```ts
+editor.injectCSS(ourCustomCSS, 'our-custom-tag');
+```
+
+This will create a new stylesheet with `our-custom-tag` and it will not override any bridge's custom css.
+
 ## Adding Custom Fonts
 
 Let's add a custom font to our Editor (we can also add custom css)