@atlaskit/editor-plugin-synced-block 5.3.33 → 5.3.35

package/dist/esm/nodeviews/bodiedSyncedBlock.js

@@ -12,6 +12,7 @@ import ReactNodeView from '@atlaskit/editor-common/react-node-view';
 import { BodiedSyncBlockSharedCssClassName } from '@atlaskit/editor-common/sync-block';
 import { isOfflineMode } from '@atlaskit/editor-plugin-connectivity';
 import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { BodiedSyncBlockWrapper } from '../ui/BodiedSyncBlockWrapper';
 var toDOM = function toDOM() {
   return ['div', {
@@ -19,12 +20,13 @@ var toDOM = function toDOM() {
     contenteditable: true
   }, 0];
 };
-var BodiedSyncBlock = /*#__PURE__*/function (_ReactNodeView) {
+export var BodiedSyncBlock = /*#__PURE__*/function (_ReactNodeView) {
   function BodiedSyncBlock(props) {
     var _this;
     _classCallCheck(this, BodiedSyncBlock);
     _this = _callSuper(this, BodiedSyncBlock, [props.node, props.view, props.getPos, props.portalProviderAPI, props.eventDispatcher, props]);
     _this.api = props.api;
+    _this.syncBlockStore = props.syncBlockStore;
     _this.handleConnectivityModeChange();
     _this.handleViewModeChange();
     return _this;
@@ -84,8 +86,9 @@ var BodiedSyncBlock = /*#__PURE__*/function (_ReactNodeView) {
   }, {
     key: "render",
     value: function render(_props, forwardRef) {
-      var _this$api5, _this$api6;
-      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;
+      var _this$api$syncedBlock, _this$api5, _this$api6;
+      // Use passed syncBlockStore for SSR where sharedState.currentState() is delayed
+      var syncBlockStore = (_this$api$syncedBlock = (_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) !== null && _this$api$syncedBlock !== void 0 ? _this$api$syncedBlock : this.syncBlockStore;
       if (!syncBlockStore) {
         return null;
       }
@@ -105,10 +108,12 @@ var BodiedSyncBlock = /*#__PURE__*/function (_ReactNodeView) {
       var _DOMSerializer$render = DOMSerializer.renderSpec(document, toDOM()),
         dom = _DOMSerializer$render.dom,
         contentDOM = _DOMSerializer$render.contentDOM;
-      if (dom instanceof HTMLElement) {
+      // In SSR, the first check won't work, so fallback to nodeType check
+      if (dom instanceof HTMLElement || dom.nodeType === 1 && fg('platform_synced_block_patch_5')) {
         this.updateContentEditable({
           contentDOM: contentDOM
         });
+        // eslint-disable-next-line @atlaskit/editor/no-as-casting
         return {
           dom: dom,
           contentDOM: contentDOM
@@ -131,7 +136,8 @@ var BodiedSyncBlock = /*#__PURE__*/function (_ReactNodeView) {
 export var bodiedSyncBlockNodeView = function bodiedSyncBlockNodeView(_ref4) {
   var pluginOptions = _ref4.pluginOptions,
     pmPluginFactoryParams = _ref4.pmPluginFactoryParams,
-    api = _ref4.api;
+    api = _ref4.api,
+    syncBlockStore = _ref4.syncBlockStore;
   return function (node, view, getPos) {
     var portalProviderAPI = pmPluginFactoryParams.portalProviderAPI,
       eventDispatcher = pmPluginFactoryParams.eventDispatcher;
@@ -142,7 +148,8 @@ export var bodiedSyncBlockNodeView = function bodiedSyncBlockNodeView(_ref4) {
       view: view,
       getPos: getPos,
       portalProviderAPI: portalProviderAPI,
-      eventDispatcher: eventDispatcher
+      eventDispatcher: eventDispatcher,
+      syncBlockStore: syncBlockStore
     }).init();
   };
 };

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

@@ -1,3 +1,5 @@
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
@@ -16,6 +18,7 @@ import { DecorationSet, Decoration } from '@atlaskit/editor-prosemirror/view';
 import { convertPMNodesToSyncBlockNodes, rebaseTransaction } from '@atlaskit/editor-synced-block-provider';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { lazyBodiedSyncBlockView } from '../nodeviews/bodiedLazySyncedBlock';
+import { bodiedSyncBlockNodeView } from '../nodeviews/bodiedSyncedBlock';
 import { SyncBlock as SyncBlockView } from '../nodeviews/syncedBlock';
 import { FLAG_ID } from '../types';
 import { handleBodiedSyncBlockCreation } from './utils/handle-bodied-sync-block-creation';
@@ -23,7 +26,7 @@ import { handleBodiedSyncBlockRemoval } from './utils/handle-bodied-sync-block-r
 import { shouldIgnoreDomEvent } from './utils/ignore-dom-event';
 import { calculateDecorations } from './utils/selection-decorations';
 import { hasEditInSyncBlock, trackSyncBlocks } from './utils/track-sync-blocks';
-import { wasInlineExtensionInsertedInBodiedSyncBlock, sliceFullyContainsNode } from './utils/utils';
+import { deferDispatch, wasInlineExtensionInsertedInBodiedSyncBlock, sliceFullyContainsNode } from './utils/utils';
 export var syncedBlockPluginKey = new PluginKey('syncedBlockPlugin');
 var mapRetryCreationPosMap = function mapRetryCreationPosMap(oldMap, newRetryCreationPos, mapPos) {
   var resourceId = newRetryCreationPos === null || newRetryCreationPos === void 0 ? void 0 : newRetryCreationPos.resourceId;
@@ -59,8 +62,7 @@ var mapRetryCreationPosMap = function mapRetryCreationPosMap(oldMap, newRetryCre
   return newMap;
 };
 var showCopiedFlag = function showCopiedFlag(api) {
-  // Use setTimeout to dispatch transaction in next tick and avoid re-entrant dispatch
-  setTimeout(function () {
+  deferDispatch(function () {
     api === null || api === void 0 || api.core.actions.execute(function (_ref) {
       var tr = _ref.tr;
       return tr.setMeta(syncedBlockPluginKey, {
@@ -69,7 +71,7 @@ var showCopiedFlag = function showCopiedFlag(api) {
         }
       });
     });
-  }, 0);
+  });
 };
 var showInlineExtensionInSyncBlockWarningIfNeeded = function showInlineExtensionInSyncBlockWarningIfNeeded(tr, state, api, inlineExtensionFlagShown) {
   var _api$connectivity;
@@ -83,8 +85,7 @@ var showInlineExtensionInSyncBlockWarningIfNeeded = function showInlineExtension
   // Only show the flag on the first instance per sync block (same as UNPUBLISHED_SYNC_BLOCK_PASTED)
   if (resourceId && !inlineExtensionFlagShown.has(resourceId)) {
     inlineExtensionFlagShown.add(resourceId);
-    // Use setTimeout to dispatch in next tick and avoid re-entrant dispatch from filterTransaction
-    setTimeout(function () {
+    deferDispatch(function () {
       api === null || api === void 0 || api.core.actions.execute(function (_ref2) {
         var tr = _ref2.tr;
         return tr.setMeta(syncedBlockPluginKey, {
@@ -93,7 +94,7 @@ var showInlineExtensionInSyncBlockWarningIfNeeded = function showInlineExtension
           }
         });
       });
-    }, 0);
+    });
   }
 };
 var getDeleteReason = function getDeleteReason(tr) {
@@ -103,36 +104,176 @@ var getDeleteReason = function getDeleteReason(tr) {
   }
   return reason;
 };
+var filterTransactionOnline = function filterTransactionOnline(_ref3) {
+  var tr = _ref3.tr,
+    state = _ref3.state,
+    syncBlockStore = _ref3.syncBlockStore,
+    api = _ref3.api,
+    confirmationTransactionRef = _ref3.confirmationTransactionRef,
+    bodiedSyncBlockRemoved = _ref3.bodiedSyncBlockRemoved,
+    bodiedSyncBlockAdded = _ref3.bodiedSyncBlockAdded,
+    inlineExtensionFlagShown = _ref3.inlineExtensionFlagShown;
+  var _trackSyncBlocks = trackSyncBlocks(function (node) {
+      return node.type.name === 'syncBlock';
+    }, tr, state),
+    syncBlockRemoved = _trackSyncBlocks.removed,
+    syncBlockAdded = _trackSyncBlocks.added;
+  syncBlockRemoved.forEach(function (syncBlock) {
+    var _api$analytics;
+    api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 || (_api$analytics = _api$analytics.actions) === null || _api$analytics === void 0 || _api$analytics.fireAnalyticsEvent({
+      action: ACTION.DELETED,
+      actionSubject: ACTION_SUBJECT.SYNCED_BLOCK,
+      actionSubjectId: ACTION_SUBJECT_ID.REFERENCE_SYNCED_BLOCK_DELETE,
+      attributes: {
+        resourceId: syncBlock.attrs.resourceId,
+        blockInstanceId: syncBlock.attrs.localId
+      },
+      eventType: EVENT_TYPE.OPERATIONAL
+    });
+  });
+  syncBlockAdded.forEach(function (syncBlock) {
+    if (fg('platform_synced_block_patch_3')) {
+      var _api$analytics2;
+      api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 || (_api$analytics2 = _api$analytics2.actions) === null || _api$analytics2 === void 0 || _api$analytics2.fireAnalyticsEvent({
+        action: ACTION.INSERTED,
+        actionSubject: ACTION_SUBJECT.DOCUMENT,
+        actionSubjectId: ACTION_SUBJECT_ID.SYNCED_BLOCK,
+        attributes: {
+          resourceId: syncBlock.attrs.resourceId,
+          blockInstanceId: syncBlock.attrs.localId
+        },
+        eventType: EVENT_TYPE.TRACK
+      });
+    } else {
+      var _api$analytics3;
+      api === null || api === void 0 || (_api$analytics3 = api.analytics) === null || _api$analytics3 === void 0 || (_api$analytics3 = _api$analytics3.actions) === null || _api$analytics3 === void 0 || _api$analytics3.fireAnalyticsEvent({
+        action: ACTION.INSERTED,
+        actionSubject: ACTION_SUBJECT.SYNCED_BLOCK,
+        actionSubjectId: ACTION_SUBJECT_ID.REFERENCE_SYNCED_BLOCK_CREATE,
+        attributes: {
+          resourceId: syncBlock.attrs.resourceId,
+          blockInstanceId: syncBlock.attrs.localId
+        },
+        eventType: EVENT_TYPE.OPERATIONAL
+      });
+    }
+  });
+  if (bodiedSyncBlockRemoved.length > 0) {
+    // eslint-disable-next-line no-param-reassign
+    confirmationTransactionRef.current = tr;
+    return handleBodiedSyncBlockRemoval(bodiedSyncBlockRemoved, syncBlockStore, api, confirmationTransactionRef, getDeleteReason(tr));
+  }
+  if (bodiedSyncBlockAdded.length > 0) {
+    if (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;
+    }
+    handleBodiedSyncBlockCreation(bodiedSyncBlockAdded, state, api);
+    return true;
+  }
+  showInlineExtensionInSyncBlockWarningIfNeeded(tr, state, api, inlineExtensionFlagShown);
+  return true;
+};
+var filterTransactionOffline = function filterTransactionOffline(_ref4) {
+  var tr = _ref4.tr,
+    state = _ref4.state,
+    api = _ref4.api,
+    isConfirmedSyncBlockDeletion = _ref4.isConfirmedSyncBlockDeletion,
+    bodiedSyncBlockRemoved = _ref4.bodiedSyncBlockRemoved,
+    bodiedSyncBlockAdded = _ref4.bodiedSyncBlockAdded;
+  var _trackSyncBlocks2 = trackSyncBlocks(function (node) {
+      return node.type.name === 'syncBlock';
+    }, tr, state),
+    syncBlockRemoved = _trackSyncBlocks2.removed,
+    syncBlockAdded = _trackSyncBlocks2.added;
+  var errorFlag = false;
+  if (isConfirmedSyncBlockDeletion || bodiedSyncBlockRemoved.length > 0 || syncBlockRemoved.length > 0) {
+    errorFlag = FLAG_ID.CANNOT_DELETE_WHEN_OFFLINE;
+  } else if (bodiedSyncBlockAdded.length > 0 || syncBlockAdded.length > 0) {
+    errorFlag = FLAG_ID.CANNOT_CREATE_WHEN_OFFLINE;
+  } else if (hasEditInSyncBlock(tr, state)) {
+    errorFlag = FLAG_ID.CANNOT_EDIT_WHEN_OFFLINE;
+  }
+  if (errorFlag) {
+    deferDispatch(function () {
+      api === null || api === void 0 || api.core.actions.execute(function (_ref5) {
+        var tr = _ref5.tr;
+        return tr.setMeta(syncedBlockPluginKey, {
+          activeFlag: {
+            id: errorFlag
+          }
+        });
+      });
+    });
+    return false;
+  }
+  return true;
+};
+
+/**
+ * Encapsulates mutable state that persists across transactions in the
+ * synced block plugin. Replaces module-level closure variables so state
+ * is explicitly scoped to a single plugin instance.
+ */
+var SyncedBlockPluginContext = /*#__PURE__*/function () {
+  function SyncedBlockPluginContext() {
+    _classCallCheck(this, SyncedBlockPluginContext);
+    _defineProperty(this, "confirmationTransactionRef", {
+      current: undefined
+    });
+    _defineProperty(this, "_isCopyEvent", false);
+    _defineProperty(this, "unpublishedFlagShown", new Set());
+    _defineProperty(this, "inlineExtensionFlagShown", new Set());
+  }
+  return _createClass(SyncedBlockPluginContext, [{
+    key: "isCopyEvent",
+    get: function get() {
+      return this._isCopyEvent;
+    }
+  }, {
+    key: "markCopyEvent",
+    value: function markCopyEvent() {
+      this._isCopyEvent = true;
+    }
+  }, {
+    key: "consumeCopyEvent",
+    value: function consumeCopyEvent() {
+      var was = this._isCopyEvent;
+      this._isCopyEvent = false;
+      return was;
+    }
+  }]);
+}();
 export var createPlugin = function createPlugin(options, pmPluginFactoryParams, syncBlockStore, api) {
-  var _ref3 = options || {},
-    _ref3$useLongPressSel = _ref3.useLongPressSelection,
-    useLongPressSelection = _ref3$useLongPressSel === void 0 ? false : _ref3$useLongPressSel;
-  var confirmationTransactionRef = {
+  var _ctx$confirmationTran, _ctx$unpublishedFlagS, _ctx$inlineExtensionF;
+  var _ref6 = options || {},
+    _ref6$useLongPressSel = _ref6.useLongPressSelection,
+    useLongPressSelection = _ref6$useLongPressSel === void 0 ? false : _ref6$useLongPressSel;
+  var ctx = fg('platform_synced_block_patch_5') ? new SyncedBlockPluginContext() : undefined;
+  var confirmationTransactionRef = (_ctx$confirmationTran = ctx === null || ctx === void 0 ? void 0 : ctx.confirmationTransactionRef) !== null && _ctx$confirmationTran !== void 0 ? _ctx$confirmationTran : {
     current: undefined
   };
-  // Track if a copy event occurred to distinguish copy from drag and drop
   var isCopyEvent = false;
-  // Track which sync blocks have already triggered the unpublished flag
-  var unpublishedFlagShown = new Set();
-  // Track which sync blocks have already triggered the inline extension in sync block flag
-  var inlineExtensionFlagShown = new Set();
+  var unpublishedFlagShown = (_ctx$unpublishedFlagS = ctx === null || ctx === void 0 ? void 0 : ctx.unpublishedFlagShown) !== null && _ctx$unpublishedFlagS !== void 0 ? _ctx$unpublishedFlagS : new Set();
+  var inlineExtensionFlagShown = (_ctx$inlineExtensionF = ctx === null || ctx === void 0 ? void 0 : ctx.inlineExtensionFlagShown) !== null && _ctx$inlineExtensionF !== void 0 ? _ctx$inlineExtensionF : new Set();
 
   // Set up callback to detect unpublished sync blocks when they're fetched
   syncBlockStore.referenceManager.setOnUnpublishedSyncBlockDetected(function (resourceId) {
     // Only show the flag once per sync block
     if (!unpublishedFlagShown.has(resourceId)) {
       unpublishedFlagShown.add(resourceId);
-      // Use setTimeout to dispatch transaction in next tick and avoid re-entrant dispatch
-      setTimeout(function () {
-        api === null || api === void 0 || api.core.actions.execute(function (_ref4) {
-          var tr = _ref4.tr;
+      deferDispatch(function () {
+        api === null || api === void 0 || api.core.actions.execute(function (_ref7) {
+          var tr = _ref7.tr;
           return tr.setMeta(syncedBlockPluginKey, {
             activeFlag: {
               id: FLAG_ID.UNPUBLISHED_SYNC_BLOCK_PASTED
             }
           });
         });
-      }, 0);
+      });
     }
   });
   return new SafePlugin({
@@ -175,22 +316,29 @@ export var createPlugin = function createPlugin(options, pmPluginFactoryParams,
     props: {
       nodeViews: {
         syncBlock: function syncBlock(node, view, getPos, _decorations) {
-          // To support SSR, pass `syncBlockStore` here
-          // and do not use lazy loading.
-          // We cannot start rendering and then load `syncBlockStore` asynchronously,
-          // because obtaining it is asynchronous (sharedPluginState.currentState() is delayed).
-          return new SyncBlockView({
-            api: api,
-            options: options,
-            node: node,
-            view: view,
-            getPos: getPos,
-            portalProviderAPI: pmPluginFactoryParams.portalProviderAPI,
-            eventDispatcher: pmPluginFactoryParams.eventDispatcher,
-            syncBlockStore: syncBlockStore
-          }).init();
+          return (
+            // To support SSR, pass `syncBlockStore` here
+            // and do not use lazy loading.
+            // We cannot start rendering and then load `syncBlockStore` asynchronously,
+            // because obtaining it is asynchronous (sharedPluginState.currentState() is delayed).
+            new SyncBlockView({
+              api: api,
+              options: options,
+              node: node,
+              view: view,
+              getPos: getPos,
+              portalProviderAPI: pmPluginFactoryParams.portalProviderAPI,
+              eventDispatcher: pmPluginFactoryParams.eventDispatcher,
+              syncBlockStore: syncBlockStore
+            }).init()
+          );
         },
-        bodiedSyncBlock: lazyBodiedSyncBlockView({
+        bodiedSyncBlock: fg('platform_synced_block_patch_5') ? bodiedSyncBlockNodeView({
+          pluginOptions: options,
+          pmPluginFactoryParams: pmPluginFactoryParams,
+          api: api,
+          syncBlockStore: syncBlockStore
+        }) : lazyBodiedSyncBlockView({
           pluginOptions: options,
           pmPluginFactoryParams: pmPluginFactoryParams,
           api: api
@@ -239,17 +387,23 @@ export var createPlugin = function createPlugin(options, pmPluginFactoryParams,
           return shouldIgnoreDomEvent(view, event, api);
         },
         copy: function copy() {
-          isCopyEvent = true;
+          if (ctx) {
+            ctx.markCopyEvent();
+          } else {
+            isCopyEvent = true;
+          }
           return false;
         }
       },
-      transformCopied: function transformCopied(slice, _ref5) {
-        var state = _ref5.state;
+      transformCopied: function transformCopied(slice, _ref8) {
+        var state = _ref8.state;
         var pluginState = syncedBlockPluginKey.getState(state);
         var syncBlockStore = pluginState === null || pluginState === void 0 ? void 0 : pluginState.syncBlockStore;
         var schema = state.schema;
-        var isCopy = isCopyEvent;
-        isCopyEvent = false;
+        var isCopy = ctx ? ctx.consumeCopyEvent() : isCopyEvent;
+        if (!ctx) {
+          isCopyEvent = false;
+        }
         if (!syncBlockStore || !isCopy) {
           return slice;
         }
@@ -288,11 +442,10 @@ export var createPlugin = function createPlugin(options, pmPluginFactoryParams,
 
       // Track newly added reference sync blocks before processing the transaction
       if (tr.docChanged && !tr.getMeta('isRemote')) {
-        var _trackSyncBlocks = trackSyncBlocks(function (node) {
+        var _trackSyncBlocks3 = trackSyncBlocks(function (node) {
             return node.type.name === 'syncBlock';
           }, tr, state),
-          added = _trackSyncBlocks.added;
-        // Mark newly added sync blocks so we can detect unpublished status when data is fetched
+          added = _trackSyncBlocks3.added;
         added.forEach(function (nodeInfo) {
           var _nodeInfo$attrs;
           if ((_nodeInfo$attrs = nodeInfo.attrs) !== null && _nodeInfo$attrs !== void 0 && _nodeInfo$attrs.resourceId) {
@@ -300,26 +453,40 @@ export var createPlugin = function createPlugin(options, pmPluginFactoryParams,
           }
         });
       }
-
-      // Ignore transactions that don't change the document
-      // or are from remote (collab) or already confirmed sync block deletion
-      // We only care about local changes that change the document
-      // and are not yet confirmed for sync block deletion
       if (!tr.docChanged || Boolean(tr.getMeta('isRemote')) || !isOffline && isConfirmedSyncBlockDeletion) {
         return true;
       }
-      var _trackSyncBlocks2 = trackSyncBlocks(syncBlockStore.sourceManager.isSourceBlock, tr, state),
-        bodiedSyncBlockRemoved = _trackSyncBlocks2.removed,
-        bodiedSyncBlockAdded = _trackSyncBlocks2.added;
+      var _trackSyncBlocks4 = trackSyncBlocks(syncBlockStore.sourceManager.isSourceBlock, tr, state),
+        bodiedSyncBlockRemoved = _trackSyncBlocks4.removed,
+        bodiedSyncBlockAdded = _trackSyncBlocks4.added;
+      if (fg('platform_synced_block_patch_5')) {
+        return isOffline ? filterTransactionOffline({
+          tr: tr,
+          state: state,
+          api: api,
+          isConfirmedSyncBlockDeletion: isConfirmedSyncBlockDeletion,
+          bodiedSyncBlockRemoved: bodiedSyncBlockRemoved,
+          bodiedSyncBlockAdded: bodiedSyncBlockAdded
+        }) : filterTransactionOnline({
+          tr: tr,
+          state: state,
+          syncBlockStore: syncBlockStore,
+          api: api,
+          confirmationTransactionRef: confirmationTransactionRef,
+          bodiedSyncBlockRemoved: bodiedSyncBlockRemoved,
+          bodiedSyncBlockAdded: bodiedSyncBlockAdded,
+          inlineExtensionFlagShown: inlineExtensionFlagShown
+        });
+      }
       if (!isOffline) {
-        var _trackSyncBlocks3 = trackSyncBlocks(function (node) {
+        var _trackSyncBlocks5 = trackSyncBlocks(function (node) {
             return node.type.name === 'syncBlock';
           }, tr, state),
-          syncBlockRemoved = _trackSyncBlocks3.removed,
-          syncBlockAdded = _trackSyncBlocks3.added;
-        syncBlockRemoved.forEach(function (syncBlock) {
-          var _api$analytics;
-          api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 || (_api$analytics = _api$analytics.actions) === null || _api$analytics === void 0 || _api$analytics.fireAnalyticsEvent({
+          _syncBlockRemoved = _trackSyncBlocks5.removed,
+          _syncBlockAdded = _trackSyncBlocks5.added;
+        _syncBlockRemoved.forEach(function (syncBlock) {
+          var _api$analytics4;
+          api === null || api === void 0 || (_api$analytics4 = api.analytics) === null || _api$analytics4 === void 0 || (_api$analytics4 = _api$analytics4.actions) === null || _api$analytics4 === void 0 || _api$analytics4.fireAnalyticsEvent({
             action: ACTION.DELETED,
             actionSubject: ACTION_SUBJECT.SYNCED_BLOCK,
             actionSubjectId: ACTION_SUBJECT_ID.REFERENCE_SYNCED_BLOCK_DELETE,
@@ -330,10 +497,10 @@ export var createPlugin = function createPlugin(options, pmPluginFactoryParams,
             eventType: EVENT_TYPE.OPERATIONAL
           });
         });
-        syncBlockAdded.forEach(function (syncBlock) {
+        _syncBlockAdded.forEach(function (syncBlock) {
           if (fg('platform_synced_block_patch_3')) {
-            var _api$analytics2;
-            api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 || (_api$analytics2 = _api$analytics2.actions) === null || _api$analytics2 === void 0 || _api$analytics2.fireAnalyticsEvent({
+            var _api$analytics5;
+            api === null || api === void 0 || (_api$analytics5 = api.analytics) === null || _api$analytics5 === void 0 || (_api$analytics5 = _api$analytics5.actions) === null || _api$analytics5 === void 0 || _api$analytics5.fireAnalyticsEvent({
               action: ACTION.INSERTED,
               actionSubject: ACTION_SUBJECT.DOCUMENT,
               actionSubjectId: ACTION_SUBJECT_ID.SYNCED_BLOCK,
@@ -344,8 +511,8 @@ export var createPlugin = function createPlugin(options, pmPluginFactoryParams,
               eventType: EVENT_TYPE.TRACK
             });
           } else {
-            var _api$analytics3;
-            api === null || api === void 0 || (_api$analytics3 = api.analytics) === null || _api$analytics3 === void 0 || (_api$analytics3 = _api$analytics3.actions) === null || _api$analytics3 === void 0 || _api$analytics3.fireAnalyticsEvent({
+            var _api$analytics6;
+            api === null || api === void 0 || (_api$analytics6 = api.analytics) === null || _api$analytics6 === void 0 || (_api$analytics6 = _api$analytics6.actions) === null || _api$analytics6 === void 0 || _api$analytics6.fireAnalyticsEvent({
               action: ACTION.INSERTED,
               actionSubject: ACTION_SUBJECT.SYNCED_BLOCK,
               actionSubjectId: ACTION_SUBJECT_ID.REFERENCE_SYNCED_BLOCK_CREATE,
@@ -362,7 +529,7 @@ export var createPlugin = function createPlugin(options, pmPluginFactoryParams,
           return handleBodiedSyncBlockRemoval(bodiedSyncBlockRemoved, syncBlockStore, api, confirmationTransactionRef, getDeleteReason(tr));
         }
         if (bodiedSyncBlockAdded.length > 0) {
-          if (Boolean(tr.getMeta(pmHistoryPluginKey))) {
+          if (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
@@ -373,36 +540,34 @@ export var createPlugin = function createPlugin(options, pmPluginFactoryParams,
         }
         showInlineExtensionInSyncBlockWarningIfNeeded(tr, state, api, inlineExtensionFlagShown);
         return true;
-      } else {
-        var _trackSyncBlocks4 = trackSyncBlocks(function (node) {
-            return node.type.name === 'syncBlock';
-          }, tr, state),
-          _syncBlockRemoved = _trackSyncBlocks4.removed,
-          _syncBlockAdded = _trackSyncBlocks4.added;
-        var errorFlag = false;
+      }
+      var _trackSyncBlocks6 = trackSyncBlocks(function (node) {
+          return node.type.name === 'syncBlock';
+        }, tr, state),
+        syncBlockRemoved = _trackSyncBlocks6.removed,
+        syncBlockAdded = _trackSyncBlocks6.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) {
-          errorFlag = FLAG_ID.CANNOT_CREATE_WHEN_OFFLINE;
-        } else if (hasEditInSyncBlock(tr, state)) {
-          errorFlag = FLAG_ID.CANNOT_EDIT_WHEN_OFFLINE;
-        }
-        if (errorFlag) {
-          // Use setTimeout to dispatch transaction in next tick and avoid re-entrant dispatch
-          setTimeout(function () {
-            api === null || api === void 0 || api.core.actions.execute(function (_ref6) {
-              var tr = _ref6.tr;
-              return tr.setMeta(syncedBlockPluginKey, {
-                activeFlag: {
-                  id: errorFlag
-                }
-              });
+      // 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) {
+        errorFlag = FLAG_ID.CANNOT_CREATE_WHEN_OFFLINE;
+      } else if (hasEditInSyncBlock(tr, state)) {
+        errorFlag = FLAG_ID.CANNOT_EDIT_WHEN_OFFLINE;
+      }
+      if (errorFlag) {
+        deferDispatch(function () {
+          api === null || api === void 0 || api.core.actions.execute(function (_ref9) {
+            var tr = _ref9.tr;
+            return tr.setMeta(syncedBlockPluginKey, {
+              activeFlag: {
+                id: errorFlag
+              }
             });
-          }, 0);
-          return false;
-        }
+          });
+        });
+        return false;
       }
       return true;
     },
@@ -419,29 +584,27 @@ export var createPlugin = function createPlugin(options, pmPluginFactoryParams,
       try {
         var _loop = function _loop() {
             var tr = _step2.value;
-            if (!tr.getMeta(pmHistoryPluginKey)) {
-              return 0; // continue
-            }
-            var _trackSyncBlocks5 = trackSyncBlocks(syncBlockStore.sourceManager.isSourceBlock, tr, oldState),
-              added = _trackSyncBlocks5.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
-              };
+            if (tr.getMeta(pmHistoryPluginKey)) {
+              var _trackSyncBlocks7 = trackSyncBlocks(syncBlockStore.sourceManager.isSourceBlock, tr, oldState),
+                added = _trackSyncBlocks7.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 (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
           _ret = _loop();
-          if (_ret === 0) continue;
           if (_ret) return _ret.v;
         }
       } catch (err) {

package/dist/esm/pm-plugins/utils/handle-bodied-sync-block-creation.js

@@ -4,6 +4,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 import { TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { FLAG_ID } from '../../types';
 import { syncedBlockPluginKey } from '../main';
+import { deferDispatch } from './utils';
 var onRetry = function onRetry(api, resourceId) {
   return function () {
     var _api$core, _api$core2;
@@ -79,7 +80,7 @@ export var handleBodiedSyncBlockCreation = function handleBodiedSyncBlockCreatio
       to: node.to
     };
     var resourceId = node.attrs.resourceId;
-    setTimeout(function () {
+    deferDispatch(function () {
       var _api$core3;
       api === null || api === void 0 || (_api$core3 = api.core) === null || _api$core3 === void 0 || _api$core3.actions.execute(function (_ref2) {
         var tr = _ref2.tr;

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

@@ -2,6 +2,19 @@ import { expandSelectionToBlockRange } from '@atlaskit/editor-common/selection';
 import { Fragment } from '@atlaskit/editor-prosemirror/model';
 import { ReplaceAroundStep, ReplaceStep } from '@atlaskit/editor-prosemirror/transform';
 import { findParentNodeOfType, findParentNodeOfTypeClosestToPos, findSelectedNodeOfType } from '@atlaskit/editor-prosemirror/utils';
+import { fg } from '@atlaskit/platform-feature-flags';
+
+/**
+ * Defers a callback to the next microtask (when gated) or next macrotask via setTimeout(0).
+ * Used to avoid re-entrant ProseMirror dispatch cycles.
+ */
+export var deferDispatch = function deferDispatch(fn) {
+  if (fg('platform_synced_block_patch_5')) {
+    queueMicrotask(fn);
+  } else {
+    setTimeout(fn, 0);
+  }
+};
 export var findSyncBlock = function findSyncBlock(schema, selection) {
   var syncBlock = schema.nodes.syncBlock;
   return findSelectedNodeOfType(syncBlock)(selection);