@openeditor/native 0.0.11 → 0.0.12

package/dist/index.d.ts

@@ -10,6 +10,12 @@ export type OpenEditorNativeProps = {
     theme?: Partial<OpenEditorNativeTheme>;
     toolbarPlacement?: NativeRichTextEditorToolbarPlacement;
     onChange?: (document: OpenEditorDocument) => void;
+    onOpenPage?: (page: {
+        pageId: string;
+        title: string;
+        icon?: string | null;
+        href?: string | null;
+    }) => void;
 };
 export type OpenEditorNativeViewerProps = Omit<OpenEditorNativeProps, "editable" | "showToolbar" | "onChange"> & {
     showToolbar?: false;
@@ -61,8 +67,8 @@ 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, }: OpenEditorNativeProps) => import("react").JSX.Element;
-export declare const OpenEditorNativeViewer: ({ document, theme, renderers, }: OpenEditorNativeViewerProps) => import("react").JSX.Element;
+export declare const OpenEditorNative: ({ document, editable, placeholder, showToolbar, theme, toolbarPlacement, onChange, onOpenPage, }: OpenEditorNativeProps) => import("react").JSX.Element;
+export declare const OpenEditorNativeViewer: ({ document, theme, renderers, onOpenPage, }: 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,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } 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";
@@ -74,6 +74,18 @@ const openEditorNativeSchema = {
             htmlTag: "aside",
             attrs: { tone: { default: "info" } },
         },
+        {
+            name: "page",
+            content: "inline*",
+            group: "block",
+            role: "textBlock",
+            htmlTag: "p",
+            attrs: {
+                pageId: { default: null },
+                icon: { default: "📄" },
+                href: { default: null },
+            },
+        },
         { name: "codeBlock", content: "text*", group: "block", role: "textBlock", htmlTag: "pre" },
         { name: "horizontalRule", content: "", group: "block", role: "block", htmlTag: "hr", isVoid: true },
         {
@@ -307,11 +319,11 @@ const nativeSeedDocument = createDocument([
     { type: "horizontalRule" },
     { type: "image", attrs: { src: "https://placehold.co/960x420/png", alt: "Placeholder" } },
 ]);
-const renderNativeViewerNode = (node, key, theme, renderers) => {
+const renderNativeViewerNode = (node, key, theme, renderers, onOpenPage) => {
     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 children = node.content?.map((child, index) => renderNativeViewerNode(child, `${key}-${index}`, theme, renderers, onOpenPage)) ?? null;
     const blockKey = findBlockSpecForNode(defaultBlockRegistry, node)?.name ?? node.type;
     const customRenderer = renderers?.[blockKey];
     if (customRenderer) {
@@ -341,6 +353,13 @@ const renderNativeViewerNode = (node, key, theme, renderers) => {
             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);
+        case "page": {
+            const pageId = typeof node.attrs?.pageId === "string" ? node.attrs.pageId : "";
+            const title = node.content?.map((child) => child.text ?? "").join("") || "Untitled";
+            const icon = typeof node.attrs?.icon === "string" ? node.attrs.icon : "📄";
+            const content = _jsxs(_Fragment, { children: [_jsx(Text, { style: { fontSize: 18 }, children: icon }), _jsx(Text, { style: { color: theme.text, flex: 1, fontWeight: "600", textDecorationLine: "underline" }, 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);
+        }
         default:
             if (node.type === "column") {
                 return _jsx(View, { style: { flex: 1 }, children: children }, key);
@@ -377,7 +396,7 @@ 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 = nativeSeedDocument, editable = true, placeholder = "Start writing...", showToolbar = true, theme, toolbarPlacement = "keyboard", onChange, }) => {
+export const OpenEditorNative = ({ document = nativeSeedDocument, editable = true, placeholder = "Start writing...", showToolbar = true, theme, toolbarPlacement = "keyboard", onChange, onOpenPage, }) => {
     const editorRef = useRef(null);
     const [currentDocument, setCurrentDocument] = useState(() => normalizeForNativeEditor(document));
     const [selection, setSelection] = useState();
@@ -517,11 +536,11 @@ export const OpenEditorNative = ({ document = nativeSeedDocument, editable = tru
                 }, onRequestImage: (request) => {
                     setImageUrl("https://placehold.co/960x420/png");
                     setImageRequest(request);
-                }, onSelectionChange: setSelection, onContentChangeJSON: (json) => {
+                }, onOpenPage: onOpenPage, 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, }) => {
+export const OpenEditorNativeViewer = ({ document = nativeSeedDocument, theme, renderers, onOpenPage, }) => {
     const resolvedTheme = {
         ...defaultNativeTheme,
         ...theme,
@@ -531,7 +550,7 @@ export const OpenEditorNativeViewer = ({ document = nativeSeedDocument, theme, r
         },
     };
     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)) }));
+    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)) }));
 };
 const CommandButton = ({ label, active = false, primary = false, theme, onPress, }) => (_jsx(Pressable, { accessibilityRole: "button", accessibilityState: { selected: active }, onPress: onPress, style: [
         styles.commandButton,

package/dist/toolbar.d.ts

@@ -8,6 +8,7 @@ export declare const openEditorNativeToolbarActionKeys: {
     readonly table: "table";
     readonly toggleList: "toggleList";
     readonly callout: "callout";
+    readonly page: "page";
     readonly moveBlockUp: "openeditor:block:moveUp";
     readonly moveBlockDown: "openeditor:block:moveDown";
     readonly undo: "openeditor:history:undo";

package/dist/toolbar.js

@@ -16,6 +16,7 @@ export const openEditorNativeToolbarActionKeys = {
     table: "table",
     toggleList: "toggleList",
     callout: "callout",
+    page: "page",
     moveBlockUp: "openeditor:block:moveUp",
     moveBlockDown: "openeditor:block:moveDown",
     undo: "openeditor:history:undo",
@@ -81,6 +82,7 @@ export const createOpenEditorNativeToolbarItems = ({ canUndo = true, canRedo = t
                 { type: "action", key: openEditorNativeToolbarActionKeys.table, label: "Table", icon: glyphIcon("Tbl") },
                 { type: "action", key: openEditorNativeToolbarActionKeys.toggleList, label: "Toggle List", icon: glyphIcon("Tgl") },
                 { type: "action", key: openEditorNativeToolbarActionKeys.callout, label: "Callout", icon: glyphIcon("!") },
+                { type: "action", key: openEditorNativeToolbarActionKeys.page, label: "Page", icon: glyphIcon("Pg") },
                 { type: "command", command: "insertTableRowAfter", label: "Add Row", icon: glyphIcon("+R") },
                 { type: "command", command: "insertTableColumnAfter", label: "Add Column", icon: glyphIcon("+C") },
                 { type: "command", command: "deleteTableRow", label: "Delete Row", icon: glyphIcon("-R") },
@@ -168,6 +170,7 @@ export const nativeToolbarParityCoverage = () => {
         ["table", openEditorNativeToolbarActionKeys.table],
         ["toggleList", openEditorNativeToolbarActionKeys.toggleList],
         ["callout", openEditorNativeToolbarActionKeys.callout],
+        ["page", openEditorNativeToolbarActionKeys.page],
     ]);
     const markControls = new Map([
         ["bold", "bold"],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openeditor/native",
-  "version": "0.0.11",
+  "version": "0.0.12",
   "type": "module",
   "sideEffects": false,
   "repository": {
@@ -27,14 +27,14 @@
   },
   "dependencies": {
     "@expo/vector-icons": "15.0.3",
-    "@openeditor/core": "0.0.11",
-    "@openeditor/exporters": "0.0.11",
-    "@openeditor/extensions": "0.0.11",
+    "@openeditor/core": "0.0.12",
+    "@openeditor/exporters": "0.0.12",
+    "@openeditor/extensions": "0.0.12",
     "react": "19.2.3",
     "react-native": "0.85.3"
   },
   "peerDependencies": {
-    "@openeditor/react-native-prose-editor": "0.0.11",
+    "@openeditor/react-native-prose-editor": "0.0.12",
     "react-native-keyboard-controller": ">=1.21",
     "react": ">=19",
     "react-native": ">=0.85"