@apollohg/react-native-prose-editor 0.1.1 → 0.3.0

package/dist/NativeRichTextEditor.js

@@ -0,0 +1,649 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NativeRichTextEditor = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_native_1 = require("react-native");
+const expo_modules_core_1 = require("expo-modules-core");
+const NativeEditorBridge_1 = require("./NativeEditorBridge");
+const EditorToolbar_1 = require("./EditorToolbar");
+const EditorTheme_1 = require("./EditorTheme");
+const addons_1 = require("./addons");
+const schemas_1 = require("./schemas");
+const schemas_2 = require("./schemas");
+const NativeEditorView = (0, expo_modules_core_1.requireNativeViewManager)('NativeEditor');
+const DEV_NATIVE_VIEW_KEY = __DEV__
+    ? `native-editor-dev:${Math.random().toString(36).slice(2)}`
+    : 'native-editor';
+const LINK_TOOLBAR_ACTION_KEY = '__native-editor-link__';
+const IMAGE_TOOLBAR_ACTION_KEY = '__native-editor-image__';
+function isImageDataUrl(value) {
+    return /^data:image\//i.test(value.trim());
+}
+function isPromiseLike(value) {
+    return (value != null &&
+        typeof value === 'object' &&
+        'then' in value &&
+        typeof value.then === 'function');
+}
+function computeRenderedTextLength(elements) {
+    let len = 0;
+    let blockCount = 0;
+    for (const el of elements) {
+        if (el.type === 'blockStart' && el.listContext) {
+            len += el.listContext.ordered ? `${el.listContext.index}. `.length : '• '.length;
+        }
+        else if (el.type === 'textRun' && el.text) {
+            len += el.text.length;
+        }
+        else if (el.type === 'voidInline' ||
+            el.type === 'voidBlock' ||
+            el.type === 'opaqueInlineAtom' ||
+            el.type === 'opaqueBlockAtom') {
+            if (el.type === 'opaqueInlineAtom' || el.type === 'opaqueBlockAtom') {
+                const visibleText = el.nodeType === 'mention' ? (el.label ?? '?') : `[${el.label ?? '?'}]`;
+                len += visibleText.length;
+            }
+            else {
+                // U+FFFC placeholder / hard break
+                len += 1;
+            }
+        }
+        else if (el.type === 'blockEnd') {
+            blockCount++;
+        }
+    }
+    // Block breaks add 1 scalar each, except the last block
+    if (blockCount > 1)
+        len += blockCount - 1;
+    return len;
+}
+function serializeRemoteSelections(remoteSelections) {
+    if (!remoteSelections || remoteSelections.length === 0) {
+        return undefined;
+    }
+    return JSON.stringify(remoteSelections);
+}
+exports.NativeRichTextEditor = (0, react_1.forwardRef)(function NativeRichTextEditor({ initialContent, initialJSON, value, valueJSON, schema, placeholder, editable = true, maxLength, autoFocus = false, heightBehavior = 'autoGrow', showToolbar = true, toolbarPlacement = 'keyboard', toolbarItems = EditorToolbar_1.DEFAULT_EDITOR_TOOLBAR_ITEMS, onToolbarAction, onRequestLink, onRequestImage, onContentChange, onContentChangeJSON, onSelectionChange, onActiveStateChange, onHistoryStateChange, onFocus, onBlur, style, containerStyle, theme, addons, remoteSelections, allowBase64Images = false, allowImageResizing = true, }, ref) {
+    const bridgeRef = (0, react_1.useRef)(null);
+    const nativeViewRef = (0, react_1.useRef)(null);
+    const [isReady, setIsReady] = (0, react_1.useState)(false);
+    const [editorInstanceId, setEditorInstanceId] = (0, react_1.useState)(0);
+    const [isFocused, setIsFocused] = (0, react_1.useState)(false);
+    const [toolbarFrameJson, setToolbarFrameJson] = (0, react_1.useState)(undefined);
+    const [pendingNativeUpdate, setPendingNativeUpdate] = (0, react_1.useState)({
+        json: undefined,
+        revision: 0,
+    });
+    const [autoGrowHeight, setAutoGrowHeight] = (0, react_1.useState)(null);
+    // Toolbar state from EditorUpdate events
+    const [activeState, setActiveState] = (0, react_1.useState)({
+        marks: {},
+        markAttrs: {},
+        nodes: {},
+        commands: {},
+        allowedMarks: [],
+        insertableNodes: [],
+    });
+    const [historyState, setHistoryState] = (0, react_1.useState)({
+        canUndo: false,
+        canRedo: false,
+    });
+    // Selection and rendered text length refs (non-rendering state)
+    const selectionRef = (0, react_1.useRef)({ type: 'text', anchor: 0, head: 0 });
+    const renderedTextLengthRef = (0, react_1.useRef)(0);
+    const toolbarRef = (0, react_1.useRef)(null);
+    // Stable callback refs to avoid re-renders
+    const onContentChangeRef = (0, react_1.useRef)(onContentChange);
+    onContentChangeRef.current = onContentChange;
+    const onContentChangeJSONRef = (0, react_1.useRef)(onContentChangeJSON);
+    onContentChangeJSONRef.current = onContentChangeJSON;
+    const onSelectionChangeRef = (0, react_1.useRef)(onSelectionChange);
+    onSelectionChangeRef.current = onSelectionChange;
+    const onActiveStateChangeRef = (0, react_1.useRef)(onActiveStateChange);
+    onActiveStateChangeRef.current = onActiveStateChange;
+    const onHistoryStateChangeRef = (0, react_1.useRef)(onHistoryStateChange);
+    onHistoryStateChangeRef.current = onHistoryStateChange;
+    const onFocusRef = (0, react_1.useRef)(onFocus);
+    onFocusRef.current = onFocus;
+    const onBlurRef = (0, react_1.useRef)(onBlur);
+    onBlurRef.current = onBlur;
+    const addonsRef = (0, react_1.useRef)(addons);
+    addonsRef.current = addons;
+    const currentLinkHref = typeof activeState.markAttrs?.link?.href === 'string'
+        ? activeState.markAttrs.link.href
+        : undefined;
+    const mentionSuggestionsByKeyRef = (0, react_1.useRef)(new Map());
+    mentionSuggestionsByKeyRef.current = new Map((addons?.mentions?.suggestions ?? []).map((suggestion) => [suggestion.key, suggestion]));
+    const syncStateFromUpdate = (0, react_1.useCallback)((update) => {
+        if (!update)
+            return;
+        setActiveState(update.activeState);
+        setHistoryState(update.historyState);
+        selectionRef.current = update.selection;
+        renderedTextLengthRef.current = computeRenderedTextLength(update.renderElements);
+    }, []);
+    // Warn if both value and valueJSON are set
+    if (__DEV__ && value != null && valueJSON != null) {
+        console.warn('NativeRichTextEditor: value and valueJSON are mutually exclusive. ' +
+            'Only value will be used.');
+    }
+    const runAndApply = (0, react_1.useCallback)((mutate, options) => {
+        const preservedSelection = options?.preserveLiveTextSelection === true ? selectionRef.current : null;
+        const shouldCheckForNoopNativeApply = options?.skipNativeApplyIfContentUnchanged === true &&
+            bridgeRef.current != null &&
+            !bridgeRef.current.isDestroyed;
+        const htmlBefore = shouldCheckForNoopNativeApply
+            ? bridgeRef.current.getHtml()
+            : null;
+        const update = mutate();
+        if (!update)
+            return null;
+        if (preservedSelection?.type === 'text' &&
+            typeof preservedSelection.anchor === 'number' &&
+            typeof preservedSelection.head === 'number' &&
+            bridgeRef.current != null &&
+            !bridgeRef.current.isDestroyed) {
+            bridgeRef.current.setSelection(preservedSelection.anchor, preservedSelection.head);
+            update.selection = {
+                type: 'text',
+                anchor: preservedSelection.anchor,
+                head: preservedSelection.head,
+            };
+        }
+        const htmlAfter = shouldCheckForNoopNativeApply
+            ? bridgeRef.current.getHtml()
+            : null;
+        if (!shouldCheckForNoopNativeApply || htmlBefore !== htmlAfter) {
+            const updateJson = JSON.stringify(update);
+            if (react_native_1.Platform.OS === 'android') {
+                setPendingNativeUpdate((current) => ({
+                    json: updateJson,
+                    revision: current.revision + 1,
+                }));
+            }
+            else {
+                try {
+                    const applyResult = nativeViewRef.current?.applyEditorUpdate(updateJson);
+                    if (isPromiseLike(applyResult)) {
+                        void applyResult.catch(() => {
+                            // The native view may already be torn down during navigation.
+                        });
+                    }
+                }
+                catch {
+                    // The native view may already be torn down during navigation.
+                }
+            }
+        }
+        syncStateFromUpdate(update);
+        onActiveStateChangeRef.current?.(update.activeState);
+        onHistoryStateChangeRef.current?.(update.historyState);
+        if (!options?.suppressContentCallbacks) {
+            if (onContentChangeRef.current && bridgeRef.current) {
+                onContentChangeRef.current(bridgeRef.current.getHtml());
+            }
+            if (onContentChangeJSONRef.current && bridgeRef.current) {
+                onContentChangeJSONRef.current(bridgeRef.current.getJson());
+            }
+        }
+        onSelectionChangeRef.current?.(update.selection);
+        return update;
+    }, [syncStateFromUpdate]);
+    (0, react_1.useEffect)(() => {
+        const effectiveSchema = addonsRef.current?.mentions != null
+            ? (0, addons_1.withMentionsSchema)(schema ?? schemas_1.tiptapSchema)
+            : schema;
+        const schemaJson = effectiveSchema ? JSON.stringify(effectiveSchema) : undefined;
+        const bridgeConfig = maxLength != null || schemaJson || allowBase64Images
+            ? { maxLength, schemaJson, allowBase64Images }
+            : undefined;
+        const bridge = NativeEditorBridge_1.NativeEditorBridge.create(bridgeConfig);
+        bridgeRef.current = bridge;
+        setEditorInstanceId(bridge.editorId);
+        // Four-way content initialization: value > valueJSON > initialJSON > initialContent
+        if (value != null) {
+            bridge.setHtml(value);
+        }
+        else if (valueJSON != null) {
+            bridge.setJson(valueJSON);
+        }
+        else if (initialJSON) {
+            bridge.setJson(initialJSON);
+        }
+        else if (initialContent) {
+            bridge.setHtml(initialContent);
+        }
+        syncStateFromUpdate(bridge.getCurrentState());
+        setIsReady(true);
+        return () => {
+            bridge.destroy();
+            bridgeRef.current = null;
+            nativeViewRef.current = null;
+            setEditorInstanceId(0);
+            setIsReady(false);
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [schema, maxLength, syncStateFromUpdate, Boolean(addons?.mentions), allowBase64Images]);
+    (0, react_1.useEffect)(() => {
+        if (value == null)
+            return;
+        if (!bridgeRef.current || bridgeRef.current.isDestroyed)
+            return;
+        const currentHtml = bridgeRef.current.getHtml();
+        if (currentHtml === value)
+            return;
+        runAndApply(() => bridgeRef.current.replaceHtml(value), {
+            suppressContentCallbacks: true,
+            preserveLiveTextSelection: true,
+        });
+    }, [value, runAndApply]);
+    (0, react_1.useEffect)(() => {
+        if (valueJSON == null || value != null)
+            return;
+        if (!bridgeRef.current || bridgeRef.current.isDestroyed)
+            return;
+        // No-op if JSON content is identical (avoids churning undo history)
+        const currentJson = bridgeRef.current.getJson();
+        if (JSON.stringify(currentJson) === JSON.stringify(valueJSON))
+            return;
+        runAndApply(() => bridgeRef.current.replaceJson(valueJSON), {
+            suppressContentCallbacks: true,
+            preserveLiveTextSelection: true,
+        });
+    }, [valueJSON, value, runAndApply]);
+    const updateToolbarFrame = (0, react_1.useCallback)(() => {
+        const toolbar = toolbarRef.current;
+        if (!toolbar) {
+            setToolbarFrameJson(undefined);
+            return;
+        }
+        toolbar.measureInWindow((x, y, width, height) => {
+            if (width <= 0 || height <= 0) {
+                setToolbarFrameJson(undefined);
+                return;
+            }
+            const nextJson = JSON.stringify({ x, y, width, height });
+            setToolbarFrameJson((prev) => (prev === nextJson ? prev : nextJson));
+        });
+    }, []);
+    (0, react_1.useEffect)(() => {
+        if (!(showToolbar && toolbarPlacement === 'inline' && isFocused && editable)) {
+            setToolbarFrameJson(undefined);
+            return;
+        }
+        const frame = requestAnimationFrame(() => {
+            updateToolbarFrame();
+        });
+        return () => cancelAnimationFrame(frame);
+    }, [editable, isFocused, showToolbar, toolbarPlacement, updateToolbarFrame]);
+    (0, react_1.useEffect)(() => {
+        if (heightBehavior !== 'autoGrow') {
+            setAutoGrowHeight(null);
+        }
+    }, [heightBehavior]);
+    const handleUpdate = (0, react_1.useCallback)((event) => {
+        if (!bridgeRef.current || bridgeRef.current.isDestroyed)
+            return;
+        try {
+            const update = (0, NativeEditorBridge_1.parseEditorUpdateJson)(event.nativeEvent.updateJson);
+            if (!update)
+                return;
+            syncStateFromUpdate(update);
+            onActiveStateChangeRef.current?.(update.activeState);
+            onHistoryStateChangeRef.current?.(update.historyState);
+            if (onContentChangeRef.current) {
+                onContentChangeRef.current(bridgeRef.current.getHtml());
+            }
+            if (onContentChangeJSONRef.current) {
+                onContentChangeJSONRef.current(bridgeRef.current.getJson());
+            }
+            onSelectionChangeRef.current?.(update.selection);
+        }
+        catch {
+            // Invalid JSON from native — skip
+        }
+    }, [syncStateFromUpdate]);
+    const handleSelectionChange = (0, react_1.useCallback)((event) => {
+        if (!bridgeRef.current || bridgeRef.current.isDestroyed)
+            return;
+        const { anchor, head } = event.nativeEvent;
+        let selection;
+        if (anchor === 0 &&
+            head >= renderedTextLengthRef.current &&
+            renderedTextLengthRef.current > 0) {
+            selection = { type: 'all' };
+        }
+        else {
+            selection = { type: 'text', anchor, head };
+        }
+        bridgeRef.current.updateSelectionFromNative(anchor, head);
+        const currentState = bridgeRef.current.getCurrentState();
+        syncStateFromUpdate(currentState);
+        const nextSelection = selection.type === 'all' ? selection : (currentState?.selection ?? selection);
+        selectionRef.current = nextSelection;
+        if (currentState) {
+            onActiveStateChangeRef.current?.(currentState.activeState);
+            onHistoryStateChangeRef.current?.(currentState.historyState);
+        }
+        onSelectionChangeRef.current?.(nextSelection);
+    }, [syncStateFromUpdate]);
+    const handleFocusChange = (0, react_1.useCallback)((event) => {
+        const { isFocused: focused } = event.nativeEvent;
+        setIsFocused(focused);
+        if (focused) {
+            onFocusRef.current?.();
+        }
+        else {
+            onBlurRef.current?.();
+        }
+    }, []);
+    const handleContentHeightChange = (0, react_1.useCallback)((event) => {
+        if (heightBehavior !== 'autoGrow')
+            return;
+        const density = react_native_1.Platform.OS === 'android' ? react_native_1.PixelRatio.get() : 1;
+        const nextHeight = Math.ceil(event.nativeEvent.contentHeight / density);
+        if (!(nextHeight > 0))
+            return;
+        setAutoGrowHeight((prev) => (prev === nextHeight ? prev : nextHeight));
+    }, [autoGrowHeight, heightBehavior]);
+    const restoreSelection = (0, react_1.useCallback)((selection) => {
+        if (selection.type === 'text') {
+            const { anchor, head } = selection;
+            if (anchor == null || head == null) {
+                return;
+            }
+            bridgeRef.current?.setSelection(anchor, head);
+            return;
+        }
+        if (selection.type === 'node') {
+            const { pos } = selection;
+            if (pos == null) {
+                return;
+            }
+            bridgeRef.current?.setSelection(pos, pos);
+        }
+    }, []);
+    const insertImage = (0, react_1.useCallback)((src, attrs, selection) => {
+        const trimmedSrc = src.trim();
+        if (!trimmedSrc)
+            return;
+        if (!allowBase64Images && isImageDataUrl(trimmedSrc)) {
+            return;
+        }
+        runAndApply(() => {
+            if (selection) {
+                restoreSelection(selection);
+            }
+            return (bridgeRef.current?.insertContentJson((0, schemas_2.buildImageFragmentJson)({
+                src: trimmedSrc,
+                ...(attrs ?? {}),
+            })) ?? null);
+        });
+    }, [allowBase64Images, restoreSelection, runAndApply]);
+    const openLinkRequest = (0, react_1.useCallback)(() => {
+        const requestSelection = selectionRef.current;
+        onRequestLink?.({
+            href: currentLinkHref,
+            isActive: activeState.marks.link === true,
+            selection: requestSelection,
+            setLink: (href) => {
+                const trimmedHref = href.trim();
+                if (!trimmedHref)
+                    return;
+                runAndApply(() => {
+                    restoreSelection(requestSelection);
+                    return (bridgeRef.current?.setMark('link', {
+                        href: trimmedHref,
+                    }) ?? null);
+                }, { skipNativeApplyIfContentUnchanged: true });
+            },
+            unsetLink: () => {
+                runAndApply(() => {
+                    restoreSelection(requestSelection);
+                    return bridgeRef.current?.unsetMark('link') ?? null;
+                }, { skipNativeApplyIfContentUnchanged: true });
+            },
+        });
+    }, [activeState.marks.link, currentLinkHref, onRequestLink, restoreSelection, runAndApply]);
+    const openImageRequest = (0, react_1.useCallback)(() => {
+        const requestSelection = selectionRef.current;
+        onRequestImage?.({
+            selection: requestSelection,
+            allowBase64: allowBase64Images,
+            insertImage: (src, attrs) => insertImage(src, attrs, requestSelection),
+        });
+    }, [allowBase64Images, insertImage, onRequestImage]);
+    const handleToolbarAction = (0, react_1.useCallback)((event) => {
+        if (event.nativeEvent.key === LINK_TOOLBAR_ACTION_KEY) {
+            openLinkRequest();
+            return;
+        }
+        if (event.nativeEvent.key === IMAGE_TOOLBAR_ACTION_KEY) {
+            openImageRequest();
+            return;
+        }
+        onToolbarAction?.(event.nativeEvent.key);
+    }, [onToolbarAction, openImageRequest, openLinkRequest]);
+    const handleAddonEvent = (0, react_1.useCallback)((event) => {
+        let parsed = null;
+        try {
+            parsed = JSON.parse(event.nativeEvent.eventJson);
+        }
+        catch {
+            return;
+        }
+        if (!parsed)
+            return;
+        if (parsed.type === 'mentionsQueryChange') {
+            addonsRef.current?.mentions?.onQueryChange?.({
+                query: parsed.query,
+                trigger: parsed.trigger,
+                range: parsed.range,
+                isActive: parsed.isActive,
+            });
+            return;
+        }
+        if (parsed.type === 'mentionsSelect') {
+            const suggestion = mentionSuggestionsByKeyRef.current.get(parsed.suggestionKey);
+            if (!suggestion)
+                return;
+            addonsRef.current?.mentions?.onSelect?.({
+                trigger: parsed.trigger,
+                suggestion,
+                attrs: parsed.attrs,
+            });
+        }
+    }, []);
+    (0, react_1.useImperativeHandle)(ref, () => ({
+        focus() {
+            nativeViewRef.current?.focus?.();
+        },
+        blur() {
+            nativeViewRef.current?.blur?.();
+        },
+        toggleMark(markType) {
+            runAndApply(() => bridgeRef.current?.toggleMark(markType) ?? null, {
+                skipNativeApplyIfContentUnchanged: true,
+            });
+        },
+        setLink(href) {
+            const trimmedHref = href.trim();
+            if (!trimmedHref)
+                return;
+            runAndApply(() => bridgeRef.current?.setMark('link', { href: trimmedHref }) ?? null, { skipNativeApplyIfContentUnchanged: true });
+        },
+        unsetLink() {
+            runAndApply(() => bridgeRef.current?.unsetMark('link') ?? null, {
+                skipNativeApplyIfContentUnchanged: true,
+            });
+        },
+        toggleBlockquote() {
+            runAndApply(() => bridgeRef.current?.toggleBlockquote() ?? null);
+        },
+        toggleList(listType) {
+            runAndApply(() => bridgeRef.current?.toggleList(listType) ?? null);
+        },
+        indentListItem() {
+            runAndApply(() => bridgeRef.current?.indentListItem() ?? null);
+        },
+        outdentListItem() {
+            runAndApply(() => bridgeRef.current?.outdentListItem() ?? null);
+        },
+        insertNode(nodeType) {
+            runAndApply(() => bridgeRef.current?.insertNode(nodeType) ?? null);
+        },
+        insertImage(src, attrs) {
+            insertImage(src, attrs);
+        },
+        insertText(text) {
+            runAndApply(() => bridgeRef.current?.replaceSelectionText(text) ?? null);
+        },
+        insertContentHtml(html) {
+            runAndApply(() => bridgeRef.current?.insertContentHtml(html) ?? null);
+        },
+        insertContentJson(doc) {
+            runAndApply(() => bridgeRef.current?.insertContentJson(doc) ?? null);
+        },
+        setContent(html) {
+            runAndApply(() => bridgeRef.current?.replaceHtml(html) ?? null);
+        },
+        setContentJson(doc) {
+            runAndApply(() => bridgeRef.current?.replaceJson(doc) ?? null);
+        },
+        getContent() {
+            if (!bridgeRef.current || bridgeRef.current.isDestroyed)
+                return '';
+            return bridgeRef.current.getHtml();
+        },
+        getContentJson() {
+            if (!bridgeRef.current || bridgeRef.current.isDestroyed)
+                return {};
+            return bridgeRef.current.getJson();
+        },
+        getTextContent() {
+            if (!bridgeRef.current || bridgeRef.current.isDestroyed)
+                return '';
+            return bridgeRef.current.getHtml().replace(/<[^>]+>/g, '');
+        },
+        undo() {
+            runAndApply(() => bridgeRef.current?.undo() ?? null);
+        },
+        redo() {
+            runAndApply(() => bridgeRef.current?.redo() ?? null);
+        },
+        canUndo() {
+            if (!bridgeRef.current || bridgeRef.current.isDestroyed)
+                return false;
+            return bridgeRef.current.canUndo();
+        },
+        canRedo() {
+            if (!bridgeRef.current || bridgeRef.current.isDestroyed)
+                return false;
+            return bridgeRef.current.canRedo();
+        },
+    }), [insertImage, runAndApply]);
+    if (!isReady)
+        return null;
+    const toolbarItemsForNative = toolbarItems.map((item) => {
+        if (item.type === 'link') {
+            return {
+                type: 'action',
+                key: LINK_TOOLBAR_ACTION_KEY,
+                label: item.label,
+                icon: item.icon,
+                isActive: activeState.marks.link === true,
+                isDisabled: !editable || !onRequestLink || !activeState.allowedMarks.includes('link'),
+            };
+        }
+        if (item.type === 'image') {
+            return {
+                type: 'action',
+                key: IMAGE_TOOLBAR_ACTION_KEY,
+                label: item.label,
+                icon: item.icon,
+                isActive: false,
+                isDisabled: !editable
+                    || !onRequestImage
+                    || !activeState.insertableNodes.includes(schemas_2.IMAGE_NODE_NAME),
+            };
+        }
+        return item;
+    });
+    const themeJson = (0, EditorTheme_1.serializeEditorTheme)(theme);
+    const addonsJson = (0, addons_1.serializeEditorAddons)(addons);
+    const toolbarItemsJson = JSON.stringify(toolbarItemsForNative);
+    const remoteSelectionsJson = serializeRemoteSelections(remoteSelections);
+    const usesNativeKeyboardToolbar = toolbarPlacement === 'keyboard' && (react_native_1.Platform.OS === 'ios' || react_native_1.Platform.OS === 'android');
+    const shouldRenderJsToolbar = !usesNativeKeyboardToolbar && showToolbar && editable;
+    const inlineToolbarChrome = {
+        backgroundColor: theme?.toolbar?.backgroundColor,
+        borderColor: theme?.toolbar?.borderColor,
+        borderWidth: theme?.toolbar?.borderWidth,
+        borderRadius: theme?.toolbar?.borderRadius,
+    };
+    const containerMinHeight = react_native_1.StyleSheet.flatten(containerStyle)?.minHeight;
+    const nativeViewStyleParts = [];
+    if (containerMinHeight != null) {
+        nativeViewStyleParts.push({ minHeight: containerMinHeight });
+    }
+    if (style != null) {
+        nativeViewStyleParts.push(style);
+    }
+    if (heightBehavior === 'autoGrow' && autoGrowHeight != null) {
+        nativeViewStyleParts.push({ height: autoGrowHeight });
+    }
+    const nativeViewStyle = nativeViewStyleParts.length <= 1 ? nativeViewStyleParts[0] : nativeViewStyleParts;
+    const jsToolbar = ((0, jsx_runtime_1.jsx)(react_native_1.View, { ref: toolbarRef, testID: 'native-editor-js-toolbar', style: [
+            styles.inlineToolbar,
+            inlineToolbarChrome.backgroundColor != null
+                ? { backgroundColor: inlineToolbarChrome.backgroundColor }
+                : null,
+            inlineToolbarChrome.borderColor != null
+                ? { borderColor: inlineToolbarChrome.borderColor }
+                : null,
+            inlineToolbarChrome.borderWidth != null
+                ? { borderWidth: inlineToolbarChrome.borderWidth }
+                : null,
+            inlineToolbarChrome.borderRadius != null
+                ? { borderRadius: inlineToolbarChrome.borderRadius }
+                : null,
+        ], onLayout: updateToolbarFrame, children: (0, jsx_runtime_1.jsx)(EditorToolbar_1.EditorToolbar, { activeState: activeState, historyState: historyState, toolbarItems: toolbarItems, theme: theme?.toolbar, showTopBorder: false, onToggleMark: (mark) => runAndApply(() => bridgeRef.current?.toggleMark(mark) ?? null, {
+                skipNativeApplyIfContentUnchanged: true,
+            }), onToggleListType: (listType) => runAndApply(() => bridgeRef.current?.toggleList(listType) ?? null), onToggleBlockquote: () => runAndApply(() => bridgeRef.current?.toggleBlockquote() ?? null), onInsertNodeType: (nodeType) => runAndApply(() => bridgeRef.current?.insertNode(nodeType) ?? null), onRunCommand: (command) => {
+                switch (command) {
+                    case 'indentList':
+                        runAndApply(() => bridgeRef.current?.indentListItem() ?? null);
+                        break;
+                    case 'outdentList':
+                        runAndApply(() => bridgeRef.current?.outdentListItem() ?? null);
+                        break;
+                    case 'undo':
+                        runAndApply(() => bridgeRef.current?.undo() ?? null);
+                        break;
+                    case 'redo':
+                        runAndApply(() => bridgeRef.current?.redo() ?? null);
+                        break;
+                }
+            }, onRequestLink: openLinkRequest, onRequestImage: openImageRequest, onToolbarAction: onToolbarAction, onToggleBold: () => runAndApply(() => bridgeRef.current?.toggleMark('bold') ?? null, {
+                skipNativeApplyIfContentUnchanged: true,
+            }), onToggleItalic: () => runAndApply(() => bridgeRef.current?.toggleMark('italic') ?? null, {
+                skipNativeApplyIfContentUnchanged: true,
+            }), onToggleUnderline: () => runAndApply(() => bridgeRef.current?.toggleMark('underline') ?? null, {
+                skipNativeApplyIfContentUnchanged: true,
+            }), onToggleStrike: () => runAndApply(() => bridgeRef.current?.toggleMark('strike') ?? null, {
+                skipNativeApplyIfContentUnchanged: true,
+            }), onToggleBulletList: () => runAndApply(() => bridgeRef.current?.toggleList('bulletList') ?? null), onToggleOrderedList: () => runAndApply(() => bridgeRef.current?.toggleList('orderedList') ?? null), onIndentList: () => runAndApply(() => bridgeRef.current?.indentListItem() ?? null), onOutdentList: () => runAndApply(() => bridgeRef.current?.outdentListItem() ?? null), onInsertHorizontalRule: () => runAndApply(() => bridgeRef.current?.insertNode('horizontalRule') ?? null), onInsertLineBreak: () => runAndApply(() => bridgeRef.current?.insertNode('hardBreak') ?? null), onUndo: () => runAndApply(() => bridgeRef.current?.undo() ?? null), onRedo: () => runAndApply(() => bridgeRef.current?.redo() ?? null) }) }));
+    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [styles.container, containerStyle], children: [(0, jsx_runtime_1.jsx)(NativeEditorView, { ref: nativeViewRef, style: nativeViewStyle, editorId: editorInstanceId, placeholder: placeholder, editable: editable, autoFocus: autoFocus, showToolbar: showToolbar, toolbarPlacement: toolbarPlacement, heightBehavior: heightBehavior, allowImageResizing: allowImageResizing, themeJson: themeJson, addonsJson: addonsJson, toolbarItemsJson: toolbarItemsJson, remoteSelectionsJson: remoteSelectionsJson, toolbarFrameJson: toolbarPlacement === 'inline' && isFocused ? toolbarFrameJson : undefined, editorUpdateJson: pendingNativeUpdate.json, editorUpdateRevision: pendingNativeUpdate.revision, onEditorUpdate: handleUpdate, onSelectionChange: handleSelectionChange, onFocusChange: handleFocusChange, onContentHeightChange: handleContentHeightChange, onToolbarAction: handleToolbarAction, onAddonEvent: handleAddonEvent }, DEV_NATIVE_VIEW_KEY), shouldRenderJsToolbar && jsToolbar] }));
+});
+const styles = react_native_1.StyleSheet.create({
+    container: {
+        position: 'relative',
+    },
+    inlineToolbar: {
+        marginTop: 8,
+        borderWidth: react_native_1.StyleSheet.hairlineWidth,
+        borderColor: '#E5E5EA',
+        overflow: 'hidden',
+    },
+});