@remirror/extension-yjs 1.0.19 → 1.0.23

package/dist/declarations/src/yjs-extension.d.ts

@@ -1,5 +1,5 @@
 import type { Doc } from 'yjs';
-import { AcceptUndefined, EditorState, KeyBindingProps, NonChainableCommandFunction, OnSetOptionsProps, PlainExtension, ProsemirrorPlugin, Selection, Shape } from '@remirror/core';
+import { AcceptUndefined, Dispose, EditorState, KeyBindingProps, NonChainableCommandFunction, OnSetOptionsProps, PlainExtension, ProsemirrorPlugin, Selection, Shape, Static } from '@remirror/core';
 export interface ColorDef {
     light: string;
     dark: string;
@@ -54,13 +54,14 @@ export interface YjsOptions<Provider extends YjsRealtimeProvider = YjsRealtimePr
      * @default `(state) => state.selection`
      */
     getSelection?: (state: EditorState) => Selection;
+    disableUndo?: Static<boolean>;
     /**
      * Names of nodes in the editor which should be protected.
      *
      * @default `new Set('paragraph')`
      */
-    protectedNodes?: Set<string>;
-    trackedOrigins?: any[];
+    protectedNodes?: Static<Set<string>>;
+    trackedOrigins?: Static<any[]>;
 }
 /**
  * The YJS extension is the recommended extension for creating a collaborative
@@ -73,7 +74,10 @@ export declare class YjsExtension extends PlainExtension<YjsOptions> {
      * The provider that is being used for the editor.
      */
     get provider(): YjsRealtimeProvider;
-    onView(): void;
+    getBinding(): {
+        mapping: Map<any, any>;
+    } | undefined;
+    onView(): Dispose | void;
     /**
      * Create the yjs plugins.
      */
@@ -87,19 +91,17 @@ export declare class YjsExtension extends PlainExtension<YjsOptions> {
      */
     onDestroy(): void;
     /**
-     * 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(): NonChainableCommandFunction;
     /**
-     * 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(): NonChainableCommandFunction;
     /**
@@ -110,8 +112,6 @@ export declare class YjsExtension extends PlainExtension<YjsOptions> {
      * Handle the redo keybinding for the editor.
      */
     redoShortcut(props: KeyBindingProps): boolean;
-    private absolutePositionToRelativePosition;
-    private relativePositionToAbsolutePosition;
 }
 /**
  * The default destroy provider method.

package/dist/remirror-extension-yjs.browser.cjs.js

@@ -3,6 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var _applyDecoratedDescriptor = require('@babel/runtime/helpers/applyDecoratedDescriptor');
+var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
 var yProsemirror = require('y-prosemirror');
 var yjs = require('yjs');
 var core = require('@remirror/core');
@@ -10,6 +12,98 @@ var extensionAnnotation = require('@remirror/extension-annotation');
 var messages = require('@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) {
+    yjs.transact(this.doc, () => {
+      ids.forEach(id => this.map.delete(id));
+    });
+  }
+
+  setAnnotations(annotations) {
+    yjs.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 yProsemirror.absolutePositionToRelativePosition(pos, this.type, mapping);
+  }
+
+  relativePositionToAbsolutePosition(relPos) {
+    var mapping = this.getMapping();
+    return yProsemirror.relativePositionToAbsolutePosition(this.doc, this.type, relPos, mapping);
+  }
+
+}
+/**
+ * The YJS extension is the recommended extension for creating a collaborative
+ * editor.
+ */
+
+
 var YjsExtension = (_dec = core.extension({
   defaultOptions: {
     getProvider: () => {
@@ -23,29 +117,31 @@ var YjsExtension = (_dec = core.extension({
     cursorBuilder: yProsemirror.defaultCursorBuilder,
     cursorStateField: 'cursor',
     getSelection: state => state.selection,
+    disableUndo: false,
     protectedNodes: new Set('paragraph'),
     trackedOrigins: []
   },
+  staticKeys: ['disableUndo', 'protectedNodes', 'trackedOrigins'],
   defaultPriority: core.ExtensionPriority.High
 }), _dec2 = core.command({
   disableChaining: true,
-  description: _ref => {
-    var t = _ref.t;
+  description: _ref3 => {
+    var t = _ref3.t;
     return t(messages.ExtensionHistoryMessages.UNDO_DESCRIPTION);
   },
-  label: _ref2 => {
-    var t = _ref2.t;
+  label: _ref4 => {
+    var t = _ref4.t;
     return t(messages.ExtensionHistoryMessages.UNDO_LABEL);
   },
   icon: 'arrowGoBackFill'
 }), _dec3 = core.command({
   disableChaining: true,
-  description: _ref3 => {
-    var t = _ref3.t;
+  description: _ref5 => {
+    var t = _ref5.t;
     return t(messages.ExtensionHistoryMessages.REDO_DESCRIPTION);
   },
-  label: _ref4 => {
-    var t = _ref4.t;
+  label: _ref6 => {
+    var t = _ref6.t;
     return t(messages.ExtensionHistoryMessages.REDO_LABEL);
   },
   icon: 'arrowGoForwardFill'
@@ -70,14 +166,27 @@ var YjsExtension = (_dec = core.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 = yProsemirror.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(extensionAnnotation.AnnotationExtension).setOptions({
-        getMap: () => this.provider.doc.getMap('annotations'),
-        transformPosition: this.absolutePositionToRelativePosition.bind(this),
-        transformPositionBeforeRender: this.relativePositionToAbsolutePosition.bind(this)
+        getStore: () => annotationStore
       });
-      this.provider.doc.on('update', (_update, _origin, _doc, yjsTr) => {
+
+      var handler = (_update, _origin, _doc, yjsTr) => {
         var _this$store$commands$, _this$store$commands;
 
         // Ignore own changes
@@ -86,7 +195,12 @@ var YjsExtension = (_dec = core.extension({
         }
 
         (_this$store$commands$ = (_this$store$commands = this.store.commands).redrawAnnotations) === null || _this$store$commands$ === void 0 ? void 0 : _this$store$commands$.call(_this$store$commands);
-      });
+      };
+
+      this.provider.doc.on('update', handler);
+      return () => {
+        this.provider.doc.off('update', handler);
+      };
     } catch (_unused) {// AnnotationExtension isn't present in editor
     }
   }
@@ -101,21 +215,28 @@ var YjsExtension = (_dec = core.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 yjs.UndoManager(type, {
-      trackedOrigins: new Set([yProsemirror.ySyncPluginKey, ...trackedOrigins]),
-      deleteFilter: item => yProsemirror.defaultDeleteFilter(item, protectedNodes)
-    });
-    return [yProsemirror.ySyncPlugin(type, syncPluginOptions), yProsemirror.yCursorPlugin(this.provider.awareness, {
+    var plugins = [yProsemirror.ySyncPlugin(type, syncPluginOptions), yProsemirror.yCursorPlugin(this.provider.awareness, {
       cursorBuilder,
       cursorStateField,
       getSelection
-    }, cursorStateField), yProsemirror.yUndoPlugin({
-      undoManager
-    })];
+    }, cursorStateField)];
+
+    if (!disableUndo) {
+      var undoManager = new yjs.UndoManager(type, {
+        trackedOrigins: new Set([yProsemirror.ySyncPluginKey, ...trackedOrigins]),
+        deleteFilter: item => yProsemirror.defaultDeleteFilter(item, protectedNodes)
+      });
+      plugins.push(yProsemirror.yUndoPlugin({
+        undoManager
+      }));
+    }
+
+    return plugins;
   }
   /**
    * This managers the updates of the collaboration provider.
@@ -125,14 +246,7 @@ var YjsExtension = (_dec = core.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;
@@ -165,16 +279,19 @@ var YjsExtension = (_dec = core.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 core.nonChainable(props => {
+      if (this.options.disableUndo) {
+        return false;
+      }
+
       var state = props.state,
           dispatch = props.dispatch;
       var undoManager = yProsemirror.yUndoPluginKey.getState(state).undoManager;
@@ -191,16 +308,19 @@ var YjsExtension = (_dec = core.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 core.nonChainable(props => {
+      if (this.options.disableUndo) {
+        return false;
+      }
+
       var state = props.state,
           dispatch = props.dispatch;
       var undoManager = yProsemirror.yUndoPluginKey.getState(state).undoManager;
@@ -233,26 +353,6 @@ var YjsExtension = (_dec = core.extension({
     return this.yRedo()(props);
   }
 
-  absolutePositionToRelativePosition(pos) {
-    var state = this.store.getState();
-
-    var _ySyncPluginKey$getSt = yProsemirror.ySyncPluginKey.getState(state),
-        type = _ySyncPluginKey$getSt.type,
-        binding = _ySyncPluginKey$getSt.binding;
-
-    return yProsemirror.absolutePositionToRelativePosition(pos, type, binding.mapping);
-  }
-
-  relativePositionToAbsolutePosition(relPos) {
-    var state = this.store.getState();
-
-    var _ySyncPluginKey$getSt2 = yProsemirror.ySyncPluginKey.getState(state),
-        type = _ySyncPluginKey$getSt2.type,
-        binding = _ySyncPluginKey$getSt2.binding;
-
-    return yProsemirror.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.