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

package/dist/NativeRichTextEditor.js

@@ -17,6 +17,43 @@ const DEV_NATIVE_VIEW_KEY = __DEV__
     : 'native-editor';
 const LINK_TOOLBAR_ACTION_KEY = '__native-editor-link__';
 const IMAGE_TOOLBAR_ACTION_KEY = '__native-editor-image__';
+function mapToolbarChildForNative(item, activeState, editable, onRequestLink, onRequestImage) {
+    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;
+}
+function mapToolbarItemsForNative(items, activeState, editable, onRequestLink, onRequestImage) {
+    return items.map((item) => {
+        if (item.type === 'group') {
+            return {
+                ...item,
+                items: item.items.map((child) => mapToolbarChildForNative(child, activeState, editable, onRequestLink, onRequestImage)),
+            };
+        }
+        if (item.type === 'separator') {
+            return item;
+        }
+        return mapToolbarChildForNative(item, activeState, editable, onRequestLink, onRequestImage);
+    });
+}
 function isImageDataUrl(value) {
     return /^data:image\//i.test(value.trim());
 }
@@ -62,9 +99,43 @@ function serializeRemoteSelections(remoteSelections) {
     if (!remoteSelections || remoteSelections.length === 0) {
         return undefined;
     }
-    return JSON.stringify(remoteSelections);
+    return stringifyCachedJson(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, onRequestImage, onContentChange, onContentChangeJSON, onSelectionChange, onActiveStateChange, onHistoryStateChange, onFocus, onBlur, style, containerStyle, theme, addons, remoteSelections, allowBase64Images = false, allowImageResizing = true, }, ref) {
+const serializedJsonCache = new WeakMap();
+function stringifyCachedJson(value) {
+    if (value != null && typeof value === 'object') {
+        const cached = serializedJsonCache.get(value);
+        if (cached != null) {
+            return cached;
+        }
+        const serialized = JSON.stringify(value);
+        serializedJsonCache.set(value, serialized);
+        return serialized;
+    }
+    return JSON.stringify(value);
+}
+function useSerializedValue(value, serialize, revision) {
+    const cacheRef = (0, react_1.useRef)(null);
+    const hasRevision = revision !== undefined;
+    const cached = cacheRef.current;
+    if (cached) {
+        if (hasRevision && cached.hasRevision && Object.is(cached.revision, revision)) {
+            return cached.serialized;
+        }
+        if (Object.is(cached.value, value) && cached.hasRevision === hasRevision) {
+            return cached.serialized;
+        }
+    }
+    const serialized = value == null ? undefined : serialize(value);
+    cacheRef.current = {
+        value,
+        revision,
+        hasRevision,
+        serialized,
+    };
+    return serialized;
+}
+exports.NativeRichTextEditor = (0, react_1.forwardRef)(function NativeRichTextEditor({ initialContent, initialJSON, value, valueJSON, valueJSONRevision, 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);
@@ -92,7 +163,9 @@ exports.NativeRichTextEditor = (0, react_1.forwardRef)(function NativeRichTextEd
     // Selection and rendered text length refs (non-rendering state)
     const selectionRef = (0, react_1.useRef)({ type: 'text', anchor: 0, head: 0 });
     const renderedTextLengthRef = (0, react_1.useRef)(0);
+    const documentVersionRef = (0, react_1.useRef)(null);
     const toolbarRef = (0, react_1.useRef)(null);
+    const toolbarItemsSerializationCacheRef = (0, react_1.useRef)(null);
     // Stable callback refs to avoid re-renders
     const onContentChangeRef = (0, react_1.useRef)(onContentChange);
     onContentChangeRef.current = onContentChange;
@@ -115,6 +188,12 @@ exports.NativeRichTextEditor = (0, react_1.forwardRef)(function NativeRichTextEd
         : undefined;
     const mentionSuggestionsByKeyRef = (0, react_1.useRef)(new Map());
     mentionSuggestionsByKeyRef.current = new Map((addons?.mentions?.suggestions ?? []).map((suggestion) => [suggestion.key, suggestion]));
+    const serializedSchemaJson = useSerializedValue(addons?.mentions != null ? (0, addons_1.withMentionsSchema)(schema ?? schemas_1.tiptapSchema) : schema, (nextSchema) => stringifyCachedJson(nextSchema));
+    const serializedInitialJson = useSerializedValue(initialJSON, stringifyCachedJson);
+    const serializedValueJson = useSerializedValue(valueJSON, stringifyCachedJson, valueJSONRevision);
+    const themeJson = useSerializedValue(theme, EditorTheme_1.serializeEditorTheme);
+    const addonsJson = useSerializedValue(addons, addons_1.serializeEditorAddons);
+    const remoteSelectionsJson = useSerializedValue(remoteSelections, (selections) => serializeRemoteSelections(selections));
     const syncStateFromUpdate = (0, react_1.useCallback)((update) => {
         if (!update)
             return;
@@ -122,6 +201,44 @@ exports.NativeRichTextEditor = (0, react_1.forwardRef)(function NativeRichTextEd
         setHistoryState(update.historyState);
         selectionRef.current = update.selection;
         renderedTextLengthRef.current = computeRenderedTextLength(update.renderElements);
+        if (typeof update.documentVersion === 'number') {
+            documentVersionRef.current = update.documentVersion;
+        }
+    }, []);
+    const syncSelectionStateFromUpdate = (0, react_1.useCallback)((update) => {
+        if (!update)
+            return;
+        setActiveState(update.activeState);
+        setHistoryState(update.historyState);
+        selectionRef.current = update.selection;
+        if (typeof update.documentVersion === 'number') {
+            documentVersionRef.current = update.documentVersion;
+        }
+    }, []);
+    const emitContentCallbacksForUpdate = (0, react_1.useCallback)((update, previousDocumentVersion) => {
+        if (!update || !bridgeRef.current || bridgeRef.current.isDestroyed)
+            return;
+        const wantsHtml = typeof onContentChangeRef.current === 'function';
+        const wantsJson = typeof onContentChangeJSONRef.current === 'function';
+        if (!wantsHtml && !wantsJson)
+            return;
+        if (previousDocumentVersion != null &&
+            typeof update.documentVersion === 'number' &&
+            update.documentVersion === previousDocumentVersion) {
+            return;
+        }
+        if (wantsHtml && wantsJson) {
+            const snapshot = bridgeRef.current.getContentSnapshot();
+            onContentChangeRef.current?.(snapshot.html);
+            onContentChangeJSONRef.current?.(snapshot.json);
+            return;
+        }
+        if (wantsHtml) {
+            onContentChangeRef.current?.(bridgeRef.current.getHtml());
+        }
+        if (wantsJson) {
+            onContentChangeJSONRef.current?.(bridgeRef.current.getJson());
+        }
     }, []);
     // Warn if both value and valueJSON are set
     if (__DEV__ && value != null && valueJSON != null) {
@@ -129,13 +246,8 @@ exports.NativeRichTextEditor = (0, react_1.forwardRef)(function NativeRichTextEd
             'Only value will be used.');
     }
     const runAndApply = (0, react_1.useCallback)((mutate, options) => {
+        const previousDocumentVersion = documentVersionRef.current;
         const preservedSelection = options?.preserveLiveTextSelection === true ? selectionRef.current : null;
-        const shouldCheckForNoopNativeApply = options?.skipNativeApplyIfContentUnchanged === true &&
-            bridgeRef.current != null &&
-            !bridgeRef.current.isDestroyed;
-        const htmlBefore = shouldCheckForNoopNativeApply
-            ? bridgeRef.current.getHtml()
-            : null;
         const update = mutate();
         if (!update)
             return null;
@@ -151,10 +263,10 @@ exports.NativeRichTextEditor = (0, react_1.forwardRef)(function NativeRichTextEd
                 head: preservedSelection.head,
             };
         }
-        const htmlAfter = shouldCheckForNoopNativeApply
-            ? bridgeRef.current.getHtml()
-            : null;
-        if (!shouldCheckForNoopNativeApply || htmlBefore !== htmlAfter) {
+        const contentChanged = previousDocumentVersion == null ||
+            typeof update.documentVersion !== 'number' ||
+            update.documentVersion !== previousDocumentVersion;
+        if (!options?.skipNativeApplyIfContentUnchanged || contentChanged) {
             const updateJson = JSON.stringify(update);
             if (react_native_1.Platform.OS === 'android') {
                 setPendingNativeUpdate((current) => ({
@@ -180,23 +292,18 @@ exports.NativeRichTextEditor = (0, react_1.forwardRef)(function NativeRichTextEd
         onActiveStateChangeRef.current?.(update.activeState);
         onHistoryStateChangeRef.current?.(update.historyState);
         if (!options?.suppressContentCallbacks) {
-            if (onContentChangeRef.current && bridgeRef.current) {
-                onContentChangeRef.current(bridgeRef.current.getHtml());
-            }
-            if (onContentChangeJSONRef.current && bridgeRef.current) {
-                onContentChangeJSONRef.current(bridgeRef.current.getJson());
-            }
+            emitContentCallbacksForUpdate(update, previousDocumentVersion);
         }
         onSelectionChangeRef.current?.(update.selection);
         return update;
-    }, [syncStateFromUpdate]);
+    }, [emitContentCallbacksForUpdate, syncStateFromUpdate]);
     (0, react_1.useEffect)(() => {
-        const effectiveSchema = addonsRef.current?.mentions != null
-            ? (0, addons_1.withMentionsSchema)(schema ?? schemas_1.tiptapSchema)
-            : schema;
-        const schemaJson = effectiveSchema ? JSON.stringify(effectiveSchema) : undefined;
-        const bridgeConfig = maxLength != null || schemaJson || allowBase64Images
-            ? { maxLength, schemaJson, allowBase64Images }
+        const bridgeConfig = maxLength != null || serializedSchemaJson || allowBase64Images
+            ? {
+                maxLength,
+                schemaJson: serializedSchemaJson,
+                allowBase64Images,
+            }
             : undefined;
         const bridge = NativeEditorBridge_1.NativeEditorBridge.create(bridgeConfig);
         bridgeRef.current = bridge;
@@ -205,11 +312,11 @@ exports.NativeRichTextEditor = (0, react_1.forwardRef)(function NativeRichTextEd
         if (value != null) {
             bridge.setHtml(value);
         }
-        else if (valueJSON != null) {
-            bridge.setJson(valueJSON);
+        else if (serializedValueJson != null) {
+            bridge.setJsonString(serializedValueJson);
         }
-        else if (initialJSON) {
-            bridge.setJson(initialJSON);
+        else if (serializedInitialJson != null) {
+            bridge.setJsonString(serializedInitialJson);
         }
         else if (initialContent) {
             bridge.setHtml(initialContent);
@@ -224,7 +331,12 @@ exports.NativeRichTextEditor = (0, react_1.forwardRef)(function NativeRichTextEd
             setIsReady(false);
         };
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [schema, maxLength, syncStateFromUpdate, Boolean(addons?.mentions), allowBase64Images]);
+    }, [
+        maxLength,
+        syncStateFromUpdate,
+        allowBase64Images,
+        serializedSchemaJson,
+    ]);
     (0, react_1.useEffect)(() => {
         if (value == null)
             return;
@@ -239,19 +351,18 @@ exports.NativeRichTextEditor = (0, react_1.forwardRef)(function NativeRichTextEd
         });
     }, [value, runAndApply]);
     (0, react_1.useEffect)(() => {
-        if (valueJSON == null || value != null)
+        if (serializedValueJson == null || value != null)
             return;
         if (!bridgeRef.current || bridgeRef.current.isDestroyed)
             return;
-        // No-op if JSON content is identical (avoids churning undo history)
-        const currentJson = bridgeRef.current.getJson();
-        if (JSON.stringify(currentJson) === JSON.stringify(valueJSON))
+        const currentJson = bridgeRef.current.getJsonString();
+        if (currentJson === serializedValueJson)
             return;
-        runAndApply(() => bridgeRef.current.replaceJson(valueJSON), {
+        runAndApply(() => bridgeRef.current.replaceJsonString(serializedValueJson), {
             suppressContentCallbacks: true,
             preserveLiveTextSelection: true,
         });
-    }, [valueJSON, value, runAndApply]);
+    }, [serializedValueJson, value, runAndApply]);
     const updateToolbarFrame = (0, react_1.useCallback)(() => {
         const toolbar = toolbarRef.current;
         if (!toolbar) {
@@ -286,28 +397,24 @@ exports.NativeRichTextEditor = (0, react_1.forwardRef)(function NativeRichTextEd
         if (!bridgeRef.current || bridgeRef.current.isDestroyed)
             return;
         try {
-            const update = (0, NativeEditorBridge_1.parseEditorUpdateJson)(event.nativeEvent.updateJson);
+            const previousDocumentVersion = documentVersionRef.current;
+            const update = bridgeRef.current.parseUpdateJson(event.nativeEvent.updateJson);
             if (!update)
                 return;
             syncStateFromUpdate(update);
             onActiveStateChangeRef.current?.(update.activeState);
             onHistoryStateChangeRef.current?.(update.historyState);
-            if (onContentChangeRef.current) {
-                onContentChangeRef.current(bridgeRef.current.getHtml());
-            }
-            if (onContentChangeJSONRef.current) {
-                onContentChangeJSONRef.current(bridgeRef.current.getJson());
-            }
+            emitContentCallbacksForUpdate(update, previousDocumentVersion);
             onSelectionChangeRef.current?.(update.selection);
         }
         catch {
             // Invalid JSON from native — skip
         }
-    }, [syncStateFromUpdate]);
+    }, [emitContentCallbacksForUpdate, syncStateFromUpdate]);
     const handleSelectionChange = (0, react_1.useCallback)((event) => {
         if (!bridgeRef.current || bridgeRef.current.isDestroyed)
             return;
-        const { anchor, head } = event.nativeEvent;
+        const { anchor, head, stateJson } = event.nativeEvent;
         let selection;
         if (anchor === 0 &&
             head >= renderedTextLengthRef.current &&
@@ -318,8 +425,19 @@ exports.NativeRichTextEditor = (0, react_1.forwardRef)(function NativeRichTextEd
             selection = { type: 'text', anchor, head };
         }
         bridgeRef.current.updateSelectionFromNative(anchor, head);
-        const currentState = bridgeRef.current.getCurrentState();
-        syncStateFromUpdate(currentState);
+        let currentState = null;
+        if (typeof stateJson === 'string' && stateJson.length > 0) {
+            try {
+                currentState = bridgeRef.current.parseUpdateJson(stateJson);
+            }
+            catch {
+                currentState = bridgeRef.current.getSelectionState();
+            }
+        }
+        else {
+            currentState = bridgeRef.current.getSelectionState();
+        }
+        syncSelectionStateFromUpdate(currentState);
         const nextSelection = selection.type === 'all' ? selection : (currentState?.selection ?? selection);
         selectionRef.current = nextSelection;
         if (currentState) {
@@ -327,7 +445,7 @@ exports.NativeRichTextEditor = (0, react_1.forwardRef)(function NativeRichTextEd
             onHistoryStateChangeRef.current?.(currentState.historyState);
         }
         onSelectionChangeRef.current?.(nextSelection);
-    }, [syncStateFromUpdate]);
+    }, [syncSelectionStateFromUpdate]);
     const handleFocusChange = (0, react_1.useCallback)((event) => {
         const { isFocused: focused } = event.nativeEvent;
         setIsFocused(focused);
@@ -481,6 +599,9 @@ exports.NativeRichTextEditor = (0, react_1.forwardRef)(function NativeRichTextEd
         toggleBlockquote() {
             runAndApply(() => bridgeRef.current?.toggleBlockquote() ?? null);
         },
+        toggleHeading(level) {
+            runAndApply(() => bridgeRef.current?.toggleHeading(level) ?? null);
+        },
         toggleList(listType) {
             runAndApply(() => bridgeRef.current?.toggleList(listType) ?? null);
         },
@@ -545,35 +666,37 @@ exports.NativeRichTextEditor = (0, react_1.forwardRef)(function NativeRichTextEd
     }), [insertImage, runAndApply]);
     if (!isReady)
         return null;
-    const toolbarItemsForNative = toolbarItems.map((item) => {
-        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);
-    const toolbarItemsJson = JSON.stringify(toolbarItemsForNative);
-    const remoteSelectionsJson = serializeRemoteSelections(remoteSelections);
+    const isLinkActive = activeState.marks.link === true;
+    const allowsLink = activeState.allowedMarks.includes('link');
+    const canInsertImage = activeState.insertableNodes.includes(schemas_2.IMAGE_NODE_NAME);
+    const canRequestLink = typeof onRequestLink === 'function';
+    const canRequestImage = typeof onRequestImage === 'function';
+    const cachedToolbarItems = toolbarItemsSerializationCacheRef.current;
+    let toolbarItemsJson;
+    if (cachedToolbarItems?.toolbarItems === toolbarItems &&
+        cachedToolbarItems.editable === editable &&
+        cachedToolbarItems.isLinkActive === isLinkActive &&
+        cachedToolbarItems.allowsLink === allowsLink &&
+        cachedToolbarItems.canRequestLink === canRequestLink &&
+        cachedToolbarItems.canRequestImage === canRequestImage &&
+        cachedToolbarItems.canInsertImage === canInsertImage) {
+        toolbarItemsJson = cachedToolbarItems.serialized;
+    }
+    else {
+        const mappedItems = mapToolbarItemsForNative(toolbarItems, activeState, editable, onRequestLink, onRequestImage);
+        toolbarItemsJson = stringifyCachedJson(mappedItems);
+        toolbarItemsSerializationCacheRef.current = {
+            toolbarItems,
+            editable,
+            isLinkActive,
+            allowsLink,
+            canRequestLink,
+            canRequestImage,
+            canInsertImage,
+            mappedItems,
+            serialized: toolbarItemsJson,
+        };
+    }
     const usesNativeKeyboardToolbar = toolbarPlacement === 'keyboard' && (react_native_1.Platform.OS === 'ios' || react_native_1.Platform.OS === 'android');
     const shouldRenderJsToolbar = !usesNativeKeyboardToolbar && showToolbar && editable;
     const inlineToolbarChrome = {
@@ -610,7 +733,7 @@ exports.NativeRichTextEditor = (0, react_1.forwardRef)(function NativeRichTextEd
                 : null,
         ], onLayout: updateToolbarFrame, children: (0, jsx_runtime_1.jsx)(EditorToolbar_1.EditorToolbar, { activeState: activeState, historyState: historyState, toolbarItems: toolbarItems, theme: theme?.toolbar, showTopBorder: false, onToggleMark: (mark) => runAndApply(() => bridgeRef.current?.toggleMark(mark) ?? null, {
                 skipNativeApplyIfContentUnchanged: true,
-            }), onToggleListType: (listType) => runAndApply(() => bridgeRef.current?.toggleList(listType) ?? null), onToggleBlockquote: () => runAndApply(() => bridgeRef.current?.toggleBlockquote() ?? null), onInsertNodeType: (nodeType) => runAndApply(() => bridgeRef.current?.insertNode(nodeType) ?? null), onRunCommand: (command) => {
+            }), onToggleListType: (listType) => runAndApply(() => bridgeRef.current?.toggleList(listType) ?? null), onToggleHeading: (level) => runAndApply(() => bridgeRef.current?.toggleHeading(level) ?? null), onToggleBlockquote: () => runAndApply(() => bridgeRef.current?.toggleBlockquote() ?? null), onInsertNodeType: (nodeType) => runAndApply(() => bridgeRef.current?.insertNode(nodeType) ?? null), onRunCommand: (command) => {
                 switch (command) {
                     case 'indentList':
                         runAndApply(() => bridgeRef.current?.indentListItem() ?? null);

package/dist/YjsCollaboration.d.ts

@@ -1,5 +1,6 @@
 import { type CollaborationPeer, type DocumentJSON, type EncodedCollaborationStateInput, type Selection } from './NativeEditorBridge';
 import type { RemoteSelectionDecoration } from './NativeRichTextEditor';
+import type { SchemaDefinition } from './schemas';
 export type YjsTransportStatus = 'idle' | 'connecting' | 'connected' | 'disconnected' | 'error';
 export interface YjsRetryContext {
     attempt: number;
@@ -35,6 +36,7 @@ export interface YjsCollaborationOptions {
     connect?: boolean;
     retryIntervalMs?: YjsRetryInterval | false;
     fragmentName?: string;
+    schema?: SchemaDefinition;
     initialDocumentJson?: DocumentJSON;
     initialEncodedState?: EncodedCollaborationStateInput;
     localAwareness: LocalAwarenessUser;