@atlaskit/editor-plugin-synced-block 4.2.14 → 4.3.0

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @atlaskit/editor-plugin-synced-block
 
+## 4.3.0
+
+### Minor Changes
+
+- [`1f699b87203c4`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/1f699b87203c4) -
+  EDITOR-2881 improve track sync blocks function
+
+### Patch Changes
+
+- Updated dependencies
+
+## 4.2.15
+
+### Patch Changes
+
+- [`a9159bf9608a8`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/a9159bf9608a8) -
+  [ux] Fix edit link disabled on reference sync block by setting syncBlockStore in nodeview from
+  plugin state
+
 ## 4.2.14
 
 ### Patch Changes

package/dist/cjs/nodeviews/bodiedSyncedBlock.js

@@ -28,7 +28,6 @@ var BodiedSyncBlock = /*#__PURE__*/function (_ReactNodeView) {
     var _this;
     (0, _classCallCheck2.default)(this, BodiedSyncBlock);
     _this = _callSuper(this, BodiedSyncBlock, [props.node, props.view, props.getPos, props.portalProviderAPI, props.eventDispatcher, props]);
-    _this.syncBlockStore = props.syncBlockStore;
     _this.api = props.api;
     _this.handleConnectivityModeChange();
     _this.handleViewModeChange();
@@ -89,9 +88,14 @@ var BodiedSyncBlock = /*#__PURE__*/function (_ReactNodeView) {
   }, {
     key: "render",
     value: function render(_props, forwardRef) {
+      var _this$api5;
+      var syncBlockStore = (_this$api5 = this.api) === null || _this$api5 === void 0 || (_this$api5 = _this$api5.syncedBlock.sharedState) === null || _this$api5 === void 0 || (_this$api5 = _this$api5.currentState()) === null || _this$api5 === void 0 ? void 0 : _this$api5.syncBlockStore;
+      if (!syncBlockStore) {
+        return null;
+      }
       return /*#__PURE__*/_react.default.createElement(_BodiedSyncBlockWrapper.BodiedSyncBlockWrapper, {
         ref: forwardRef,
-        syncBlockStore: this.syncBlockStore,
+        syncBlockStore: syncBlockStore,
         node: this.node
       });
     }
@@ -127,8 +131,7 @@ var BodiedSyncBlock = /*#__PURE__*/function (_ReactNodeView) {
 var bodiedSyncBlockNodeView = exports.bodiedSyncBlockNodeView = function bodiedSyncBlockNodeView(_ref4) {
   var pluginOptions = _ref4.pluginOptions,
     pmPluginFactoryParams = _ref4.pmPluginFactoryParams,
-    api = _ref4.api,
-    syncBlockStore = _ref4.syncBlockStore;
+    api = _ref4.api;
   return function (node, view, getPos) {
     var portalProviderAPI = pmPluginFactoryParams.portalProviderAPI,
       eventDispatcher = pmPluginFactoryParams.eventDispatcher;
@@ -139,8 +142,7 @@ var bodiedSyncBlockNodeView = exports.bodiedSyncBlockNodeView = function bodiedS
       view: view,
       getPos: getPos,
       portalProviderAPI: portalProviderAPI,
-      eventDispatcher: eventDispatcher,
-      syncBlockStore: syncBlockStore
+      eventDispatcher: eventDispatcher
     }).init();
   };
 };

package/dist/cjs/nodeviews/syncedBlock.js

@@ -25,7 +25,7 @@ var SyncBlock = /*#__PURE__*/function (_ReactNodeView) {
     (0, _classCallCheck2.default)(this, SyncBlock);
     _this = _callSuper(this, SyncBlock, [props.node, props.view, props.getPos, props.portalProviderAPI, props.eventDispatcher, props]);
     _this.options = props.options;
-    _this.syncBlockStore = props.syncBlockStore;
+    _this.api = props.api;
     return _this;
   }
   (0, _inherits2.default)(SyncBlock, _ReactNodeView);
@@ -40,6 +40,7 @@ var SyncBlock = /*#__PURE__*/function (_ReactNodeView) {
     key: "render",
     value: function render() {
       var _this$options,
+        _this$api,
         _this$options2,
         _this2 = this;
       if (!((_this$options = this.options) !== null && _this$options !== void 0 && _this$options.syncedBlockRenderer)) {
@@ -51,16 +52,20 @@ var SyncBlock = /*#__PURE__*/function (_ReactNodeView) {
       if (!resourceId || !localId) {
         return null;
       }
+      var syncBlockStore = (_this$api = this.api) === null || _this$api === void 0 || (_this$api = _this$api.syncedBlock) === null || _this$api === void 0 || (_this$api = _this$api.sharedState.currentState()) === null || _this$api === void 0 ? void 0 : _this$api.syncBlockStore;
+      if (!syncBlockStore) {
+        return null;
+      }
 
       // get document node from data provider
       return /*#__PURE__*/_react.default.createElement(_SyncBlockRendererWrapper.SyncBlockRendererWrapper, {
         localId: this.node.attrs.localId,
         syncedBlockRenderer: (_this$options2 = this.options) === null || _this$options2 === void 0 ? void 0 : _this$options2.syncedBlockRenderer,
         useFetchSyncBlockTitle: function useFetchSyncBlockTitle() {
-          return (0, _editorSyncedBlockProvider.useFetchSyncBlockTitle)(_this2.syncBlockStore, _this2.node);
+          return (0, _editorSyncedBlockProvider.useFetchSyncBlockTitle)(syncBlockStore, _this2.node);
         },
         useFetchSyncBlockData: function useFetchSyncBlockData() {
-          return (0, _editorSyncedBlockProvider.useFetchSyncBlockData)(_this2.syncBlockStore, resourceId, localId);
+          return (0, _editorSyncedBlockProvider.useFetchSyncBlockData)(syncBlockStore, resourceId, localId);
         }
       });
     }
@@ -76,8 +81,7 @@ var SyncBlock = /*#__PURE__*/function (_ReactNodeView) {
 var syncBlockNodeView = exports.syncBlockNodeView = function syncBlockNodeView(_ref) {
   var options = _ref.options,
     pmPluginFactoryParams = _ref.pmPluginFactoryParams,
-    api = _ref.api,
-    syncBlockStore = _ref.syncBlockStore;
+    api = _ref.api;
   return function (node, view, getPos) {
     var portalProviderAPI = pmPluginFactoryParams.portalProviderAPI,
       eventDispatcher = pmPluginFactoryParams.eventDispatcher;
@@ -88,8 +92,7 @@ var syncBlockNodeView = exports.syncBlockNodeView = function syncBlockNodeView(_
       view: view,
       getPos: getPos,
       portalProviderAPI: portalProviderAPI,
-      eventDispatcher: eventDispatcher,
-      syncBlockStore: syncBlockStore
+      eventDispatcher: eventDispatcher
     }).init();
   };
 };

package/dist/cjs/pm-plugins/main.js

@@ -31,7 +31,8 @@ var createPlugin = exports.createPlugin = function createPlugin(options, pmPlugi
         syncBlockStore.referenceManager.fetchSyncBlocksData((0, _editorSyncedBlockProvider.convertPMNodesToSyncBlockNodes)(syncBlockNodes));
         return {
           selectionDecorationSet: (0, _selectionDecorations.calculateDecorations)(instance.doc, instance.selection, instance.schema),
-          showFlag: false
+          showFlag: false,
+          syncBlockStore: syncBlockStore
         };
       },
       apply: function apply(tr, currentPluginState, oldEditorState) {
@@ -45,7 +46,8 @@ var createPlugin = exports.createPlugin = function createPlugin(options, pmPlugi
         }
         return {
           showFlag: (_meta$showFlag = meta === null || meta === void 0 ? void 0 : meta.showFlag) !== null && _meta$showFlag !== void 0 ? _meta$showFlag : showFlag,
-          selectionDecorationSet: newDecorationSet
+          selectionDecorationSet: newDecorationSet,
+          syncBlockStore: syncBlockStore
         };
       }
     },
@@ -54,14 +56,12 @@ var createPlugin = exports.createPlugin = function createPlugin(options, pmPlugi
         syncBlock: (0, _lazySyncedBlock.lazySyncBlockView)({
           options: options,
           pmPluginFactoryParams: pmPluginFactoryParams,
-          api: api,
-          syncBlockStore: syncBlockStore
+          api: api
         }),
         bodiedSyncBlock: (0, _bodiedLazySyncedBlock.lazyBodiedSyncBlockView)({
           pluginOptions: options,
           pmPluginFactoryParams: pmPluginFactoryParams,
-          api: api,
-          syncBlockStore: syncBlockStore
+          api: api
         })
       },
       decorations: function decorations(state) {

package/dist/cjs/pm-plugins/utils/track-sync-blocks.js

@@ -12,56 +12,82 @@ function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length)
 var trackSyncBlocks = exports.trackSyncBlocks = function trackSyncBlocks(predicate, tr, state) {
   var removed = {};
   var added = {};
+  if (!tr.docChanged) {
+    return {
+      removed: [],
+      added: []
+    };
+  }
 
   // and cast to specific step types
   var replaceSteps = tr.steps.filter(function (step) {
     return step instanceof _transform.ReplaceStep || step instanceof _transform.ReplaceAroundStep;
   });
-  replaceSteps.forEach(function (step) {
+
+  // this is a quick check to see if any insertion/deletion of bodiedSyncBlock happened
+  var hasBodiedSyncBlockChanges = replaceSteps.some(function (step) {
     var from = step.from,
       to = step.to;
-    // replaced a range, check for deleted syncBlock
-
+    var hasChange = false;
     if (from !== to) {
       step.getMap().forEach(function (oldStart, oldEnd) {
-        if (oldStart !== oldEnd) {
-          var deletedSlice = state.doc.slice(oldStart, oldEnd);
-          deletedSlice.content.nodesBetween(0, deletedSlice.content.size, function (node) {
+        if (oldStart !== oldEnd && !hasChange) {
+          var deletedSlice = state.doc.slice(Math.max(0, oldStart), Math.min(state.doc.content.size, oldEnd));
+          deletedSlice.content.forEach(function (node, _, index) {
+            if (hasChange) {
+              return;
+            }
+            // for top level nodes
             if (predicate(node)) {
-              if (added[node.attrs.localId]) {
-                // If a source block added and then removed in the same transaction,
-                // we treat it as no-op.
-                delete added[node.attrs.localId];
-              } else {
-                removed[node.attrs.localId] = node.attrs;
-              }
+              hasChange = true;
             }
-
-            // we don't need to go deeper
-            return false;
           });
         }
       });
     }
 
-    // replaced content, check for inserted syncBlock
-    // if only one replace step, we have already checked the entire replaced range above
-    if (step.slice.content.size > 0) {
-      step.slice.content.nodesBetween(0, step.slice.content.size, function (node) {
-        if (predicate(node)) {
-          if (removed[node.attrs.localId]) {
-            // If a source block is removed and added back in the same transaction,
-            // we treat it as no-op.
-            delete removed[node.attrs.localId];
-          } else {
-            added[node.attrs.localId] = node.attrs;
-          }
+    // no need to check insertions if we already found deletions
+    if (step.slice.content.size > 0 && !hasChange) {
+      step.slice.content.forEach(function (node) {
+        if (predicate(node) && !hasChange) {
+          hasChange = true;
         }
-        // we don't need to go deeper
-        return false;
       });
     }
+    return hasChange;
   });
+  if (hasBodiedSyncBlockChanges) {
+    var oldDoc = state.doc;
+    var newDoc = tr.doc;
+    var syncBlockMapOld = {};
+    var syncBlockMapNew = {};
+    oldDoc.content.forEach(function (node) {
+      if (predicate(node)) {
+        var syncBlockAttr = node.attrs;
+        syncBlockMapOld[syncBlockAttr.localId] = syncBlockAttr;
+      }
+    });
+    newDoc.content.forEach(function (node) {
+      if (predicate(node)) {
+        var syncBlockAttr = node.attrs;
+        syncBlockMapNew[syncBlockAttr.localId] = syncBlockAttr;
+      }
+    });
+
+    // Find removed sync blocks
+    for (var localId in syncBlockMapOld) {
+      if (!syncBlockMapNew[localId]) {
+        removed[localId] = syncBlockMapOld[localId];
+      }
+    }
+
+    // Find added sync blocks
+    for (var _localId in syncBlockMapNew) {
+      if (!syncBlockMapOld[_localId]) {
+        added[_localId] = syncBlockMapNew[_localId];
+      }
+    }
+  }
   return {
     removed: Object.values(removed),
     added: Object.values(added)

package/dist/cjs/syncedBlockPlugin.js

@@ -113,9 +113,11 @@ var syncedBlockPlugin = exports.syncedBlockPlugin = function syncedBlockPlugin(_
         return;
       }
       var _syncedBlockPluginKey = _main.syncedBlockPluginKey.getState(editorState),
-        showFlag = _syncedBlockPluginKey.showFlag;
+        showFlag = _syncedBlockPluginKey.showFlag,
+        currentSyncBlockStore = _syncedBlockPluginKey.syncBlockStore;
       return {
-        showFlag: showFlag
+        showFlag: showFlag,
+        syncBlockStore: currentSyncBlockStore
       };
     }
   };

package/dist/es2019/nodeviews/bodiedSyncedBlock.js

@@ -10,7 +10,6 @@ const toDOM = () => ['div', {
 class BodiedSyncBlock extends ReactNodeView {
   constructor(props) {
     super(props.node, props.view, props.getPos, props.portalProviderAPI, props.eventDispatcher, props);
-    this.syncBlockStore = props.syncBlockStore;
     this.api = props.api;
     this.handleConnectivityModeChange();
     this.handleViewModeChange();
@@ -60,9 +59,14 @@ class BodiedSyncBlock extends ReactNodeView {
     return domRef;
   }
   render(_props, forwardRef) {
+    var _this$api5, _this$api5$syncedBloc, _this$api5$syncedBloc2;
+    const syncBlockStore = (_this$api5 = this.api) === null || _this$api5 === void 0 ? void 0 : (_this$api5$syncedBloc = _this$api5.syncedBlock.sharedState) === null || _this$api5$syncedBloc === void 0 ? void 0 : (_this$api5$syncedBloc2 = _this$api5$syncedBloc.currentState()) === null || _this$api5$syncedBloc2 === void 0 ? void 0 : _this$api5$syncedBloc2.syncBlockStore;
+    if (!syncBlockStore) {
+      return null;
+    }
     return /*#__PURE__*/React.createElement(BodiedSyncBlockWrapper, {
       ref: forwardRef,
-      syncBlockStore: this.syncBlockStore,
+      syncBlockStore: syncBlockStore,
       node: this.node
     });
   }
@@ -94,8 +98,7 @@ class BodiedSyncBlock extends ReactNodeView {
 export const bodiedSyncBlockNodeView = ({
   pluginOptions,
   pmPluginFactoryParams,
-  api,
-  syncBlockStore
+  api
 }) => (node, view, getPos) => {
   const {
     portalProviderAPI,
@@ -108,7 +111,6 @@ export const bodiedSyncBlockNodeView = ({
     view,
     getPos,
     portalProviderAPI,
-    eventDispatcher,
-    syncBlockStore
+    eventDispatcher
   }).init();
 };

package/dist/es2019/nodeviews/syncedBlock.js

@@ -7,7 +7,7 @@ class SyncBlock extends ReactNodeView {
   constructor(props) {
     super(props.node, props.view, props.getPos, props.portalProviderAPI, props.eventDispatcher, props);
     this.options = props.options;
-    this.syncBlockStore = props.syncBlockStore;
+    this.api = props.api;
   }
   createDomRef() {
     const domRef = document.createElement('div');
@@ -15,7 +15,7 @@ class SyncBlock extends ReactNodeView {
     return domRef;
   }
   render() {
-    var _this$options, _this$options2;
+    var _this$options, _this$api, _this$api$syncedBlock, _this$api$syncedBlock2, _this$options2;
     if (!((_this$options = this.options) !== null && _this$options !== void 0 && _this$options.syncedBlockRenderer)) {
       return null;
     }
@@ -26,13 +26,17 @@ class SyncBlock extends ReactNodeView {
     if (!resourceId || !localId) {
       return null;
     }
+    const syncBlockStore = (_this$api = this.api) === null || _this$api === void 0 ? void 0 : (_this$api$syncedBlock = _this$api.syncedBlock) === null || _this$api$syncedBlock === void 0 ? void 0 : (_this$api$syncedBlock2 = _this$api$syncedBlock.sharedState.currentState()) === null || _this$api$syncedBlock2 === void 0 ? void 0 : _this$api$syncedBlock2.syncBlockStore;
+    if (!syncBlockStore) {
+      return null;
+    }
 
     // get document node from data provider
     return /*#__PURE__*/React.createElement(SyncBlockRendererWrapper, {
       localId: this.node.attrs.localId,
       syncedBlockRenderer: (_this$options2 = this.options) === null || _this$options2 === void 0 ? void 0 : _this$options2.syncedBlockRenderer,
-      useFetchSyncBlockTitle: () => useFetchSyncBlockTitle(this.syncBlockStore, this.node),
-      useFetchSyncBlockData: () => useFetchSyncBlockData(this.syncBlockStore, resourceId, localId)
+      useFetchSyncBlockTitle: () => useFetchSyncBlockTitle(syncBlockStore, this.node),
+      useFetchSyncBlockData: () => useFetchSyncBlockData(syncBlockStore, resourceId, localId)
     });
   }
   destroy() {
@@ -44,8 +48,7 @@ class SyncBlock extends ReactNodeView {
 export const syncBlockNodeView = ({
   options,
   pmPluginFactoryParams,
-  api,
-  syncBlockStore
+  api
 }) => (node, view, getPos) => {
   const {
     portalProviderAPI,
@@ -58,7 +61,6 @@ export const syncBlockNodeView = ({
     view,
     getPos,
     portalProviderAPI,
-    eventDispatcher,
-    syncBlockStore
+    eventDispatcher
   }).init();
 };

package/dist/es2019/pm-plugins/main.js

@@ -23,7 +23,8 @@ export const createPlugin = (options, pmPluginFactoryParams, syncBlockStore, api
         syncBlockStore.referenceManager.fetchSyncBlocksData(convertPMNodesToSyncBlockNodes(syncBlockNodes));
         return {
           selectionDecorationSet: calculateDecorations(instance.doc, instance.selection, instance.schema),
-          showFlag: false
+          showFlag: false,
+          syncBlockStore: syncBlockStore
         };
       },
       apply: (tr, currentPluginState, oldEditorState) => {
@@ -39,7 +40,8 @@ export const createPlugin = (options, pmPluginFactoryParams, syncBlockStore, api
         }
         return {
           showFlag: (_meta$showFlag = meta === null || meta === void 0 ? void 0 : meta.showFlag) !== null && _meta$showFlag !== void 0 ? _meta$showFlag : showFlag,
-          selectionDecorationSet: newDecorationSet
+          selectionDecorationSet: newDecorationSet,
+          syncBlockStore: syncBlockStore
         };
       }
     },
@@ -48,14 +50,12 @@ export const createPlugin = (options, pmPluginFactoryParams, syncBlockStore, api
         syncBlock: lazySyncBlockView({
           options,
           pmPluginFactoryParams,
-          api,
-          syncBlockStore
+          api
         }),
         bodiedSyncBlock: lazyBodiedSyncBlockView({
           pluginOptions: options,
           pmPluginFactoryParams,
-          api,
-          syncBlockStore
+          api
         })
       },
       decorations: state => {

package/dist/es2019/pm-plugins/utils/track-sync-blocks.js

@@ -3,56 +3,82 @@ import { findParentNodeOfTypeClosestToPos } from '@atlaskit/editor-prosemirror/u
 export const trackSyncBlocks = (predicate, tr, state) => {
   const removed = {};
   const added = {};
+  if (!tr.docChanged) {
+    return {
+      removed: [],
+      added: []
+    };
+  }
 
   // and cast to specific step types
   const replaceSteps = tr.steps.filter(step => step instanceof ReplaceStep || step instanceof ReplaceAroundStep);
-  replaceSteps.forEach(step => {
+
+  // this is a quick check to see if any insertion/deletion of bodiedSyncBlock happened
+  const hasBodiedSyncBlockChanges = replaceSteps.some(step => {
     const {
       from,
       to
     } = step;
-    // replaced a range, check for deleted syncBlock
-
+    let hasChange = false;
     if (from !== to) {
       step.getMap().forEach((oldStart, oldEnd) => {
-        if (oldStart !== oldEnd) {
-          const deletedSlice = state.doc.slice(oldStart, oldEnd);
-          deletedSlice.content.nodesBetween(0, deletedSlice.content.size, node => {
+        if (oldStart !== oldEnd && !hasChange) {
+          const deletedSlice = state.doc.slice(Math.max(0, oldStart), Math.min(state.doc.content.size, oldEnd));
+          deletedSlice.content.forEach((node, _, index) => {
+            if (hasChange) {
+              return;
+            }
+            // for top level nodes
             if (predicate(node)) {
-              if (added[node.attrs.localId]) {
-                // If a source block added and then removed in the same transaction,
-                // we treat it as no-op.
-                delete added[node.attrs.localId];
-              } else {
-                removed[node.attrs.localId] = node.attrs;
-              }
+              hasChange = true;
             }
-
-            // we don't need to go deeper
-            return false;
           });
         }
       });
     }
 
-    // replaced content, check for inserted syncBlock
-    // if only one replace step, we have already checked the entire replaced range above
-    if (step.slice.content.size > 0) {
-      step.slice.content.nodesBetween(0, step.slice.content.size, node => {
-        if (predicate(node)) {
-          if (removed[node.attrs.localId]) {
-            // If a source block is removed and added back in the same transaction,
-            // we treat it as no-op.
-            delete removed[node.attrs.localId];
-          } else {
-            added[node.attrs.localId] = node.attrs;
-          }
+    // no need to check insertions if we already found deletions
+    if (step.slice.content.size > 0 && !hasChange) {
+      step.slice.content.forEach(node => {
+        if (predicate(node) && !hasChange) {
+          hasChange = true;
         }
-        // we don't need to go deeper
-        return false;
       });
     }
+    return hasChange;
   });
+  if (hasBodiedSyncBlockChanges) {
+    const oldDoc = state.doc;
+    const newDoc = tr.doc;
+    const syncBlockMapOld = {};
+    const syncBlockMapNew = {};
+    oldDoc.content.forEach(node => {
+      if (predicate(node)) {
+        const syncBlockAttr = node.attrs;
+        syncBlockMapOld[syncBlockAttr.localId] = syncBlockAttr;
+      }
+    });
+    newDoc.content.forEach(node => {
+      if (predicate(node)) {
+        const syncBlockAttr = node.attrs;
+        syncBlockMapNew[syncBlockAttr.localId] = syncBlockAttr;
+      }
+    });
+
+    // Find removed sync blocks
+    for (const localId in syncBlockMapOld) {
+      if (!syncBlockMapNew[localId]) {
+        removed[localId] = syncBlockMapOld[localId];
+      }
+    }
+
+    // Find added sync blocks
+    for (const localId in syncBlockMapNew) {
+      if (!syncBlockMapOld[localId]) {
+        added[localId] = syncBlockMapNew[localId];
+      }
+    }
+  }
   return {
     removed: Object.values(removed),
     added: Object.values(added)

package/dist/es2019/syncedBlockPlugin.js

@@ -95,10 +95,12 @@ export const syncedBlockPlugin = ({
         return;
       }
       const {
-        showFlag
+        showFlag,
+        syncBlockStore: currentSyncBlockStore
       } = syncedBlockPluginKey.getState(editorState);
       return {
-        showFlag
+        showFlag,
+        syncBlockStore: currentSyncBlockStore
       };
     }
   };

package/dist/esm/nodeviews/bodiedSyncedBlock.js

@@ -21,7 +21,6 @@ var BodiedSyncBlock = /*#__PURE__*/function (_ReactNodeView) {
     var _this;
     _classCallCheck(this, BodiedSyncBlock);
     _this = _callSuper(this, BodiedSyncBlock, [props.node, props.view, props.getPos, props.portalProviderAPI, props.eventDispatcher, props]);
-    _this.syncBlockStore = props.syncBlockStore;
     _this.api = props.api;
     _this.handleConnectivityModeChange();
     _this.handleViewModeChange();
@@ -82,9 +81,14 @@ var BodiedSyncBlock = /*#__PURE__*/function (_ReactNodeView) {
   }, {
     key: "render",
     value: function render(_props, forwardRef) {
+      var _this$api5;
+      var syncBlockStore = (_this$api5 = this.api) === null || _this$api5 === void 0 || (_this$api5 = _this$api5.syncedBlock.sharedState) === null || _this$api5 === void 0 || (_this$api5 = _this$api5.currentState()) === null || _this$api5 === void 0 ? void 0 : _this$api5.syncBlockStore;
+      if (!syncBlockStore) {
+        return null;
+      }
       return /*#__PURE__*/React.createElement(BodiedSyncBlockWrapper, {
         ref: forwardRef,
-        syncBlockStore: this.syncBlockStore,
+        syncBlockStore: syncBlockStore,
         node: this.node
       });
     }
@@ -120,8 +124,7 @@ var BodiedSyncBlock = /*#__PURE__*/function (_ReactNodeView) {
 export var bodiedSyncBlockNodeView = function bodiedSyncBlockNodeView(_ref4) {
   var pluginOptions = _ref4.pluginOptions,
     pmPluginFactoryParams = _ref4.pmPluginFactoryParams,
-    api = _ref4.api,
-    syncBlockStore = _ref4.syncBlockStore;
+    api = _ref4.api;
   return function (node, view, getPos) {
     var portalProviderAPI = pmPluginFactoryParams.portalProviderAPI,
       eventDispatcher = pmPluginFactoryParams.eventDispatcher;
@@ -132,8 +135,7 @@ export var bodiedSyncBlockNodeView = function bodiedSyncBlockNodeView(_ref4) {
       view: view,
       getPos: getPos,
       portalProviderAPI: portalProviderAPI,
-      eventDispatcher: eventDispatcher,
-      syncBlockStore: syncBlockStore
+      eventDispatcher: eventDispatcher
     }).init();
   };
 };

package/dist/esm/nodeviews/syncedBlock.js

@@ -18,7 +18,7 @@ var SyncBlock = /*#__PURE__*/function (_ReactNodeView) {
     _classCallCheck(this, SyncBlock);
     _this = _callSuper(this, SyncBlock, [props.node, props.view, props.getPos, props.portalProviderAPI, props.eventDispatcher, props]);
     _this.options = props.options;
-    _this.syncBlockStore = props.syncBlockStore;
+    _this.api = props.api;
     return _this;
   }
   _inherits(SyncBlock, _ReactNodeView);
@@ -33,6 +33,7 @@ var SyncBlock = /*#__PURE__*/function (_ReactNodeView) {
     key: "render",
     value: function render() {
       var _this$options,
+        _this$api,
         _this$options2,
         _this2 = this;
       if (!((_this$options = this.options) !== null && _this$options !== void 0 && _this$options.syncedBlockRenderer)) {
@@ -44,16 +45,20 @@ var SyncBlock = /*#__PURE__*/function (_ReactNodeView) {
       if (!resourceId || !localId) {
         return null;
       }
+      var syncBlockStore = (_this$api = this.api) === null || _this$api === void 0 || (_this$api = _this$api.syncedBlock) === null || _this$api === void 0 || (_this$api = _this$api.sharedState.currentState()) === null || _this$api === void 0 ? void 0 : _this$api.syncBlockStore;
+      if (!syncBlockStore) {
+        return null;
+      }
 
       // get document node from data provider
       return /*#__PURE__*/React.createElement(SyncBlockRendererWrapper, {
         localId: this.node.attrs.localId,
         syncedBlockRenderer: (_this$options2 = this.options) === null || _this$options2 === void 0 ? void 0 : _this$options2.syncedBlockRenderer,
         useFetchSyncBlockTitle: function useFetchSyncBlockTitle() {
-          return _useFetchSyncBlockTitle(_this2.syncBlockStore, _this2.node);
+          return _useFetchSyncBlockTitle(syncBlockStore, _this2.node);
         },
         useFetchSyncBlockData: function useFetchSyncBlockData() {
-          return _useFetchSyncBlockData(_this2.syncBlockStore, resourceId, localId);
+          return _useFetchSyncBlockData(syncBlockStore, resourceId, localId);
         }
       });
     }
@@ -69,8 +74,7 @@ var SyncBlock = /*#__PURE__*/function (_ReactNodeView) {
 export var syncBlockNodeView = function syncBlockNodeView(_ref) {
   var options = _ref.options,
     pmPluginFactoryParams = _ref.pmPluginFactoryParams,
-    api = _ref.api,
-    syncBlockStore = _ref.syncBlockStore;
+    api = _ref.api;
   return function (node, view, getPos) {
     var portalProviderAPI = pmPluginFactoryParams.portalProviderAPI,
       eventDispatcher = pmPluginFactoryParams.eventDispatcher;
@@ -81,8 +85,7 @@ export var syncBlockNodeView = function syncBlockNodeView(_ref) {
       view: view,
       getPos: getPos,
       portalProviderAPI: portalProviderAPI,
-      eventDispatcher: eventDispatcher,
-      syncBlockStore: syncBlockStore
+      eventDispatcher: eventDispatcher
     }).init();
   };
 };

package/dist/esm/pm-plugins/main.js

@@ -25,7 +25,8 @@ export var createPlugin = function createPlugin(options, pmPluginFactoryParams,
         syncBlockStore.referenceManager.fetchSyncBlocksData(convertPMNodesToSyncBlockNodes(syncBlockNodes));
         return {
           selectionDecorationSet: calculateDecorations(instance.doc, instance.selection, instance.schema),
-          showFlag: false
+          showFlag: false,
+          syncBlockStore: syncBlockStore
         };
       },
       apply: function apply(tr, currentPluginState, oldEditorState) {
@@ -39,7 +40,8 @@ export var createPlugin = function createPlugin(options, pmPluginFactoryParams,
         }
         return {
           showFlag: (_meta$showFlag = meta === null || meta === void 0 ? void 0 : meta.showFlag) !== null && _meta$showFlag !== void 0 ? _meta$showFlag : showFlag,
-          selectionDecorationSet: newDecorationSet
+          selectionDecorationSet: newDecorationSet,
+          syncBlockStore: syncBlockStore
         };
       }
     },
@@ -48,14 +50,12 @@ export var createPlugin = function createPlugin(options, pmPluginFactoryParams,
         syncBlock: lazySyncBlockView({
           options: options,
           pmPluginFactoryParams: pmPluginFactoryParams,
-          api: api,
-          syncBlockStore: syncBlockStore
+          api: api
         }),
         bodiedSyncBlock: lazyBodiedSyncBlockView({
           pluginOptions: options,
           pmPluginFactoryParams: pmPluginFactoryParams,
-          api: api,
-          syncBlockStore: syncBlockStore
+          api: api
         })
       },
       decorations: function decorations(state) {

package/dist/esm/pm-plugins/utils/track-sync-blocks.js

@@ -6,56 +6,82 @@ import { findParentNodeOfTypeClosestToPos } from '@atlaskit/editor-prosemirror/u
 export var trackSyncBlocks = function trackSyncBlocks(predicate, tr, state) {
   var removed = {};
   var added = {};
+  if (!tr.docChanged) {
+    return {
+      removed: [],
+      added: []
+    };
+  }
 
   // and cast to specific step types
   var replaceSteps = tr.steps.filter(function (step) {
     return step instanceof ReplaceStep || step instanceof ReplaceAroundStep;
   });
-  replaceSteps.forEach(function (step) {
+
+  // this is a quick check to see if any insertion/deletion of bodiedSyncBlock happened
+  var hasBodiedSyncBlockChanges = replaceSteps.some(function (step) {
     var from = step.from,
       to = step.to;
-    // replaced a range, check for deleted syncBlock
-
+    var hasChange = false;
     if (from !== to) {
       step.getMap().forEach(function (oldStart, oldEnd) {
-        if (oldStart !== oldEnd) {
-          var deletedSlice = state.doc.slice(oldStart, oldEnd);
-          deletedSlice.content.nodesBetween(0, deletedSlice.content.size, function (node) {
+        if (oldStart !== oldEnd && !hasChange) {
+          var deletedSlice = state.doc.slice(Math.max(0, oldStart), Math.min(state.doc.content.size, oldEnd));
+          deletedSlice.content.forEach(function (node, _, index) {
+            if (hasChange) {
+              return;
+            }
+            // for top level nodes
             if (predicate(node)) {
-              if (added[node.attrs.localId]) {
-                // If a source block added and then removed in the same transaction,
-                // we treat it as no-op.
-                delete added[node.attrs.localId];
-              } else {
-                removed[node.attrs.localId] = node.attrs;
-              }
+              hasChange = true;
             }
-
-            // we don't need to go deeper
-            return false;
           });
         }
       });
     }
 
-    // replaced content, check for inserted syncBlock
-    // if only one replace step, we have already checked the entire replaced range above
-    if (step.slice.content.size > 0) {
-      step.slice.content.nodesBetween(0, step.slice.content.size, function (node) {
-        if (predicate(node)) {
-          if (removed[node.attrs.localId]) {
-            // If a source block is removed and added back in the same transaction,
-            // we treat it as no-op.
-            delete removed[node.attrs.localId];
-          } else {
-            added[node.attrs.localId] = node.attrs;
-          }
+    // no need to check insertions if we already found deletions
+    if (step.slice.content.size > 0 && !hasChange) {
+      step.slice.content.forEach(function (node) {
+        if (predicate(node) && !hasChange) {
+          hasChange = true;
         }
-        // we don't need to go deeper
-        return false;
       });
     }
+    return hasChange;
   });
+  if (hasBodiedSyncBlockChanges) {
+    var oldDoc = state.doc;
+    var newDoc = tr.doc;
+    var syncBlockMapOld = {};
+    var syncBlockMapNew = {};
+    oldDoc.content.forEach(function (node) {
+      if (predicate(node)) {
+        var syncBlockAttr = node.attrs;
+        syncBlockMapOld[syncBlockAttr.localId] = syncBlockAttr;
+      }
+    });
+    newDoc.content.forEach(function (node) {
+      if (predicate(node)) {
+        var syncBlockAttr = node.attrs;
+        syncBlockMapNew[syncBlockAttr.localId] = syncBlockAttr;
+      }
+    });
+
+    // Find removed sync blocks
+    for (var localId in syncBlockMapOld) {
+      if (!syncBlockMapNew[localId]) {
+        removed[localId] = syncBlockMapOld[localId];
+      }
+    }
+
+    // Find added sync blocks
+    for (var _localId in syncBlockMapNew) {
+      if (!syncBlockMapOld[_localId]) {
+        added[_localId] = syncBlockMapNew[_localId];
+      }
+    }
+  }
   return {
     removed: Object.values(removed),
     added: Object.values(added)

package/dist/esm/syncedBlockPlugin.js

@@ -106,9 +106,11 @@ export var syncedBlockPlugin = function syncedBlockPlugin(_ref) {
         return;
       }
       var _syncedBlockPluginKey = syncedBlockPluginKey.getState(editorState),
-        showFlag = _syncedBlockPluginKey.showFlag;
+        showFlag = _syncedBlockPluginKey.showFlag,
+        currentSyncBlockStore = _syncedBlockPluginKey.syncBlockStore;
       return {
-        showFlag: showFlag
+        showFlag: showFlag,
+        syncBlockStore: currentSyncBlockStore
       };
     }
   };

package/dist/types/nodeviews/bodiedSyncedBlock.d.ts

@@ -5,7 +5,6 @@ import ReactNodeView, { type getPosHandler } from '@atlaskit/editor-common/react
 import type { ExtractInjectionAPI, PMPluginFactoryParams } from '@atlaskit/editor-common/types';
 import { type Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
-import type { SyncBlockStoreManager } from '@atlaskit/editor-synced-block-provider';
 import type { SyncedBlockPlugin, SyncedBlockPluginOptions } from '../syncedBlockPluginType';
 export interface BodiedSyncBlockNodeViewProps extends ReactComponentProps {
     api?: ExtractInjectionAPI<SyncedBlockPlugin>;
@@ -14,13 +13,11 @@ export interface BodiedSyncBlockNodeViewProps extends ReactComponentProps {
     node: PMNode;
     pluginOptions: SyncedBlockPluginOptions | undefined;
     portalProviderAPI: PortalProviderAPI;
-    syncBlockStore: SyncBlockStoreManager;
     view: EditorView;
 }
 export interface BodiedSyncBlockNodeViewProperties {
     api?: ExtractInjectionAPI<SyncedBlockPlugin>;
     pluginOptions: SyncedBlockPluginOptions | undefined;
     pmPluginFactoryParams: PMPluginFactoryParams;
-    syncBlockStore: SyncBlockStoreManager;
 }
 export declare const bodiedSyncBlockNodeView: (props: BodiedSyncBlockNodeViewProperties) => (node: PMNode, view: EditorView, getPos: getPosHandler) => ReactNodeView<BodiedSyncBlockNodeViewProps>;

package/dist/types/nodeviews/syncedBlock.d.ts

@@ -5,7 +5,6 @@ import type { ReactComponentProps } from '@atlaskit/editor-common/react-node-vie
 import type { ExtractInjectionAPI, PMPluginFactoryParams } from '@atlaskit/editor-common/types';
 import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
-import type { SyncBlockStoreManager } from '@atlaskit/editor-synced-block-provider';
 import type { SyncedBlockPlugin, SyncedBlockPluginOptions } from '../syncedBlockPluginType';
 export interface SyncBlockNodeViewProps extends ReactComponentProps {
     api?: ExtractInjectionAPI<SyncedBlockPlugin>;
@@ -15,13 +14,11 @@ export interface SyncBlockNodeViewProps extends ReactComponentProps {
     node: PMNode;
     options: SyncedBlockPluginOptions | undefined;
     portalProviderAPI: PortalProviderAPI;
-    syncBlockStore: SyncBlockStoreManager;
     view: EditorView;
 }
 export interface SyncBlockNodeViewProperties {
     api?: ExtractInjectionAPI<SyncedBlockPlugin>;
     options: SyncedBlockPluginOptions | undefined;
     pmPluginFactoryParams: PMPluginFactoryParams;
-    syncBlockStore: SyncBlockStoreManager;
 }
 export declare const syncBlockNodeView: (props: SyncBlockNodeViewProperties) => (node: PMNode, view: EditorView, getPos: getPosHandler) => ReactNodeView<SyncBlockNodeViewProps>;

package/dist/types/pm-plugins/main.d.ts

@@ -9,6 +9,7 @@ export declare const syncedBlockPluginKey: PluginKey<any>;
 type SyncedBlockPluginState = {
     selectionDecorationSet: DecorationSet;
     showFlag: FLAG_ID | false;
+    syncBlockStore: SyncBlockStoreManager;
 };
 export declare const createPlugin: (options: SyncedBlockPluginOptions | undefined, pmPluginFactoryParams: PMPluginFactoryParams, syncBlockStore: SyncBlockStoreManager, api?: ExtractInjectionAPI<SyncedBlockPlugin>) => SafePlugin<SyncedBlockPluginState>;
 export {};

package/dist/types/types/index.d.ts

@@ -1,3 +1,4 @@
+import type { SyncBlockStoreManager } from '@atlaskit/editor-synced-block-provider';
 export declare enum FLAG_ID {
     CANNOT_DELETE_WHEN_OFFLINE = "cannot-delete-when-offline",
     CANNOT_EDIT_WHEN_OFFLINE = "cannot-edit-when-offline",
@@ -8,4 +9,8 @@ export type SyncedBlockSharedState = {
      * Whether to show a flag (usually for errors, e.g. fail to delete)
      */
     showFlag: FLAG_ID | false;
+    /**
+     * The current sync block store manager, used to manage fetching and updating sync block data
+     */
+    syncBlockStore: SyncBlockStoreManager;
 };

package/dist/types-ts4.5/nodeviews/bodiedSyncedBlock.d.ts

@@ -5,7 +5,6 @@ import ReactNodeView, { type getPosHandler } from '@atlaskit/editor-common/react
 import type { ExtractInjectionAPI, PMPluginFactoryParams } from '@atlaskit/editor-common/types';
 import { type Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
-import type { SyncBlockStoreManager } from '@atlaskit/editor-synced-block-provider';
 import type { SyncedBlockPlugin, SyncedBlockPluginOptions } from '../syncedBlockPluginType';
 export interface BodiedSyncBlockNodeViewProps extends ReactComponentProps {
     api?: ExtractInjectionAPI<SyncedBlockPlugin>;
@@ -14,13 +13,11 @@ export interface BodiedSyncBlockNodeViewProps extends ReactComponentProps {
     node: PMNode;
     pluginOptions: SyncedBlockPluginOptions | undefined;
     portalProviderAPI: PortalProviderAPI;
-    syncBlockStore: SyncBlockStoreManager;
     view: EditorView;
 }
 export interface BodiedSyncBlockNodeViewProperties {
     api?: ExtractInjectionAPI<SyncedBlockPlugin>;
     pluginOptions: SyncedBlockPluginOptions | undefined;
     pmPluginFactoryParams: PMPluginFactoryParams;
-    syncBlockStore: SyncBlockStoreManager;
 }
 export declare const bodiedSyncBlockNodeView: (props: BodiedSyncBlockNodeViewProperties) => (node: PMNode, view: EditorView, getPos: getPosHandler) => ReactNodeView<BodiedSyncBlockNodeViewProps>;

package/dist/types-ts4.5/nodeviews/syncedBlock.d.ts

@@ -5,7 +5,6 @@ import type { ReactComponentProps } from '@atlaskit/editor-common/react-node-vie
 import type { ExtractInjectionAPI, PMPluginFactoryParams } from '@atlaskit/editor-common/types';
 import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
-import type { SyncBlockStoreManager } from '@atlaskit/editor-synced-block-provider';
 import type { SyncedBlockPlugin, SyncedBlockPluginOptions } from '../syncedBlockPluginType';
 export interface SyncBlockNodeViewProps extends ReactComponentProps {
     api?: ExtractInjectionAPI<SyncedBlockPlugin>;
@@ -15,13 +14,11 @@ export interface SyncBlockNodeViewProps extends ReactComponentProps {
     node: PMNode;
     options: SyncedBlockPluginOptions | undefined;
     portalProviderAPI: PortalProviderAPI;
-    syncBlockStore: SyncBlockStoreManager;
     view: EditorView;
 }
 export interface SyncBlockNodeViewProperties {
     api?: ExtractInjectionAPI<SyncedBlockPlugin>;
     options: SyncedBlockPluginOptions | undefined;
     pmPluginFactoryParams: PMPluginFactoryParams;
-    syncBlockStore: SyncBlockStoreManager;
 }
 export declare const syncBlockNodeView: (props: SyncBlockNodeViewProperties) => (node: PMNode, view: EditorView, getPos: getPosHandler) => ReactNodeView<SyncBlockNodeViewProps>;

package/dist/types-ts4.5/pm-plugins/main.d.ts

@@ -9,6 +9,7 @@ export declare const syncedBlockPluginKey: PluginKey<any>;
 type SyncedBlockPluginState = {
     selectionDecorationSet: DecorationSet;
     showFlag: FLAG_ID | false;
+    syncBlockStore: SyncBlockStoreManager;
 };
 export declare const createPlugin: (options: SyncedBlockPluginOptions | undefined, pmPluginFactoryParams: PMPluginFactoryParams, syncBlockStore: SyncBlockStoreManager, api?: ExtractInjectionAPI<SyncedBlockPlugin>) => SafePlugin<SyncedBlockPluginState>;
 export {};

package/dist/types-ts4.5/types/index.d.ts

@@ -1,3 +1,4 @@
+import type { SyncBlockStoreManager } from '@atlaskit/editor-synced-block-provider';
 export declare enum FLAG_ID {
     CANNOT_DELETE_WHEN_OFFLINE = "cannot-delete-when-offline",
     CANNOT_EDIT_WHEN_OFFLINE = "cannot-edit-when-offline",
@@ -8,4 +9,8 @@ export type SyncedBlockSharedState = {
      * Whether to show a flag (usually for errors, e.g. fail to delete)
      */
     showFlag: FLAG_ID | false;
+    /**
+     * The current sync block store manager, used to manage fetching and updating sync block data
+     */
+    syncBlockStore: SyncBlockStoreManager;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-synced-block",
-	"version": "4.2.14",
+	"version": "4.3.0",
 	"description": "SyncedBlock plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -49,7 +49,7 @@
 		"@atlaskit/lozenge": "^13.1.0",
 		"@atlaskit/modal-dialog": "^14.7.0",
 		"@atlaskit/primitives": "^16.2.0",
-		"@atlaskit/tokens": "8.1.0",
+		"@atlaskit/tokens": "8.2.0",
 		"@atlaskit/tooltip": "^20.10.0",
 		"@atlaskit/visually-hidden": "^3.0.0",
 		"@babel/runtime": "^7.0.0",