@openeditor/native 0.0.32 → 0.0.34

package/dist/native-editor.d.ts

@@ -0,0 +1,43 @@
+import type { OpenEditorDocument } from "@openeditor/core";
+import { type OpenEditorRuntimeState, type OpenEditorNativeEffectName, type OpenEditorTheme } from "@openeditor/embedded-runtime";
+import { type ReactNode, type RefAttributes } from "react";
+import { type StyleProp, type ViewStyle } from "react-native";
+import { type WebViewProps } from "react-native-webview";
+import { type OpenEditorNativeController, type OpenEditorNativeEffectHandlers } from "./controller.js";
+import { type OpenEditorNativeToolbarItem } from "./toolbar-host.js";
+export type OpenEditorNativeTheme = Partial<OpenEditorTheme>;
+export type OpenEditorNativeContentInsets = {
+    top: number;
+    right: number;
+    bottom: number;
+    left: number;
+};
+type EdgeInsets = OpenEditorNativeContentInsets;
+type OwnedWebViewProps = "source" | "onMessage" | "style" | "scrollEnabled" | "nestedScrollEnabled";
+export type OpenEditorNativeProps = {
+    initialDocument: OpenEditorDocument;
+    editable?: boolean;
+    placeholder?: string;
+    theme?: OpenEditorNativeTheme;
+    contentInsets?: Partial<EdgeInsets>;
+    showToolbar?: boolean;
+    toolbarItems?: readonly OpenEditorNativeToolbarItem[];
+    renderToolbar?: (context: {
+        availableNativeEffects: readonly OpenEditorNativeEffectName[];
+        controller: OpenEditorNativeController;
+        state: OpenEditorRuntimeState;
+    }) => ReactNode;
+    nativeEffects?: OpenEditorNativeEffectHandlers;
+    onDocumentChanged?: (change: {
+        documentRevision: number;
+        origin: "input" | "command";
+    }) => void;
+    onReady?: (controller: OpenEditorNativeController) => void;
+    onError?: (error: Error) => void;
+    keyboardVerticalOffset?: number;
+    keyboardAvoidanceEnabled?: boolean;
+    style?: StyleProp<ViewStyle>;
+    webViewProps?: Omit<WebViewProps, OwnedWebViewProps>;
+};
+export declare const OpenEditorNative: import("react").ForwardRefExoticComponent<OpenEditorNativeProps & RefAttributes<OpenEditorNativeController>>;
+export {};

package/dist/native-editor.js

@@ -0,0 +1,171 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { getOpenEditorThemeEntries, openEditorThemeCssName, openEditorThemeTokenNames, } from "@openeditor/embedded-runtime";
+import { openEditorEmbeddedSurfaceHtml } from "@openeditor/embedded-surface/html";
+import { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState, } from "react";
+import { Keyboard, KeyboardAvoidingView, Platform, StyleSheet, View, } from "react-native";
+import { WebView, } from "react-native-webview";
+import { emptyOpenEditorNativeState, isOpenEditorNativeLifecycleCancellation, OpenEditorNativeBridge, } from "./controller.js";
+import { OpenEditorNativeToolbar, } from "./toolbar-host.js";
+const ZERO_INSETS = { top: 0, right: 0, bottom: 0, left: 0 };
+const HostWebView = WebView;
+export const OpenEditorNative = forwardRef(function OpenEditorNative({ initialDocument, editable = true, placeholder = "Start writing…", theme, contentInsets = ZERO_INSETS, showToolbar = true, toolbarItems, renderToolbar, nativeEffects, onDocumentChanged, onReady, onError, keyboardVerticalOffset = 0, keyboardAvoidanceEnabled = true, style, webViewProps, }, forwardedRef) {
+    const webViewRef = useRef(null);
+    const sessionIdRef = useRef(`native_${Date.now().toString(36)}_${Math.random().toString(36).slice(2)}`);
+    const callbacksRef = useRef({
+        nativeEffects,
+        onDocumentChanged,
+        onError,
+        onReady,
+    });
+    callbacksRef.current = { nativeEffects, onDocumentChanged, onError, onReady };
+    const initialDocumentRef = useRef(initialDocument);
+    const initialConfigRef = useRef({ editable, placeholder, theme });
+    const initializedRef = useRef(false);
+    const [editorState, setEditorState] = useState(emptyOpenEditorNativeState);
+    const [keyboardVisible, setKeyboardVisible] = useState(() => Keyboard.isVisible?.() ?? false);
+    const [bridge] = useState(() => new OpenEditorNativeBridge({
+        sessionId: sessionIdRef.current,
+        send: (message) => webViewRef.current?.postMessage(message),
+        getEffectHandlers: () => callbacksRef.current.nativeEffects,
+    }));
+    // The packaged HTML is several megabytes. Keeping the source object stable is
+    // essential: passing a fresh inline source through React Native on each editor
+    // state update can make WKWebView reload it and can terminate its content
+    // process under memory pressure.
+    const runtimeSource = useMemo(() => ({
+        html: openEditorEmbeddedSurfaceHtml,
+        baseUrl: "https://openeditor.local/",
+    }), []);
+    useImperativeHandle(forwardedRef, () => bridge, [bridge]);
+    const resolvedInsets = {
+        top: contentInsets.top ?? 0,
+        right: contentInsets.right ?? 0,
+        bottom: contentInsets.bottom ?? 0,
+        left: contentInsets.left ?? 0,
+    };
+    const availableNativeEffects = Object.keys(nativeEffects ?? {});
+    const hostConfig = JSON.stringify({
+        availableNativeEffects,
+        contentInsets: resolvedInsets,
+        placeholder,
+        sessionId: sessionIdRef.current,
+        theme,
+    });
+    const injectedConfig = `window.__OPENEDITOR_NATIVE_HOST__=${hostConfig};true;`;
+    const themeUpdateScript = `(()=>{const root=document.documentElement;for(const name of ${JSON.stringify(openEditorThemeTokenNames.map(openEditorThemeCssName))})root.style.removeProperty(name);for(const [name,value] of ${JSON.stringify(getOpenEditorThemeEntries(theme ?? {}))})root.style.setProperty(name,value);const background=${JSON.stringify(theme?.surface ?? "")};const text=${JSON.stringify(theme?.text ?? "")};background?root.style.setProperty("--oe-native-background",background):root.style.removeProperty("--oe-native-background");text?root.style.setProperty("--oe-native-text",text):root.style.removeProperty("--oe-native-text");})();true;`;
+    const initializeRuntime = useCallback(() => {
+        if (!bridge.runtimeReady || initializedRef.current)
+            return;
+        initializedRef.current = true;
+        void bridge
+            .initialize(initialDocumentRef.current, initialConfigRef.current.editable)
+            .then((result) => {
+            bridge.markInitialized();
+            setEditorState((state) => ({
+                ...state,
+                documentRevision: result.documentRevision,
+                revision: result.stateRevision,
+                editable: initialConfigRef.current.editable,
+            }));
+            callbacksRef.current.onReady?.(bridge);
+        })
+            .catch((error) => {
+            initializedRef.current = false;
+            if (isOpenEditorNativeLifecycleCancellation(error))
+                return;
+            callbacksRef.current.onError?.(error instanceof Error
+                ? error
+                : new Error("OpenEditor runtime initialization failed."));
+        });
+    }, [bridge]);
+    useEffect(() => {
+        webViewRef.current?.injectJavaScript(themeUpdateScript);
+    }, [themeUpdateScript]);
+    useEffect(() => {
+        const showSubscription = Keyboard.addListener("keyboardDidShow", () => setKeyboardVisible(true));
+        const hideSubscription = Keyboard.addListener("keyboardDidHide", () => {
+            setKeyboardVisible(false);
+        });
+        return () => {
+            showSubscription.remove();
+            hideSubscription.remove();
+        };
+    }, []);
+    useEffect(() => {
+        const unsubscribe = bridge.subscribe((event) => {
+            if (event.type === "ready") {
+                initializeRuntime();
+                return;
+            }
+            if (event.type === "stateChanged") {
+                setEditorState(event.state);
+                return;
+            }
+            if (event.type === "documentChanged") {
+                if (bridge.ready) {
+                    callbacksRef.current.onDocumentChanged?.({
+                        documentRevision: event.documentRevision,
+                        origin: event.origin,
+                    });
+                }
+                return;
+            }
+            if (event.type === "error") {
+                callbacksRef.current.onError?.(new Error(`${event.code}: ${event.message}`));
+            }
+        });
+        return () => {
+            unsubscribe();
+            bridge.dispose();
+        };
+    }, [bridge, initializeRuntime]);
+    useEffect(() => {
+        let active = true;
+        void bridge
+            .command({ type: "setEditable", editable })
+            .catch((error) => {
+            if (active && !isOpenEditorNativeLifecycleCancellation(error)) {
+                callbacksRef.current.onError?.(error instanceof Error
+                    ? error
+                    : new Error("OpenEditor could not update editability."));
+            }
+        });
+        return () => {
+            active = false;
+        };
+    }, [bridge, editable]);
+    const onMessage = (event) => {
+        if (!bridge.receive(event.nativeEvent.data)) {
+            callbacksRef.current.onError?.(new Error("OpenEditor runtime sent an invalid bridge message."));
+        }
+        initializeRuntime();
+    };
+    const shouldRenderToolbar = showToolbar && editable && editorState.focused && keyboardVisible;
+    const toolbar = renderToolbar && shouldRenderToolbar ? (renderToolbar({ availableNativeEffects, controller: bridge, state: editorState })) : shouldRenderToolbar ? (_jsx(OpenEditorNativeToolbar, { availableNativeEffects: availableNativeEffects, controller: bridge, items: toolbarItems, onCommandError: (error) => callbacksRef.current.onError?.(error), state: editorState, theme: theme })) : null;
+    return (_jsxs(KeyboardAvoidingView, { behavior: Platform.OS === "ios" ? "padding" : "height", enabled: keyboardAvoidanceEnabled, keyboardVerticalOffset: keyboardVerticalOffset, style: [
+            styles.host,
+            { backgroundColor: theme?.surface ?? "#ffffff" },
+            style,
+        ], children: [_jsx(View, { style: styles.webViewContainer, children: _jsx(HostWebView, { ...webViewProps, allowsBackForwardNavigationGestures: false, bounces: webViewProps?.bounces ?? true, injectedJavaScriptBeforeContentLoaded: injectedConfig, javaScriptEnabled: true, hideKeyboardAccessoryView: webViewProps?.hideKeyboardAccessoryView ?? true, nestedScrollEnabled: true, onLoadStart: (event) => {
+                        initializedRef.current = false;
+                        bridge.resetRuntime();
+                        webViewProps?.onLoadStart?.(event);
+                    }, onContentProcessDidTerminate: (event) => {
+                        callbacksRef.current.onError?.(new Error("OpenEditor WebView content process terminated unexpectedly."));
+                        webViewProps?.onContentProcessDidTerminate?.(event);
+                    }, onMessage: onMessage, originWhitelist: webViewProps?.originWhitelist ?? [
+                        "https://openeditor.local",
+                        "file://*",
+                        "about:blank",
+                    ], ref: webViewRef, scrollEnabled: true, source: runtimeSource, style: [
+                        styles.webView,
+                        {
+                            backgroundColor: theme?.surface ?? "#ffffff",
+                        },
+                    ] }) }), toolbar] }));
+});
+const styles = StyleSheet.create({
+    host: { flex: 1, minHeight: 0 },
+    webViewContainer: { flex: 1, minHeight: 0, overflow: "hidden" },
+    webView: { flex: 1 },
+});

package/dist/toolbar-host.d.ts

@@ -0,0 +1,17 @@
+import type { OpenEditorNativeEffectName, OpenEditorRuntimeState } from "@openeditor/embedded-runtime";
+import { type StyleProp, type ViewStyle } from "react-native";
+import type { OpenEditorNativeController } from "./controller.js";
+import type { OpenEditorNativeTheme } from "./native-editor.js";
+import { type OpenEditorNativeToolbarItem } from "./toolbar-items.js";
+export type { OpenEditorNativeToolbarItem } from "./toolbar-items.js";
+export { defaultOpenEditorNativeToolbarItems, openEditorNativeBlockPickerItems, } from "./toolbar-items.js";
+export type OpenEditorNativeToolbarProps = {
+    availableNativeEffects?: readonly OpenEditorNativeEffectName[];
+    controller: OpenEditorNativeController;
+    state: OpenEditorRuntimeState;
+    items?: readonly OpenEditorNativeToolbarItem[];
+    theme?: OpenEditorNativeTheme;
+    style?: StyleProp<ViewStyle>;
+    onCommandError?: (error: Error) => void;
+};
+export declare const OpenEditorNativeToolbar: import("react").MemoExoticComponent<({ availableNativeEffects, controller, state, items, theme, style, onCommandError, }: OpenEditorNativeToolbarProps) => import("react").JSX.Element>;

package/dist/toolbar-host.js

@@ -0,0 +1,206 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo, useRef, useState } from "react";
+import { Keyboard, Modal, Pressable, ScrollView, StyleSheet, Text, TextInput, View, } from "react-native";
+import { defaultOpenEditorNativeToolbarItems, openEditorNativeBlockPickerItems, openEditorNativeTableToolbarItems, } from "./toolbar-items.js";
+export { defaultOpenEditorNativeToolbarItems, openEditorNativeBlockPickerItems, } from "./toolbar-items.js";
+const isItemActive = (item, state) => (item.activeWhen?.block !== undefined &&
+    state.activeNodes.includes(item.activeWhen.block) &&
+    (item.activeWhen?.headingLevel === undefined ||
+        state.headingLevel === item.activeWhen.headingLevel)) ||
+    (item.activeWhen?.mark !== undefined &&
+        state.activeMarks.includes(item.activeWhen.mark));
+const isItemDisabled = (item, state) => !state.editable ||
+    (item.disabledWhen === "cannotUndo" && !state.canUndo) ||
+    (item.disabledWhen === "cannotRedo" && !state.canRedo);
+export const OpenEditorNativeToolbar = memo(function OpenEditorNativeToolbar({ availableNativeEffects = [], controller, state, items = defaultOpenEditorNativeToolbarItems, theme, style, onCommandError, }) {
+    const [blockPickerOpen, setBlockPickerOpen] = useState(false);
+    const [linkEditorOpen, setLinkEditorOpen] = useState(false);
+    const [linkValue, setLinkValue] = useState("");
+    const pendingBlockRef = useRef(null);
+    const pickerSelectionRef = useRef(undefined);
+    const runCommand = (command) => {
+        void command.catch((cause) => {
+            onCommandError?.(cause instanceof Error
+                ? cause
+                : new Error("OpenEditor command failed."));
+        });
+    };
+    const colors = {
+        background: theme?.surface ?? "#ffffff",
+        border: theme?.border ?? "#e5e7eb",
+        text: theme?.text ?? "#171717",
+        muted: theme?.muted ?? "#737373",
+        accent: theme?.accent ?? "#171717",
+        accentText: theme?.accentText ?? "#ffffff",
+    };
+    const blockPickerItems = openEditorNativeBlockPickerItems.filter((item) => {
+        if (item.key === "image")
+            return availableNativeEffects.includes("pickImage");
+        if (item.key === "attachment")
+            return availableNativeEffects.includes("pickAttachment");
+        if (item.key === "page")
+            return availableNativeEffects.includes("createPage");
+        return true;
+    });
+    return (_jsxs(View, { style: [
+            styles.root,
+            { backgroundColor: colors.background, borderColor: colors.border },
+            style,
+        ], children: [_jsx(ScrollView, { contentContainerStyle: styles.content, horizontal: true, keyboardShouldPersistTaps: "always", showsHorizontalScrollIndicator: false, children: state.activeNodes.includes("table")
+                    ? openEditorNativeTableToolbarItems.map((item) => {
+                        const disabled = isItemDisabled(item, state);
+                        return (_jsx(Pressable, { accessibilityLabel: item.label, accessibilityRole: "button", accessibilityState: { disabled }, disabled: disabled, onPress: () => {
+                                if (!item.command) {
+                                    Keyboard.dismiss();
+                                    runCommand(controller.blur());
+                                    return;
+                                }
+                                runCommand(controller.command(item.command));
+                            }, style: ({ pressed }) => [
+                                styles.button,
+                                { borderColor: colors.border },
+                                pressed && styles.pressed,
+                                disabled && styles.disabled,
+                            ], children: _jsx(Text, { style: [
+                                    styles.label,
+                                    { color: disabled ? colors.muted : colors.text },
+                                ], children: item.label }) }, item.key));
+                    })
+                    : items.map((item) => {
+                        const active = isItemActive(item, state);
+                        const disabled = isItemDisabled(item, state);
+                        return (_jsx(Pressable, { accessibilityLabel: item.label, accessibilityRole: "button", accessibilityState: { disabled, selected: active }, disabled: disabled, onPress: () => {
+                                if (item.action === "openBlockPicker") {
+                                    pickerSelectionRef.current =
+                                        state.selection.type === "text"
+                                            ? {
+                                                anchor: state.selection.anchor,
+                                                head: state.selection.head,
+                                            }
+                                            : undefined;
+                                    setBlockPickerOpen(true);
+                                    return;
+                                }
+                                if (item.action === "openLinkEditor") {
+                                    setLinkValue("");
+                                    setLinkEditorOpen(true);
+                                    return;
+                                }
+                                if (!item.command) {
+                                    Keyboard.dismiss();
+                                    runCommand(controller.blur());
+                                    return;
+                                }
+                                runCommand(controller.command(item.command));
+                            }, style: ({ pressed }) => [
+                                styles.button,
+                                { borderColor: active ? colors.accent : colors.border },
+                                active && { backgroundColor: colors.accent },
+                                pressed && styles.pressed,
+                                disabled && styles.disabled,
+                            ], children: _jsx(Text, { style: [
+                                    styles.label,
+                                    {
+                                        color: active
+                                            ? colors.accentText
+                                            : disabled
+                                                ? colors.muted
+                                                : colors.text,
+                                    },
+                                ], children: item.label }) }, item.key));
+                    }) }), _jsx(Modal, { animationType: "slide", onDismiss: () => {
+                    const block = pendingBlockRef.current;
+                    pendingBlockRef.current = null;
+                    pickerSelectionRef.current = undefined;
+                    if (block)
+                        runCommand(controller.command(block));
+                }, onRequestClose: () => setBlockPickerOpen(false), presentationStyle: "pageSheet", visible: blockPickerOpen, children: _jsxs(View, { style: [styles.sheet, { backgroundColor: colors.background }], children: [_jsxs(View, { style: [styles.sheetHeader, { borderBottomColor: colors.border }], children: [_jsx(Text, { accessibilityRole: "header", style: [styles.sheetTitle, { color: colors.text }], children: "Insert block" }), _jsx(Pressable, { accessibilityLabel: "Close block picker", accessibilityRole: "button", onPress: () => setBlockPickerOpen(false), children: _jsx(Text, { style: [styles.sheetClose, { color: colors.accent }], children: "Done" }) })] }), _jsx(ScrollView, { contentContainerStyle: styles.sheetContent, children: blockPickerItems.map((item, index) => {
+                                const previousGroup = index > 0
+                                    ? blockPickerItems[index - 1]?.group
+                                    : undefined;
+                                return (_jsxs(View, { children: [item.group !== previousGroup ? (_jsx(Text, { style: [styles.groupLabel, { color: colors.muted }], children: item.group })) : null, _jsx(Pressable, { accessibilityLabel: `Insert ${item.label}`, accessibilityRole: "button", onPress: () => {
+                                                pendingBlockRef.current = {
+                                                    type: "insertBlock",
+                                                    block: item.key,
+                                                    selection: pickerSelectionRef.current,
+                                                };
+                                                setBlockPickerOpen(false);
+                                            }, style: ({ pressed }) => [
+                                                styles.blockPickerItem,
+                                                { borderBottomColor: colors.border },
+                                                pressed && styles.pressed,
+                                            ], children: _jsx(Text, { style: [styles.blockPickerLabel, { color: colors.text }], children: item.label }) })] }, item.key));
+                            }) })] }) }), _jsx(Modal, { animationType: "fade", onRequestClose: () => setLinkEditorOpen(false), presentationStyle: "formSheet", visible: linkEditorOpen, children: _jsxs(View, { style: [styles.linkSheet, { backgroundColor: colors.background }], children: [_jsx(Text, { accessibilityRole: "header", style: [styles.sheetTitle, { color: colors.text }], children: "Edit link" }), _jsx(TextInput, { accessibilityLabel: "Link URL", autoCapitalize: "none", autoCorrect: false, onChangeText: setLinkValue, placeholder: "https://example.com", placeholderTextColor: colors.muted, style: [
+                                styles.linkInput,
+                                { borderColor: colors.border, color: colors.text },
+                            ], value: linkValue }), _jsxs(View, { style: styles.linkActions, children: [_jsx(Pressable, { accessibilityLabel: "Cancel link editing", accessibilityRole: "button", onPress: () => setLinkEditorOpen(false), style: styles.linkAction, children: _jsx(Text, { style: { color: colors.text }, children: "Cancel" }) }), _jsx(Pressable, { accessibilityLabel: "Remove", accessibilityRole: "button", onPress: () => {
+                                        setLinkEditorOpen(false);
+                                        runCommand(controller.command({ type: "setLink", href: null }));
+                                    }, style: styles.linkAction, children: _jsx(Text, { style: { color: colors.text }, children: "Remove" }) }), _jsx(Pressable, { accessibilityLabel: "Apply", accessibilityRole: "button", disabled: !linkValue.trim(), onPress: () => {
+                                        const href = linkValue.trim();
+                                        setLinkEditorOpen(false);
+                                        runCommand(controller.command({ type: "setLink", href }));
+                                    }, style: [styles.linkAction, !linkValue.trim() && styles.disabled], children: _jsx(Text, { style: { color: colors.accent }, children: "Apply" }) })] })] }) })] }));
+});
+const styles = StyleSheet.create({
+    root: {
+        borderWidth: StyleSheet.hairlineWidth,
+        minHeight: 52,
+    },
+    content: {
+        alignItems: "center",
+        gap: 8,
+        paddingHorizontal: 10,
+        paddingVertical: 7,
+    },
+    button: {
+        alignItems: "center",
+        borderRadius: 8,
+        borderWidth: 1,
+        justifyContent: "center",
+        minHeight: 36,
+        minWidth: 40,
+        paddingHorizontal: 10,
+    },
+    label: {
+        fontSize: 13,
+        fontWeight: "600",
+    },
+    pressed: { opacity: 0.64 },
+    disabled: { opacity: 0.42 },
+    sheet: { flex: 1 },
+    sheetHeader: {
+        alignItems: "center",
+        borderBottomWidth: StyleSheet.hairlineWidth,
+        flexDirection: "row",
+        justifyContent: "space-between",
+        minHeight: 56,
+        paddingHorizontal: 20,
+    },
+    sheetTitle: { fontSize: 18, fontWeight: "700" },
+    sheetClose: { fontSize: 16, fontWeight: "600" },
+    sheetContent: { paddingBottom: 32, paddingHorizontal: 20 },
+    groupLabel: {
+        fontSize: 12,
+        fontWeight: "700",
+        paddingBottom: 5,
+        paddingTop: 20,
+        textTransform: "uppercase",
+    },
+    blockPickerItem: {
+        borderBottomWidth: StyleSheet.hairlineWidth,
+        minHeight: 48,
+        justifyContent: "center",
+    },
+    blockPickerLabel: { fontSize: 16, fontWeight: "500" },
+    linkSheet: { flex: 1, gap: 20, justifyContent: "center", padding: 24 },
+    linkInput: {
+        borderRadius: 10,
+        borderWidth: 1,
+        fontSize: 16,
+        minHeight: 48,
+        paddingHorizontal: 14,
+    },
+    linkActions: { flexDirection: "row", justifyContent: "flex-end", gap: 18 },
+    linkAction: { minHeight: 44, justifyContent: "center", paddingHorizontal: 4 },
+});

package/dist/toolbar-items.d.ts

@@ -0,0 +1,88 @@
+import type { OpenEditorRuntimeCommand } from "@openeditor/embedded-runtime";
+export type OpenEditorNativeToolbarItem = {
+    key: string;
+    label: string;
+    command?: OpenEditorRuntimeCommand;
+    action?: "openBlockPicker" | "openLinkEditor" | "dismissKeyboard";
+    activeWhen?: {
+        block?: string;
+        headingLevel?: number;
+        mark?: string;
+    };
+    disabledWhen?: "cannotUndo" | "cannotRedo";
+};
+export declare const defaultOpenEditorNativeToolbarItems: readonly OpenEditorNativeToolbarItem[];
+export declare const openEditorNativeBlockPickerItems: readonly [{
+    readonly key: "paragraph";
+    readonly label: "Paragraph";
+    readonly group: "Text";
+}, {
+    readonly key: "heading1";
+    readonly label: "Heading 1";
+    readonly group: "Text";
+}, {
+    readonly key: "heading2";
+    readonly label: "Heading 2";
+    readonly group: "Text";
+}, {
+    readonly key: "heading3";
+    readonly label: "Heading 3";
+    readonly group: "Text";
+}, {
+    readonly key: "bulletList";
+    readonly label: "Bullet list";
+    readonly group: "Text";
+}, {
+    readonly key: "orderedList";
+    readonly label: "Numbered list";
+    readonly group: "Text";
+}, {
+    readonly key: "taskList";
+    readonly label: "Task list";
+    readonly group: "Text";
+}, {
+    readonly key: "toggleList";
+    readonly label: "Toggle list";
+    readonly group: "Text";
+}, {
+    readonly key: "blockquote";
+    readonly label: "Quote";
+    readonly group: "Text";
+}, {
+    readonly key: "codeBlock";
+    readonly label: "Code block";
+    readonly group: "Text";
+}, {
+    readonly key: "divider";
+    readonly label: "Divider";
+    readonly group: "Structure";
+}, {
+    readonly key: "columns";
+    readonly label: "Columns";
+    readonly group: "Layout";
+}, {
+    readonly key: "table";
+    readonly label: "Table";
+    readonly group: "Layout";
+}, {
+    readonly key: "callout";
+    readonly label: "Callout";
+    readonly group: "Embed";
+}, {
+    readonly key: "diagram";
+    readonly label: "Diagram";
+    readonly group: "Embed";
+}, {
+    readonly key: "page";
+    readonly label: "Page";
+    readonly group: "Embed";
+}, {
+    readonly key: "image";
+    readonly label: "Image";
+    readonly group: "Media";
+}, {
+    readonly key: "attachment";
+    readonly label: "File";
+    readonly group: "Media";
+}];
+export declare const openEditorNativeTableToolbarItems: readonly OpenEditorNativeToolbarItem[];

package/dist/toolbar-items.js

@@ -0,0 +1,52 @@
+export const defaultOpenEditorNativeToolbarItems = [
+    { key: "insert", label: "+ Block", action: "openBlockPicker" },
+    { key: "paragraph", label: "Text", command: { type: "setParagraph" }, activeWhen: { block: "paragraph" } },
+    { key: "heading-1", label: "H1", command: { type: "toggleHeading", level: 1 }, activeWhen: { block: "heading", headingLevel: 1 } },
+    { key: "heading-2", label: "H2", command: { type: "toggleHeading", level: 2 }, activeWhen: { block: "heading", headingLevel: 2 } },
+    { key: "bold", label: "B", command: { type: "toggleMark", mark: "bold" }, activeWhen: { mark: "bold" } },
+    { key: "italic", label: "I", command: { type: "toggleMark", mark: "italic" }, activeWhen: { mark: "italic" } },
+    { key: "underline", label: "U", command: { type: "toggleMark", mark: "underline" }, activeWhen: { mark: "underline" } },
+    { key: "strike", label: "S", command: { type: "toggleMark", mark: "strike" }, activeWhen: { mark: "strike" } },
+    { key: "code", label: "Code", command: { type: "toggleMark", mark: "code" }, activeWhen: { mark: "code" } },
+    { key: "link", label: "Link", action: "openLinkEditor", activeWhen: { mark: "link" } },
+    { key: "bullet-list", label: "• List", command: { type: "toggleList", list: "bullet" }, activeWhen: { block: "bulletList" } },
+    { key: "ordered-list", label: "1. List", command: { type: "toggleList", list: "ordered" }, activeWhen: { block: "orderedList" } },
+    { key: "task-list", label: "Tasks", command: { type: "toggleList", list: "task" }, activeWhen: { block: "taskList" } },
+    { key: "quote", label: "Quote", command: { type: "toggleBlockquote" }, activeWhen: { block: "blockquote" } },
+    { key: "code-block", label: "Code block", command: { type: "toggleCodeBlock" }, activeWhen: { block: "codeBlock" } },
+    { key: "undo", label: "Undo", command: { type: "undo" }, disabledWhen: "cannotUndo" },
+    { key: "redo", label: "Redo", command: { type: "redo" }, disabledWhen: "cannotRedo" },
+    { key: "keyboard", label: "Done", action: "dismissKeyboard" },
+];
+export const openEditorNativeBlockPickerItems = [
+    { key: "paragraph", label: "Paragraph", group: "Text" },
+    { key: "heading1", label: "Heading 1", group: "Text" },
+    { key: "heading2", label: "Heading 2", group: "Text" },
+    { key: "heading3", label: "Heading 3", group: "Text" },
+    { key: "bulletList", label: "Bullet list", group: "Text" },
+    { key: "orderedList", label: "Numbered list", group: "Text" },
+    { key: "taskList", label: "Task list", group: "Text" },
+    { key: "toggleList", label: "Toggle list", group: "Text" },
+    { key: "blockquote", label: "Quote", group: "Text" },
+    { key: "codeBlock", label: "Code block", group: "Text" },
+    { key: "divider", label: "Divider", group: "Structure" },
+    { key: "columns", label: "Columns", group: "Layout" },
+    { key: "table", label: "Table", group: "Layout" },
+    { key: "callout", label: "Callout", group: "Embed" },
+    { key: "diagram", label: "Diagram", group: "Embed" },
+    { key: "page", label: "Page", group: "Embed" },
+    { key: "image", label: "Image", group: "Media" },
+    { key: "attachment", label: "File", group: "Media" },
+];
+export const openEditorNativeTableToolbarItems = [
+    { key: "table-row-before", label: "+ Row ↑", command: { type: "addTableRow", after: false } },
+    { key: "table-row-after", label: "+ Row ↓", command: { type: "addTableRow" } },
+    { key: "table-delete-row", label: "− Row", command: { type: "deleteTableRow" } },
+    { key: "table-column-before", label: "+ Col ←", command: { type: "addTableColumn", after: false } },
+    { key: "table-column-after", label: "+ Col →", command: { type: "addTableColumn" } },
+    { key: "table-delete-column", label: "− Col", command: { type: "deleteTableColumn" } },
+    { key: "table-delete", label: "Delete table", command: { type: "deleteTable" } },
+    { key: "table-undo", label: "Undo", command: { type: "undo" }, disabledWhen: "cannotUndo" },
+    { key: "table-redo", label: "Redo", command: { type: "redo" }, disabledWhen: "cannotRedo" },
+    { key: "table-keyboard", label: "Done", action: "dismissKeyboard" },
+];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openeditor/native",
-  "version": "0.0.32",
+  "version": "0.0.34",
   "type": "module",
   "sideEffects": false,
   "repository": {
@@ -26,25 +26,13 @@
     "./package.json": "./package.json"
   },
   "dependencies": {
-    "@expo/ui": "~56.0.18",
-    "@expo/vector-icons": "15.0.3",
-    "@openeditor/core": "0.0.32",
-    "@openeditor/exporters": "0.0.32",
-    "@openeditor/extensions": "0.0.32",
-    "emojibase": "17.0.0",
-    "emojibase-data": "16.0.2",
-    "react": "19.2.3",
-    "react-native": "0.85.3"
+    "@openeditor/core": "0.0.34",
+    "@openeditor/embedded-runtime": "0.0.34",
+    "@openeditor/embedded-surface": "0.0.34"
   },
   "peerDependencies": {
-    "@openeditor/react-native-prose-editor": "0.0.32",
-    "react-native-keyboard-controller": ">=1.21",
     "react": ">=19",
-    "react-native": ">=0.85"
-  },
-  "peerDependenciesMeta": {
-    "react-native-keyboard-controller": {
-      "optional": true
-    }
+    "react-native": ">=0.85",
+    "react-native-webview": ">=13"
   }
 }

package/dist/document.d.ts

@@ -1,7 +0,0 @@
-import { type OpenEditorDocument, type OpenEditorDocumentMeta, type ProseMirrorDocument, type ProseMirrorNode } from "@openeditor/core";
-export declare const sanitizeNativeEditorDocument: (document: OpenEditorDocument, meta?: OpenEditorDocumentMeta | undefined) => OpenEditorDocument;
-export declare const toNativeEditorNode: (node: ProseMirrorNode) => ProseMirrorNode;
-export declare const fromNativeEditorNode: (node: ProseMirrorNode) => ProseMirrorNode;
-export declare const toNativeEditorDocument: (document: OpenEditorDocument) => ProseMirrorDocument;
-export declare const fromNativeEditorDocument: (document: ProseMirrorDocument, meta?: OpenEditorDocumentMeta) => OpenEditorDocument;
-export declare const createNativeEditorDocument: (content: ProseMirrorNode[], meta?: OpenEditorDocumentMeta) => ProseMirrorDocument;