@openeditor/native 0.0.32 → 0.0.34

package/dist/index.js

@@ -1,910 +1,2 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { DEFAULT_CALLOUT_EMOJI, DEFAULT_PAGE_EMOJI, createDocument, findBlockSpecForNode, isOpenEditorBlockEnabled, moveTopLevelBlock, normalizeEmoji, } from "@openeditor/core";
-import { forwardRef, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
-import { Image as NativeImage, Keyboard, Modal, Platform, Pressable, StyleSheet, Text, TextInput, View } from "react-native";
-import { fromNativeEditorDocument, sanitizeNativeEditorDocument, toNativeEditorDocument, } from "./document.js";
-import { resolveSelectedTopLevelIndex } from "./selection.js";
-import { createOpenEditorNativeToolbarItems, defaultDocumentForToolbarAction, openEditorNativeToolbarActionKeys, } from "./toolbar.js";
-import { normalizeNativeThemeColor } from "./theme.js";
-export { normalizeNativeThemeColor } from "./theme.js";
-import { OpenEditorNativeEmojiPicker } from "./emoji-picker.js";
-export { OpenEditorNativeEmojiPicker, } from "./emoji-picker.js";
-export { emojiForNativeSkinTone, getOpenEditorNativeEmojiSections, openEditorNativeEmojiSkinToneOptions, } from "./emoji-data.js";
-import { defaultBlockRegistry } from "@openeditor/extensions";
-const defaultLightNeutralSurface = "#eeeeee";
-const defaultLightStructuralLine = "#d4d4d4";
-const defaultNativeTheme = {
-    background: "#fafafa",
-    surface: "#ffffff",
-    surfaceMuted: defaultLightNeutralSurface,
-    blockSurface: defaultLightNeutralSurface,
-    text: "#171717",
-    textSoft: "#262626",
-    muted: "#737373",
-    placeholder: "#a3a3a3",
-    border: defaultLightNeutralSurface,
-    borderStrong: defaultLightStructuralLine,
-    structuralLine: defaultLightStructuralLine,
-    accent: defaultLightNeutralSurface,
-    accentText: "#171717",
-    accentStrong: "#171717",
-    primary: "#171717",
-    primaryText: "#ffffff",
-    codeBackground: defaultLightNeutralSurface,
-    codeText: "#171717",
-    debugBackground: "#171717",
-    debugText: "#d4d4d4",
-    debugHeading: "#ffffff",
-    debugBorder: "#404040",
-    debugButtonBackground: "#262626",
-    success: "#86efac",
-    shadow: "rgba(0, 0, 0, 0.12)",
-    backdrop: "rgba(0, 0, 0, 0.32)",
-    toolbar: {},
-};
-const openEditorNativeSchema = {
-    nodes: [
-        { name: "doc", content: "block+", role: "doc" },
-        { name: "paragraph", content: "inline*", group: "block", role: "textBlock", htmlTag: "p" },
-        { name: "heading", content: "inline*", group: "block", attrs: { level: { default: 2 } }, role: "textBlock" },
-        { name: "h1", content: "inline*", group: "block", role: "textBlock", htmlTag: "h1" },
-        { name: "h2", content: "inline*", group: "block", role: "textBlock", htmlTag: "h2" },
-        { name: "h3", content: "inline*", group: "block", role: "textBlock", htmlTag: "h3" },
-        { name: "h4", content: "inline*", group: "block", role: "textBlock", htmlTag: "h4" },
-        { name: "h5", content: "inline*", group: "block", role: "textBlock", htmlTag: "h5" },
-        { name: "h6", content: "inline*", group: "block", role: "textBlock", htmlTag: "h6" },
-        { name: "blockquote", content: "block+", group: "block", role: "block", htmlTag: "blockquote" },
-        { name: "bulletList", content: "listItem+", group: "block", role: "list", htmlTag: "ul" },
-        { name: "orderedList", content: "listItem+", group: "block", attrs: { start: { default: 1 } }, role: "list", htmlTag: "ol" },
-        { name: "taskList", content: "taskItem+", group: "block", role: "list", htmlTag: "ul" },
-        { name: "listItem", content: "paragraph block*", role: "listItem", htmlTag: "li" },
-        {
-            name: "taskItem",
-            content: "paragraph block*",
-            role: "listItem",
-            htmlTag: "li",
-            attrs: { checked: { default: false } },
-        },
-        { name: "toggleList", content: "toggleListItem+", group: "block", role: "list", htmlTag: "ul" },
-        {
-            name: "toggleListItem",
-            content: "paragraph block*",
-            role: "listItem",
-            htmlTag: "li",
-            attrs: { open: { default: true } },
-        },
-        {
-            name: "callout",
-            content: "block+",
-            group: "block",
-            role: "block",
-            htmlTag: "aside",
-            attrs: { emoji: { default: DEFAULT_CALLOUT_EMOJI } },
-        },
-        {
-            name: "page",
-            content: "inline*",
-            group: "block",
-            role: "textBlock",
-            htmlTag: "p",
-            attrs: {
-                pageId: { default: null },
-                icon: { default: DEFAULT_PAGE_EMOJI },
-                href: { default: null },
-            },
-        },
-        {
-            name: "attachment",
-            content: "",
-            group: "block",
-            role: "block",
-            htmlTag: "div",
-            isVoid: true,
-            attrs: {
-                attachmentId: { default: null },
-                name: { default: "" },
-                mimeType: { default: null },
-                size: { default: null },
-                url: { default: null },
-            },
-        },
-        { name: "codeBlock", content: "text*", group: "block", role: "textBlock", htmlTag: "pre" },
-        { name: "horizontalRule", content: "", group: "block", role: "block", htmlTag: "hr", isVoid: true },
-        {
-            name: "columns",
-            content: "column+",
-            group: "block",
-            role: "block",
-            layoutRole: "columns",
-        },
-        {
-            name: "column",
-            content: "block+",
-            role: "block",
-            layoutRole: "column",
-        },
-        {
-            name: "table",
-            content: "tableRow+",
-            group: "block",
-            role: "block",
-            layoutRole: "table",
-            htmlTag: "table",
-        },
-        {
-            name: "tableRow",
-            content: "(tableCell | tableHeader)+",
-            role: "block",
-            layoutRole: "tableRow",
-            htmlTag: "tr",
-        },
-        {
-            name: "tableCell",
-            content: "block+",
-            role: "block",
-            layoutRole: "tableCell",
-            htmlTag: "td",
-            attrs: {
-                colspan: { default: 1 },
-                rowspan: { default: 1 },
-                colwidth: { default: null },
-                align: { default: null },
-            },
-        },
-        {
-            name: "tableHeader",
-            content: "block+",
-            role: "block",
-            layoutRole: "tableHeader",
-            htmlTag: "th",
-            attrs: {
-                colspan: { default: 1 },
-                rowspan: { default: 1 },
-                colwidth: { default: null },
-                align: { default: null },
-            },
-        },
-        {
-            name: "image",
-            content: "",
-            group: "block",
-            attrs: {
-                src: {},
-                alt: { default: null },
-                title: { default: null },
-                width: { default: null },
-                height: { default: null },
-            },
-            role: "block",
-            htmlTag: "img",
-            isVoid: true,
-        },
-        { name: "hardBreak", content: "", group: "inline", role: "hardBreak", htmlTag: "br", isVoid: true },
-        { name: "text", content: "", group: "inline", role: "text" },
-    ],
-    marks: [
-        { name: "bold" },
-        { name: "italic" },
-        { name: "underline" },
-        { name: "strike" },
-        { name: "code" },
-        { name: "link", attrs: { href: {} } },
-    ],
-};
-const toNativeEditorTheme = (theme) => ({
-    backgroundColor: normalizeNativeThemeColor(theme.background),
-    blockSurfaceColor: normalizeNativeThemeColor(theme.blockSurface),
-    structuralLineColor: normalizeNativeThemeColor(theme.structuralLine),
-    accentStrongColor: normalizeNativeThemeColor(theme.accentStrong),
-    accentStrongTextColor: normalizeNativeThemeColor(theme.primaryText),
-    borderRadius: 0,
-    placeholderColor: normalizeNativeThemeColor(theme.placeholder),
-    contentInsets: {
-        top: 16,
-        right: 16,
-        bottom: 16,
-        left: 16,
-    },
-    text: {
-        color: normalizeNativeThemeColor(theme.text),
-        fontSize: 16,
-        lineHeight: 24,
-    },
-    paragraph: {
-        color: normalizeNativeThemeColor(theme.textSoft),
-        fontSize: 16,
-        lineHeight: 24,
-        spacingAfter: 12,
-    },
-    headings: {
-        h1: { color: normalizeNativeThemeColor(theme.text), fontSize: 28, fontWeight: "700", lineHeight: 34, spacingAfter: 14 },
-        h2: { color: normalizeNativeThemeColor(theme.text), fontSize: 24, fontWeight: "700", lineHeight: 30, spacingAfter: 12 },
-        h3: { color: normalizeNativeThemeColor(theme.text), fontSize: 20, fontWeight: "700", lineHeight: 26, spacingAfter: 10 },
-        h4: { color: normalizeNativeThemeColor(theme.text), fontSize: 18, fontWeight: "700", lineHeight: 24, spacingAfter: 8 },
-        h5: { color: normalizeNativeThemeColor(theme.text), fontSize: 16, fontWeight: "700", lineHeight: 22, spacingAfter: 8 },
-        h6: { color: normalizeNativeThemeColor(theme.text), fontSize: 14, fontWeight: "700", lineHeight: 20, spacingAfter: 8 },
-    },
-    links: {
-        color: normalizeNativeThemeColor(theme.accentStrong),
-        underline: true,
-    },
-    list: {
-        markerColor: normalizeNativeThemeColor(theme.muted),
-        itemSpacing: 6,
-    },
-    blockquote: {
-        borderColor: normalizeNativeThemeColor(theme.structuralLine),
-        borderWidth: 3,
-        text: {
-            color: normalizeNativeThemeColor(theme.textSoft),
-            fontSize: 16,
-            lineHeight: 24,
-        },
-    },
-    codeBlock: {
-        backgroundColor: normalizeNativeThemeColor(theme.codeBackground),
-        borderRadius: 8,
-        paddingHorizontal: 12,
-        paddingVertical: 8,
-        text: {
-            color: normalizeNativeThemeColor(theme.codeText),
-            fontSize: 15,
-            lineHeight: 22,
-        },
-    },
-    table: {
-        cellBackgroundColor: normalizeNativeThemeColor(theme.blockSurface),
-        headerBackgroundColor: normalizeNativeThemeColor(theme.blockSurface),
-        borderColor: normalizeNativeThemeColor(theme.structuralLine),
-        selectionBackgroundColor: normalizeNativeThemeColor(theme.accent),
-        selectionBorderColor: normalizeNativeThemeColor(theme.accentStrong),
-    },
-    horizontalRule: {
-        color: normalizeNativeThemeColor(theme.structuralLine),
-        thickness: 1,
-        verticalMargin: 16,
-    },
-    toolbar: {
-        appearance: "native",
-        ...(typeof theme.toolbar.height === "number" ? { height: theme.toolbar.height } : {}),
-        buttonColor: normalizeNativeThemeColor(theme.text),
-        buttonActiveColor: normalizeNativeThemeColor(theme.text),
-        buttonActiveBackgroundColor: normalizeNativeThemeColor(theme.accent),
-        buttonDisabledColor: normalizeNativeThemeColor(theme.muted),
-    },
-});
-const loadNativeEditor = () => {
-    if (Platform.OS === "web") {
-        return null;
-    }
-    try {
-        return require("@openeditor/react-native-prose-editor").NativeRichTextEditor;
-    }
-    catch {
-        return null;
-    }
-};
-const dismissKeyboard = () => {
-    try {
-        const { KeyboardController } = require("react-native-keyboard-controller");
-        void KeyboardController.dismiss();
-    }
-    catch {
-        Keyboard.dismiss();
-    }
-};
-const contentFromNativeJson = (json) => fromNativeEditorDocument(json);
-const normalizeForNativeEditor = (document) => sanitizeNativeEditorDocument(document);
-const isSafeInputUrl = (value, allowDataImage = false) => {
-    const normalized = value.trim().toLowerCase();
-    if (!normalized) {
-        return false;
-    }
-    if (normalized.startsWith("javascript:") || normalized.startsWith("vbscript:")) {
-        return false;
-    }
-    if (normalized.startsWith("data:")) {
-        return allowDataImage && normalized.startsWith("data:image/");
-    }
-    return true;
-};
-const documentsMatch = (left, right) => JSON.stringify(left) === JSON.stringify(right);
-const attachmentTypeLabel = (mimeType, name) => {
-    const subtype = mimeType?.split("/").at(-1)?.split("+")[0]?.trim();
-    const extension = name.includes(".") ? name.split(".").at(-1)?.trim() : undefined;
-    return (subtype || extension || "FILE").slice(0, 4).toUpperCase();
-};
-const formatAttachmentSize = (size) => {
-    if (size === null || !Number.isFinite(size) || size < 0)
-        return null;
-    if (size < 1024)
-        return `${Math.round(size)} B`;
-    if (size < 1024 * 1024)
-        return `${(size / 1024).toFixed(size < 10 * 1024 ? 1 : 0)} KB`;
-    return `${(size / (1024 * 1024)).toFixed(size < 10 * 1024 * 1024 ? 1 : 0)} MB`;
-};
-const NativeToggleListItem = ({ children, initiallyOpen, theme, }) => {
-    const [open, setOpen] = useState(initiallyOpen);
-    const childArray = Array.isArray(children) ? children : [children];
-    return (_jsxs(View, { style: styles.viewerListRow, children: [_jsx(Pressable, { accessibilityLabel: open ? "Collapse toggle item" : "Expand toggle item", accessibilityRole: "button", hitSlop: 8, onPress: () => setOpen((current) => !current), style: styles.viewerListControl, children: _jsx(View, { style: [
-                        styles.viewerToggleCaret,
-                        { borderLeftColor: theme.muted },
-                        open ? styles.viewerToggleCaretOpen : null,
-                    ] }) }), _jsx(View, { style: styles.viewerListContent, children: open ? childArray : childArray.slice(0, 1) })] }));
-};
-const OpenEditorNativePageViewer = ({ cachedPage, pageRuntime, theme, }) => {
-    const [page, setPage] = useState(cachedPage);
-    useEffect(() => {
-        setPage(cachedPage);
-        if (!pageRuntime?.resolvePage)
-            return;
-        let active = true;
-        void pageRuntime.resolvePage(cachedPage.pageId).then((resolved) => {
-            if (active && resolved)
-                setPage(resolved);
-        }).catch(() => undefined);
-        return () => {
-            active = false;
-        };
-    }, [cachedPage.href, cachedPage.icon, cachedPage.pageId, cachedPage.title, pageRuntime]);
-    const content = _jsxs(_Fragment, { children: [_jsx(Text, { style: [styles.viewerPageIcon, { color: theme.text }], children: normalizeEmoji(page.icon, DEFAULT_PAGE_EMOJI) }), _jsx(Text, { style: [styles.viewerPageTitle, { color: theme.text, textDecorationColor: theme.muted }], children: page.title }), _jsx(Text, { style: { color: theme.muted }, children: "\u2192" })] });
-    return pageRuntime?.openPage ? (_jsx(Pressable, { accessibilityLabel: `Open ${page.title}`, accessibilityRole: "button", onPress: () => void pageRuntime.openPage?.(page), style: { alignItems: "center", borderRadius: 8, flexDirection: "row", gap: 8, marginBottom: 8, padding: 8 }, children: content })) : (_jsx(View, { style: { alignItems: "center", flexDirection: "row", gap: 8, marginBottom: 8, padding: 8 }, children: content }));
-};
-const renderNativeViewerNode = (node, key, theme, renderers, pageRuntime, attachmentRuntime) => {
-    if (node.type === "text") {
-        return _jsx(Text, { style: { color: theme.text }, children: node.text ?? "" }, key);
-    }
-    const children = node.content?.map((child, index) => renderNativeViewerNode(child, `${key}-${index}`, theme, renderers, pageRuntime, attachmentRuntime)) ?? null;
-    const blockKey = findBlockSpecForNode(defaultBlockRegistry, node)?.name ?? node.type;
-    const customRenderer = renderers?.[blockKey];
-    if (customRenderer) {
-        return customRenderer({ node, children, theme });
-    }
-    switch (blockKey) {
-        case "paragraph":
-            return _jsx(View, { style: { marginBottom: 12 }, children: _jsx(Text, { style: { color: theme.textSoft }, children: children }) }, key);
-        case "heading": {
-            const level = typeof node.attrs?.level === "number" ? Math.min(Math.max(node.attrs.level, 1), 6) : 2;
-            const fontSize = [0, 28, 24, 20, 18, 16, 14][level];
-            return _jsx(Text, { style: { color: theme.text, fontSize, fontWeight: "700", marginBottom: 8 }, children: children }, key);
-        }
-        case "bulletList":
-        case "orderedList":
-        case "taskList":
-        case "toggleList":
-            return _jsx(View, { style: { marginBottom: 12 }, children: children }, key);
-        case "blockquote":
-            return _jsx(View, { style: { borderLeftColor: theme.structuralLine, borderLeftWidth: 3, marginBottom: 12, paddingLeft: 12 }, children: children }, key);
-        case "codeBlock":
-            return _jsx(View, { style: { backgroundColor: theme.codeBackground, borderRadius: 8, marginBottom: 12, padding: 12 }, children: _jsx(Text, { style: { color: theme.codeText }, children: node.content?.map((child) => child.text ?? "").join("") }) }, key);
-        case "callout": {
-            const emoji = normalizeEmoji(node.attrs?.emoji, DEFAULT_CALLOUT_EMOJI);
-            return _jsxs(View, { style: { backgroundColor: theme.blockSurface, borderRadius: 12, flexDirection: "row", gap: 10, marginBottom: 12, padding: 14 }, children: [_jsx(Text, { style: { fontSize: 20 }, children: emoji }), _jsx(View, { style: { flex: 1 }, children: children })] }, key);
-        }
-        case "divider":
-            return _jsx(View, { style: { backgroundColor: theme.structuralLine, height: 1, marginVertical: 16 } }, key);
-        case "image":
-            return (_jsx(NativeImage, { source: { uri: typeof node.attrs?.src === "string" ? node.attrs.src : "" }, accessibilityLabel: typeof node.attrs?.alt === "string" ? node.attrs.alt : undefined, style: { borderRadius: 8, height: 220, marginBottom: 12, width: "100%" }, resizeMode: "cover" }, key));
-        case "columns":
-            return _jsx(View, { style: { flexDirection: "row", gap: 12, marginBottom: 12 }, children: children }, key);
-        case "table":
-            return _jsx(View, { style: { borderColor: theme.structuralLine, borderRadius: 8, borderWidth: 1, marginBottom: 12, overflow: "hidden" }, children: children }, key);
-        case "page": {
-            const pageId = typeof node.attrs?.pageId === "string" ? node.attrs.pageId : "";
-            const title = node.content?.map((child) => child.text ?? "").join("") || "Untitled";
-            const icon = normalizeEmoji(node.attrs?.icon, DEFAULT_PAGE_EMOJI);
-            return _jsx(OpenEditorNativePageViewer, { cachedPage: { pageId, title, icon, href: typeof node.attrs?.href === "string" ? node.attrs.href : null }, pageRuntime: pageId ? pageRuntime : undefined, theme: theme }, key);
-        }
-        case "attachment": {
-            const snapshot = {
-                attachmentId: typeof node.attrs?.attachmentId === "string" ? node.attrs.attachmentId : null,
-                name: typeof node.attrs?.name === "string" ? node.attrs.name : "Attachment",
-                mimeType: typeof node.attrs?.mimeType === "string" ? node.attrs.mimeType : null,
-                size: typeof node.attrs?.size === "number" ? node.attrs.size : null,
-                url: typeof node.attrs?.url === "string" ? node.attrs.url : null,
-            };
-            const size = formatAttachmentSize(snapshot.size);
-            const type = attachmentTypeLabel(snapshot.mimeType, snapshot.name);
-            const content = _jsxs(_Fragment, { children: [_jsx(View, { style: [styles.viewerAttachmentIcon, { backgroundColor: theme.blockSurface }], children: _jsx(Text, { style: [styles.viewerAttachmentType, { color: theme.muted }], children: type }) }), _jsxs(View, { style: { flex: 1 }, children: [_jsx(Text, { numberOfLines: 1, style: { color: theme.text, fontWeight: "600" }, children: snapshot.name }), _jsx(Text, { style: { color: theme.muted, fontSize: 12, marginTop: 3 }, children: [size, type].filter(Boolean).join(" · ") })] }), _jsx(Text, { style: { color: theme.muted }, children: "\u2192" })] });
-            return attachmentRuntime?.openAttachment ? _jsx(Pressable, { accessibilityLabel: `Open ${snapshot.name}`, accessibilityRole: "button", onPress: () => void attachmentRuntime.openAttachment?.(snapshot), style: [styles.viewerAttachment, { backgroundColor: theme.surface, borderColor: theme.structuralLine }], children: content }, key) : _jsx(View, { style: [styles.viewerAttachment, { backgroundColor: theme.surface, borderColor: theme.structuralLine }], children: content }, key);
-        }
-        default:
-            if (node.type === "column") {
-                return _jsx(View, { style: { flex: 1 }, children: children }, key);
-            }
-            if (node.type === "tableRow") {
-                return _jsx(View, { style: { borderBottomColor: theme.structuralLine, borderBottomWidth: StyleSheet.hairlineWidth, flexDirection: "row" }, children: children }, key);
-            }
-            if (node.type === "tableHeader" || node.type === "tableCell") {
-                return _jsx(View, { style: { backgroundColor: theme.blockSurface, flex: 1, padding: 10 }, children: children }, key);
-            }
-            if (node.type === "taskItem") {
-                const checked = node.attrs?.checked === true;
-                return _jsxs(View, { style: styles.viewerListRow, children: [_jsx(View, { style: [styles.viewerTaskCheckbox, { backgroundColor: checked ? theme.accentStrong : theme.blockSurface }], children: checked ? _jsx(Text, { style: [styles.viewerTaskCheck, { color: theme.primaryText }], children: "\u2713" }) : null }), _jsx(View, { style: styles.viewerListContent, children: children })] }, key);
-            }
-            if (node.type === "toggleListItem") {
-                return _jsx(NativeToggleListItem, { initiallyOpen: node.attrs?.open !== false, theme: theme, children: children }, key);
-            }
-            if (node.type === "listItem") {
-                return _jsxs(View, { style: { flexDirection: "row", gap: 8, marginBottom: 6 }, children: [_jsx(Text, { style: { color: theme.muted }, children: "\u2022" }), _jsx(View, { style: { flex: 1 }, children: children })] }, key);
-            }
-            return _jsx(View, { children: children }, key);
-    }
-};
-export const OpenEditorNativeToolbar = ({ actions = [
-    { key: openEditorNativeToolbarActionKeys.undo, label: "Undo" },
-    { key: openEditorNativeToolbarActionKeys.redo, label: "Redo" },
-    { key: openEditorNativeToolbarActionKeys.paragraph, label: "Paragraph" },
-    { key: openEditorNativeToolbarActionKeys.bulletList, label: "Bullets" },
-    { key: openEditorNativeToolbarActionKeys.orderedList, label: "Numbers" },
-], onActionPress, theme, }) => {
-    const resolvedTheme = {
-        ...defaultNativeTheme,
-        ...theme,
-        toolbar: {
-            ...defaultNativeTheme.toolbar,
-            ...theme?.toolbar,
-        },
-    };
-    return (_jsx(View, { style: [styles.toolbar, { backgroundColor: resolvedTheme.surface, borderColor: resolvedTheme.border }], children: actions.map((action) => (_jsx(Pressable, { onPress: () => {
-                action.onPress?.(action.key);
-                onActionPress?.(action.key);
-            }, style: [styles.toolbarButton, { backgroundColor: resolvedTheme.accent, borderColor: resolvedTheme.borderStrong }], children: _jsx(Text, { style: [styles.toolbarButtonText, { color: resolvedTheme.accentText }], children: action.label }) }, action.key))) }));
-};
-/** Canonical native page-title and page-icon editor for opened page surfaces. */
-export const OpenEditorNativePageHeader = ({ page, runtime, theme, onPageChange }) => {
-    const [title, setTitle] = useState(page.title);
-    const [icon, setIcon] = useState(normalizeEmoji(page.icon, DEFAULT_PAGE_EMOJI));
-    const [showEmojiPicker, setShowEmojiPicker] = useState(false);
-    const [error, setError] = useState(null);
-    const resolvedTheme = { ...defaultNativeTheme, ...theme };
-    useEffect(() => setTitle(page.title), [page.pageId, page.title]);
-    useEffect(() => setIcon(normalizeEmoji(page.icon, DEFAULT_PAGE_EMOJI)), [page.icon, page.pageId]);
-    const updatePage = async (update) => {
-        setError(null);
-        try {
-            const resolved = await runtime.updatePage(page.pageId, update);
-            const next = resolved ?? { ...page, ...update };
-            setTitle(next.title);
-            setIcon(normalizeEmoji(next.icon, DEFAULT_PAGE_EMOJI));
-            onPageChange?.(next);
-        }
-        catch (cause) {
-            setError(cause instanceof Error ? cause.message : "Could not update the page.");
-        }
-    };
-    return _jsxs(View, { style: styles.pageHeader, children: [_jsx(Pressable, { accessibilityLabel: "Change page icon", accessibilityRole: "button", onPress: () => setShowEmojiPicker(true), children: _jsx(Text, { style: styles.pageHeaderIcon, children: icon }) }), _jsx(TextInput, { accessibilityLabel: "Page title", multiline: true, onBlur: () => {
-                    const nextTitle = title.trim() || "Untitled";
-                    setTitle(nextTitle);
-                    if (nextTitle !== page.title)
-                        void updatePage({ title: nextTitle });
-                }, onChangeText: setTitle, placeholder: "Untitled", placeholderTextColor: resolvedTheme.muted, style: [styles.pageHeaderTitle, { color: resolvedTheme.text }], value: title }), error ? _jsx(Text, { accessibilityRole: "alert", style: styles.pageHeaderError, children: error }) : null, _jsx(OpenEditorNativeEmojiPicker, { onEmojiSelect: (nextIcon) => {
-                    setIcon(nextIcon);
-                    void updatePage({ icon: nextIcon });
-                }, onRequestClose: () => setShowEmojiPicker(false), theme: { surfaceMuted: resolvedTheme.surfaceMuted, text: resolvedTheme.text, muted: resolvedTheme.muted }, visible: showEmojiPicker })] });
-};
-export const OpenEditorNative = forwardRef(function OpenEditorNative({ initialDocument = createDocument(), editable = true, placeholder = "Start writing...", showToolbar = true, theme, toolbarPlacement = "keyboard", onChange, pageRuntime, attachmentRuntime, enabledBlocks, }, forwardedRef) {
-    const editorRef = useRef(null);
-    const [currentDocument, setCurrentDocument] = useState(() => normalizeForNativeEditor(initialDocument));
-    const currentDocumentRef = useRef(currentDocument);
-    currentDocumentRef.current = currentDocument;
-    const onChangeRef = useRef(onChange);
-    onChangeRef.current = onChange;
-    const [selection, setSelection] = useState();
-    const [linkRequest, setLinkRequest] = useState(null);
-    const [linkUrl, setLinkUrl] = useState("https://");
-    const [imageRequest, setImageRequest] = useState(null);
-    const [emojiRequest, setEmojiRequest] = useState(null);
-    const [imageUrl, setImageUrl] = useState("https://placehold.co/960x420/png");
-    const [attachmentUpload, setAttachmentUpload] = useState(null);
-    const attachmentAbortRef = useRef(null);
-    const [history, setHistory] = useState({ canUndo: false, canRedo: false });
-    const nativeDocument = currentDocument;
-    const NativeEditor = useMemo(() => loadNativeEditor(), []);
-    const resolvedTheme = useMemo(() => ({
-        ...defaultNativeTheme,
-        ...theme,
-        toolbar: {
-            ...defaultNativeTheme.toolbar,
-            ...theme?.toolbar,
-        },
-    }), [theme]);
-    const nativeEditorTheme = useMemo(() => toNativeEditorTheme(resolvedTheme), [resolvedTheme]);
-    const authorableBlocks = useMemo(() => [...defaultBlockRegistry.values()]
-        .filter((block) => block.support?.native !== "unsupported")
-        .map((block) => block.name)
-        .filter((blockName) => isOpenEditorBlockEnabled(blockName, { enabledBlocks }))
-        .filter((blockName) => blockName !== "page" || Boolean(pageRuntime?.createPage))
-        .filter((blockName) => blockName !== "attachment" || Boolean(attachmentRuntime?.selectAttachment && attachmentRuntime.uploadAttachment)), [attachmentRuntime, enabledBlocks, pageRuntime]);
-    const isBlockEnabled = (blockName) => authorableBlocks.includes(/^heading[1-6]$/.test(blockName) ? "heading" : blockName);
-    const toolbarItems = useMemo(() => createOpenEditorNativeToolbarItems({
-        canUndo: history.canUndo,
-        canRedo: history.canRedo,
-        enabledBlocks: authorableBlocks,
-    }), [authorableBlocks, history.canRedo, history.canUndo]);
-    const syncDocument = (nextDocument, updateEditor = true) => {
-        const normalized = normalizeForNativeEditor(nextDocument);
-        if (documentsMatch(normalized, currentDocumentRef.current))
-            return;
-        currentDocumentRef.current = normalized;
-        setCurrentDocument(normalized);
-        onChangeRef.current?.(normalized);
-        if (updateEditor) {
-            editorRef.current?.setContentJson(toNativeEditorDocument(normalized));
-        }
-    };
-    useImperativeHandle(forwardedRef, () => ({
-        getContent: () => currentDocumentRef.current,
-        setContent: (nextDocument) => syncDocument(nextDocument, true),
-        undo: () => editorRef.current?.undo(),
-        redo: () => editorRef.current?.redo(),
-    }));
-    const moveSelectedBlock = (direction) => {
-        const selectedIndex = resolveSelectedTopLevelIndex(nativeDocument, selection);
-        const nextIndex = selectedIndex + direction;
-        if (nextIndex < 0 || nextIndex >= nativeDocument.content.length) {
-            return;
-        }
-        syncDocument(moveTopLevelBlock(nativeDocument, selectedIndex, nextIndex), true);
-    };
-    const uploadAttachment = async () => {
-        if (!attachmentRuntime?.selectAttachment || !attachmentRuntime.uploadAttachment)
-            return;
-        attachmentAbortRef.current?.abort();
-        const controller = new AbortController();
-        attachmentAbortRef.current = controller;
-        try {
-            const input = await attachmentRuntime.selectAttachment({ signal: controller.signal });
-            if (!input || controller.signal.aborted)
-                return;
-            setAttachmentUpload({ input, progress: 0, error: null });
-            const validation = await attachmentRuntime.validateAttachment?.(input);
-            if (validation && !validation.accepted)
-                throw new Error(validation.message);
-            const snapshot = await attachmentRuntime.uploadAttachment(input, { signal: controller.signal, onProgress: (progress) => setAttachmentUpload((current) => current ? { ...current, progress } : current) });
-            if (controller.signal.aborted)
-                return;
-            editorRef.current?.insertContentJson({ type: "doc", content: [{ type: "attachment", attrs: snapshot }] });
-            setAttachmentUpload(null);
-        }
-        catch (cause) {
-            if (!controller.signal.aborted)
-                setAttachmentUpload((current) => current ? { ...current, error: cause instanceof Error ? cause.message : "Upload failed." } : current);
-        }
-    };
-    const handleToolbarAction = (key) => {
-        if (key === openEditorNativeToolbarActionKeys.dismissKeyboard) {
-            dismissKeyboard();
-            return;
-        }
-        if (key === openEditorNativeToolbarActionKeys.moveBlockUp) {
-            moveSelectedBlock(-1);
-            return;
-        }
-        if (key === openEditorNativeToolbarActionKeys.moveBlockDown) {
-            moveSelectedBlock(1);
-            return;
-        }
-        if (key === openEditorNativeToolbarActionKeys.attachment) {
-            void uploadAttachment();
-            return;
-        }
-        if (key === openEditorNativeToolbarActionKeys.undo) {
-            editorRef.current?.undo();
-            return;
-        }
-        if (key === openEditorNativeToolbarActionKeys.redo) {
-            editorRef.current?.redo();
-            return;
-        }
-        if (key === openEditorNativeToolbarActionKeys.bulletList) {
-            editorRef.current?.toggleList("bulletList");
-            return;
-        }
-        if (key === openEditorNativeToolbarActionKeys.orderedList) {
-            editorRef.current?.toggleList("orderedList");
-            return;
-        }
-        if (key === openEditorNativeToolbarActionKeys.columns) {
-            editorRef.current?.insertColumns();
-            return;
-        }
-        if (key === openEditorNativeToolbarActionKeys.table) {
-            editorRef.current?.insertTable();
-            return;
-        }
-        if (!isBlockEnabled(key))
-            return;
-        if (key === openEditorNativeToolbarActionKeys.page && pageRuntime?.createPage) {
-            void pageRuntime.createPage({ title: "Untitled", icon: DEFAULT_PAGE_EMOJI }).then((page) => {
-                editorRef.current?.insertContentJson({
-                    type: "doc",
-                    content: [{
-                            type: "page",
-                            attrs: { pageId: page.pageId, icon: page.icon ?? DEFAULT_PAGE_EMOJI, href: page.href ?? null },
-                            content: [{ type: "text", text: page.title || "Untitled" }],
-                        }],
-                });
-            }).catch(() => undefined);
-            return;
-        }
-        const actionDocument = defaultDocumentForToolbarAction(key);
-        if (actionDocument) {
-            editorRef.current?.insertContentJson(actionDocument);
-        }
-    };
-    const submitLinkDialog = () => {
-        const url = linkUrl.trim();
-        if (!linkRequest) {
-            return;
-        }
-        if (url && isSafeInputUrl(url)) {
-            linkRequest.setLink(url);
-        }
-        else {
-            linkRequest.unsetLink();
-        }
-        setLinkRequest(null);
-    };
-    const submitImageDialog = () => {
-        const url = imageUrl.trim();
-        if (imageRequest && isSafeInputUrl(url, imageRequest.allowBase64)) {
-            imageRequest.insertImage(url, { alt: "Placeholder" });
-        }
-        setImageRequest(null);
-    };
-    if (!NativeEditor) {
-        return (_jsxs(View, { style: [styles.unavailable, { backgroundColor: resolvedTheme.surface, borderColor: resolvedTheme.border }], children: [_jsx(Text, { style: [styles.unavailableTitle, { color: resolvedTheme.text }], children: "Native editor unavailable" }), _jsx(Text, { style: [styles.unavailableText, { color: resolvedTheme.muted }], children: "OpenEditorNative requires the @openeditor/react-native-prose-editor native module in a development build." })] }));
-    }
-    return (_jsxs(_Fragment, { children: [_jsx(NativeEditor, { ref: editorRef, initialJSON: toNativeEditorDocument(nativeDocument), schema: openEditorNativeSchema, editable: editable, placeholder: placeholder, showToolbar: showToolbar, toolbarPlacement: toolbarPlacement, toolbarItems: toolbarItems, onToolbarAction: handleToolbarAction, theme: nativeEditorTheme, autoDetectLinks: true, allowBase64Images: true, allowImageResizing: true, heightBehavior: "autoGrow", onRequestLink: (request) => {
-                    setLinkUrl(request.href ?? "https://");
-                    setLinkRequest(request);
-                }, onRequestImage: (request) => {
-                    setImageUrl("https://placehold.co/960x420/png");
-                    setImageRequest(request);
-                }, onOpenPage: (page) => {
-                    if (!pageRuntime?.openPage)
-                        return;
-                    if (!pageRuntime.resolvePage) {
-                        void pageRuntime.openPage(page);
-                        return;
-                    }
-                    void pageRuntime.resolvePage(page.pageId)
-                        .then((resolved) => pageRuntime.openPage?.(resolved ?? page))
-                        .catch(() => pageRuntime.openPage?.(page));
-                }, onRequestEmoji: (request) => {
-                    if (request.nodeType === "page" && !pageRuntime)
-                        return;
-                    setEmojiRequest(request);
-                }, onOpenAttachment: (attachment) => void attachmentRuntime?.openAttachment?.(attachment), onSelectionChange: setSelection, onHistoryStateChange: setHistory, onContentChangeJSON: (json) => {
-                    syncDocument(contentFromNativeJson(json), false);
-                }, style: styles.nativeEditor }), _jsx(UrlDialog, { title: "Link", value: linkUrl, visible: linkRequest !== null, placeholder: "https://", confirmLabel: linkUrl.trim() ? "Apply" : "Remove", onChangeText: setLinkUrl, onCancel: () => setLinkRequest(null), onSubmit: submitLinkDialog, theme: resolvedTheme }), _jsx(Modal, { animationType: "fade", onRequestClose: () => { attachmentAbortRef.current?.abort(); setAttachmentUpload(null); }, transparent: true, visible: attachmentUpload !== null, children: _jsx(View, { style: [styles.dialogBackdrop, { backgroundColor: resolvedTheme.backdrop }], children: _jsxs(View, { accessibilityViewIsModal: true, style: [styles.dialog, { backgroundColor: resolvedTheme.surface, borderColor: resolvedTheme.border }], children: [_jsx(Text, { style: [styles.unavailableTitle, { color: resolvedTheme.text }], children: attachmentUpload?.input.name }), _jsx(Text, { style: [styles.unavailableText, { color: attachmentUpload?.error ? "#b42318" : resolvedTheme.muted }], children: attachmentUpload?.error ?? `Uploading ${Math.round((attachmentUpload?.progress ?? 0) * 100)}%` }), _jsxs(View, { style: styles.dialogActions, children: [attachmentUpload?.error ? _jsx(CommandButton, { label: "Retry", onPress: () => void uploadAttachment(), theme: resolvedTheme }) : null, _jsx(CommandButton, { label: "Cancel", onPress: () => { attachmentAbortRef.current?.abort(); setAttachmentUpload(null); }, theme: resolvedTheme })] })] }) }) }), _jsx(UrlDialog, { title: "Image", value: imageUrl, visible: imageRequest !== null, placeholder: "https://", confirmLabel: "Insert", onChangeText: setImageUrl, onCancel: () => setImageRequest(null), onSubmit: submitImageDialog, theme: resolvedTheme }), _jsx(OpenEditorNativeEmojiPicker, { onEmojiSelect: (emoji) => {
-                    if (!emojiRequest)
-                        return;
-                    const attribute = emojiRequest.nodeType === "page" ? "icon" : "emoji";
-                    editorRef.current?.updateNodeAttrs(emojiRequest.docPos, {
-                        ...emojiRequest.attrs,
-                        [attribute]: emoji,
-                    });
-                    if (emojiRequest.nodeType === "page" && typeof emojiRequest.attrs.pageId === "string") {
-                        void pageRuntime?.updatePage?.(emojiRequest.attrs.pageId, { icon: emoji });
-                    }
-                    setEmojiRequest(null);
-                }, onRequestClose: () => setEmojiRequest(null), theme: {
-                    surfaceMuted: resolvedTheme.surfaceMuted,
-                    text: resolvedTheme.text,
-                    muted: resolvedTheme.muted,
-                }, visible: emojiRequest !== null })] }));
-});
-export const OpenEditorNativeViewer = ({ document = createDocument(), theme, renderers, pageRuntime, attachmentRuntime, }) => {
-    const resolvedTheme = {
-        ...defaultNativeTheme,
-        ...theme,
-        toolbar: {
-            ...defaultNativeTheme.toolbar,
-            ...theme?.toolbar,
-        },
-    };
-    const normalizedDocument = normalizeForNativeEditor(document);
-    return (_jsx(View, { style: [styles.viewer, { backgroundColor: resolvedTheme.surface, borderColor: resolvedTheme.border }], children: normalizedDocument.content.map((node, index) => renderNativeViewerNode(node, `native-viewer-${index}`, resolvedTheme, renderers, pageRuntime, attachmentRuntime)) }));
-};
-const CommandButton = ({ label, active = false, primary = false, theme, onPress, }) => (_jsx(Pressable, { accessibilityRole: "button", accessibilityState: { selected: active }, onPress: onPress, style: [
-        styles.commandButton,
-        { backgroundColor: theme.surface, borderColor: theme.border },
-        active && { backgroundColor: theme.accent, borderColor: theme.accent },
-        primary && { backgroundColor: theme.primary, borderColor: theme.primary },
-    ], children: _jsx(Text, { style: [styles.commandButtonText, { color: theme.text }, (active || primary) && { color: active ? theme.accentText : theme.primaryText }], children: label }) }));
-const UrlDialog = ({ title, value, visible, placeholder, confirmLabel, onChangeText, onCancel, onSubmit, theme, }) => (_jsx(Modal, { visible: visible, transparent: true, animationType: "fade", onRequestClose: onCancel, children: _jsx(View, { style: [styles.dialogBackdrop, { backgroundColor: theme.backdrop }], children: _jsxs(View, { style: [styles.dialog, { backgroundColor: theme.surface }], children: [_jsx(Text, { style: [styles.dialogTitle, { color: theme.text }], children: title }), _jsx(TextInput, { autoCapitalize: "none", autoCorrect: false, keyboardType: "url", onChangeText: onChangeText, placeholder: placeholder, placeholderTextColor: theme.placeholder, style: [styles.dialogInput, { borderColor: theme.border, color: theme.text }], value: value }), _jsxs(View, { style: styles.dialogActions, children: [_jsx(CommandButton, { label: "Cancel", theme: theme, onPress: onCancel }), _jsx(CommandButton, { label: confirmLabel, primary: true, theme: theme, onPress: onSubmit })] })] }) }) }));
-const styles = StyleSheet.create({
-    viewer: {
-        borderRadius: 12,
-        borderWidth: 1,
-        gap: 4,
-        padding: 16,
-    },
-    viewerListRow: {
-        alignItems: "flex-start",
-        flexDirection: "row",
-        gap: 8,
-        marginBottom: 6,
-    },
-    viewerListControl: {
-        alignItems: "center",
-        height: 24,
-        justifyContent: "center",
-        width: 20,
-    },
-    viewerListContent: {
-        flex: 1,
-    },
-    viewerToggleCaret: {
-        borderBottomColor: "transparent",
-        borderBottomWidth: 4,
-        borderLeftWidth: 6,
-        borderTopColor: "transparent",
-        borderTopWidth: 4,
-        height: 0,
-        transform: [{ rotate: "0deg" }],
-        width: 0,
-    },
-    viewerToggleCaretOpen: {
-        transform: [{ rotate: "90deg" }],
-    },
-    viewerTaskCheckbox: {
-        alignItems: "center",
-        borderRadius: 4,
-        height: 20,
-        justifyContent: "center",
-        marginTop: 2,
-        width: 20,
-    },
-    viewerTaskCheck: {
-        fontSize: 13,
-        fontWeight: "800",
-        lineHeight: 16,
-    },
-    viewerPageIcon: {
-        fontSize: 18,
-        lineHeight: 24,
-        textAlign: "center",
-        width: 24,
-    },
-    viewerPageTitle: {
-        flex: 1,
-        fontWeight: "600",
-        lineHeight: 24,
-        textDecorationLine: "underline",
-    },
-    viewerAttachment: {
-        alignItems: "center",
-        borderRadius: 12,
-        borderWidth: 1,
-        flexDirection: "row",
-        gap: 12,
-        marginBottom: 8,
-        minHeight: 68,
-        paddingHorizontal: 12,
-        paddingVertical: 10,
-    },
-    viewerAttachmentIcon: {
-        alignItems: "center",
-        borderRadius: 9,
-        height: 48,
-        justifyContent: "center",
-        width: 42,
-    },
-    viewerAttachmentType: {
-        fontSize: 9,
-        fontWeight: "800",
-        letterSpacing: 0.4,
-    },
-    nativeEditor: {
-        minHeight: 320,
-    },
-    toolbar: {
-        borderRadius: 10,
-        borderWidth: 1,
-        flexDirection: "row",
-        flexWrap: "wrap",
-        gap: 8,
-        padding: 8,
-    },
-    toolbarButton: {
-        borderRadius: 999,
-        borderWidth: 1,
-        minHeight: 34,
-        paddingHorizontal: 12,
-        paddingVertical: 8,
-    },
-    toolbarButtonText: {
-        fontSize: 13,
-        fontWeight: "700",
-    },
-    unavailable: {
-        backgroundColor: "#ffffff",
-        borderColor: "#e5e5e5",
-        borderRadius: 8,
-        borderCurve: "continuous",
-        borderWidth: 1,
-        margin: 16,
-        padding: 16,
-    },
-    unavailableTitle: {
-        fontSize: 16,
-        fontWeight: "700",
-        marginBottom: 4,
-    },
-    unavailableText: {
-        fontSize: 14,
-        lineHeight: 20,
-    },
-    commandButton: {
-        alignItems: "center",
-        backgroundColor: "#ffffff",
-        borderColor: "#e5e5e5",
-        borderRadius: 8,
-        borderWidth: 1,
-        justifyContent: "center",
-        minHeight: 38,
-        paddingHorizontal: 12,
-    },
-    commandButtonText: {
-        color: "#171717",
-        fontSize: 13,
-        fontWeight: "700",
-    },
-    pageHeader: {
-        gap: 8,
-        paddingBottom: 16,
-    },
-    pageHeaderIcon: {
-        fontSize: 40,
-        lineHeight: 48,
-    },
-    pageHeaderTitle: {
-        fontSize: 30,
-        fontWeight: "700",
-        lineHeight: 36,
-        padding: 0,
-    },
-    pageHeaderError: {
-        color: "#dc2626",
-        fontSize: 12,
-    },
-    dialogBackdrop: {
-        alignItems: "center",
-        backgroundColor: "rgba(0, 0, 0, 0.32)",
-        flex: 1,
-        justifyContent: "center",
-        padding: 24,
-    },
-    dialog: {
-        backgroundColor: "#ffffff",
-        borderRadius: 8,
-        gap: 12,
-        maxWidth: 420,
-        padding: 16,
-        width: "100%",
-    },
-    dialogTitle: {
-        color: "#171717",
-        fontSize: 17,
-        fontWeight: "700",
-    },
-    dialogInput: {
-        borderColor: "#e5e5e5",
-        borderRadius: 8,
-        borderWidth: 1,
-        color: "#171717",
-        fontSize: 15,
-        minHeight: 44,
-        paddingHorizontal: 12,
-    },
-    dialogActions: {
-        flexDirection: "row",
-        gap: 8,
-        justifyContent: "flex-end",
-    },
-});
-export { createNativeEditorDocument, fromNativeEditorDocument, sanitizeNativeEditorDocument, toNativeEditorDocument, } from "./document.js";
-export { createOpenEditorNativeToolbarItems, defaultDocumentForToolbarAction, nativeToolbarParityCoverage, openEditorNativeToolbarActionKeys, openEditorNativeToolbarItems, } from "./toolbar.js";
+export { OpenEditorNative, } from "./native-editor.js";
+export { OpenEditorNativeToolbar, defaultOpenEditorNativeToolbarItems, openEditorNativeBlockPickerItems, } from "./toolbar-host.js";