@openeditor/native 0.0.11 → 0.0.13

package/README.md

@@ -2,6 +2,8 @@
 
 Component-first React Native SDK for OpenEditor.
 
+Pass `attachmentRuntime` to use the system picker and host storage lifecycle. The native toolbar exposes “Upload file,” native surfaces render attachment cards, and the viewer delegates opening/sharing to the runtime.
+
 ## Public surface
 
 - `OpenEditorNative` as the primary editing surface

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import { type OpenEditorDocument, type ProseMirrorNode } from "@openeditor/core";
+import { type OpenEditorDocument, type OpenEditorAttachmentRuntime, type ProseMirrorNode } from "@openeditor/core";
 import { type ReactNode } from "react";
 import type { NativeRichTextEditorToolbarPlacement } from "@openeditor/react-native-prose-editor";
 export { normalizeNativeThemeColor } from "./theme.js";
@@ -10,6 +10,13 @@ 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;
+    attachmentRuntime?: OpenEditorAttachmentRuntime<any>;
 };
 export type OpenEditorNativeViewerProps = Omit<OpenEditorNativeProps, "editable" | "showToolbar" | "onChange"> & {
     showToolbar?: false;
@@ -61,8 +68,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, attachmentRuntime, }: OpenEditorNativeProps) => import("react").JSX.Element;
+export declare const OpenEditorNativeViewer: ({ document, theme, renderers, onOpenPage, 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,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,33 @@ 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: "attachment",
+            content: "",
+            group: "block",
+            role: "block",
+            htmlTag: "div",
+            isVoid: true,
+            attrs: {
+                attachmentId: { default: null },
+                name: { default: "" },
+                mimeType: { default: null },
+                size: { default: null },
+                url: { default: null },
+            },
+        },
         { name: "codeBlock", content: "text*", group: "block", role: "textBlock", htmlTag: "pre" },
         { name: "horizontalRule", content: "", group: "block", role: "block", htmlTag: "hr", isVoid: true },
         {
@@ -307,11 +334,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, 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)) ?? null;
+    const children = node.content?.map((child, index) => renderNativeViewerNode(child, `${key}-${index}`, theme, renderers, onOpenPage, attachmentRuntime)) ?? null;
     const blockKey = findBlockSpecForNode(defaultBlockRegistry, node)?.name ?? node.type;
     const customRenderer = renderers?.[blockKey];
     if (customRenderer) {
@@ -341,6 +368,24 @@ 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);
+        }
+        case "attachment": {
+            const snapshot = {
+                attachmentId: typeof node.attrs?.attachmentId === "string" ? node.attrs.attachmentId : null,
+                name: typeof node.attrs?.name === "string" ? node.attrs.name : "Attachment",
+                mimeType: typeof node.attrs?.mimeType === "string" ? node.attrs.mimeType : null,
+                size: typeof node.attrs?.size === "number" ? node.attrs.size : null,
+                url: typeof node.attrs?.url === "string" ? node.attrs.url : null,
+            };
+            const content = _jsxs(_Fragment, { children: [_jsx(Text, { style: { fontSize: 22 }, children: "\uD83D\uDCCE" }), _jsxs(View, { style: { flex: 1 }, children: [_jsx(Text, { numberOfLines: 1, style: { color: theme.text, fontWeight: "600" }, children: snapshot.name }), _jsx(Text, { style: { color: theme.muted, fontSize: 12 }, children: snapshot.mimeType ?? "File" })] }), _jsx(Text, { style: { color: theme.muted }, children: "Open" })] });
+            return attachmentRuntime?.openAttachment ? _jsx(Pressable, { accessibilityLabel: `Open ${snapshot.name}`, accessibilityRole: "button", onPress: () => void attachmentRuntime.openAttachment?.(snapshot), style: { alignItems: "center", borderColor: theme.border, borderRadius: 10, borderWidth: 1, flexDirection: "row", gap: 10, marginBottom: 8, minHeight: 64, padding: 10 }, children: content }, key) : _jsx(View, { style: { alignItems: "center", borderColor: theme.border, borderRadius: 10, borderWidth: 1, flexDirection: "row", gap: 10, marginBottom: 8, minHeight: 64, padding: 10 }, children: content }, key);
+        }
         default:
             if (node.type === "column") {
                 return _jsx(View, { style: { flex: 1 }, children: children }, key);
@@ -377,7 +422,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, attachmentRuntime, }) => {
     const editorRef = useRef(null);
     const [currentDocument, setCurrentDocument] = useState(() => normalizeForNativeEditor(document));
     const [selection, setSelection] = useState();
@@ -385,6 +430,8 @@ export const OpenEditorNative = ({ document = nativeSeedDocument, editable = tru
     const [linkUrl, setLinkUrl] = useState("https://");
     const [imageRequest, setImageRequest] = useState(null);
     const [imageUrl, setImageUrl] = useState("https://placehold.co/960x420/png");
+    const [attachmentUpload, setAttachmentUpload] = useState(null);
+    const attachmentAbortRef = useRef(null);
     const [history, setHistory] = useState({
         undoStack: [],
         redoStack: [],
@@ -426,6 +473,31 @@ export const OpenEditorNative = ({ document = nativeSeedDocument, editable = tru
         }
         syncDocument(moveTopLevelBlock(nativeDocument, selectedIndex, nextIndex), true);
     };
+    const uploadAttachment = async () => {
+        if (!attachmentRuntime?.selectAttachment || !attachmentRuntime.uploadAttachment)
+            return;
+        attachmentAbortRef.current?.abort();
+        const controller = new AbortController();
+        attachmentAbortRef.current = controller;
+        try {
+            const input = await attachmentRuntime.selectAttachment({ signal: controller.signal });
+            if (!input || controller.signal.aborted)
+                return;
+            setAttachmentUpload({ input, progress: 0, error: null });
+            const validation = await attachmentRuntime.validateAttachment?.(input);
+            if (validation && !validation.accepted)
+                throw new Error(validation.message);
+            const snapshot = await attachmentRuntime.uploadAttachment(input, { signal: controller.signal, onProgress: (progress) => setAttachmentUpload((current) => current ? { ...current, progress } : current) });
+            if (controller.signal.aborted)
+                return;
+            editorRef.current?.insertContentJson({ type: "doc", content: [{ type: "attachment", attrs: snapshot }] });
+            setAttachmentUpload(null);
+        }
+        catch (cause) {
+            if (!controller.signal.aborted)
+                setAttachmentUpload((current) => current ? { ...current, error: cause instanceof Error ? cause.message : "Upload failed." } : current);
+        }
+    };
     const handleToolbarAction = (key) => {
         if (key === openEditorNativeToolbarActionKeys.dismissKeyboard) {
             dismissKeyboard();
@@ -439,6 +511,10 @@ export const OpenEditorNative = ({ document = nativeSeedDocument, editable = tru
             moveSelectedBlock(1);
             return;
         }
+        if (key === openEditorNativeToolbarActionKeys.attachment) {
+            void uploadAttachment();
+            return;
+        }
         if (key === openEditorNativeToolbarActionKeys.undo) {
             const previous = history.undoStack[history.undoStack.length - 1];
             if (!previous) {
@@ -517,11 +593,11 @@ export const OpenEditorNative = ({ document = nativeSeedDocument, editable = tru
                 }, onRequestImage: (request) => {
                     setImageUrl("https://placehold.co/960x420/png");
                     setImageRequest(request);
-                }, onSelectionChange: setSelection, onContentChangeJSON: (json) => {
+                }, onOpenPage: onOpenPage, onOpenAttachment: (attachment) => void attachmentRuntime?.openAttachment?.(attachment), 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 })] }));
+                }, 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 })] }));
 };
-export const OpenEditorNativeViewer = ({ document = nativeSeedDocument, theme, renderers, }) => {
+export const OpenEditorNativeViewer = ({ document = nativeSeedDocument, theme, renderers, onOpenPage, attachmentRuntime, }) => {
     const resolvedTheme = {
         ...defaultNativeTheme,
         ...theme,
@@ -531,7 +607,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, attachmentRuntime)) }));
 };
 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,8 @@ export declare const openEditorNativeToolbarActionKeys: {
     readonly table: "table";
     readonly toggleList: "toggleList";
     readonly callout: "callout";
+    readonly page: "page";
+    readonly attachment: "attachment";
     readonly moveBlockUp: "openeditor:block:moveUp";
     readonly moveBlockDown: "openeditor:block:moveDown";
     readonly undo: "openeditor:history:undo";

package/dist/toolbar.js

@@ -16,6 +16,8 @@ export const openEditorNativeToolbarActionKeys = {
     table: "table",
     toggleList: "toggleList",
     callout: "callout",
+    page: "page",
+    attachment: "attachment",
     moveBlockUp: "openeditor:block:moveUp",
     moveBlockDown: "openeditor:block:moveDown",
     undo: "openeditor:history:undo",
@@ -81,6 +83,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") },
@@ -88,6 +91,12 @@ export const createOpenEditorNativeToolbarItems = ({ canUndo = true, canRedo = t
                 { type: "image", label: "Image", icon: defaultIcon("image") },
             ],
         },
+        {
+            type: "action",
+            key: openEditorNativeToolbarActionKeys.attachment,
+            label: "Upload file",
+            icon: platformIcon("paperclip", "attach-file", "File"),
+        },
         {
             type: "action",
             key: openEditorNativeToolbarActionKeys.moveBlockUp,
@@ -168,6 +177,8 @@ export const nativeToolbarParityCoverage = () => {
         ["table", openEditorNativeToolbarActionKeys.table],
         ["toggleList", openEditorNativeToolbarActionKeys.toggleList],
         ["callout", openEditorNativeToolbarActionKeys.callout],
+        ["page", openEditorNativeToolbarActionKeys.page],
+        ["attachment", openEditorNativeToolbarActionKeys.attachment],
     ]);
     const markControls = new Map([
         ["bold", "bold"],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openeditor/native",
-  "version": "0.0.11",
+  "version": "0.0.13",
   "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.13",
+    "@openeditor/exporters": "0.0.13",
+    "@openeditor/extensions": "0.0.13",
     "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.13",
     "react-native-keyboard-controller": ">=1.21",
     "react": ">=19",
     "react-native": ">=0.85"