@remirror/extension-yjs 1.0.20 → 1.0.24

package/dist/remirror-extension-yjs.esm.js

@@ -1,11 +1,105 @@
 import _applyDecoratedDescriptor from '@babel/runtime/helpers/esm/applyDecoratedDescriptor';
-import { defaultCursorBuilder, ySyncPluginKey, defaultDeleteFilter, ySyncPlugin, yCursorPlugin, yUndoPlugin, yUndoPluginKey, undo, redo, absolutePositionToRelativePosition, relativePositionToAbsolutePosition } from 'y-prosemirror';
-import { UndoManager } from 'yjs';
+import _objectSpread from '@babel/runtime/helpers/esm/objectSpread2';
+import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
+import { defaultCursorBuilder, ySyncPluginKey, ySyncPlugin, yCursorPlugin, defaultDeleteFilter, yUndoPlugin, yUndoPluginKey, undo, redo, absolutePositionToRelativePosition, relativePositionToAbsolutePosition } from 'y-prosemirror';
+import { UndoManager, transact } from 'yjs';
 import { extension, invariant, ErrorConstant, ExtensionPriority, command, keyBinding, NamedShortcut, PlainExtension, isFunction, isEmptyObject, nonChainable, convertCommand } from '@remirror/core';
 import { AnnotationExtension } from '@remirror/extension-annotation';
 import { ExtensionHistoryMessages } from '@remirror/messages';
 
 var _dec, _dec2, _dec3, _dec4, _dec5, _class, _class2;
+
+var _excluded = ["from", "to"],
+    _excluded2 = ["from", "to"];
+
+class YjsAnnotationStore {
+  constructor(doc, pmName, mapName, getMapping) {
+    this.doc = doc;
+    this.getMapping = getMapping;
+    this.type = doc.getXmlFragment(pmName);
+    this.map = doc.getMap(mapName);
+  }
+
+  addAnnotation(_ref) {
+    var from = _ref.from,
+        to = _ref.to,
+        data = _objectWithoutProperties(_ref, _excluded);
+
+    // XXX: Why is this cast needed?
+    var storedData = _objectSpread(_objectSpread({}, data), {}, {
+      from: this.absolutePositionToRelativePosition(from),
+      to: this.absolutePositionToRelativePosition(to)
+    });
+
+    this.map.set(data.id, storedData);
+  }
+
+  updateAnnotation(id, updateData) {
+    var existing = this.map.get(id);
+
+    if (!existing) {
+      return;
+    }
+
+    this.map.set(id, _objectSpread(_objectSpread({}, updateData), {}, {
+      from: existing.from,
+      to: existing.to
+    }));
+  }
+
+  removeAnnotations(ids) {
+    transact(this.doc, () => {
+      ids.forEach(id => this.map.delete(id));
+    });
+  }
+
+  setAnnotations(annotations) {
+    transact(this.doc, () => {
+      this.map.clear();
+      annotations.forEach(annotation => this.addAnnotation(annotation));
+    });
+  }
+
+  formatAnnotations() {
+    var result = [];
+    this.map.forEach(_ref2 => {
+      var relFrom = _ref2.from,
+          relTo = _ref2.to,
+          data = _objectWithoutProperties(_ref2, _excluded2);
+
+      var from = this.relativePositionToAbsolutePosition(relFrom);
+      var to = this.relativePositionToAbsolutePosition(relTo);
+
+      if (!from || !to) {
+        return;
+      } // XXX: Why is this cast needed?
+
+
+      result.push(_objectSpread(_objectSpread({}, data), {}, {
+        from,
+        to
+      }));
+    });
+    return result;
+  }
+
+  absolutePositionToRelativePosition(pos) {
+    var mapping = this.getMapping();
+    return absolutePositionToRelativePosition(pos, this.type, mapping);
+  }
+
+  relativePositionToAbsolutePosition(relPos) {
+    var mapping = this.getMapping();
+    return relativePositionToAbsolutePosition(this.doc, this.type, relPos, mapping);
+  }
+
+}
+/**
+ * The YJS extension is the recommended extension for creating a collaborative
+ * editor.
+ */
+
+
 var YjsExtension = (_dec = extension({
   defaultOptions: {
     getProvider: () => {
@@ -19,29 +113,31 @@ var YjsExtension = (_dec = extension({
     cursorBuilder: defaultCursorBuilder,
     cursorStateField: 'cursor',
     getSelection: state => state.selection,
+    disableUndo: false,
     protectedNodes: new Set('paragraph'),
     trackedOrigins: []
   },
+  staticKeys: ['disableUndo', 'protectedNodes', 'trackedOrigins'],
   defaultPriority: ExtensionPriority.High
 }), _dec2 = command({
   disableChaining: true,
-  description: _ref => {
-    var t = _ref.t;
+  description: _ref3 => {
+    var t = _ref3.t;
     return t(ExtensionHistoryMessages.UNDO_DESCRIPTION);
   },
-  label: _ref2 => {
-    var t = _ref2.t;
+  label: _ref4 => {
+    var t = _ref4.t;
     return t(ExtensionHistoryMessages.UNDO_LABEL);
   },
   icon: 'arrowGoBackFill'
 }), _dec3 = command({
   disableChaining: true,
-  description: _ref3 => {
-    var t = _ref3.t;
+  description: _ref5 => {
+    var t = _ref5.t;
     return t(ExtensionHistoryMessages.REDO_DESCRIPTION);
   },
-  label: _ref4 => {
-    var t = _ref4.t;
+  label: _ref6 => {
+    var t = _ref6.t;
     return t(ExtensionHistoryMessages.REDO_LABEL);
   },
   icon: 'arrowGoForwardFill'
@@ -66,12 +162,24 @@ var YjsExtension = (_dec = extension({
     return (_this$_provider = this._provider) !== null && _this$_provider !== void 0 ? _this$_provider : this._provider = getLazyValue(getProvider);
   }
 
+  getBinding() {
+    var state = this.store.getState();
+
+    var _ySyncPluginKey$getSt = ySyncPluginKey.getState(state),
+        binding = _ySyncPluginKey$getSt.binding;
+
+    return binding;
+  }
+
   onView() {
     try {
+      var annotationStore = new YjsAnnotationStore(this.provider.doc, 'prosemirror', 'annotations', () => {
+        var _this$getBinding;
+
+        return (_this$getBinding = this.getBinding()) === null || _this$getBinding === void 0 ? void 0 : _this$getBinding.mapping;
+      });
       this.store.manager.getExtension(AnnotationExtension).setOptions({
-        getMap: () => this.provider.doc.getMap('annotations'),
-        transformPosition: this.absolutePositionToRelativePosition.bind(this),
-        transformPositionBeforeRender: this.relativePositionToAbsolutePosition.bind(this)
+        getStore: () => annotationStore
       });
 
       var handler = (_update, _origin, _doc, yjsTr) => {
@@ -103,21 +211,28 @@ var YjsExtension = (_dec = extension({
         cursorBuilder = _this$options.cursorBuilder,
         getSelection = _this$options.getSelection,
         cursorStateField = _this$options.cursorStateField,
+        disableUndo = _this$options.disableUndo,
         protectedNodes = _this$options.protectedNodes,
         trackedOrigins = _this$options.trackedOrigins;
     var yDoc = this.provider.doc;
     var type = yDoc.getXmlFragment('prosemirror');
-    var undoManager = new UndoManager(type, {
-      trackedOrigins: new Set([ySyncPluginKey, ...trackedOrigins]),
-      deleteFilter: item => defaultDeleteFilter(item, protectedNodes)
-    });
-    return [ySyncPlugin(type, syncPluginOptions), yCursorPlugin(this.provider.awareness, {
+    var plugins = [ySyncPlugin(type, syncPluginOptions), yCursorPlugin(this.provider.awareness, {
       cursorBuilder,
       cursorStateField,
       getSelection
-    }, cursorStateField), yUndoPlugin({
-      undoManager
-    })];
+    }, cursorStateField)];
+
+    if (!disableUndo) {
+      var undoManager = new UndoManager(type, {
+        trackedOrigins: new Set([ySyncPluginKey, ...trackedOrigins]),
+        deleteFilter: item => defaultDeleteFilter(item, protectedNodes)
+      });
+      plugins.push(yUndoPlugin({
+        undoManager
+      }));
+    }
+
+    return plugins;
   }
   /**
    * This managers the updates of the collaboration provider.
@@ -127,14 +242,7 @@ var YjsExtension = (_dec = extension({
   onSetOptions(props) {
     var changes = props.changes,
         pickChanged = props.pickChanged;
-    var changedPluginOptions = pickChanged(['cursorBuilder', 'cursorStateField', 'getProvider', 'getSelection', 'syncPluginOptions', 'protectedNodes', 'trackedOrigins']);
-
-    if (changes.protectedNodes.changed || changes.trackedOrigins.changed) {
-      // Cannot change these, as we would need a new undo manager instance, and for that
-      // we would need to unregister the previous instance from the document to avoid
-      // memory leaks.
-      throw new Error("Cannot change \"protectedNodes\" or \"trackedOrigins\" options");
-    }
+    var changedPluginOptions = pickChanged(['cursorBuilder', 'cursorStateField', 'getProvider', 'getSelection', 'syncPluginOptions']);
 
     if (changes.getProvider.changed) {
       this._provider = undefined;
@@ -167,16 +275,19 @@ var YjsExtension = (_dec = extension({
     this._provider = undefined;
   }
   /**
-   * Undo within a collaborative editor.
-   *
-   * This should be used instead of the built in `undo` command.
+   * Undo that last Yjs transaction(s)
    *
    * This command does **not** support chaining.
+   * This command is a no-op and always returns `false` when the `disableUndo` option is set.
    */
 
 
   yUndo() {
     return nonChainable(props => {
+      if (this.options.disableUndo) {
+        return false;
+      }
+
       var state = props.state,
           dispatch = props.dispatch;
       var undoManager = yUndoPluginKey.getState(state).undoManager;
@@ -193,16 +304,19 @@ var YjsExtension = (_dec = extension({
     });
   }
   /**
-   * Redo, within a collaborative editor.
-   *
-   * This should be used instead of the built in `redo` command.
+   * Redo the last transaction undone with a previous `yUndo` command.
    *
    * This command does **not** support chaining.
+   * This command is a no-op and always returns `false` when the `disableUndo` option is set.
    */
 
 
   yRedo() {
     return nonChainable(props => {
+      if (this.options.disableUndo) {
+        return false;
+      }
+
       var state = props.state,
           dispatch = props.dispatch;
       var undoManager = yUndoPluginKey.getState(state).undoManager;
@@ -235,26 +349,6 @@ var YjsExtension = (_dec = extension({
     return this.yRedo()(props);
   }
 
-  absolutePositionToRelativePosition(pos) {
-    var state = this.store.getState();
-
-    var _ySyncPluginKey$getSt = ySyncPluginKey.getState(state),
-        type = _ySyncPluginKey$getSt.type,
-        binding = _ySyncPluginKey$getSt.binding;
-
-    return absolutePositionToRelativePosition(pos, type, binding.mapping);
-  }
-
-  relativePositionToAbsolutePosition(relPos) {
-    var state = this.store.getState();
-
-    var _ySyncPluginKey$getSt2 = ySyncPluginKey.getState(state),
-        type = _ySyncPluginKey$getSt2.type,
-        binding = _ySyncPluginKey$getSt2.binding;
-
-    return relativePositionToAbsolutePosition(this.provider.doc, type, relPos, binding.mapping);
-  }
-
 }, (_applyDecoratedDescriptor(_class2.prototype, "yUndo", [_dec2], Object.getOwnPropertyDescriptor(_class2.prototype, "yUndo"), _class2.prototype), _applyDecoratedDescriptor(_class2.prototype, "yRedo", [_dec3], Object.getOwnPropertyDescriptor(_class2.prototype, "yRedo"), _class2.prototype), _applyDecoratedDescriptor(_class2.prototype, "undoShortcut", [_dec4], Object.getOwnPropertyDescriptor(_class2.prototype, "undoShortcut"), _class2.prototype), _applyDecoratedDescriptor(_class2.prototype, "redoShortcut", [_dec5], Object.getOwnPropertyDescriptor(_class2.prototype, "redoShortcut"), _class2.prototype)), _class2)) || _class);
 /**
  * The default destroy provider method.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remirror/extension-yjs",
-  "version": "1.0.20",
+  "version": "1.0.24",
   "description": "Realtime collaboration with yjs",
   "keywords": [
     "remirror",
@@ -44,8 +44,8 @@
   ],
   "dependencies": {
     "@babel/runtime": "^7.13.10",
-    "@remirror/core": "^1.3.3",
-    "@remirror/extension-annotation": "^1.1.11",
+    "@remirror/core": "^1.3.5",
+    "@remirror/extension-annotation": "^1.1.15",
     "@remirror/messages": "^1.0.6",
     "y-prosemirror": "^1.0.14",
     "y-protocols": "^1.0.5"