@openeditor/react-native-prose-editor 0.0.2

package/dist/EditorToolbar.js

@@ -0,0 +1,1095 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DEFAULT_EDITOR_TOOLBAR_ITEMS = void 0;
+exports.isEditorToolbarFocusPreservationActive = isEditorToolbarFocusPreservationActive;
+exports.setActiveEditorToolbarFrameOwnerForEditor = setActiveEditorToolbarFrameOwnerForEditor;
+exports.useEditorToolbarFrames = useEditorToolbarFrames;
+exports.setEditorToolbarMentionState = setEditorToolbarMentionState;
+exports._setEditorToolbarFrameForTests = _setEditorToolbarFrameForTests;
+exports._resetEditorToolbarFrameRegistryForTests = _resetEditorToolbarFrameRegistryForTests;
+exports._beginEditorToolbarInteractionForTests = _beginEditorToolbarInteractionForTests;
+exports._endEditorToolbarInteractionForTests = _endEditorToolbarInteractionForTests;
+exports.EditorToolbar = EditorToolbar;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const vector_icons_1 = require("@expo/vector-icons");
+const react_1 = require("react");
+const react_native_1 = require("react-native");
+const editorToolbarFrames = new Map();
+const editorToolbarFrameListeners = new Set();
+const editorToolbarMentionStateListeners = new Set();
+let nextEditorToolbarRegistrationId = 1;
+let activeEditorToolbarInteractions = 0;
+let editorToolbarFocusPreserveUntil = 0;
+let activeEditorToolbarFrameOwnerId = null;
+let editorToolbarMentionState = null;
+const EDITOR_TOOLBAR_FOCUS_PRESERVE_MS = 750;
+function areToolbarFramesEqual(left, right) {
+    return (left?.x === right?.x &&
+        left?.y === right?.y &&
+        left?.width === right?.width &&
+        left?.height === right?.height);
+}
+function areToolbarFrameListsEqual(left, right) {
+    if (left.length !== right.length) {
+        return false;
+    }
+    return left.every((frame, index) => areToolbarFramesEqual(frame, right[index]));
+}
+function notifyEditorToolbarFrameListeners() {
+    editorToolbarFrameListeners.forEach((listener) => listener());
+}
+function notifyEditorToolbarMentionStateListeners() {
+    editorToolbarMentionStateListeners.forEach((listener) => listener());
+}
+function getEditorToolbarFramesSnapshot(ownerId) {
+    return Array.from(editorToolbarFrames.values())
+        .filter((registration) => registration.ownerId === ownerId ||
+        (registration.ownerId == null && activeEditorToolbarFrameOwnerId === ownerId))
+        .map((registration) => registration.frame);
+}
+function subscribeEditorToolbarMentionState(listener) {
+    editorToolbarMentionStateListeners.add(listener);
+    return () => {
+        editorToolbarMentionStateListeners.delete(listener);
+    };
+}
+function getEditorToolbarMentionStateSnapshot() {
+    return editorToolbarMentionState;
+}
+function useEditorToolbarMentionState() {
+    return (0, react_1.useSyncExternalStore)(subscribeEditorToolbarMentionState, getEditorToolbarMentionStateSnapshot, getEditorToolbarMentionStateSnapshot);
+}
+function registerEditorToolbarFrame(id, frame, ownerId) {
+    if (frame == null || frame.width <= 0 || frame.height <= 0) {
+        if (editorToolbarFrames.delete(id)) {
+            notifyEditorToolbarFrameListeners();
+        }
+        return;
+    }
+    const currentRegistration = editorToolbarFrames.get(id);
+    if (currentRegistration?.ownerId === ownerId &&
+        areToolbarFramesEqual(currentRegistration.frame, frame)) {
+        return;
+    }
+    editorToolbarFrames.set(id, { ownerId, frame });
+    notifyEditorToolbarFrameListeners();
+}
+function unregisterEditorToolbarFrame(id) {
+    if (editorToolbarFrames.delete(id)) {
+        notifyEditorToolbarFrameListeners();
+    }
+}
+function preserveEditorToolbarFocusForNextBlur() {
+    editorToolbarFocusPreserveUntil = Date.now() + EDITOR_TOOLBAR_FOCUS_PRESERVE_MS;
+}
+function beginEditorToolbarInteraction() {
+    activeEditorToolbarInteractions += 1;
+    preserveEditorToolbarFocusForNextBlur();
+}
+function endEditorToolbarInteraction() {
+    activeEditorToolbarInteractions = Math.max(0, activeEditorToolbarInteractions - 1);
+    preserveEditorToolbarFocusForNextBlur();
+}
+function isEditorToolbarFocusPreservationActive() {
+    return activeEditorToolbarInteractions > 0 || Date.now() <= editorToolbarFocusPreserveUntil;
+}
+function setActiveEditorToolbarFrameOwnerForEditor(ownerId, isActive) {
+    const nextOwnerId = isActive
+        ? ownerId
+        : activeEditorToolbarFrameOwnerId === ownerId
+            ? null
+            : activeEditorToolbarFrameOwnerId;
+    if (activeEditorToolbarFrameOwnerId === nextOwnerId) {
+        return;
+    }
+    activeEditorToolbarFrameOwnerId = nextOwnerId;
+    notifyEditorToolbarFrameListeners();
+}
+function useEditorToolbarFrames(ownerId) {
+    const [frames, setFrames] = (0, react_1.useState)(() => getEditorToolbarFramesSnapshot(ownerId));
+    (0, react_1.useEffect)(() => {
+        const listener = () => {
+            const nextFrames = getEditorToolbarFramesSnapshot(ownerId);
+            setFrames((currentFrames) => areToolbarFrameListsEqual(currentFrames, nextFrames) ? currentFrames : nextFrames);
+        };
+        editorToolbarFrameListeners.add(listener);
+        listener();
+        return () => {
+            editorToolbarFrameListeners.delete(listener);
+        };
+    }, [ownerId]);
+    return frames;
+}
+function setEditorToolbarMentionState(ownerId, state) {
+    if (state == null) {
+        if (editorToolbarMentionState?.ownerId !== ownerId) {
+            return;
+        }
+        editorToolbarMentionState = null;
+        notifyEditorToolbarMentionStateListeners();
+        return;
+    }
+    editorToolbarMentionState = {
+        ownerId,
+        ...state,
+    };
+    notifyEditorToolbarMentionStateListeners();
+}
+function _setEditorToolbarFrameForTests(id, frame, ownerId = null) {
+    registerEditorToolbarFrame(id, frame, ownerId);
+}
+function _resetEditorToolbarFrameRegistryForTests() {
+    editorToolbarFrames.clear();
+    editorToolbarMentionState = null;
+    activeEditorToolbarInteractions = 0;
+    editorToolbarFocusPreserveUntil = 0;
+    activeEditorToolbarFrameOwnerId = null;
+    notifyEditorToolbarFrameListeners();
+    notifyEditorToolbarMentionStateListeners();
+}
+function _beginEditorToolbarInteractionForTests() {
+    beginEditorToolbarInteraction();
+}
+function _endEditorToolbarInteractionForTests() {
+    endEditorToolbarInteraction();
+}
+function defaultIcon(id) {
+    return { type: 'default', id };
+}
+function resolveToolbarItemPlacement(placement) {
+    return placement ?? 'scroll';
+}
+exports.DEFAULT_EDITOR_TOOLBAR_ITEMS = [
+    { type: 'mark', mark: 'bold', label: 'Bold', icon: defaultIcon('bold') },
+    { type: 'mark', mark: 'italic', label: 'Italic', icon: defaultIcon('italic') },
+    { type: 'mark', mark: 'underline', label: 'Underline', icon: defaultIcon('underline') },
+    { type: 'mark', mark: 'strike', label: 'Strikethrough', icon: defaultIcon('strike') },
+    { type: 'blockquote', label: 'Blockquote', icon: defaultIcon('blockquote') },
+    { type: 'separator' },
+    { type: 'list', listType: 'bulletList', label: 'Bullet List', icon: defaultIcon('bulletList') },
+    {
+        type: 'list',
+        listType: 'orderedList',
+        label: 'Ordered List',
+        icon: defaultIcon('orderedList'),
+    },
+    {
+        type: 'command',
+        command: 'indentList',
+        label: 'Indent List',
+        icon: defaultIcon('indentList'),
+    },
+    {
+        type: 'command',
+        command: 'outdentList',
+        label: 'Outdent List',
+        icon: defaultIcon('outdentList'),
+    },
+    { type: 'node', nodeType: 'hardBreak', label: 'Line Break', icon: defaultIcon('lineBreak') },
+    {
+        type: 'node',
+        nodeType: 'horizontalRule',
+        label: 'Horizontal Rule',
+        icon: defaultIcon('horizontalRule'),
+    },
+    { type: 'separator' },
+    { type: 'command', command: 'undo', label: 'Undo', icon: defaultIcon('undo') },
+    { type: 'command', command: 'redo', label: 'Redo', icon: defaultIcon('redo') },
+];
+const BUTTON_HIT = 44;
+const BUTTON_VISIBLE = 32;
+const TOOLBAR_PADDING_H = 12;
+const TOOLBAR_PADDING_V = 4;
+const MIN_TOOLBAR_HEIGHT = 40;
+const MENU_MARGIN = 8;
+const MENU_WIDTH = 192;
+const KEYBOARD_FRAME_REMEASURE_DELAYS_MS = [50, 150, 300];
+const ACTIVE_BG = 'rgba(0, 122, 255, 0.12)';
+const ACTIVE_COLOR = '#007AFF';
+const DEFAULT_COLOR = '#666666';
+const DISABLED_COLOR = '#C7C7CC';
+const SEPARATOR_COLOR = '#E5E5EA';
+const TOOLBAR_BG = '#FFFFFF';
+const TOOLBAR_BORDER = '#E5E5EA';
+const TOOLBAR_RADIUS = 0;
+const BUTTON_RADIUS = 6;
+const MENU_BORDER = '#D1D1D6';
+const MENU_SHADOW = '#000000';
+const DEFAULT_GLYPH_ICONS = {
+    bold: 'B',
+    italic: 'I',
+    underline: 'U',
+    strike: 'S',
+    link: '🔗',
+    image: '🖼',
+    blockquote: '❝',
+    h1: 'H1',
+    h2: 'H2',
+    h3: 'H3',
+    h4: 'H4',
+    h5: 'H5',
+    h6: 'H6',
+    bulletList: '•≡',
+    orderedList: '1.',
+    indentList: '→',
+    outdentList: '←',
+    lineBreak: '↵',
+    horizontalRule: '—',
+    undo: '↩',
+    redo: '↪',
+};
+const DEFAULT_MATERIAL_ICONS = {
+    bold: 'format-bold',
+    italic: 'format-italic',
+    underline: 'format-underlined',
+    strike: 'strikethrough-s',
+    link: 'link',
+    image: 'image',
+    h1: 'title',
+    h2: 'title',
+    h3: 'title',
+    h4: 'title',
+    h5: 'title',
+    h6: 'title',
+    blockquote: 'format-quote',
+    bulletList: 'format-list-bulleted',
+    orderedList: 'format-list-numbered',
+    indentList: 'format-indent-increase',
+    outdentList: 'format-indent-decrease',
+    lineBreak: 'keyboard-return',
+    horizontalRule: 'horizontal-rule',
+    undo: 'undo',
+    redo: 'redo',
+};
+function resolveMentionSuggestionLabel(suggestion, trigger) {
+    return suggestion.label?.trim() || `${trigger}${suggestion.title}`;
+}
+function EditorToolbar({ activeState, historyState, onToggleBold, onToggleItalic, onToggleUnderline, onToggleStrike, onToggleBulletList, onToggleHeading, onToggleBlockquote, onToggleOrderedList, onIndentList, onOutdentList, onInsertHorizontalRule, onInsertLineBreak, onUndo, onRedo, onToggleMark, onToggleListType, onInsertNodeType, onRunCommand, onToolbarAction, onRequestLink, onRequestImage, toolbarItems = exports.DEFAULT_EDITOR_TOOLBAR_ITEMS, theme, showTopBorder, preserveEditorFocus = true, }) {
+    const marks = activeState.marks ?? {};
+    const nodes = activeState.nodes ?? {};
+    const commands = activeState.commands ?? {};
+    const allowedMarks = activeState.allowedMarks ?? [];
+    const insertableNodes = activeState.insertableNodes ?? [];
+    const rootRef = (0, react_1.useRef)(null);
+    const groupButtonRefs = (0, react_1.useRef)(new Map());
+    const { width: windowWidth, height: windowHeight } = (0, react_native_1.useWindowDimensions)();
+    const [expandedGroupKey, setExpandedGroupKey] = (0, react_1.useState)(null);
+    const [menuState, setMenuState] = (0, react_1.useState)(null);
+    const mentionState = useEditorToolbarMentionState();
+    const toolbarInteractionActiveRef = (0, react_1.useRef)(false);
+    const framePublishAnimationFramesRef = (0, react_1.useRef)([]);
+    const framePublishTimeoutsRef = (0, react_1.useRef)([]);
+    const registrationIdRef = (0, react_1.useRef)(null);
+    if (registrationIdRef.current == null) {
+        registrationIdRef.current = nextEditorToolbarRegistrationId++;
+    }
+    const isMarkActive = (0, react_1.useCallback)((mark) => !!marks[mark], [marks]);
+    const isInList = !!nodes['bulletList'] || !!nodes['orderedList'];
+    const canIndentList = isInList && !!commands['indentList'];
+    const canOutdentList = isInList && !!commands['outdentList'];
+    const shouldRenderMentionSuggestions = preserveEditorFocus && mentionState != null && mentionState.suggestions.length > 0;
+    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'
+                    ? (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':
+                        return onInsertLineBreak ?? null;
+                    case 'horizontalRule':
+                        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 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' ? '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,
+            action,
+            isActive,
+            isDisabled,
+            groupKey,
+            placement,
+        };
+    }, [
+        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 = 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,
+                    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) {
+                    targetEntries.push(...children.map((child) => ({ 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]);
+    const resolvedShowTopBorder = showTopBorder ?? theme?.showTopBorder ?? true;
+    const publishToolbarFrame = (0, react_1.useCallback)(() => {
+        const registrationId = registrationIdRef.current;
+        const toolbar = rootRef.current;
+        if (!preserveEditorFocus || registrationId == null || !toolbar) {
+            if (registrationId != null) {
+                unregisterEditorToolbarFrame(registrationId);
+            }
+            return;
+        }
+        if (typeof toolbar.measureInWindow !== 'function') {
+            return;
+        }
+        toolbar.measureInWindow((x, y, width, height) => {
+            registerEditorToolbarFrame(registrationId, { x, y, width, height }, null);
+        });
+    }, [preserveEditorFocus]);
+    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 (!preserveEditorFocus) {
+            return;
+        }
+        cancelScheduledFramePublishes();
+        publishToolbarFrame();
+        framePublishAnimationFramesRef.current.push(requestAnimationFrame(publishToolbarFrame));
+        KEYBOARD_FRAME_REMEASURE_DELAYS_MS.forEach((delay) => {
+            framePublishTimeoutsRef.current.push(setTimeout(publishToolbarFrame, delay));
+        });
+    }, [cancelScheduledFramePublishes, preserveEditorFocus, publishToolbarFrame]);
+    const handleToolbarLayout = (0, react_1.useCallback)(() => {
+        requestAnimationFrame(publishToolbarFrame);
+    }, [publishToolbarFrame]);
+    (0, react_1.useEffect)(() => {
+        if (!preserveEditorFocus) {
+            const registrationId = registrationIdRef.current;
+            if (registrationId != null) {
+                unregisterEditorToolbarFrame(registrationId);
+            }
+            return;
+        }
+        const frame = requestAnimationFrame(publishToolbarFrame);
+        return () => cancelAnimationFrame(frame);
+    }, [
+        expandedGroupKey,
+        menuState?.groupKey,
+        preserveEditorFocus,
+        publishToolbarFrame,
+        startItems.length,
+        scrollItems.length,
+        endItems.length,
+        windowHeight,
+        windowWidth,
+    ]);
+    (0, react_1.useEffect)(() => {
+        const registrationId = registrationIdRef.current;
+        return () => {
+            cancelScheduledFramePublishes();
+            if (toolbarInteractionActiveRef.current) {
+                toolbarInteractionActiveRef.current = false;
+                endEditorToolbarInteraction();
+            }
+            if (registrationId != null) {
+                unregisterEditorToolbarFrame(registrationId);
+            }
+        };
+    }, [cancelScheduledFramePublishes]);
+    (0, react_1.useEffect)(() => {
+        if (!preserveEditorFocus) {
+            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, preserveEditorFocus, 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;
+            beginEditorToolbarInteraction();
+        }
+    }, [preserveEditorFocus]);
+    const handleToolbarPressOut = (0, react_1.useCallback)(() => {
+        if (preserveEditorFocus && toolbarInteractionActiveRef.current) {
+            toolbarInteractionActiveRef.current = false;
+            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,
+                });
+        });
+    }, []);
+    const menuGroup = menuState != null ? (groupsByKey.get(menuState.groupKey) ?? null) : null;
+    const menuHeight = menuGroup ? menuGroup.children.length * 40 + 16 : 0;
+    const resolvedToolbarHeight = Math.max(theme?.height ?? BUTTON_VISIBLE + TOOLBAR_PADDING_V * 2, MIN_TOOLBAR_HEIGHT);
+    const resolvedButtonHeight = theme?.height == null
+        ? BUTTON_VISIBLE
+        : Math.max(28, Math.min(40, resolvedToolbarHeight - TOOLBAR_PADDING_V * 2));
+    const resolvedToolbarPaddingV = theme?.height == null
+        ? TOOLBAR_PADDING_V
+        : Math.max(4, (resolvedToolbarHeight - resolvedButtonHeight) / 2);
+    const resolvedSeparatorHeight = Math.max(16, resolvedButtonHeight - 12);
+    const menuTop = menuState == null
+        ? 0
+        : Math.max(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));
+    const renderButton = (button, onPress, options) => {
+        const activeColor = theme?.buttonActiveColor ?? ACTIVE_COLOR;
+        const defaultColor = theme?.buttonColor ?? DEFAULT_COLOR;
+        const disabledColor = theme?.buttonDisabledColor ?? DISABLED_COLOR;
+        const color = button.isActive
+            ? activeColor
+            : button.isDisabled
+                ? disabledColor
+                : defaultColor;
+        const anchorGroupKey = options?.anchorGroupKey;
+        return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { ref: anchorGroupKey == null
+                ? undefined
+                : (node) => {
+                    if (node) {
+                        groupButtonRefs.current.set(anchorGroupKey, node);
+                    }
+                    else {
+                        groupButtonRefs.current.delete(anchorGroupKey);
+                    }
+                }, collapsable: false, style: styles.buttonAnchor, children: [(0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { onPressIn: handleToolbarPressIn, onPressOut: handleToolbarPressOut, onPress: onPress, disabled: button.isDisabled, style: [
+                        styles.button,
+                        {
+                            height: resolvedButtonHeight,
+                            borderRadius: theme?.buttonBorderRadius ?? BUTTON_RADIUS,
+                        },
+                        button.isActive && {
+                            backgroundColor: theme?.buttonActiveBackgroundColor ?? ACTIVE_BG,
+                        },
+                    ], activeOpacity: 0.5, accessibilityRole: 'button', accessibilityLabel: button.label, accessibilityState: {
+                        selected: button.isActive,
+                        disabled: button.isDisabled,
+                        expanded: options?.showsDisclosure ? options.expanded : undefined,
+                    }, children: (0, jsx_runtime_1.jsx)(react_native_1.View, { children: (0, jsx_runtime_1.jsx)(ToolbarIcon, { icon: button.icon, color: color }) }) }), options?.showsDisclosure ? ((0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.groupDisclosure, { color }], children: '\u25BE' })) : null] }, button.key));
+    };
+    const renderSeparator = (key) => ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: [
+            styles.separator,
+            { height: resolvedSeparatorHeight },
+            theme?.separatorColor != null ? { backgroundColor: theme.separatorColor } : null,
+        ] }, key));
+    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { ref: rootRef, collapsable: false, onLayout: handleToolbarLayout, style: [
+            styles.container,
+            !resolvedShowTopBorder && styles.containerWithoutTopBorder,
+            {
+                minHeight: resolvedToolbarHeight,
+                paddingVertical: resolvedToolbarPaddingV,
+            },
+            theme?.backgroundColor != null ? { backgroundColor: theme.backgroundColor } : null,
+            theme?.borderColor != null
+                ? resolvedShowTopBorder
+                    ? { borderTopColor: theme.borderColor }
+                    : null
+                : null,
+            theme?.borderWidth != null
+                ? resolvedShowTopBorder
+                    ? { borderTopWidth: theme.borderWidth }
+                    : null
+                : null,
+            {
+                borderRadius: theme?.borderRadius ?? TOOLBAR_RADIUS,
+            },
+        ], children: [shouldRenderMentionSuggestions && mentionState != null ? ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.toolbarRow, children: [startItems.length > 0 ? ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.fixedSection, children: startItems.map((item) => {
+                            if (item.type === 'separator') {
+                                return renderSeparator(item.key);
+                            }
+                            if (item.type === 'group') {
+                                return renderButton({
+                                    key: item.group.key,
+                                    label: item.group.label,
+                                    icon: item.group.icon,
+                                    isActive: item.group.isActive,
+                                    isDisabled: item.group.isDisabled,
+                                }, () => handleGroupPress(item.group), {
+                                    anchorGroupKey: item.group.key,
+                                    showsDisclosure: true,
+                                    expanded: item.group.isOpen,
+                                });
+                            }
+                            return renderButton(item.button, () => handleButtonPress(item.button));
+                        }) })) : null, (0, jsx_runtime_1.jsx)(react_native_1.ScrollView, { testID: 'editor-toolbar-mention-suggestions', horizontal: true, showsHorizontalScrollIndicator: false, style: [
+                            styles.scrollSection,
+                            styles.mentionSuggestionsScroll,
+                            {
+                                backgroundColor: mentionState.theme?.popoverBackgroundColor ??
+                                    mentionState.theme?.backgroundColor ??
+                                    'transparent',
+                                borderColor: mentionState.theme?.popoverBorderColor ??
+                                    mentionState.theme?.borderColor ??
+                                    'transparent',
+                                borderWidth: mentionState.theme?.popoverBorderWidth ??
+                                    mentionState.theme?.borderWidth ??
+                                    0,
+                                borderRadius: mentionState.theme?.popoverBorderRadius ??
+                                    mentionState.theme?.borderRadius ??
+                                    0,
+                            },
+                            mentionState.theme?.popoverShadowColor != null
+                                ? {
+                                    shadowColor: mentionState.theme.popoverShadowColor,
+                                    shadowOpacity: 0.14,
+                                    shadowRadius: 12,
+                                    shadowOffset: { width: 0, height: 4 },
+                                    elevation: 8,
+                                }
+                                : null,
+                        ], contentContainerStyle: styles.mentionSuggestionsContent, keyboardShouldPersistTaps: 'always', children: mentionState.suggestions.map((suggestion) => {
+                            const label = resolveMentionSuggestionLabel(suggestion, mentionState.trigger);
+                            const suggestionTheme = mentionState.suggestionThemes?.[suggestion.key] ?? mentionState.theme;
+                            return ((0, jsx_runtime_1.jsx)(react_native_1.Pressable, { testID: `editor-toolbar-mention-suggestion-${suggestion.key}`, accessibilityRole: 'button', accessibilityLabel: label, onPressIn: handleToolbarPressIn, onPressOut: handleToolbarPressOut, onPress: () => mentionState.onSelectSuggestion(suggestion), style: ({ pressed }) => [
+                                    styles.mentionSuggestion,
+                                    {
+                                        backgroundColor: pressed
+                                            ? (suggestionTheme?.optionHighlightedBackgroundColor ??
+                                                'rgba(0, 122, 255, 0.12)')
+                                            : (suggestionTheme?.backgroundColor ?? '#F2F2F7'),
+                                        borderColor: suggestionTheme?.borderColor ?? 'transparent',
+                                        borderWidth: suggestionTheme?.borderWidth ?? 0,
+                                        borderRadius: suggestionTheme?.borderRadius ?? 12,
+                                    },
+                                ], children: ({ pressed }) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { numberOfLines: 1, style: [
+                                                styles.mentionSuggestionTitle,
+                                                {
+                                                    fontWeight: suggestionTheme?.fontWeight ?? '600',
+                                                    color: pressed
+                                                        ? (suggestionTheme?.optionHighlightedTextColor ??
+                                                            suggestionTheme?.optionTextColor ??
+                                                            '#000000')
+                                                        : (suggestionTheme?.optionTextColor ??
+                                                            suggestionTheme?.textColor ??
+                                                            '#000000'),
+                                                },
+                                            ], children: label }), suggestion.subtitle ? ((0, jsx_runtime_1.jsx)(react_native_1.Text, { numberOfLines: 1, style: [
+                                                styles.mentionSuggestionSubtitle,
+                                                {
+                                                    color: suggestionTheme?.optionSecondaryTextColor ??
+                                                        '#8E8E93',
+                                                },
+                                            ], children: suggestion.subtitle })) : null] })) }, suggestion.key));
+                        }) }), endItems.length > 0 ? ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.fixedSection, children: endItems.map((item) => {
+                            if (item.type === 'separator') {
+                                return renderSeparator(item.key);
+                            }
+                            if (item.type === 'group') {
+                                return renderButton({
+                                    key: item.group.key,
+                                    label: item.group.label,
+                                    icon: item.group.icon,
+                                    isActive: item.group.isActive,
+                                    isDisabled: item.group.isDisabled,
+                                }, () => handleGroupPress(item.group), {
+                                    anchorGroupKey: item.group.key,
+                                    showsDisclosure: true,
+                                    expanded: item.group.isOpen,
+                                });
+                            }
+                            return renderButton(item.button, () => handleButtonPress(item.button));
+                        }) })) : null] })) : ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.toolbarRow, children: [startItems.length > 0 ? ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.fixedSection, children: startItems.map((item) => {
+                            if (item.type === 'separator') {
+                                return renderSeparator(item.key);
+                            }
+                            if (item.type === 'group') {
+                                return renderButton({
+                                    key: item.group.key,
+                                    label: item.group.label,
+                                    icon: item.group.icon,
+                                    isActive: item.group.isActive,
+                                    isDisabled: item.group.isDisabled,
+                                }, () => handleGroupPress(item.group), {
+                                    anchorGroupKey: item.group.key,
+                                    showsDisclosure: true,
+                                    expanded: item.group.isOpen,
+                                });
+                            }
+                            return renderButton(item.button, () => handleButtonPress(item.button));
+                        }) })) : null, (0, jsx_runtime_1.jsx)(react_native_1.ScrollView, { horizontal: true, showsHorizontalScrollIndicator: false, style: styles.scrollSection, contentContainerStyle: styles.scrollContent, keyboardShouldPersistTaps: 'always', onScrollBeginDrag: () => setMenuState(null), children: scrollItems.map((item) => {
+                            if (item.type === 'separator') {
+                                return renderSeparator(item.key);
+                            }
+                            if (item.type === 'group') {
+                                return renderButton({
+                                    key: item.group.key,
+                                    label: item.group.label,
+                                    icon: item.group.icon,
+                                    isActive: item.group.isActive,
+                                    isDisabled: item.group.isDisabled,
+                                }, () => handleGroupPress(item.group), {
+                                    anchorGroupKey: item.group.key,
+                                    showsDisclosure: true,
+                                    expanded: item.group.isOpen,
+                                });
+                            }
+                            return renderButton(item.button, () => handleButtonPress(item.button));
+                        }) }), endItems.length > 0 ? ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.fixedSection, children: endItems.map((item) => {
+                            if (item.type === 'separator') {
+                                return renderSeparator(item.key);
+                            }
+                            if (item.type === 'group') {
+                                return renderButton({
+                                    key: item.group.key,
+                                    label: item.group.label,
+                                    icon: item.group.icon,
+                                    isActive: item.group.isActive,
+                                    isDisabled: item.group.isDisabled,
+                                }, () => handleGroupPress(item.group), {
+                                    anchorGroupKey: item.group.key,
+                                    showsDisclosure: true,
+                                    expanded: item.group.isOpen,
+                                });
+                            }
+                            return renderButton(item.button, () => handleButtonPress(item.button));
+                        }) })) : null] })), !shouldRenderMentionSuggestions && menuState != null && menuGroup != null ? ((0, jsx_runtime_1.jsx)(react_native_1.Modal, { transparent: true, visible: true, animationType: 'fade', onRequestClose: () => setMenuState(null), children: (0, jsx_runtime_1.jsx)(react_native_1.Pressable, { style: styles.menuBackdrop, onPress: () => setMenuState(null), children: (0, jsx_runtime_1.jsx)(react_native_1.View, { style: [
+                            styles.menuCard,
+                            {
+                                top: menuTop,
+                                left: menuLeft,
+                                backgroundColor: theme?.backgroundColor ?? TOOLBAR_BG,
+                                borderColor: theme?.borderColor ?? MENU_BORDER,
+                            },
+                        ], children: menuGroup.children.map((button) => {
+                            const activeColor = theme?.buttonActiveColor ?? ACTIVE_COLOR;
+                            const defaultColor = theme?.buttonColor ?? DEFAULT_COLOR;
+                            const disabledColor = theme?.buttonDisabledColor ?? DISABLED_COLOR;
+                            const color = button.isActive
+                                ? activeColor
+                                : button.isDisabled
+                                    ? disabledColor
+                                    : defaultColor;
+                            return ((0, jsx_runtime_1.jsxs)(react_native_1.Pressable, { onPressIn: handleToolbarPressIn, onPressOut: handleToolbarPressOut, onPress: () => handleButtonPress(button), disabled: button.isDisabled, style: ({ pressed }) => [
+                                    styles.menuItem,
+                                    button.isActive && {
+                                        backgroundColor: theme?.buttonActiveBackgroundColor ?? ACTIVE_BG,
+                                    },
+                                    pressed &&
+                                        !button.isDisabled && {
+                                        opacity: 0.75,
+                                    },
+                                ], accessibilityRole: 'button', accessibilityLabel: button.label, accessibilityState: {
+                                    selected: button.isActive,
+                                    disabled: button.isDisabled,
+                                }, children: [(0, jsx_runtime_1.jsx)(ToolbarIcon, { icon: button.icon, color: color }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.menuLabel, { color }], children: button.label })] }, button.key));
+                        }) }) }) })) : null] }));
+}
+function ToolbarIcon({ icon, color }) {
+    const materialIconName = resolveMaterialIconName(icon);
+    if (materialIconName) {
+        return ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.iconContainer, children: (0, jsx_runtime_1.jsx)(vector_icons_1.MaterialIcons, { name: materialIconName, size: 20, color: color }) }));
+    }
+    const glyph = resolveGlyphText(icon) ?? '?';
+    return ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.iconContainer, children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.iconText, { color }], children: glyph }) }));
+}
+function resolveMaterialIconName(icon) {
+    switch (icon.type) {
+        case 'default':
+            return DEFAULT_MATERIAL_ICONS[icon.id];
+        case 'platform':
+            return icon.android?.type === 'material' ? icon.android.name : undefined;
+        case 'glyph':
+            return undefined;
+    }
+}
+function resolveGlyphText(icon) {
+    switch (icon.type) {
+        case 'default':
+            return DEFAULT_GLYPH_ICONS[icon.id];
+        case 'glyph':
+            return icon.text;
+        case 'platform':
+            return icon.fallbackText;
+    }
+}
+const styles = react_native_1.StyleSheet.create({
+    container: {
+        backgroundColor: TOOLBAR_BG,
+        borderTopWidth: react_native_1.StyleSheet.hairlineWidth,
+        borderTopColor: TOOLBAR_BORDER,
+        paddingVertical: TOOLBAR_PADDING_V,
+        overflow: 'hidden',
+    },
+    containerWithoutTopBorder: {
+        borderTopWidth: 0,
+    },
+    scrollContent: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        paddingHorizontal: TOOLBAR_PADDING_H,
+        minWidth: '100%',
+    },
+    mentionSuggestionsContent: {
+        paddingHorizontal: 12,
+        paddingVertical: 4,
+        alignItems: 'center',
+        minWidth: '100%',
+    },
+    mentionSuggestionsScroll: {
+        overflow: 'hidden',
+    },
+    toolbarRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+    },
+    fixedSection: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        flexShrink: 0,
+    },
+    scrollSection: {
+        flex: 1,
+        minWidth: 0,
+    },
+    mentionSuggestion: {
+        minWidth: 88,
+        minHeight: 40,
+        marginRight: 8,
+        paddingHorizontal: 12,
+        paddingVertical: 8,
+        justifyContent: 'center',
+    },
+    mentionSuggestionTitle: {
+        fontSize: 14,
+        fontWeight: '600',
+    },
+    mentionSuggestionSubtitle: {
+        marginTop: 1,
+        fontSize: 12,
+    },
+    buttonAnchor: {
+        position: 'relative',
+    },
+    button: {
+        width: BUTTON_HIT,
+        height: BUTTON_VISIBLE,
+        justifyContent: 'center',
+        alignItems: 'center',
+        borderRadius: BUTTON_RADIUS,
+    },
+    groupDisclosure: {
+        position: 'absolute',
+        right: 5,
+        bottom: 2,
+        fontSize: 9,
+        fontWeight: '700',
+    },
+    separator: {
+        width: react_native_1.StyleSheet.hairlineWidth,
+        height: 20,
+        marginHorizontal: 4,
+        backgroundColor: SEPARATOR_COLOR,
+    },
+    iconContainer: {
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    iconText: {
+        fontSize: 16,
+        fontWeight: '600',
+    },
+    menuBackdrop: {
+        flex: 1,
+    },
+    menuCard: {
+        position: 'absolute',
+        width: MENU_WIDTH,
+        borderRadius: 14,
+        borderWidth: react_native_1.StyleSheet.hairlineWidth,
+        paddingVertical: 8,
+        shadowColor: MENU_SHADOW,
+        shadowOpacity: 0.16,
+        shadowRadius: 18,
+        shadowOffset: { width: 0, height: 8 },
+        elevation: 10,
+    },
+    menuItem: {
+        minHeight: 40,
+        paddingHorizontal: 12,
+        flexDirection: 'row',
+        alignItems: 'center',
+    },
+    menuLabel: {
+        flex: 1,
+        marginLeft: 10,
+        fontSize: 14,
+        fontWeight: '500',
+    },
+});