@apollohg/react-native-rich-text-editor 2.0.0 → 2.0.2

package/src/useEditorToolbarItems.tsx

@@ -1,5 +1,5 @@
 import { useCallback, useMemo } from 'react';
-import { useEditorToolbarState } from './useEditorToolbarState';
+import { type useEditorToolbarState } from './useEditorToolbarState';
 import {
     type EditorToolbarLeafItem,
     type EditorToolbarItemPlacement,
@@ -88,6 +88,7 @@ export function useEditorToolbarItems(
                     if (onToggleMark) {
                         return () => onToggleMark(item.mark);
                     }
+
                     switch (item.mark) {
                         case 'bold':
                             return onToggleBold;
@@ -100,10 +101,12 @@ export function useEditorToolbarItems(
                         default:
                             return null;
                     }
+
                 case 'list':
                     if (onToggleListType) {
                         return () => onToggleListType(item.listType);
                     }
+
                     return item.listType === 'bulletList' || item.listType === 'bullet_list'
                         ? (onToggleBulletList ?? null)
                         : (onToggleOrderedList ?? null);
@@ -115,10 +118,12 @@ export function useEditorToolbarItems(
                     return onToggleHeading ? () => onToggleHeading(item.level) : null;
                 case 'blockquote':
                     return onToggleBlockquote ?? null;
+
                 case 'node':
                     if (onInsertNodeType) {
                         return () => onInsertNodeType(item.nodeType);
                     }
+
                     switch (item.nodeType) {
                         case 'hardBreak':
                         case 'hard_break':
@@ -129,10 +134,12 @@ export function useEditorToolbarItems(
                         default:
                             return null;
                     }
+
                 case 'command':
                     if (onRunCommand) {
                         return () => onRunCommand(item.command);
                     }
+
                     switch (item.command) {
                         case 'indentList':
                             return onIndentList ?? null;
@@ -143,6 +150,8 @@ export function useEditorToolbarItems(
                         case 'redo':
                             return onRedo;
                     }
+
+                    // Falls through for unsupported commands.
                 case 'action':
                     return onToolbarAction ? () => onToolbarAction(item.key) : null;
             }
@@ -177,22 +186,22 @@ export function useEditorToolbarItems(
             item.key != null
                 ? `${prefix}${item.key}`
                 : item.type === 'mark'
-                  ? `${prefix}mark:${item.mark}:${index}`
-                  : item.type === 'link'
-                    ? `${prefix}link:${index}`
-                    : item.type === 'image'
-                      ? `${prefix}image:${index}`
-                      : item.type === 'heading'
-                        ? `${prefix}heading:${item.level}:${index}`
-                        : item.type === 'blockquote'
-                          ? `${prefix}blockquote:${index}`
-                          : item.type === 'list'
-                            ? `${prefix}list:${item.listType}:${index}`
-                            : item.type === 'command'
-                              ? `${prefix}command:${item.command}:${index}`
-                              : item.type === 'node'
-                                ? `${prefix}node:${item.nodeType}:${index}`
-                                : `${prefix}action:${item.key}:${index}`,
+                    ? `${prefix}mark:${item.mark}:${index}`
+                    : item.type === 'link'
+                        ? `${prefix}link:${index}`
+                        : item.type === 'image'
+                            ? `${prefix}image:${index}`
+                            : item.type === 'heading'
+                                ? `${prefix}heading:${item.level}:${index}`
+                                : item.type === 'blockquote'
+                                    ? `${prefix}blockquote:${index}`
+                                    : item.type === 'list'
+                                        ? `${prefix}list:${item.listType}:${index}`
+                                        : item.type === 'command'
+                                            ? `${prefix}command:${item.command}:${index}`
+                                            : item.type === 'node'
+                                                ? `${prefix}node:${item.nodeType}:${index}`
+                                                : `${prefix}action:${String(item.key)}:${index}`,
         []
     );
 
@@ -206,12 +215,14 @@ export function useEditorToolbarItems(
         ): ToolbarButton | null => {
             const resolvedPlacement = resolveToolbarItemPlacement(item.placement ?? placement);
             const action = getActionForItem(item);
+
             if (!action) {
                 return null;
             }
 
             let isActive = false;
             let isDisabled = false;
+
             switch (item.type) {
                 case 'mark':
                     isActive = isMarkActive(item.mark);
@@ -224,24 +235,28 @@ export function useEditorToolbarItems(
                 case 'image':
                     isDisabled = !insertableNodes.includes('image') || !onRequestImage;
                     break;
+
                 case 'heading': {
                     const headingNodeType = `h${item.level}`;
                     isActive = !!nodes[headingNodeType];
                     isDisabled = !commands[`toggleHeading${item.level}`];
                     break;
                 }
+
                 case 'blockquote':
                     isActive = !!nodes['blockquote'];
                     isDisabled = !commands['toggleBlockquote'];
                     break;
                 case 'list':
                     isActive = !!nodes[item.listType];
+
                     isDisabled =
                         !commands[
                             item.listType === 'bulletList' || item.listType === 'bullet_list'
                                 ? 'wrapBulletList'
                                 : 'wrapOrderedList'
                         ];
+
                     break;
                 case 'command':
                     switch (item.command) {
@@ -258,6 +273,7 @@ export function useEditorToolbarItems(
                             isDisabled = !historyState.canRedo;
                             break;
                     }
+
                     break;
                 case 'action':
                     isActive = !!item.isActive;
@@ -304,8 +320,10 @@ export function useEditorToolbarItems(
             if (entry.type !== 'separator') {
                 return true;
             }
+
             const previous = list[index - 1];
             const next = list[index + 1];
+
             return (
                 previous != null &&
                 previous.type !== 'separator' &&
@@ -319,6 +337,7 @@ export function useEditorToolbarItems(
         const scrollEntries: ToolbarRenderedItem[] = [];
         const endEntries: ToolbarRenderedItem[] = [];
         const nextGroups = new Map<string, ToolbarGroupButton>();
+
         const entriesForPlacement = (placement: EditorToolbarItemPlacement) =>
             placement === 'start' ? startEntries : placement === 'end' ? endEntries : scrollEntries;
 
@@ -326,27 +345,31 @@ export function useEditorToolbarItems(
             const item = toolbarItems[index];
             const placement = resolveToolbarItemPlacement(item.placement);
             const targetEntries = entriesForPlacement(placement);
+
             if (item.type === 'separator') {
                 targetEntries.push({
                     type: 'separator',
                     key: item.key ?? `separator:${index}`,
                     placement,
                 });
+
                 continue;
             }
 
             if (item.type === 'group') {
                 const children = item.items
                     .map((child, childIndex) =>
-                        resolveButton(child, childIndex, `${item.key}:`, item.key, placement)
-                    )
+                        resolveButton(child, childIndex, `${item.key}:`, item.key, placement))
                     .filter((child): child is ToolbarButton => child != null);
+
                 if (children.length === 0) {
                     continue;
                 }
+
                 const presentation = item.presentation ?? 'expand';
                 const isExpanded = presentation === 'expand' && expandedGroupKey === item.key;
                 const isMenuOpen = presentation === 'menu' && menuState?.groupKey === item.key;
+
                 const group: ToolbarGroupButton = {
                     key: item.key,
                     label: item.label,
@@ -355,13 +378,15 @@ export function useEditorToolbarItems(
                     presentation,
                     placement,
                     children,
-                    isActive: children.some((child) => child.isActive) || isExpanded || isMenuOpen,
-                    isDisabled: children.every((child) => child.isDisabled),
+                    isActive: children.some(child => child.isActive) || isExpanded || isMenuOpen,
+                    isDisabled: children.every(child => child.isDisabled),
                     isExpanded,
                     isOpen: isExpanded || isMenuOpen,
                 };
+
                 nextGroups.set(group.key, group);
                 targetEntries.push({ type: 'group', group });
+
                 if (group.isExpanded) {
                     for (const child of children) {
                         entriesForPlacement(child.placement).push({
@@ -370,10 +395,12 @@ export function useEditorToolbarItems(
                         });
                     }
                 }
+
                 continue;
             }
 
             const button = resolveButton(item, index, '', undefined, placement);
+
             if (button) {
                 targetEntries.push({ type: 'button', button });
             }
@@ -385,6 +412,7 @@ export function useEditorToolbarItems(
             endItems: compactRenderedItems(endEntries),
             groupsByKey: nextGroups,
         };
-    }, [expandedGroupKey, menuState?.groupKey, resolveButton, toolbarItems]);
+    }, [ expandedGroupKey, menuState?.groupKey, resolveButton, toolbarItems ]);
+
     return { startItems, scrollItems, endItems, groupsByKey };
 }

package/src/useEditorToolbarPresentation.tsx

@@ -1,7 +1,7 @@
 import { Modal, Pressable, ScrollView, Text, TouchableOpacity, View } from 'react-native';
-import { useEditorToolbarState } from './useEditorToolbarState';
-import { useEditorToolbarItems } from './useEditorToolbarItems';
-import { useEditorToolbarInteractions } from './useEditorToolbarInteractions';
+import { type useEditorToolbarState } from './useEditorToolbarState';
+import { type useEditorToolbarItems } from './useEditorToolbarItems';
+import { type useEditorToolbarInteractions } from './useEditorToolbarInteractions';
 import {
     BUTTON_VISIBLE,
     TOOLBAR_PADDING_V,
@@ -106,50 +106,57 @@ export function useEditorToolbarPresentation(
         menuState == null
             ? 0
             : Math.max(
-                  MENU_MARGIN,
-                  Math.min(
-                      menuState.y + menuState.height + 8,
-                      windowHeight - menuHeight - MENU_MARGIN
-                  )
-              );
+                MENU_MARGIN,
+                Math.min(
+                    menuState.y + menuState.height + 8,
+                    windowHeight - menuHeight - MENU_MARGIN
+                )
+            );
 
     const menuLeft =
         menuState == null
             ? 0
             : Math.max(
-                  MENU_MARGIN,
-                  Math.min(
-                      menuState.x + menuState.width - MENU_WIDTH,
-                      windowWidth - MENU_WIDTH - MENU_MARGIN
-                  )
-              );
+                MENU_MARGIN,
+                Math.min(
+                    menuState.x + menuState.width - MENU_WIDTH,
+                    windowWidth - MENU_WIDTH - MENU_MARGIN
+                )
+            );
 
     const resolveButtonVisuals = (
         button: Pick<ToolbarButton, 'buttonStyle' | 'isActive' | 'isDisabled'>
     ) => {
         const activeColor =
             button.buttonStyle?.activeColor ?? theme?.buttonActiveColor ?? ACTIVE_COLOR;
+
         const defaultColor = button.buttonStyle?.color ?? theme?.buttonColor ?? DEFAULT_COLOR;
+
         const disabledColor =
             button.buttonStyle?.disabledColor ?? theme?.buttonDisabledColor ?? DISABLED_COLOR;
+
         const backgroundColor =
             button.buttonStyle?.backgroundColor ?? theme?.buttonBackgroundColor ?? 'transparent';
+
         const activeBackgroundColor =
             button.buttonStyle?.activeBackgroundColor ??
             theme?.buttonActiveBackgroundColor ??
             ACTIVE_BG;
+
         const disabledBackgroundColor =
             button.buttonStyle?.disabledBackgroundColor ??
             theme?.buttonDisabledBackgroundColor ??
             (button.isActive ? activeBackgroundColor : backgroundColor);
+
         const requestedIconSize = button.buttonStyle?.iconSize ?? theme?.buttonIconSize;
+
         return {
             color: button.isDisabled ? disabledColor : button.isActive ? activeColor : defaultColor,
             backgroundColor: button.isDisabled
                 ? disabledBackgroundColor
                 : button.isActive
-                  ? activeBackgroundColor
-                  : backgroundColor,
+                    ? activeBackgroundColor
+                    : backgroundColor,
             iconSize:
                 requestedIconSize != null &&
                 Number.isFinite(requestedIconSize) &&
@@ -184,16 +191,17 @@ export function useEditorToolbarPresentation(
                 ref={
                     anchorGroupKey == null
                         ? undefined
-                        : (node) => {
-                              if (node) {
-                                  groupButtonRefs.current.set(anchorGroupKey, node);
-                              } else {
-                                  groupButtonRefs.current.delete(anchorGroupKey);
-                              }
-                          }
+                        : node => {
+                            if (node) {
+                                groupButtonRefs.current.set(anchorGroupKey, node);
+                            } else {
+                                groupButtonRefs.current.delete(anchorGroupKey);
+                            }
+                        }
                 }
                 collapsable={false}
-                style={styles.buttonAnchor}>
+                style={styles.buttonAnchor}
+            >
                 <TouchableOpacity
                     onPressIn={handleToolbarPressIn}
                     onPressOut={handleToolbarPressOut}
@@ -208,13 +216,14 @@ export function useEditorToolbarPresentation(
                         },
                     ]}
                     activeOpacity={0.5}
-                    accessibilityRole='button'
+                    accessibilityRole={'button'}
                     accessibilityLabel={button.label}
                     accessibilityState={{
                         selected: button.isActive,
                         disabled: button.isDisabled,
                         expanded: options?.showsDisclosure ? options.expanded : undefined,
-                    }}>
+                    }}
+                >
                     <View>
                         <ToolbarIcon
                             icon={button.icon}
@@ -224,7 +233,7 @@ export function useEditorToolbarPresentation(
                     </View>
                 </TouchableOpacity>
                 {options?.showsDisclosure ? (
-                    <Text style={[styles.groupDisclosure, { color: visuals.color }]}>
+                    <Text style={[ styles.groupDisclosure, { color: visuals.color } ]}>
                         {'\u25BE'}
                     </Text>
                 ) : null}
@@ -244,10 +253,11 @@ export function useEditorToolbarPresentation(
     );
 
     const renderToolbarItems = (items: ToolbarRenderedItem[]) =>
-        items.map((item) => {
+        items.map(item => {
             if (item.type === 'separator') {
                 return renderSeparator(item.key);
             }
+
             if (item.type === 'group') {
                 return renderButton(
                     {
@@ -266,13 +276,14 @@ export function useEditorToolbarPresentation(
                     }
                 );
             }
+
             return renderButton(item.button, () => handleButtonPress(item.button));
         });
 
     return (
         <View
             ref={rootRef}
-            testID='editor-toolbar-root'
+            testID={'editor-toolbar-root'}
             collapsable={false}
             onLayout={handleToolbarLayout}
             style={[
@@ -296,16 +307,17 @@ export function useEditorToolbarPresentation(
                 {
                     borderRadius: theme?.borderRadius ?? TOOLBAR_RADIUS,
                 },
-            ]}>
+            ]}
+        >
             <View style={styles.toolbarRow}>
                 {startItems.length > 0 ? (
-                    <View style={[styles.fixedSection, styles.startFixedSection]}>
+                    <View style={[ styles.fixedSection, styles.startFixedSection ]}>
                         {renderToolbarItems(startItems)}
                     </View>
                 ) : null}
                 {shouldRenderMentionSuggestions && mentionState != null ? (
                     <ScrollView
-                        testID='editor-toolbar-mention-suggestions'
+                        testID={'editor-toolbar-mention-suggestions'}
                         horizontal
                         showsHorizontalScrollIndicator={false}
                         style={[
@@ -322,30 +334,33 @@ export function useEditorToolbarPresentation(
                             },
                             mentionState.theme?.suggestions?.shadowColor != null
                                 ? {
-                                      shadowColor: mentionState.theme.suggestions.shadowColor,
-                                      shadowOpacity: 0.14,
-                                      shadowRadius: 12,
-                                      shadowOffset: { width: 0, height: 4 },
-                                      elevation: 8,
-                                  }
+                                    shadowColor: mentionState.theme.suggestions.shadowColor,
+                                    shadowOpacity: 0.14,
+                                    shadowRadius: 12,
+                                    shadowOffset: { width: 0, height: 4 },
+                                    elevation: 8,
+                                }
                                 : null,
                         ]}
                         contentContainerStyle={styles.mentionSuggestionsContent}
-                        keyboardShouldPersistTaps='always'>
-                        {mentionState.suggestions.map((suggestion) => {
+                        keyboardShouldPersistTaps={'always'}
+                    >
+                        {mentionState.suggestions.map(suggestion => {
                             const label = resolveMentionSuggestionDisplayLabel(
                                 suggestion,
                                 mentionState.trigger
                             );
+
                             const optionTheme = (
                                 mentionState.suggestionThemes?.[suggestion.key] ??
                                 mentionState.theme
                             )?.suggestions?.option;
+
                             return (
                                 <Pressable
                                     key={suggestion.key}
                                     testID={`editor-toolbar-mention-suggestion-${suggestion.key}`}
-                                    accessibilityRole='button'
+                                    accessibilityRole={'button'}
                                     accessibilityLabel={label}
                                     onPressIn={handleToolbarPressIn}
                                     onPressOut={handleToolbarPressOut}
@@ -361,7 +376,8 @@ export function useEditorToolbarPresentation(
                                             borderWidth: optionTheme?.borderWidth ?? 0,
                                             borderRadius: optionTheme?.borderRadius ?? 12,
                                         },
-                                    ]}>
+                                    ]}
+                                >
                                     {({ pressed }) => (
                                         <>
                                             <Text
@@ -377,7 +393,8 @@ export function useEditorToolbarPresentation(
                                                               '#000000')
                                                             : (optionTheme?.textColor ?? '#000000'),
                                                     },
-                                                ]}>
+                                                ]}
+                                            >
                                                 {label}
                                             </Text>
                                             {suggestion.subtitle ? (
@@ -390,7 +407,8 @@ export function useEditorToolbarPresentation(
                                                                 optionTheme?.secondaryTextColor ??
                                                                 '#8E8E93',
                                                         },
-                                                    ]}>
+                                                    ]}
+                                                >
                                                     {suggestion.subtitle}
                                                 </Text>
                                             ) : null}
@@ -406,13 +424,14 @@ export function useEditorToolbarPresentation(
                         showsHorizontalScrollIndicator={false}
                         style={styles.scrollSection}
                         contentContainerStyle={styles.scrollContent}
-                        keyboardShouldPersistTaps='always'
-                        onScrollBeginDrag={() => setMenuState(null)}>
+                        keyboardShouldPersistTaps={'always'}
+                        onScrollBeginDrag={() => setMenuState(null)}
+                    >
                         {renderToolbarItems(scrollItems)}
                     </ScrollView>
                 )}
                 {endItems.length > 0 ? (
-                    <View style={[styles.fixedSection, styles.endFixedSection]}>
+                    <View style={[ styles.fixedSection, styles.endFixedSection ]}>
                         {renderToolbarItems(endItems)}
                     </View>
                 ) : null}
@@ -421,12 +440,13 @@ export function useEditorToolbarPresentation(
                 <Modal
                     transparent
                     visible
-                    animationType='fade'
-                    onRequestClose={() => setMenuState(null)}>
+                    animationType={'fade'}
+                    onRequestClose={() => setMenuState(null)}
+                >
                     <Pressable style={styles.menuBackdrop} onPress={() => setMenuState(null)}>
                         <View
                             ref={menuCardRef}
-                            testID='editor-toolbar-menu-card'
+                            testID={'editor-toolbar-menu-card'}
                             collapsable={false}
                             onLayout={handleMenuLayout}
                             style={[
@@ -437,9 +457,11 @@ export function useEditorToolbarPresentation(
                                     backgroundColor: theme?.backgroundColor ?? TOOLBAR_BG,
                                     borderColor: theme?.borderColor ?? MENU_BORDER,
                                 },
-                            ]}>
-                            {menuGroup.children.map((button) => {
+                            ]}
+                        >
+                            {menuGroup.children.map(button => {
                                 const visuals = resolveButtonVisuals(button);
+
                                 return (
                                     <Pressable
                                         key={button.key}
@@ -454,21 +476,22 @@ export function useEditorToolbarPresentation(
                                             },
                                             pressed &&
                                                 !button.isDisabled && {
-                                                    opacity: 0.75,
-                                                },
+                                                opacity: 0.75,
+                                            },
                                         ]}
-                                        accessibilityRole='button'
+                                        accessibilityRole={'button'}
                                         accessibilityLabel={button.label}
                                         accessibilityState={{
                                             selected: button.isActive,
                                             disabled: button.isDisabled,
-                                        }}>
+                                        }}
+                                    >
                                         <ToolbarIcon
                                             icon={button.icon}
                                             color={visuals.color}
                                             size={visuals.iconSize}
                                         />
-                                        <Text style={[styles.menuLabel, { color: visuals.color }]}>
+                                        <Text style={[ styles.menuLabel, { color: visuals.color } ]}>
                                             {button.label}
                                         </Text>
                                     </Pressable>

package/src/useEditorToolbarState.tsx

@@ -1,5 +1,5 @@
-import { useCallback, useContext, useEffect, useRef, useState } from 'react';
-import { View, useWindowDimensions } from 'react-native';
+import { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
+import { type View, useWindowDimensions } from 'react-native';
 import { DEFAULT_EDITOR_TOOLBAR_ITEMS } from './EditorToolbarItems';
 import { type EditorToolbarProps, type ToolbarMenuState } from './EditorToolbarTypes';
 import {
@@ -37,7 +37,7 @@ export function useEditorToolbarState({
     showTopBorder,
     preserveEditorFocus = true,
 }: EditorToolbarProps) {
-    const marks = activeState.marks ?? {};
+    const marks = useMemo(() => activeState.marks ?? {}, [ activeState.marks ]);
 
     const nodes = activeState.nodes ?? {};
 
@@ -59,9 +59,9 @@ export function useEditorToolbarState({
 
     const { width: windowWidth, height: windowHeight } = useWindowDimensions();
 
-    const [expandedGroupKey, setExpandedGroupKey] = useState<string | null>(null);
+    const [ expandedGroupKey, setExpandedGroupKey ] = useState<string | null>(null);
 
-    const [menuState, setMenuState] = useState<ToolbarMenuState | null>(null);
+    const [ menuState, setMenuState ] = useState<ToolbarMenuState | null>(null);
 
     const frameOwnerIdRef = useRef(frameOwnerId);
 
@@ -99,12 +99,13 @@ export function useEditorToolbarState({
 
     useEffect(() => {
         framePublisherMountedRef.current = true;
+
         return () => {
             framePublisherMountedRef.current = false;
         };
     }, []);
 
-    const isMarkActive = useCallback((mark: string) => !!marks[mark], [marks]);
+    const isMarkActive = useCallback((mark: string) => !!marks[mark], [ marks ]);
 
     const canIndentList = !!commands['indentList'];
 
@@ -112,6 +113,7 @@ export function useEditorToolbarState({
 
     const shouldRenderMentionSuggestions =
         publishesFocusFrames && mentionState != null && mentionState.suggestions.length > 0;
+
     return {
         onToggleMark,
         onToggleBold,