fix: add configureExtension

example/src/App.tsx

@@ -12,6 +12,7 @@ import { Advanced } from './Examples/Advanced/AdvancedRichText';
 import { Compose } from './Examples/Compose/Compose';
 import { WithKeyboard } from './Examples/WithKeyboard';
 import { CustomCss } from './Examples/CustomCss';
+import { ConfigureExtensions } from './Examples/ConfigureExtentions';
 
 const examples = [
   {
@@ -26,6 +27,10 @@ const examples = [
     name: 'Custom CSS',
     component: CustomCss,
   },
+  {
+    name: 'Configure Extensions',
+    component: ConfigureExtensions,
+  },
   {
     name: 'CustomKeyboard',
     component: CustomKeyboardExample,

example/src/Examples/ConfigureExtentions.tsx

@@ -0,0 +1,63 @@
+import type { NativeStackScreenProps } from '@react-navigation/native-stack';
+import React from 'react';
+import { SafeAreaView, View, StyleSheet, Button } from 'react-native';
+import {
+  LinkBridge,
+  PlaceholderBridge,
+  RichText,
+  TenTapStartKit,
+  useEditorBridge,
+} from '@10play/tentap-editor';
+
+export const ConfigureExtensions = ({}: NativeStackScreenProps<
+  any,
+  any,
+  any
+>) => {
+  const editor = useEditorBridge({
+    autofocus: true,
+    avoidIosKeyboard: true,
+    bridgeExtensions: [
+      ...TenTapStartKit,
+      PlaceholderBridge.configureExtension({
+        placeholder: 'Hey there! Start typing...',
+      }),
+      LinkBridge.configureExtension({ openOnClick: false }),
+    ],
+  });
+
+  return (
+    <SafeAreaView style={exampleStyles.fullScreen}>
+      <View style={exampleStyles.fullScreen}>
+        <RichText editor={editor} />
+      </View>
+      <View style={exampleStyles.fullScreen}>
+        <Button
+          title="Click Me To Add Link"
+          onPress={() => {
+            editor.setContent(
+              '<a href="https://10play.github.io/10tap-editor">Link To TenTap!</a>'
+            );
+          }}
+        />
+        <Button
+          title="Click Me To Show PlaceHolder"
+          onPress={() => {
+            editor.setContent('');
+          }}
+        />
+      </View>
+    </SafeAreaView>
+  );
+};
+
+const exampleStyles = StyleSheet.create({
+  fullScreen: {
+    flex: 1,
+  },
+  keyboardAvoidingView: {
+    position: 'absolute',
+    width: '100%',
+    bottom: 0,
+  },
+});

website/docs/examples/basic.md

@@ -50,23 +50,6 @@ We need wrap the entire the toolbar and keyboard in a `KeyboardAvoidingView` to
 </KeyboardAvoidingView>
 ```
 
-## Configuring Placeholder and Link
-
-Let's also configure the PlaceholderBridge and LinkBridge
-We can do this with the `configureExtension` function on each Bridge. This can be used to configure any of the TipTaps Extension options
-
-```tsx
-const editor = useEditorBridge({
-    bridgeExtensions: [
-        ...,
-        PlaceholderBridge.configureExtension({
-          placeholder: 'Type something...',
-        }),
-        LinkBridge.configureExtension({ openOnClick: false }),
-    ],
-  });
-```
-
 ## Full Example
 
 ```tsx

website/docs/examples/colorKeyboard.md

@@ -1,5 +1,5 @@
 ---
-sidebar_position: 3
+sidebar_position: 4
 ---
 
 # Using The ColorKeyboard

website/docs/examples/configureExtensions.md

@@ -0,0 +1,24 @@
+---
+sidebar_position: 3
+---
+
+# Configure Extensions
+
+In this example we will configure some extensions. Each bridge comes with the `configureExtension` function, that configures it's underline tiptap extension.
+
+## Configuring Placeholder and Link
+
+First we can check which options are available to extend on the tiptap docs.
+In our case let's extent the placeholder to show custom text, and the link extension to not open links when clicking them
+
+```tsx
+const editor = useEditorBridge({
+    bridgeExtensions: [
+        ...,
+        PlaceholderBridge.configureExtension({
+          placeholder: 'Type something...',
+        }),
+        LinkBridge.configureExtension({ openOnClick: false }),
+    ],
+  });
+```

website/sidebars.ts

@@ -8,6 +8,7 @@ const sidebars: SidebarsConfig = {
     examples: [
       'examples/basic',
       'examples/customCss',
+      'examples/configureExtensions',
       'examples/colorKeyboard',
     ],
   },