@datalayer/lexical-loro 1.0.2 → 1.0.5

package/lib/collab/yjs/Bindings.d.ts

@@ -0,0 +1,23 @@
+import type { LexicalEditor, NodeKey } from 'lexical';
+import { Klass, LexicalNode } from 'lexical';
+import type { Doc } from 'yjs';
+import type { CollabElementNode } from './nodes/CollabElementNode';
+import { AnyCollabNode } from './nodes/AnyCollabNode';
+import type { Cursor } from './sync/SyncCursors';
+import { Provider } from './State';
+export type ClientID = number;
+export type Binding = {
+    clientID: ClientID;
+    collabNodeMap: Map<NodeKey, AnyCollabNode>;
+    cursors: Map<ClientID, Cursor>;
+    cursorsContainer: null | HTMLElement;
+    doc: Doc;
+    docMap: Map<string, Doc>;
+    editor: LexicalEditor;
+    id: string;
+    nodeProperties: Map<string, Array<string>>;
+    root: CollabElementNode;
+    excludedProperties: ExcludedProperties;
+};
+export type ExcludedProperties = Map<Klass<LexicalNode>, Set<string>>;
+export declare function createBinding(editor: LexicalEditor, provider: Provider, id: string, doc: Doc | null | undefined, docMap: Map<string, Doc>, excludedProperties?: ExcludedProperties): Binding;

package/lib/collab/yjs/Bindings.js

@@ -0,0 +1,26 @@
+import { XmlText } from 'yjs';
+import invariant from '../utils/invariant';
+import { $createCollabElementNode } from './nodes/CollabElementNode';
+import { setupYjsDebugging } from './Debug';
+export function createBinding(editor, provider, id, doc, docMap, excludedProperties) {
+    invariant(doc !== undefined && doc !== null, 'createBinding: doc is null or undefined');
+    const rootXmlText = doc.get('root', XmlText);
+    const collabRoot = $createCollabElementNode(rootXmlText, null, 'root');
+    collabRoot._key = 'root';
+    const binding = {
+        clientID: doc.clientID,
+        collabNodeMap: new Map(),
+        cursors: new Map(),
+        cursorsContainer: null,
+        doc,
+        docMap,
+        editor,
+        excludedProperties: excludedProperties || new Map(),
+        id,
+        nodeProperties: new Map(),
+        root: collabRoot,
+    };
+    // Setup Y.js debugging utilities
+    setupYjsDebugging(binding);
+    return binding;
+}

package/lib/collab/yjs/Debug.d.ts

@@ -0,0 +1,23 @@
+import type { Binding } from './Bindings';
+/**
+ * YJS Debugging Interface - Provides comprehensive debugging utilities for Y.js collaboration
+ */
+export interface YjsDebugger {
+    binding: Binding | null;
+    logStructure: () => void;
+    verifyStructure: () => void;
+    inspectNode: (nodeKey: string) => void;
+    generateTreeHTML: (node: any, prefix?: string, isLast?: boolean) => string;
+    addDebugToPage: () => void;
+}
+/**
+ * Setup global debugging utilities for Y.js collaboration
+ * This function creates comprehensive debugging tools including:
+ * - Tree structure visualization
+ * - Node inspection utilities
+ * - Interactive debug panel
+ * - Console logging functions
+ *
+ * @param binding - The Y.js binding instance to debug
+ */
+export declare function setupYjsDebugging(binding: Binding): void;

package/lib/collab/yjs/Debug.js

@@ -0,0 +1,213 @@
+/**
+ * Setup global debugging utilities for Y.js collaboration
+ * This function creates comprehensive debugging tools including:
+ * - Tree structure visualization
+ * - Node inspection utilities
+ * - Interactive debug panel
+ * - Console logging functions
+ *
+ * @param binding - The Y.js binding instance to debug
+ */
+export function setupYjsDebugging(binding) {
+    // Setup global debugging for Y.js
+    window.debugYjs = {
+        binding: null, // Will be set after binding is created
+        logStructure: () => {
+            const binding = window.debugYjs.binding;
+            if (binding) {
+                console.log('=== YJS STRUCTURE DEBUG ===');
+                console.log('Root children:', binding.root._children.length);
+                binding.root._children.forEach((child, index) => {
+                    console.log(`  ${index}: ${child.constructor.name}(${child._key})`);
+                });
+                console.log('=== END DEBUG ===');
+            }
+            else {
+                console.log('Y.js binding not available yet');
+            }
+        },
+        verifyStructure: () => {
+            const binding = window.debugYjs.binding;
+            if (!binding)
+                return console.log('❌ Binding not available');
+            console.log('🔍 YJS STRUCTURE VERIFICATION:');
+            console.log('Root children count:', binding.root._children.length);
+            binding.root._children.forEach((child, index) => {
+                console.log(`\n📍 Root child ${index}:`);
+                console.log('  Type:', child.constructor.name);
+                console.log('  Key:', child._key);
+                console.log('  Element Type:', child.getType ? child.getType() : 'N/A');
+                console.log('  Children Count:', child._children ? child._children.length : 0);
+                if (child._children && child._children.length > 0) {
+                    console.log('  Children:');
+                    child._children.forEach((grandChild, gIndex) => {
+                        console.log(`    ${gIndex}: ${grandChild.constructor.name}(${grandChild._key})`);
+                    });
+                }
+            });
+            // Check for any orphaned text nodes at root level
+            const textNodesAtRoot = binding.root._children.filter(child => child.constructor.name === 'CollabTextNode');
+            if (textNodesAtRoot.length > 0) {
+                console.log('⚠️  WARNING: Found text nodes directly under root:');
+                textNodesAtRoot.forEach(node => console.log('   -', node._key));
+            }
+        },
+        inspectNode: (nodeKey) => {
+            const binding = window.debugYjs.binding;
+            if (!binding)
+                return console.log('Binding not available');
+            // Search for node in tree
+            const findNode = (node, key) => {
+                if (node._key === key)
+                    return node;
+                if (node._children) {
+                    for (const child of node._children) {
+                        const found = findNode(child, key);
+                        if (found)
+                            return found;
+                    }
+                }
+                return null;
+            };
+            const node = findNode(binding.root, nodeKey);
+            if (node) {
+                console.log('🔍 Node Details:', {
+                    key: node._key,
+                    type: node.constructor.name,
+                    elementType: node.getType ? node.getType() : 'N/A',
+                    children: node._children ? node._children.length : 0,
+                    properties: node._xmlText ? 'Has XmlText' : 'No XmlText',
+                    parent: node._parent ? node._parent._key : 'No parent'
+                });
+            }
+            else {
+                console.warn(`Node with key "${nodeKey}" not found`);
+            }
+        },
+        generateTreeHTML: (node, prefix = '', isLast = true) => {
+            const nodeKey = node._key || 'no-key';
+            const nodeType = node.getType ? node.getType() : 'no-type';
+            const nodeInfo = `${node.constructor.name}(${nodeKey}) [${nodeType}]`;
+            const connector = isLast ? '└── ' : '├── ';
+            const childPrefix = prefix + (isLast ? '    ' : '│   ');
+            const clickIntegrator = nodeKey !== 'no-key' ? `onclick="window.debugYjs.inspectNode('${nodeKey}')"` : '';
+            const nodeColor = nodeKey !== 'no-key' ? '#00ff88' : '#888';
+            const cursor = nodeKey !== 'no-key' ? 'cursor: pointer; text-decoration: underline;' : '';
+            // Convert spaces to non-breaking spaces for proper HTML rendering
+            const htmlPrefix = prefix.replace(/ /g, ' ');
+            const htmlConnector = connector.replace(/ /g, ' ');
+            let result = `<div style="color: ${nodeColor}; ${cursor}" ${clickIntegrator}>${htmlPrefix}${htmlConnector}${nodeInfo}</div>`;
+            if (node._children && node._children.length > 0) {
+                node._children.forEach((child, index) => {
+                    const isLastChild = index === node._children.length - 1;
+                    if (child) {
+                        result += window.debugYjs.generateTreeHTML(child, childPrefix, isLastChild);
+                    }
+                    else {
+                        const childConnector = isLastChild ? '└── ' : '├── ';
+                        const htmlChildPrefix = childPrefix.replace(/ /g, '&nbsp;');
+                        const htmlChildConnector = childConnector.replace(/ /g, '&nbsp;');
+                        result += `<div style="color: #ffaa00;">${htmlChildPrefix}${htmlChildConnector}null</div>`;
+                    }
+                });
+            }
+            return result;
+        },
+        addDebugToPage: () => {
+            const binding = window.debugYjs.binding;
+            if (!binding)
+                return;
+            // Debug: log the actual structure to console
+            console.log('🟢 YJS Root structure:', {
+                rootChildren: binding.root._children.length,
+                children: binding.root._children.map((child, index) => ({
+                    index,
+                    type: child.constructor.name,
+                    key: child._key,
+                    childrenCount: child._children ? child._children.length : 0,
+                    children: child._children ? child._children.map((grandChild) => ({
+                        type: grandChild.constructor.name,
+                        key: grandChild._key
+                    })) : []
+                }))
+            });
+            const treeHTML = window.debugYjs.generateTreeHTML(binding.root);
+            const debugDiv = document.getElementById('debug-yjs') || document.createElement('div');
+            const existingDiv = document.getElementById('debug-yjs');
+            // Preserve current position if panel already exists
+            let currentLeft = '10px';
+            let currentTop = '700px';
+            if (existingDiv) {
+                currentLeft = existingDiv.style.left || '10px';
+                currentTop = existingDiv.style.top || '700px';
+            }
+            debugDiv.id = 'debug-yjs';
+            debugDiv.style.cssText = `position: fixed; top: ${currentTop}; left: ${currentLeft}; background: rgba(0,100,0,0.9); color: white; padding: 0; border-radius: 8px; font-family: "Courier New", monospace; font-size: 11px; z-index: 9999; max-width: 500px; max-height: 80vh; box-shadow: 0 4px 8px rgba(0,0,0,0.3); border: 1px solid #51cf66; user-select: none;`;
+            // Add drag functionality if not already added
+            if (!debugDiv.classList.contains('draggable-initialized')) {
+                debugDiv.classList.add('draggable-initialized');
+                let isDragging = false;
+                let startX = 0;
+                let startY = 0;
+                let startLeft = 0;
+                let startTop = 0;
+                debugDiv.addEventListener('mousedown', (e) => {
+                    // Only start drag if clicking on the header area
+                    const target = e.target;
+                    const dragHandle = debugDiv.querySelector('.debug-drag-handle');
+                    if (!dragHandle || !dragHandle.contains(target))
+                        return;
+                    isDragging = true;
+                    startX = e.clientX;
+                    startY = e.clientY;
+                    const rect = debugDiv.getBoundingClientRect();
+                    startLeft = rect.left;
+                    startTop = rect.top;
+                    document.addEventListener('mousemove', onMouseMove);
+                    document.addEventListener('mouseup', onMouseUp);
+                    e.preventDefault();
+                });
+                function onMouseMove(e) {
+                    if (!isDragging)
+                        return;
+                    const deltaX = e.clientX - startX;
+                    const deltaY = e.clientY - startY;
+                    const newLeft = Math.max(0, Math.min(window.innerWidth - debugDiv.offsetWidth, startLeft + deltaX));
+                    const newTop = Math.max(0, Math.min(window.innerHeight - debugDiv.offsetHeight, startTop + deltaY));
+                    debugDiv.style.left = newLeft + 'px';
+                    debugDiv.style.top = newTop + 'px';
+                }
+                function onMouseUp() {
+                    isDragging = false;
+                    document.removeEventListener('mousemove', onMouseMove);
+                    document.removeEventListener('mouseup', onMouseUp);
+                }
+            }
+            debugDiv.innerHTML = `
+        <div class="debug-drag-handle" style="color: #51cf66; font-weight: bold; margin-bottom: 10px; border-bottom: 1px solid #444; padding: 15px 15px 5px 15px; cursor: move; background: linear-gradient(90deg, rgba(81,207,102,0.1), transparent);">
+          🟢 YJS STRUCTURE <span style="float: right; font-size: 9px; color: #666;">⋮⋮ drag</span>
+        </div>
+        <div style="padding: 0 15px 15px 15px; overflow-y: auto; max-height: calc(80vh - 50px);">
+          <div style="color: #74c0fc; margin-bottom: 8px;">Root children: ${binding.root._children.length}</div>
+          <div style="color: #ffd43b; margin-bottom: 10px;">Time: ${new Date().toLocaleTimeString()}</div>
+          <div style="border-top: 1px solid #444; padding-top: 8px;">
+            ${treeHTML}
+          </div>
+          <div style="margin-top: 10px; font-size: 10px; color: #888;">
+            <span onclick="window.debugYjs.addDebugToPage()" style="color: #74c0fc; cursor: pointer; text-decoration: underline;">🔄 Refresh</span> | 
+            <span onclick="window.debugYjs.verifyStructure()" style="color: #00ff88; cursor: pointer; text-decoration: underline;">✅ Verify</span> | 
+            <span onclick="window.debugYjs.logStructure()" style="color: #ffd43b; cursor: pointer; text-decoration: underline;">📝 Console Log</span> |
+            <span onclick="document.getElementById('debug-yjs').remove()" style="color: #51cf66; cursor: pointer; text-decoration: underline;">❌ Close</span>
+          </div>
+        </div>
+      `;
+            document.body.appendChild(debugDiv);
+        }
+    };
+    // Expose binding for debugging
+    window.debugYjs.binding = binding;
+    // Auto-initialize debug window after a short delay
+    setTimeout(() => {
+        window.debugYjs.addDebugToPage();
+    }, 1500); // Slightly later than Y.js to avoid overlap
+}

package/lib/collab/yjs/LexicalCollaborationContext.d.ts

@@ -0,0 +1,10 @@
+import type { Doc } from 'yjs';
+export type CollaborationContextType = {
+    clientID: number;
+    color: string;
+    isCollabActive: boolean;
+    name: string;
+    docMap: Map<string, Doc>;
+};
+export declare const CollaborationContext: import("react").Context<CollaborationContextType>;
+export declare function useCollaborationContext(username?: string, color?: string): CollaborationContextType;

package/lib/collab/yjs/LexicalCollaborationContext.js

@@ -0,0 +1,37 @@
+import { createContext, useContext } from 'react';
+const ENTRIES = [
+    ['Cat', 'rgb(125, 50, 0)'],
+    ['Dog', 'rgb(100, 0, 0)'],
+    ['Rabbit', 'rgb(150, 0, 0)'],
+    ['Frog', 'rgb(200, 0, 0)'],
+    ['Fox', 'rgb(200, 75, 0)'],
+    ['Hedgehog', 'rgb(0, 75, 0)'],
+    ['Pigeon', 'rgb(0, 125, 0)'],
+    ['Squirrel', 'rgb(75, 100, 0)'],
+    ['Bear', 'rgb(125, 100, 0)'],
+    ['Tiger', 'rgb(0, 0, 150)'],
+    ['Leopard', 'rgb(0, 0, 200)'],
+    ['Zebra', 'rgb(0, 0, 250)'],
+    ['Wolf', 'rgb(0, 100, 150)'],
+    ['Owl', 'rgb(0, 100, 100)'],
+    ['Gull', 'rgb(100, 0, 100)'],
+    ['Squid', 'rgb(150, 0, 150)'],
+];
+const randomEntry = ENTRIES[Math.floor(Math.random() * ENTRIES.length)];
+export const CollaborationContext = createContext({
+    clientID: 0,
+    color: randomEntry[1],
+    isCollabActive: false,
+    name: randomEntry[0],
+    docMap: new Map(),
+});
+export function useCollaborationContext(username, color) {
+    const collabContext = useContext(CollaborationContext);
+    if (username != null) {
+        collabContext.name = username;
+    }
+    if (color != null) {
+        collabContext.color = color;
+    }
+    return collabContext;
+}

package/lib/collab/yjs/LexicalCollaborationPlugin.d.ts

@@ -0,0 +1,21 @@
+import type { JSX } from 'react';
+import type { Doc } from 'yjs';
+import { InitialEditorStateType } from '@lexical/react/LexicalComposer';
+import { Provider } from './State';
+import { CursorsContainerRef } from './useCollaboration';
+import { SyncCursorPositionsFn } from './sync/SyncCursors';
+import { ExcludedProperties } from './Bindings';
+type Props = {
+    id: string;
+    providerFactory: (id: string, docMap: Map<string, Doc>) => Provider;
+    shouldBootstrap: boolean;
+    username?: string;
+    cursorColor?: string;
+    cursorsContainerRef?: CursorsContainerRef;
+    initialEditorState?: InitialEditorStateType;
+    excludedProperties?: ExcludedProperties;
+    awarenessData?: object;
+    syncCursorPositionsFn?: SyncCursorPositionsFn;
+};
+export declare function CollaborationPlugin({ id, providerFactory, shouldBootstrap, username, cursorColor, cursorsContainerRef, initialEditorState, excludedProperties, awarenessData, syncCursorPositionsFn, }: Props): JSX.Element;
+export {};

package/lib/collab/yjs/LexicalCollaborationPlugin.js

@@ -0,0 +1,63 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { useCollaborationContext, } from './LexicalCollaborationContext';
+import { useCollaboration, useFocusTracking, useHistory, } from './useCollaboration';
+import { createBinding } from './Bindings';
+export function CollaborationPlugin({ id, providerFactory, shouldBootstrap, username, cursorColor, cursorsContainerRef, initialEditorState, excludedProperties, awarenessData, syncCursorPositionsFn, }) {
+    const isBindingInitialized = useRef(false);
+    const isProviderInitialized = useRef(false);
+    const collabContext = useCollaborationContext(username, cursorColor);
+    const { docMap, name, color } = collabContext;
+    const [editor] = useLexicalComposerContext();
+    useEffect(() => {
+        collabContext.isCollabActive = true;
+        return () => {
+            // Resetting flag only when unmount top level editor collab plugin. Nested
+            // editors (e.g. image caption) should unmount without affecting it
+            if (editor._parentEditor == null) {
+                collabContext.isCollabActive = false;
+            }
+        };
+    }, [collabContext, editor]);
+    const [provider, setProvider] = useState();
+    const [doc, setDoc] = useState();
+    useEffect(() => {
+        if (isProviderInitialized.current) {
+            return;
+        }
+        isProviderInitialized.current = true;
+        const provider = providerFactory(id, docMap);
+        setProvider(provider);
+        setDoc(docMap.get(id));
+        return () => {
+            provider.disconnect();
+        };
+    }, [id, providerFactory, docMap]);
+    const [binding, setBinding] = useState();
+    useEffect(() => {
+        if (!provider) {
+            return;
+        }
+        if (isBindingInitialized.current) {
+            return;
+        }
+        isBindingInitialized.current = true;
+        const binding = createBinding(editor, provider, id, doc || docMap.get(id), docMap, excludedProperties);
+        setBinding(binding);
+        return () => {
+            binding.root.destroy(binding);
+        };
+    }, [editor, provider, id, docMap, doc, excludedProperties]);
+    if (!provider || !binding) {
+        return _jsx(_Fragment, {});
+    }
+    return (_jsx(YjsCollaborationCursors, { awarenessData: awarenessData, binding: binding, collabContext: collabContext, color: color, cursorsContainerRef: cursorsContainerRef, editor: editor, id: id, initialEditorState: initialEditorState, name: name, provider: provider, setDoc: setDoc, shouldBootstrap: shouldBootstrap, docMap: docMap, syncCursorPositionsFn: syncCursorPositionsFn }));
+}
+function YjsCollaborationCursors({ editor, id, provider, docMap, name, color, shouldBootstrap, cursorsContainerRef, initialEditorState, awarenessData, collabContext, binding, setDoc, syncCursorPositionsFn, }) {
+    const cursorsElement = useCollaboration(editor, id, provider, docMap, name, color, shouldBootstrap, binding, setDoc, cursorsContainerRef, initialEditorState, awarenessData, syncCursorPositionsFn);
+    collabContext.clientID = binding.clientID;
+    useHistory(editor, binding);
+    useFocusTracking(editor, provider, name, color, awarenessData);
+    return cursorsElement;
+}

package/lib/collab/yjs/State.d.ts

@@ -0,0 +1,51 @@
+import type { LexicalCommand } from 'lexical';
+import type { Doc, RelativePosition, UndoManager, XmlText } from 'yjs';
+import type { Binding } from './Bindings';
+export type UserState = {
+    anchorPos: RelativePosition | null;
+    color: string;
+    focusing: boolean;
+    focusPos: RelativePosition | null;
+    name: string;
+    awarenessData: object;
+    [key: string]: unknown;
+};
+export declare const CONNECTED_COMMAND: LexicalCommand<boolean>;
+export declare const TOGGLE_CONNECT_COMMAND: LexicalCommand<boolean>;
+export type AwarenessProvider = {
+    getLocalState: () => UserState | null;
+    getStates: () => Map<number, UserState>;
+    off: (type: 'update', cb: () => void) => void;
+    on: (type: 'update', cb: () => void) => void;
+    setLocalState: (userState: UserState) => void;
+    setLocalStateField: (field: string, value: unknown) => void;
+};
+export type Provider = {
+    awareness: AwarenessProvider;
+    connect(): void | Promise<void>;
+    disconnect(): void;
+    off(type: 'sync', cb: (isSynced: boolean) => void): void;
+    off(type: 'update', cb: (update: unknown) => void): void;
+    off(type: 'status', cb: (status: {
+        status: string;
+    }) => void): void;
+    off(type: 'reload', cb: (doc: Doc) => void): void;
+    on(type: 'sync', cb: (isSynced: boolean) => void): void;
+    on(type: 'status', cb: (status: {
+        status: string;
+    }) => void): void;
+    on(type: 'update', cb: (update: unknown) => void): void;
+    on(type: 'reload', cb: (doc: Doc) => void): void;
+};
+export type Operation = {
+    attributes: {
+        __type: string;
+    };
+    insert: string | Record<string, unknown>;
+};
+export type Delta = Array<Operation>;
+export type YjsNode = Record<string, unknown>;
+export type YjsEvent = Record<string, unknown>;
+export declare function createUndoManager(binding: Binding, root: XmlText): UndoManager;
+export declare function initLocalState(provider: Provider, name: string, color: string, focusing: boolean, awarenessData: object): void;
+export declare function setLocalStateFocus(provider: Provider, name: string, color: string, focusing: boolean, awarenessData: object): void;

package/lib/collab/yjs/State.js

@@ -0,0 +1,35 @@
+import { createCommand } from 'lexical';
+import { UndoManager as YjsUndoManager } from 'yjs';
+export const CONNECTED_COMMAND = createCommand('CONNECTED_COMMAND');
+export const TOGGLE_CONNECT_COMMAND = createCommand('TOGGLE_CONNECT_COMMAND');
+export function createUndoManager(binding, root) {
+    return new YjsUndoManager(root, {
+        trackedOrigins: new Set([binding, null]),
+    });
+}
+export function initLocalState(provider, name, color, focusing, awarenessData) {
+    provider.awareness.setLocalState({
+        anchorPos: null,
+        awarenessData,
+        color,
+        focusPos: null,
+        focusing,
+        name,
+    });
+}
+export function setLocalStateFocus(provider, name, color, focusing, awarenessData) {
+    const { awareness } = provider;
+    let localState = awareness.getLocalState();
+    if (localState === null) {
+        localState = {
+            anchorPos: null,
+            awarenessData,
+            color,
+            focusPos: null,
+            focusing: focusing,
+            name,
+        };
+    }
+    localState.focusing = focusing;
+    awareness.setLocalState(localState);
+}

package/lib/collab/yjs/nodes/AnyCollabNode.d.ts

@@ -0,0 +1,5 @@
+import { CollabDecoratorNode } from "./CollabDecoratorNode";
+import { CollabElementNode } from "./CollabElementNode";
+import { CollabLineBreakNode } from "./CollabLineBreakNode";
+import { CollabTextNode } from "./CollabTextNode";
+export type AnyCollabNode = CollabDecoratorNode | CollabElementNode | CollabTextNode | CollabLineBreakNode;

package/lib/collab/yjs/nodes/AnyCollabNode.js

@@ -0,0 +1 @@
+export {};

package/lib/collab/yjs/nodes/CollabDecoratorNode.d.ts

@@ -0,0 +1,22 @@
+import type { XmlElement } from 'yjs';
+import type { DecoratorNode, NodeKey, NodeMap } from 'lexical';
+import type { Binding } from '../Bindings';
+import type { CollabElementNode } from './CollabElementNode';
+export declare class CollabDecoratorNode {
+    _xmlElem: XmlElement;
+    _key: NodeKey;
+    _parent: CollabElementNode;
+    _type: string;
+    constructor(xmlElem: XmlElement, parent: CollabElementNode, type: string);
+    getPrevNode(nodeMap: null | NodeMap): null | DecoratorNode<unknown>;
+    getNode(): null | DecoratorNode<unknown>;
+    getSharedType(): XmlElement;
+    getType(): string;
+    getKey(): NodeKey;
+    getSize(): number;
+    getOffset(): number;
+    syncPropertiesFromLexical(binding: Binding, nextLexicalNode: DecoratorNode<unknown>, prevNodeMap: null | NodeMap): void;
+    syncPropertiesFromYjs(binding: Binding, keysChanged: null | Set<string>): void;
+    destroy(binding: Binding): void;
+}
+export declare function $createCollabDecoratorNode(xmlElem: XmlElement, parent: CollabElementNode, type: string): CollabDecoratorNode;

package/lib/collab/yjs/nodes/CollabDecoratorNode.js

@@ -0,0 +1,64 @@
+import { $getNodeByKey, $isDecoratorNode } from 'lexical';
+import invariant from '../../utils/invariant';
+import { $syncPropertiesFromYjs, syncPropertiesFromLexical } from '../utils/Utils';
+export class CollabDecoratorNode {
+    _xmlElem;
+    _key;
+    _parent;
+    _type;
+    constructor(xmlElem, parent, type) {
+        this._key = '';
+        this._xmlElem = xmlElem;
+        this._parent = parent;
+        this._type = type;
+    }
+    getPrevNode(nodeMap) {
+        if (nodeMap === null) {
+            return null;
+        }
+        const node = nodeMap.get(this._key);
+        return $isDecoratorNode(node) ? node : null;
+    }
+    getNode() {
+        const node = $getNodeByKey(this._key);
+        return $isDecoratorNode(node) ? node : null;
+    }
+    getSharedType() {
+        return this._xmlElem;
+    }
+    getType() {
+        return this._type;
+    }
+    getKey() {
+        return this._key;
+    }
+    getSize() {
+        return 1;
+    }
+    getOffset() {
+        const collabElementNode = this._parent;
+        return collabElementNode.getChildOffset(this);
+    }
+    syncPropertiesFromLexical(binding, nextLexicalNode, prevNodeMap) {
+        const prevLexicalNode = this.getPrevNode(prevNodeMap);
+        const xmlElem = this._xmlElem;
+        syncPropertiesFromLexical(binding, xmlElem, prevLexicalNode, nextLexicalNode);
+    }
+    syncPropertiesFromYjs(binding, keysChanged) {
+        const lexicalNode = this.getNode();
+        invariant(lexicalNode !== null, 'syncPropertiesFromYjs: could not find decorator node');
+        const xmlElem = this._xmlElem;
+        $syncPropertiesFromYjs(binding, xmlElem, lexicalNode, keysChanged);
+    }
+    destroy(binding) {
+        const collabNodeMap = binding.collabNodeMap;
+        if (collabNodeMap.get(this._key) === this) {
+            collabNodeMap.delete(this._key);
+        }
+    }
+}
+export function $createCollabDecoratorNode(xmlElem, parent, type) {
+    const collabNode = new CollabDecoratorNode(xmlElem, parent, type);
+    xmlElem._collabNode = collabNode;
+    return collabNode;
+}

package/lib/collab/yjs/nodes/CollabElementNode.d.ts

@@ -0,0 +1,40 @@
+import type { ElementNode, NodeKey, NodeMap } from 'lexical';
+import type { AbstractType, XmlText } from 'yjs';
+import type { Binding } from '../Bindings';
+import { AnyCollabNode } from './AnyCollabNode';
+type IntentionallyMarkedAsDirtyElement = boolean;
+export declare class CollabElementNode {
+    _key: NodeKey;
+    _children: Array<AnyCollabNode>;
+    _xmlText: XmlText;
+    _type: string;
+    _parent: null | CollabElementNode;
+    constructor(xmlText: XmlText, parent: null | CollabElementNode, type: string);
+    getPrevNode(nodeMap: null | NodeMap): null | ElementNode;
+    getNode(): null | ElementNode;
+    getSharedType(): XmlText;
+    getType(): string;
+    getKey(): NodeKey;
+    isEmpty(): boolean;
+    getSize(): number;
+    getOffset(): number;
+    syncPropertiesFromYjs(binding: Binding, keysChanged: null | Set<string>): void;
+    applyChildrenYjsDelta(binding: Binding, deltas: Array<{
+        insert?: string | object | AbstractType<unknown>;
+        delete?: number;
+        retain?: number;
+        attributes?: {
+            [x: string]: unknown;
+        };
+    }>): void;
+    syncChildrenFromYjs(binding: Binding): void;
+    syncPropertiesFromLexical(binding: Binding, nextLexicalNode: ElementNode, prevNodeMap: null | NodeMap): void;
+    _syncChildFromLexical(binding: Binding, index: number, key: NodeKey, prevNodeMap: null | NodeMap, dirtyElements: null | Map<NodeKey, IntentionallyMarkedAsDirtyElement>, dirtyLeaves: null | Set<NodeKey>): void;
+    syncChildrenFromLexical(binding: Binding, nextLexicalNode: ElementNode, prevNodeMap: null | NodeMap, dirtyElements: null | Map<NodeKey, IntentionallyMarkedAsDirtyElement>, dirtyLeaves: null | Set<NodeKey>): void;
+    append(collabNode: AnyCollabNode): void;
+    splice(binding: Binding, index: number, delCount: number, collabNode?: AnyCollabNode): void;
+    getChildOffset(collabNode: AnyCollabNode): number;
+    destroy(binding: Binding): void;
+}
+export declare function $createCollabElementNode(xmlText: XmlText, parent: null | CollabElementNode, type: string): CollabElementNode;
+export {};