@remirror/extension-yjs 1.0.20 → 1.0.21

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

@@ -73,6 +73,9 @@ export declare class YjsExtension extends PlainExtension<YjsOptions> {
      * The provider that is being used for the editor.
      */
     get provider(): YjsRealtimeProvider;
+    getBinding(): {
+        mapping: Map<any, any>;
+    } | undefined;
     onView(): Dispose | void;
     /**
      * Create the yjs plugins.
@@ -110,8 +113,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,94 @@ 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);
+    core.assert(existing);
+    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: () => {
@@ -29,23 +119,23 @@ var YjsExtension = (_dec = core.extension({
   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,12 +160,24 @@ 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
       });
 
       var handler = (_update, _origin, _doc, yjsTr) => {
@@ -239,26 +341,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.

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

@@ -1,11 +1,101 @@
 import _applyDecoratedDescriptor from '@babel/runtime/helpers/esm/applyDecoratedDescriptor';
+import _objectSpread from '@babel/runtime/helpers/esm/objectSpread2';
+import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
 import { defaultCursorBuilder, ySyncPluginKey, defaultDeleteFilter, ySyncPlugin, yCursorPlugin, yUndoPlugin, yUndoPluginKey, undo, redo, absolutePositionToRelativePosition, relativePositionToAbsolutePosition } from 'y-prosemirror';
-import { UndoManager } from 'yjs';
-import { extension, invariant, ErrorConstant, ExtensionPriority, command, keyBinding, NamedShortcut, PlainExtension, isFunction, isEmptyObject, nonChainable, convertCommand } from '@remirror/core';
+import { UndoManager, transact } from 'yjs';
+import { extension, invariant, ErrorConstant, ExtensionPriority, command, keyBinding, NamedShortcut, PlainExtension, isFunction, isEmptyObject, nonChainable, convertCommand, assert } 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);
+    assert(existing);
+    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: () => {
@@ -25,23 +115,23 @@ var YjsExtension = (_dec = extension({
   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 +156,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) => {
@@ -235,26 +337,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/dist/remirror-extension-yjs.cjs.dev.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,94 @@ 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);
+    core.assert(existing);
+    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: () => {
@@ -29,23 +119,23 @@ var YjsExtension = (_dec = core.extension({
   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,12 +160,24 @@ 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
       });
 
       var handler = (_update, _origin, _doc, yjsTr) => {
@@ -239,26 +341,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.

package/dist/remirror-extension-yjs.cjs.prod.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,94 @@ 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);
+    core.assert(existing);
+    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: () => {
@@ -26,23 +116,23 @@ var YjsExtension = (_dec = core.extension({
   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'
@@ -67,12 +157,24 @@ 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
       });
 
       var handler = (_update, _origin, _doc, yjsTr) => {
@@ -236,26 +338,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.

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

@@ -1,11 +1,101 @@
 import _applyDecoratedDescriptor from '@babel/runtime/helpers/esm/applyDecoratedDescriptor';
+import _objectSpread from '@babel/runtime/helpers/esm/objectSpread2';
+import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
 import { defaultCursorBuilder, ySyncPluginKey, defaultDeleteFilter, ySyncPlugin, yCursorPlugin, yUndoPlugin, yUndoPluginKey, undo, redo, absolutePositionToRelativePosition, relativePositionToAbsolutePosition } from 'y-prosemirror';
-import { UndoManager } from 'yjs';
-import { extension, invariant, ErrorConstant, ExtensionPriority, command, keyBinding, NamedShortcut, PlainExtension, isFunction, isEmptyObject, nonChainable, convertCommand } from '@remirror/core';
+import { UndoManager, transact } from 'yjs';
+import { extension, invariant, ErrorConstant, ExtensionPriority, command, keyBinding, NamedShortcut, PlainExtension, isFunction, isEmptyObject, nonChainable, convertCommand, assert } 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);
+    assert(existing);
+    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: () => {
@@ -25,23 +115,23 @@ var YjsExtension = (_dec = extension({
   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 +156,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) => {
@@ -235,26 +337,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.21",
   "description": "Realtime collaboration with yjs",
   "keywords": [
     "remirror",
@@ -45,7 +45,7 @@
   "dependencies": {
     "@babel/runtime": "^7.13.10",
     "@remirror/core": "^1.3.3",
-    "@remirror/extension-annotation": "^1.1.11",
+    "@remirror/extension-annotation": "^1.1.12",
     "@remirror/messages": "^1.0.6",
     "y-prosemirror": "^1.0.14",
     "y-protocols": "^1.0.5"