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

package/dist/useEditorToolbarInteractions.js

@@ -0,0 +1,218 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useEditorToolbarInteractions = useEditorToolbarInteractions;
+const react_1 = require("react");
+const react_native_1 = require("react-native");
+const EditorToolbarRegistry_1 = require("./EditorToolbarRegistry");
+const EditorToolbarVisuals_1 = require("./EditorToolbarVisuals");
+function useEditorToolbarInteractions(context) {
+    const { showTopBorder, theme, registrationIdRef, rootRef, publishesFocusFrames, frameOwnerId, framePublisherMountedRef, publishesFocusFramesRef, frameOwnerIdRef, menuRegistrationIdRef, menuCardRef, menuState, menuStateRef, framePublishAnimationFramesRef, framePublishTimeoutsRef, expandedGroupKey, startItems, scrollItems, endItems, windowHeight, windowWidth, toolbarInteractionActiveRef, groupsByKey, setExpandedGroupKey, setMenuState, shouldRenderMentionSuggestions, preserveEditorFocus, groupButtonRefs, } = context;
+    const resolvedShowTopBorder = showTopBorder ?? theme?.showTopBorder ?? true;
+    const publishToolbarFrame = (0, react_1.useCallback)(() => {
+        const registrationId = registrationIdRef.current;
+        const toolbar = rootRef.current;
+        if (!publishesFocusFrames || registrationId == null || !toolbar) {
+            if (registrationId != null) {
+                (0, EditorToolbarRegistry_1.unregisterEditorToolbarFrame)(registrationId);
+            }
+            return;
+        }
+        if (typeof toolbar.measureInWindow !== 'function') {
+            return;
+        }
+        const measuredFrameOwnerId = frameOwnerId;
+        toolbar.measureInWindow((x, y, width, height) => {
+            if (!framePublisherMountedRef.current ||
+                !publishesFocusFramesRef.current ||
+                frameOwnerIdRef.current !== measuredFrameOwnerId) {
+                return;
+            }
+            (0, EditorToolbarRegistry_1.registerEditorToolbarFrame)(registrationId, { x, y, width, height }, measuredFrameOwnerId);
+        });
+    }, [frameOwnerId, publishesFocusFrames]);
+    const publishMenuFrame = (0, react_1.useCallback)(() => {
+        const registrationId = menuRegistrationIdRef.current;
+        const menuCard = menuCardRef.current;
+        if (!publishesFocusFrames || menuState == null || registrationId == null || !menuCard) {
+            if (registrationId != null) {
+                (0, EditorToolbarRegistry_1.unregisterEditorToolbarFrame)(registrationId);
+            }
+            return;
+        }
+        if (typeof menuCard.measureInWindow !== 'function') {
+            return;
+        }
+        const measuredFrameOwnerId = frameOwnerId;
+        const measuredMenuState = menuState;
+        menuCard.measureInWindow((x, y, width, height) => {
+            if (!framePublisherMountedRef.current ||
+                !publishesFocusFramesRef.current ||
+                frameOwnerIdRef.current !== measuredFrameOwnerId ||
+                menuStateRef.current !== measuredMenuState) {
+                return;
+            }
+            (0, EditorToolbarRegistry_1.registerEditorToolbarFrame)(registrationId, { x, y, width, height }, measuredFrameOwnerId);
+        });
+    }, [frameOwnerId, menuState, publishesFocusFrames]);
+    const publishToolbarFrames = (0, react_1.useCallback)(() => {
+        publishToolbarFrame();
+        publishMenuFrame();
+    }, [publishMenuFrame, publishToolbarFrame]);
+    const cancelScheduledFramePublishes = (0, react_1.useCallback)(() => {
+        framePublishAnimationFramesRef.current.forEach((frame) => cancelAnimationFrame(frame));
+        framePublishAnimationFramesRef.current = [];
+        framePublishTimeoutsRef.current.forEach((timeout) => clearTimeout(timeout));
+        framePublishTimeoutsRef.current = [];
+    }, []);
+    const scheduleToolbarFramePublish = (0, react_1.useCallback)(() => {
+        if (!publishesFocusFrames) {
+            return;
+        }
+        cancelScheduledFramePublishes();
+        publishToolbarFrames();
+        framePublishAnimationFramesRef.current.push(requestAnimationFrame(publishToolbarFrames));
+        EditorToolbarVisuals_1.KEYBOARD_FRAME_REMEASURE_DELAYS_MS.forEach((delay) => {
+            framePublishTimeoutsRef.current.push(setTimeout(publishToolbarFrames, delay));
+        });
+    }, [cancelScheduledFramePublishes, publishesFocusFrames, publishToolbarFrames]);
+    const handleToolbarLayout = (0, react_1.useCallback)(() => {
+        requestAnimationFrame(publishToolbarFrame);
+    }, [publishToolbarFrame]);
+    const handleMenuLayout = (0, react_1.useCallback)(() => {
+        requestAnimationFrame(publishMenuFrame);
+    }, [publishMenuFrame]);
+    (0, react_1.useEffect)(() => {
+        if (!publishesFocusFrames) {
+            const registrationId = registrationIdRef.current;
+            if (registrationId != null) {
+                (0, EditorToolbarRegistry_1.unregisterEditorToolbarFrame)(registrationId);
+            }
+            return;
+        }
+        const frame = requestAnimationFrame(publishToolbarFrame);
+        return () => cancelAnimationFrame(frame);
+    }, [
+        expandedGroupKey,
+        menuState?.groupKey,
+        publishesFocusFrames,
+        publishToolbarFrame,
+        startItems.length,
+        scrollItems.length,
+        endItems.length,
+        windowHeight,
+        windowWidth,
+    ]);
+    (0, react_1.useEffect)(() => {
+        if (!publishesFocusFrames || menuState == null) {
+            const registrationId = menuRegistrationIdRef.current;
+            if (registrationId != null) {
+                (0, EditorToolbarRegistry_1.unregisterEditorToolbarFrame)(registrationId);
+            }
+            return;
+        }
+        const frame = requestAnimationFrame(publishMenuFrame);
+        return () => cancelAnimationFrame(frame);
+    }, [menuState, publishesFocusFrames, publishMenuFrame, windowHeight, windowWidth]);
+    (0, react_1.useEffect)(() => {
+        const registrationId = registrationIdRef.current;
+        const menuRegistrationId = menuRegistrationIdRef.current;
+        return () => {
+            cancelScheduledFramePublishes();
+            if (toolbarInteractionActiveRef.current) {
+                toolbarInteractionActiveRef.current = false;
+                (0, EditorToolbarRegistry_1.endEditorToolbarInteraction)();
+            }
+            if (registrationId != null) {
+                (0, EditorToolbarRegistry_1.unregisterEditorToolbarFrame)(registrationId);
+            }
+            if (menuRegistrationId != null) {
+                (0, EditorToolbarRegistry_1.unregisterEditorToolbarFrame)(menuRegistrationId);
+            }
+        };
+    }, [cancelScheduledFramePublishes]);
+    (0, react_1.useEffect)(() => {
+        if (!publishesFocusFrames) {
+            cancelScheduledFramePublishes();
+            return;
+        }
+        const subscriptions = [
+            react_native_1.Keyboard.addListener('keyboardDidShow', scheduleToolbarFramePublish),
+            react_native_1.Keyboard.addListener('keyboardDidHide', scheduleToolbarFramePublish),
+            react_native_1.Keyboard.addListener('keyboardDidChangeFrame', scheduleToolbarFramePublish),
+        ];
+        return () => {
+            subscriptions.forEach((subscription) => subscription.remove());
+            cancelScheduledFramePublishes();
+        };
+    }, [cancelScheduledFramePublishes, publishesFocusFrames, scheduleToolbarFramePublish]);
+    (0, react_1.useEffect)(() => {
+        if (expandedGroupKey != null && !groupsByKey.has(expandedGroupKey)) {
+            setExpandedGroupKey(null);
+        }
+    }, [expandedGroupKey, groupsByKey]);
+    (0, react_1.useEffect)(() => {
+        if (menuState != null && !groupsByKey.has(menuState.groupKey)) {
+            setMenuState(null);
+        }
+    }, [groupsByKey, menuState]);
+    (0, react_1.useEffect)(() => {
+        if (shouldRenderMentionSuggestions) {
+            setExpandedGroupKey(null);
+            setMenuState(null);
+        }
+    }, [shouldRenderMentionSuggestions]);
+    const handleButtonPress = (0, react_1.useCallback)((button) => {
+        button.action();
+        if (button.groupKey) {
+            setExpandedGroupKey((current) => (current === button.groupKey ? null : current));
+        }
+        setMenuState(null);
+    }, []);
+    const handleToolbarPressIn = (0, react_1.useCallback)(() => {
+        if (preserveEditorFocus && !toolbarInteractionActiveRef.current) {
+            toolbarInteractionActiveRef.current = true;
+            (0, EditorToolbarRegistry_1.beginEditorToolbarInteraction)();
+        }
+    }, [preserveEditorFocus]);
+    const handleToolbarPressOut = (0, react_1.useCallback)(() => {
+        if (preserveEditorFocus && toolbarInteractionActiveRef.current) {
+            toolbarInteractionActiveRef.current = false;
+            (0, EditorToolbarRegistry_1.endEditorToolbarInteraction)();
+        }
+    }, [preserveEditorFocus]);
+    const handleGroupPress = (0, react_1.useCallback)((group) => {
+        if (group.isDisabled) {
+            return;
+        }
+        if (group.presentation === 'expand') {
+            setMenuState(null);
+            setExpandedGroupKey((current) => (current === group.key ? null : group.key));
+            return;
+        }
+        const anchor = groupButtonRefs.current.get(group.key);
+        if (!anchor) {
+            return;
+        }
+        anchor.measureInWindow((x, y, width, height) => {
+            setExpandedGroupKey(null);
+            setMenuState((current) => current?.groupKey === group.key
+                ? null
+                : {
+                    groupKey: group.key,
+                    x,
+                    y,
+                    width,
+                    height,
+                });
+        });
+    }, []);
+    return {
+        handleToolbarPressIn,
+        handleToolbarPressOut,
+        handleGroupPress,
+        handleButtonPress,
+        handleToolbarLayout,
+        resolvedShowTopBorder,
+        handleMenuLayout,
+    };
+}

package/dist/useEditorToolbarItems.d.ts

@@ -0,0 +1,8 @@
+import { useEditorToolbarState } from './useEditorToolbarState';
+import { type ToolbarRenderedItem, type ToolbarGroupButton } from './EditorToolbarTypes';
+export declare function useEditorToolbarItems(context: Pick<ReturnType<typeof useEditorToolbarState>, 'onToggleMark' | 'onToggleBold' | 'onToggleItalic' | 'onToggleUnderline' | 'onToggleStrike' | 'onToggleListType' | 'onToggleBulletList' | 'onToggleOrderedList' | 'onRequestLink' | 'onRequestImage' | 'onToggleHeading' | 'onToggleBlockquote' | 'onInsertNodeType' | 'onInsertLineBreak' | 'onInsertHorizontalRule' | 'onRunCommand' | 'onIndentList' | 'onOutdentList' | 'onUndo' | 'onRedo' | 'onToolbarAction' | 'isMarkActive' | 'allowedMarks' | 'insertableNodes' | 'nodes' | 'commands' | 'canIndentList' | 'canOutdentList' | 'historyState' | 'toolbarItems' | 'expandedGroupKey' | 'menuState'>): {
+    startItems: ToolbarRenderedItem[];
+    scrollItems: ToolbarRenderedItem[];
+    endItems: ToolbarRenderedItem[];
+    groupsByKey: Map<string, ToolbarGroupButton>;
+};

package/dist/useEditorToolbarItems.js

@@ -0,0 +1,280 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useEditorToolbarItems = useEditorToolbarItems;
+const react_1 = require("react");
+const EditorToolbarItems_1 = require("./EditorToolbarItems");
+function useEditorToolbarItems(context) {
+    const { onToggleMark, onToggleBold, onToggleItalic, onToggleUnderline, onToggleStrike, onToggleListType, onToggleBulletList, onToggleOrderedList, onRequestLink, onRequestImage, onToggleHeading, onToggleBlockquote, onInsertNodeType, onInsertLineBreak, onInsertHorizontalRule, onRunCommand, onIndentList, onOutdentList, onUndo, onRedo, onToolbarAction, isMarkActive, allowedMarks, insertableNodes, nodes, commands, canIndentList, canOutdentList, historyState, toolbarItems, expandedGroupKey, menuState, } = context;
+    const getActionForItem = (0, react_1.useCallback)((item) => {
+        switch (item.type) {
+            case 'mark':
+                if (onToggleMark) {
+                    return () => onToggleMark(item.mark);
+                }
+                switch (item.mark) {
+                    case 'bold':
+                        return onToggleBold;
+                    case 'italic':
+                        return onToggleItalic;
+                    case 'underline':
+                        return onToggleUnderline;
+                    case 'strike':
+                        return onToggleStrike;
+                    default:
+                        return null;
+                }
+            case 'list':
+                if (onToggleListType) {
+                    return () => onToggleListType(item.listType);
+                }
+                return item.listType === 'bulletList' || item.listType === 'bullet_list'
+                    ? (onToggleBulletList ?? null)
+                    : (onToggleOrderedList ?? null);
+            case 'link':
+                return onRequestLink ?? null;
+            case 'image':
+                return onRequestImage ?? null;
+            case 'heading':
+                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':
+                        return onInsertLineBreak ?? null;
+                    case 'horizontalRule':
+                    case 'horizontal_rule':
+                        return onInsertHorizontalRule ?? null;
+                    default:
+                        return null;
+                }
+            case 'command':
+                if (onRunCommand) {
+                    return () => onRunCommand(item.command);
+                }
+                switch (item.command) {
+                    case 'indentList':
+                        return onIndentList ?? null;
+                    case 'outdentList':
+                        return onOutdentList ?? null;
+                    case 'undo':
+                        return onUndo;
+                    case 'redo':
+                        return onRedo;
+                }
+            case 'action':
+                return onToolbarAction ? () => onToolbarAction(item.key) : null;
+        }
+    }, [
+        onIndentList,
+        onInsertHorizontalRule,
+        onInsertLineBreak,
+        onInsertNodeType,
+        onOutdentList,
+        onRedo,
+        onRunCommand,
+        onRequestImage,
+        onRequestLink,
+        onToggleBlockquote,
+        onToggleBold,
+        onToggleBulletList,
+        onToggleHeading,
+        onToggleItalic,
+        onToggleListType,
+        onToggleMark,
+        onToggleOrderedList,
+        onToggleStrike,
+        onToggleUnderline,
+        onToolbarAction,
+        onUndo,
+    ]);
+    const makeButtonKey = (0, react_1.useCallback)((item, index, prefix = '') => 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}`, []);
+    const resolveButton = (0, react_1.useCallback)((item, index, prefix = '', groupKey, placement = 'scroll') => {
+        const resolvedPlacement = (0, EditorToolbarItems_1.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);
+                isDisabled = !allowedMarks.includes(item.mark);
+                break;
+            case 'link':
+                isActive = isMarkActive('link');
+                isDisabled = !allowedMarks.includes('link') || !onRequestLink;
+                break;
+            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) {
+                    case 'indentList':
+                        isDisabled = !canIndentList;
+                        break;
+                    case 'outdentList':
+                        isDisabled = !canOutdentList;
+                        break;
+                    case 'undo':
+                        isDisabled = !historyState.canUndo;
+                        break;
+                    case 'redo':
+                        isDisabled = !historyState.canRedo;
+                        break;
+                }
+                break;
+            case 'action':
+                isActive = !!item.isActive;
+                isDisabled = !!item.isDisabled || !onToolbarAction;
+                break;
+            case 'node':
+                isActive = !!nodes[item.nodeType];
+                isDisabled = !insertableNodes.includes(item.nodeType);
+                break;
+        }
+        return {
+            key: makeButtonKey(item, index, prefix),
+            label: item.label,
+            icon: item.icon,
+            buttonStyle: item.buttonStyle,
+            action,
+            isActive,
+            isDisabled,
+            groupKey,
+            placement: resolvedPlacement,
+        };
+    }, [
+        allowedMarks,
+        canIndentList,
+        canOutdentList,
+        commands,
+        getActionForItem,
+        historyState.canRedo,
+        historyState.canUndo,
+        insertableNodes,
+        isMarkActive,
+        makeButtonKey,
+        nodes,
+        onRequestImage,
+        onRequestLink,
+        onToolbarAction,
+    ]);
+    const compactRenderedItems = (entries) => entries.filter((entry, index, list) => {
+        if (entry.type !== 'separator') {
+            return true;
+        }
+        const previous = list[index - 1];
+        const next = list[index + 1];
+        return (previous != null &&
+            previous.type !== 'separator' &&
+            next != null &&
+            next.type !== 'separator');
+    });
+    const { startItems, scrollItems, endItems, groupsByKey } = (0, react_1.useMemo)(() => {
+        const startEntries = [];
+        const scrollEntries = [];
+        const endEntries = [];
+        const nextGroups = new Map();
+        const entriesForPlacement = (placement) => placement === 'start' ? startEntries : placement === 'end' ? endEntries : scrollEntries;
+        for (let index = 0; index < toolbarItems.length; index += 1) {
+            const item = toolbarItems[index];
+            const placement = (0, EditorToolbarItems_1.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))
+                    .filter((child) => 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 = {
+                    key: item.key,
+                    label: item.label,
+                    icon: item.icon,
+                    buttonStyle: item.buttonStyle,
+                    presentation,
+                    placement,
+                    children,
+                    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({
+                            type: 'button',
+                            button: child,
+                        });
+                    }
+                }
+                continue;
+            }
+            const button = resolveButton(item, index, '', undefined, placement);
+            if (button) {
+                targetEntries.push({ type: 'button', button });
+            }
+        }
+        return {
+            startItems: compactRenderedItems(startEntries),
+            scrollItems: compactRenderedItems(scrollEntries),
+            endItems: compactRenderedItems(endEntries),
+            groupsByKey: nextGroups,
+        };
+    }, [expandedGroupKey, menuState?.groupKey, resolveButton, toolbarItems]);
+    return { startItems, scrollItems, endItems, groupsByKey };
+}

package/dist/useEditorToolbarPresentation.d.ts

@@ -0,0 +1,4 @@
+import { useEditorToolbarState } from './useEditorToolbarState';
+import { useEditorToolbarItems } from './useEditorToolbarItems';
+import { useEditorToolbarInteractions } from './useEditorToolbarInteractions';
+export declare function useEditorToolbarPresentation(context: Pick<ReturnType<typeof useEditorToolbarState>, 'menuState' | 'theme' | 'windowHeight' | 'windowWidth' | 'groupButtonRefs' | 'rootRef' | 'shouldRenderMentionSuggestions' | 'mentionState' | 'setMenuState' | 'menuCardRef'> & Pick<ReturnType<typeof useEditorToolbarItems>, 'groupsByKey' | 'startItems' | 'scrollItems' | 'endItems'> & Pick<ReturnType<typeof useEditorToolbarInteractions>, 'handleToolbarPressIn' | 'handleToolbarPressOut' | 'handleGroupPress' | 'handleButtonPress' | 'handleToolbarLayout' | 'resolvedShowTopBorder' | 'handleMenuLayout'>): import("react/jsx-runtime").JSX.Element;