@openeditor/native 0.0.1

package/dist/index.js

@@ -0,0 +1,569 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { createDocument, findBlockSpecForNode, moveTopLevelBlock, textBlock, } from "@openeditor/core";
+import { 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 { defaultBlockRegistry } from "@openeditor/schema";
+const defaultNativeTheme = {
+    background: "#fafafa",
+    surface: "#ffffff",
+    surfaceMuted: "#f5f5f5",
+    text: "#171717",
+    textSoft: "#262626",
+    muted: "#737373",
+    placeholder: "#a3a3a3",
+    border: "#e5e5e5",
+    borderStrong: "#d4d4d4",
+    accent: "#f5f5f5",
+    accentText: "#171717",
+    accentStrong: "#171717",
+    primary: "#171717",
+    primaryText: "#ffffff",
+    codeBackground: "#f5f5f5",
+    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: "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",
+            htmlTag: "section",
+            attrs: { count: { default: 2 } },
+        },
+        {
+            name: "column",
+            content: "block+",
+            role: "block",
+            htmlTag: "div",
+        },
+        {
+            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: "transparent",
+    borderRadius: 0,
+    placeholderColor: theme.placeholder,
+    contentInsets: {
+        top: 16,
+        right: 16,
+        bottom: 16,
+        left: 16,
+    },
+    text: {
+        color: theme.text,
+        fontSize: 16,
+        lineHeight: 24,
+    },
+    paragraph: {
+        color: theme.textSoft,
+        fontSize: 16,
+        lineHeight: 24,
+        spacingAfter: 12,
+    },
+    headings: {
+        h1: { color: theme.text, fontSize: 28, fontWeight: "700", lineHeight: 34, spacingAfter: 14 },
+        h2: { color: theme.text, fontSize: 24, fontWeight: "700", lineHeight: 30, spacingAfter: 12 },
+        h3: { color: theme.text, fontSize: 20, fontWeight: "700", lineHeight: 26, spacingAfter: 10 },
+        h4: { color: theme.text, fontSize: 18, fontWeight: "700", lineHeight: 24, spacingAfter: 8 },
+        h5: { color: theme.text, fontSize: 16, fontWeight: "700", lineHeight: 22, spacingAfter: 8 },
+        h6: { color: theme.text, fontSize: 14, fontWeight: "700", lineHeight: 20, spacingAfter: 8 },
+    },
+    links: {
+        color: theme.accent,
+        underline: true,
+    },
+    list: {
+        markerColor: theme.muted,
+        itemSpacing: 6,
+    },
+    blockquote: {
+        borderColor: theme.accent,
+        borderWidth: 3,
+        text: {
+            color: theme.textSoft,
+            fontSize: 16,
+            lineHeight: 24,
+        },
+    },
+    codeBlock: {
+        backgroundColor: theme.codeBackground,
+        borderRadius: 8,
+        paddingHorizontal: 12,
+        paddingVertical: 8,
+        text: {
+            color: theme.codeText,
+            fontSize: 15,
+            lineHeight: 22,
+        },
+    },
+    horizontalRule: {
+        color: theme.border,
+        thickness: 1,
+        verticalMargin: 16,
+    },
+    toolbar: {
+        appearance: "native",
+        ...(typeof theme.toolbar.height === "number" ? { height: theme.toolbar.height } : {}),
+        buttonColor: theme.text,
+        buttonActiveColor: theme.text,
+        buttonActiveBackgroundColor: theme.accent,
+        buttonDisabledColor: 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 nativeSeedDocument = createDocument([
+    textBlock("heading", "OpenEditor Native", { level: 1 }),
+    textBlock("paragraph", "This native surface is intentionally limited to engine-owned blocks for now."),
+    {
+        type: "bulletList",
+        content: [
+            { type: "listItem", content: [textBlock("paragraph", "Paragraphs and headings")] },
+            { type: "listItem", content: [textBlock("paragraph", "Bullet and numbered lists")] },
+            { type: "listItem", content: [textBlock("paragraph", "Task lists, code blocks, columns, quotes, dividers, and images")] },
+        ],
+    },
+    {
+        type: "taskList",
+        content: [
+            { type: "taskItem", attrs: { checked: true }, content: [textBlock("paragraph", "Engine-owned structural list items")] },
+            { type: "taskItem", attrs: { checked: false }, content: [textBlock("paragraph", "Native task lists now live in the engine")] },
+        ],
+    },
+    {
+        type: "codeBlock",
+        content: [{ type: "text", text: "const native = 'owned by the engine';" }],
+    },
+    {
+        type: "blockquote",
+        content: [textBlock("paragraph", "Structural blocks return once the native engine owns them.")],
+    },
+    {
+        type: "columns",
+        attrs: { count: 2 },
+        content: [
+            { type: "column", content: [textBlock("paragraph", "Columns now flow through the native engine.")] },
+            { type: "column", content: [textBlock("paragraph", "Tables stay blocked until the native engine supports them cleanly.")] },
+        ],
+    },
+    { type: "horizontalRule" },
+    { type: "image", attrs: { src: "https://placehold.co/960x420/png", alt: "Placeholder" } },
+]);
+const renderNativeViewerNode = (node, key, theme, renderers) => {
+    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)) ?? 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":
+            return _jsx(View, { style: { marginBottom: 12 }, children: children }, key);
+        case "blockquote":
+            return _jsx(View, { style: { borderLeftColor: theme.accent, 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 "divider":
+            return _jsx(View, { style: { backgroundColor: theme.border, 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.border, borderRadius: 8, borderWidth: 1, marginBottom: 12, overflow: "hidden" }, children: children }, 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.border, borderBottomWidth: StyleSheet.hairlineWidth, flexDirection: "row" }, children: children }, key);
+            }
+            if (node.type === "tableHeader" || node.type === "tableCell") {
+                return _jsx(View, { style: { flex: 1, padding: 10 }, children: children }, key);
+            }
+            if (node.type === "listItem" || node.type === "taskItem") {
+                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))) }));
+};
+export const OpenEditorNative = ({ document = nativeSeedDocument, editable = true, showToolbar = true, theme, toolbarPlacement = "keyboard", onChange, }) => {
+    const editorRef = useRef(null);
+    const [currentDocument, setCurrentDocument] = useState(() => normalizeForNativeEditor(document));
+    const [selection, setSelection] = useState();
+    const [linkRequest, setLinkRequest] = useState(null);
+    const [linkUrl, setLinkUrl] = useState("https://");
+    const [imageRequest, setImageRequest] = useState(null);
+    const [imageUrl, setImageUrl] = useState("https://placehold.co/960x420/png");
+    const [history, setHistory] = useState({
+        undoStack: [],
+        redoStack: [],
+    });
+    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 toolbarItems = useMemo(() => createOpenEditorNativeToolbarItems({
+        canUndo: history.undoStack.length > 0,
+        canRedo: history.redoStack.length > 0,
+    }), [history.redoStack.length, history.undoStack.length]);
+    const syncDocument = (nextDocument, updateEditor = true) => {
+        const normalized = normalizeForNativeEditor(nextDocument);
+        if (!documentsMatch(normalized, nativeDocument)) {
+            setHistory((currentHistory) => ({
+                undoStack: [...currentHistory.undoStack.slice(-99), nativeDocument],
+                redoStack: [],
+            }));
+        }
+        setCurrentDocument(normalized);
+        onChange?.(normalized);
+        if (updateEditor) {
+            editorRef.current?.setContentJson(toNativeEditorDocument(normalized));
+        }
+    };
+    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 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.undo) {
+            const previous = history.undoStack.at(-1);
+            if (!previous) {
+                return;
+            }
+            setHistory((currentHistory) => ({
+                undoStack: currentHistory.undoStack.slice(0, -1),
+                redoStack: [nativeDocument, ...currentHistory.redoStack].slice(0, 100),
+            }));
+            setCurrentDocument(previous);
+            onChange?.(previous);
+            editorRef.current?.setContentJson(toNativeEditorDocument(previous));
+            return;
+        }
+        if (key === openEditorNativeToolbarActionKeys.redo) {
+            const next = history.redoStack[0];
+            if (!next) {
+                return;
+            }
+            setHistory((currentHistory) => ({
+                undoStack: [...currentHistory.undoStack.slice(-99), nativeDocument],
+                redoStack: currentHistory.redoStack.slice(1),
+            }));
+            setCurrentDocument(next);
+            onChange?.(next);
+            editorRef.current?.setContentJson(toNativeEditorDocument(next));
+            return;
+        }
+        if (key === openEditorNativeToolbarActionKeys.bulletList) {
+            editorRef.current?.toggleList("bulletList");
+            return;
+        }
+        if (key === openEditorNativeToolbarActionKeys.orderedList) {
+            editorRef.current?.toggleList("orderedList");
+            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: "Start writing...", 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);
+                }, onSelectionChange: setSelection, 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(UrlDialog, { title: "Image", value: imageUrl, visible: imageRequest !== null, placeholder: "https://", confirmLabel: "Insert", onChangeText: setImageUrl, onCancel: () => setImageRequest(null), onSubmit: submitImageDialog, theme: resolvedTheme })] }));
+};
+export const OpenEditorNativeViewer = ({ document = nativeSeedDocument, theme, renderers, }) => {
+    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)) }));
+};
+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,
+    },
+    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",
+    },
+    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";