@atlaskit/editor-plugin-synced-block 5.3.12 → 5.3.14

package/dist/es2019/nodeviews/syncedBlock.js

@@ -4,7 +4,6 @@ import { ErrorBoundary } from '@atlaskit/editor-common/error-boundary';
 import ReactNodeView from '@atlaskit/editor-common/react-node-view';
 import { SyncBlockSharedCssClassName, SyncBlockActionsProvider } from '@atlaskit/editor-common/sync-block';
 import { useFetchSyncBlockData, useFetchSyncBlockTitle } from '@atlaskit/editor-synced-block-provider';
-import { fg } from '@atlaskit/platform-feature-flags';
 import { removeSyncedBlockAtPos } from '../editor-commands';
 import { SyncBlockRendererWrapper } from '../ui/SyncBlockRendererWrapper';
 export class SyncBlock extends ReactNodeView {
@@ -22,7 +21,7 @@ export class SyncBlock extends ReactNodeView {
   render({
     getPos
   }) {
-    var _this$options, _this$api$syncedBlock, _this$api, _this$api$syncedBlock2, _this$api$syncedBlock3, _this$api2, _this$api2$analytics, _this$options2, _this$options3;
+    var _this$options, _this$api$syncedBlock, _this$api, _this$api$syncedBlock2, _this$api$syncedBlock3, _this$api2, _this$api2$analytics, _this$options2;
     if (!((_this$options = this.options) !== null && _this$options !== void 0 && _this$options.syncedBlockRenderer)) {
       return null;
     }
@@ -33,14 +32,13 @@ export class SyncBlock extends ReactNodeView {
     if (!resourceId || !localId) {
       return null;
     }
-    const initialSyncBlockStore = fg('platform_synced_block_dogfooding') ? this.syncBlockStore : undefined;
-    const syncBlockStore = (_this$api$syncedBlock = (_this$api = this.api) === null || _this$api === void 0 ? void 0 : (_this$api$syncedBlock2 = _this$api.syncedBlock) === null || _this$api$syncedBlock2 === void 0 ? void 0 : (_this$api$syncedBlock3 = _this$api$syncedBlock2.sharedState.currentState()) === null || _this$api$syncedBlock3 === void 0 ? void 0 : _this$api$syncedBlock3.syncBlockStore) !== null && _this$api$syncedBlock !== void 0 ? _this$api$syncedBlock : initialSyncBlockStore;
+    const syncBlockStore = (_this$api$syncedBlock = (_this$api = this.api) === null || _this$api === void 0 ? void 0 : (_this$api$syncedBlock2 = _this$api.syncedBlock) === null || _this$api$syncedBlock2 === void 0 ? void 0 : (_this$api$syncedBlock3 = _this$api$syncedBlock2.sharedState.currentState()) === null || _this$api$syncedBlock3 === void 0 ? void 0 : _this$api$syncedBlock3.syncBlockStore) !== null && _this$api$syncedBlock !== void 0 ? _this$api$syncedBlock : this.syncBlockStore;
     if (!syncBlockStore) {
       return null;
     }
 
     // get document node from data provider
-    return fg('platform_synced_block_dogfooding') ? /*#__PURE__*/React.createElement(ErrorBoundary, {
+    return /*#__PURE__*/React.createElement(ErrorBoundary, {
       component: ACTION_SUBJECT.SYNCED_BLOCK,
       dispatchAnalyticsEvent: (_this$api2 = this.api) === null || _this$api2 === void 0 ? void 0 : (_this$api2$analytics = _this$api2.analytics) === null || _this$api2$analytics === void 0 ? void 0 : _this$api2$analytics.actions.fireAnalyticsEvent,
       fallbackComponent: null
@@ -61,16 +59,7 @@ export class SyncBlock extends ReactNodeView {
         return useFetchSyncBlockData(syncBlockStore, resourceId, localId, (_this$api3 = this.api) === null || _this$api3 === void 0 ? void 0 : (_this$api3$analytics = _this$api3.analytics) === null || _this$api3$analytics === void 0 ? void 0 : (_this$api3$analytics$ = _this$api3$analytics.actions) === null || _this$api3$analytics$ === void 0 ? void 0 : _this$api3$analytics$.fireAnalyticsEvent);
       },
       api: this.api
-    }))) : /*#__PURE__*/React.createElement(SyncBlockRendererWrapper, {
-      localId: this.node.attrs.localId,
-      syncedBlockRenderer: (_this$options3 = this.options) === null || _this$options3 === void 0 ? void 0 : _this$options3.syncedBlockRenderer,
-      useFetchSyncBlockTitle: () => useFetchSyncBlockTitle(syncBlockStore, this.node),
-      useFetchSyncBlockData: () => {
-        var _this$api4, _this$api4$analytics, _this$api4$analytics$;
-        return useFetchSyncBlockData(syncBlockStore, resourceId, localId, (_this$api4 = this.api) === null || _this$api4 === void 0 ? void 0 : (_this$api4$analytics = _this$api4.analytics) === null || _this$api4$analytics === void 0 ? void 0 : (_this$api4$analytics$ = _this$api4$analytics.actions) === null || _this$api4$analytics$ === void 0 ? void 0 : _this$api4$analytics$.fireAnalyticsEvent);
-      },
-      api: this.api
-    });
+    })));
   }
   destroy() {
     var _this$unsubscribe;

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

@@ -9,15 +9,37 @@ 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 { lazySyncBlockView } from '../nodeviews/lazySyncedBlock';
 import { SyncBlock as SyncBlockView } from '../nodeviews/syncedBlock';
 import { FLAG_ID } from '../types';
+import { handleBodiedSyncBlockCreation } from './utils/handle-bodied-sync-block-creation';
 import { handleBodiedSyncBlockRemoval } from './utils/handle-bodied-sync-block-removal';
 import { shouldIgnoreDomEvent } from './utils/ignore-dom-event';
 import { calculateDecorations } from './utils/selection-decorations';
 import { hasEditInSyncBlock, trackSyncBlocks } from './utils/track-sync-blocks';
 import { 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;
+    if (!pos) {
+      newMap.delete(resourceId);
+    } else {
+      newMap.set(resourceId, pos);
+    }
+  }
+  if (newMap.size === 0) {
+    return newMap;
+  }
+  for (const [id, pos] of newMap.entries()) {
+    newMap.set(id, {
+      from: mapPos(pos.from),
+      to: mapPos(pos.to)
+    });
+  }
+  return newMap;
+};
 const showCopiedFlag = api => {
   // Use setTimeout to dispatch transaction in next tick and avoid re-entrant dispatch
   setTimeout(() => {
@@ -52,7 +74,7 @@ export const createPlugin = (options, pmPluginFactoryParams, syncBlockStore, api
   const unpublishedFlagShown = new Set();
 
   // Set up callback to detect unpublished sync blocks when they're fetched
-  fg('platform_synced_block_dogfooding') && syncBlockStore.referenceManager.setOnUnpublishedSyncBlockDetected(resourceId => {
+  syncBlockStore.referenceManager.setOnUnpublishedSyncBlockDetected(resourceId => {
     // Only show the flag once per sync block
     if (!unpublishedFlagShown.has(resourceId)) {
       unpublishedFlagShown.add(resourceId);
@@ -79,7 +101,8 @@ export const createPlugin = (options, pmPluginFactoryParams, syncBlockStore, api
         return {
           selectionDecorationSet: calculateDecorations(instance.doc, instance.selection, instance.schema),
           activeFlag: false,
-          syncBlockStore: syncBlockStore
+          syncBlockStore: syncBlockStore,
+          retryCreationPosMap: new Map()
         };
       },
       apply: (tr, currentPluginState, oldEditorState) => {
@@ -88,23 +111,30 @@ export const createPlugin = (options, pmPluginFactoryParams, syncBlockStore, api
         const {
           activeFlag,
           selectionDecorationSet,
-          bodiedSyncBlockDeletionStatus
+          bodiedSyncBlockDeletionStatus,
+          retryCreationPosMap
         } = currentPluginState;
         let newDecorationSet = selectionDecorationSet.map(tr.mapping, tr.doc);
         if (!tr.selection.eq(oldEditorState.selection)) {
           newDecorationSet = calculateDecorations(tr.doc, tr.selection, tr.doc.type.schema);
         }
+        let newRetryCreationPosMap = retryCreationPosMap;
+        if (fg('platform_synced_block_patch_1')) {
+          const newPosEntry = meta === null || meta === void 0 ? void 0 : meta.retryCreationPos;
+          newRetryCreationPosMap = mapRetryCreationPosMap(retryCreationPosMap, newPosEntry, tr.mapping.map.bind(tr.mapping));
+        }
         return {
           activeFlag: (_meta$activeFlag = meta === null || meta === void 0 ? void 0 : meta.activeFlag) !== null && _meta$activeFlag !== void 0 ? _meta$activeFlag : activeFlag,
           selectionDecorationSet: newDecorationSet,
           syncBlockStore: syncBlockStore,
+          retryCreationPosMap: newRetryCreationPosMap,
           bodiedSyncBlockDeletionStatus: (_meta$bodiedSyncBlock = meta === null || meta === void 0 ? void 0 : meta.bodiedSyncBlockDeletionStatus) !== null && _meta$bodiedSyncBlock !== void 0 ? _meta$bodiedSyncBlock : bodiedSyncBlockDeletionStatus
         };
       }
     },
     props: {
       nodeViews: {
-        syncBlock: fg('platform_synced_block_dogfooding') ? (node, view, getPos, _decorations) => {
+        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,
@@ -119,11 +149,7 @@ export const createPlugin = (options, pmPluginFactoryParams, syncBlockStore, api
             eventDispatcher: pmPluginFactoryParams.eventDispatcher,
             syncBlockStore: syncBlockStore
           }).init();
-        } : lazySyncBlockView({
-          options,
-          pmPluginFactoryParams,
-          api
-        }),
+        },
         bodiedSyncBlock: lazyBodiedSyncBlockView({
           pluginOptions: options,
           pmPluginFactoryParams,
@@ -131,8 +157,10 @@ export const createPlugin = (options, pmPluginFactoryParams, syncBlockStore, api
         })
       },
       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;
+        var _currentPluginState$s, _api$connectivity, _api$connectivity$sha, _api$editorViewMode, _api$editorViewMode$s;
+        const currentPluginState = syncedBlockPluginKey.getState(state);
+        const selectionDecorationSet = (_currentPluginState$s = currentPluginState === null || currentPluginState === void 0 ? void 0 : currentPluginState.selectionDecorationSet) !== null && _currentPluginState$s !== void 0 ? _currentPluginState$s : DecorationSet.empty;
+        const syncBlockStore = currentPluginState === null || currentPluginState === void 0 ? void 0 : currentPluginState.syncBlockStore;
         const {
           doc
         } = state;
@@ -140,6 +168,7 @@ 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 = [];
+        const loadingDecorations = [];
         state.doc.descendants((node, pos) => {
           if (node.type.name === 'bodiedSyncBlock' && isOffline) {
             offlineDecorations.push(Decoration.node(pos, pos + node.nodeSize, {
@@ -151,8 +180,13 @@ export const createPlugin = (options, pmPluginFactoryParams, syncBlockStore, api
               class: SyncBlockStateCssClassName.viewModeClassName
             }));
           }
+          if (node.type.name === 'bodiedSyncBlock' && syncBlockStore.sourceManager.isPendingCreation(node.attrs.resourceId) && fg('platform_synced_block_patch_1')) {
+            loadingDecorations.push(Decoration.node(pos, pos + node.nodeSize, {
+              class: SyncBlockStateCssClassName.creationLoadingClassName
+            }));
+          }
         });
-        return selectionDecorationSet.add(doc, offlineDecorations).add(doc, viewModeDecorations);
+        return selectionDecorationSet.add(doc, offlineDecorations).add(doc, viewModeDecorations).add(doc, loadingDecorations);
       },
       handleClickOn: createSelectionClickHandler(['bodiedSyncBlock'], target => !!target.closest(`.${BodiedSyncBlockSharedCssClassName.prefix}`), {
         useLongPressSelection
@@ -215,9 +249,15 @@ export const createPlugin = (options, pmPluginFactoryParams, syncBlockStore, api
       var _api$connectivity2, _api$connectivity2$sh;
       const isOffline = isOfflineMode(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);
       const isConfirmedSyncBlockDeletion = Boolean(tr.getMeta('isConfirmedSyncBlockDeletion'));
+      const hasNoPendingRequest = fg('platform_synced_block_patch_1') ? false :
+      // requireConfirmationBeforeDelete is always true, so this evaluates to false and hence redundant
+      !(syncBlockStore !== null && syncBlockStore !== void 0 && syncBlockStore.sourceManager.requireConfirmationBeforeDelete()) && !syncBlockStore.sourceManager.hasPendingCreation();
+      const isCommitsCreation = fg('platform_synced_block_patch_1') ? false :
+      // For patch 1, we don't intercept the insert transaction, hence it's redundant
+      Boolean(tr.getMeta('isCommitSyncBlockCreation'));
 
       // Track newly added reference sync blocks before processing the transaction
-      if (tr.docChanged && !tr.getMeta('isRemote') && fg('platform_synced_block_dogfooding')) {
+      if (tr.docChanged && !tr.getMeta('isRemote')) {
         const {
           added
         } = trackSyncBlocks(node => node.type.name === 'syncBlock', tr, state);
@@ -234,7 +274,7 @@ export const createPlugin = (options, pmPluginFactoryParams, syncBlockStore, api
       // 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 || !(syncBlockStore !== null && syncBlockStore !== void 0 && syncBlockStore.sourceManager.requireConfirmationBeforeDelete()) && !syncBlockStore.sourceManager.hasPendingCreation() || Boolean(tr.getMeta('isRemote')) || Boolean(tr.getMeta('isCommitSyncBlockCreation')) || !isOffline && isConfirmedSyncBlockDeletion) {
+      if (!tr.docChanged || hasNoPendingRequest || Boolean(tr.getMeta('isRemote')) || isCommitsCreation || !isOffline && isConfirmedSyncBlockDeletion) {
         return true;
       }
       const {
@@ -242,42 +282,39 @@ export const createPlugin = (options, pmPluginFactoryParams, syncBlockStore, api
         added: bodiedSyncBlockAdded
       } = trackSyncBlocks(syncBlockStore.sourceManager.isSourceBlock, tr, state);
       if (!isOffline) {
-        if (fg('platform_synced_block_dogfooding')) {
-          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
-            });
+        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 => {
-            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.SYNCED_BLOCK,
-              actionSubjectId: ACTION_SUBJECT_ID.REFERENCE_SYNCED_BLOCK_CREATE,
-              attributes: {
-                resourceId: syncBlock.attrs.resourceId,
-                blockInstanceId: syncBlock.attrs.localId
-              },
-              eventType: EVENT_TYPE.OPERATIONAL
-            });
+        });
+        syncBlockAdded.forEach(syncBlock => {
+          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.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) {
           confirmationTransactionRef.current = tr;
-          return handleBodiedSyncBlockRemoval(bodiedSyncBlockRemoved, syncBlockStore, api, confirmationTransactionRef, fg('platform_synced_block_dogfooding') ? getDeleteReason(tr) : undefined);
+          return handleBodiedSyncBlockRemoval(bodiedSyncBlockRemoved, syncBlockStore, api, confirmationTransactionRef, getDeleteReason(tr));
         }
         if (bodiedSyncBlockAdded.length > 0) {
           if (Boolean(tr.getMeta(pmHistoryPluginKey))) {
@@ -286,18 +323,22 @@ export const createPlugin = (options, pmPluginFactoryParams, syncBlockStore, api
             // 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
-          syncBlockStore.sourceManager.registerCreationCallback(() => {
-            var _api$core;
-            api === null || api === void 0 ? void 0 : (_api$core = api.core) === null || _api$core === void 0 ? void 0 : _api$core.actions.execute(() => {
-              return tr.setMeta('isCommitSyncBlockCreation', true);
+          if (fg('platform_synced_block_patch_1')) {
+            handleBodiedSyncBlockCreation(bodiedSyncBlockAdded, state, api);
+            return true;
+          } else {
+            // 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
+            syncBlockStore.sourceManager.registerCreationCallback(() => {
+              var _api$core;
+              api === null || api === void 0 ? void 0 : (_api$core = api.core) === null || _api$core === void 0 ? void 0 : _api$core.actions.execute(() => {
+                return tr.setMeta('isCommitSyncBlockCreation', true);
+              });
+              api === null || api === void 0 ? void 0 : api.core.actions.focus();
             });
-            api === null || api === void 0 ? void 0 : api.core.actions.focus();
-          });
-          return false;
+            return false;
+          }
         }
       } else {
         const {

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

@@ -0,0 +1,134 @@
+import { TextSelection } from '@atlaskit/editor-prosemirror/state';
+import { FLAG_ID } from '../../types';
+import { syncedBlockPluginKey } from '../main';
+const onRetry = (api, resourceId) => {
+  return () => {
+    var _api$core, _api$core2;
+    api === null || api === void 0 ? void 0 : (_api$core = api.core) === null || _api$core === void 0 ? void 0 : _api$core.actions.focus();
+    api === null || api === void 0 ? void 0 : (_api$core2 = api.core) === null || _api$core2 === void 0 ? void 0 : _api$core2.actions.execute(({
+      tr
+    }) => {
+      var _api$syncedBlock, _api$syncedBlock$shar, _api$syncedBlock$shar2, _api$syncedBlock2;
+      const pos = api === null || api === void 0 ? void 0 : (_api$syncedBlock = api.syncedBlock) === null || _api$syncedBlock === void 0 ? void 0 : (_api$syncedBlock$shar = _api$syncedBlock.sharedState.currentState()) === null || _api$syncedBlock$shar === void 0 ? void 0 : (_api$syncedBlock$shar2 = _api$syncedBlock$shar.retryCreationPosMap) === null || _api$syncedBlock$shar2 === void 0 ? void 0 : _api$syncedBlock$shar2.get(resourceId);
+      const from = pos === null || pos === void 0 ? void 0 : pos.from;
+      const to = pos === null || pos === void 0 ? void 0 : pos.to;
+      if (from === undefined || to === undefined) {
+        return tr;
+      }
+      tr.setSelection(TextSelection.create(tr.doc, from, to)).setMeta(syncedBlockPluginKey, {
+        activeFlag: false
+      });
+      api === null || api === void 0 ? void 0 : (_api$syncedBlock2 = api.syncedBlock) === null || _api$syncedBlock2 === void 0 ? void 0 : _api$syncedBlock2.commands.insertSyncedBlock()({
+        tr
+      });
+      return tr;
+    });
+  };
+};
+const getRevertCreationPos = (api, doc, resourceId) => {
+  var _api$syncedBlock3, _api$syncedBlock3$sha, _api$syncedBlock3$sha2;
+  const retryCreationPos = api === null || api === void 0 ? void 0 : (_api$syncedBlock3 = api.syncedBlock) === null || _api$syncedBlock3 === void 0 ? void 0 : (_api$syncedBlock3$sha = _api$syncedBlock3.sharedState.currentState()) === null || _api$syncedBlock3$sha === void 0 ? void 0 : (_api$syncedBlock3$sha2 = _api$syncedBlock3$sha.retryCreationPosMap) === null || _api$syncedBlock3$sha2 === void 0 ? void 0 : _api$syncedBlock3$sha2.get(resourceId);
+  if (retryCreationPos) {
+    return retryCreationPos;
+  }
+
+  // Fallback to find the positions in case BE call returns before plugin state becomes available
+  // which is highly unlikely
+  let currentPos;
+  doc.descendants((node, pos) => {
+    if (currentPos) {
+      return false;
+    }
+    if (node.type.name === 'bodiedSyncBlock' && resourceId === node.attrs.resourceId) {
+      currentPos = {
+        from: pos,
+        to: pos + node.nodeSize
+      };
+      return false;
+    }
+  });
+  return currentPos;
+};
+const buildRevertCreationTr = (tr, pos) => {
+  var _tr$doc$nodeAt;
+  const content = (_tr$doc$nodeAt = tr.doc.nodeAt(pos.from)) === null || _tr$doc$nodeAt === void 0 ? void 0 : _tr$doc$nodeAt.content;
+  if (content) {
+    tr.replaceWith(pos.from, pos.to, content);
+    const contentFrom = tr.mapping.map(pos.from);
+    tr.setSelection(TextSelection.create(tr.doc, contentFrom, contentFrom + content.size));
+  } else {
+    tr.delete(pos.from, pos.to);
+  }
+  return tr;
+};
+
+/**
+ *
+ * Save the new bodiedSyncBlock to backend with empty content and handles revert (if failed) and retry flow
+ */
+export const handleBodiedSyncBlockCreation = (bodiedSyncBlockAdded, editorState, api) => {
+  const syncBlockStore = syncedBlockPluginKey.getState(editorState).syncBlockStore;
+  bodiedSyncBlockAdded.forEach(node => {
+    if (node.from === undefined || node.to === undefined) {
+      return;
+    }
+    const retryCreationPos = {
+      from: node.from,
+      to: node.to
+    };
+    const resourceId = node.attrs.resourceId;
+    setTimeout(() => {
+      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
+      }) => {
+        return tr.setMeta(syncedBlockPluginKey, {
+          retryCreationPos: {
+            resourceId,
+            pos: retryCreationPos
+          }
+        });
+      });
+    });
+    syncBlockStore.sourceManager.createBodiedSyncBlockNode(node.attrs, success => {
+      if (success) {
+        var _api$core4, _api$core5;
+        api === null || api === void 0 ? void 0 : (_api$core4 = api.core) === null || _api$core4 === void 0 ? void 0 : _api$core4.actions.execute(({
+          tr
+        }) => {
+          return tr.setMeta(syncedBlockPluginKey, {
+            retryCreationPos: {
+              resourceId,
+              pos: undefined
+            }
+          });
+        });
+        api === null || api === void 0 ? void 0 : (_api$core5 = api.core) === null || _api$core5 === void 0 ? void 0 : _api$core5.actions.focus();
+      } else {
+        var _api$core6;
+        api === null || api === void 0 ? void 0 : (_api$core6 = api.core) === null || _api$core6 === void 0 ? void 0 : _api$core6.actions.execute(({
+          tr
+        }) => {
+          const revertCreationPos = getRevertCreationPos(api, tr.doc, resourceId);
+          if (!revertCreationPos) {
+            return tr;
+          }
+          const revertTr = buildRevertCreationTr(tr, revertCreationPos);
+          return revertTr.setMeta('isConfirmedSyncBlockDeletion', true).setMeta('addToHistory', false).setMeta(syncedBlockPluginKey, {
+            activeFlag: {
+              id: FLAG_ID.CANNOT_CREATE_SYNC_BLOCK,
+              onRetry: onRetry(api, resourceId),
+              onDismissed: tr => tr.setMeta(syncedBlockPluginKey, {
+                ...tr.getMeta(syncedBlockPluginKey),
+                retryCreationPos: {
+                  resourceId,
+                  pos: undefined
+                }
+              })
+            }
+          });
+        });
+      }
+    }, node.node);
+  });
+};

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

@@ -1,6 +1,5 @@
 import { ReplaceAroundStep, ReplaceStep } from '@atlaskit/editor-prosemirror/transform';
 import { findParentNodeOfTypeClosestToPos } from '@atlaskit/editor-prosemirror/utils';
-import { fg } from '@atlaskit/platform-feature-flags';
 export const trackSyncBlocks = (predicate, tr, state) => {
   const removed = {};
   const added = {};
@@ -20,7 +19,7 @@ export const trackSyncBlocks = (predicate, tr, state) => {
       from,
       to
     } = step;
-    const docAtStep = fg('platform_synced_block_dogfooding') ? tr.docs[idx] : state.doc;
+    const docAtStep = tr.docs[idx];
     let hasChange = false;
     if (from !== to) {
       step.getMap().forEach((oldStart, oldEnd) => {
@@ -67,6 +66,7 @@ export const trackSyncBlocks = (predicate, tr, state) => {
         const syncBlockAttr = node.attrs;
         syncBlockMapNew[syncBlockAttr.localId] = {
           attrs: syncBlockAttr,
+          node: node,
           from: offset,
           to: offset + node.nodeSize
         };

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

@@ -1,9 +1,6 @@
 import { expandSelectionToBlockRange } from '@atlaskit/editor-common/selection';
 import { Fragment } from '@atlaskit/editor-prosemirror/model';
-import { TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { findParentNodeOfType, findSelectedNodeOfType } from '@atlaskit/editor-prosemirror/utils';
-import { CellSelection, findTable } from '@atlaskit/editor-tables';
-import { fg } from '@atlaskit/platform-feature-flags';
 export const findSyncBlock = (schema, selection) => {
   const {
     syncBlock
@@ -28,50 +25,6 @@ const UNSUPPORTED_NODE_TYPES = new Set(['inlineExtension', 'extension', 'bodiedE
  * or false if conversion is not possible
  */
 export const canBeConvertedToSyncBlock = selection => {
-  return fg('platform_synced_block_dogfooding') ? canBeConvertedToSyncBlockNew(selection) : canBeConvertedToSyncBlockOld(selection);
-};
-export const canBeConvertedToSyncBlockOld = selection => {
-  const schema = selection.$from.doc.type.schema;
-  const {
-    nodes
-  } = schema;
-  let from = selection.from;
-  let to = selection.to;
-  let contentToInclude = selection.content().content;
-  if (selection instanceof CellSelection) {
-    const table = findTable(selection);
-    if (!table) {
-      return false;
-    }
-    contentToInclude = Fragment.from([table.node]);
-    from = table.pos;
-    to = table.pos + table.node.nodeSize;
-  } else if (selection instanceof TextSelection) {
-    const trueParent = findParentNodeOfType([nodes.bulletList, nodes.orderedList, nodes.taskList, nodes.blockquote])(selection);
-    if (trueParent) {
-      contentToInclude = Fragment.from([trueParent.node]);
-      from = trueParent.pos;
-      to = trueParent.pos + trueParent.node.nodeSize;
-    }
-  }
-  let canBeConverted = true;
-  selection.$from.doc.nodesBetween(from, to, node => {
-    if (UNSUPPORTED_NODE_TYPES.has(node.type.name)) {
-      canBeConverted = false;
-      return false;
-    }
-  });
-  if (!canBeConverted) {
-    return false;
-  }
-  contentToInclude = removeBreakoutMarks(contentToInclude);
-  return {
-    contentToInclude,
-    from,
-    to
-  };
-};
-export const canBeConvertedToSyncBlockNew = selection => {
   const {
     $from,
     range

package/dist/es2019/syncedBlockPlugin.js

@@ -4,7 +4,6 @@ import { blockTypeMessages } from '@atlaskit/editor-common/messages';
 import { IconSyncBlock } from '@atlaskit/editor-common/quick-insert';
 import { SyncBlockStoreManager } from '@atlaskit/editor-synced-block-provider';
 import Lozenge from '@atlaskit/lozenge';
-import { fg } from '@atlaskit/platform-feature-flags';
 import { flushBodiedSyncBlocks, flushSyncBlocks } from './editor-actions';
 import { copySyncedBlockReferenceToClipboardEditorCommand, createSyncedBlock } from './editor-commands';
 import { createPlugin, syncedBlockPluginKey } from './pm-plugins/main';
@@ -41,7 +40,7 @@ export const syncedBlockPlugin = ({
       return [{
         name: 'syncedBlockPlugin',
         plugin: params => createPlugin(config, params, syncBlockStore, api)
-      }, ...(fg('platform_synced_block_dogfooding') ? [{
+      }, {
         name: 'menuAndToolbarExperiencesPlugin',
         plugin: () => getMenuAndToolbarExperiencesPlugin({
           refs,
@@ -50,7 +49,7 @@ export const syncedBlockPlugin = ({
             return 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(payload);
           }
         })
-      }] : [])];
+      }];
     },
     commands: {
       copySyncedBlockReferenceToClipboard: inputMethod => copySyncedBlockReferenceToClipboardEditorCommand(syncBlockStore, inputMethod, api),
@@ -106,7 +105,7 @@ export const syncedBlockPlugin = ({
               fireAnalyticsEvent: api === null || api === void 0 ? void 0 : (_api$analytics4 = api.analytics) === null || _api$analytics4 === void 0 ? void 0 : _api$analytics4.actions.fireAnalyticsEvent
             });
           },
-          testId: fg('platform_synced_block_dogfooding') ? SYNCED_BLOCK_BUTTON_TEST_ID.quickInsertCreate : undefined
+          testId: SYNCED_BLOCK_BUTTON_TEST_ID.quickInsertCreate
         }];
       },
       floatingToolbar: (state, intl) => getToolbarConfig(state, intl, api, syncBlockStore)
@@ -136,12 +135,14 @@ export const syncedBlockPlugin = ({
       const {
         activeFlag,
         syncBlockStore: currentSyncBlockStore,
-        bodiedSyncBlockDeletionStatus
+        bodiedSyncBlockDeletionStatus,
+        retryCreationPosMap
       } = syncedBlockPluginKey.getState(editorState);
       return {
         activeFlag,
         syncBlockStore: currentSyncBlockStore,
-        bodiedSyncBlockDeletionStatus
+        bodiedSyncBlockDeletionStatus,
+        retryCreationPosMap
       };
     }
   };

package/dist/es2019/types/index.js

@@ -5,6 +5,7 @@ export let FLAG_ID = /*#__PURE__*/function (FLAG_ID) {
   FLAG_ID["FAIL_TO_DELETE"] = "fail-to-delete";
   FLAG_ID["SYNC_BLOCK_COPIED"] = "sync-block-copied";
   FLAG_ID["UNPUBLISHED_SYNC_BLOCK_PASTED"] = "unpublished-sync-block-pasted";
+  FLAG_ID["CANNOT_CREATE_SYNC_BLOCK"] = "cannot-create-sync-block";
   return FLAG_ID;
 }({});
 export const SYNCED_BLOCK_BUTTON_TEST_ID = {