@apollohg/react-native-prose-editor 0.4.0 → 0.4.2

package/dist/NativeRichTextEditor.js

@@ -10,7 +10,6 @@ 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)}`
@@ -35,7 +34,7 @@ function mapToolbarChildForNative(item, activeState, editable, onRequestLink, on
             label: item.label,
             icon: item.icon,
             isActive: false,
-            isDisabled: !editable || !onRequestImage || !activeState.insertableNodes.includes(schemas_2.IMAGE_NODE_NAME),
+            isDisabled: !editable || !onRequestImage || !activeState.insertableNodes.includes(schemas_1.IMAGE_NODE_NAME),
         };
     }
     return item;
@@ -99,9 +98,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);
@@ -129,7 +162,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;
@@ -152,6 +187,14 @@ 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 bridgeSchema = addons?.mentions != null ? (0, addons_1.withMentionsSchema)(schema ?? schemas_1.tiptapSchema) : schema;
+    const documentSchema = bridgeSchema ?? schemas_1.tiptapSchema;
+    const serializedSchemaJson = useSerializedValue(bridgeSchema, (nextSchema) => stringifyCachedJson(nextSchema));
+    const serializedInitialJson = useSerializedValue(initialJSON, (doc) => stringifyCachedJson((0, schemas_1.normalizeDocumentJson)(doc, documentSchema)));
+    const serializedValueJson = useSerializedValue(valueJSON, (doc) => stringifyCachedJson((0, schemas_1.normalizeDocumentJson)(doc, documentSchema)), 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;
@@ -159,6 +202,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) {
@@ -166,13 +247,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;
@@ -188,10 +264,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) => ({
@@ -217,23 +293,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;
@@ -242,11 +313,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);
@@ -261,7 +332,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;
@@ -276,19 +352,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) {
@@ -323,28 +398,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 &&
@@ -355,8 +426,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) {
@@ -364,7 +446,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);
@@ -412,7 +494,7 @@ exports.NativeRichTextEditor = (0, react_1.forwardRef)(function NativeRichTextEd
             if (selection) {
                 restoreSelection(selection);
             }
-            return (bridgeRef.current?.insertContentJson((0, schemas_2.buildImageFragmentJson)({
+            return (bridgeRef.current?.insertContentJson((0, schemas_1.buildImageFragmentJson)({
                 src: trimmedSrc,
                 ...(attrs ?? {}),
             })) ?? null);
@@ -585,11 +667,37 @@ exports.NativeRichTextEditor = (0, react_1.forwardRef)(function NativeRichTextEd
     }), [insertImage, runAndApply]);
     if (!isReady)
         return null;
-    const toolbarItemsForNative = mapToolbarItemsForNative(toolbarItems, activeState, editable, onRequestLink, onRequestImage);
-    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_1.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 = {

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;

package/dist/YjsCollaboration.js

@@ -17,11 +17,119 @@ const EMPTY_DOCUMENT = {
     ],
 };
 const SELECTION_AWARENESS_DEBOUNCE_MS = 40;
-function cloneDocument(doc) {
-    return JSON.parse(JSON.stringify(doc ?? EMPTY_DOCUMENT));
+function cloneJsonValue(value) {
+    if (Array.isArray(value)) {
+        return value.map((item) => cloneJsonValue(item));
+    }
+    if (value != null && typeof value === 'object') {
+        const clone = {};
+        for (const [key, nestedValue] of Object.entries(value)) {
+            clone[key] = cloneJsonValue(nestedValue);
+        }
+        return clone;
+    }
+    return value;
+}
+function acceptingGroupsForContent(content, existingChildCount) {
+    const tokens = content
+        .trim()
+        .split(/\s+/)
+        .filter(Boolean)
+        .map((token) => {
+        const quantifier = token[token.length - 1];
+        if (quantifier === '+' || quantifier === '*' || quantifier === '?') {
+            return {
+                group: token.slice(0, -1),
+                min: quantifier === '+' ? 1 : 0,
+                max: quantifier === '?' ? 1 : null,
+            };
+        }
+        return {
+            group: token,
+            min: 1,
+            max: 1,
+        };
+    });
+    let remaining = existingChildCount;
+    const acceptingGroups = [];
+    for (const token of tokens) {
+        if (remaining >= token.min) {
+            const consumed = token.max == null ? remaining : Math.min(remaining, token.max);
+            remaining = Math.max(0, remaining - consumed);
+            const atMax = token.max != null && consumed >= token.max;
+            if (!atMax) {
+                acceptingGroups.push(token.group);
+            }
+            continue;
+        }
+        acceptingGroups.push(token.group);
+        break;
+    }
+    return acceptingGroups;
+}
+function defaultEmptyDocument(schema) {
+    if (!schema) {
+        return {
+            type: 'doc',
+            content: [{ type: 'paragraph' }],
+        };
+    }
+    const docNode = schema.nodes.find((node) => node.role === 'doc' || node.name === 'doc');
+    const acceptingGroups = docNode == null ? [] : acceptingGroupsForContent(docNode.content ?? '', 0);
+    const matchingTextBlocks = schema.nodes.filter((node) => node.role === 'textBlock' &&
+        acceptingGroups.some((group) => node.name === group || node.group === group));
+    const preferredTextBlock = matchingTextBlocks.find((node) => node.htmlTag === 'p' || node.name === 'paragraph') ??
+        matchingTextBlocks[0] ??
+        schema.nodes.find((node) => node.htmlTag === 'p' || node.name === 'paragraph') ??
+        schema.nodes.find((node) => node.role === 'textBlock');
+    if (!preferredTextBlock) {
+        return {
+            type: 'doc',
+            content: [{ type: 'paragraph' }],
+        };
+    }
+    return {
+        type: 'doc',
+        content: [{ type: preferredTextBlock.name }],
+    };
+}
+function initialFallbackDocument(options) {
+    return options.initialDocumentJson
+        ? cloneJsonValue(options.initialDocumentJson)
+        : defaultEmptyDocument(options.schema);
+}
+function shouldUseFallbackForNativeDocument(doc, options) {
+    if (options.initialDocumentJson != null || options.initialEncodedState != null) {
+        return false;
+    }
+    if (doc.type !== 'doc') {
+        return false;
+    }
+    return !Array.isArray(doc.content) || doc.content.length === 0;
 }
 function awarenessToRecord(awareness) {
-    return JSON.parse(JSON.stringify(awareness));
+    return awareness;
+}
+function localAwarenessEquals(left, right) {
+    const leftSelection = left.selection;
+    const rightSelection = right.selection;
+    if (leftSelection == null || rightSelection == null) {
+        if (leftSelection !== rightSelection) {
+            return false;
+        }
+    }
+    else if (leftSelection.anchor !== rightSelection.anchor ||
+        leftSelection.head !== rightSelection.head) {
+        return false;
+    }
+    const leftUser = left.user;
+    const rightUser = right.user;
+    return (left.focused === right.focused &&
+        leftUser.userId === rightUser.userId &&
+        leftUser.name === rightUser.name &&
+        leftUser.color === rightUser.color &&
+        leftUser.avatarUrl === rightUser.avatarUrl &&
+        JSON.stringify(leftUser.extra ?? null) === JSON.stringify(rightUser.extra ?? null));
 }
 function normalizeMessageBytes(data) {
     if (data instanceof ArrayBuffer) {
@@ -109,11 +217,6 @@ function encodeInitialStateKey(encodedState) {
         return '';
     return (0, NativeEditorBridge_1.encodeCollaborationStateBase64)(encodedState);
 }
-function encodeDocumentKey(doc) {
-    if (doc == null)
-        return '';
-    return JSON.stringify(doc);
-}
 class YjsCollaborationControllerImpl {
     constructor(options, callbacks = {}) {
         this.socket = null;
@@ -126,23 +229,26 @@ class YjsCollaborationControllerImpl {
         this.callbacks = callbacks;
         this.createWebSocket = options.createWebSocket;
         this.retryIntervalMs = options.retryIntervalMs;
-        const hasInitialEncodedState = options.initialEncodedState != null;
         this.localAwarenessState = {
             user: options.localAwareness,
             focused: false,
         };
         this.bridge = NativeEditorBridge_1.NativeCollaborationBridge.create({
             fragmentName: options.fragmentName ?? DEFAULT_YJS_FRAGMENT_NAME,
+            schema: options.schema,
             initialEncodedState: options.initialEncodedState,
             localAwareness: awarenessToRecord(this.localAwarenessState),
         });
+        const nativeDocumentJson = this.bridge.getDocumentJson();
         this._state = {
             documentId: options.documentId,
             status: 'idle',
             isConnected: false,
-            documentJson: hasInitialEncodedState
-                ? this.bridge.getDocumentJson()
-                : cloneDocument(options.initialDocumentJson),
+            documentJson: options.initialDocumentJson != null
+                ? cloneJsonValue(options.initialDocumentJson)
+                : shouldUseFallbackForNativeDocument(nativeDocumentJson, options)
+                    ? defaultEmptyDocument(options.schema)
+                    : nativeDocumentJson,
         };
         this._peers = this.bridge.getPeers();
         if (options.connect !== false) {
@@ -314,10 +420,10 @@ class YjsCollaborationControllerImpl {
     destroy() {
         if (this.destroyed)
             return;
-        this.destroyed = true;
         this.cancelRetry();
         this.cancelPendingAwarenessSync();
         this.disconnect();
+        this.destroyed = true;
         this.bridge.destroy();
     }
     updateLocalAwareness(partial) {
@@ -336,22 +442,33 @@ class YjsCollaborationControllerImpl {
     handleSelectionChange(selection) {
         if (this.destroyed)
             return;
-        this.localAwarenessState = this.mergeLocalAwareness({
+        const nextAwareness = this.mergeLocalAwareness({
             focused: true,
             selection: selectionToAwarenessRange(selection),
         });
+        if (localAwarenessEquals(nextAwareness, this.localAwarenessState)) {
+            return;
+        }
+        this.localAwarenessState = nextAwareness;
         this.scheduleAwarenessSync();
     }
     handleFocusChange(focused) {
         if (this.destroyed)
             return;
-        this.localAwarenessState = this.mergeLocalAwareness({ focused });
+        const nextAwareness = this.mergeLocalAwareness({ focused });
+        if (localAwarenessEquals(nextAwareness, this.localAwarenessState)) {
+            if (this.pendingAwarenessTimer != null) {
+                this.commitLocalAwareness();
+            }
+            return;
+        }
+        this.localAwarenessState = nextAwareness;
         this.commitLocalAwareness();
     }
     applyResult(result) {
         if (result.documentChanged && result.documentJson) {
             this.setState({
-                documentJson: cloneDocument(result.documentJson),
+                documentJson: result.documentJson,
             });
         }
         if (result.peersChanged && result.peers) {
@@ -489,14 +606,14 @@ function useYjsCollaboration(options) {
     const createWebSocketRef = (0, react_1.useRef)(options.createWebSocket);
     createWebSocketRef.current = options.createWebSocket;
     const controllerRef = (0, react_1.useRef)(null);
-    const initialDocumentKey = encodeDocumentKey(options.initialDocumentJson);
     const initialEncodedStateKey = encodeInitialStateKey(options.initialEncodedState);
     const localAwarenessKey = JSON.stringify(options.localAwareness);
+    const schemaKey = JSON.stringify(options.schema ?? null);
     const [state, setState] = (0, react_1.useState)({
         documentId: options.documentId,
         status: 'idle',
         isConnected: false,
-        documentJson: cloneDocument(options.initialDocumentJson),
+        documentJson: initialFallbackDocument(options),
     });
     const [peers, setPeers] = (0, react_1.useState)([]);
     (0, react_1.useEffect)(() => {
@@ -529,7 +646,7 @@ function useYjsCollaboration(options) {
                 documentId: options.documentId,
                 status: 'error',
                 isConnected: false,
-                documentJson: cloneDocument(options.initialDocumentJson),
+                documentJson: initialFallbackDocument(options),
                 lastError: nextError,
             };
             controllerRef.current = null;
@@ -543,7 +660,12 @@ function useYjsCollaboration(options) {
             controllerRef.current = null;
         };
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [options.documentId, options.fragmentName, initialDocumentKey, initialEncodedStateKey]);
+    }, [
+        options.documentId,
+        options.fragmentName,
+        schemaKey,
+        initialEncodedStateKey,
+    ]);
     (0, react_1.useEffect)(() => {
         controllerRef.current?.updateLocalAwareness({
             user: options.localAwareness,

package/dist/schemas.d.ts

@@ -32,4 +32,6 @@ 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 function defaultEmptyDocument(schema?: SchemaDefinition): DocumentJSON;
+export declare function normalizeDocumentJson(doc: DocumentJSON, schema?: SchemaDefinition): DocumentJSON;
 export declare const prosemirrorSchema: SchemaDefinition;