@atlaskit/editor-plugin-synced-block 4.3.9 → 4.3.11

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/editor-plugin-synced-block
 
+## 4.3.11
+
+### Patch Changes
+
+- [`55920a92e882a`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/55920a92e882a) -
+  tsignores added for help-center local consumpton removed
+- Updated dependencies
+
+## 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

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 || {},
@@ -24,7 +28,6 @@ var createPlugin = exports.createPlugin = function createPlugin(options, pmPlugi
   return new _safePlugin.SafePlugin({
     key: syncedBlockPluginKey,
     state: {
-      // @ts-ignore - Workaround for help-center local consumption
       init: function init(_, instance) {
         var syncBlockNodes = instance.doc.children.filter(function (node) {
           return node.type.name === 'syncBlock';
@@ -36,7 +39,6 @@ var createPlugin = exports.createPlugin = function createPlugin(options, pmPlugi
           syncBlockStore: syncBlockStore
         };
       },
-      // @ts-ignore - Workaround for help-center local consumption
       apply: function apply(tr, currentPluginState, oldEditorState) {
         var _meta$showFlag;
         var meta = tr.getMeta(syncedBlockPluginKey);
@@ -66,7 +68,6 @@ var createPlugin = exports.createPlugin = function createPlugin(options, pmPlugi
           api: api
         })
       },
-      // @ts-ignore - Workaround for help-center local consumption
       decorations: function decorations(state) {
         var _syncedBlockPluginKey, _syncedBlockPluginKey2, _api$connectivity, _api$editorViewMode;
         var selectionDecorationSet = (_syncedBlockPluginKey = (_syncedBlockPluginKey2 = syncedBlockPluginKey.getState(state)) === null || _syncedBlockPluginKey2 === void 0 ? void 0 : _syncedBlockPluginKey2.selectionDecorationSet) !== null && _syncedBlockPluginKey !== void 0 ? _syncedBlockPluginKey : _view.DecorationSet.empty;
@@ -75,8 +76,6 @@ var createPlugin = exports.createPlugin = function createPlugin(options, pmPlugi
         var isViewMode = (api === null || api === void 0 || (_api$editorViewMode = api.editorViewMode) === null || _api$editorViewMode === void 0 || (_api$editorViewMode = _api$editorViewMode.sharedState.currentState()) === null || _api$editorViewMode === void 0 ? void 0 : _api$editorViewMode.mode) === 'view';
         var offlineDecorations = [];
         var viewModeDecorations = [];
-
-        // @ts-ignore - Workaround for help-center local consumption
         state.doc.descendants(function (node, pos) {
           if (node.type.name === 'bodiedSyncBlock' && isOffline) {
             offlineDecorations.push(_view.Decoration.node(pos, pos + node.nodeSize, {
@@ -97,11 +96,9 @@ var createPlugin = exports.createPlugin = function createPlugin(options, pmPlugi
         useLongPressSelection: useLongPressSelection
       }),
       handleDOMEvents: {
-        // @ts-ignore - Workaround for help-center local consumption
         mouseover: function mouseover(view, event) {
           return (0, _ignoreDomEvent.shouldIgnoreDomEvent)(view, event, api);
         },
-        // @ts-ignore - Workaround for help-center local consumption
         mousedown: function mousedown(view, event) {
           return (0, _ignoreDomEvent.shouldIgnoreDomEvent)(view, event, api);
         }
@@ -115,7 +112,6 @@ var createPlugin = exports.createPlugin = function createPlugin(options, pmPlugi
         }
       };
     },
-    // @ts-ignore - Workaround for help-center local consumption
     filterTransaction: function filterTransaction(tr, state) {
       var _api$connectivity2;
       var isOffline = (api === null || api === void 0 || (_api$connectivity2 = api.connectivity) === null || _api$connectivity2 === void 0 || (_api$connectivity2 = _api$connectivity2.sharedState.currentState()) === null || _api$connectivity2 === void 0 ? void 0 : _api$connectivity2.mode) === 'offline';
@@ -127,7 +123,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 +132,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 +158,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) {
@@ -182,17 +188,47 @@ var createPlugin = exports.createPlugin = function createPlugin(options, pmPlugi
       }
       return true;
     },
-    // @ts-ignore - Workaround for help-center local consumption
-    appendTransaction: function appendTransaction(trs, _oldState, newState) {
-      trs
-      // @ts-ignore - Workaround for help-center local consumption
-      .filter(function (tr) {
+    appendTransaction: function appendTransaction(trs, oldState, newState) {
+      trs.filter(function (tr) {
         return tr.docChanged;
-      })
-      // @ts-ignore - Workaround for help-center local consumption
-      .forEach(function (tr) {
+      }).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';
@@ -18,7 +19,6 @@ export const createPlugin = (options, pmPluginFactoryParams, syncBlockStore, api
   return new SafePlugin({
     key: syncedBlockPluginKey,
     state: {
-      // @ts-ignore - Workaround for help-center local consumption
       init(_, instance) {
         const syncBlockNodes = instance.doc.children.filter(node => node.type.name === 'syncBlock');
         syncBlockStore.referenceManager.fetchSyncBlocksData(convertPMNodesToSyncBlockNodes(syncBlockNodes));
@@ -28,7 +28,6 @@ export const createPlugin = (options, pmPluginFactoryParams, syncBlockStore, api
           syncBlockStore: syncBlockStore
         };
       },
-      // @ts-ignore - Workaround for help-center local consumption
       apply: (tr, currentPluginState, oldEditorState) => {
         var _meta$showFlag;
         const meta = tr.getMeta(syncedBlockPluginKey);
@@ -60,7 +59,6 @@ export const createPlugin = (options, pmPluginFactoryParams, syncBlockStore, api
           api
         })
       },
-      // @ts-ignore - Workaround for help-center local consumption
       decorations: state => {
         var _syncedBlockPluginKey, _syncedBlockPluginKey2, _api$connectivity, _api$connectivity$sha, _api$editorViewMode, _api$editorViewMode$s;
         const selectionDecorationSet = (_syncedBlockPluginKey = (_syncedBlockPluginKey2 = syncedBlockPluginKey.getState(state)) === null || _syncedBlockPluginKey2 === void 0 ? void 0 : _syncedBlockPluginKey2.selectionDecorationSet) !== null && _syncedBlockPluginKey !== void 0 ? _syncedBlockPluginKey : DecorationSet.empty;
@@ -71,8 +69,6 @@ export const createPlugin = (options, pmPluginFactoryParams, syncBlockStore, api
         const isViewMode = (api === null || api === void 0 ? void 0 : (_api$editorViewMode = api.editorViewMode) === null || _api$editorViewMode === void 0 ? void 0 : (_api$editorViewMode$s = _api$editorViewMode.sharedState.currentState()) === null || _api$editorViewMode$s === void 0 ? void 0 : _api$editorViewMode$s.mode) === 'view';
         const offlineDecorations = [];
         const viewModeDecorations = [];
-
-        // @ts-ignore - Workaround for help-center local consumption
         state.doc.descendants((node, pos) => {
           if (node.type.name === 'bodiedSyncBlock' && isOffline) {
             offlineDecorations.push(Decoration.node(pos, pos + node.nodeSize, {
@@ -91,11 +87,9 @@ export const createPlugin = (options, pmPluginFactoryParams, syncBlockStore, api
         useLongPressSelection
       }),
       handleDOMEvents: {
-        // @ts-ignore - Workaround for help-center local consumption
         mouseover(view, event) {
           return shouldIgnoreDomEvent(view, event, api);
         },
-        // @ts-ignore - Workaround for help-center local consumption
         mousedown(view, event) {
           return shouldIgnoreDomEvent(view, event, api);
         }
@@ -109,7 +103,6 @@ export const createPlugin = (options, pmPluginFactoryParams, syncBlockStore, api
         }
       };
     },
-    // @ts-ignore - Workaround for help-center local consumption
     filterTransaction: (tr, state) => {
       var _api$connectivity2, _api$connectivity2$sh;
       const isOffline = (api === null || api === void 0 ? void 0 : (_api$connectivity2 = api.connectivity) === null || _api$connectivity2 === void 0 ? void 0 : (_api$connectivity2$sh = _api$connectivity2.sharedState.currentState()) === null || _api$connectivity2$sh === void 0 ? void 0 : _api$connectivity2$sh.mode) === 'offline';
@@ -131,10 +124,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 +148,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) {
@@ -177,15 +178,29 @@ export const createPlugin = (options, pmPluginFactoryParams, syncBlockStore, api
       }
       return true;
     },
-    // @ts-ignore - Workaround for help-center local consumption
-    appendTransaction: (trs, _oldState, newState) => {
-      trs
-      // @ts-ignore - Workaround for help-center local consumption
-      .filter(tr => tr.docChanged)
-      // @ts-ignore - Workaround for help-center local consumption
-      .forEach(tr => {
+    appendTransaction: (trs, oldState, newState) => {
+      trs.filter(tr => tr.docChanged).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';
@@ -18,7 +22,6 @@ export var createPlugin = function createPlugin(options, pmPluginFactoryParams,
   return new SafePlugin({
     key: syncedBlockPluginKey,
     state: {
-      // @ts-ignore - Workaround for help-center local consumption
       init: function init(_, instance) {
         var syncBlockNodes = instance.doc.children.filter(function (node) {
           return node.type.name === 'syncBlock';
@@ -30,7 +33,6 @@ export var createPlugin = function createPlugin(options, pmPluginFactoryParams,
           syncBlockStore: syncBlockStore
         };
       },
-      // @ts-ignore - Workaround for help-center local consumption
       apply: function apply(tr, currentPluginState, oldEditorState) {
         var _meta$showFlag;
         var meta = tr.getMeta(syncedBlockPluginKey);
@@ -60,7 +62,6 @@ export var createPlugin = function createPlugin(options, pmPluginFactoryParams,
           api: api
         })
       },
-      // @ts-ignore - Workaround for help-center local consumption
       decorations: function decorations(state) {
         var _syncedBlockPluginKey, _syncedBlockPluginKey2, _api$connectivity, _api$editorViewMode;
         var selectionDecorationSet = (_syncedBlockPluginKey = (_syncedBlockPluginKey2 = syncedBlockPluginKey.getState(state)) === null || _syncedBlockPluginKey2 === void 0 ? void 0 : _syncedBlockPluginKey2.selectionDecorationSet) !== null && _syncedBlockPluginKey !== void 0 ? _syncedBlockPluginKey : DecorationSet.empty;
@@ -69,8 +70,6 @@ export var createPlugin = function createPlugin(options, pmPluginFactoryParams,
         var isViewMode = (api === null || api === void 0 || (_api$editorViewMode = api.editorViewMode) === null || _api$editorViewMode === void 0 || (_api$editorViewMode = _api$editorViewMode.sharedState.currentState()) === null || _api$editorViewMode === void 0 ? void 0 : _api$editorViewMode.mode) === 'view';
         var offlineDecorations = [];
         var viewModeDecorations = [];
-
-        // @ts-ignore - Workaround for help-center local consumption
         state.doc.descendants(function (node, pos) {
           if (node.type.name === 'bodiedSyncBlock' && isOffline) {
             offlineDecorations.push(Decoration.node(pos, pos + node.nodeSize, {
@@ -91,11 +90,9 @@ export var createPlugin = function createPlugin(options, pmPluginFactoryParams,
         useLongPressSelection: useLongPressSelection
       }),
       handleDOMEvents: {
-        // @ts-ignore - Workaround for help-center local consumption
         mouseover: function mouseover(view, event) {
           return shouldIgnoreDomEvent(view, event, api);
         },
-        // @ts-ignore - Workaround for help-center local consumption
         mousedown: function mousedown(view, event) {
           return shouldIgnoreDomEvent(view, event, api);
         }
@@ -109,7 +106,6 @@ export var createPlugin = function createPlugin(options, pmPluginFactoryParams,
         }
       };
     },
-    // @ts-ignore - Workaround for help-center local consumption
     filterTransaction: function filterTransaction(tr, state) {
       var _api$connectivity2;
       var isOffline = (api === null || api === void 0 || (_api$connectivity2 = api.connectivity) === null || _api$connectivity2 === void 0 || (_api$connectivity2 = _api$connectivity2.sharedState.currentState()) === null || _api$connectivity2 === void 0 ? void 0 : _api$connectivity2.mode) === 'offline';
@@ -130,10 +126,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 +152,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) {
@@ -176,17 +182,47 @@ export var createPlugin = function createPlugin(options, pmPluginFactoryParams,
       }
       return true;
     },
-    // @ts-ignore - Workaround for help-center local consumption
-    appendTransaction: function appendTransaction(trs, _oldState, newState) {
-      trs
-      // @ts-ignore - Workaround for help-center local consumption
-      .filter(function (tr) {
+    appendTransaction: function appendTransaction(trs, oldState, newState) {
+      trs.filter(function (tr) {
         return tr.docChanged;
-      })
-      // @ts-ignore - Workaround for help-center local consumption
-      .forEach(function (tr) {
+      }).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.9",
+	"version": "4.3.11",
 	"description": "SyncedBlock plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -32,7 +32,7 @@
 		"@atlaskit/button": "23.6.3",
 		"@atlaskit/editor-json-transformer": "^8.31.0",
 		"@atlaskit/editor-plugin-analytics": "^6.2.0",
-		"@atlaskit/editor-plugin-block-menu": "^5.0.0",
+		"@atlaskit/editor-plugin-block-menu": "^5.1.0",
 		"@atlaskit/editor-plugin-connectivity": "6.0.0",
 		"@atlaskit/editor-plugin-decorations": "^6.1.0",
 		"@atlaskit/editor-plugin-floating-toolbar": "^8.2.0",