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

package/dist/es2019/nodeviews/bodiedSyncedBlock.js

@@ -5,15 +5,17 @@ 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';
 const toDOM = () => ['div', {
   class: BodiedSyncBlockSharedCssClassName.content,
   contenteditable: true
 }, 0];
-class BodiedSyncBlock extends ReactNodeView {
+export class BodiedSyncBlock extends ReactNodeView {
   constructor(props) {
     super(props.node, props.view, props.getPos, props.portalProviderAPI, props.eventDispatcher, props);
     this.api = props.api;
+    this.syncBlockStore = props.syncBlockStore;
     this.handleConnectivityModeChange();
     this.handleViewModeChange();
   }
@@ -62,8 +64,9 @@ class BodiedSyncBlock extends ReactNodeView {
     return domRef;
   }
   render(_props, forwardRef) {
-    var _this$api5, _this$api5$syncedBloc, _this$api5$syncedBloc2, _this$api6, _this$api6$analytics;
-    const syncBlockStore = (_this$api5 = this.api) === null || _this$api5 === void 0 ? void 0 : (_this$api5$syncedBloc = _this$api5.syncedBlock.sharedState) === null || _this$api5$syncedBloc === void 0 ? void 0 : (_this$api5$syncedBloc2 = _this$api5$syncedBloc.currentState()) === null || _this$api5$syncedBloc2 === void 0 ? void 0 : _this$api5$syncedBloc2.syncBlockStore;
+    var _this$api$syncedBlock, _this$api5, _this$api5$syncedBloc, _this$api5$syncedBloc2, _this$api6, _this$api6$analytics;
+    // Use passed syncBlockStore for SSR where sharedState.currentState() is delayed
+    const syncBlockStore = (_this$api$syncedBlock = (_this$api5 = this.api) === null || _this$api5 === void 0 ? void 0 : (_this$api5$syncedBloc = _this$api5.syncedBlock.sharedState) === null || _this$api5$syncedBloc === void 0 ? void 0 : (_this$api5$syncedBloc2 = _this$api5$syncedBloc.currentState()) === null || _this$api5$syncedBloc2 === void 0 ? void 0 : _this$api5$syncedBloc2.syncBlockStore) !== null && _this$api$syncedBlock !== void 0 ? _this$api$syncedBlock : this.syncBlockStore;
     if (!syncBlockStore) {
       return null;
     }
@@ -82,12 +85,14 @@ class BodiedSyncBlock extends ReactNodeView {
       dom,
       contentDOM
     } = DOMSerializer.renderSpec(document, toDOM());
-    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
       });
+      // eslint-disable-next-line @atlaskit/editor/no-as-casting
       return {
-        dom,
+        dom: dom,
         contentDOM
       };
     }
@@ -105,7 +110,8 @@ class BodiedSyncBlock extends ReactNodeView {
 export const bodiedSyncBlockNodeView = ({
   pluginOptions,
   pmPluginFactoryParams,
-  api
+  api,
+  syncBlockStore
 }) => (node, view, getPos) => {
   const {
     portalProviderAPI,
@@ -118,6 +124,7 @@ export const bodiedSyncBlockNodeView = ({
     view,
     getPos,
     portalProviderAPI,
-    eventDispatcher
+    eventDispatcher,
+    syncBlockStore
   }).init();
 };

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

@@ -1,3 +1,4 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { createSelectionClickHandler } from '@atlaskit/editor-common/selection';
@@ -9,6 +10,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';
@@ -16,13 +18,15 @@ 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 const syncedBlockPluginKey = new PluginKey('syncedBlockPlugin');
 const mapRetryCreationPosMap = (oldMap, newRetryCreationPos, mapPos) => {
   const resourceId = newRetryCreationPos === null || newRetryCreationPos === void 0 ? void 0 : newRetryCreationPos.resourceId;
   const newMap = new Map(oldMap);
   if (resourceId) {
-    const pos = newRetryCreationPos.pos;
+    const {
+      pos
+    } = newRetryCreationPos;
     if (!pos) {
       newMap.delete(resourceId);
     } else {
@@ -41,18 +45,15 @@ const mapRetryCreationPosMap = (oldMap, newRetryCreationPos, mapPos) => {
   return newMap;
 };
 const showCopiedFlag = api => {
-  // Use setTimeout to dispatch transaction in next tick and avoid re-entrant dispatch
-  setTimeout(() => {
+  deferDispatch(() => {
     api === null || api === void 0 ? void 0 : api.core.actions.execute(({
       tr
-    }) => {
-      return tr.setMeta(syncedBlockPluginKey, {
-        activeFlag: {
-          id: FLAG_ID.SYNC_BLOCK_COPIED
-        }
-      });
-    });
-  }, 0);
+    }) => tr.setMeta(syncedBlockPluginKey, {
+      activeFlag: {
+        id: FLAG_ID.SYNC_BLOCK_COPIED
+      }
+    }));
+  });
 };
 const showInlineExtensionInSyncBlockWarningIfNeeded = (tr, state, api, inlineExtensionFlagShown) => {
   var _api$connectivity, _api$connectivity$sha;
@@ -66,18 +67,15 @@ const showInlineExtensionInSyncBlockWarningIfNeeded = (tr, state, api, inlineExt
   // 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(() => {
+    deferDispatch(() => {
       api === null || api === void 0 ? void 0 : api.core.actions.execute(({
         tr
-      }) => {
-        return tr.setMeta(syncedBlockPluginKey, {
-          activeFlag: {
-            id: FLAG_ID.INLINE_EXTENSION_IN_SYNC_BLOCK
-          }
-        });
-      });
-    }, 0);
+      }) => tr.setMeta(syncedBlockPluginKey, {
+        activeFlag: {
+          id: FLAG_ID.INLINE_EXTENSION_IN_SYNC_BLOCK
+        }
+      }));
+    });
   }
 };
 const getDeleteReason = tr => {
@@ -87,37 +85,166 @@ const getDeleteReason = tr => {
   }
   return reason;
 };
+const filterTransactionOnline = ({
+  tr,
+  state,
+  syncBlockStore,
+  api,
+  confirmationTransactionRef,
+  bodiedSyncBlockRemoved,
+  bodiedSyncBlockAdded,
+  inlineExtensionFlagShown
+}) => {
+  const {
+    removed: syncBlockRemoved,
+    added: syncBlockAdded
+  } = trackSyncBlocks(node => node.type.name === 'syncBlock', tr, state);
+  syncBlockRemoved.forEach(syncBlock => {
+    var _api$analytics, _api$analytics$action;
+    api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : (_api$analytics$action = _api$analytics.actions) === null || _api$analytics$action === void 0 ? void 0 : _api$analytics$action.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(syncBlock => {
+    if (fg('platform_synced_block_patch_3')) {
+      var _api$analytics2, _api$analytics2$actio;
+      api === null || api === void 0 ? void 0 : (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : (_api$analytics2$actio = _api$analytics2.actions) === null || _api$analytics2$actio === void 0 ? void 0 : _api$analytics2$actio.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$analytics3$actio;
+      api === null || api === void 0 ? void 0 : (_api$analytics3 = api.analytics) === null || _api$analytics3 === void 0 ? void 0 : (_api$analytics3$actio = _api$analytics3.actions) === null || _api$analytics3$actio === void 0 ? void 0 : _api$analytics3$actio.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;
+};
+const filterTransactionOffline = ({
+  tr,
+  state,
+  api,
+  isConfirmedSyncBlockDeletion,
+  bodiedSyncBlockRemoved,
+  bodiedSyncBlockAdded
+}) => {
+  const {
+    removed: syncBlockRemoved,
+    added: syncBlockAdded
+  } = trackSyncBlocks(node => node.type.name === 'syncBlock', tr, state);
+  let 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(() => {
+      api === null || api === void 0 ? void 0 : api.core.actions.execute(({
+        tr
+      }) => 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.
+ */
+class SyncedBlockPluginContext {
+  constructor() {
+    _defineProperty(this, "confirmationTransactionRef", {
+      current: undefined
+    });
+    _defineProperty(this, "_isCopyEvent", false);
+    _defineProperty(this, "unpublishedFlagShown", new Set());
+    _defineProperty(this, "inlineExtensionFlagShown", new Set());
+  }
+  get isCopyEvent() {
+    return this._isCopyEvent;
+  }
+  markCopyEvent() {
+    this._isCopyEvent = true;
+  }
+  consumeCopyEvent() {
+    const was = this._isCopyEvent;
+    this._isCopyEvent = false;
+    return was;
+  }
+}
 export const createPlugin = (options, pmPluginFactoryParams, syncBlockStore, api) => {
+  var _ctx$confirmationTran, _ctx$unpublishedFlagS, _ctx$inlineExtensionF;
   const {
     useLongPressSelection = false
   } = options || {};
-  const confirmationTransactionRef = {
+  const ctx = fg('platform_synced_block_patch_5') ? new SyncedBlockPluginContext() : undefined;
+  const 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
   let isCopyEvent = false;
-  // Track which sync blocks have already triggered the unpublished flag
-  const unpublishedFlagShown = new Set();
-  // Track which sync blocks have already triggered the inline extension in sync block flag
-  const inlineExtensionFlagShown = new Set();
+  const unpublishedFlagShown = (_ctx$unpublishedFlagS = ctx === null || ctx === void 0 ? void 0 : ctx.unpublishedFlagShown) !== null && _ctx$unpublishedFlagS !== void 0 ? _ctx$unpublishedFlagS : new Set();
+  const 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(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(() => {
+      deferDispatch(() => {
         api === null || api === void 0 ? void 0 : api.core.actions.execute(({
           tr
-        }) => {
-          return tr.setMeta(syncedBlockPluginKey, {
-            activeFlag: {
-              id: FLAG_ID.UNPUBLISHED_SYNC_BLOCK_PASTED
-            }
-          });
-        });
-      }, 0);
+        }) => tr.setMeta(syncedBlockPluginKey, {
+          activeFlag: {
+            id: FLAG_ID.UNPUBLISHED_SYNC_BLOCK_PASTED
+          }
+        }));
+      });
     }
   });
   return new SafePlugin({
@@ -159,23 +286,27 @@ export const createPlugin = (options, pmPluginFactoryParams, syncBlockStore, api
     },
     props: {
       nodeViews: {
-        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,
-            options,
-            node,
-            view,
-            getPos,
-            portalProviderAPI: pmPluginFactoryParams.portalProviderAPI,
-            eventDispatcher: pmPluginFactoryParams.eventDispatcher,
-            syncBlockStore: syncBlockStore
-          }).init();
-        },
-        bodiedSyncBlock: lazyBodiedSyncBlockView({
+        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).
+        new SyncBlockView({
+          api,
+          options,
+          node,
+          view,
+          getPos,
+          portalProviderAPI: pmPluginFactoryParams.portalProviderAPI,
+          eventDispatcher: pmPluginFactoryParams.eventDispatcher,
+          syncBlockStore: syncBlockStore
+        }).init(),
+        bodiedSyncBlock: fg('platform_synced_block_patch_5') ? bodiedSyncBlockNodeView({
+          pluginOptions: options,
+          pmPluginFactoryParams,
+          api,
+          syncBlockStore
+        }) : lazyBodiedSyncBlockView({
           pluginOptions: options,
           pmPluginFactoryParams,
           api
@@ -224,7 +355,11 @@ export const createPlugin = (options, pmPluginFactoryParams, syncBlockStore, api
           return shouldIgnoreDomEvent(view, event, api);
         },
         copy: () => {
-          isCopyEvent = true;
+          if (ctx) {
+            ctx.markCopyEvent();
+          } else {
+            isCopyEvent = true;
+          }
           return false;
         }
       },
@@ -236,8 +371,10 @@ export const createPlugin = (options, pmPluginFactoryParams, syncBlockStore, api
         const {
           schema
         } = state;
-        const isCopy = isCopyEvent;
-        isCopyEvent = false;
+        const isCopy = ctx ? ctx.consumeCopyEvent() : isCopyEvent;
+        if (!ctx) {
+          isCopyEvent = false;
+        }
         if (!syncBlockStore || !isCopy) {
           return slice;
         }
@@ -280,7 +417,6 @@ export const createPlugin = (options, pmPluginFactoryParams, syncBlockStore, api
         const {
           added
         } = trackSyncBlocks(node => node.type.name === 'syncBlock', tr, state);
-        // Mark newly added sync blocks so we can detect unpublished status when data is fetched
         added.forEach(nodeInfo => {
           var _nodeInfo$attrs;
           if ((_nodeInfo$attrs = nodeInfo.attrs) !== null && _nodeInfo$attrs !== void 0 && _nodeInfo$attrs.resourceId) {
@@ -288,11 +424,6 @@ export const createPlugin = (options, pmPluginFactoryParams, syncBlockStore, api
           }
         });
       }
-
-      // 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;
       }
@@ -300,14 +431,33 @@ export const createPlugin = (options, pmPluginFactoryParams, syncBlockStore, api
         removed: bodiedSyncBlockRemoved,
         added: bodiedSyncBlockAdded
       } = trackSyncBlocks(syncBlockStore.sourceManager.isSourceBlock, tr, state);
+      if (fg('platform_synced_block_patch_5')) {
+        return isOffline ? filterTransactionOffline({
+          tr,
+          state,
+          api,
+          isConfirmedSyncBlockDeletion,
+          bodiedSyncBlockRemoved,
+          bodiedSyncBlockAdded
+        }) : filterTransactionOnline({
+          tr,
+          state,
+          syncBlockStore,
+          api,
+          confirmationTransactionRef,
+          bodiedSyncBlockRemoved,
+          bodiedSyncBlockAdded,
+          inlineExtensionFlagShown
+        });
+      }
       if (!isOffline) {
         const {
           removed: syncBlockRemoved,
           added: syncBlockAdded
         } = trackSyncBlocks(node => node.type.name === 'syncBlock', tr, state);
         syncBlockRemoved.forEach(syncBlock => {
-          var _api$analytics, _api$analytics$action;
-          api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : (_api$analytics$action = _api$analytics.actions) === null || _api$analytics$action === void 0 ? void 0 : _api$analytics$action.fireAnalyticsEvent({
+          var _api$analytics4, _api$analytics4$actio;
+          api === null || api === void 0 ? void 0 : (_api$analytics4 = api.analytics) === null || _api$analytics4 === void 0 ? void 0 : (_api$analytics4$actio = _api$analytics4.actions) === null || _api$analytics4$actio === void 0 ? void 0 : _api$analytics4$actio.fireAnalyticsEvent({
             action: ACTION.DELETED,
             actionSubject: ACTION_SUBJECT.SYNCED_BLOCK,
             actionSubjectId: ACTION_SUBJECT_ID.REFERENCE_SYNCED_BLOCK_DELETE,
@@ -320,8 +470,8 @@ export const createPlugin = (options, pmPluginFactoryParams, syncBlockStore, api
         });
         syncBlockAdded.forEach(syncBlock => {
           if (fg('platform_synced_block_patch_3')) {
-            var _api$analytics2, _api$analytics2$actio;
-            api === null || api === void 0 ? void 0 : (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : (_api$analytics2$actio = _api$analytics2.actions) === null || _api$analytics2$actio === void 0 ? void 0 : _api$analytics2$actio.fireAnalyticsEvent({
+            var _api$analytics5, _api$analytics5$actio;
+            api === null || api === void 0 ? void 0 : (_api$analytics5 = api.analytics) === null || _api$analytics5 === void 0 ? void 0 : (_api$analytics5$actio = _api$analytics5.actions) === null || _api$analytics5$actio === void 0 ? void 0 : _api$analytics5$actio.fireAnalyticsEvent({
               action: ACTION.INSERTED,
               actionSubject: ACTION_SUBJECT.DOCUMENT,
               actionSubjectId: ACTION_SUBJECT_ID.SYNCED_BLOCK,
@@ -332,8 +482,8 @@ export const createPlugin = (options, pmPluginFactoryParams, syncBlockStore, api
               eventType: EVENT_TYPE.TRACK
             });
           } else {
-            var _api$analytics3, _api$analytics3$actio;
-            api === null || api === void 0 ? void 0 : (_api$analytics3 = api.analytics) === null || _api$analytics3 === void 0 ? void 0 : (_api$analytics3$actio = _api$analytics3.actions) === null || _api$analytics3$actio === void 0 ? void 0 : _api$analytics3$actio.fireAnalyticsEvent({
+            var _api$analytics6, _api$analytics6$actio;
+            api === null || api === void 0 ? void 0 : (_api$analytics6 = api.analytics) === null || _api$analytics6 === void 0 ? void 0 : (_api$analytics6$actio = _api$analytics6.actions) === null || _api$analytics6$actio === void 0 ? void 0 : _api$analytics6$actio.fireAnalyticsEvent({
               action: ACTION.INSERTED,
               actionSubject: ACTION_SUBJECT.SYNCED_BLOCK,
               actionSubjectId: ACTION_SUBJECT_ID.REFERENCE_SYNCED_BLOCK_CREATE,
@@ -350,7 +500,7 @@ export const createPlugin = (options, pmPluginFactoryParams, syncBlockStore, api
           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
@@ -361,36 +511,32 @@ export const createPlugin = (options, pmPluginFactoryParams, syncBlockStore, api
         }
         showInlineExtensionInSyncBlockWarningIfNeeded(tr, state, api, inlineExtensionFlagShown);
         return true;
-      } else {
-        const {
-          removed: syncBlockRemoved,
-          added: syncBlockAdded
-        } = trackSyncBlocks(node => node.type.name === 'syncBlock', tr, state);
-        let errorFlag = false;
+      }
+      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) {
-          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(() => {
-            api === null || api === void 0 ? void 0 : api.core.actions.execute(({
-              tr
-            }) => {
-              return tr.setMeta(syncedBlockPluginKey, {
-                activeFlag: {
-                  id: errorFlag
-                }
-              });
-            });
-          }, 0);
-          return 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) {
+        deferDispatch(() => {
+          api === null || api === void 0 ? void 0 : api.core.actions.execute(({
+            tr
+          }) => tr.setMeta(syncedBlockPluginKey, {
+            activeFlag: {
+              id: errorFlag
+            }
+          }));
+        });
+        return false;
       }
       return true;
     },
@@ -401,22 +547,23 @@ export const createPlugin = (options, pmPluginFactoryParams, syncBlockStore, api
         }
       });
       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;
+        if (tr.getMeta(pmHistoryPluginKey)) {
+          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;
+            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/handle-bodied-sync-block-creation.js

@@ -1,6 +1,7 @@
 import { TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { FLAG_ID } from '../../types';
 import { syncedBlockPluginKey } from '../main';
+import { deferDispatch } from './utils';
 const onRetry = (api, resourceId) => {
   return () => {
     var _api$core, _api$core2;
@@ -77,7 +78,7 @@ export const handleBodiedSyncBlockCreation = (bodiedSyncBlockAdded, editorState,
       to: node.to
     };
     const resourceId = node.attrs.resourceId;
-    setTimeout(() => {
+    deferDispatch(() => {
       var _api$core3;
       api === null || api === void 0 ? void 0 : (_api$core3 = api.core) === null || _api$core3 === void 0 ? void 0 : _api$core3.actions.execute(({
         tr

package/dist/es2019/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 const deferDispatch = fn => {
+  if (fg('platform_synced_block_patch_5')) {
+    queueMicrotask(fn);
+  } else {
+    setTimeout(fn, 0);
+  }
+};
 export const findSyncBlock = (schema, selection) => {
   const {
     syncBlock

package/dist/esm/editor-commands/index.js

@@ -5,7 +5,7 @@ import { DOMSerializer, Fragment } from '@atlaskit/editor-prosemirror/model';
 import { TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { findSelectedNodeOfType, removeParentNodeOfType, removeSelectedNode, safeInsert } from '@atlaskit/editor-prosemirror/utils';
 import { syncedBlockPluginKey } from '../pm-plugins/main';
-import { canBeConvertedToSyncBlock, findSyncBlock, findSyncBlockOrBodiedSyncBlock, isBodiedSyncBlockNode } from '../pm-plugins/utils/utils';
+import { canBeConvertedToSyncBlock, deferDispatch, findSyncBlock, findSyncBlockOrBodiedSyncBlock, isBodiedSyncBlockNode } from '../pm-plugins/utils/utils';
 import { FLAG_ID } from '../types';
 import { pasteSyncBlockHTMLContent } from './utils';
 export var createSyncedBlock = function createSyncedBlock(_ref) {
@@ -147,9 +147,7 @@ var copySyncedBlockReferenceToClipboardInternal = function copySyncedBlockRefere
   }
   var domNode = toDOM(referenceSyncBlockNode, schema);
   copyDomNode(domNode, referenceSyncBlockNode.type, selection);
-
-  // 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 (_ref3) {
       var _api$analytics4;
       var tr = _ref3.tr;
@@ -169,7 +167,7 @@ var copySyncedBlockReferenceToClipboardInternal = function copySyncedBlockRefere
         }
       });
     });
-  }, 0);
+  });
   return true;
 };
 export var editSyncedBlockSource = function editSyncedBlockSource(syncBlockStore, api) {