@openeditor/native 0.0.27 → 0.0.29

package/README.md

@@ -7,6 +7,7 @@ Pass `attachmentRuntime` to use the system picker and host storage lifecycle. Th
 ## Public surface
 
 - `OpenEditorNative` as the primary editing surface
+- `OpenEditorNativePageHeader` for host-backed page title and icon editing
 - `OpenEditorNativeViewer` for read-only rendering
 - `OpenEditorNativeEmojiPicker` for standalone native emoji selection
 - native document bridge helpers where renderer adaptation is required
@@ -25,11 +26,15 @@ history. Inline emoji continue to use the device keyboard.
 ## Quick start
 
 ```tsx
-import { OpenEditorNative } from "@openeditor/native";
+import { useRef } from "react";
+import { OpenEditorNative, type OpenEditorNativeController } from "@openeditor/native";
 
 export function Example() {
+  const editor = useRef<OpenEditorNativeController>(null);
   return (
     <OpenEditorNative
+      ref={editor}
+      initialDocument={document}
       onChange={(document) => {
         console.log(document);
       }}
@@ -38,6 +43,15 @@ export function Example() {
 }
 ```
 
+`OpenEditorNative` follows the same uncontrolled lifecycle as web:
+`initialDocument` is read once and `ref.current.setContent(document)` performs an
+undoable programmatic replacement. Undo and redo delegate directly to the Rust
+editor engine; the React wrapper does not keep document snapshots.
+
+Pass `enabledBlocks` to restrict authoring. Page and attachment controls are
+automatically omitted until their required host runtimes are present, while
+existing nodes remain readable.
+
 ## Standalone emoji picker
 
 The editor wires this automatically for callouts and pages. Hosts can also use

package/dist/index.d.ts

@@ -1,29 +1,33 @@
-import { type OpenEditorDocument, type OpenEditorAttachmentRuntime, type ProseMirrorNode } from "@openeditor/core";
+import { type OpenEditorDocument, type OpenEditorAttachmentRuntime, type OpenEditorAuthoringCapabilities, type OpenEditorPageRuntime, type OpenEditorPageSnapshot, type ProseMirrorNode } from "@openeditor/core";
 import { type ReactNode } from "react";
 import type { NativeRichTextEditorToolbarPlacement } from "@openeditor/react-native-prose-editor";
 export { normalizeNativeThemeColor } from "./theme.js";
 export { OpenEditorNativeEmojiPicker, type OpenEditorNativeEmojiPickerProps, type OpenEditorNativeEmojiPickerTheme, } from "./emoji-picker.js";
 export { emojiForNativeSkinTone, getOpenEditorNativeEmojiSections, openEditorNativeEmojiSkinToneOptions, type OpenEditorNativeEmoji, type OpenEditorNativeEmojiSection, type OpenEditorNativeEmojiSkinTone, } from "./emoji-data.js";
-export type OpenEditorNativeProps = {
-    document?: OpenEditorDocument;
+export type OpenEditorNativeProps = OpenEditorAuthoringCapabilities & {
+    initialDocument?: OpenEditorDocument;
     editable?: boolean;
     placeholder?: string;
     showToolbar?: boolean;
     theme?: Partial<OpenEditorNativeTheme>;
     toolbarPlacement?: NativeRichTextEditorToolbarPlacement;
     onChange?: (document: OpenEditorDocument) => void;
-    onOpenPage?: (page: {
-        pageId: string;
-        title: string;
-        icon?: string | null;
-        href?: string | null;
-    }) => void;
+    pageRuntime?: OpenEditorPageRuntime;
     attachmentRuntime?: OpenEditorAttachmentRuntime<any>;
 };
-export type OpenEditorNativeViewerProps = Omit<OpenEditorNativeProps, "editable" | "showToolbar" | "onChange"> & {
-    showToolbar?: false;
+export type OpenEditorNativeViewerProps = {
+    document: OpenEditorDocument;
+    theme?: Partial<OpenEditorNativeTheme>;
+    pageRuntime?: OpenEditorPageRuntime;
+    attachmentRuntime?: OpenEditorAttachmentRuntime<any>;
     renderers?: Partial<Record<string, OpenEditorNativeViewerRenderer>>;
 };
+export type OpenEditorNativeController = {
+    getContent: () => OpenEditorDocument;
+    setContent: (document: OpenEditorDocument) => void;
+    undo: () => void;
+    redo: () => void;
+};
 export type OpenEditorNativeToolbarAction = {
     key: string;
     label: string;
@@ -72,8 +76,26 @@ export type OpenEditorNativeTheme = {
     toolbar?: OpenEditorNativeToolbarTheme;
 };
 export declare const OpenEditorNativeToolbar: ({ actions, onActionPress, theme, }: OpenEditorNativeToolbarProps) => import("react").JSX.Element;
-export declare const OpenEditorNative: ({ document, editable, placeholder, showToolbar, theme, toolbarPlacement, onChange, onOpenPage, attachmentRuntime, }: OpenEditorNativeProps) => import("react").JSX.Element;
-export declare const OpenEditorNativeViewer: ({ document, theme, renderers, onOpenPage, attachmentRuntime, }: OpenEditorNativeViewerProps) => import("react").JSX.Element;
+export type OpenEditorNativePageHeaderProps = {
+    page: OpenEditorPageSnapshot;
+    runtime: OpenEditorPageRuntime;
+    theme?: Partial<OpenEditorNativeTheme>;
+    onPageChange?: (page: OpenEditorPageSnapshot) => void;
+};
+/** Canonical native page-title and page-icon editor for opened page surfaces. */
+export declare const OpenEditorNativePageHeader: ({ page, runtime, theme, onPageChange }: OpenEditorNativePageHeaderProps) => import("react").JSX.Element;
+export declare const OpenEditorNative: import("react").ForwardRefExoticComponent<OpenEditorAuthoringCapabilities & {
+    initialDocument?: OpenEditorDocument;
+    editable?: boolean;
+    placeholder?: string;
+    showToolbar?: boolean;
+    theme?: Partial<OpenEditorNativeTheme>;
+    toolbarPlacement?: NativeRichTextEditorToolbarPlacement;
+    onChange?: (document: OpenEditorDocument) => void;
+    pageRuntime?: OpenEditorPageRuntime;
+    attachmentRuntime?: OpenEditorAttachmentRuntime<any>;
+} & import("react").RefAttributes<OpenEditorNativeController>>;
+export declare const OpenEditorNativeViewer: ({ document, theme, renderers, pageRuntime, attachmentRuntime, }: OpenEditorNativeViewerProps) => import("react").JSX.Element;
 export { createNativeEditorDocument, fromNativeEditorDocument, sanitizeNativeEditorDocument, toNativeEditorDocument, } from "./document.js";
 export { createOpenEditorNativeToolbarItems, defaultDocumentForToolbarAction, nativeToolbarParityCoverage, openEditorNativeToolbarActionKeys, openEditorNativeToolbarItems, } from "./toolbar.js";
 export type { OpenEditorNativeToolbarActionKey } from "./toolbar.js";

package/dist/index.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { DEFAULT_CALLOUT_EMOJI, DEFAULT_PAGE_EMOJI, createDocument, findBlockSpecForNode, moveTopLevelBlock, normalizeEmoji, } from "@openeditor/core";
-import { useMemo, useRef, useState } from "react";
+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";
@@ -332,11 +332,29 @@ const NativeToggleListItem = ({ children, initiallyOpen, theme, }) => {
                         open ? styles.viewerToggleCaretOpen : null,
                     ] }) }), _jsx(View, { style: styles.viewerListContent, children: open ? childArray : childArray.slice(0, 1) })] }));
 };
-const renderNativeViewerNode = (node, key, theme, renderers, onOpenPage, attachmentRuntime) => {
+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, onOpenPage, attachmentRuntime)) ?? null;
+    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) {
@@ -375,8 +393,7 @@ const renderNativeViewerNode = (node, key, theme, renderers, onOpenPage, attachm
             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);
-            const content = _jsxs(_Fragment, { children: [_jsx(Text, { style: [styles.viewerPageIcon, { color: theme.text }], children: icon }), _jsx(Text, { style: [styles.viewerPageTitle, { color: theme.text, textDecorationColor: theme.muted }], children: title }), _jsx(Text, { style: { color: theme.muted }, children: "\u2192" })] });
-            return onOpenPage && pageId ? (_jsx(Pressable, { accessibilityRole: "button", onPress: () => onOpenPage({ pageId, title, icon, href: typeof node.attrs?.href === "string" ? node.attrs.href : null }), style: { alignItems: "center", borderRadius: 8, flexDirection: "row", gap: 8, marginBottom: 8, padding: 8 }, children: content }, key)) : _jsx(View, { style: { alignItems: "center", flexDirection: "row", gap: 8, marginBottom: 8, padding: 8 }, children: content }, key);
+            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 = {
@@ -434,9 +451,45 @@ export const OpenEditorNativeToolbar = ({ actions = [
                 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 = createDocument(), editable = true, placeholder = "Start writing...", showToolbar = true, theme, toolbarPlacement = "keyboard", onChange, onOpenPage, attachmentRuntime, }) => {
+/** 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(document));
+    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://");
@@ -445,10 +498,7 @@ export const OpenEditorNative = ({ document = createDocument(), editable = true,
     const [imageUrl, setImageUrl] = useState("https://placehold.co/960x420/png");
     const [attachmentUpload, setAttachmentUpload] = useState(null);
     const attachmentAbortRef = useRef(null);
-    const [history, setHistory] = useState({
-        undoStack: [],
-        redoStack: [],
-    });
+    const [history, setHistory] = useState({ canUndo: false, canRedo: false });
     const nativeDocument = currentDocument;
     const NativeEditor = useMemo(() => loadNativeEditor(), []);
     const resolvedTheme = useMemo(() => ({
@@ -460,24 +510,35 @@ export const OpenEditorNative = ({ document = createDocument(), editable = true,
         },
     }), [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.undoStack.length > 0,
-        canRedo: history.redoStack.length > 0,
-    }), [history.redoStack.length, history.undoStack.length]);
+        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, nativeDocument)) {
-            setHistory((currentHistory) => ({
-                undoStack: [...currentHistory.undoStack.slice(-99), nativeDocument],
-                redoStack: [],
-            }));
-        }
+        if (documentsMatch(normalized, currentDocumentRef.current))
+            return;
+        currentDocumentRef.current = normalized;
         setCurrentDocument(normalized);
-        onChange?.(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;
@@ -529,31 +590,11 @@ export const OpenEditorNative = ({ document = createDocument(), editable = true,
             return;
         }
         if (key === openEditorNativeToolbarActionKeys.undo) {
-            const previous = history.undoStack[history.undoStack.length - 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));
+            editorRef.current?.undo();
             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));
+            editorRef.current?.redo();
             return;
         }
         if (key === openEditorNativeToolbarActionKeys.bulletList) {
@@ -572,6 +613,21 @@ export const OpenEditorNative = ({ document = createDocument(), editable = true,
             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);
@@ -606,7 +662,21 @@ export const OpenEditorNative = ({ document = createDocument(), editable = true,
                 }, onRequestImage: (request) => {
                     setImageUrl("https://placehold.co/960x420/png");
                     setImageRequest(request);
-                }, onOpenPage: onOpenPage, onRequestEmoji: setEmojiRequest, onOpenAttachment: (attachment) => void attachmentRuntime?.openAttachment?.(attachment), onSelectionChange: setSelection, onContentChangeJSON: (json) => {
+                }, 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)
@@ -616,14 +686,17 @@ export const OpenEditorNative = ({ document = createDocument(), editable = true,
                         ...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, onOpenPage, attachmentRuntime, }) => {
+});
+export const OpenEditorNativeViewer = ({ document = createDocument(), theme, renderers, pageRuntime, attachmentRuntime, }) => {
     const resolvedTheme = {
         ...defaultNativeTheme,
         ...theme,
@@ -633,7 +706,7 @@ export const OpenEditorNativeViewer = ({ document = createDocument(), theme, ren
         },
     };
     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, onOpenPage, attachmentRuntime)) }));
+    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,
@@ -780,6 +853,24 @@ const styles = StyleSheet.create({
         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)",

package/dist/toolbar.d.ts

@@ -1,4 +1,4 @@
-import type { ProseMirrorDocument } from "@openeditor/core";
+import { type ProseMirrorDocument } from "@openeditor/core";
 import type { EditorToolbarItem } from "@openeditor/react-native-prose-editor";
 export declare const openEditorNativeToolbarActionKeys: {
     readonly paragraph: "paragraph";
@@ -17,9 +17,10 @@ export declare const openEditorNativeToolbarActionKeys: {
     readonly dismissKeyboard: "openeditor:keyboard:dismiss";
 };
 export type OpenEditorNativeToolbarActionKey = (typeof openEditorNativeToolbarActionKeys)[keyof typeof openEditorNativeToolbarActionKeys];
-export declare const createOpenEditorNativeToolbarItems: ({ canUndo, canRedo, }?: {
+export declare const createOpenEditorNativeToolbarItems: ({ canUndo, canRedo, enabledBlocks, }?: {
     canUndo?: boolean;
     canRedo?: boolean;
+    enabledBlocks?: readonly string[];
 }) => readonly EditorToolbarItem[];
 export declare const openEditorNativeToolbarItems: readonly EditorToolbarItem[];
 export declare const nativeToolbarParityCoverage: () => {

package/dist/toolbar.js

@@ -1,3 +1,4 @@
+import { isOpenEditorBlockEnabled } from "@openeditor/core";
 import { createOpenEditorInsertDocument, defaultBlockSpecs, defaultMarkSpecs, } from "@openeditor/extensions";
 import { toNativeEditorDocument } from "./document.js";
 const glyphIcon = (text) => ({ type: "glyph", text });
@@ -24,7 +25,7 @@ export const openEditorNativeToolbarActionKeys = {
     redo: "openeditor:history:redo",
     dismissKeyboard: "openeditor:keyboard:dismiss",
 };
-export const createOpenEditorNativeToolbarItems = ({ canUndo = true, canRedo = true, } = {}) => {
+export const createOpenEditorNativeToolbarItems = ({ canUndo = true, canRedo = true, enabledBlocks, } = {}) => {
     const items = [
         {
             type: "group",
@@ -149,7 +150,51 @@ export const createOpenEditorNativeToolbarItems = ({ canUndo = true, canRedo = t
             placement: "end",
         },
     ];
-    return items;
+    const actionBlocks = new Map([
+        [openEditorNativeToolbarActionKeys.paragraph, "paragraph"],
+        [openEditorNativeToolbarActionKeys.bulletList, "bulletList"],
+        [openEditorNativeToolbarActionKeys.orderedList, "orderedList"],
+        [openEditorNativeToolbarActionKeys.columns, "columns"],
+        [openEditorNativeToolbarActionKeys.table, "table"],
+        [openEditorNativeToolbarActionKeys.toggleList, "toggleList"],
+        [openEditorNativeToolbarActionKeys.callout, "callout"],
+        [openEditorNativeToolbarActionKeys.page, "page"],
+        [openEditorNativeToolbarActionKeys.attachment, "attachment"],
+    ]);
+    const blockForItem = (item) => {
+        if (item.type === "action")
+            return actionBlocks.get(item.key);
+        if (item.type === "heading")
+            return "heading";
+        if (item.type === "blockquote")
+            return "blockquote";
+        if (item.type === "image")
+            return "image";
+        if (item.type === "node" && item.nodeType === "horizontalRule")
+            return "divider";
+        if (item.type === "command" && item.command.toLowerCase().includes("table"))
+            return "table";
+        return undefined;
+    };
+    const filterItems = (source) => {
+        const filtered = [];
+        for (const item of source) {
+            if (item.type === "group") {
+                const children = item.items.filter((child) => {
+                    const block = blockForItem(child);
+                    return !block || isOpenEditorBlockEnabled(block, { enabledBlocks });
+                });
+                if (children.length)
+                    filtered.push({ ...item, items: children });
+                continue;
+            }
+            const block = blockForItem(item);
+            if (!block || isOpenEditorBlockEnabled(block, { enabledBlocks }))
+                filtered.push(item);
+        }
+        return filtered;
+    };
+    return filterItems(items);
 };
 export const openEditorNativeToolbarItems = createOpenEditorNativeToolbarItems();
 const walkToolbarItems = (items) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openeditor/native",
-  "version": "0.0.27",
+  "version": "0.0.29",
   "type": "module",
   "sideEffects": false,
   "repository": {
@@ -28,16 +28,16 @@
   "dependencies": {
     "@expo/ui": "~56.0.18",
     "@expo/vector-icons": "15.0.3",
-    "@openeditor/core": "0.0.27",
-    "@openeditor/exporters": "0.0.27",
-    "@openeditor/extensions": "0.0.27",
+    "@openeditor/core": "0.0.29",
+    "@openeditor/exporters": "0.0.29",
+    "@openeditor/extensions": "0.0.29",
     "emojibase": "17.0.0",
     "emojibase-data": "16.0.2",
     "react": "19.2.3",
     "react-native": "0.85.3"
   },
   "peerDependencies": {
-    "@openeditor/react-native-prose-editor": "0.0.27",
+    "@openeditor/react-native-prose-editor": "0.0.29",
     "react-native-keyboard-controller": ">=1.21",
     "react": ">=19",
     "react-native": ">=0.85"