@kerebron/extension-yjs 0.3.0 → 0.3.2

package/esm/extension-yjs/src/ySyncPlugin.js

@@ -15,10 +15,6 @@ import * as map from 'lib0/map';
 import { ySyncPluginKey, yUndoPluginKey } from './keys.js';
 import * as utils from './utils.js';
 import { absolutePositionToRelativePosition, relativePositionToAbsolutePosition, } from './lib.js';
-export const createEmptyMeta = () => ({
-    mapping: new Map(),
-    isOMark: new Map(),
-});
 export const isVisible = (item, snapshot) => snapshot === undefined
     ? !item.deleted
     : (snapshot.sv.has(item.id.client) && /** @type {number} */
@@ -38,7 +34,7 @@ const getUserColor = (colorMapping, colors, user) => {
         }
         colorMapping.set(user, random.oneOf(colors));
     }
-    return /** @type {ColorDef} */ (colorMapping.get(user));
+    return colorMapping.get(user);
 };
 /**
  * This plugin listens to changes in prosemirror view and keeps yXmlState and view in sync.
@@ -94,7 +90,7 @@ export const ySyncPlugin = (yXmlFragment, { colors = defaultColors, colorMapping
                     if (change !== undefined &&
                         (change.snapshot != null || change.prevSnapshot != null)) {
                         // snapshot changed, rerender next
-                        eventloop.timeout(0, () => {
+                        setTimeout(() => {
                             if (binding.prosemirrorView == null) {
                                 return;
                             }
@@ -111,7 +107,7 @@ export const ySyncPlugin = (yXmlFragment, { colors = defaultColors, colorMapping
                                     binding._prosemirrorChanged(binding.prosemirrorView.state.doc);
                                 });
                             }
-                        });
+                        }, 0);
                     }
                 }
                 return pluginState;
@@ -138,14 +134,12 @@ export const ySyncPlugin = (yXmlFragment, { colors = defaultColors, colorMapping
                             if (pluginState.addToHistory === false &&
                                 !pluginState.isChangeOrigin) {
                                 const yUndoPluginState = yUndoPluginKey.getState(view.state);
-                                const um = yUndoPluginState &&
-                                    yUndoPluginState.undoManager;
-                                if (um) {
-                                    um.stopCapturing();
+                                if (yUndoPluginState?.undoManager) {
+                                    yUndoPluginState.undoManager.stopCapturing();
                                 }
                             }
                             binding.mux(() => {
-                                /** @type {Y.Doc} */ (pluginState.doc).transact((tr) => {
+                                pluginState.doc.transact((tr) => {
                                     tr.meta.set('addToHistory', pluginState.addToHistory);
                                     binding._prosemirrorChanged(view.state.doc);
                                 }, ySyncPluginKey);
@@ -167,12 +161,12 @@ const restoreRelativeSelection = (tr, relSel, binding) => {
             tr.setSelection(new AllSelection(tr.doc));
         }
         else if (relSel.type === 'node') {
-            const anchor = relativePositionToAbsolutePosition(binding.doc, binding.type, relSel.anchor, binding.mapping);
+            const anchor = relativePositionToAbsolutePosition(binding.ydoc, binding.type, relSel.anchor, binding.mapping);
             tr.setSelection(NodeSelection.create(tr.doc, anchor));
         }
         else {
-            const anchor = relativePositionToAbsolutePosition(binding.doc, binding.type, relSel.anchor, binding.mapping);
-            const head = relativePositionToAbsolutePosition(binding.doc, binding.type, relSel.head, binding.mapping);
+            const anchor = relativePositionToAbsolutePosition(binding.ydoc, binding.type, relSel.anchor, binding.mapping);
+            const head = relativePositionToAbsolutePosition(binding.ydoc, binding.type, relSel.head, binding.mapping);
             if (anchor !== null && head !== null) {
                 const sel = TextSelection.between(tr.doc.resolve(anchor), tr.doc.resolve(head));
                 tr.setSelection(sel);
@@ -180,8 +174,20 @@ const restoreRelativeSelection = (tr, relSel, binding) => {
         }
     }
 };
+function getSelectionType(selection) {
+    if (selection instanceof TextSelection) {
+        return 'text';
+    }
+    if (selection instanceof AllSelection) {
+        return 'all';
+    }
+    if (selection instanceof NodeSelection) {
+        return 'node';
+    }
+    return 'other_selection';
+}
 export const getRelativeSelection = (pmbinding, state) => ({
-    type: /** @type {any} */ (state.selection).jsonID,
+    type: getSelectionType(state.selection),
     anchor: absolutePositionToRelativePosition(state.selection.anchor, pmbinding.type, pmbinding.mapping),
     head: absolutePositionToRelativePosition(state.selection.head, pmbinding.type, pmbinding.mapping),
 });
@@ -198,61 +204,61 @@ export class ProsemirrorBinding {
         this._beforeTransactionSelection = value;
     }
     constructor(yXmlFragment, mapping = new Map()) {
-        Object.defineProperty(this, "doc", {
+        Object.defineProperty(this, "mapping", {
             enumerable: true,
             configurable: true,
             writable: true,
-            value: void 0
+            value: mapping
         });
-        Object.defineProperty(this, "type", {
+        Object.defineProperty(this, "ydoc", {
             enumerable: true,
             configurable: true,
             writable: true,
             value: void 0
         });
-        Object.defineProperty(this, "mux", {
+        Object.defineProperty(this, "isOMark", {
             enumerable: true,
             configurable: true,
             writable: true,
             value: void 0
         });
-        Object.defineProperty(this, "prosemirrorView", {
+        Object.defineProperty(this, "type", {
             enumerable: true,
             configurable: true,
             writable: true,
             value: void 0
         });
-        Object.defineProperty(this, "isOMark", {
+        Object.defineProperty(this, "mux", {
             enumerable: true,
             configurable: true,
             writable: true,
             value: void 0
         });
-        Object.defineProperty(this, "_observeFunction", {
+        Object.defineProperty(this, "prosemirrorView", {
             enumerable: true,
             configurable: true,
             writable: true,
             value: void 0
         });
-        Object.defineProperty(this, "mapping", {
+        Object.defineProperty(this, "_beforeTransactionSelection", {
             enumerable: true,
             configurable: true,
             writable: true,
             value: void 0
         });
-        Object.defineProperty(this, "_beforeTransactionSelection", {
+        Object.defineProperty(this, "beforeAllTransactions", {
             enumerable: true,
             configurable: true,
             writable: true,
             value: void 0
         });
-        Object.defineProperty(this, "beforeAllTransactions", {
+        Object.defineProperty(this, "afterAllTransactions", {
             enumerable: true,
             configurable: true,
             writable: true,
             value: void 0
         });
-        Object.defineProperty(this, "afterAllTransactions", {
+        Object.defineProperty(this, "_observeFunction", {
             enumerable: true,
             configurable: true,
             writable: true,
@@ -262,18 +268,17 @@ export class ProsemirrorBinding {
             enumerable: true,
             configurable: true,
             writable: true,
-            value: void 0
+            value: false
         });
         this.type = yXmlFragment;
         this.prosemirrorView = null;
         this.mux = createMutex();
-        this.mapping = mapping;
         /**
          * Is overlapping mark - i.e. mark does not exclude itself.
          */
         this.isOMark = new Map();
-        this._observeFunction = this._typeChanged.bind(this);
-        this.doc = yXmlFragment.doc;
+        this._observeFunction = (event, transaction) => this.yXmlChanged(event, transaction);
+        this.ydoc = yXmlFragment.doc;
         /**
          * current selection as relative positions in the Yjs model
          */
@@ -287,31 +292,26 @@ export class ProsemirrorBinding {
         this.afterAllTransactions = () => {
             this._beforeTransactionSelection = null;
         };
-        this._domSelectionInView = null;
+        this._domSelectionInView = false;
     }
-    /**
-     * Create a transaction for changing the prosemirror state.
-     *
-     * @returns
-     */
-    get _tr() {
-        return this.prosemirrorView.state.tr.setMeta('addToHistory', false);
+    debug(msg = 'ydoc.prosemirror') {
+        console.log(msg, this.type.toString());
     }
     _isLocalCursorInView() {
-        if (!this.prosemirrorView.hasFocus())
+        if (!this.prosemirrorView?.hasFocus())
             return false;
-        if (environment.isBrowser && this._domSelectionInView === null) {
+        if (environment.isBrowser && this._domSelectionInView === false) {
             // Calculate the domSelectionInView and clear by next tick after all events are finished
             eventloop.timeout(0, () => {
-                this._domSelectionInView = null;
+                this._domSelectionInView = false;
             });
             this._domSelectionInView = this._isDomSelectionInView();
         }
         return this._domSelectionInView;
     }
     _isDomSelectionInView() {
-        const selection = this.prosemirrorView.root.getSelection(); // https://stackoverflow.com/questions/62054839/shadowroot-getselection
-        if (selection == null || selection.anchorNode == null)
+        const selection = this.prosemirrorView?.root?.getSelection(); // https://stackoverflow.com/questions/62054839/shadowroot-getselection
+        if (!selection || selection.anchorNode == null)
             return false;
         const range = dom.doc.createRange(); // https://github.com/yjs/y-prosemirror/pull/193
         range.setStart(selection.anchorNode, selection.anchorOffset);
@@ -337,15 +337,22 @@ export class ProsemirrorBinding {
         if (!prevSnapshot) {
             prevSnapshot = Y.createSnapshot(Y.createDeleteSet(), new Map());
         }
-        this.prosemirrorView.dispatch(this._tr.setMeta(ySyncPluginKey, { snapshot, prevSnapshot }));
+        if (this.prosemirrorView) {
+            const _tr = this.prosemirrorView.state.tr.setMeta('addToHistory', false);
+            this.prosemirrorView.dispatch(_tr.setMeta(ySyncPluginKey, { snapshot, prevSnapshot }));
+        }
     }
     unrenderSnapshot() {
         this.mapping.clear();
         this.mux(() => {
-            const fragmentContent = this.type.toArray().map((t) => createNodeFromYElement(
-            /** @type {Y.XmlElement} */ (t), this.prosemirrorView.state.schema, this)).filter((n) => n !== null);
+            if (!this.prosemirrorView) {
+                return;
+            }
+            const state = this.prosemirrorView.state;
+            const fragmentContent = this.type.toArray().map((t) => createNodeFromYElement(t, state.schema, this)).filter((n) => n !== null);
             // @ts-ignore
-            const tr = this._tr.replace(0, this.prosemirrorView.state.doc.content.size, new PModel.Slice(PModel.Fragment.from(fragmentContent), 0, 0));
+            const _tr = state.tr.setMeta('addToHistory', false);
+            const tr = _tr.replace(0, state.doc.content.size, new PModel.Slice(PModel.Fragment.from(fragmentContent), 0, 0));
             tr.setMeta(ySyncPluginKey, { snapshot: null, prevSnapshot: null });
             this.prosemirrorView.dispatch(tr);
         });
@@ -353,16 +360,21 @@ export class ProsemirrorBinding {
     _forceRerender() {
         this.mapping.clear();
         this.mux(() => {
+            if (!this.prosemirrorView) {
+                return;
+            }
+            const state = this.prosemirrorView.state;
             // If this is a forced rerender, this might neither happen as a pm change nor within a Yjs
             // transaction. Then the "before selection" doesn't exist. In this case, we need to create a
             // relative position before replacing content. Fixes #126
             const sel = this._beforeTransactionSelection !== null
                 ? null
-                : this.prosemirrorView.state.selection;
+                : state.selection;
             const fragmentContent = this.type.toArray().map((t) => createNodeFromYElement(
-            /** @type {Y.XmlElement} */ (t), this.prosemirrorView.state.schema, this)).filter((n) => n !== null);
+            /** @type {Y.XmlElement} */ (t), state.schema, this)).filter((n) => n !== null);
             // @ts-ignore
-            const tr = this._tr.replace(0, this.prosemirrorView.state.doc.content.size, new PModel.Slice(PModel.Fragment.from(fragmentContent), 0, 0));
+            const _tr = state.tr.setMeta('addToHistory', false);
+            const tr = _tr.replace(0, state.doc.content.size, new PModel.Slice(PModel.Fragment.from(fragmentContent), 0, 0));
             if (sel) {
                 /**
                  * If the Prosemirror document we just created from this.type is
@@ -380,10 +392,10 @@ export class ProsemirrorBinding {
         /**
          * The document that contains the full history of this document.
          */
-        let historyDoc = this.doc;
+        let historyDoc = this.ydoc;
         let historyType = this.type;
         if (!snapshot) {
-            snapshot = Y.snapshot(this.doc);
+            snapshot = Y.snapshot(this.ydoc);
         }
         if (snapshot instanceof Uint8Array || prevSnapshot instanceof Uint8Array) {
             if (!(snapshot instanceof Uint8Array) ||
@@ -401,7 +413,7 @@ export class ProsemirrorBinding {
                  * 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 rootKey = Array.from(this.doc.share.keys()).find((key) => this.doc.share.get(key) === this.type);
+                const rootKey = Array.from(this.ydoc.share.keys()).find((key) => this.ydoc.share.get(key) === this.type);
                 historyType = historyDoc.getXmlFragment(rootKey);
             }
             else {
@@ -452,13 +464,13 @@ export class ProsemirrorBinding {
                         return null;
                     }
                 }).filter((n) => n !== null);
-                // @ts-ignore
-                const tr = this._tr.replace(0, this.prosemirrorView.state.doc.content.size, new PModel.Slice(PModel.Fragment.from(fragmentContent), 0, 0));
+                const _tr = this.prosemirrorView.state.tr.setMeta('addToHistory', false);
+                const tr = _tr.replace(0, this.prosemirrorView.state.doc.content.size, new PModel.Slice(PModel.Fragment.from(fragmentContent), 0, 0));
                 this.prosemirrorView.dispatch(tr.setMeta(ySyncPluginKey, { isChangeOrigin: true }));
             }, ySyncPluginKey);
         });
     }
-    _typeChanged(events, transaction) {
+    yXmlChanged(events, transaction) {
         if (this.prosemirrorView == null)
             return;
         const syncState = ySyncPluginKey.getState(this.prosemirrorView.state);
@@ -480,11 +492,20 @@ export class ProsemirrorBinding {
             });
             transaction.changed.forEach(delType);
             transaction.changedParentTypes.forEach(delType);
+            if (!this.prosemirrorView) {
+                return;
+            }
+            const state = this.prosemirrorView.state;
             const fragmentContent = this.type.toArray().map((t) => createNodeIfNotExists(
-            /** @type {Y.XmlElement | Y.XmlHook} */ (t), this.prosemirrorView.state.schema, this)).filter((n) => n !== null);
-            // @ts-ignore
-            let tr = this._tr.replace(0, this.prosemirrorView.state.doc.content.size, new PModel.Slice(PModel.Fragment.from(fragmentContent), 0, 0));
-            restoreRelativeSelection(tr, this._beforeTransactionSelection, this);
+            /** @type {Y.XmlElement | Y.XmlHook} */ (t), state.schema, this)).filter((n) => n !== null);
+            const _tr = state.tr.setMeta('addToHistory', false);
+            let tr = _tr.replace(0, state.doc.content.size, new PModel.Slice(PModel.Fragment.from(fragmentContent), 0, 0));
+            try {
+                restoreRelativeSelection(tr, this._beforeTransactionSelection, this);
+            }
+            catch (err) {
+                console.warn(err);
+            }
             tr = tr.setMeta(ySyncPluginKey, {
                 isChangeOrigin: true,
                 isUndoRedoOperation: transaction.origin instanceof Y.UndoManager,
@@ -496,8 +517,8 @@ export class ProsemirrorBinding {
         });
     }
     _prosemirrorChanged(doc) {
-        this.doc.transact(() => {
-            updateYFragment(this.doc, this.type, doc, this);
+        this.ydoc.transact(() => {
+            updateYFragment(this.ydoc, this.type, doc, this);
             this._beforeTransactionSelection = getRelativeSelection(this, this.prosemirrorView.state);
         }, ySyncPluginKey);
     }
@@ -508,8 +529,8 @@ export class ProsemirrorBinding {
         if (this.prosemirrorView != null)
             this.destroy();
         this.prosemirrorView = prosemirrorView;
-        this.doc.on('beforeAllTransactions', this.beforeAllTransactions);
-        this.doc.on('afterAllTransactions', this.afterAllTransactions);
+        this.ydoc.on('beforeAllTransactions', this.beforeAllTransactions);
+        this.ydoc.on('afterAllTransactions', this.afterAllTransactions);
         this.type.observeDeep(this._observeFunction);
     }
     destroy() {
@@ -517,12 +538,12 @@ export class ProsemirrorBinding {
             return;
         this.prosemirrorView = null;
         this.type.unobserveDeep(this._observeFunction);
-        this.doc.off('beforeAllTransactions', this.beforeAllTransactions);
-        this.doc.off('afterAllTransactions', this.afterAllTransactions);
+        this.ydoc.off('beforeAllTransactions', this.beforeAllTransactions);
+        this.ydoc.off('afterAllTransactions', this.afterAllTransactions);
     }
 }
 const createNodeIfNotExists = (el, schema, meta, snapshot, prevSnapshot, computeYChange) => {
-    const node = /** @type {PModel.Node} */ (meta.mapping.get(el));
+    const node = meta.mapping.get(el);
     if (node === undefined) {
         if (el instanceof Y.XmlElement) {
             return createNodeFromYElement(el, schema, meta, snapshot, prevSnapshot, computeYChange);
@@ -757,9 +778,6 @@ const computeChildEqualityFactor = (ytype, pnode, meta) => {
 };
 const ytextTrans = (ytext) => {
     let str = '';
-    /**
-     * @type {Y.Item|null}
-     */
     let n = ytext._start;
     const nAttrs = {};
     while (n !== null) {

package/esm/extension-yjs/src/yUndoPlugin.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"yUndoPlugin.d.ts","sourceRoot":"","sources":["../../../src/extension-yjs/src/yUndoPlugin.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AACjE,OAAO,EAA2B,WAAW,EAAc,MAAM,KAAK,CAAC;AAEvE,OAAO,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAC;AAGxD,MAAM,WAAW,eAAe;IAC9B,WAAW,EAAE,WAAW,CAAC;IACzB,OAAO,EAAE,UAAU,CAAC,OAAO,oBAAoB,CAAC,GAAG,IAAI,CAAC;IACxD,UAAU,EAAE,OAAO,CAAC;IACpB,UAAU,EAAE,OAAO,CAAC;CACrB;AAED,eAAO,MAAM,IAAI,GAAI,OAAO,WAAW,KAAG,OACmB,CAAC;AAE9D,eAAO,MAAM,IAAI,GAAI,OAAO,WAAW,KAAG,OACmB,CAAC;AAE9D,eAAO,MAAM,WAAW,EAAE,OAGT,CAAC;AAElB,eAAO,MAAM,WAAW,EAAE,OAGT,CAAC;AAElB,eAAO,MAAM,qBAAqB,aAAyB,CAAC;AAE5D,eAAO,MAAM,mBAAmB,GAC9B,MAAM,OAAO,KAAK,EAAE,IAAI,EACxB,gBAAgB,GAAG,CAAC,MAAM,CAAC,KAC1B,OAM8B,CAAC;AAElC,eAAO,MAAM,WAAW,GAAI,mDAIzB;IACD,cAAc,CAAC,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IAC7B,cAAc,CAAC,EAAE,GAAG,EAAE,CAAC;IACvB,WAAW,CAAC,EAAE,OAAO,KAAK,EAAE,WAAW,GAAG,IAAI,CAAC;CAC3C,gBAoEF,CAAC"}
+{"version":3,"file":"yUndoPlugin.d.ts","sourceRoot":"","sources":["../../../src/extension-yjs/src/yUndoPlugin.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AACjE,OAAO,EAA2B,WAAW,EAAc,MAAM,KAAK,CAAC;AAEvE,OAAO,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAC;AAGxD,MAAM,WAAW,eAAe;IAC9B,WAAW,EAAE,WAAW,CAAC;IACzB,OAAO,EAAE,UAAU,CAAC,OAAO,oBAAoB,CAAC,GAAG,IAAI,CAAC;IACxD,UAAU,EAAE,OAAO,CAAC;IACpB,UAAU,EAAE,OAAO,CAAC;CACrB;AAED,eAAO,MAAM,IAAI,GAAI,OAAO,WAAW,KAAG,OACmB,CAAC;AAE9D,eAAO,MAAM,IAAI,GAAI,OAAO,WAAW,KAAG,OACmB,CAAC;AAE9D,eAAO,MAAM,WAAW,EAAE,OAGT,CAAC;AAElB,eAAO,MAAM,WAAW,EAAE,OAGT,CAAC;AAElB,eAAO,MAAM,qBAAqB,aAAyB,CAAC;AAE5D,eAAO,MAAM,mBAAmB,GAC9B,MAAM,OAAO,KAAK,EAAE,IAAI,EACxB,gBAAgB,GAAG,CAAC,MAAM,CAAC,KAC1B,OAM8B,CAAC;AAElC,eAAO,MAAM,WAAW,GAAI,mDAIzB;IACD,cAAc,CAAC,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IAC7B,cAAc,CAAC,EAAE,GAAG,EAAE,CAAC;IACvB,WAAW,CAAC,EAAE,OAAO,KAAK,EAAE,WAAW,GAAG,IAAI,CAAC;CAC3C,gBAuEF,CAAC"}

package/esm/extension-yjs/src/yUndoPlugin.js

@@ -63,23 +63,26 @@ export const yUndoPlugin = ({ protectedNodes = defaultProtectedNodes, trackedOri
     },
     view: (view) => {
         const ystate = ySyncPluginKey.getState(view.state);
-        const undoManager = yUndoPluginKey.getState(view.state).undoManager;
-        undoManager.on('stack-item-added', ({ stackItem }) => {
-            const binding = ystate.binding;
-            if (binding) {
-                stackItem.meta.set(binding, yUndoPluginKey.getState(view.state).prevSel);
-            }
-        });
-        undoManager.on('stack-item-popped', ({ stackItem }) => {
-            const binding = ystate.binding;
-            if (binding) {
-                binding.beforeTransactionSelection = stackItem.meta.get(binding) ||
-                    binding.beforeTransactionSelection;
-            }
-        });
+        const yUndoPlugin = yUndoPluginKey.getState(view.state);
+        const undoManager = yUndoPlugin?.undoManager;
+        if (undoManager) {
+            undoManager.on('stack-item-added', ({ stackItem }) => {
+                const binding = ystate.binding;
+                if (binding) {
+                    stackItem.meta.set(binding, yUndoPlugin.prevSel);
+                }
+            });
+            undoManager.on('stack-item-popped', ({ stackItem }) => {
+                const binding = ystate.binding;
+                if (binding) {
+                    binding.beforeTransactionSelection = stackItem.meta.get(binding) ||
+                        binding.beforeTransactionSelection;
+                }
+            });
+        }
         return {
             destroy: () => {
-                undoManager.destroy();
+                undoManager?.destroy();
             },
         };
     },

package/esm/package.json

@@ -0,0 +1,3 @@
+{
+  "type": "module"
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kerebron/extension-yjs",
-  "version": "0.3.0",
+  "version": "0.3.2",
   "license": "MIT",
   "module": "./esm/extension-yjs/src/ExtensionYjs.js",
   "exports": {
@@ -13,7 +13,7 @@
   },
   "scripts": {},
   "dependencies": {
-    "prosemirror-model": "1.25.2",
+    "prosemirror-model": "1.25.3",
     "prosemirror-state": "1.4.3",
     "prosemirror-transform": "1.10.4",
     "prosemirror-view": "1.40.0",