@atlaskit/editor-plugin-synced-block 4.3.8 → 4.3.10

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlaskit/editor-plugin-synced-block
 
+## 4.3.10
+
+### Patch Changes
+
+- [`99387f7d6303b`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/99387f7d6303b) -
+  [ux] [EDITOR-2767] Implement bodiedSyncBlock creation/deletion undo/redo
+- Updated dependencies
+
+## 4.3.9
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 4.3.8
 
 ### Patch Changes

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

@@ -7,6 +7,7 @@ exports.syncedBlockPluginKey = exports.createPlugin = void 0;
 var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
 var _selection = require("@atlaskit/editor-common/selection");
 var _syncBlock = require("@atlaskit/editor-common/sync-block");
+var _utils = require("@atlaskit/editor-common/utils");
 var _state = require("@atlaskit/editor-prosemirror/state");
 var _view = require("@atlaskit/editor-prosemirror/view");
 var _editorSyncedBlockProvider = require("@atlaskit/editor-synced-block-provider");
@@ -15,7 +16,10 @@ var _lazySyncedBlock = require("../nodeviews/lazySyncedBlock");
 var _types = require("../types");
 var _ignoreDomEvent = require("./utils/ignore-dom-event");
 var _selectionDecorations = require("./utils/selection-decorations");
-var _trackSyncBlocks3 = require("./utils/track-sync-blocks");
+var _trackSyncBlocks4 = require("./utils/track-sync-blocks");
+function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t.return || t.return(); } finally { if (u) throw o; } } }; }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
 var syncedBlockPluginKey = exports.syncedBlockPluginKey = new _state.PluginKey('syncedBlockPlugin');
 var createPlugin = exports.createPlugin = function createPlugin(options, pmPluginFactoryParams, syncBlockStore, api) {
   var _ref = options || {},
@@ -127,7 +131,7 @@ var createPlugin = exports.createPlugin = function createPlugin(options, pmPlugi
       if (!tr.docChanged || !(syncBlockStore !== null && syncBlockStore !== void 0 && syncBlockStore.sourceManager.requireConfirmationBeforeDelete()) && !syncBlockStore.sourceManager.hasPendingCreation() || Boolean(tr.getMeta('isRemote')) || Boolean(tr.getMeta('isCommitSyncBlockCreation')) || !isOffline && isConfirmedSyncBlockDeletion) {
         return true;
       }
-      var _trackSyncBlocks = (0, _trackSyncBlocks3.trackSyncBlocks)(syncBlockStore.sourceManager.isSourceBlock, tr, state),
+      var _trackSyncBlocks = (0, _trackSyncBlocks4.trackSyncBlocks)(syncBlockStore.sourceManager.isSourceBlock, tr, state),
         bodiedSyncBlockRemoved = _trackSyncBlocks.removed,
         bodiedSyncBlockAdded = _trackSyncBlocks.added;
       if (!isOffline) {
@@ -136,10 +140,19 @@ var createPlugin = exports.createPlugin = function createPlugin(options, pmPlugi
           // we block the transaction here, and wait for user confirmation to proceed with deletion.
           // See editor-common/src/sync-block/sync-block-store-manager.ts for how we handle user confirmation and
           // proceed with deletion.
-          syncBlockStore.sourceManager.deleteSyncBlocksWithConfirmation(tr, bodiedSyncBlockRemoved);
+          syncBlockStore.sourceManager.deleteSyncBlocksWithConfirmation(tr, bodiedSyncBlockRemoved.map(function (node) {
+            return node.attrs;
+          }));
           return false;
         }
         if (bodiedSyncBlockAdded.length > 0) {
+          if (Boolean(tr.getMeta(_utils.pmHistoryPluginKey))) {
+            // We don't allow bodiedSyncBlock creation via redo, however, we need to return true here to let transaction through so history can be updated properly.
+            // If we simply returns false, creation from redo is blocked as desired, but this results in editor showing redo as possible even though it's not.
+            // After true is returned here and the node is created, we delete the node in the filterTransaction immediately, which cancels out the creation
+            return true;
+          }
+
           // If there is bodiedSyncBlock node addition and it's waiting for the result of saving the node to backend (syncBlockStore.hasPendingCreation()),
           // we need to intercept the transaction and save it in insert callback so that we only insert it to the document when backend call if backend call is successful
           // The callback will be evoked by in SourceSyncBlockStoreManager.commitPendingCreation
@@ -153,18 +166,19 @@ var createPlugin = exports.createPlugin = function createPlugin(options, pmPlugi
           return false;
         }
       } else {
-        // Disable (bodied)syncBlock node deletion/creation/edition in offline mode and trigger an error flag instead
-        var _trackSyncBlocks2 = (0, _trackSyncBlocks3.trackSyncBlocks)(function (node) {
+        var _trackSyncBlocks2 = (0, _trackSyncBlocks4.trackSyncBlocks)(function (node) {
             return node.type.name === 'syncBlock';
           }, tr, state),
           syncBlockRemoved = _trackSyncBlocks2.removed,
           syncBlockAdded = _trackSyncBlocks2.added;
         var errorFlag = false;
+
+        // Disable (bodied)syncBlock node deletion/creation/edition in offline mode and trigger an error flag instead
         if (isConfirmedSyncBlockDeletion || bodiedSyncBlockRemoved.length > 0 || syncBlockRemoved.length > 0) {
           errorFlag = _types.FLAG_ID.CANNOT_DELETE_WHEN_OFFLINE;
         } else if (bodiedSyncBlockAdded.length > 0 || syncBlockAdded.length > 0) {
           errorFlag = _types.FLAG_ID.CANNOT_CREATE_WHEN_OFFLINE;
-        } else if ((0, _trackSyncBlocks3.hasEditInSyncBlock)(tr, state)) {
+        } else if ((0, _trackSyncBlocks4.hasEditInSyncBlock)(tr, state)) {
           errorFlag = _types.FLAG_ID.CANNOT_EDIT_WHEN_OFFLINE;
         }
         if (errorFlag) {
@@ -183,7 +197,7 @@ var createPlugin = exports.createPlugin = function createPlugin(options, pmPlugi
       return true;
     },
     // @ts-ignore - Workaround for help-center local consumption
-    appendTransaction: function appendTransaction(trs, _oldState, newState) {
+    appendTransaction: function appendTransaction(trs, oldState, newState) {
       trs
       // @ts-ignore - Workaround for help-center local consumption
       .filter(function (tr) {
@@ -193,6 +207,41 @@ var createPlugin = exports.createPlugin = function createPlugin(options, pmPlugi
       .forEach(function (tr) {
         syncBlockStore === null || syncBlockStore === void 0 || syncBlockStore.sourceManager.rebaseTransaction(tr, newState);
       });
+      var _iterator = _createForOfIteratorHelper(trs),
+        _step;
+      try {
+        var _loop = function _loop() {
+            var tr = _step.value;
+            if (!tr.getMeta(_utils.pmHistoryPluginKey)) {
+              return 0; // continue
+            }
+            var _trackSyncBlocks3 = (0, _trackSyncBlocks4.trackSyncBlocks)(syncBlockStore.sourceManager.isSourceBlock, tr, oldState),
+              added = _trackSyncBlocks3.added;
+            if (added.length > 0) {
+              // Delete bodiedSyncBlock if it's originated from history, i.e. redo creation
+              // See filterTransaction above for more details
+              var _tr = newState.tr;
+              added.forEach(function (node) {
+                if (node.from !== undefined && node.to !== undefined) {
+                  _tr.delete(node.from, node.to);
+                }
+              });
+              return {
+                v: _tr
+              };
+            }
+          },
+          _ret;
+        for (_iterator.s(); !(_step = _iterator.n()).done;) {
+          _ret = _loop();
+          if (_ret === 0) continue;
+          if (_ret) return _ret.v;
+        }
+      } catch (err) {
+        _iterator.e(err);
+      } finally {
+        _iterator.f();
+      }
       return null;
     }
   });

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

@@ -33,7 +33,7 @@ var trackSyncBlocks = exports.trackSyncBlocks = function trackSyncBlocks(predica
       step.getMap().forEach(function (oldStart, oldEnd) {
         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) {
+          deletedSlice.content.forEach(function (node) {
             if (hasChange) {
               return;
             }
@@ -64,13 +64,19 @@ var trackSyncBlocks = exports.trackSyncBlocks = function trackSyncBlocks(predica
     oldDoc.content.forEach(function (node) {
       if (predicate(node)) {
         var syncBlockAttr = node.attrs;
-        syncBlockMapOld[syncBlockAttr.localId] = syncBlockAttr;
+        syncBlockMapOld[syncBlockAttr.localId] = {
+          attrs: syncBlockAttr
+        };
       }
     });
-    newDoc.content.forEach(function (node) {
+    newDoc.content.forEach(function (node, offset) {
       if (predicate(node)) {
         var syncBlockAttr = node.attrs;
-        syncBlockMapNew[syncBlockAttr.localId] = syncBlockAttr;
+        syncBlockMapNew[syncBlockAttr.localId] = {
+          attrs: syncBlockAttr,
+          from: offset,
+          to: offset + node.nodeSize
+        };
       }
     });
 

package/dist/cjs/ui/DeleteConfirmationModal.js

@@ -60,7 +60,8 @@ var DeleteConfirmationModal = exports.DeleteConfirmationModal = function DeleteC
     };
   }, [syncBlockStoreManager, confirmationCallback]);
   return /*#__PURE__*/_react.default.createElement(_modalDialog.ModalTransition, null, isOpen && /*#__PURE__*/_react.default.createElement(_modalDialog.default, {
-    onClose: handleClose(false)
+    onClose: handleClose(false),
+    testId: "sync-block-delete-confirmation"
   }, /*#__PURE__*/_react.default.createElement(_modalDialog.ModalHeader, {
     hasCloseButton: true
   }, /*#__PURE__*/_react.default.createElement(_modalDialog.ModalTitle, {

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

@@ -1,6 +1,7 @@
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { createSelectionClickHandler } from '@atlaskit/editor-common/selection';
 import { BodiedSyncBlockSharedCssClassName, SyncBlockStateCssClassName } from '@atlaskit/editor-common/sync-block';
+import { pmHistoryPluginKey } from '@atlaskit/editor-common/utils';
 import { PluginKey } from '@atlaskit/editor-prosemirror/state';
 import { DecorationSet, Decoration } from '@atlaskit/editor-prosemirror/view';
 import { convertPMNodesToSyncBlockNodes } from '@atlaskit/editor-synced-block-provider';
@@ -131,10 +132,17 @@ export const createPlugin = (options, pmPluginFactoryParams, syncBlockStore, api
           // we block the transaction here, and wait for user confirmation to proceed with deletion.
           // See editor-common/src/sync-block/sync-block-store-manager.ts for how we handle user confirmation and
           // proceed with deletion.
-          syncBlockStore.sourceManager.deleteSyncBlocksWithConfirmation(tr, bodiedSyncBlockRemoved);
+          syncBlockStore.sourceManager.deleteSyncBlocksWithConfirmation(tr, bodiedSyncBlockRemoved.map(node => node.attrs));
           return false;
         }
         if (bodiedSyncBlockAdded.length > 0) {
+          if (Boolean(tr.getMeta(pmHistoryPluginKey))) {
+            // We don't allow bodiedSyncBlock creation via redo, however, we need to return true here to let transaction through so history can be updated properly.
+            // If we simply returns false, creation from redo is blocked as desired, but this results in editor showing redo as possible even though it's not.
+            // After true is returned here and the node is created, we delete the node in the filterTransaction immediately, which cancels out the creation
+            return true;
+          }
+
           // If there is bodiedSyncBlock node addition and it's waiting for the result of saving the node to backend (syncBlockStore.hasPendingCreation()),
           // we need to intercept the transaction and save it in insert callback so that we only insert it to the document when backend call if backend call is successful
           // The callback will be evoked by in SourceSyncBlockStoreManager.commitPendingCreation
@@ -148,12 +156,13 @@ export const createPlugin = (options, pmPluginFactoryParams, syncBlockStore, api
           return false;
         }
       } else {
-        // Disable (bodied)syncBlock node deletion/creation/edition in offline mode and trigger an error flag instead
         const {
           removed: syncBlockRemoved,
           added: syncBlockAdded
         } = trackSyncBlocks(node => node.type.name === 'syncBlock', tr, state);
         let errorFlag = false;
+
+        // Disable (bodied)syncBlock node deletion/creation/edition in offline mode and trigger an error flag instead
         if (isConfirmedSyncBlockDeletion || bodiedSyncBlockRemoved.length > 0 || syncBlockRemoved.length > 0) {
           errorFlag = FLAG_ID.CANNOT_DELETE_WHEN_OFFLINE;
         } else if (bodiedSyncBlockAdded.length > 0 || syncBlockAdded.length > 0) {
@@ -178,7 +187,7 @@ export const createPlugin = (options, pmPluginFactoryParams, syncBlockStore, api
       return true;
     },
     // @ts-ignore - Workaround for help-center local consumption
-    appendTransaction: (trs, _oldState, newState) => {
+    appendTransaction: (trs, oldState, newState) => {
       trs
       // @ts-ignore - Workaround for help-center local consumption
       .filter(tr => tr.docChanged)
@@ -186,6 +195,25 @@ export const createPlugin = (options, pmPluginFactoryParams, syncBlockStore, api
       .forEach(tr => {
         syncBlockStore === null || syncBlockStore === void 0 ? void 0 : syncBlockStore.sourceManager.rebaseTransaction(tr, newState);
       });
+      for (const tr of trs) {
+        if (!tr.getMeta(pmHistoryPluginKey)) {
+          continue;
+        }
+        const {
+          added
+        } = trackSyncBlocks(syncBlockStore.sourceManager.isSourceBlock, tr, oldState);
+        if (added.length > 0) {
+          // Delete bodiedSyncBlock if it's originated from history, i.e. redo creation
+          // See filterTransaction above for more details
+          const tr = newState.tr;
+          added.forEach(node => {
+            if (node.from !== undefined && node.to !== undefined) {
+              tr.delete(node.from, node.to);
+            }
+          });
+          return tr;
+        }
+      }
       return null;
     }
   });

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

@@ -24,7 +24,7 @@ export const trackSyncBlocks = (predicate, tr, state) => {
       step.getMap().forEach((oldStart, oldEnd) => {
         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) => {
+          deletedSlice.content.forEach(node => {
             if (hasChange) {
               return;
             }
@@ -55,13 +55,19 @@ export const trackSyncBlocks = (predicate, tr, state) => {
     oldDoc.content.forEach(node => {
       if (predicate(node)) {
         const syncBlockAttr = node.attrs;
-        syncBlockMapOld[syncBlockAttr.localId] = syncBlockAttr;
+        syncBlockMapOld[syncBlockAttr.localId] = {
+          attrs: syncBlockAttr
+        };
       }
     });
-    newDoc.content.forEach(node => {
+    newDoc.content.forEach((node, offset) => {
       if (predicate(node)) {
         const syncBlockAttr = node.attrs;
-        syncBlockMapNew[syncBlockAttr.localId] = syncBlockAttr;
+        syncBlockMapNew[syncBlockAttr.localId] = {
+          attrs: syncBlockAttr,
+          from: offset,
+          to: offset + node.nodeSize
+        };
       }
     });
 

package/dist/es2019/ui/DeleteConfirmationModal.js

@@ -45,7 +45,8 @@ export const DeleteConfirmationModal = ({
     };
   }, [syncBlockStoreManager, confirmationCallback]);
   return /*#__PURE__*/React.createElement(ModalTransition, null, isOpen && /*#__PURE__*/React.createElement(ModalDialog, {
-    onClose: handleClose(false)
+    onClose: handleClose(false),
+    testId: "sync-block-delete-confirmation"
   }, /*#__PURE__*/React.createElement(ModalHeader, {
     hasCloseButton: true
   }, /*#__PURE__*/React.createElement(ModalTitle, {

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

@@ -1,6 +1,10 @@
+function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t.return || t.return(); } finally { if (u) throw o; } } }; }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { createSelectionClickHandler } from '@atlaskit/editor-common/selection';
 import { BodiedSyncBlockSharedCssClassName, SyncBlockStateCssClassName } from '@atlaskit/editor-common/sync-block';
+import { pmHistoryPluginKey } from '@atlaskit/editor-common/utils';
 import { PluginKey } from '@atlaskit/editor-prosemirror/state';
 import { DecorationSet, Decoration } from '@atlaskit/editor-prosemirror/view';
 import { convertPMNodesToSyncBlockNodes } from '@atlaskit/editor-synced-block-provider';
@@ -130,10 +134,19 @@ export var createPlugin = function createPlugin(options, pmPluginFactoryParams,
           // we block the transaction here, and wait for user confirmation to proceed with deletion.
           // See editor-common/src/sync-block/sync-block-store-manager.ts for how we handle user confirmation and
           // proceed with deletion.
-          syncBlockStore.sourceManager.deleteSyncBlocksWithConfirmation(tr, bodiedSyncBlockRemoved);
+          syncBlockStore.sourceManager.deleteSyncBlocksWithConfirmation(tr, bodiedSyncBlockRemoved.map(function (node) {
+            return node.attrs;
+          }));
           return false;
         }
         if (bodiedSyncBlockAdded.length > 0) {
+          if (Boolean(tr.getMeta(pmHistoryPluginKey))) {
+            // We don't allow bodiedSyncBlock creation via redo, however, we need to return true here to let transaction through so history can be updated properly.
+            // If we simply returns false, creation from redo is blocked as desired, but this results in editor showing redo as possible even though it's not.
+            // After true is returned here and the node is created, we delete the node in the filterTransaction immediately, which cancels out the creation
+            return true;
+          }
+
           // If there is bodiedSyncBlock node addition and it's waiting for the result of saving the node to backend (syncBlockStore.hasPendingCreation()),
           // we need to intercept the transaction and save it in insert callback so that we only insert it to the document when backend call if backend call is successful
           // The callback will be evoked by in SourceSyncBlockStoreManager.commitPendingCreation
@@ -147,13 +160,14 @@ export var createPlugin = function createPlugin(options, pmPluginFactoryParams,
           return false;
         }
       } else {
-        // Disable (bodied)syncBlock node deletion/creation/edition in offline mode and trigger an error flag instead
         var _trackSyncBlocks2 = trackSyncBlocks(function (node) {
             return node.type.name === 'syncBlock';
           }, tr, state),
           syncBlockRemoved = _trackSyncBlocks2.removed,
           syncBlockAdded = _trackSyncBlocks2.added;
         var errorFlag = false;
+
+        // Disable (bodied)syncBlock node deletion/creation/edition in offline mode and trigger an error flag instead
         if (isConfirmedSyncBlockDeletion || bodiedSyncBlockRemoved.length > 0 || syncBlockRemoved.length > 0) {
           errorFlag = FLAG_ID.CANNOT_DELETE_WHEN_OFFLINE;
         } else if (bodiedSyncBlockAdded.length > 0 || syncBlockAdded.length > 0) {
@@ -177,7 +191,7 @@ export var createPlugin = function createPlugin(options, pmPluginFactoryParams,
       return true;
     },
     // @ts-ignore - Workaround for help-center local consumption
-    appendTransaction: function appendTransaction(trs, _oldState, newState) {
+    appendTransaction: function appendTransaction(trs, oldState, newState) {
       trs
       // @ts-ignore - Workaround for help-center local consumption
       .filter(function (tr) {
@@ -187,6 +201,41 @@ export var createPlugin = function createPlugin(options, pmPluginFactoryParams,
       .forEach(function (tr) {
         syncBlockStore === null || syncBlockStore === void 0 || syncBlockStore.sourceManager.rebaseTransaction(tr, newState);
       });
+      var _iterator = _createForOfIteratorHelper(trs),
+        _step;
+      try {
+        var _loop = function _loop() {
+            var tr = _step.value;
+            if (!tr.getMeta(pmHistoryPluginKey)) {
+              return 0; // continue
+            }
+            var _trackSyncBlocks3 = trackSyncBlocks(syncBlockStore.sourceManager.isSourceBlock, tr, oldState),
+              added = _trackSyncBlocks3.added;
+            if (added.length > 0) {
+              // Delete bodiedSyncBlock if it's originated from history, i.e. redo creation
+              // See filterTransaction above for more details
+              var _tr = newState.tr;
+              added.forEach(function (node) {
+                if (node.from !== undefined && node.to !== undefined) {
+                  _tr.delete(node.from, node.to);
+                }
+              });
+              return {
+                v: _tr
+              };
+            }
+          },
+          _ret;
+        for (_iterator.s(); !(_step = _iterator.n()).done;) {
+          _ret = _loop();
+          if (_ret === 0) continue;
+          if (_ret) return _ret.v;
+        }
+      } catch (err) {
+        _iterator.e(err);
+      } finally {
+        _iterator.f();
+      }
       return null;
     }
   });

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

@@ -27,7 +27,7 @@ export var trackSyncBlocks = function trackSyncBlocks(predicate, tr, state) {
       step.getMap().forEach(function (oldStart, oldEnd) {
         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) {
+          deletedSlice.content.forEach(function (node) {
             if (hasChange) {
               return;
             }
@@ -58,13 +58,19 @@ export var trackSyncBlocks = function trackSyncBlocks(predicate, tr, state) {
     oldDoc.content.forEach(function (node) {
       if (predicate(node)) {
         var syncBlockAttr = node.attrs;
-        syncBlockMapOld[syncBlockAttr.localId] = syncBlockAttr;
+        syncBlockMapOld[syncBlockAttr.localId] = {
+          attrs: syncBlockAttr
+        };
       }
     });
-    newDoc.content.forEach(function (node) {
+    newDoc.content.forEach(function (node, offset) {
       if (predicate(node)) {
         var syncBlockAttr = node.attrs;
-        syncBlockMapNew[syncBlockAttr.localId] = syncBlockAttr;
+        syncBlockMapNew[syncBlockAttr.localId] = {
+          attrs: syncBlockAttr,
+          from: offset,
+          to: offset + node.nodeSize
+        };
       }
     });
 

package/dist/esm/ui/DeleteConfirmationModal.js

@@ -51,7 +51,8 @@ export var DeleteConfirmationModal = function DeleteConfirmationModal(_ref) {
     };
   }, [syncBlockStoreManager, confirmationCallback]);
   return /*#__PURE__*/React.createElement(ModalTransition, null, isOpen && /*#__PURE__*/React.createElement(ModalDialog, {
-    onClose: handleClose(false)
+    onClose: handleClose(false),
+    testId: "sync-block-delete-confirmation"
   }, /*#__PURE__*/React.createElement(ModalHeader, {
     hasCloseButton: true
   }, /*#__PURE__*/React.createElement(ModalTitle, {

package/dist/types/pm-plugins/utils/track-sync-blocks.d.ts

@@ -2,8 +2,16 @@ import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import type { EditorState, Transaction } from '@atlaskit/editor-prosemirror/state';
 import type { SyncBlockAttrs } from '../../syncedBlockPluginType';
 export declare const trackSyncBlocks: (predicate: (node: PMNode) => boolean, tr: Transaction, state: EditorState) => {
-    removed: SyncBlockAttrs[];
-    added: SyncBlockAttrs[];
+    removed: {
+        attrs: SyncBlockAttrs;
+        from?: number;
+        to?: number;
+    }[];
+    added: {
+        attrs: SyncBlockAttrs;
+        from?: number;
+        to?: number;
+    }[];
 };
 /**
  *

package/dist/types-ts4.5/pm-plugins/utils/track-sync-blocks.d.ts

@@ -2,8 +2,16 @@ import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import type { EditorState, Transaction } from '@atlaskit/editor-prosemirror/state';
 import type { SyncBlockAttrs } from '../../syncedBlockPluginType';
 export declare const trackSyncBlocks: (predicate: (node: PMNode) => boolean, tr: Transaction, state: EditorState) => {
-    removed: SyncBlockAttrs[];
-    added: SyncBlockAttrs[];
+    removed: {
+        attrs: SyncBlockAttrs;
+        from?: number;
+        to?: number;
+    }[];
+    added: {
+        attrs: SyncBlockAttrs;
+        from?: number;
+        to?: number;
+    }[];
 };
 /**
  *

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-synced-block",
-	"version": "4.3.8",
+	"version": "4.3.10",
 	"description": "SyncedBlock plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -41,7 +41,7 @@
 		"@atlaskit/editor-shared-styles": "^3.10.0",
 		"@atlaskit/editor-synced-block-provider": "^2.11.0",
 		"@atlaskit/editor-tables": "^2.9.0",
-		"@atlaskit/editor-toolbar": "^0.17.0",
+		"@atlaskit/editor-toolbar": "^0.18.0",
 		"@atlaskit/flag": "^17.5.0",
 		"@atlaskit/icon": "29.0.0",
 		"@atlaskit/icon-lab": "^5.12.0",