New Toolbar API & New Styling

src/RichText/Toolbar/Separator.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { StyleSheet, View } from 'react-native';
+
+export const Separator = () => (
+  <View style={styles.separatorContainer}>
+    <View style={styles.separatorLine} />
+  </View>
+);
+
+const styles = StyleSheet.create({
+  separatorContainer: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginHorizontal: 5,
+    height: '100%',
+  },
+  separatorLine: {
+    width: 1,
+    height: '60%',
+    backgroundColor: '#DEE0E3',
+  },
+});

src/RichText/Toolbar/Toolbar.tsx

@@ -1,105 +1,232 @@
-import { FlatList, StyleSheet, Platform } from 'react-native';
-import { useBridgeState } from '../useBridgeState';
 import React from 'react';
 import {
+  FlatList,
+  Platform,
+  View,
+  TouchableOpacity,
+  Image,
+} from 'react-native';
+import { useBridgeState } from '../useBridgeState';
+import {
+  STICKY_KEYBOARD,
   DEFAULT_TOOLBAR_ITEMS,
+  TOOLBAR_SECTIONS,
   HEADING_ITEMS,
-  type ToolbarItem,
 } from './actions';
-import { EditLinkBar } from './EditLinkBar';
 import { useKeyboard } from '../../utils';
-import type { EditorBridge } from '../../types';
 import { ToolbarItemComp } from './ToolbarItemComp';
 import { WebToolbar } from './WebToolbar';
+import { Separator } from './Separator';
+import { EditLinkBar } from './EditLinkBar';
+import type {
+  ToolbarProps,
+  ToolbarSection,
+  ArgsToolbarCB,
+  ToolbarContextConfig,
+} from './ToolbarTypes';
 
-interface ToolbarProps {
-  editor: EditorBridge;
-  hidden?: boolean;
-  items?: ToolbarItem[];
-}
-
-export const toolbarStyles = StyleSheet.create({});
-
-export enum ToolbarContext {
-  Main,
-  Link,
-  Heading,
-}
+export type ToolbarContext = 'Main' | 'Link' | 'Heading' | string;
 
 export function Toolbar({
   editor,
   hidden = undefined,
   items = DEFAULT_TOOLBAR_ITEMS,
+  sections = TOOLBAR_SECTIONS,
+  contexts = {},
+  showStickyKeyboard = false,
+  stickyKeyboardPosition = 'right',
 }: ToolbarProps) {
   const editorState = useBridgeState(editor);
   const { isKeyboardUp } = useKeyboard();
-  const [toolbarContext, setToolbarContext] = React.useState<ToolbarContext>(
-    ToolbarContext.Main
-  );
+  const [toolbarContext, setToolbarContext] =
+    React.useState<ToolbarContext>('Main');
+  const [isStickyKeyboardActive, setIsStickyKeyboardActive] =
+    React.useState(false);
+
+  React.useEffect(() => {
+    // Effect to show/hide the keyboard and toolbar
+    if (editorState.isFocused) {
+      setIsStickyKeyboardActive(false);
+    }
+  }, [editorState.isFocused]);
 
   const hideToolbar =
-    hidden === undefined ? !isKeyboardUp || !editorState.isFocused : hidden;
+    hidden === undefined
+      ? !isKeyboardUp || !editorState.isFocused || isStickyKeyboardActive
+      : hidden || isStickyKeyboardActive;
 
-  const args = {
+  const args: ArgsToolbarCB = {
     editor,
     editorState,
     setToolbarContext,
     toolbarContext,
   };
 
-  switch (toolbarContext) {
-    case ToolbarContext.Main:
-    case ToolbarContext.Heading:
-      if (Platform.OS === 'web') {
+  const renderSection = ({
+    section,
+    isLast,
+  }: {
+    section: ToolbarSection;
+    isLast: boolean;
+  }) => (
+    <>
+      <View style={editor.theme.toolbar.section}>
+        {section.items.map((item, index) => (
+          <ToolbarItemComp key={index} {...item} args={args} editor={editor} />
+        ))}
+      </View>
+      {!isLast && <Separator />}
+    </>
+  );
+
+  const getSectionsWithSeparators = (
+    sectionsToUse: Record<string, ToolbarSection>
+  ) => {
+    const sectionEntries = Object.entries(sectionsToUse);
+    return sectionEntries.map((entry, index) => ({
+      key: entry[0],
+      section: entry[1],
+      isLast: index === sectionEntries.length - 1,
+    }));
+  };
+
+  const renderStickyKeyboard = () => (
+    <TouchableOpacity
+      style={[
+        editor.theme.toolbar.toolbarButton,
+        editor.theme.toolbar.stickyKeyboardContainer,
+      ]}
+      onPress={() => {
+        setIsStickyKeyboardActive(!isStickyKeyboardActive);
+        if (!isStickyKeyboardActive) {
+          editor.blur();
+        }
+        STICKY_KEYBOARD.onPress(args)();
+      }}
+    >
+      <View style={editor.theme.toolbar.iconWrapper}>
+        <Image
+          source={STICKY_KEYBOARD.image(args)}
+          style={editor.theme.toolbar.icon}
+        />
+      </View>
+    </TouchableOpacity>
+  );
+
+  const renderToolbarContent = () => {
+    const currentContext: ToolbarContextConfig | undefined =
+      contexts[toolbarContext];
+
+    if (currentContext) {
+      if (currentContext.component) {
+        const CustomComponent = currentContext.component;
+        return <CustomComponent {...args} />;
+      }
+      if (currentContext.sections) {
         return (
-          <WebToolbar
-            items={
-              toolbarContext === ToolbarContext.Main ? items : HEADING_ITEMS
-            }
-            args={args}
-            editor={editor}
-            hidden={hidden}
+          <FlatList
+            data={getSectionsWithSeparators(currentContext.sections)}
+            style={[
+              editor.theme.toolbar.flatList,
+              hideToolbar && editor.theme.toolbar.hidden,
+            ]}
+            renderItem={({ item }) => renderSection(item)}
+            keyExtractor={(item) => item.key}
+            horizontal
           />
         );
       }
-      return (
-        <FlatList
-          data={toolbarContext === ToolbarContext.Main ? items : HEADING_ITEMS}
-          style={[
-            editor.theme.toolbar.toolbarBody,
-            hideToolbar ? editor.theme.toolbar.hidden : undefined,
-          ]}
-          renderItem={({ item }) => {
-            return <ToolbarItemComp {...item} args={args} editor={editor} />;
-          }}
-          horizontal
-        />
-      );
-    case ToolbarContext.Link:
-      return (
-        <EditLinkBar
-          theme={editor.theme}
-          initialLink={editorState.activeLink}
-          onBlur={() => setToolbarContext(ToolbarContext.Main)}
-          onLinkIconClick={() => {
-            setToolbarContext(ToolbarContext.Main);
-            editor.focus();
-          }}
-          onEditLink={(link) => {
-            editor.setLink(link);
-            editor.focus();
-
-            if (Platform.OS === 'android') {
-              // On android we dont want to hide the link input before we finished focus on editor
-              // Add here 100ms and we can try to find better solution later
-              setTimeout(() => {
-                setToolbarContext(ToolbarContext.Main);
-              }, 100);
-            } else {
-              setToolbarContext(ToolbarContext.Main);
-            }
-          }}
-        />
-      );
+    }
+
+    // Fallback to default behavior for Main context and undefined contexts
+    const sectionsToUse =
+      toolbarContext === 'Main'
+        ? sections
+        : toolbarContext === 'Heading'
+        ? { heading: { items: HEADING_ITEMS } }
+        : {};
+    return (
+      <FlatList
+        data={getSectionsWithSeparators(sectionsToUse)}
+        scrollIndicatorInsets={{ bottom: -3 }}
+        style={[
+          editor.theme.toolbar.flatList,
+          hideToolbar && editor.theme.toolbar.hidden,
+        ]}
+        renderItem={({ item }) => renderSection(item)}
+        keyExtractor={(item) => item.key}
+        horizontal
+      />
+    );
+  };
+
+  if (Platform.OS === 'web') {
+    const currentContext = contexts[toolbarContext];
+    const webItems = currentContext?.sections
+      ? Object.values(currentContext.sections).flatMap(
+          (section) => section.items
+        )
+      : toolbarContext === 'Main'
+      ? items
+      : toolbarContext === 'Heading'
+      ? HEADING_ITEMS
+      : [];
+
+    return (
+      <WebToolbar
+        items={webItems}
+        args={args}
+        editor={editor}
+        hidden={hidden}
+        sections={
+          currentContext?.sections ||
+          (toolbarContext === 'Main' ? sections : undefined)
+        }
+      />
+    );
+  }
+
+  if (toolbarContext === 'Link') {
+    return (
+      <EditLinkBar
+        theme={editor.theme}
+        initialLink={editorState.activeLink}
+        onBlur={() => setToolbarContext('Main')}
+        onLinkIconClick={() => {
+          setToolbarContext('Main');
+          editor.focus();
+        }}
+        onEditLink={(link) => {
+          editor.setLink(link);
+          editor.focus();
+
+          if (Platform.OS === 'android') {
+            // On android we dont want to hide the link input before we finished focus on editor
+            // Add here 100ms and we can try to find better solution later
+            setTimeout(() => {
+              setToolbarContext('Main');
+            }, 100);
+          } else {
+            setToolbarContext('Main');
+          }
+        }}
+      />
+    );
   }
+
+  if (isStickyKeyboardActive && !editorState.isFocused) {
+    return null;
+  }
+
+  return (
+    <View style={editor.theme.toolbar.toolbarBody}>
+      {showStickyKeyboard &&
+        stickyKeyboardPosition === 'left' &&
+        renderStickyKeyboard()}
+      {renderToolbarContent()}
+      {showStickyKeyboard &&
+        stickyKeyboardPosition === 'right' &&
+        renderStickyKeyboard()}
+    </View>
+  );
 }

src/RichText/Toolbar/ToolbarItemComp.tsx

@@ -10,6 +10,7 @@ export const ToolbarItemComp = ({
   image,
   editor,
   args,
+  style,
 }: ToolbarItem & {
   editor: EditorBridge;
   args: Parameters<ToolbarItem['onPress']>[0];
@@ -33,6 +34,7 @@ export const ToolbarItemComp = ({
             editor.theme.toolbar.icon,
             active(args) ? editor.theme.toolbar.iconActive : undefined,
             disabled(args) ? editor.theme.toolbar.iconDisabled : undefined,
+            style,
           ]}
           resizeMode="contain"
         />

src/RichText/Toolbar/ToolbarTypes.ts

@@ -0,0 +1,48 @@
+import type { EditorBridge } from '../../types';
+import { type BridgeState } from '../../types/EditorBridge';
+import { type ToolbarContext } from './Toolbar';
+
+export type ArgsToolbarCB = {
+  editor: EditorBridge;
+  editorState: BridgeState;
+  setToolbarContext: (
+    ToolbarContext: ToolbarContext | ((prev: ToolbarContext) => ToolbarContext)
+  ) => void;
+  toolbarContext: ToolbarContext;
+};
+
+export interface ToolbarItem {
+  onPress: ({
+    editor,
+    editorState,
+    setToolbarContext,
+  }: ArgsToolbarCB) => () => void;
+  active: ({ editor, editorState }: ArgsToolbarCB) => boolean;
+  disabled: ({ editor, editorState }: ArgsToolbarCB) => boolean;
+  image: ({ editor, editorState }: ArgsToolbarCB) => any;
+  style?: any;
+}
+
+export interface ToolbarSection {
+  items: ToolbarItem[];
+  sectionComponent?: React.ComponentType<{
+    items: ToolbarItem[];
+    itemRenderer?: (item: ToolbarItem) => React.ReactNode;
+  }>;
+}
+
+export interface ToolbarProps {
+  editor: EditorBridge;
+  hidden?: boolean;
+  items?: ToolbarItem[];
+  contexts?: Record<ToolbarContext, ToolbarContextConfig>;
+  sections?: Record<string, ToolbarSection>;
+  itemRenderer?: (item: ToolbarItem) => React.ReactNode | null;
+  showStickyKeyboard?: boolean;
+  stickyKeyboardPosition?: 'left' | 'right';
+}
+
+export interface ToolbarContextConfig {
+  component?: React.ComponentType<ArgsToolbarCB>;
+  sections?: Record<string, ToolbarSection>;
+}