@apollohg/react-native-prose-editor 0.2.0 → 0.3.0

package/dist/EditorToolbar.js

@@ -65,6 +65,7 @@ const DEFAULT_GLYPH_ICONS = {
     underline: 'U',
     strike: 'S',
     link: '🔗',
+    image: '🖼',
     blockquote: '❝',
     bulletList: '•≡',
     orderedList: '1.',
@@ -81,6 +82,7 @@ const DEFAULT_MATERIAL_ICONS = {
     underline: 'format-underlined',
     strike: 'strikethrough-s',
     link: 'link',
+    image: 'image',
     blockquote: 'format-quote',
     bulletList: 'format-list-bulleted',
     orderedList: 'format-list-numbered',
@@ -91,7 +93,7 @@ const DEFAULT_MATERIAL_ICONS = {
     undo: 'undo',
     redo: 'redo',
 };
-function EditorToolbar({ activeState, historyState, onToggleBold, onToggleItalic, onToggleUnderline, onToggleStrike, onToggleBulletList, onToggleBlockquote, onToggleOrderedList, onIndentList, onOutdentList, onInsertHorizontalRule, onInsertLineBreak, onUndo, onRedo, onToggleMark, onToggleListType, onInsertNodeType, onRunCommand, onToolbarAction, onRequestLink, toolbarItems = exports.DEFAULT_EDITOR_TOOLBAR_ITEMS, theme, showTopBorder = true, }) {
+function EditorToolbar({ activeState, historyState, onToggleBold, onToggleItalic, onToggleUnderline, onToggleStrike, onToggleBulletList, onToggleBlockquote, onToggleOrderedList, onIndentList, onOutdentList, onInsertHorizontalRule, onInsertLineBreak, onUndo, onRedo, onToggleMark, onToggleListType, onInsertNodeType, onRunCommand, onToolbarAction, onRequestLink, onRequestImage, toolbarItems = exports.DEFAULT_EDITOR_TOOLBAR_ITEMS, theme, showTopBorder = true, }) {
     const marks = activeState.marks ?? {};
     const nodes = activeState.nodes ?? {};
     const commands = activeState.commands ?? {};
@@ -130,6 +132,8 @@ function EditorToolbar({ activeState, historyState, onToggleBold, onToggleItalic
                     : (onToggleOrderedList ?? null);
             case 'link':
                 return onRequestLink ?? null;
+            case 'image':
+                return onRequestImage ?? null;
             case 'blockquote':
                 return onToggleBlockquote ?? null;
             case 'node':
@@ -170,6 +174,7 @@ function EditorToolbar({ activeState, historyState, onToggleBold, onToggleItalic
         onRedo,
         onRunCommand,
         onRequestLink,
+        onRequestImage,
         onToolbarAction,
         onToggleBold,
         onToggleBlockquote,
@@ -187,15 +192,17 @@ function EditorToolbar({ activeState, historyState, onToggleBold, onToggleItalic
             ? `mark:${item.mark}:${index}`
             : item.type === 'link'
                 ? `link:${index}`
-                : item.type === 'blockquote'
-                    ? `blockquote:${index}`
-                    : item.type === 'list'
-                        ? `list:${item.listType}:${index}`
-                        : item.type === 'command'
-                            ? `command:${item.command}:${index}`
-                            : item.type === 'node'
-                                ? `node:${item.nodeType}:${index}`
-                                : `action:${item.key}:${index}`), []);
+                : item.type === 'image'
+                    ? `image:${index}`
+                    : item.type === 'blockquote'
+                        ? `blockquote:${index}`
+                        : item.type === 'list'
+                            ? `list:${item.listType}:${index}`
+                            : item.type === 'command'
+                                ? `command:${item.command}:${index}`
+                                : item.type === 'node'
+                                    ? `node:${item.nodeType}:${index}`
+                                    : `action:${item.key}:${index}`), []);
     const renderedItems = [];
     for (let index = 0; index < toolbarItems.length; index += 1) {
         const item = toolbarItems[index];
@@ -221,6 +228,9 @@ function EditorToolbar({ activeState, historyState, onToggleBold, onToggleItalic
                 isActive = isMarkActive('link');
                 isDisabled = !allowedMarks.includes('link') || !onRequestLink;
                 break;
+            case 'image':
+                isDisabled = !insertableNodes.includes('image') || !onRequestImage;
+                break;
             case 'blockquote':
                 isActive = !!nodes['blockquote'];
                 isDisabled = !commands['toggleBlockquote'];

package/dist/NativeEditorBridge.d.ts

@@ -87,6 +87,7 @@ export interface RenderElement {
     depth?: number;
     docPos?: number;
     label?: string;
+    attrs?: Record<string, unknown>;
     listContext?: ListContext;
 }
 export interface ActiveState {
@@ -139,6 +140,7 @@ export declare class NativeEditorBridge {
     static create(config?: {
         maxLength?: number;
         schemaJson?: string;
+        allowBase64Images?: boolean;
     }): NativeEditorBridge;
     /** The underlying native editor ID. */
     get editorId(): number;

package/dist/NativeEditorBridge.js

@@ -227,6 +227,9 @@ class NativeEditorBridge {
         const configObj = {};
         if (config?.maxLength != null)
             configObj.maxLength = config.maxLength;
+        if (config?.allowBase64Images != null) {
+            configObj.allowBase64Images = config.allowBase64Images;
+        }
         if (config?.schemaJson != null) {
             try {
                 configObj.schema = JSON.parse(config.schemaJson);

package/dist/NativeRichTextEditor.d.ts

@@ -1,10 +1,11 @@
 import React from 'react';
 import { type StyleProp, type ViewStyle } from 'react-native';
-import { type ActiveState, type DocumentJSON, type Selection } from './NativeEditorBridge';
+import { type ActiveState, type DocumentJSON, type HistoryState, type Selection } from './NativeEditorBridge';
 import { type EditorToolbarItem } from './EditorToolbar';
 import { type EditorTheme } from './EditorTheme';
 import { type EditorAddons } from './addons';
 import { type SchemaDefinition } from './schemas';
+import { type ImageNodeAttributes } from './schemas';
 export type NativeRichTextEditorHeightBehavior = 'fixed' | 'autoGrow';
 export type NativeRichTextEditorToolbarPlacement = 'keyboard' | 'inline';
 export interface RemoteSelectionDecoration {
@@ -23,6 +24,11 @@ export interface LinkRequestContext {
     setLink: (href: string) => void;
     unsetLink: () => void;
 }
+export interface ImageRequestContext {
+    selection: Selection;
+    allowBase64: boolean;
+    insertImage: (src: string, attrs?: Omit<ImageNodeAttributes, 'src'>) => void;
+}
 export interface NativeRichTextEditorProps {
     /** Initial content as HTML (uncontrolled mode). */
     initialContent?: string;
@@ -54,6 +60,12 @@ export interface NativeRichTextEditorProps {
     onToolbarAction?: (key: string) => void;
     /** Called when a toolbar link item is pressed so the host can collect/edit a URL. */
     onRequestLink?: (context: LinkRequestContext) => void;
+    /** Called when a toolbar image item is pressed so the host can choose an image source. */
+    onRequestImage?: (context: ImageRequestContext) => void;
+    /** Whether `data:image/...` sources are accepted for image insertion and HTML parsing. */
+    allowBase64Images?: boolean;
+    /** Whether selected images show native resize handles. */
+    allowImageResizing?: boolean;
     /** Called when content changes with the current HTML. */
     onContentChange?: (html: string) => void;
     /** Called when content changes with the current ProseMirror JSON. */
@@ -62,6 +74,8 @@ export interface NativeRichTextEditorProps {
     onSelectionChange?: (selection: Selection) => void;
     /** Called when active formatting state changes. */
     onActiveStateChange?: (state: ActiveState) => void;
+    /** Called when undo/redo availability changes. */
+    onHistoryStateChange?: (state: HistoryState) => void;
     /** Called when the editor gains focus. */
     onFocus?: () => void;
     /** Called when the editor loses focus. */
@@ -98,6 +112,8 @@ export interface NativeRichTextEditorRef {
     outdentListItem(): void;
     /** Insert a void node (e.g. 'horizontalRule'). */
     insertNode(nodeType: string): void;
+    /** Insert a block image node with the given source and optional metadata. */
+    insertImage(src: string, attrs?: Omit<ImageNodeAttributes, 'src'>): void;
     /** Insert text at the current cursor position. */
     insertText(text: string): void;
     /** Insert HTML content at the current selection. */

package/dist/NativeRichTextEditor.js

@@ -10,11 +10,16 @@ const EditorToolbar_1 = require("./EditorToolbar");
 const EditorTheme_1 = require("./EditorTheme");
 const addons_1 = require("./addons");
 const schemas_1 = require("./schemas");
+const schemas_2 = require("./schemas");
 const NativeEditorView = (0, expo_modules_core_1.requireNativeViewManager)('NativeEditor');
 const DEV_NATIVE_VIEW_KEY = __DEV__
     ? `native-editor-dev:${Math.random().toString(36).slice(2)}`
     : 'native-editor';
 const LINK_TOOLBAR_ACTION_KEY = '__native-editor-link__';
+const IMAGE_TOOLBAR_ACTION_KEY = '__native-editor-image__';
+function isImageDataUrl(value) {
+    return /^data:image\//i.test(value.trim());
+}
 function isPromiseLike(value) {
     return (value != null &&
         typeof value === 'object' &&
@@ -59,7 +64,7 @@ function serializeRemoteSelections(remoteSelections) {
     }
     return JSON.stringify(remoteSelections);
 }
-exports.NativeRichTextEditor = (0, react_1.forwardRef)(function NativeRichTextEditor({ initialContent, initialJSON, value, valueJSON, schema, placeholder, editable = true, maxLength, autoFocus = false, heightBehavior = 'autoGrow', showToolbar = true, toolbarPlacement = 'keyboard', toolbarItems = EditorToolbar_1.DEFAULT_EDITOR_TOOLBAR_ITEMS, onToolbarAction, onRequestLink, onContentChange, onContentChangeJSON, onSelectionChange, onActiveStateChange, onFocus, onBlur, style, containerStyle, theme, addons, remoteSelections, }, ref) {
+exports.NativeRichTextEditor = (0, react_1.forwardRef)(function NativeRichTextEditor({ initialContent, initialJSON, value, valueJSON, schema, placeholder, editable = true, maxLength, autoFocus = false, heightBehavior = 'autoGrow', showToolbar = true, toolbarPlacement = 'keyboard', toolbarItems = EditorToolbar_1.DEFAULT_EDITOR_TOOLBAR_ITEMS, onToolbarAction, onRequestLink, onRequestImage, onContentChange, onContentChangeJSON, onSelectionChange, onActiveStateChange, onHistoryStateChange, onFocus, onBlur, style, containerStyle, theme, addons, remoteSelections, allowBase64Images = false, allowImageResizing = true, }, ref) {
     const bridgeRef = (0, react_1.useRef)(null);
     const nativeViewRef = (0, react_1.useRef)(null);
     const [isReady, setIsReady] = (0, react_1.useState)(false);
@@ -97,6 +102,8 @@ exports.NativeRichTextEditor = (0, react_1.forwardRef)(function NativeRichTextEd
     onSelectionChangeRef.current = onSelectionChange;
     const onActiveStateChangeRef = (0, react_1.useRef)(onActiveStateChange);
     onActiveStateChangeRef.current = onActiveStateChange;
+    const onHistoryStateChangeRef = (0, react_1.useRef)(onHistoryStateChange);
+    onHistoryStateChangeRef.current = onHistoryStateChange;
     const onFocusRef = (0, react_1.useRef)(onFocus);
     onFocusRef.current = onFocus;
     const onBlurRef = (0, react_1.useRef)(onBlur);
@@ -171,6 +178,7 @@ exports.NativeRichTextEditor = (0, react_1.forwardRef)(function NativeRichTextEd
         }
         syncStateFromUpdate(update);
         onActiveStateChangeRef.current?.(update.activeState);
+        onHistoryStateChangeRef.current?.(update.historyState);
         if (!options?.suppressContentCallbacks) {
             if (onContentChangeRef.current && bridgeRef.current) {
                 onContentChangeRef.current(bridgeRef.current.getHtml());
@@ -187,7 +195,10 @@ exports.NativeRichTextEditor = (0, react_1.forwardRef)(function NativeRichTextEd
             ? (0, addons_1.withMentionsSchema)(schema ?? schemas_1.tiptapSchema)
             : schema;
         const schemaJson = effectiveSchema ? JSON.stringify(effectiveSchema) : undefined;
-        const bridge = NativeEditorBridge_1.NativeEditorBridge.create(maxLength != null || schemaJson ? { maxLength, schemaJson } : undefined);
+        const bridgeConfig = maxLength != null || schemaJson || allowBase64Images
+            ? { maxLength, schemaJson, allowBase64Images }
+            : undefined;
+        const bridge = NativeEditorBridge_1.NativeEditorBridge.create(bridgeConfig);
         bridgeRef.current = bridge;
         setEditorInstanceId(bridge.editorId);
         // Four-way content initialization: value > valueJSON > initialJSON > initialContent
@@ -213,7 +224,7 @@ exports.NativeRichTextEditor = (0, react_1.forwardRef)(function NativeRichTextEd
             setIsReady(false);
         };
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [schema, maxLength, syncStateFromUpdate, Boolean(addons?.mentions)]);
+    }, [schema, maxLength, syncStateFromUpdate, Boolean(addons?.mentions), allowBase64Images]);
     (0, react_1.useEffect)(() => {
         if (value == null)
             return;
@@ -280,6 +291,7 @@ exports.NativeRichTextEditor = (0, react_1.forwardRef)(function NativeRichTextEd
                 return;
             syncStateFromUpdate(update);
             onActiveStateChangeRef.current?.(update.activeState);
+            onHistoryStateChangeRef.current?.(update.historyState);
             if (onContentChangeRef.current) {
                 onContentChangeRef.current(bridgeRef.current.getHtml());
             }
@@ -312,6 +324,7 @@ exports.NativeRichTextEditor = (0, react_1.forwardRef)(function NativeRichTextEd
         selectionRef.current = nextSelection;
         if (currentState) {
             onActiveStateChangeRef.current?.(currentState.activeState);
+            onHistoryStateChangeRef.current?.(currentState.historyState);
         }
         onSelectionChangeRef.current?.(nextSelection);
     }, [syncStateFromUpdate]);
@@ -334,25 +347,42 @@ exports.NativeRichTextEditor = (0, react_1.forwardRef)(function NativeRichTextEd
             return;
         setAutoGrowHeight((prev) => (prev === nextHeight ? prev : nextHeight));
     }, [autoGrowHeight, heightBehavior]);
-    const openLinkRequest = (0, react_1.useCallback)(() => {
-        const requestSelection = selectionRef.current;
-        const restoreCapturedSelection = () => {
-            if (requestSelection.type === 'text') {
-                const { anchor, head } = requestSelection;
-                if (anchor == null || head == null) {
-                    return;
-                }
-                bridgeRef.current?.setSelection(anchor, head);
+    const restoreSelection = (0, react_1.useCallback)((selection) => {
+        if (selection.type === 'text') {
+            const { anchor, head } = selection;
+            if (anchor == null || head == null) {
                 return;
             }
-            if (requestSelection.type === 'node') {
-                const { pos } = requestSelection;
-                if (pos == null) {
-                    return;
-                }
-                bridgeRef.current?.setSelection(pos, pos);
+            bridgeRef.current?.setSelection(anchor, head);
+            return;
+        }
+        if (selection.type === 'node') {
+            const { pos } = selection;
+            if (pos == null) {
+                return;
             }
-        };
+            bridgeRef.current?.setSelection(pos, pos);
+        }
+    }, []);
+    const insertImage = (0, react_1.useCallback)((src, attrs, selection) => {
+        const trimmedSrc = src.trim();
+        if (!trimmedSrc)
+            return;
+        if (!allowBase64Images && isImageDataUrl(trimmedSrc)) {
+            return;
+        }
+        runAndApply(() => {
+            if (selection) {
+                restoreSelection(selection);
+            }
+            return (bridgeRef.current?.insertContentJson((0, schemas_2.buildImageFragmentJson)({
+                src: trimmedSrc,
+                ...(attrs ?? {}),
+            })) ?? null);
+        });
+    }, [allowBase64Images, restoreSelection, runAndApply]);
+    const openLinkRequest = (0, react_1.useCallback)(() => {
+        const requestSelection = selectionRef.current;
         onRequestLink?.({
             href: currentLinkHref,
             isActive: activeState.marks.link === true,
@@ -362,7 +392,7 @@ exports.NativeRichTextEditor = (0, react_1.forwardRef)(function NativeRichTextEd
                 if (!trimmedHref)
                     return;
                 runAndApply(() => {
-                    restoreCapturedSelection();
+                    restoreSelection(requestSelection);
                     return (bridgeRef.current?.setMark('link', {
                         href: trimmedHref,
                     }) ?? null);
@@ -370,19 +400,31 @@ exports.NativeRichTextEditor = (0, react_1.forwardRef)(function NativeRichTextEd
             },
             unsetLink: () => {
                 runAndApply(() => {
-                    restoreCapturedSelection();
+                    restoreSelection(requestSelection);
                     return bridgeRef.current?.unsetMark('link') ?? null;
                 }, { skipNativeApplyIfContentUnchanged: true });
             },
         });
-    }, [activeState.marks.link, currentLinkHref, onRequestLink, runAndApply]);
+    }, [activeState.marks.link, currentLinkHref, onRequestLink, restoreSelection, runAndApply]);
+    const openImageRequest = (0, react_1.useCallback)(() => {
+        const requestSelection = selectionRef.current;
+        onRequestImage?.({
+            selection: requestSelection,
+            allowBase64: allowBase64Images,
+            insertImage: (src, attrs) => insertImage(src, attrs, requestSelection),
+        });
+    }, [allowBase64Images, insertImage, onRequestImage]);
     const handleToolbarAction = (0, react_1.useCallback)((event) => {
         if (event.nativeEvent.key === LINK_TOOLBAR_ACTION_KEY) {
             openLinkRequest();
             return;
         }
+        if (event.nativeEvent.key === IMAGE_TOOLBAR_ACTION_KEY) {
+            openImageRequest();
+            return;
+        }
         onToolbarAction?.(event.nativeEvent.key);
-    }, [onToolbarAction, openLinkRequest]);
+    }, [onToolbarAction, openImageRequest, openLinkRequest]);
     const handleAddonEvent = (0, react_1.useCallback)((event) => {
         let parsed = null;
         try {
@@ -451,6 +493,9 @@ exports.NativeRichTextEditor = (0, react_1.forwardRef)(function NativeRichTextEd
         insertNode(nodeType) {
             runAndApply(() => bridgeRef.current?.insertNode(nodeType) ?? null);
         },
+        insertImage(src, attrs) {
+            insertImage(src, attrs);
+        },
         insertText(text) {
             runAndApply(() => bridgeRef.current?.replaceSelectionText(text) ?? null);
         },
@@ -497,21 +542,33 @@ exports.NativeRichTextEditor = (0, react_1.forwardRef)(function NativeRichTextEd
                 return false;
             return bridgeRef.current.canRedo();
         },
-    }), [runAndApply]);
+    }), [insertImage, runAndApply]);
     if (!isReady)
         return null;
     const toolbarItemsForNative = toolbarItems.map((item) => {
-        if (item.type !== 'link') {
-            return item;
-        }
-        return {
-            type: 'action',
-            key: LINK_TOOLBAR_ACTION_KEY,
-            label: item.label,
-            icon: item.icon,
-            isActive: activeState.marks.link === true,
-            isDisabled: !editable || !onRequestLink || !activeState.allowedMarks.includes('link'),
-        };
+        if (item.type === 'link') {
+            return {
+                type: 'action',
+                key: LINK_TOOLBAR_ACTION_KEY,
+                label: item.label,
+                icon: item.icon,
+                isActive: activeState.marks.link === true,
+                isDisabled: !editable || !onRequestLink || !activeState.allowedMarks.includes('link'),
+            };
+        }
+        if (item.type === 'image') {
+            return {
+                type: 'action',
+                key: IMAGE_TOOLBAR_ACTION_KEY,
+                label: item.label,
+                icon: item.icon,
+                isActive: false,
+                isDisabled: !editable
+                    || !onRequestImage
+                    || !activeState.insertableNodes.includes(schemas_2.IMAGE_NODE_NAME),
+            };
+        }
+        return item;
     });
     const themeJson = (0, EditorTheme_1.serializeEditorTheme)(theme);
     const addonsJson = (0, addons_1.serializeEditorAddons)(addons);
@@ -568,7 +625,7 @@ exports.NativeRichTextEditor = (0, react_1.forwardRef)(function NativeRichTextEd
                         runAndApply(() => bridgeRef.current?.redo() ?? null);
                         break;
                 }
-            }, onRequestLink: openLinkRequest, onToolbarAction: onToolbarAction, onToggleBold: () => runAndApply(() => bridgeRef.current?.toggleMark('bold') ?? null, {
+            }, onRequestLink: openLinkRequest, onRequestImage: openImageRequest, onToolbarAction: onToolbarAction, onToggleBold: () => runAndApply(() => bridgeRef.current?.toggleMark('bold') ?? null, {
                 skipNativeApplyIfContentUnchanged: true,
             }), onToggleItalic: () => runAndApply(() => bridgeRef.current?.toggleMark('italic') ?? null, {
                 skipNativeApplyIfContentUnchanged: true,
@@ -577,7 +634,7 @@ exports.NativeRichTextEditor = (0, react_1.forwardRef)(function NativeRichTextEd
             }), onToggleStrike: () => runAndApply(() => bridgeRef.current?.toggleMark('strike') ?? null, {
                 skipNativeApplyIfContentUnchanged: true,
             }), onToggleBulletList: () => runAndApply(() => bridgeRef.current?.toggleList('bulletList') ?? null), onToggleOrderedList: () => runAndApply(() => bridgeRef.current?.toggleList('orderedList') ?? null), onIndentList: () => runAndApply(() => bridgeRef.current?.indentListItem() ?? null), onOutdentList: () => runAndApply(() => bridgeRef.current?.outdentListItem() ?? null), onInsertHorizontalRule: () => runAndApply(() => bridgeRef.current?.insertNode('horizontalRule') ?? null), onInsertLineBreak: () => runAndApply(() => bridgeRef.current?.insertNode('hardBreak') ?? null), onUndo: () => runAndApply(() => bridgeRef.current?.undo() ?? null), onRedo: () => runAndApply(() => bridgeRef.current?.redo() ?? null) }) }));
-    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [styles.container, containerStyle], children: [(0, jsx_runtime_1.jsx)(NativeEditorView, { ref: nativeViewRef, style: nativeViewStyle, editorId: editorInstanceId, placeholder: placeholder, editable: editable, autoFocus: autoFocus, showToolbar: showToolbar, toolbarPlacement: toolbarPlacement, heightBehavior: heightBehavior, themeJson: themeJson, addonsJson: addonsJson, toolbarItemsJson: toolbarItemsJson, remoteSelectionsJson: remoteSelectionsJson, toolbarFrameJson: toolbarPlacement === 'inline' && isFocused ? toolbarFrameJson : undefined, editorUpdateJson: pendingNativeUpdate.json, editorUpdateRevision: pendingNativeUpdate.revision, onEditorUpdate: handleUpdate, onSelectionChange: handleSelectionChange, onFocusChange: handleFocusChange, onContentHeightChange: handleContentHeightChange, onToolbarAction: handleToolbarAction, onAddonEvent: handleAddonEvent }, DEV_NATIVE_VIEW_KEY), shouldRenderJsToolbar && jsToolbar] }));
+    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [styles.container, containerStyle], children: [(0, jsx_runtime_1.jsx)(NativeEditorView, { ref: nativeViewRef, style: nativeViewStyle, editorId: editorInstanceId, placeholder: placeholder, editable: editable, autoFocus: autoFocus, showToolbar: showToolbar, toolbarPlacement: toolbarPlacement, heightBehavior: heightBehavior, allowImageResizing: allowImageResizing, themeJson: themeJson, addonsJson: addonsJson, toolbarItemsJson: toolbarItemsJson, remoteSelectionsJson: remoteSelectionsJson, toolbarFrameJson: toolbarPlacement === 'inline' && isFocused ? toolbarFrameJson : undefined, editorUpdateJson: pendingNativeUpdate.json, editorUpdateRevision: pendingNativeUpdate.revision, onEditorUpdate: handleUpdate, onSelectionChange: handleSelectionChange, onFocusChange: handleFocusChange, onContentHeightChange: handleContentHeightChange, onToolbarAction: handleToolbarAction, onAddonEvent: handleAddonEvent }, DEV_NATIVE_VIEW_KEY), shouldRenderJsToolbar && jsToolbar] }));
 });
 const styles = react_native_1.StyleSheet.create({
     container: {

package/dist/index.d.ts

@@ -1,8 +1,8 @@
-export { NativeRichTextEditor, type NativeRichTextEditorProps, type NativeRichTextEditorRef, type NativeRichTextEditorHeightBehavior, type NativeRichTextEditorToolbarPlacement, type RemoteSelectionDecoration, type LinkRequestContext, } from './NativeRichTextEditor';
+export { NativeRichTextEditor, type NativeRichTextEditorProps, type NativeRichTextEditorRef, type NativeRichTextEditorHeightBehavior, type NativeRichTextEditorToolbarPlacement, type RemoteSelectionDecoration, type LinkRequestContext, type ImageRequestContext, } from './NativeRichTextEditor';
 export { EditorToolbar, DEFAULT_EDITOR_TOOLBAR_ITEMS, type EditorToolbarProps, type EditorToolbarItem, type EditorToolbarIcon, type EditorToolbarDefaultIconId, type EditorToolbarSFSymbolIcon, type EditorToolbarMaterialIcon, type EditorToolbarCommand, type EditorToolbarListType, } from './EditorToolbar';
 export type { EditorContentInsets, EditorTheme, EditorTextStyle, EditorHeadingTheme, EditorListTheme, EditorHorizontalRuleTheme, EditorMentionTheme, EditorToolbarTheme, EditorToolbarAppearance, EditorFontStyle, EditorFontWeight, } from './EditorTheme';
 export { MENTION_NODE_NAME, mentionNodeSpec, withMentionsSchema, buildMentionFragmentJson, type EditorAddons, type MentionsAddonConfig, type MentionSuggestion, type MentionQueryChangeEvent, type MentionSelectEvent, type EditorAddonEvent, } from './addons';
-export { tiptapSchema, prosemirrorSchema, type SchemaDefinition, type NodeSpec, type MarkSpec, type AttrSpec, } from './schemas';
+export { tiptapSchema, prosemirrorSchema, IMAGE_NODE_NAME, imageNodeSpec, withImagesSchema, buildImageFragmentJson, type SchemaDefinition, type NodeSpec, type MarkSpec, type AttrSpec, type ImageNodeAttributes, } from './schemas';
 export { createYjsCollaborationController, useYjsCollaboration, type YjsCollaborationOptions, type YjsCollaborationState, type YjsTransportStatus, type LocalAwarenessState, type LocalAwarenessUser, type UseYjsCollaborationResult, type YjsCollaborationController, } from './YjsCollaboration';
 export type { Selection, ActiveState, HistoryState, EditorUpdate, DocumentJSON, CollaborationPeer, EncodedCollaborationStateInput, } from './NativeEditorBridge';
 export { encodeCollaborationStateBase64, decodeCollaborationStateBase64, } from './NativeEditorBridge';

package/dist/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.decodeCollaborationStateBase64 = exports.encodeCollaborationStateBase64 = exports.useYjsCollaboration = exports.createYjsCollaborationController = exports.prosemirrorSchema = exports.tiptapSchema = exports.buildMentionFragmentJson = exports.withMentionsSchema = exports.mentionNodeSpec = exports.MENTION_NODE_NAME = exports.DEFAULT_EDITOR_TOOLBAR_ITEMS = exports.EditorToolbar = exports.NativeRichTextEditor = void 0;
+exports.decodeCollaborationStateBase64 = exports.encodeCollaborationStateBase64 = exports.useYjsCollaboration = exports.createYjsCollaborationController = exports.buildImageFragmentJson = exports.withImagesSchema = exports.imageNodeSpec = exports.IMAGE_NODE_NAME = exports.prosemirrorSchema = exports.tiptapSchema = exports.buildMentionFragmentJson = exports.withMentionsSchema = exports.mentionNodeSpec = exports.MENTION_NODE_NAME = exports.DEFAULT_EDITOR_TOOLBAR_ITEMS = exports.EditorToolbar = exports.NativeRichTextEditor = void 0;
 var NativeRichTextEditor_1 = require("./NativeRichTextEditor");
 Object.defineProperty(exports, "NativeRichTextEditor", { enumerable: true, get: function () { return NativeRichTextEditor_1.NativeRichTextEditor; } });
 var EditorToolbar_1 = require("./EditorToolbar");
@@ -14,6 +14,10 @@ Object.defineProperty(exports, "buildMentionFragmentJson", { enumerable: true, g
 var schemas_1 = require("./schemas");
 Object.defineProperty(exports, "tiptapSchema", { enumerable: true, get: function () { return schemas_1.tiptapSchema; } });
 Object.defineProperty(exports, "prosemirrorSchema", { enumerable: true, get: function () { return schemas_1.prosemirrorSchema; } });
+Object.defineProperty(exports, "IMAGE_NODE_NAME", { enumerable: true, get: function () { return schemas_1.IMAGE_NODE_NAME; } });
+Object.defineProperty(exports, "imageNodeSpec", { enumerable: true, get: function () { return schemas_1.imageNodeSpec; } });
+Object.defineProperty(exports, "withImagesSchema", { enumerable: true, get: function () { return schemas_1.withImagesSchema; } });
+Object.defineProperty(exports, "buildImageFragmentJson", { enumerable: true, get: function () { return schemas_1.buildImageFragmentJson; } });
 var YjsCollaboration_1 = require("./YjsCollaboration");
 Object.defineProperty(exports, "createYjsCollaborationController", { enumerable: true, get: function () { return YjsCollaboration_1.createYjsCollaborationController; } });
 Object.defineProperty(exports, "useYjsCollaboration", { enumerable: true, get: function () { return YjsCollaboration_1.useYjsCollaboration; } });

package/dist/schemas.d.ts

@@ -1,3 +1,4 @@
+import type { DocumentJSON } from './NativeEditorBridge';
 export interface AttrSpec {
     default?: unknown;
 }
@@ -19,5 +20,16 @@ export interface SchemaDefinition {
     nodes: NodeSpec[];
     marks: MarkSpec[];
 }
+export interface ImageNodeAttributes {
+    src: string;
+    alt?: string | null;
+    title?: string | null;
+    width?: number | null;
+    height?: number | null;
+}
+export declare const IMAGE_NODE_NAME = "image";
+export declare function imageNodeSpec(name?: string): NodeSpec;
+export declare function withImagesSchema(schema: SchemaDefinition): SchemaDefinition;
+export declare function buildImageFragmentJson(attrs: ImageNodeAttributes): DocumentJSON;
 export declare const tiptapSchema: SchemaDefinition;
 export declare const prosemirrorSchema: SchemaDefinition;

package/dist/schemas.js

@@ -1,6 +1,48 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.prosemirrorSchema = exports.tiptapSchema = void 0;
+exports.prosemirrorSchema = exports.tiptapSchema = exports.IMAGE_NODE_NAME = void 0;
+exports.imageNodeSpec = imageNodeSpec;
+exports.withImagesSchema = withImagesSchema;
+exports.buildImageFragmentJson = buildImageFragmentJson;
+exports.IMAGE_NODE_NAME = 'image';
+function imageNodeSpec(name = exports.IMAGE_NODE_NAME) {
+    return {
+        name,
+        content: '',
+        group: 'block',
+        attrs: {
+            src: {},
+            alt: { default: null },
+            title: { default: null },
+            width: { default: null },
+            height: { default: null },
+        },
+        role: 'block',
+        htmlTag: 'img',
+        isVoid: true,
+    };
+}
+function withImagesSchema(schema) {
+    const hasImageNode = schema.nodes.some((node) => node.name === exports.IMAGE_NODE_NAME);
+    if (hasImageNode) {
+        return schema;
+    }
+    return {
+        ...schema,
+        nodes: [...schema.nodes, imageNodeSpec()],
+    };
+}
+function buildImageFragmentJson(attrs) {
+    return {
+        type: 'doc',
+        content: [
+            {
+                type: exports.IMAGE_NODE_NAME,
+                attrs,
+            },
+        ],
+    };
+}
 const MARKS = [
     { name: 'bold' },
     { name: 'italic' },
@@ -66,6 +108,7 @@ exports.tiptapSchema = {
             htmlTag: 'hr',
             isVoid: true,
         },
+        imageNodeSpec(),
         {
             name: 'text',
             content: '',
@@ -133,6 +176,7 @@ exports.prosemirrorSchema = {
             htmlTag: 'hr',
             isVoid: true,
         },
+        imageNodeSpec('image'),
         {
             name: 'text',
             content: '',

package/ios/EditorCore.xcframework/Info.plist

@@ -8,32 +8,32 @@
 			<key>BinaryPath</key>
 			<string>libeditor_core.a</string>
 			<key>LibraryIdentifier</key>
-			<string>ios-arm64_x86_64-simulator</string>
+			<string>ios-arm64</string>
 			<key>LibraryPath</key>
 			<string>libeditor_core.a</string>
 			<key>SupportedArchitectures</key>
 			<array>
 				<string>arm64</string>
-				<string>x86_64</string>
 			</array>
 			<key>SupportedPlatform</key>
 			<string>ios</string>
-			<key>SupportedPlatformVariant</key>
-			<string>simulator</string>
 		</dict>
 		<dict>
 			<key>BinaryPath</key>
 			<string>libeditor_core.a</string>
 			<key>LibraryIdentifier</key>
-			<string>ios-arm64</string>
+			<string>ios-arm64_x86_64-simulator</string>
 			<key>LibraryPath</key>
 			<string>libeditor_core.a</string>
 			<key>SupportedArchitectures</key>
 			<array>
 				<string>arm64</string>
+				<string>x86_64</string>
 			</array>
 			<key>SupportedPlatform</key>
 			<string>ios</string>
+			<key>SupportedPlatformVariant</key>
+			<string>simulator</string>
 		</dict>
 	</array>
 	<key>CFBundlePackageType</key>

package/ios/EditorLayoutManager.swift

@@ -1,17 +1,10 @@
 import UIKit
 import CoreText
-import os
 
 /// Draws list markers visually in the gutter without inserting them into the
 /// editable text storage. This keeps UIKit paragraph-start behaviors, such as
 /// sentence auto-capitalization, working naturally inside list items.
 final class EditorLayoutManager: NSLayoutManager {
-    private static let blockquoteLog = Logger(
-        subsystem: "com.apollohg.prose-editor",
-        category: "blockquote"
-    )
-
-    private var blockquoteDrawPassCounter: UInt64 = 0
     private(set) var blockquoteStripeDrawPassesForTesting: [[CGRect]] = []
 
     func blockquoteStripeRectsForTesting(
@@ -66,9 +59,6 @@ final class EditorLayoutManager: NSLayoutManager {
 
         guard let textStorage, glyphsToShow.length > 0 else { return }
 
-        blockquoteDrawPassCounter &+= 1
-        let drawPass = blockquoteDrawPassCounter
-
         let characterRange = characterRange(forGlyphRange: glyphsToShow, actualGlyphRange: nil)
         let nsString = textStorage.string as NSString
         var drawnParagraphStarts = Set<Int>()
@@ -126,9 +116,6 @@ final class EditorLayoutManager: NSLayoutManager {
                 stripeRect: stripeRect,
                 color: color
             )
-            Self.blockquoteLog.notice(
-                "[drawGlyphs] pass=\(drawPass, privacy: .public) glyphRange=\(glyphsToShow.location, privacy: .public)..<\(glyphsToShow.location + glyphsToShow.length, privacy: .public) groupRange=\(groupRange.location, privacy: .public)..<\(groupRange.location + groupRange.length, privacy: .public) stripe=(x:\(stripeRect.minX, privacy: .public), y:\(stripeRect.minY, privacy: .public), w:\(stripeRect.width, privacy: .public), h:\(stripeRect.height, privacy: .public))"
-            )
             drawnStripeRects.append(stripeRect)
         }
 
@@ -259,9 +246,6 @@ final class EditorLayoutManager: NSLayoutManager {
             width: borderWidth,
             height: bottomEdge - topEdge
         )
-        Self.blockquoteLog.notice(
-            "[stripeRect] chars=\(characterRange.location, privacy: .public)..<\(characterRange.location + characterRange.length, privacy: .public) textLeading=\(textLeadingEdge, privacy: .public) verticalEdges=(top:\(topEdge, privacy: .public), bottom:\(bottomEdge, privacy: .public)) stripe=(x:\(stripeRect.minX, privacy: .public), y:\(stripeRect.minY, privacy: .public), w:\(stripeRect.width, privacy: .public), h:\(stripeRect.height, privacy: .public)) borderWidth=\(borderWidth, privacy: .public) gap=\(gap, privacy: .public)"
-        )
         return stripeRect
     }