@datalayer/lexical-loro 1.0.3 → 1.0.5

package/README.md

@@ -291,10 +291,10 @@ For complete working examples and demonstrations, see the `src/examples/` direct
 ```bash
 # Run the example application
 npm install
-npm run example
+make example
 
 # This starts both Node.js and Python servers plus a React demo app
-# Open http://localhost:5173 to see dual editor interface
+# Open http://localhost:3000/split/index.html to see the 2 editors view
 ```
 
 The examples include:

package/lib/Editor.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 /*
- * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Copyright (c) 2025-2026 Datalayer, Inc.
  * Distributed under the terms of the MIT License.
  */
 import { useEffect, useState } from 'react';
@@ -89,6 +89,7 @@ export default function Editor() {
     const [floatingAnchorElem, setFloatingAnchorElem] = useState(null);
     const [isSmallWidthViewport, setIsSmallWidthViewport] = useState(false);
     const [editor] = useLexicalComposerContext();
+    const collabId = new URLSearchParams(window.location.search).get('collabId') || 'main';
     const [activeEditor, setActiveEditor] = useState(editor);
     const [isLinkEditMode, setIsLinkEditMode] = useState(false);
     const onRef = (_floatingAnchorElem) => {
@@ -110,6 +111,6 @@ export default function Editor() {
         };
     }, [isSmallWidthViewport]);
     return (_jsxs(_Fragment, { children: [isRichText && (_jsx(ToolbarPlugin, { editor: editor, activeEditor: activeEditor, setActiveEditor: setActiveEditor, setIsLinkEditMode: setIsLinkEditMode })), isRichText && (_jsx(ShortcutsPlugin, { editor: activeEditor, setIsLinkEditMode: setIsLinkEditMode })), _jsxs("div", { className: `editor-container ${showTreeView ? 'tree-view' : ''} ${!isRichText ? 'plain-text' : ''}`, children: [isMaxLength && _jsx(MaxLengthPlugin, { maxLength: 30 }), _jsx(DragDropPaste, {}), _jsx(DebugPlugin, {}), _jsx(AutoFocusPlugin, {}), selectionAlwaysOnDisplay && _jsx(SelectionAlwaysOnDisplay, {}), _jsx(ClearEditorPlugin, {}), _jsx(ComponentPickerPlugin, {}), _jsx(EmojiPickerPlugin, {}), _jsx(AutoEmbedPlugin, {}), _jsx(MentionsPlugin, {}), _jsx(EmojisPlugin, {}), _jsx(HashtagPlugin, {}), _jsx(KeywordsPlugin, {}), _jsx(SpeechToTextPlugin, {}), _jsx(AutoLinkPlugin, {}), _jsx(DateTimePlugin, {}), useYjs &&
-                        _jsx(CommentPlugin, { providerFactory: isCollab ? createYjsWebsocketProvider : undefined }), isRichText ? (_jsxs(_Fragment, { children: [isCollab ? (useYjs ? (_jsx(YjsCollaborationPlugin, { id: "main", providerFactory: createYjsWebsocketProvider, shouldBootstrap: !skipCollaborationInit })) : (_jsx(LoroCollaborationPlugin, { id: "main", showCollaborators: true, providerFactory: createLoroWebsocketProvider, shouldBootstrap: !skipCollaborationInit }))) : (_jsx(HistoryPlugin, { externalHistoryState: historyState })), _jsx(RichTextPlugin, { contentEditable: _jsx("div", { className: "editor-scroller", children: _jsx("div", { className: "editor", ref: onRef, children: _jsx(ContentEditable, { placeholder: placeholder }) }) }), ErrorBoundary: LexicalErrorBoundary }), _jsx(MarkdownShortcutPlugin, {}), isCodeHighlighted &&
+                        _jsx(CommentPlugin, { providerFactory: isCollab ? createYjsWebsocketProvider : undefined }), isRichText ? (_jsxs(_Fragment, { children: [isCollab ? (useYjs ? (_jsx(YjsCollaborationPlugin, { id: collabId, providerFactory: createYjsWebsocketProvider, shouldBootstrap: !skipCollaborationInit })) : (_jsx(LoroCollaborationPlugin, { id: collabId, showCollaborators: true, providerFactory: createLoroWebsocketProvider, shouldBootstrap: !skipCollaborationInit }))) : (_jsx(HistoryPlugin, { externalHistoryState: historyState })), _jsx(RichTextPlugin, { contentEditable: _jsx("div", { className: "editor-scroller", children: _jsx("div", { className: "editor", ref: onRef, children: _jsx(ContentEditable, { placeholder: placeholder }) }) }), ErrorBoundary: LexicalErrorBoundary }), _jsx(MarkdownShortcutPlugin, {}), isCodeHighlighted &&
                                 (isCodeShiki ? (_jsx(CodeHighlightShikiPlugin, {})) : (_jsx(CodeHighlightPrismPlugin, {}))), _jsx(ListPlugin, { hasStrictIndent: listStrictIndent }), _jsx(CheckListPlugin, {}), _jsx(TablePlugin, { hasCellMerge: tableCellMerge, hasCellBackgroundColor: tableCellBackgroundColor, hasHorizontalScroll: tableHorizontalScroll }), _jsx(TableCellResizer, {}), _jsx(ImagesPlugin, {}), _jsx(InlineImagePlugin, {}), _jsx(LinkPlugin, { hasLinkAttributes: hasLinkAttributes }), _jsx(PollPlugin, {}), _jsx(TwitterPlugin, {}), _jsx(YouTubePlugin, {}), _jsx(FigmaPlugin, {}), _jsx(ClickableLinkPlugin, { disabled: isEditable }), _jsx(HorizontalRulePlugin, {}), _jsx(EquationsPlugin, {}), _jsx(ExcalidrawPlugin, {}), _jsx(TabFocusPlugin, {}), _jsx(TabIndentationPlugin, { maxIndent: 7 }), _jsx(CollapsiblePlugin, {}), _jsx(CounterPlugin, {}), _jsx(PageBreakPlugin, {}), _jsx(LayoutPlugin, {}), floatingAnchorElem && (_jsxs(_Fragment, { children: [_jsx(FloatingLinkEditorPlugin, { anchorElem: floatingAnchorElem, isLinkEditMode: isLinkEditMode, setIsLinkEditMode: setIsLinkEditMode }), _jsx(TableCellActionMenuPlugin, { anchorElem: floatingAnchorElem, cellMerge: true })] })), floatingAnchorElem && !isSmallWidthViewport && (_jsxs(_Fragment, { children: [_jsx(DraggableBlockPlugin, { anchorElem: floatingAnchorElem }), _jsx(CodeActionMenuPlugin, { anchorElem: floatingAnchorElem }), _jsx(TableHoverActionsPlugin, { anchorElem: floatingAnchorElem }), _jsx(FloatingTextFormatToolbarPlugin, { anchorElem: floatingAnchorElem, setIsLinkEditMode: setIsLinkEditMode })] }))] })) : (_jsxs(_Fragment, { children: [_jsx(PlainTextPlugin, { contentEditable: _jsx(ContentEditable, { placeholder: placeholder }), ErrorBoundary: LexicalErrorBoundary }), _jsx(HistoryPlugin, { externalHistoryState: historyState })] })), (isCharLimit || isCharLimitUtf8) && (_jsx(CharacterLimitPlugin, { charset: isCharLimit ? 'UTF-16' : 'UTF-8', maxLength: 5 })), isAutocomplete && _jsx(AutocompletePlugin, {}), _jsx("div", { children: showTableOfContents && _jsx(TableOfContentsPlugin, {}) }), shouldUseLexicalContextMenu && _jsx(ContextMenuPlugin, {}), shouldAllowHighlightingWithBrackets && _jsx(SpecialTextPlugin, {}), _jsx(ActionsPlugin, { isRichText: isRichText, shouldPreserveNewLinesInMarkdown: shouldPreserveNewLinesInMarkdown })] }), showTreeView && _jsx(TreeViewPlugin, {})] }));
 }

package/lib/appSettings.js

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Copyright (c) 2025-2026 Datalayer, Inc.
  * Distributed under the terms of the MIT License.
  */
 const hostName = window.location.hostname;

package/lib/collab/loro/Bindings.js

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Copyright (c) 2025-2026 Datalayer, Inc.
  * Distributed under the terms of the MIT License.
  */
 import invariant from '../utils/invariant';
@@ -11,9 +11,9 @@ export function createBinding(editor, provider, id, doc, docMap, excludedPropert
     invariant(doc !== undefined && doc !== null, 'createBinding: doc is null or undefined');
     // Initialize the tree - content will come from server snapshot via sync
     const tree = getLoroTree(doc);
-    console.log('📄 Loro tree initialized, content will be populated via server sync');
+    console.log(' Loro tree initialized, content will be populated via server sync');
     const clientID = generateClientID(doc);
-    console.log('🏗️ BINDING DEBUG - Creating binding:', {
+    console.log('- Creating binding:', {
         bindingId: id,
         localPeerId: doc.peerId,
         generatedClientID: clientID,
@@ -41,7 +41,7 @@ export function createBinding(editor, provider, id, doc, docMap, excludedPropert
     // Setup debugging utilities only if debug is enabled via URL parameter
     if (isDebugEnabled()) {
         setupLoroDebugging(binding);
-        console.log('🐛 Loro debugging enabled via ?debug=true URL parameter');
+        console.log(' Loro debugging enabled via ?debug=true URL parameter');
     }
     return binding;
 }
@@ -65,10 +65,10 @@ export function scheduleAsyncCommit(binding, delay = 500) {
             try {
                 // Perform the actual commit
                 binding.doc.commit({ origin: binding.doc.peerIdStr });
-                console.log('🔄 Async commit completed for binding:', binding.id);
+                console.log(' Async commit completed for binding:', binding.id);
             }
             catch (error) {
-                console.error('❌ Async commit failed for binding:', binding.id, error);
+                console.error(' Async commit failed for binding:', binding.id, error);
             }
             // Reset pending state
             binding.pendingCommit = false;
@@ -90,7 +90,7 @@ export function flushPendingCommit(binding) {
     if (binding.pendingCommit) {
         binding.doc.commit({ origin: binding.doc.peerIdStr });
         binding.pendingCommit = false;
-        console.log('🔄 Forced commit completed for binding:', binding.id);
+        console.log(' Forced commit completed for binding:', binding.id);
     }
 }
 // Export components

package/lib/collab/loro/Debug.js

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Copyright (c) 2025-2026 Datalayer, Inc.
  * Distributed under the terms of the MIT License.
  */
 /**
@@ -45,7 +45,7 @@ export function setupLoroDebugging(binding) {
                 console.log(`Root nodes: ${rootNodes.length}`);
                 console.log('');
                 if (rootNodes.length === 0) {
-                    console.log('⚠️  No root nodes found!');
+                    console.log('  No root nodes found!');
                 }
                 else {
                     rootNodes.forEach((root, index) => {
@@ -62,8 +62,8 @@ export function setupLoroDebugging(binding) {
         verifyStructure: () => {
             const binding = window.debugLoro.binding;
             if (!binding)
-                return console.log('❌ Loro Binding not available');
-            console.log('🔍 LORO TREE VERIFICATION:');
+                return console.log(' Loro Binding not available');
+            console.log(' LORO TREE VERIFICATION:');
             const tree = binding.tree;
             const nodes = tree.nodes();
             console.log('Total nodes:', nodes.length);
@@ -71,13 +71,13 @@ export function setupLoroDebugging(binding) {
             console.log('Client ID:', binding.clientID);
             // Check mapping consistency
             const mapper = binding.nodeMapper;
-            console.log('\n📍 Node Mappings:');
+            console.log('\n Node Mappings:');
             nodes.forEach((node, index) => {
                 const data = Object.fromEntries(node.data.entries());
                 const treeId = node.id;
                 // Get lexical key from mapper instead of node data
                 const lexicalKey = binding.nodeMapper?.getLexicalKeyByLoroId(treeId) || 'no-key';
-                console.log(`\n📍 Node ${index}:`);
+                console.log(`\n Node ${index}:`);
                 console.log('  TreeID:', treeId);
                 console.log('  Lexical Key:', lexicalKey);
                 console.log('  Element Type:', data.elementType || 'N/A');
@@ -104,7 +104,7 @@ export function setupLoroDebugging(binding) {
                 return !parent && !data.isRoot;
             });
             if (orphanedNodes.length > 0) {
-                console.log('\n⚠️  WARNING: Found orphaned nodes (no parent, not root):');
+                console.log('\n  WARNING: Found orphaned nodes (no parent, not root):');
                 orphanedNodes.forEach(node => {
                     const data = Object.fromEntries(node.data.entries());
                     const lexicalKey = binding.nodeMapper?.getLexicalKeyByLoroId(node.id) || 'no-key';
@@ -112,7 +112,7 @@ export function setupLoroDebugging(binding) {
                 });
             }
             // Show parent-child relationships
-            console.log('\n🌳 Parent-Child Relationships:');
+            console.log('\n Parent-Child Relationships:');
             nodes.forEach(node => {
                 const data = Object.fromEntries(node.data.entries());
                 const parent = node.parent();
@@ -143,7 +143,7 @@ export function setupLoroDebugging(binding) {
                 });
                 // Get lexical key from mapper instead of node data
                 const lexicalKey = binding.nodeMapper?.getLexicalKeyByLoroId(node.id) || 'no-key';
-                console.log('🔍 Loro Node Details:', {
+                console.log(' Loro Node Details:', {
                     treeId: node.id,
                     lexicalKey: lexicalKey,
                     elementType: data.elementType,
@@ -155,24 +155,24 @@ export function setupLoroDebugging(binding) {
                 });
                 // Handle different lexical data formats
                 if (Object.keys(lexicalProps).length > 0) {
-                    console.log('📄 Lexical Data (Individual Properties):', lexicalProps);
+                    console.log(' Lexical Data (Individual Properties):', lexicalProps);
                 }
                 else if (data.lexical) {
                     if (typeof data.lexical === 'object') {
-                        console.log('📄 Lexical Data (Current JSON Object):', data.lexical);
+                        console.log(' Lexical Data (Current JSON Object):', data.lexical);
                     }
                     else if (typeof data.lexical === 'string') {
                         try {
                             const lexicalData = JSON.parse(data.lexical);
-                            console.log('📄 Lexical Data (Legacy JSON String):', lexicalData);
+                            console.log(' Lexical Data (Legacy JSON String):', lexicalData);
                         }
                         catch (e) {
-                            console.log('❌ Failed to parse lexical data:', e);
+                            console.log(' Failed to parse lexical data:', e);
                         }
                     }
                 }
                 else {
-                    console.log('⚠️ No lexical data found for this node');
+                    console.log(' No lexical data found for this node');
                 }
                 // Fetch and log the corresponding lexical node
                 if (lexicalKey && lexicalKey !== 'no-key' && typeof lexicalKey === 'string') {
@@ -200,18 +200,18 @@ export function setupLoroDebugging(binding) {
                             return info;
                         });
                         if (nodeInfo) {
-                            console.log('🔗 Linked Lexical Node:', nodeInfo);
+                            console.log(' Linked Lexical Node:', nodeInfo);
                         }
                         else {
-                            console.log('⚠️ No lexical node found in editor state for key:', lexicalKey, '(node may have been deleted or not yet created)');
+                            console.log(' No lexical node found in editor state for key:', lexicalKey, '(node may have been deleted or not yet created)');
                         }
                     }
                     catch (e) {
-                        console.log('❌ Failed to fetch lexical node:', e);
+                        console.log(' Failed to fetch lexical node:', e);
                     }
                 }
                 else {
-                    console.log('⚠️ No valid lexical key found for this Loro node (key:', lexicalKey, ')');
+                    console.log(' No valid lexical key found for this Loro node (key:', lexicalKey, ')');
                 }
             }
             else {
@@ -268,7 +268,7 @@ export function setupLoroDebugging(binding) {
             const tree = binding.tree;
             const nodes = tree.nodes();
             // Debug: log the actual structure to console as a tree
-            console.log('🟢 LORO Tree structure:');
+            console.log(' LORO Tree structure:');
             console.log(`  Total nodes: ${nodes.length}`);
             console.log(`  Peer ID: ${binding.doc.peerIdStr}`);
             console.log(`  Client ID: ${binding.clientID}`);
@@ -299,7 +299,7 @@ export function setupLoroDebugging(binding) {
                 return !parent || data.isRoot;
             });
             if (rootNodes.length === 0) {
-                console.log('  ⚠️  No root nodes found!');
+                console.log('    No root nodes found!');
             }
             else {
                 rootNodes.forEach((root, index) => {
@@ -307,8 +307,8 @@ export function setupLoroDebugging(binding) {
                     logTreeStructure(root, '', isLastRoot, 0);
                 });
             }
-            console.log('🟢 Loro Tree:', tree.toJSON());
-            console.log('🟢 Lexical State:', binding.editor.getEditorState().toJSON());
+            console.log(' Loro Tree:', tree.toJSON());
+            console.log(' Lexical State:', binding.editor.getEditorState().toJSON());
             const treeHTML = window.debugLoro.generateTreeHTML(nodes);
             const debugDiv = document.getElementById('debug-loro') || document.createElement('div');
             const existingDiv = document.getElementById('debug-loro');
@@ -363,7 +363,7 @@ export function setupLoroDebugging(binding) {
             }
             debugDiv.innerHTML = `
         <div class="debug-drag-integrate" style="color: #00ff88; font-weight: bold; margin-bottom: 10px; border-bottom: 1px solid #00ff00; padding: 15px 15px 5px 15px; cursor: move; background: linear-gradient(90deg, rgba(0,255,136,0.1), transparent);">
-          🟢 LORO TREE <span style="float: right; font-size: 9px; color: #666;">⋮⋮ drag</span>
+           LORO TREE <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: #00ffaa; margin-bottom: 8px;">Total nodes: ${nodes.length}</div>
@@ -373,12 +373,12 @@ export function setupLoroDebugging(binding) {
             ${treeHTML}
           </div>
           <div style="margin-top: 10px; font-size: 10px; color: #666;">
-            <span onclick="window.debugLoro.addDebugToPage()" style="color: #00ffaa; cursor: pointer; text-decoration: underline;">🔄 Refresh</span> | 
-            <span onclick="window.debugLoro.verifyStructure()" style="color: #00ff66; cursor: pointer; text-decoration: underline;">✅ Verify</span> | 
-            <span onclick="window.debugLoro.logStructure()" style="color: #00ffdd; cursor: pointer; text-decoration: underline;">📝 Log</span> |
-            <span onclick="window.debugLoro.cleanupEphemeralStore()" style="color: #ffaa00; cursor: pointer; text-decoration: underline;">🧹 Cleanup</span> |
-            <span onclick="window.debugLoro.resetGlobalEphemeralStore()" style="color: #ff6600; cursor: pointer; text-decoration: underline;">🔄 Reset</span> |
-            <span onclick="document.getElementById('debug-loro').remove()" style="color: #ff0066; cursor: pointer; text-decoration: underline;">❌ Close</span>
+            <span onclick="window.debugLoro.addDebugToPage()" style="color: #00ffaa; cursor: pointer; text-decoration: underline;"> Refresh</span> | 
+            <span onclick="window.debugLoro.verifyStructure()" style="color: #00ff66; cursor: pointer; text-decoration: underline;"> Verify</span> | 
+            <span onclick="window.debugLoro.logStructure()" style="color: #00ffdd; cursor: pointer; text-decoration: underline;"> Log</span> |
+            <span onclick="window.debugLoro.cleanupEphemeralStore()" style="color: #ffaa00; cursor: pointer; text-decoration: underline;"> Cleanup</span> |
+            <span onclick="window.debugLoro.resetGlobalEphemeralStore()" style="color: #ff6600; cursor: pointer; text-decoration: underline;"> Reset</span> |
+            <span onclick="document.getElementById('debug-loro').remove()" style="color: #ff0066; cursor: pointer; text-decoration: underline;"> Close</span>
           </div>
         </div>
       `;
@@ -386,27 +386,27 @@ export function setupLoroDebugging(binding) {
         },
         cleanupEphemeralStore: (provider) => {
             if (!provider) {
-                console.log('⚠️ No provider passed. Usage: window.debugLoro.cleanupEphemeralStore(provider)');
+                console.log(' No provider passed. Usage: window.debugLoro.cleanupEphemeralStore(provider)');
                 console.log('You can get the provider from your useCollaboration hook');
                 return;
             }
             if (typeof provider.cleanupStaleStates !== 'function') {
-                console.log('❌ Provider does not have cleanupStaleStates method');
+                console.log(' Provider does not have cleanupStaleStates method');
                 return;
             }
-            console.log('🧹 Cleaning up stale ephemeral states...');
+            console.log(' Cleaning up stale ephemeral states...');
             provider.cleanupStaleStates();
         },
         resetGlobalEphemeralStore: () => {
             try {
                 // We need to access the WebsocketProvider class which may not be globally available
-                console.log('🔄 Attempting to reset global EphemeralStore...');
-                console.log('💡 You can also refresh the browser to clear the global store');
+                console.log(' Attempting to reset global EphemeralStore...');
+                console.log(' You can also refresh the browser to clear the global store');
                 // For now, instruct user to refresh
                 alert('To reset the global ephemeral store and clear all collaborators, please refresh the browser page.');
             }
             catch (error) {
-                console.warn('❌ Reset failed:', error.message);
+                console.warn(' Reset failed:', error.message);
             }
         }
     };

package/lib/collab/loro/LexicalCollaborationContext.js

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Copyright (c) 2025-2026 Datalayer, Inc.
  * Distributed under the terms of the MIT License.
  */
 import { createContext, useContext } from 'react';

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

@@ -19,6 +19,11 @@ type Props = {
     showCollaborators?: boolean;
     websocketUrl?: string;
     onInitialization?: (isInitialized: boolean) => void;
+    onIdentityResolved?: (identity: {
+        name: string;
+        color: string;
+        clientID: number;
+    }) => void;
 };
-export declare function LoroCollaborationPlugin({ id, providerFactory, shouldBootstrap, username, cursorColor, cursorsContainerRef, initialEditorState, excludedProperties, awarenessData, syncCursorPositionsFn, showCollaborators, websocketUrl, onInitialization, }: Props): JSX.Element;
+export declare function LoroCollaborationPlugin({ id, providerFactory, shouldBootstrap, username, cursorColor, cursorsContainerRef, initialEditorState, excludedProperties, awarenessData, syncCursorPositionsFn, showCollaborators, websocketUrl, onInitialization, onIdentityResolved, }: Props): JSX.Element;
 export {};

package/lib/collab/loro/LexicalCollaborationPlugin.js

@@ -5,7 +5,28 @@ import { useCollaborationContext, generateDeterministicUserData, } from './Lexic
 import { updateLocalStateName } from './State';
 import { useCollaboration, useFocusTracking, useHistory, } from './useCollaboration';
 import { createBinding, LoroCollaborationUI } from './Bindings';
-export function LoroCollaborationPlugin({ id, providerFactory, shouldBootstrap, username, cursorColor, cursorsContainerRef, initialEditorState, excludedProperties, awarenessData, syncCursorPositionsFn, showCollaborators = true, websocketUrl = 'ws://localhost:3002', onInitialization, }) {
+function getIdentityField(awarenessData, keys) {
+    if (!awarenessData || typeof awarenessData !== 'object') {
+        return undefined;
+    }
+    const data = awarenessData;
+    const user = data.user;
+    const userRecord = user && typeof user === 'object' ? user : undefined;
+    for (const key of keys) {
+        const direct = data[key];
+        if (typeof direct === 'string' && direct.trim().length > 0) {
+            return direct;
+        }
+        if (userRecord) {
+            const nested = userRecord[key];
+            if (typeof nested === 'string' && nested.trim().length > 0) {
+                return nested;
+            }
+        }
+    }
+    return undefined;
+}
+export function LoroCollaborationPlugin({ id, providerFactory, shouldBootstrap, username, cursorColor, cursorsContainerRef, initialEditorState, excludedProperties, awarenessData, syncCursorPositionsFn, showCollaborators = true, websocketUrl = 'ws://localhost:3002', onInitialization, onIdentityResolved, }) {
     const isBindingInitialized = useRef(false);
     const isProviderInitialized = useRef(false);
     const collabContext = useCollaborationContext(username, cursorColor);
@@ -45,27 +66,34 @@ export function LoroCollaborationPlugin({ id, providerFactory, shouldBootstrap,
         }
         isBindingInitialized.current = true;
         const binding = createBinding(editor, provider, id, doc || docMap.get(id), docMap, excludedProperties);
-        // Update collaboration context with deterministic name based on client ID
-        // This ensures consistent names across browser sessions
         const deterministicUserData = generateDeterministicUserData(binding.clientID);
-        console.log('Setting deterministic user data based on client ID:', {
-            clientId: binding.clientID,
-            name: deterministicUserData.name,
-            color: deterministicUserData.color
-        });
-        // Update the collaboration context with stable name and color
-        const finalName = username || deterministicUserData.name;
-        const finalColor = cursorColor || deterministicUserData.color;
+        // Prefer explicit username/color first, then awareness identity, then deterministic fallback.
+        const awarenessDisplayName = getIdentityField(awarenessData, [
+            'display_name',
+            'displayName',
+            'name',
+            'username',
+            'handle',
+        ]);
+        const awarenessColor = getIdentityField(awarenessData, ['color']);
+        const finalName = username || awarenessDisplayName || deterministicUserData.name;
+        const finalColor = cursorColor || awarenessColor || deterministicUserData.color;
         collabContext.name = finalName;
         collabContext.color = finalColor;
         collabContext.clientID = binding.clientID;
-        // Update the awareness state immediately with the deterministic name
+        // Notify listeners of the resolved local collaborator identity.
+        onIdentityResolved?.({
+            name: finalName,
+            color: finalColor,
+            clientID: binding.clientID,
+        });
+        // Update the awareness state immediately with the resolved identity.
         updateLocalStateName(provider, finalName, finalColor);
         setBinding(binding);
         return () => {
             // Clean up binding resources if needed
         };
-    }, [editor, provider, id, docMap, doc, excludedProperties, collabContext, username, cursorColor]);
+    }, [editor, provider, id, docMap, doc, excludedProperties, collabContext, username, cursorColor, awarenessData]);
     if (!provider || !binding) {
         return _jsx(_Fragment, {});
     }

package/lib/collab/loro/State.js

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Copyright (c) 2025-2026 Datalayer, Inc.
  * Distributed under the terms of the MIT License.
  */
 import { createCommand } from 'lexical';

package/lib/collab/loro/components/LoroCollaborators.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /*
- * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Copyright (c) 2025-2026 Datalayer, Inc.
  * Distributed under the terms of the MIT License.
  */
 import { useState, useEffect } from 'react';
@@ -44,7 +44,7 @@ export function LoroCollaborators({ binding, currentUserName = 'Me', currentUser
             gap: '8px',
             flexWrap: 'wrap',
             color: 'var(--fgColor-default, inherit)',
-        }, children: [currentUserData && (_jsx(CollaboratorBadge, { name: `${currentUserData.cursor.name}`, color: currentDisplayColor, isCurrentUser: true, clientId: currentClientID })), !currentUserData && (_jsx(CollaboratorBadge, { name: `${currentDisplayName} (Me)`, color: currentDisplayColor, isCurrentUser: true, clientId: currentClientID })), otherCollaborators.length > 0 && (_jsx("div", { style: {
+        }, children: [currentUserData && (_jsx(CollaboratorBadge, { name: `${currentUserData.cursor.name} (me)`, color: currentDisplayColor, isCurrentUser: true, clientId: currentClientID })), !currentUserData && (_jsx(CollaboratorBadge, { name: `${currentDisplayName} (me)`, color: currentDisplayColor, isCurrentUser: true, clientId: currentClientID })), otherCollaborators.length > 0 && (_jsx("div", { style: {
                     width: '1px',
                     height: '20px',
                     backgroundColor: 'var(--borderColor-muted, #d1d5db)',
@@ -56,21 +56,9 @@ export function LoroCollaborators({ binding, currentUserName = 'Me', currentUser
                 }, children: "No other collaborators" }))] }));
 }
 function CollaboratorBadge({ name, color, isCurrentUser, clientId }) {
-    // Convert color to rgba for transparency when current user
-    const getColorWithOpacity = (color, opacity = 1) => {
-        // If it's a hex color, convert to rgba
-        if (color.startsWith('#')) {
-            const hex = color.slice(1);
-            const r = parseInt(hex.slice(0, 2), 16);
-            const g = parseInt(hex.slice(2, 4), 16);
-            const b = parseInt(hex.slice(4, 6), 16);
-            return `rgba(${r}, ${g}, ${b}, ${opacity})`;
-        }
-        // If it's already rgba or rgb, just return as is (basic support)
-        return color;
-    };
-    const circleColor = isCurrentUser ? getColorWithOpacity(color, 0.1) : color;
-    const badgeColor = isCurrentUser ? getColorWithOpacity(color, 0.1) : color;
+    const circleColor = color;
+    const badgeColor = color;
+    const shortClientId = String(clientId).slice(0, 4);
     return (_jsxs("div", { style: {
             display: 'flex',
             alignItems: 'center',
@@ -96,7 +84,7 @@ function CollaboratorBadge({ name, color, isCurrentUser, clientId }) {
                     boxShadow: isCurrentUser
                         ? '0 1px 3px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.2)'
                         : '0 1px 2px rgba(0,0,0,0.1)',
-                    opacity: isCurrentUser ? 0.9 : 1
-                }, children: name })] }));
+                    opacity: 1
+                }, children: `${name} ${shortClientId}` })] }));
 }
 export default LoroCollaborators;

package/lib/collab/loro/components/index.js

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Copyright (c) 2025-2026 Datalayer, Inc.
  * Distributed under the terms of the MIT License.
  */
 export { LoroCollaborators } from './LoroCollaborators';

package/lib/collab/loro/index.js

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Copyright (c) 2025-2026 Datalayer, Inc.
  * Distributed under the terms of the MIT License.
  */
 export * from './Bindings';

package/lib/collab/loro/integrators/BaseIntegrator.js

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Copyright (c) 2025-2026 Datalayer, Inc.
  * Distributed under the terms of the MIT License.
  */
 export {};

package/lib/collab/loro/integrators/CounterIntegrator.js

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Copyright (c) 2025-2026 Datalayer, Inc.
  * Distributed under the terms of the MIT License.
  */
 /**

package/lib/collab/loro/integrators/ListIntegrator.js

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Copyright (c) 2025-2026 Datalayer, Inc.
  * Distributed under the terms of the MIT License.
  */
 /**
@@ -7,7 +7,7 @@
  */
 export class ListIntegrator {
     integrate(diff, binding, provider) {
-        console.log('📋 Handling ListDiff:', diff);
+        console.log(' Handling ListDiff:', diff);
         this.integrateInternal(diff, binding, provider);
     }
     // Internal method for use when already inside editor.update()
@@ -25,7 +25,7 @@ export class ListIntegrator {
                         this.integrateRetain(change, binding, provider);
                         break;
                     default:
-                        console.warn(`📋 Unknown list change type: ${change.type}`);
+                        console.warn(` Unknown list change type: ${change.type}`);
                 }
             });
         }
@@ -46,7 +46,7 @@ export class ListIntegrator {
         // Retain operations typically don't require action in Lexical
         // They represent portions of the list that remain unchanged
         if (change.attributes) {
-            console.log(`📋 List retain with attributes at ${change.index}, length: ${change.length}`, change.attributes);
+            console.log(` List retain with attributes at ${change.index}, length: ${change.length}`, change.attributes);
             // Handle any attribute changes if needed
         }
     }

package/lib/collab/loro/integrators/MapIntegrator.js

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Copyright (c) 2025-2026 Datalayer, Inc.
  * Distributed under the terms of the MIT License.
  */
 import { $getNodeByKey, $isDecoratorNode } from 'lexical';
@@ -188,7 +188,7 @@ export class MapIntegrator {
                 const registeredNodes = binding.editor._nodes;
                 const nodeInfo = registeredNodes.get(targetType);
                 if (!nodeInfo) {
-                    console.warn(`🗺️ MapIntegrator: Node type '${targetType}' not registered`);
+                    console.warn(` MapIntegrator: Node type '${targetType}' not registered`);
                     return;
                 }
                 const serializedData = { ...data };
@@ -208,7 +208,7 @@ export class MapIntegrator {
                 binding.nodeMapper.setMapping(newNode.getKey(), treeId);
             }
             catch (error) {
-                console.warn(`🗺️ MapIntegrator: importJSON+replace failed for decorator ${targetType} node ${lexicalKey}:`, error);
+                console.warn(` MapIntegrator: importJSON+replace failed for decorator ${targetType} node ${lexicalKey}:`, error);
             }
         }
         else {
@@ -228,7 +228,7 @@ export class MapIntegrator {
                 writable.updateFromJSON(serializedData);
             }
             catch (error) {
-                console.warn(`🗺️ MapIntegrator: updateFromJSON failed for ${targetType} node ${lexicalKey}:`, error);
+                console.warn(` MapIntegrator: updateFromJSON failed for ${targetType} node ${lexicalKey}:`, error);
             }
         }
     }

package/lib/collab/loro/integrators/TextIntegrator.js

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Copyright (c) 2025-2026 Datalayer, Inc.
  * Distributed under the terms of the MIT License.
  */
 /**
@@ -24,7 +24,7 @@ export class TextIntegrator {
                         this.integrateTextRetain(change, binding, provider);
                         break;
                     default:
-                        console.warn(`📝 Unknown text change type: ${change.type}`);
+                        console.warn(` Unknown text change type: ${change.type}`);
                 }
             });
         }

package/lib/collab/loro/integrators/TreeIntegrator.d.ts

@@ -19,8 +19,13 @@ export declare class TreeIntegrator implements BaseIntegrator<TreeDiff> {
     integrate(diff: TreeDiff, binding: Binding, provider: Provider): void;
     integrateInternal(diff: TreeDiff, binding: Binding, provider: Provider): void;
     private integrateCreate;
+    /** Only element and decorator nodes may be inserted directly under the root. */
+    private canBeRootChild;
+    /** Insert a child into a parent element at an optional index. */
+    private insertChild;
     private integrateMove;
     private integrateDelete;
+    private collectDescendantKeys;
     /**
      * Topologically sort create operations so that parent nodes are created
      * before their children.