@kerebron/extension-yjs 0.7.0 → 0.7.2

package/src/binding/DiffViewer.ts

@@ -0,0 +1,138 @@
+import * as Y from 'yjs';
+
+import { Node } from 'prosemirror-model';
+import { EditorState } from 'prosemirror-state';
+
+import { isVisible } from '../utils.js';
+import { YjsData } from './PmYjsBinding.js';
+import { createNodeFromYElement } from './createNodeFromYElement.js';
+
+export class DiffViewer {
+  prevSnapshot?: Y.Snapshot;
+  snapshot?: Y.Snapshot;
+
+  private historyYXmlFragment: Y.XmlFragment | undefined;
+  private historyDoc: Y.Doc | undefined;
+
+  constructor() {
+  }
+
+  isActive() {
+    return !!this.snapshot || !!this.prevSnapshot;
+  }
+
+  setSnapshot(yjs: YjsData, uSnapshot: Uint8Array, uPrevSnapshot?: Uint8Array) {
+    this.prevSnapshot = undefined;
+    if (uPrevSnapshot) {
+      this.prevSnapshot = Y.decodeSnapshotV2(uPrevSnapshot);
+    }
+
+    this.snapshot = Y.decodeSnapshotV2(uSnapshot);
+
+    this.historyDoc = Y.createDocFromSnapshot(
+      yjs.ydoc,
+      this.snapshot,
+      new Y.Doc({ gc: false }),
+    );
+
+    if (yjs.xmlFragment._item === null) {
+      /**
+       * If is a root type, we need to find the root key in the initial document
+       * and use it to get the history type.
+       */
+      const share: Map<string, Y.AbstractType<Y.YEvent<any>>> = yjs.ydoc.share;
+      const rootKey = Array.from(share.keys()).find(
+        (key) => share.get(key) === yjs.xmlFragment as Y.AbstractType<any>,
+      );
+      this.historyYXmlFragment = this.historyDoc.getXmlFragment(rootKey);
+    } else {
+      /**
+       * If it is a sub type, we use the item id to find the history type.
+       */
+      const historyStructs =
+        this.historyDoc.store.clients.get(yjs.xmlFragment._item.id.client) ??
+          [];
+      const itemIndex = Y.findIndexSS(
+        historyStructs,
+        yjs.xmlFragment._item.id.clock,
+      );
+      if (historyStructs[itemIndex] instanceof Y.GC) {
+        throw new Error('Incorrect type Y.GC');
+      }
+      const item: Y.Item = historyStructs[itemIndex];
+      const content: Y.ContentType = item.content;
+      this.historyYXmlFragment = content.type as Y.XmlFragment;
+    }
+  }
+
+  reset() {
+    this.snapshot = undefined;
+    this.prevSnapshot = undefined;
+    this.historyDoc = undefined;
+    this.historyYXmlFragment = undefined;
+  }
+
+  getFragmentContent(
+    state: EditorState,
+    ytr: Y.Transaction,
+  ): Node[] | undefined {
+    if (!this.historyYXmlFragment || !this.snapshot) {
+      return;
+    }
+
+    // before rendering, we are going to sanitize ops and split deleted ops
+    // if they were deleted by seperate users.
+    const pud: Y.PermanentUserData | undefined = undefined;
+    // pluginState.permanentUserData;
+    if (pud) {
+      pud.dss.forEach((ds) => {
+        Y.iterateDeletedStructs(ytr, ds, (_item) => {});
+      });
+    }
+    const computeYChange = (type: 'removed' | 'added', id: Y.ID) => {
+      const user = pud
+        ? (type === 'added'
+          ? pud.getUserByClientId(id.client)
+          : pud.getUserByDeletedId(id))
+        : undefined;
+      return {
+        user,
+        type,
+      };
+    };
+
+    const deleteSet = this.prevSnapshot
+      ? this.prevSnapshot.ds
+      : Y.emptySnapshot.ds;
+
+    // Create document fragment and render
+    const fragmentContent = Y.typeListToArraySnapshot(
+      this.historyYXmlFragment,
+      new Y.Snapshot(deleteSet, this.snapshot.sv),
+    ).map((t) => {
+      if (
+        !t._item.deleted || isVisible(t._item, this.snapshot) ||
+        isVisible(t._item, this.prevSnapshot)
+      ) {
+        return createNodeFromYElement(
+          t,
+          state.schema,
+          { mapping: new Map(), isOverlappingMark: new Map() },
+          this.snapshot,
+          this.prevSnapshot,
+          computeYChange,
+        );
+      } else {
+        // No need to render elements that are not visible by either snapshot.
+        // If a client adds and deletes content in the same snapshot the element is not visible by either snapshot.
+        return null;
+      }
+    }).filter((n) => n !== null);
+
+    return fragmentContent;
+  }
+
+  getHistoryDoc(): Y.Doc | undefined {
+    return this.historyDoc;
+  }
+}

package/src/binding/PmYjsBinding.ts

@@ -15,6 +15,7 @@ import { yXmlFragmentToProseMirrorRootNode } from './convertUtils.js';
 import { updateYFragment } from './updateYFragment.js';
 import { BindingMetadata } from './BindingMetadata.js';
 import { createNodeIfNotExists } from './createNodeFromYElement.js';
+import { DiffViewer } from './DiffViewer.js';
 
 type Mutex = (f: () => void, g?: () => void) => void;
 
@@ -44,6 +45,7 @@ export class PmYjsBinding extends EventTarget {
 
   private yjs: YjsData | undefined;
   private selectionStash: SelectionStash | undefined;
+  public readonly diffViewer: DiffViewer;
 
   public addToYjsHistory = true;
   private hasImported = false;
@@ -63,6 +65,7 @@ export class PmYjsBinding extends EventTarget {
   constructor(private readonly editor: CoreEditor) {
     super();
 
+    this.diffViewer = new DiffViewer();
     this.bindingMetadata = { mapping: new Map(), isOverlappingMark: new Map() };
 
     this.mux = createMutex();
@@ -90,6 +93,8 @@ export class PmYjsBinding extends EventTarget {
     const tr = this.editor.state.tr;
     this.leaveRoom(tr);
     this.editor.dispatchTransaction(tr);
+    this.diffViewer.reset();
+    this.selectionStash?.destroy();
   }
 
   changeUser(user: User) {
@@ -104,23 +109,26 @@ export class PmYjsBinding extends EventTarget {
     createYjsProvider: CreateYjsProvider,
     tr: Transaction,
   ) {
+    this.connectionState = 'joining';
+    this.hasImported = false;
+
     if (this.provider) {
       this.provider.removeEventListener('synced', this.syncedHandler);
       this.provider.destroy();
-      this.hasImported = false;
       this.provider = undefined;
     }
 
-    this.addToYjsHistory = true;
-
-    this.connectionState = 'joining';
     const [provider, ydoc] = createYjsProvider(
       roomId,
     );
+
+    this.addToYjsHistory = true;
+    this.provider = provider;
+
     this.bindingMetadata.mapping.clear();
     this.bindingMetadata.isOverlappingMark.clear();
+    this.diffViewer.reset();
 
-    this.provider = provider;
     const fieldName = 'kerebron:' + this.editor.schema.topNodeType.name;
     this.yjs = { ydoc, xmlFragment: ydoc.getXmlFragment(fieldName) };
     this.selectionStash = new SelectionStash(
@@ -146,6 +154,10 @@ export class PmYjsBinding extends EventTarget {
     this.addToYjsHistory = true;
     this.provider = undefined;
 
+    this.bindingMetadata.mapping.clear();
+    this.bindingMetadata.isOverlappingMark.clear();
+    this.diffViewer.reset();
+
     this.selectionStash?.destroy();
     this.selectionStash = undefined;
     this.yjs?.xmlFragment.unobserveDeep(this._observeFunction);
@@ -181,12 +193,14 @@ export class PmYjsBinding extends EventTarget {
         return;
       }
 
+      if (this.diffViewer.isActive()) {
+        return;
+      }
+
       const state = this.editor.state;
 
       const { xmlFragment } = this.yjs;
 
-      // TODO handleSnapShot
-
       const mapping = this.bindingMetadata.mapping;
       const delType = (_: any, type: Y.AbstractType<any>) =>
         mapping.delete(type);
@@ -212,9 +226,6 @@ export class PmYjsBinding extends EventTarget {
       ).filter((n) => n !== null);
 
       const tr = state.tr;
-      if (ytr.origin instanceof Y.UndoManager) {
-      } else {
-      }
       tr.setMeta('addToYjsHistory', false);
       tr.replace(
         0,
@@ -236,6 +247,10 @@ export class PmYjsBinding extends EventTarget {
       return;
     }
 
+    if (this.diffViewer.isActive()) {
+      return;
+    }
+
     const doc = this.editor.state.doc;
     const { ydoc, xmlFragment } = this.yjs;
 
@@ -297,4 +312,49 @@ export class PmYjsBinding extends EventTarget {
   getSelectionStash(): SelectionStash | undefined {
     return this.selectionStash;
   }
+
+  isEditable() {
+    return !this.diffViewer.isActive();
+  }
+
+  setSnapshot(
+    snapshot: Uint8Array<ArrayBufferLike>,
+    prevSnapshot: Uint8Array<ArrayBufferLike> | undefined,
+  ) {
+    if (!this.yjs) {
+      return;
+    }
+    this.diffViewer.setSnapshot(this.yjs, snapshot, prevSnapshot);
+
+    // clear mapping because we are going to rerender
+    this.bindingMetadata.mapping.clear();
+    this.bindingMetadata.isOverlappingMark.clear();
+
+    this.mux(() => {
+      const historyDoc = this.diffViewer.getHistoryDoc();
+      if (!historyDoc) {
+        return;
+      }
+
+      historyDoc.transact((ytr) => {
+        const state = this.editor.state;
+        const fragmentContent = this.diffViewer.getFragmentContent(state, ytr);
+
+        if (!fragmentContent) {
+          return;
+        }
+
+        const tr = state.tr;
+        tr.replace(
+          0,
+          state.doc.content.size,
+          new Slice(Fragment.from(fragmentContent), 0, 0),
+        );
+
+        tr.setMeta('addToHistory', false);
+        tr.setMeta(ySyncPluginKey, { isChangeOrigin: true }),
+          this.editor.dispatchTransaction(tr);
+      }, ySyncPluginKey);
+    });
+  }
 }

package/src/binding/createNodeFromYElement.ts

@@ -51,7 +51,7 @@ export const createNodeFromYElement = (
   meta: BindingMetadata,
   snapshot?: Y.Snapshot,
   prevSnapshot?: Y.Snapshot,
-  computeYChange?: (arg0: 'removed' | 'added', arg1: Y.ID) => any,
+  computeYChange?: (changeType: 'removed' | 'added', yid: Y.ID) => any,
 ): PModel.Node | null => {
   const children: PModel.Node[] = [];
   const createChildren = (type: Y.XmlElement | Y.XmlText) => {

package/src/debug.ts

@@ -177,6 +177,27 @@ export function debugYNode(
     return retVal;
   }
 
+  if (node instanceof Y.AbstractType) {
+    if (!config.isVisible(node._item)) {
+      return '';
+    }
+
+    const atype: Y.AbstractType<any> = node;
+
+    retVal += config.renderDeleted(
+      `Y.AbstractType(${atype._length})`,
+      node._item,
+    );
+    retVal += yDebugClient(node._item);
+    retVal += '\n';
+
+    retVal += indentText(
+      JSON.stringify(atype._item),
+      1,
+    );
+    return retVal;
+  }
+
   if ('object' !== typeof node) {
     retVal += '' + node;
     return retVal;

package/src/ui/selection.ts

@@ -186,11 +186,13 @@ export class SelectionStash {
     if (!('root' in view)) {
       return false;
     }
-    const selection = view.root?.getSelection(); // https://stackoverflow.com/questions/62054839/shadowroot-getselection
+    const selection = document.getSelection();
 
-    if (!selection || selection.anchorNode == null) return false;
+    if (
+      !selection || selection.anchorNode == null || selection.focusNode == null
+    ) return false;
 
-    const range = document.createRange(); // https://github.com/yjs/y-prosemirror/pull/193
+    const range = document.createRange();
     range.setStart(selection.anchorNode, selection.anchorOffset);
     range.setEnd(selection.focusNode, selection.focusOffset);
 

package/src/utils.ts

@@ -13,7 +13,7 @@ const _convolute = (digest: Uint8Array) => {
 export const hashOfJSON = (json: any) =>
   buf.toBase64(_convolute(sha256.digest(buf.encodeAny(json))));
 
-export const isVisible = (item: Y.Item, snapshot: Y.Snapshot) =>
+export const isVisible = (item: Y.Item, snapshot?: Y.Snapshot) =>
   snapshot === undefined ? !item.deleted : (snapshot.sv.has(item.id.client) &&
     (snapshot.sv.get(item.id.client)!) > item.id.clock &&
     !Y.isDeleted(snapshot.ds, item.id));

package/src/ySyncPlugin.ts

@@ -30,7 +30,15 @@ interface YSyncMeta {
   leaveRoom?: boolean;
   isChangeOrigin?: boolean;
   isUndoRedoOperation?: boolean;
-  restore?: any;
+  getYSnapshot?: {
+    resolve: (snapshot: Uint8Array) => void;
+    reject: (reason: any) => void;
+  };
+  setYSnapshot?: {
+    prevSnapshot?: Uint8Array;
+    snapshot: Uint8Array;
+  };
+  resetYSnapshot?: boolean;
 }
 
 /**
@@ -50,7 +58,8 @@ export const ySyncPlugin = (
   const plugin: Plugin<YSyncPluginState> = new Plugin<YSyncPluginState>({
     props: {
       editable: (state) => {
-        return true;
+        const syncState = ySyncPluginKey.getState(state)!;
+        return syncState.binding.isEditable();
       },
     },
     key: ySyncPluginKey,
@@ -119,6 +128,34 @@ export const ySyncPlugin = (
         pluginState.isUndoRedoOperation = !!pluginMeta?.isChangeOrigin &&
           !!pluginMeta?.isUndoRedoOperation;
 
+        if (pluginMeta?.getYSnapshot) {
+          const yjs = pluginState.binding.getYjs();
+          if (yjs) {
+            const snapshot = Y.snapshot(yjs.ydoc);
+            pluginMeta.getYSnapshot.resolve(Y.encodeSnapshotV2(snapshot));
+          } else {
+            if (pluginMeta.getYSnapshot.reject) {
+              pluginMeta.getYSnapshot.reject(new Error('No yjs'));
+            } else {
+              throw new Error('No yjs');
+            }
+          }
+          return pluginState;
+        }
+
+        if (pluginMeta?.resetYSnapshot) {
+          pluginState.binding.diffViewer.reset();
+          return pluginState;
+        }
+
+        if (pluginMeta?.setYSnapshot) {
+          const { prevSnapshot, snapshot } = pluginMeta?.setYSnapshot;
+          setTimeout(() => { // Prevent from snapshot being overwritten by current tr
+            pluginState.binding.setSnapshot(snapshot, prevSnapshot);
+          }, 0);
+          return pluginState;
+        }
+
         return pluginState;
       },
     },
@@ -139,27 +176,29 @@ export const ySyncPlugin = (
           }
 
           const binding = pluginState.binding;
-          if (
-            // If the content doesn't change initially, we don't render anything to Yjs
-            // If the content was cleared by a user action, we want to catch the change and
-            // represent it in Yjs
-            initialContentChanged ||
-            view.state.doc.content.findDiffStart(
-                view.state.doc.type.createAndFill()!.content,
-              ) !== null
-          ) {
-            initialContentChanged = true;
+          if (binding.isEditable()) {
             if (
-              pluginState.binding.addToYjsHistory === false &&
-              !pluginState.isChangeOrigin
+              // If the content doesn't change initially, we don't render anything to Yjs
+              // If the content was cleared by a user action, we want to catch the change and
+              // represent it in Yjs
+              initialContentChanged ||
+              view.state.doc.content.findDiffStart(
+                  view.state.doc.type.createAndFill()!.content,
+                ) !== null
             ) {
-              const yUndoPluginState = yUndoPluginKey.getState(view.state);
-              if (yUndoPluginState?.undoManager) {
-                yUndoPluginState.undoManager.stopCapturing();
+              initialContentChanged = true;
+              if (
+                pluginState.binding.addToYjsHistory === false &&
+                !pluginState.isChangeOrigin
+              ) {
+                const yUndoPluginState = yUndoPluginKey.getState(view.state);
+                if (yUndoPluginState?.undoManager) {
+                  yUndoPluginState.undoManager.stopCapturing();
+                }
               }
-            }
 
-            binding.pmChanged();
+              binding.pmChanged();
+            }
           }
         },
         destroy: () => {