@lexical/yjs 0.44.1-nightly.20260519.0 → 0.45.1-dev.0

package/src/CollabLineBreakNode.ts

@@ -0,0 +1,70 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import type {Binding} from '.';
+import type {CollabElementNode} from './CollabElementNode';
+import type {LineBreakNode, NodeKey} from 'lexical';
+import type {Map as YMap} from 'yjs';
+
+import {$getNodeByKey, $isLineBreakNode} from 'lexical';
+
+export class CollabLineBreakNode {
+  _map: YMap<unknown>;
+  _key: NodeKey;
+  _parent: CollabElementNode;
+  _type: 'linebreak';
+
+  constructor(map: YMap<unknown>, parent: CollabElementNode) {
+    this._key = '';
+    this._map = map;
+    this._parent = parent;
+    this._type = 'linebreak';
+  }
+
+  getNode(): null | LineBreakNode {
+    const node = $getNodeByKey(this._key);
+    return $isLineBreakNode(node) ? node : null;
+  }
+
+  getKey(): NodeKey {
+    return this._key;
+  }
+
+  getSharedType(): YMap<unknown> {
+    return this._map;
+  }
+
+  getType(): string {
+    return this._type;
+  }
+
+  getSize(): number {
+    return 1;
+  }
+
+  getOffset(): number {
+    const collabElementNode = this._parent;
+    return collabElementNode.getChildOffset(this);
+  }
+
+  destroy(binding: Binding): void {
+    const collabNodeMap = binding.collabNodeMap;
+    if (collabNodeMap.get(this._key) === this) {
+      collabNodeMap.delete(this._key);
+    }
+  }
+}
+
+export function $createCollabLineBreakNode(
+  map: YMap<unknown>,
+  parent: CollabElementNode,
+): CollabLineBreakNode {
+  const collabNode = new CollabLineBreakNode(map, parent);
+  map._collabNode = collabNode;
+  return collabNode;
+}

package/src/CollabTextNode.ts

@@ -0,0 +1,179 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import type {Binding} from '.';
+import type {CollabElementNode} from './CollabElementNode';
+import type {NodeKey, NodeMap, TextNode} from 'lexical';
+import type {Map as YMap} from 'yjs';
+
+import invariant from '@lexical/internal/invariant';
+import {
+  $getNodeByKey,
+  $getSelection,
+  $isRangeSelection,
+  $isTextNode,
+} from 'lexical';
+
+import simpleDiffWithCursor from './simpleDiffWithCursor';
+import {$syncPropertiesFromYjs, syncPropertiesFromLexical} from './Utils';
+
+function $diffTextContentAndApplyDelta(
+  collabNode: CollabTextNode,
+  key: NodeKey,
+  prevText: string,
+  nextText: string,
+): void {
+  const selection = $getSelection();
+  let cursorOffset = nextText.length;
+
+  if ($isRangeSelection(selection) && selection.isCollapsed()) {
+    const anchor = selection.anchor;
+
+    if (anchor.key === key) {
+      cursorOffset = anchor.offset;
+    }
+  }
+
+  const diff = simpleDiffWithCursor(prevText, nextText, cursorOffset);
+  collabNode.spliceText(diff.index, diff.remove, diff.insert);
+}
+
+export class CollabTextNode {
+  _map: YMap<unknown>;
+  _key: NodeKey;
+  _parent: CollabElementNode;
+  _text: string;
+  _type: string;
+  _normalized: boolean;
+
+  constructor(
+    map: YMap<unknown>,
+    text: string,
+    parent: CollabElementNode,
+    type: string,
+  ) {
+    this._key = '';
+    this._map = map;
+    this._parent = parent;
+    this._text = text;
+    this._type = type;
+    this._normalized = false;
+  }
+
+  getPrevNode(nodeMap: null | NodeMap): null | TextNode {
+    if (nodeMap === null) {
+      return null;
+    }
+
+    const node = nodeMap.get(this._key);
+    return $isTextNode(node) ? node : null;
+  }
+
+  getNode(): null | TextNode {
+    const node = $getNodeByKey(this._key);
+    return $isTextNode(node) ? node : null;
+  }
+
+  getSharedType(): YMap<unknown> {
+    return this._map;
+  }
+
+  getType(): string {
+    return this._type;
+  }
+
+  getKey(): NodeKey {
+    return this._key;
+  }
+
+  getSize(): number {
+    return this._text.length + (this._normalized ? 0 : 1);
+  }
+
+  getOffset(): number {
+    const collabElementNode = this._parent;
+    return collabElementNode.getChildOffset(this);
+  }
+
+  spliceText(index: number, delCount: number, newText: string): void {
+    const collabElementNode = this._parent;
+    const xmlText = collabElementNode._xmlText;
+    const offset = this.getOffset() + 1 + index;
+
+    if (delCount !== 0) {
+      xmlText.delete(offset, delCount);
+    }
+
+    if (newText !== '') {
+      xmlText.insert(offset, newText);
+    }
+  }
+
+  syncPropertiesAndTextFromLexical(
+    binding: Binding,
+    nextLexicalNode: TextNode,
+    prevNodeMap: null | NodeMap,
+  ): void {
+    const prevLexicalNode = this.getPrevNode(prevNodeMap);
+    const nextText = nextLexicalNode.__text;
+
+    syncPropertiesFromLexical(
+      binding,
+      this._map,
+      prevLexicalNode,
+      nextLexicalNode,
+    );
+
+    if (prevLexicalNode !== null) {
+      const prevText = prevLexicalNode.__text;
+
+      if (prevText !== nextText) {
+        const key = nextLexicalNode.__key;
+        $diffTextContentAndApplyDelta(this, key, prevText, nextText);
+        this._text = nextText;
+      }
+    }
+  }
+
+  syncPropertiesAndTextFromYjs(
+    binding: Binding,
+    keysChanged: null | Set<string>,
+  ): void {
+    const lexicalNode = this.getNode();
+    invariant(
+      lexicalNode !== null,
+      'syncPropertiesAndTextFromYjs: could not find decorator node',
+    );
+
+    $syncPropertiesFromYjs(binding, this._map, lexicalNode, keysChanged);
+
+    const collabText = this._text;
+
+    if (lexicalNode.__text !== collabText) {
+      lexicalNode.setTextContent(collabText);
+    }
+  }
+
+  destroy(binding: Binding): void {
+    const collabNodeMap = binding.collabNodeMap;
+    if (collabNodeMap.get(this._key) === this) {
+      collabNodeMap.delete(this._key);
+    }
+  }
+}
+
+export function $createCollabTextNode(
+  map: YMap<unknown>,
+  text: string,
+  parent: CollabElementNode,
+  type: string,
+): CollabTextNode {
+  const collabNode = new CollabTextNode(map, text, parent, type);
+  map._collabNode = collabNode;
+  return collabNode;
+}

package/src/CollabV2Mapping.ts

@@ -0,0 +1,117 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import invariant from '@lexical/internal/invariant';
+import {$isTextNode, type LexicalNode, NodeKey, type TextNode} from 'lexical';
+import {XmlElement, XmlText} from 'yjs';
+
+type SharedType = XmlElement | XmlText;
+
+// Stores mappings between Yjs shared types and the Lexical nodes they were last associated with.
+export class CollabV2Mapping {
+  private _nodeMap: Map<NodeKey, LexicalNode> = new Map();
+
+  private _sharedTypeToNodeKeys: Map<SharedType, NodeKey[]> = new Map();
+  private _nodeKeyToSharedType: Map<NodeKey, SharedType> = new Map();
+
+  set(sharedType: SharedType, node: LexicalNode | TextNode[]): void {
+    const isArray = node instanceof Array;
+
+    // Clear all existing associations for this key.
+    this.delete(sharedType);
+
+    // If nodes were associated with other shared types, remove those associations.
+    const nodes = isArray ? node : [node];
+    for (const n of nodes) {
+      const key = n.getKey();
+      if (this._nodeKeyToSharedType.has(key)) {
+        const otherSharedType = this._nodeKeyToSharedType.get(key)!;
+        const keyIndex = this._sharedTypeToNodeKeys
+          .get(otherSharedType)!
+          .indexOf(key);
+        if (keyIndex !== -1) {
+          this._sharedTypeToNodeKeys.get(otherSharedType)!.splice(keyIndex, 1);
+        }
+        this._nodeKeyToSharedType.delete(key);
+        this._nodeMap.delete(key);
+      }
+    }
+
+    if (sharedType instanceof XmlText) {
+      invariant(isArray, 'Text nodes must be mapped as an array');
+      if (node.length === 0) {
+        return;
+      }
+      this._sharedTypeToNodeKeys.set(
+        sharedType,
+        node.map(n => n.getKey()),
+      );
+      for (const n of node) {
+        this._nodeMap.set(n.getKey(), n);
+        this._nodeKeyToSharedType.set(n.getKey(), sharedType);
+      }
+    } else {
+      invariant(!isArray, 'Element nodes must be mapped as a single node');
+      invariant(!$isTextNode(node), 'Text nodes must be mapped to XmlText');
+      this._sharedTypeToNodeKeys.set(sharedType, [node.getKey()]);
+      this._nodeMap.set(node.getKey(), node);
+      this._nodeKeyToSharedType.set(node.getKey(), sharedType);
+    }
+  }
+
+  get(sharedType: XmlElement): LexicalNode | undefined;
+  get(sharedType: XmlText): TextNode[] | undefined;
+  get(sharedType: SharedType): LexicalNode | Array<TextNode> | undefined;
+  get(sharedType: SharedType): LexicalNode | Array<TextNode> | undefined {
+    const nodes = this._sharedTypeToNodeKeys.get(sharedType);
+    if (nodes === undefined) {
+      return undefined;
+    }
+    if (sharedType instanceof XmlText) {
+      const arr = Array.from(
+        nodes.map(nodeKey => this._nodeMap.get(nodeKey)!),
+      ) as Array<TextNode>;
+      return arr.length > 0 ? arr : undefined;
+    }
+    return this._nodeMap.get(nodes[0])!;
+  }
+
+  getSharedType(node: LexicalNode): SharedType | undefined {
+    return this._nodeKeyToSharedType.get(node.getKey());
+  }
+
+  delete(sharedType: SharedType): void {
+    const nodeKeys = this._sharedTypeToNodeKeys.get(sharedType);
+    if (nodeKeys === undefined) {
+      return;
+    }
+    for (const nodeKey of nodeKeys) {
+      this._nodeMap.delete(nodeKey);
+      this._nodeKeyToSharedType.delete(nodeKey);
+    }
+    this._sharedTypeToNodeKeys.delete(sharedType);
+  }
+
+  deleteNode(nodeKey: NodeKey): void {
+    const sharedType = this._nodeKeyToSharedType.get(nodeKey);
+    if (sharedType) {
+      this.delete(sharedType);
+    }
+    this._nodeMap.delete(nodeKey);
+  }
+
+  has(sharedType: SharedType): boolean {
+    return this._sharedTypeToNodeKeys.has(sharedType);
+  }
+
+  clear(): void {
+    this._nodeMap.clear();
+    this._sharedTypeToNodeKeys.clear();
+    this._nodeKeyToSharedType.clear();
+  }
+}

package/src/RenderSnapshot.ts

@@ -0,0 +1,97 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+import invariant from '@lexical/internal/invariant';
+import {$getRoot, $getState, createState, LexicalNode} from 'lexical';
+import {
+  emptySnapshot,
+  ID,
+  iterateDeletedStructs,
+  PermanentUserData,
+  Snapshot,
+  snapshot as createSnapshot,
+} from 'yjs';
+
+import {BindingV2} from './Bindings';
+import {$createOrUpdateNodeFromYElement} from './SyncV2';
+
+const STATE_KEY = 'ychange';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type YChange<UserT = any> = {
+  id: ID;
+  type: 'removed' | 'added';
+  user: UserT | null;
+};
+
+const ychangeState = createState<typeof STATE_KEY, YChange | null>(STATE_KEY, {
+  isEqual: (a, b) => a === b,
+  parse: value => (value as YChange) ?? null,
+});
+
+export function $getYChangeState<UserT = unknown>(
+  node: LexicalNode,
+): YChange<UserT> | null {
+  return $getState(node, ychangeState);
+}
+
+// Not exposing $setState because it should only be created by SyncV2.ts.
+
+/**
+ * Replaces the editor content with a view that compares the state between two given snapshots.
+ * Any added or removed nodes between the two snapshots will have {@link YChange} attached to them.
+ *
+ * @param binding Yjs binding
+ * @param snapshot Ending snapshot state (default: current state of the Yjs document)
+ * @param prevSnapshot Starting snapshot state (default: empty snapshot)
+ */
+export const renderSnapshot__EXPERIMENTAL = (
+  binding: BindingV2,
+  snapshot: Snapshot = createSnapshot(binding.doc),
+  prevSnapshot: Snapshot = emptySnapshot,
+) => {
+  // The document that contains the full history of this document.
+  const {doc} = binding;
+  invariant(!doc.gc, 'GC must be disabled to render snapshot');
+
+  doc.transact(transaction => {
+    // Before rendering, we are going to sanitize ops and split deleted ops
+    // if they were deleted by separate users.
+    const pud = new PermanentUserData(doc);
+    if (pud) {
+      pud.dss.forEach(ds => {
+        iterateDeletedStructs(transaction, ds, _item => {});
+      });
+    }
+
+    const computeYChange = (type: 'removed' | 'added', id: ID): YChange => {
+      const user =
+        type === 'added'
+          ? pud.getUserByClientId(id.client)
+          : pud.getUserByDeletedId(id);
+      return {
+        id,
+        type,
+        user: user ?? null,
+      };
+    };
+
+    binding.mapping.clear();
+    binding.editor.update(() => {
+      $getRoot().clear();
+      $createOrUpdateNodeFromYElement(
+        binding.root,
+        binding,
+        null,
+        true,
+        snapshot,
+        prevSnapshot,
+        computeYChange,
+      );
+    });
+  }, binding);
+};