@datalayer/lexical-loro 0.2.3 → 0.2.5

package/lib/collab/loro/propagators/DecoratorNodePropagator.js

@@ -0,0 +1,306 @@
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the MIT License.
+ */
+import { DecoratorNode, $isDecoratorNode } from 'lexical';
+import { getNodeMapper } from '../nodes/NodesMapper';
+/**
+ * Create DecoratorNode in Loro tree
+ */
+export function createDecoratorNodeInLoro(nodeKey, decoratorType, // 'image', 'video', 'tweet', 'chart', etc.
+decoratorData, // The data needed to render the decorator
+parentId, index, metadata, lexicalNodeJSON, // JSON object from exportJSON()
+options) {
+    const mapper = getNodeMapper();
+    // Use mapper to get or create the tree node (don't pass lexicalNode to avoid context issues)
+    const treeNode = mapper.getLoroNodeByLexicalKey(nodeKey, undefined, // don't pass lexicalNode to avoid context issues
+    parentId, index);
+    // Store complete lexical node data as clean JSON if provided
+    if (lexicalNodeJSON) {
+        // Store complete lexical JSON without all key-related fields and children
+        const { key, __key, lexicalKey, children, ...cleanedData } = lexicalNodeJSON;
+        treeNode.data.set('lexical', cleanedData);
+    }
+    // Store only essential metadata
+    treeNode.data.set('elementType', 'decorator');
+    treeNode.data.set('createdAt', Date.now());
+    // The exported Lexical node data is already propagated by the mapper
+    // Return the TreeID from the node's ID
+    return treeNode.id;
+}
+/**
+ * Update DecoratorNode in Loro tree
+ */
+export function updateDecoratorNodeInLoro(nodeKey, decoratorType, decoratorData, parentId, index, metadata, lexicalNodeJSON, // JSON object from exportJSON()
+options) {
+    const mapper = getNodeMapper();
+    // Get the existing Loro node from the mapper
+    const treeNode = mapper.getLoroNodeByLexicalKey(nodeKey, undefined);
+    if (!treeNode) {
+        return;
+    }
+    const { tree } = options;
+    const treeId = treeNode.id;
+    // Store complete lexical node data as clean JSON if provided
+    if (lexicalNodeJSON) {
+        // Store complete lexical JSON without all key-related fields and children
+        const { key, __key, lexicalKey, children, ...cleanedData } = lexicalNodeJSON;
+        treeNode.data.set('lexical', cleanedData);
+    }
+    // All decorator information is now contained in lexical data object
+    // Move the node if parent or position changed
+    if (parentId !== undefined || index !== undefined) {
+        tree.move(treeId, parentId, index);
+    }
+    // Update only essential metadata
+    treeNode.data.set('elementType', 'decorator');
+    treeNode.data.set('lastUpdated', Date.now());
+}
+/**
+ * Delete DecoratorNode from Loro tree
+ */
+export function deleteDecoratorNodeInLoro(nodeKey, options) {
+    const mapper = getNodeMapper();
+    // Use the mapper's delete method which propagates TreeID lookup internally
+    mapper.deleteMapping(nodeKey);
+}
+/**
+ * Create DecoratorNode in Lexical from Loro tree data
+ * Note: This is a generic implementation. In practice, you'd need
+ * specific decorator node classes for each type (ImageNode, VideoNode, etc.)
+ */
+export function createDecoratorNodeFromLoro(treeId, parentNode, index, options) {
+    const { tree } = options;
+    if (!tree.has(treeId)) {
+        return null;
+    }
+    const treeNode = tree.getNodeByID(treeId);
+    if (!treeNode) {
+        return null;
+    }
+    // Get LexicalNodeData (JSON object format only)
+    const lexicalData = treeNode.data.get('lexical');
+    let decoratorNode;
+    if (lexicalData && typeof lexicalData === 'object') {
+        // For DecoratorNode, we need to propagate this case appropriately
+        // But DecoratorNodes are complex and might need special handling
+        console.warn(`DecoratorNode creation from JSON object not fully implemented for TreeID: ${treeId}`);
+        return null;
+    }
+    else {
+        // No lexical JSON data found - cannot create DecoratorNode
+        console.warn('No lexical JSON data found for DecoratorNode TreeID:', treeId);
+        return null;
+    }
+    // Insert into the parent at the specified index
+    if (index !== undefined && index >= 0) {
+        parentNode.splice(index, 0, [decoratorNode]);
+    }
+    else {
+        parentNode.append(decoratorNode);
+    }
+    return decoratorNode;
+}
+/**
+ * Update DecoratorNode in Lexical from Loro tree data
+ */
+export function updateDecoratorNodeFromLoro(treeId, lexicalNode, newParentNode, newIndex, options) {
+    const { tree } = options;
+    if (!tree.has(treeId)) {
+        return;
+    }
+    const treeNode = tree.getNodeByID(treeId);
+    if (!treeNode || treeNode.data.get('nodeType') !== 'decorator') {
+        return;
+    }
+    // Update decorator data if it has changed
+    const decoratorDataStr = treeNode.data.get('decoratorData');
+    let decoratorData;
+    try {
+        decoratorData = decoratorDataStr && typeof decoratorDataStr === 'string'
+            ? JSON.parse(decoratorDataStr) : {};
+    }
+    catch (error) {
+        console.warn('Failed to parse decorator data:', error);
+        decoratorData = {};
+    }
+    // Update the decorator's data (implementation depends on the specific decorator type)
+    if (typeof lexicalNode.updateData === 'function') {
+        lexicalNode.updateData(decoratorData);
+    }
+    // If parent or position changed, move the node
+    if (newParentNode && newIndex !== undefined) {
+        // Remove from current location
+        lexicalNode.remove();
+        // Insert at new location
+        newParentNode.splice(newIndex, 0, [lexicalNode]);
+    }
+}
+/**
+ * Delete DecoratorNode from Lexical
+ */
+export function deleteDecoratorNodeFromLoro(treeId, lexicalNode, options) {
+    if ($isDecoratorNode(lexicalNode)) {
+        lexicalNode.remove();
+    }
+}
+/**
+ * Utility to check if a tree node represents a DecoratorNode
+ */
+export function isDecoratorNodeInTree(treeId, tree) {
+    if (!tree.has(treeId)) {
+        return false;
+    }
+    const treeNode = tree.getNodeByID(treeId);
+    return treeNode?.data.get('nodeType') === 'decorator';
+}
+/**
+ * Get DecoratorNode data from Loro tree
+ */
+export function getDecoratorNodeDataFromTree(treeId, tree) {
+    if (!tree.has(treeId)) {
+        return null;
+    }
+    const treeNode = tree.getNodeByID(treeId);
+    if (!treeNode || treeNode.data.get('nodeType') !== 'decorator') {
+        return null;
+    }
+    const decoratorDataStr = treeNode.data.get('decoratorData');
+    let decoratorData;
+    try {
+        decoratorData = decoratorDataStr && typeof decoratorDataStr === 'string'
+            ? JSON.parse(decoratorDataStr) : {};
+    }
+    catch (error) {
+        console.warn('Failed to parse decorator data:', error);
+        decoratorData = {};
+    }
+    return {
+        nodeType: 'decorator',
+        decoratorType: treeNode.data.get('decoratorType'),
+        decoratorData,
+        createdAt: treeNode.data.get('createdAt'),
+        lastUpdated: treeNode.data.get('lastUpdated'),
+    };
+}
+/**
+ * Generic DecoratorNode implementation for demonstration purposes
+ * In a real application, you'd have specific decorator node classes
+ */
+class GenericDecoratorNode extends DecoratorNode {
+    __decoratorType;
+    __decoratorData;
+    constructor(decoratorType, decoratorData, key) {
+        super(key);
+        this.__decoratorType = decoratorType;
+        this.__decoratorData = decoratorData;
+    }
+    static getType() {
+        return 'generic-decorator';
+    }
+    static clone(node) {
+        return new GenericDecoratorNode(node.__decoratorType, node.__decoratorData, node.__key);
+    }
+    createDOM() {
+        const div = document.createElement('div');
+        div.className = `decorator-${this.__decoratorType}`;
+        div.textContent = `[${this.__decoratorType}]`;
+        return div;
+    }
+    updateDOM() {
+        return false;
+    }
+    decorate() {
+        return {
+            type: this.__decoratorType,
+            data: this.__decoratorData,
+        };
+    }
+    isInline() {
+        return false;
+    }
+    updateData(newData) {
+        const writable = this.getWritable();
+        writable.__decoratorData = newData;
+    }
+}
+/**
+ * Main propagate method for DecoratorNode - propagates all mutation types
+ */
+export function propagateDecoratorNode(update, mutation, nodeKey, options) {
+    const { tree, peerId } = options;
+    switch (mutation) {
+        case 'created': {
+            const currentNode = update.editorState._nodeMap.get(nodeKey);
+            if (currentNode && $isDecoratorNode(currentNode)) {
+                // Get node data using editor state context
+                const { parentId, index, decoratorType, decoratorData, metadata, lexicalNodeJSON } = update.editorState.read(() => {
+                    // Get parent and index for proper positioning
+                    const parent = currentNode.getParent();
+                    // Get parentId from the mapper instead of constructing it manually
+                    const mapper = getNodeMapper();
+                    const parentId = parent ? mapper.getTreeIDByLexicalKey(parent.getKey()) : undefined;
+                    const index = currentNode.getIndexWithinParent();
+                    // Get decorator type and data
+                    const decoratorType = currentNode.getType();
+                    // For DecoratorNode, we'll store the node's internal data instead of calling decorate
+                    const decoratorData = currentNode.__decoratorData || {};
+                    // Collect additional metadata
+                    const metadata = {};
+                    if (typeof currentNode.isInline === 'function') {
+                        metadata.isInline = currentNode.isInline();
+                    }
+                    // Export node data within editor context where node methods are available
+                    let lexicalNodeJSON = undefined;
+                    try {
+                        lexicalNodeJSON = currentNode.exportJSON();
+                    }
+                    catch (error) {
+                        console.warn('Failed to export node data in propagateDecoratorNode created:', error);
+                    }
+                    return { parentId, index, decoratorType, decoratorData, metadata, lexicalNodeJSON };
+                });
+                createDecoratorNodeInLoro(nodeKey, decoratorType, decoratorData, parentId, index, metadata, lexicalNodeJSON, options);
+            }
+            break;
+        }
+        case 'updated': {
+            const currentNode = update.editorState._nodeMap.get(nodeKey);
+            if (currentNode && $isDecoratorNode(currentNode)) {
+                // Get node data using editor state context
+                const { parentId, index, decoratorType, decoratorData, metadata, lexicalNodeJSON } = update.editorState.read(() => {
+                    // Get current position
+                    const parent = currentNode.getParent();
+                    // Get parentId from the mapper instead of constructing it manually
+                    const mapper = getNodeMapper();
+                    const parentId = parent ? mapper.getTreeIDByLexicalKey(parent.getKey()) : undefined;
+                    const index = currentNode.getIndexWithinParent();
+                    // Get updated decorator type and data
+                    const decoratorType = currentNode.getType();
+                    // For DecoratorNode, we'll store the node's internal data instead of calling decorate
+                    const decoratorData = currentNode.__decoratorData || {};
+                    // Collect metadata
+                    const metadata = {};
+                    if (typeof currentNode.isInline === 'function') {
+                        metadata.isInline = currentNode.isInline();
+                    }
+                    // Export node data within editor context where node methods are available
+                    let lexicalNodeJSON = undefined;
+                    try {
+                        lexicalNodeJSON = currentNode.exportJSON();
+                    }
+                    catch (error) {
+                        console.warn('Failed to export node data in propagateDecoratorNode updated:', error);
+                    }
+                    return { parentId, index, decoratorType, decoratorData, metadata, lexicalNodeJSON };
+                });
+                updateDecoratorNodeInLoro(nodeKey, decoratorType, decoratorData, parentId, index, metadata, lexicalNodeJSON, options);
+            }
+            break;
+        }
+        case 'destroyed': {
+            deleteDecoratorNodeInLoro(nodeKey, options);
+            break;
+        }
+    }
+}

package/lib/collab/loro/propagators/ElementNodePropagator.d.ts

@@ -0,0 +1,62 @@
+import { TreeID, LoroTree } from 'loro-crdt';
+import { ElementNode, UpdateListenerPayload, NodeKey } from 'lexical';
+import { Binding } from '../Bindings';
+/**
+ * ElementNode Propagator for Loro Tree Collaboration
+ *
+ * ElementNode characteristics:
+ * - Parent nodes that can contain other nodes (including other ElementNodes)
+ * - Examples: ParagraphNode, HeadingNode, QuoteNode, LinkNode, etc.
+ * - Can have formatting (bold, italic, etc.) and styles
+ * - Can have children and maintain parent/child relationships
+ * - Can be extended to create custom element types
+ */
+export interface ElementNodeMutatorOptions {
+    binding: Binding;
+    tree: LoroTree;
+    peerId: number;
+}
+/**
+ * Create ElementNode in Loro tree
+ */
+export declare function createElementNodeInLoro(nodeKey: NodeKey, elementType: string, // 'paragraph', 'heading', 'quote', 'link', etc.
+parentId?: TreeID, index?: number, metadata?: Record<string, any>, lexicalNodeJSON?: any, // JSON object from exportJSON()
+options?: ElementNodeMutatorOptions): TreeID;
+/**
+ * Update ElementNode in Loro tree
+ */
+export declare function updateElementNodeInLoro(nodeKey: NodeKey, elementType?: string, parentId?: TreeID, index?: number, metadata?: Record<string, any>, lexicalNodeJSON?: any, // JSON object from exportJSON()
+options?: ElementNodeMutatorOptions): void;
+/**
+ * Delete ElementNode from Loro tree
+ */
+export declare function deleteElementNodeInLoro(nodeKey: NodeKey, options: ElementNodeMutatorOptions): void;
+/**
+ * Create ElementNode in Lexical from Loro tree data
+ */
+export declare function createElementNodeFromLoro(treeId: TreeID, parentNode: ElementNode, // The Lexical parent node where this should be inserted
+index?: number, options?: ElementNodeMutatorOptions): ElementNode | null;
+/**
+ * Update ElementNode in Lexical from Loro tree data
+ */
+export declare function updateElementNodeFromLoro(treeId: TreeID, lexicalNode: ElementNode, newParentNode?: ElementNode, newIndex?: number, options?: ElementNodeMutatorOptions): void;
+/**
+ * Delete ElementNode from Lexical
+ */
+export declare function deleteElementNodeFromLoro(treeId: TreeID, lexicalNode: ElementNode, options?: ElementNodeMutatorOptions): void;
+/**
+ * Utility to check if a tree node represents an ElementNode
+ */
+export declare function isElementNodeInTree(treeId: TreeID, tree: LoroTree): boolean;
+/**
+ * Get ElementNode data from Loro tree
+ */
+export declare function getElementNodeDataFromTree(treeId: TreeID, tree: LoroTree): any;
+/**
+ * Sync ElementNode children relationships in Loro tree
+ */
+export declare function syncElementNodeChildrenInLoro(nodeKey: NodeKey, childKeys: string[], options: ElementNodeMutatorOptions): void;
+/**
+ * Main propagate method for ElementNode - propagates all mutation types
+ */
+export declare function propagateElementNode(update: UpdateListenerPayload, mutation: 'created' | 'updated' | 'destroyed', nodeKey: NodeKey, options: ElementNodeMutatorOptions): void;