From 62795f16ae288e667c557560fdd8940a432c8cea Mon Sep 17 00:00:00 2001
From: Amir Angel <36531255+17Amir17@users.noreply.github.com>
Date: Tue, 13 Feb 2024 17:25:44 +0200
Subject: [PATCH] fix: add static toolbar

---
 example/src/App.tsx                           |  6 +--
 .../CustomAndStaticToolbar.tsx}               | 38 +++++++++++++++++--
 .../CustomRichText.tsx}                       |  0
 example/src/assets/index.ts                   |  4 ++
 example/src/assets/redo.svg                   |  4 ++
 example/src/assets/undo.svg                   |  4 ++
 6 files changed, 49 insertions(+), 7 deletions(-)
 rename example/src/Examples/{Compose/Compose.tsx => CustomAndStaticToolbar/CustomAndStaticToolbar.tsx} (73%)
 rename example/src/Examples/{Compose/ComposeRichText.tsx => CustomAndStaticToolbar/CustomRichText.tsx} (100%)
 create mode 100644 example/src/assets/redo.svg
 create mode 100644 example/src/assets/undo.svg

diff --git a/example/src/App.tsx b/example/src/App.tsx
index db9fb06..b23290e 100644
--- a/example/src/App.tsx
+++ b/example/src/App.tsx
@@ -9,7 +9,7 @@ import { Basic } from './Examples/Basic';
 import { CustomKeyboardExample } from './Examples/CustomKeyboardExample';
 import { EditorStickToKeyboardExample } from './Examples/EditorStickToKeyboardExample';
 import { Advanced } from './Examples/Advanced/AdvancedRichText';
-import { Compose } from './Examples/Compose/Compose';
+import { CustomAndStaticToolbar } from './Examples/CustomAndStaticToolbar/CustomAndStaticToolbar';
 import { WithKeyboard } from './Examples/WithKeyboard';
 import { CustomCss } from './Examples/CustomCss';
 import { ConfigureExtensions } from './Examples/ConfigureExtentions';
@@ -45,8 +45,8 @@ const examples = [
     component: NavigationHeader,
   },
   {
-    name: 'Compose',
-    component: Compose,
+    name: 'CustomAndStaticToolbar',
+    component: CustomAndStaticToolbar,
   },
   {
     name: 'Advanced',
diff --git a/example/src/Examples/Compose/Compose.tsx b/example/src/Examples/CustomAndStaticToolbar/CustomAndStaticToolbar.tsx
similarity index 73%
rename from example/src/Examples/Compose/Compose.tsx
rename to example/src/Examples/CustomAndStaticToolbar/CustomAndStaticToolbar.tsx
index 08aa172..d8468c8 100644
--- a/example/src/Examples/Compose/Compose.tsx
+++ b/example/src/Examples/CustomAndStaticToolbar/CustomAndStaticToolbar.tsx
@@ -9,16 +9,19 @@ import {
   TextInput,
   Alert,
 } from 'react-native';
-import { useEditorBridge } from '@10play/tentap-editor';
+import {
+  useEditorBridge,
+  useBridgeState,
+  type EditorBridge,
+} from '@10play/tentap-editor';
 import { Icon } from '../Icon';
-import { ComposeRichText } from './ComposeRichText';
+import { ComposeRichText } from './CustomRichText';
 
-export const Compose = ({
+export const CustomAndStaticToolbar = ({
   navigation,
 }: NativeStackScreenProps<any, any, any>) => {
   const editor = useEditorBridge({
     avoidIosKeyboard: true,
-    DEV: true,
     initialContent: MAIL_INITIAL_CONTENT,
   });
 
@@ -59,6 +62,7 @@ export const Compose = ({
             style={[exampleStyles.textPrimary, exampleStyles.recipientField]}
             placeholder="Subject"
           />
+          <StaticToolbar editor={editor} />
         </View>
       </View>
       <ComposeRichText editor={editor} onSendClick={onSendClick} />
@@ -66,6 +70,29 @@ export const Compose = ({
   );
 };
 
+interface StaticToolbarProps {
+  editor: EditorBridge;
+}
+const StaticToolbar = ({ editor }: StaticToolbarProps) => {
+  const editorState = useBridgeState(editor);
+  return (
+    <View style={[exampleStyles.recipientField, exampleStyles.staticToolbar]}>
+      <TouchableOpacity onPress={editor.undo} disabled={!editorState.canUndo}>
+        <Icon
+          name={'undo'}
+          fill={editorState.canUndo ? 'black' : 'lightgray'}
+        />
+      </TouchableOpacity>
+      <TouchableOpacity onPress={editor.redo} disabled={!editorState.canRedo}>
+        <Icon
+          name={'redo'}
+          fill={editorState.canRedo ? 'black' : 'lightgray'}
+        />
+      </TouchableOpacity>
+    </View>
+  );
+};
+
 const exampleStyles = StyleSheet.create({
   fullScreen: {
     flex: 1,
@@ -100,6 +127,9 @@ const exampleStyles = StyleSheet.create({
     fontSize: 14,
     color: 'grey',
   },
+  staticToolbar: {
+    justifyContent: 'flex-end',
+  },
 });
 
 const MAIL_INITIAL_CONTENT = `<p><br><br><br><br><a target="_blank" rel="noopener noreferrer nofollow" href="https://www.10play.dev">Sent With Tentap!</a></p>`;
diff --git a/example/src/Examples/Compose/ComposeRichText.tsx b/example/src/Examples/CustomAndStaticToolbar/CustomRichText.tsx
similarity index 100%
rename from example/src/Examples/Compose/ComposeRichText.tsx
rename to example/src/Examples/CustomAndStaticToolbar/CustomRichText.tsx
diff --git a/example/src/assets/index.ts b/example/src/assets/index.ts
index 2bff67e..57fb21e 100644
--- a/example/src/assets/index.ts
+++ b/example/src/assets/index.ts
@@ -3,6 +3,8 @@ import send from './send.svg';
 import formatting from './formatting.svg';
 import bold from './bold.svg';
 import h1 from './h1.svg';
+import undo from './undo.svg';
+import redo from './redo.svg';
 
 export const icons = {
   close,
@@ -10,4 +12,6 @@ export const icons = {
   formatting,
   bold,
   h1,
+  undo,
+  redo,
 };
diff --git a/example/src/assets/redo.svg b/example/src/assets/redo.svg
new file mode 100644
index 0000000..324d5af
--- /dev/null
+++ b/example/src/assets/redo.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-clockwise" viewBox="0 0 16 16">
+  <path fill-rule="evenodd" d="M8 3a5 5 0 1 0 4.546 2.914.5.5 0 0 1 .908-.417A6 6 0 1 1 8 2z"/>
+  <path d="M8 4.466V.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384L8.41 4.658A.25.25 0 0 1 8 4.466"/>
+</svg>
\ No newline at end of file
diff --git a/example/src/assets/undo.svg b/example/src/assets/undo.svg
new file mode 100644
index 0000000..3d9ff62
--- /dev/null
+++ b/example/src/assets/undo.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-counterclockwise" viewBox="0 0 16 16">
+  <path fill-rule="evenodd" d="M8 3a5 5 0 1 1-4.546 2.914.5.5 0 0 0-.908-.417A6 6 0 1 0 8 2z"/>
+  <path d="M8 4.466V.534a.25.25 0 0 0-.41-.192L5.23 2.308a.25.25 0 0 0 0 .384l2.36 1.966A.25.25 0 0 0 8 4.466"/>
+</svg>
\ No newline at end of file