Add Static Toolbar

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',

example/src/Examples/Compose/Compose.tsx → 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,13 +62,37 @@ export const Compose = ({
             style={[exampleStyles.textPrimary, exampleStyles.recipientField]}
             placeholder="Subject"
           />
+          <StaticToolbar editor={editor} />
         </View>
       </View>
       <ComposeRichText editor={editor} onSendClick={onSendClick} />
     </SafeAreaView>
   );
 };
 
+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>`;

example/src/assets/index.ts

@@ -3,11 +3,15 @@ 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,
   send,
   formatting,
   bold,
   h1,
+  undo,
+  redo,
 };