@datalayer/lexical-loro 0.0.3 → 0.1.0

package/lib/collab/yjs/utils/Utils.js

@@ -0,0 +1,402 @@
+import { $getNodeByKey, $getRoot, $getWritableNodeState, $isDecoratorNode, $isElementNode, $isLineBreakNode, $isRootNode, $isTextNode, createEditor, } from 'lexical';
+import { Doc, Map as YMap, XmlElement, XmlText } from 'yjs';
+import invariant from '../../utils/invariant';
+import { $createCollabDecoratorNode, CollabDecoratorNode, } from './../nodes/CollabDecoratorNode';
+import { $createCollabElementNode, CollabElementNode } from './../nodes/CollabElementNode';
+import { $createCollabLineBreakNode } from './../nodes/CollabLineBreakNode';
+import { $createCollabTextNode, CollabTextNode } from './../nodes/CollabTextNode';
+/*****************************************************************************/
+const BASE_EXCLUDED_PROPERTIES = new Set([
+    '__key',
+    '__parent',
+    '__next',
+    '__prev',
+    '__state',
+]);
+const ELEMENT_EXCLUDED_PROPERTIES = new Set([
+    '__first',
+    '__last',
+    '__size',
+    '__dir',
+]);
+const ROOT_EXCLUDED_PROPERTIES = new Set(['__cachedText']);
+const TEXT_EXCLUDED_PROPERTIES = new Set(['__text']);
+/*****************************************************************************/
+function isExcludedProperty(name, node, binding) {
+    if (BASE_EXCLUDED_PROPERTIES.has(name) ||
+        typeof node[name] === 'function') {
+        return true;
+    }
+    if ($isTextNode(node)) {
+        if (TEXT_EXCLUDED_PROPERTIES.has(name)) {
+            return true;
+        }
+    }
+    else if ($isElementNode(node)) {
+        if (ELEMENT_EXCLUDED_PROPERTIES.has(name) ||
+            ($isRootNode(node) && ROOT_EXCLUDED_PROPERTIES.has(name))) {
+            return true;
+        }
+    }
+    const nodeKlass = node.constructor;
+    const excludedProperties = binding.excludedProperties.get(nodeKlass);
+    return excludedProperties != null && excludedProperties.has(name);
+}
+function getSharedType(sharedType, property) {
+    if (sharedType instanceof YMap) {
+        return sharedType.get(property);
+    }
+    else {
+        return sharedType.getAttribute(property);
+    }
+}
+function setSharedType(sharedType, property, value) {
+    if (sharedType instanceof YMap) {
+        sharedType.set(property, value);
+    }
+    else {
+        sharedType.setAttribute(property, value);
+    }
+}
+function syncNodeStateFromLexical(binding, sharedType, prevLexicalNode, nextLexicalNode) {
+    const nextState = nextLexicalNode.__state;
+    const existingState = getSharedType(sharedType, '__state');
+    if (!nextState) {
+        return;
+    }
+    const [unknown, known] = nextState.getInternalState();
+    const prevState = prevLexicalNode && prevLexicalNode.__state;
+    const stateMap = existingState instanceof YMap ? existingState : new YMap();
+    if (prevState === nextState) {
+        return;
+    }
+    const [prevUnknown, prevKnown] = prevState && stateMap.doc
+        ? prevState.getInternalState()
+        : [undefined, new Map()];
+    if (unknown) {
+        for (const [k, v] of Object.entries(unknown)) {
+            if (prevUnknown && v !== prevUnknown[k]) {
+                stateMap.set(k, v);
+            }
+        }
+    }
+    for (const [stateConfig, v] of known) {
+        if (prevKnown.get(stateConfig) !== v) {
+            stateMap.set(stateConfig.key, stateConfig.unparse(v));
+        }
+    }
+    if (!existingState) {
+        setSharedType(sharedType, '__state', stateMap);
+    }
+}
+/*****************************************************************************/
+export function createLexicalNodeFromCollabNode(binding, collabNode, parentKey) {
+    const type = collabNode.getType();
+    const registeredNodes = binding.editor._nodes;
+    const nodeInfo = registeredNodes.get(type);
+    invariant(nodeInfo !== undefined, 'Node %s is not registered', type);
+    const lexicalNode = new nodeInfo.klass();
+    lexicalNode.__parent = parentKey;
+    collabNode._key = lexicalNode.__key;
+    if (collabNode instanceof CollabElementNode) {
+        const xmlText = collabNode._xmlText;
+        collabNode.syncPropertiesFromYjs(binding, null);
+        collabNode.applyChildrenYjsDelta(binding, xmlText.toDelta());
+        collabNode.syncChildrenFromYjs(binding);
+    }
+    else if (collabNode instanceof CollabTextNode) {
+        collabNode.syncPropertiesAndTextFromYjs(binding, null);
+    }
+    else if (collabNode instanceof CollabDecoratorNode) {
+        collabNode.syncPropertiesFromYjs(binding, null);
+    }
+    binding.collabNodeMap.set(lexicalNode.__key, collabNode);
+    return lexicalNode;
+}
+export function getIndexOfYjsNode(yjsParentNode, yjsNode) {
+    let node = yjsParentNode.firstChild;
+    let i = -1;
+    if (node === null) {
+        return -1;
+    }
+    do {
+        i++;
+        if (node === yjsNode) {
+            return i;
+        }
+        // @ts-expect-error Sibling exists but type is not available from YJS.
+        node = node.nextSibling;
+        if (node === null) {
+            return -1;
+        }
+    } while (node !== null);
+    return i;
+}
+export function getNodeTypeFromSharedType(sharedType) {
+    const type = getSharedType(sharedType, '__type');
+    invariant(typeof type === 'string' || typeof type === 'undefined', 'Expected shared type to include type attribute');
+    return type;
+}
+export function syncPropertiesFromLexical(binding, sharedType, prevLexicalNode, nextLexicalNode) {
+    const type = nextLexicalNode.__type;
+    const nodeProperties = binding.nodeProperties;
+    let properties = nodeProperties.get(type);
+    if (properties === undefined) {
+        properties = Object.keys(nextLexicalNode).filter((property) => {
+            return !isExcludedProperty(property, nextLexicalNode, binding);
+        });
+        nodeProperties.set(type, properties);
+    }
+    const EditorClass = binding.editor.constructor;
+    syncNodeStateFromLexical(binding, sharedType, prevLexicalNode, nextLexicalNode);
+    for (let i = 0; i < properties.length; i++) {
+        const property = properties[i];
+        const prevValue = 
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        prevLexicalNode === null ? undefined : prevLexicalNode[property];
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        let nextValue = nextLexicalNode[property];
+        if (prevValue !== nextValue) {
+            if (nextValue instanceof EditorClass) {
+                const docMap = binding.docMap;
+                let prevDoc;
+                if (prevValue instanceof EditorClass) {
+                    const prevKey = prevValue._key;
+                    prevDoc = docMap.get(prevKey);
+                    docMap.delete(prevKey);
+                }
+                // If we already have a document, use it.
+                const doc = prevDoc || new Doc();
+                const key = doc.guid;
+                nextValue._key = key;
+                docMap.set(key, doc);
+                nextValue = doc;
+                // Mark the node dirty as we've assigned a new key to it
+                binding.editor.update(() => {
+                    nextLexicalNode.markDirty();
+                });
+            }
+            setSharedType(sharedType, property, nextValue);
+        }
+    }
+}
+export function spliceString(str, index, delCount, newText) {
+    return str.slice(0, index) + newText + str.slice(index + delCount);
+}
+export function getPositionFromElementAndOffset(node, offset, boundaryIsEdge) {
+    let index = 0;
+    let i = 0;
+    const children = node._children;
+    const childrenLength = children.length;
+    for (; i < childrenLength; i++) {
+        const child = children[i];
+        const childOffset = index;
+        const size = child.getSize();
+        index += size;
+        const exceedsBoundary = boundaryIsEdge ? index >= offset : index > offset;
+        if (exceedsBoundary && child instanceof CollabTextNode) {
+            let textOffset = offset - childOffset - 1;
+            if (textOffset < 0) {
+                textOffset = 0;
+            }
+            const diffLength = index - offset;
+            return {
+                length: diffLength,
+                node: child,
+                nodeIndex: i,
+                offset: textOffset,
+            };
+        }
+        if (index > offset) {
+            return {
+                length: 0,
+                node: child,
+                nodeIndex: i,
+                offset: childOffset,
+            };
+        }
+        else if (i === childrenLength - 1) {
+            return {
+                length: 0,
+                node: null,
+                nodeIndex: i + 1,
+                offset: childOffset + 1,
+            };
+        }
+    }
+    return {
+        length: 0,
+        node: null,
+        nodeIndex: 0,
+        offset: 0,
+    };
+}
+export function doesSelectionNeedRecovering(selection) {
+    const anchor = selection.anchor;
+    const focus = selection.focus;
+    let recoveryNeeded = false;
+    try {
+        const anchorNode = anchor.getNode();
+        const focusNode = focus.getNode();
+        if (
+        // We might have removed a node that no longer exists
+        !anchorNode.isAttached() ||
+            !focusNode.isAttached() ||
+            // If we've split a node, then the offset might not be right
+            ($isTextNode(anchorNode) &&
+                anchor.offset > anchorNode.getTextContentSize()) ||
+            ($isTextNode(focusNode) && focus.offset > focusNode.getTextContentSize())) {
+            recoveryNeeded = true;
+        }
+    }
+    catch (e) {
+        // Sometimes checking nor a node via getNode might trigger
+        // an error, so we need recovery then too.
+        recoveryNeeded = true;
+    }
+    return recoveryNeeded;
+}
+export function syncWithTransaction(binding, fn) {
+    binding.doc.transact(fn, binding);
+}
+/*****************************************************************************/
+function $syncNodeStateToLexical(binding, sharedType, lexicalNode) {
+    const existingState = getSharedType(sharedType, '__state');
+    if (!(existingState instanceof YMap)) {
+        return;
+    }
+    // This should only called when creating the node initially,
+    // incremental updates to state come in through YMapEvent
+    // with the __state as the target.
+    $getWritableNodeState(lexicalNode).updateFromJSON(existingState.toJSON());
+}
+/*****************************************************************************/
+export function $createCollabNodeFromLexicalNode(binding, lexicalNode, parent) {
+    const nodeType = lexicalNode.__type;
+    let collabNode;
+    if ($isElementNode(lexicalNode)) {
+        const xmlText = new XmlText();
+        collabNode = $createCollabElementNode(xmlText, parent, nodeType);
+        collabNode.syncPropertiesFromLexical(binding, lexicalNode, null);
+        collabNode.syncChildrenFromLexical(binding, lexicalNode, null, null, null);
+    }
+    else if ($isTextNode(lexicalNode)) {
+        // TODO create a token text node for token, segmented nodes.
+        const map = new YMap();
+        collabNode = $createCollabTextNode(map, lexicalNode.__text, parent, nodeType);
+        collabNode.syncPropertiesAndTextFromLexical(binding, lexicalNode, null);
+    }
+    else if ($isLineBreakNode(lexicalNode)) {
+        const map = new YMap();
+        map.set('__type', 'linebreak');
+        collabNode = $createCollabLineBreakNode(map, parent);
+    }
+    else if ($isDecoratorNode(lexicalNode)) {
+        const xmlElem = new XmlElement();
+        collabNode = $createCollabDecoratorNode(xmlElem, parent, nodeType);
+        collabNode.syncPropertiesFromLexical(binding, lexicalNode, null);
+    }
+    else {
+        invariant(false, 'Expected text, element, decorator, or linebreak node');
+    }
+    collabNode._key = lexicalNode.__key;
+    return collabNode;
+}
+export function $getOrInitCollabNodeFromSharedType(binding, sharedType, parent) {
+    const collabNode = sharedType._collabNode;
+    if (collabNode === undefined) {
+        const registeredNodes = binding.editor._nodes;
+        const type = getNodeTypeFromSharedType(sharedType);
+        invariant(typeof type === 'string', 'Expected shared type to include type attribute');
+        const nodeInfo = registeredNodes.get(type);
+        invariant(nodeInfo !== undefined, 'Node %s is not registered', type);
+        const sharedParent = sharedType.parent;
+        const targetParent = parent === undefined && sharedParent !== null
+            ? $getOrInitCollabNodeFromSharedType(binding, sharedParent)
+            : parent || null;
+        invariant(targetParent instanceof CollabElementNode, 'Expected parent to be a collab element node');
+        if (sharedType instanceof XmlText) {
+            return $createCollabElementNode(sharedType, targetParent, type);
+        }
+        else if (sharedType instanceof YMap) {
+            if (type === 'linebreak') {
+                return $createCollabLineBreakNode(sharedType, targetParent);
+            }
+            return $createCollabTextNode(sharedType, '', targetParent, type);
+        }
+        else if (sharedType instanceof XmlElement) {
+            return $createCollabDecoratorNode(sharedType, targetParent, type);
+        }
+    }
+    return collabNode;
+}
+export function $syncPropertiesFromYjs(binding, sharedType, lexicalNode, keysChanged) {
+    const properties = keysChanged === null
+        ? sharedType instanceof YMap
+            ? Array.from(sharedType.keys())
+            : Object.keys(sharedType.getAttributes())
+        : Array.from(keysChanged);
+    let writableNode;
+    for (let i = 0; i < properties.length; i++) {
+        const property = properties[i];
+        if (isExcludedProperty(property, lexicalNode, binding)) {
+            if (property === '__state') {
+                if (!writableNode) {
+                    writableNode = lexicalNode.getWritable();
+                }
+                $syncNodeStateToLexical(binding, sharedType, writableNode);
+            }
+            continue;
+        }
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const prevValue = lexicalNode[property];
+        let nextValue = getSharedType(sharedType, property);
+        if (prevValue !== nextValue) {
+            if (nextValue instanceof Doc) {
+                const docMap = binding.docMap;
+                if (prevValue instanceof Doc) {
+                    docMap.delete(prevValue.guid);
+                }
+                const nestedEditor = createEditor();
+                const key = nextValue.guid;
+                nestedEditor._key = key;
+                docMap.set(key, nextValue);
+                nextValue = nestedEditor;
+            }
+            if (writableNode === undefined) {
+                writableNode = lexicalNode.getWritable();
+            }
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            writableNode[property] = nextValue;
+        }
+    }
+}
+export function $moveSelectionToPreviousNode(anchorNodeKey, currentEditorState) {
+    const anchorNode = currentEditorState._nodeMap.get(anchorNodeKey);
+    if (!anchorNode) {
+        $getRoot().selectStart();
+        return;
+    }
+    // Get previous node
+    const prevNodeKey = anchorNode.__prev;
+    let prevNode = null;
+    if (prevNodeKey) {
+        prevNode = $getNodeByKey(prevNodeKey);
+    }
+    // If previous node not found, get parent node
+    if (prevNode === null && anchorNode.__parent !== null) {
+        prevNode = $getNodeByKey(anchorNode.__parent);
+    }
+    if (prevNode === null) {
+        $getRoot().selectStart();
+        return;
+    }
+    if (prevNode !== null && prevNode.isAttached()) {
+        prevNode.selectEnd();
+        return;
+    }
+    else {
+        // If the found node is also deleted, select the next one
+        $moveSelectionToPreviousNode(prevNode.__key, currentEditorState);
+    }
+}

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

@@ -0,0 +1,3 @@
+import { Doc } from 'yjs';
+import { Provider } from './State';
+export declare function createWebsocketProvider(id: string, docMap: Map<string, Doc>): Provider;

package/lib/collab/yjs/wsProvider.js

@@ -0,0 +1,21 @@
+import { Doc } from 'yjs';
+import { WebsocketProvider } from './provider/websocket';
+const url = new URL(window.location.href);
+const params = new URLSearchParams(url.search);
+const WEBSOCKET_ENDPOINT = params.get('collabEndpoint') || 'ws://localhost:1234';
+const WEBSOCKET_SLUG = 'playground';
+const WEBSOCKET_ID = params.get('collabId') || '0';
+// parent dom -> child doc
+export function createWebsocketProvider(id, docMap) {
+    let doc = docMap.get(id);
+    if (doc === undefined) {
+        doc = new Doc();
+        docMap.set(id, doc);
+    }
+    else {
+        doc.load();
+    }
+    return new WebsocketProvider(WEBSOCKET_ENDPOINT, WEBSOCKET_SLUG + '/' + WEBSOCKET_ID + '/' + id, doc, {
+        connect: false,
+    });
+}

package/lib/commenting/index.d.ts

@@ -0,0 +1,41 @@
+import type { LexicalEditor } from 'lexical';
+import { Array as YArray, Map as YMap } from 'yjs';
+import { Provider } from '../collab/yjs/State';
+export type Comment = {
+    author: string;
+    content: string;
+    deleted: boolean;
+    id: string;
+    timeStamp: number;
+    type: 'comment';
+};
+export type Thread = {
+    comments: Array<Comment>;
+    id: string;
+    quote: string;
+    type: 'thread';
+};
+export type Comments = Array<Thread | Comment>;
+export declare function createComment(content: string, author: string, id?: string, timeStamp?: number, deleted?: boolean): Comment;
+export declare function createThread(quote: string, comments: Array<Comment>, id?: string): Thread;
+export declare class CommentStore {
+    _editor: LexicalEditor;
+    _comments: Comments;
+    _changeListeners: Set<() => void>;
+    _collabProvider: null | Provider;
+    constructor(editor: LexicalEditor);
+    isCollaborative(): boolean;
+    getComments(): Comments;
+    addComment(commentOrThread: Comment | Thread, thread?: Thread, offset?: number): void;
+    deleteCommentOrThread(commentOrThread: Comment | Thread, thread?: Thread): {
+        markedComment: Comment;
+        index: number;
+    } | null;
+    registerOnChange(onChange: () => void): () => void;
+    _withRemoteTransaction(fn: () => void): void;
+    _withLocalTransaction(fn: () => void): void;
+    _getCollabComments(): null | YArray<any>;
+    _createCollabSharedMap(commentOrThread: Comment | Thread): YMap<any>;
+    registerCollaboration(provider: Provider): () => void;
+}
+export declare function useCommentStore(commentStore: CommentStore): Comments;