From 431e78a66dcacbb769bcb7e41a3c9d61de732759 Mon Sep 17 00:00:00 2001
From: Amir Angel <36531255+17Amir17@users.noreply.github.com>
Date: Thu, 8 Feb 2024 18:54:41 +0200
Subject: [PATCH] fix: add configureExtension

---
 example/src/App.tsx                          |  5 ++
 example/src/Examples/ConfigureExtentions.tsx | 63 ++++++++++++++++++++
 website/docs/examples/basic.md               | 17 ------
 website/docs/examples/colorKeyboard.md       |  2 +-
 website/docs/examples/configureExtensions.md | 24 ++++++++
 website/sidebars.ts                          |  1 +
 6 files changed, 94 insertions(+), 18 deletions(-)
 create mode 100644 example/src/Examples/ConfigureExtentions.tsx
 create mode 100644 website/docs/examples/configureExtensions.md

diff --git a/example/src/App.tsx b/example/src/App.tsx
index f3ac3dc..e9ed807 100644
--- a/example/src/App.tsx
+++ b/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,
diff --git a/example/src/Examples/ConfigureExtentions.tsx b/example/src/Examples/ConfigureExtentions.tsx
new file mode 100644
index 0000000..f2bc7a4
--- /dev/null
+++ b/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,
+  },
+});
diff --git a/website/docs/examples/basic.md b/website/docs/examples/basic.md
index 322c38d..5c0ce64 100644
--- a/website/docs/examples/basic.md
+++ b/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
diff --git a/website/docs/examples/colorKeyboard.md b/website/docs/examples/colorKeyboard.md
index 5a3fd1d..8471f27 100644
--- a/website/docs/examples/colorKeyboard.md
+++ b/website/docs/examples/colorKeyboard.md
@@ -1,5 +1,5 @@
 ---
-sidebar_position: 3
+sidebar_position: 4
 ---
 
 # Using The ColorKeyboard
diff --git a/website/docs/examples/configureExtensions.md b/website/docs/examples/configureExtensions.md
new file mode 100644
index 0000000..db34b42
--- /dev/null
+++ b/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 }),
+    ],
+  });
+```
diff --git a/website/sidebars.ts b/website/sidebars.ts
index a34c5e1..d67c97b 100644
--- a/website/sidebars.ts
+++ b/website/sidebars.ts
@@ -8,6 +8,7 @@ const sidebars: SidebarsConfig = {
     examples: [
       'examples/basic',
       'examples/customCss',
+      'examples/configureExtensions',
       'examples/colorKeyboard',
     ],
   },