@kerebron/extension-yjs 0.6.7 → 0.7.0

package/src/lib.ts

@@ -1,238 +1,12 @@
 import * as Y from 'yjs';
-import { type EditorView } from 'prosemirror-view';
 import { type Node } from 'prosemirror-model';
 
-import { ySyncPluginKey } from './keys.js';
+export type TransactFunc<T> = (
+  f: (arg0?: Y.Transaction) => T,
+  origin?: any,
+) => T;
 
 /**
  * Either a node if type is YXmlElement or an Array of text nodes if YXmlText
  */
 export type ProsemirrorMapping = Map<Y.AbstractType<any>, Node | Array<Node>>;
-
-/**
- * Is null if no timeout is in progress.
- * Is defined if a timeout is in progress.
- * Maps from view
- */
-let viewsToUpdate: Map<EditorView, Map<any, any>> | null = null;
-
-const updateMetas = () => {
-  const ups: Map<EditorView, Map<any, any>> | null = viewsToUpdate;
-  viewsToUpdate = null;
-  if (!ups) {
-    return;
-  }
-  ups.forEach((metas, view) => {
-    const tr = view.state.tr;
-    const syncState = ySyncPluginKey.getState(view.state);
-    if (syncState && syncState.binding && !syncState.binding.isDestroyed) {
-      metas.forEach((val, key) => {
-        tr.setMeta(key, val);
-      });
-      view.dispatch(tr);
-    }
-  });
-};
-
-export const setMeta = (view: EditorView, key, value) => {
-  if (!viewsToUpdate) {
-    viewsToUpdate = new Map();
-    setTimeout(updateMetas, 0);
-  }
-
-  let subMap = viewsToUpdate.get(view);
-  if (subMap === undefined) {
-    subMap = new Map();
-    viewsToUpdate.set(view, subMap);
-  }
-  subMap.set(key, value);
-};
-
-/**
- * Transforms a Prosemirror based absolute position to a Yjs Cursor (relative position in the Yjs model).
- */
-export const absolutePositionToRelativePosition = (
-  pos: number,
-  type: Y.XmlFragment,
-  mapping: ProsemirrorMapping,
-): any => {
-  if (pos === 0) {
-    // if the type is later populated, we want to retain the 0 position (hence assoc=-1)
-    return Y.createRelativePositionFromTypeIndex(
-      type,
-      0,
-      type.length === 0 ? -1 : 0,
-    );
-  }
-
-  let n: Y.AbstractType<any> | null = type._first === null
-    ? null
-    : /** @type {Y.ContentType} */ (type._first.content).type;
-  while (n !== null && type !== n) {
-    if (n instanceof Y.XmlText) {
-      if (n._length >= pos) {
-        return Y.createRelativePositionFromTypeIndex(
-          n,
-          pos,
-          type.length === 0 ? -1 : 0,
-        );
-      } else {
-        pos -= n._length;
-      }
-      if (n._item !== null && n._item.next !== null) {
-        n = /** @type {Y.ContentType} */ (n._item.next.content).type;
-      } else {
-        do {
-          n = n._item === null ? null : n._item.parent;
-          pos--;
-        } while (
-          n !== type && n !== null && n._item !== null && n._item.next === null
-        );
-        if (n !== null && n !== type) {
-          // @ts-gnore we know that n.next !== null because of above loop conditition
-          n = n._item === null
-            ? null
-            : /** @type {Y.ContentType} */ (/** @type Y.Item */ (n._item.next)
-              .content).type;
-        }
-      }
-    } else {
-      const pNodeSize =
-        /** @type {any} */ (mapping.get(n) || { nodeSize: 0 }).nodeSize;
-      if (n._first !== null && pos < pNodeSize) {
-        n = /** @type {Y.ContentType} */ (n._first.content).type;
-        pos--;
-      } else {
-        if (pos === 1 && n._length === 0 && pNodeSize > 1) {
-          // edge case, should end in this paragraph
-          return new Y.RelativePosition(
-            n._item === null ? null : n._item.id,
-            n._item === null ? Y.findRootTypeKey(n) : null,
-            null,
-          );
-        }
-        pos -= pNodeSize;
-        if (n._item !== null && n._item.next !== null) {
-          n = /** @type {Y.ContentType} */ (n._item.next.content).type;
-        } else {
-          if (pos === 0) {
-            // set to end of n.parent
-            n = n._item === null ? n : n._item.parent;
-            return new Y.RelativePosition(
-              n._item === null ? null : n._item.id,
-              n._item === null ? Y.findRootTypeKey(n) : null,
-              null,
-            );
-          }
-          do {
-            n = n._item.parent;
-            pos--;
-          } while (n !== type && /** @type {Y.Item} */ (n._item).next === null);
-          // if n is null at this point, we have an unexpected case
-          if (n !== type) {
-            // We know that n._item.next is defined because of above loop condition
-            n =
-              /** @type {Y.ContentType} */ (/** @type {Y.Item} */ (/** @type {Y.Item} */ (n
-                ._item).next).content).type;
-          }
-        }
-      }
-    }
-    if (n === null) {
-      throw new Error('Unexpected case');
-    }
-    if (pos === 0 && n.constructor !== Y.XmlText && n !== type) { // TODO: set to <= 0
-      return createRelativePosition(n._item.parent, n._item);
-    }
-  }
-  return Y.createRelativePositionFromTypeIndex(
-    type,
-    type._length,
-    type.length === 0 ? -1 : 0,
-  );
-};
-
-const createRelativePosition = (type: Y.AbstractType<any>, item: Y.Item) => {
-  let typeid = null;
-  let tname = null;
-  if (type._item === null) {
-    tname = Y.findRootTypeKey(type);
-  } else {
-    typeid = Y.createID(type._item.id.client, type._item.id.clock);
-  }
-  return new Y.RelativePosition(typeid, tname, item.id);
-};
-
-export const relativePositionToAbsolutePosition = (
-  yDoc: Y.Doc,
-  documentType: Y.XmlFragment,
-  relPos: any,
-  mapping: ProsemirrorMapping,
-): null | number => {
-  const decodedPos = Y.createAbsolutePositionFromRelativePosition(relPos, yDoc);
-  if (
-    decodedPos === null ||
-    (decodedPos.type !== documentType &&
-      !Y.isParentOf(documentType, decodedPos.type._item))
-  ) {
-    return null;
-  }
-  let type = decodedPos.type;
-  let pos = 0;
-  if (type instanceof Y.XmlText) {
-    pos = decodedPos.index;
-  } else if (type._item === null || !type._item.deleted) {
-    let n: Y.Item | null = type._first;
-    let i = 0;
-    while (i < type._length && i < decodedPos.index && n !== null) {
-      if (!n.deleted) {
-        const t: Y.AbstractType<any> = n.content.type;
-        i++;
-        if (t instanceof Y.XmlText) {
-          pos += t._length;
-        } else {
-          const node = mapping.get(t);
-          if (Array.isArray(node)) {
-            pos += node.reduce((prev, curr) => prev + curr?.nodeSize || 0, 0);
-          } else {
-            pos += node?.nodeSize || 0;
-          }
-        }
-      }
-      n = n.right;
-    }
-    pos += 1; // increase because we go out of n
-  }
-  while (type !== documentType && type._item !== null) {
-    const parent = type._item.parent;
-    if (parent instanceof Y.ID || parent === null) {
-      continue;
-    }
-    if (parent._item === null || !parent._item.deleted) {
-      pos += 1; // the start tag
-      let n = /** @type {Y.AbstractType} */ (parent)._first;
-      // now iterate until we found type
-      while (n !== null) {
-        const contentType: Y.AbstractType<any> = n.content.type;
-        if (contentType === type) {
-          break;
-        }
-        if (!n.deleted) {
-          if (contentType instanceof Y.XmlText) {
-            pos += contentType._length;
-          } else {
-            const node = mapping.get(contentType);
-            if (Array.isArray(node)) {
-              pos += node.reduce((prev, curr) => prev + curr?.nodeSize || 0, 0);
-            } else {
-              pos += node?.nodeSize || 0;
-            }
-          }
-        }
-        n = n.right;
-      }
-    }
-    type = parent;
-  }
-  return pos - 1; // we don't count the most outer tag, because it is a fragment
-};

package/src/position.ts

@@ -0,0 +1,191 @@
+import * as Y from 'yjs';
+import { ProsemirrorMapping } from './lib.js';
+
+/**
+ * Transforms a Prosemirror based absolute position to a Yjs Cursor (relative position in the Yjs model).
+ */
+export const absolutePositionToRelativePosition = (
+  pos: number,
+  type: Y.XmlFragment,
+  mapping: ProsemirrorMapping,
+): any => {
+  if (pos === 0) {
+    // if the type is later populated, we want to retain the 0 position (hence assoc=-1)
+    return Y.createRelativePositionFromTypeIndex(
+      type,
+      0,
+      type.length === 0 ? -1 : 0,
+    );
+  }
+
+  let n: Y.AbstractType<any> | null = type._first === null
+    ? null
+    : /** @type {Y.ContentType} */ (type._first.content).type;
+  while (n !== null && type !== n) {
+    if (n instanceof Y.XmlText) {
+      if (n._length >= pos) {
+        return Y.createRelativePositionFromTypeIndex(
+          n,
+          pos,
+          type.length === 0 ? -1 : 0,
+        );
+      } else {
+        pos -= n._length;
+      }
+      if (n._item !== null && n._item.next !== null) {
+        n = /** @type {Y.ContentType} */ (n._item.next.content).type;
+      } else {
+        do {
+          n = n._item === null ? null : n._item.parent;
+          pos--;
+        } while (
+          n !== type && n !== null && n._item !== null && n._item.next === null
+        );
+        if (n !== null && n !== type) {
+          // @ts-gnore we know that n.next !== null because of above loop conditition
+          n = n._item === null
+            ? null
+            : /** @type {Y.ContentType} */ (/** @type Y.Item */ (n._item.next)
+              .content).type;
+        }
+      }
+    } else {
+      const pNodeSize =
+        /** @type {any} */ (mapping.get(n) || { nodeSize: 0 }).nodeSize;
+      if (n._first !== null && pos < pNodeSize) {
+        n = /** @type {Y.ContentType} */ (n._first.content).type;
+        pos--;
+      } else {
+        if (pos === 1 && n._length === 0 && pNodeSize > 1) {
+          // edge case, should end in this paragraph
+          return new Y.RelativePosition(
+            n._item === null ? null : n._item.id,
+            n._item === null ? Y.findRootTypeKey(n) : null,
+            null,
+          );
+        }
+        pos -= pNodeSize;
+        if (n._item !== null && n._item.next !== null) {
+          n = /** @type {Y.ContentType} */ (n._item.next.content).type;
+        } else {
+          if (pos === 0) {
+            // set to end of n.parent
+            n = n._item === null ? n : n._item.parent;
+            return new Y.RelativePosition(
+              n._item === null ? null : n._item.id,
+              n._item === null ? Y.findRootTypeKey(n) : null,
+              null,
+            );
+          }
+          do {
+            n = n._item.parent;
+            pos--;
+          } while (n !== type && /** @type {Y.Item} */ (n._item).next === null);
+          // if n is null at this point, we have an unexpected case
+          if (n !== type) {
+            // We know that n._item.next is defined because of above loop condition
+            n =
+              /** @type {Y.ContentType} */ (/** @type {Y.Item} */ (/** @type {Y.Item} */ (n
+                ._item).next).content).type;
+          }
+        }
+      }
+    }
+    if (n === null) {
+      throw new Error('Unexpected case');
+    }
+    if (pos === 0 && n.constructor !== Y.XmlText && n !== type) { // TODO: set to <= 0
+      return createRelativePosition(n._item.parent, n._item);
+    }
+  }
+  return Y.createRelativePositionFromTypeIndex(
+    type,
+    type._length,
+    type.length === 0 ? -1 : 0,
+  );
+};
+
+const createRelativePosition = (type: Y.AbstractType<any>, item: Y.Item) => {
+  let typeid = null;
+  let tname = null;
+  if (type._item === null) {
+    tname = Y.findRootTypeKey(type);
+  } else {
+    typeid = Y.createID(type._item.id.client, type._item.id.clock);
+  }
+  return new Y.RelativePosition(typeid, tname, item.id);
+};
+
+export const relativePositionToAbsolutePosition = (
+  yDoc: Y.Doc,
+  documentType: Y.XmlFragment,
+  relPos: any,
+  mapping: ProsemirrorMapping,
+): null | number => {
+  const decodedPos = Y.createAbsolutePositionFromRelativePosition(relPos, yDoc);
+  if (
+    decodedPos === null ||
+    (decodedPos.type !== documentType &&
+      !Y.isParentOf(documentType, decodedPos.type._item))
+  ) {
+    return null;
+  }
+  let type = decodedPos.type;
+  let pos = 0;
+  if (type instanceof Y.XmlText) {
+    pos = decodedPos.index;
+  } else if (type._item === null || !type._item.deleted) {
+    let n: Y.Item | null = type._first;
+    let i = 0;
+    while (i < type._length && i < decodedPos.index && n !== null) {
+      if (!n.deleted) {
+        const t: Y.AbstractType<any> = n.content.type;
+        i++;
+        if (t instanceof Y.XmlText) {
+          pos += t._length;
+        } else {
+          const node = mapping.get(t);
+          if (Array.isArray(node)) {
+            pos += node.reduce((prev, curr) => prev + curr?.nodeSize || 0, 0);
+          } else {
+            pos += node?.nodeSize || 0;
+          }
+        }
+      }
+      n = n.right;
+    }
+    pos += 1; // increase because we go out of n
+  }
+  while (type !== documentType && type._item !== null) {
+    const parent = type._item.parent;
+    if (parent instanceof Y.ID || parent === null) {
+      continue;
+    }
+    if (parent._item === null || !parent._item.deleted) {
+      pos += 1; // the start tag
+      let n = /** @type {Y.AbstractType} */ (parent)._first;
+      // now iterate until we found type
+      while (n !== null) {
+        const contentType: Y.AbstractType<any> = n.content.type;
+        if (contentType === type) {
+          break;
+        }
+        if (!n.deleted) {
+          if (contentType instanceof Y.XmlText) {
+            pos += contentType._length;
+          } else {
+            const node = mapping.get(contentType);
+            if (Array.isArray(node)) {
+              pos += node.reduce((prev, curr) => prev + curr?.nodeSize || 0, 0);
+            } else {
+              pos += node?.nodeSize || 0;
+            }
+          }
+        }
+        n = n.right;
+      }
+    }
+    type = parent;
+  }
+  return pos - 1; // we don't count the most outer tag, because it is a fragment
+};

package/src/ui/selection.ts

@@ -0,0 +1,216 @@
+import * as dntShim from "../_dnt.shims.js";
+import * as Y from 'yjs';
+
+import {
+  AllSelection,
+  EditorState,
+  NodeSelection,
+  Selection,
+  TextSelection,
+  Transaction,
+} from 'prosemirror-state';
+
+import { YjsData } from '../binding/PmYjsBinding.js';
+import { ProsemirrorMapping } from '../lib.js';
+import {
+  absolutePositionToRelativePosition,
+  relativePositionToAbsolutePosition,
+} from '../position.js';
+import { CoreEditor } from '@kerebron/editor';
+
+interface TransactionSelection {
+  type: string;
+  anchor: Y.RelativePosition;
+  head: Y.RelativePosition;
+}
+
+const restoreRelativeSelection = (
+  tr: Transaction,
+  relSel: ReturnType<typeof getRelativeSelection>,
+  yjs: YjsData,
+  mapping: ProsemirrorMapping,
+) => {
+  const { ydoc, xmlFragment } = yjs;
+
+  if (relSel !== null && relSel.anchor !== null && relSel.head !== null) {
+    if (relSel.type === 'all') {
+      tr.setSelection(new AllSelection(tr.doc));
+    } else if (relSel.type === 'node') {
+      const anchor = relativePositionToAbsolutePosition(
+        ydoc,
+        xmlFragment,
+        relSel.anchor,
+        mapping,
+      );
+      if (anchor !== null) {
+        tr.setSelection(NodeSelection.create(tr.doc, anchor));
+      }
+    } else {
+      const anchor = relativePositionToAbsolutePosition(
+        ydoc,
+        xmlFragment,
+        relSel.anchor,
+        mapping,
+      );
+      const head = relativePositionToAbsolutePosition(
+        ydoc,
+        xmlFragment,
+        relSel.head,
+        mapping,
+      );
+      if (anchor !== null && head !== null) {
+        const sel = TextSelection.between(
+          tr.doc.resolve(anchor),
+          tr.doc.resolve(head),
+        );
+        tr.setSelection(sel);
+      }
+    }
+  }
+};
+
+export const getRelativeSelection = (
+  xmlFragment: Y.XmlFragment,
+  mapping: ProsemirrorMapping,
+  state: EditorState,
+): TransactionSelection => ({
+  type: getSelectionType(state.selection),
+  anchor: absolutePositionToRelativePosition(
+    state.selection.anchor,
+    xmlFragment,
+    mapping,
+  ),
+  head: absolutePositionToRelativePosition(
+    state.selection.head,
+    xmlFragment,
+    mapping,
+  ),
+});
+
+function getSelectionType(selection: Selection) {
+  if (selection instanceof TextSelection) {
+    return 'text';
+  }
+  if (selection instanceof AllSelection) {
+    return 'all';
+  }
+  if (selection instanceof NodeSelection) {
+    return 'node';
+  }
+  return 'other_selection';
+}
+
+export class SelectionStash {
+  private readonly beforeAllTransactions: () => void;
+  private readonly afterAllTransactions: () => void;
+
+  private _beforeTransactionSelection: TransactionSelection | null = null;
+  private _domSelectionInView: boolean = false;
+
+  constructor(
+    private yjs: YjsData,
+    private mapping: ProsemirrorMapping,
+    private editor: CoreEditor,
+  ) {
+    this.beforeAllTransactions = () => {
+      if (
+        !this._beforeTransactionSelection &&
+        editor.view
+      ) {
+        this._beforeTransactionSelection = getRelativeSelection(
+          yjs.xmlFragment,
+          mapping,
+          editor.state,
+        );
+      }
+    };
+    this.afterAllTransactions = () => {
+      this._beforeTransactionSelection = null;
+    };
+
+    this.yjs.ydoc.on('beforeAllTransactions', this.beforeAllTransactions);
+    this.yjs.ydoc.on('afterAllTransactions', this.afterAllTransactions);
+  }
+
+  destroy() {
+    this.yjs.ydoc.off('beforeAllTransactions', this.beforeAllTransactions);
+    this.yjs.ydoc.off('afterAllTransactions', this.afterAllTransactions);
+  }
+
+  store() {
+    this._beforeTransactionSelection = getRelativeSelection(
+      this.yjs.xmlFragment,
+      this.mapping,
+      this.editor.state,
+    );
+  }
+
+  overwrite(transactionSelection: TransactionSelection) {
+    this._beforeTransactionSelection = transactionSelection;
+  }
+
+  restore(tr: Transaction) {
+    if (this._beforeTransactionSelection) {
+      restoreRelativeSelection(
+        tr,
+        this._beforeTransactionSelection,
+        this.yjs,
+        this.mapping,
+      );
+      if (this._isLocalCursorInView()) {
+        tr.scrollIntoView();
+      }
+    }
+  }
+
+  _isLocalCursorInView(): boolean {
+    if (!this.editor.view.hasFocus()) return false;
+
+    // const isNode = /* @__PURE__ */(() => typeof process !== 'undefined' && process.release && /node|io\.js/.test(process.release.name) && Object.prototype.toString.call(typeof process !== 'undefined' ? process : 0) === '[object process]')()
+    const isBrowser =
+      /* @__PURE__ */ (() =>
+        typeof dntShim.dntGlobalThis !== 'undefined' && typeof document !== 'undefined')(); //  && !isNode
+
+    if (isBrowser && this._domSelectionInView === false) {
+      // Calculate the domSelectionInView and clear by next tick after all events are finished
+      setTimeout(() => {
+        this._domSelectionInView = false;
+      }, 0);
+      this._domSelectionInView = this._isDomSelectionInView();
+    }
+    return this._domSelectionInView;
+  }
+
+  _isDomSelectionInView(): boolean {
+    const view = this.editor.view;
+    if (!('root' in view)) {
+      return false;
+    }
+    const selection = view.root?.getSelection(); // https://stackoverflow.com/questions/62054839/shadowroot-getselection
+
+    if (!selection || selection.anchorNode == null) return false;
+
+    const range = document.createRange(); // https://github.com/yjs/y-prosemirror/pull/193
+    range.setStart(selection.anchorNode, selection.anchorOffset);
+    range.setEnd(selection.focusNode, selection.focusOffset);
+
+    // This is a workaround for an edgecase where getBoundingClientRect will
+    // return zero values if the selection is collapsed at the start of a newline
+    // see reference here: https://stackoverflow.com/a/59780954
+    const rects = range.getClientRects();
+    if (rects.length === 0) {
+      // probably buggy newline behavior, explicitly select the node contents
+      if (range.startContainer && range.collapsed) {
+        range.selectNodeContents(range.startContainer);
+      }
+    }
+
+    const bounding = range.getBoundingClientRect();
+    const documentElement = document.documentElement;
+
+    return bounding.bottom >= 0 && bounding.right >= 0 &&
+      bounding.left <=
+        (globalThis.innerWidth || documentElement.clientWidth || 0) &&
+      bounding.top <= (globalThis.innerHeight || documentElement.clientHeight || 0);
+  }
+}