@atlaskit/editor-plugin-synced-block 10.4.6 → 10.5.0

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

@@ -22,6 +22,7 @@ import { convertPMNodesToSyncBlockNodes, rebaseTransaction } from '@atlaskit/edi
 import { getSourceProductFromResourceIdSafe } from '@atlaskit/editor-synced-block-provider/utils';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
+import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { bodiedSyncBlockNodeView, bodiedSyncBlockNodeViewOld } from '../nodeviews/bodiedSyncedBlock';
 import { SyncBlock as SyncBlockView } from '../nodeviews/syncedBlock';
@@ -46,6 +47,7 @@ export var syncedBlockPluginKey = new PluginKey('syncedBlockPlugin');
  * `platform_editor_blocks_patch_4`.
  */
 export var deleteMechanismMetaKey = new PluginKey('syncedBlockDeleteMechanism');
+var syncedBlockPromptedFeedbackMetaKey = new PluginKey('syncedBlockPromptedFeedback');
 
 /**
  * Creation-type signals set by {@link createSyncedBlock} on the creating
@@ -142,7 +144,7 @@ var getDeleteReason = function getDeleteReason(tr) {
 
 /** Narrows the history plugin meta, matching the editor-plugin-card pattern. */
 var isHistoryMeta = function isHistoryMeta(meta) {
-  return _typeof(meta) === 'object' && meta !== null && 'redo' in meta;
+  return _typeof(meta) === 'object' && meta !== null && 'redo' in meta && typeof meta.redo === 'boolean';
 };
 
 /**
@@ -167,9 +169,16 @@ var isHistoryMeta = function isHistoryMeta(meta) {
  * selected when the edit was made.
  */
 export var getDeleteMechanism = function getDeleteMechanism(tr, state) {
-  var _selection$node;
+  var _selection$node, _selection$node2;
+  // Keep the legacy analytics classification unchanged while activation is off.
+  // The stricter history, structural-step, and reference-selection handling is
+  // only needed by the prompted feedback rollout.
+  var isSyncBlockActivationEnabled = expValEqualsNoExposure('platform_editor_sync_block_activation', 'isEnabled', true);
   var historyMeta = tr.getMeta(pmHistoryPluginKey);
   if (historyMeta) {
+    if (isSyncBlockActivationEnabled && !isHistoryMeta(historyMeta)) {
+      return 'other';
+    }
     return isHistoryMeta(historyMeta) && historyMeta.redo ? 'redo' : 'undo';
   }
 
@@ -178,16 +187,28 @@ export var getDeleteMechanism = function getDeleteMechanism(tr, state) {
   if (tr.getMeta(deleteMechanismMetaKey) === 'deleteButton') {
     return 'deleteButton';
   }
+  var hasStructuralStep = isSyncBlockActivationEnabled && tr.steps.some(function (step) {
+    return step instanceof ReplaceAroundStep;
+  });
   var hasReplaceStep = tr.steps.some(function (step) {
     return step instanceof ReplaceStep;
   });
-  if (!hasReplaceStep) {
+  if (hasStructuralStep || !hasReplaceStep) {
     return 'other';
   }
   var selection = state.selection;
-  var isNodeSelected = selection instanceof NodeSelection && ((_selection$node = selection.node) === null || _selection$node === void 0 ? void 0 : _selection$node.type.name) === 'bodiedSyncBlock';
+  var isNodeSelected = selection instanceof NodeSelection && (((_selection$node = selection.node) === null || _selection$node === void 0 ? void 0 : _selection$node.type.name) === 'bodiedSyncBlock' || isSyncBlockActivationEnabled && ((_selection$node2 = selection.node) === null || _selection$node2 === void 0 ? void 0 : _selection$node2.type.name) === 'syncBlock');
   return isNodeSelected ? 'selectionReplaced' : 'keyboardDelete';
 };
+export var getPromptedFeedbackEntryPoint = function getPromptedFeedbackEntryPoint(mechanism) {
+  if (mechanism === 'undo') {
+    return 'prompted-undo';
+  }
+  if (mechanism === 'deleteButton' || mechanism === 'keyboardDelete' || mechanism === 'selectionReplaced') {
+    return 'prompted-delete';
+  }
+  return undefined;
+};
 /**
  * True when a source `bodiedSyncBlock` holds user content — i.e. not just the
  * single empty paragraph it is created with (used to detect empty→content).
@@ -232,6 +253,7 @@ var filterTransactionOnline = function filterTransactionOnline(_ref3) {
     syncBlockStore = _ref3.syncBlockStore,
     api = _ref3.api,
     confirmationTransactionRef = _ref3.confirmationTransactionRef,
+    ctx = _ref3.ctx,
     bodiedSyncBlockRemoved = _ref3.bodiedSyncBlockRemoved,
     bodiedSyncBlockAdded = _ref3.bodiedSyncBlockAdded,
     extensionFlagShown = _ref3.extensionFlagShown;
@@ -259,6 +281,19 @@ var filterTransactionOnline = function filterTransactionOnline(_ref3) {
   // dedicated `cross_product_paste` event subject.
   var isPaste = Boolean((_tr$getMeta = tr.getMeta('paste')) !== null && _tr$getMeta !== void 0 ? _tr$getMeta : tr.getMeta('uiEvent') === 'paste');
   var isPasteOrDrop = isPaste || tr.getMeta('uiEvent') === 'drop';
+  var hasRemovedSyncBlock = syncBlockRemoved.length > 0 || bodiedSyncBlockRemoved.length > 0;
+  var isCutRemoval = hasRemovedSyncBlock && ctx.consumeCutRemoval();
+  var canPromptForRemoval = Boolean(ctx.onGiveFeedback) && hasRemovedSyncBlock && !isDirtyTransaction(tr) && !isCutRemoval && !isPasteOrDrop;
+  var promptedFeedbackEntryPoint = canPromptForRemoval ? getPromptedFeedbackEntryPoint(getDeleteMechanism(tr, state)) : undefined;
+  var entryPoint = promptedFeedbackEntryPoint && expValEqualsNoExposure('platform_editor_sync_block_activation', 'isEnabled', true) ? promptedFeedbackEntryPoint : undefined;
+  if (entryPoint && syncBlockRemoved.length > 0 && bodiedSyncBlockRemoved.length === 0) {
+    tr.setMeta(syncedBlockPromptedFeedbackMetaKey, {
+      context: {
+        blockType: 'reference',
+        entryPoint: entryPoint
+      }
+    });
+  }
   syncBlockAdded.forEach(function (syncBlock) {
     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({
@@ -286,7 +321,28 @@ var filterTransactionOnline = function filterTransactionOnline(_ref3) {
     }
     // Only derive the mechanism behind the gate — discarded gate-off.
     var mechanism = fg('platform_editor_blocks_patch_4') ? getDeleteMechanism(tr, state) : undefined;
-    return handleBodiedSyncBlockRemoval(bodiedSyncBlockRemoved, syncBlockStore, api, confirmationTransactionRef, getDeleteReason(tr), mechanism);
+    var feedbackContext = entryPoint && getDeleteReason(tr) !== 'source-block-unsynced' ? {
+      blockType: 'source',
+      entryPoint: entryPoint
+    } : undefined;
+    if (feedbackContext) {
+      var sourceAttempt = ctx.queueSourceFeedback(feedbackContext);
+      return handleBodiedSyncBlockRemoval(bodiedSyncBlockRemoved, syncBlockStore, api, confirmationTransactionRef, getDeleteReason(tr), mechanism, {
+        onDeleteCompleted: function onDeleteCompleted(success) {
+          return ctx.completeSourceDeletion(sourceAttempt, success);
+        },
+        onDeleteTransaction: function onDeleteTransaction(deleteTr) {
+          return deleteTr.setMeta(syncedBlockPromptedFeedbackMetaKey, {
+            context: feedbackContext,
+            sourceAttempt: sourceAttempt
+          });
+        },
+        onDestroy: function onDestroy() {
+          return ctx.clearSourceFeedback(sourceAttempt);
+        }
+      });
+    }
+    return handleBodiedSyncBlockRemoval(bodiedSyncBlockRemoved, syncBlockStore, api, confirmationTransactionRef, getDeleteReason(tr), mechanism, undefined);
   }
   if (bodiedSyncBlockAdded.length > 0) {
     if (tr.getMeta(pmHistoryPluginKey)) {
@@ -408,15 +464,18 @@ var buildStatusDecorations = function buildStatusDecorations(doc, syncBlockStore
  * is explicitly scoped to a single plugin instance.
  */
 var SyncedBlockPluginContext = /*#__PURE__*/function () {
-  function SyncedBlockPluginContext() {
+  function SyncedBlockPluginContext(onGiveFeedback) {
     _classCallCheck(this, SyncedBlockPluginContext);
     _defineProperty(this, "confirmationTransactionRef", {
       current: undefined
     });
+    _defineProperty(this, "_cutRemovalPending", false);
+    _defineProperty(this, "cutRemovalGeneration", 0);
     _defineProperty(this, "_isCopyEvent", false);
     _defineProperty(this, "_isCutEvent", false);
     _defineProperty(this, "unpublishedFlagShown", new Set());
     _defineProperty(this, "extensionFlagShown", new Set());
+    this.onGiveFeedback = onGiveFeedback;
   }
   return _createClass(SyncedBlockPluginContext, [{
     key: "isCopyEvent",
@@ -447,19 +506,114 @@ var SyncedBlockPluginContext = /*#__PURE__*/function () {
       this._isCutEvent = false;
       return was;
     }
+  }, {
+    key: "markCutRemovalPending",
+    value: function markCutRemovalPending() {
+      var _this = this;
+      this._cutRemovalPending = true;
+      var generation = ++this.cutRemovalGeneration;
+      queueMicrotask(function () {
+        if (_this.cutRemovalGeneration === generation) {
+          _this._cutRemovalPending = false;
+        }
+      });
+    }
+  }, {
+    key: "consumeCutRemoval",
+    value: function consumeCutRemoval() {
+      var wasPending = this._cutRemovalPending;
+      this._cutRemovalPending = false;
+      this.cutRemovalGeneration += 1;
+      return wasPending;
+    }
+  }, {
+    key: "queueSourceFeedback",
+    value: function queueSourceFeedback(context) {
+      var sourceAttempt = Symbol('syncedBlockSourceFeedbackAttempt');
+      this.pendingSourceFeedback = {
+        context: context,
+        deletionSucceeded: false,
+        sourceAttempt: sourceAttempt,
+        transactionApplied: false
+      };
+      return sourceAttempt;
+    }
+  }, {
+    key: "completeSourceDeletion",
+    value: function completeSourceDeletion(sourceAttempt, success) {
+      var _this$pendingSourceFe;
+      if (((_this$pendingSourceFe = this.pendingSourceFeedback) === null || _this$pendingSourceFe === void 0 ? void 0 : _this$pendingSourceFe.sourceAttempt) !== sourceAttempt) {
+        return;
+      }
+      if (!success) {
+        // Keep the attempt pending because retryDeletion reuses these callbacks.
+        // Dismissal or cancellation clears it through the destroy callback.
+        return;
+      }
+      this.pendingSourceFeedback.deletionSucceeded = true;
+      this.flushSourceFeedback(sourceAttempt);
+    }
+  }, {
+    key: "clearSourceFeedback",
+    value: function clearSourceFeedback(sourceAttempt) {
+      var _this$pendingSourceFe2;
+      if (((_this$pendingSourceFe2 = this.pendingSourceFeedback) === null || _this$pendingSourceFe2 === void 0 ? void 0 : _this$pendingSourceFe2.sourceAttempt) === sourceAttempt) {
+        this.pendingSourceFeedback = undefined;
+      }
+    }
+  }, {
+    key: "handleAppliedFeedback",
+    value: function handleAppliedFeedback(_ref6) {
+      var _this$pendingSourceFe3;
+      var context = _ref6.context,
+        sourceAttempt = _ref6.sourceAttempt;
+      if (context.blockType === 'source' && sourceAttempt && ((_this$pendingSourceFe3 = this.pendingSourceFeedback) === null || _this$pendingSourceFe3 === void 0 ? void 0 : _this$pendingSourceFe3.sourceAttempt) === sourceAttempt) {
+        this.pendingSourceFeedback.transactionApplied = true;
+        this.flushSourceFeedback(sourceAttempt);
+        return;
+      }
+      if (context.blockType === 'reference') {
+        this.invokeFeedback(context);
+      }
+    }
+  }, {
+    key: "flushSourceFeedback",
+    value: function flushSourceFeedback(sourceAttempt) {
+      var _this$pendingSourceFe4, _this$pendingSourceFe5;
+      if (((_this$pendingSourceFe4 = this.pendingSourceFeedback) === null || _this$pendingSourceFe4 === void 0 ? void 0 : _this$pendingSourceFe4.sourceAttempt) === sourceAttempt && (_this$pendingSourceFe5 = this.pendingSourceFeedback) !== null && _this$pendingSourceFe5 !== void 0 && _this$pendingSourceFe5.deletionSucceeded && this.pendingSourceFeedback.transactionApplied) {
+        var context = this.pendingSourceFeedback.context;
+        this.pendingSourceFeedback = undefined;
+        this.invokeFeedback(context);
+      }
+    }
+  }, {
+    key: "invokeFeedback",
+    value: function invokeFeedback(context) {
+      var _this2 = this;
+      deferDispatch(function () {
+        try {
+          var _this2$onGiveFeedback;
+          var feedbackResult = (_this2$onGiveFeedback = _this2.onGiveFeedback) === null || _this2$onGiveFeedback === void 0 ? void 0 : _this2$onGiveFeedback.call(_this2, context);
+          void Promise.resolve(feedbackResult).catch(function () {});
+        } catch (_unused) {
+          // Product feedback collectors are optional UI. Their failures must
+          // never affect the already-applied editor transaction.
+        }
+      });
+    }
   }]);
 }();
 export var createPlugin = function createPlugin(options, pmPluginFactoryParams, syncBlockStore, api) {
-  var _ref6 = options || {},
-    _ref6$useLongPressSel = _ref6.useLongPressSelection,
-    useLongPressSelection = _ref6$useLongPressSel === void 0 ? false : _ref6$useLongPressSel;
+  var _ref7 = options || {},
+    _ref7$useLongPressSel = _ref7.useLongPressSelection,
+    useLongPressSelection = _ref7$useLongPressSel === void 0 ? false : _ref7$useLongPressSel;
 
   // Cache the experiment value once at plugin creation time.
   // This fires the exposure event exactly once (correct per Exposure Events 101)
   // and avoids ~10 redundant Statsig SDK evaluations per keystroke in hot paths
   // (apply, filterTransaction, appendTransaction, decorations).
   var isPerfExperimentOn = expValEquals('editor_synced_block_perf', 'isEnabled', true);
-  var ctx = new SyncedBlockPluginContext();
+  var ctx = new SyncedBlockPluginContext(options === null || options === void 0 ? void 0 : options.onGiveFeedback);
   var confirmationTransactionRef = ctx.confirmationTransactionRef;
   var unpublishedFlagShown = ctx.unpublishedFlagShown;
   var extensionFlagShown = ctx.extensionFlagShown;
@@ -469,8 +623,8 @@ export var createPlugin = function createPlugin(options, pmPluginFactoryParams,
   // Classic pages with sync blocks.
   syncBlockStore.sourceManager.registerFlushCompletionCallback(function () {
     deferDispatch(function () {
-      api === null || api === void 0 || api.core.actions.execute(function (_ref7) {
-        var tr = _ref7.tr;
+      api === null || api === void 0 || api.core.actions.execute(function (_ref8) {
+        var tr = _ref8.tr;
         return tr;
       });
     });
@@ -498,8 +652,8 @@ export var createPlugin = function createPlugin(options, pmPluginFactoryParams,
       // case the Confluence default is used.
       var sourceProduct = getSourceProductFromResourceIdSafe(resourceId);
       deferDispatch(function () {
-        api === null || api === void 0 || api.core.actions.execute(function (_ref8) {
-          var tr = _ref8.tr;
+        api === null || api === void 0 || api.core.actions.execute(function (_ref9) {
+          var tr = _ref9.tr;
           return tr.setMeta(syncedBlockPluginKey, {
             activeFlag: {
               id: FLAG_ID.UNPUBLISHED_SYNC_BLOCK_PASTED,
@@ -811,7 +965,7 @@ export var createPlugin = function createPlugin(options, pmPluginFactoryParams,
           return false;
         },
         cut: function cut() {
-          if (fg('platform_synced_block_patch_13')) {
+          if (fg('platform_synced_block_patch_13') || Boolean(options === null || options === void 0 ? void 0 : options.onGiveFeedback) && expValEqualsNoExposure('platform_editor_sync_block_activation', 'isEnabled', true)) {
             ctx.consumeCutEvent();
             ctx.markCutEvent();
           }
@@ -842,27 +996,47 @@ export var createPlugin = function createPlugin(options, pmPluginFactoryParams,
           return node;
         });
       },
-      transformCopied: function transformCopied(slice, _ref9) {
-        var state = _ref9.state;
+      transformCopied: function transformCopied(slice, _ref0) {
+        var state = _ref0.state;
         var pluginState = syncedBlockPluginKey.getState(state);
         var syncBlockStore = pluginState === null || pluginState === void 0 ? void 0 : pluginState.syncBlockStore;
         var schema = state.schema;
         var isCopy = ctx.consumeCopyEvent();
         var isSyncedBlockPatch13Enabled = fg('platform_synced_block_patch_13');
-        var isCut = isSyncedBlockPatch13Enabled && ctx.consumeCutEvent();
-        if (!syncBlockStore || !isCopy && !isCut) {
+        var wasCut = ctx.consumeCutEvent();
+        var isCut = isSyncedBlockPatch13Enabled && wasCut;
+        var isPromptedFeedbackCut = Boolean(syncBlockStore && (options === null || options === void 0 ? void 0 : options.onGiveFeedback) && wasCut) && expValEqualsNoExposure('platform_editor_sync_block_activation', 'isEnabled', true);
+        if (!syncBlockStore || !isCopy && !isCut && !isPromptedFeedbackCut) {
           return slice;
         }
-        return mapSlice(slice, function (node) {
+        if (isPromptedFeedbackCut && !isCut) {
+          var _containsCutSyncBlock = false;
+          mapSlice(slice, function (node) {
+            if (syncBlockStore.referenceManager.isReferenceBlock(node) || node.type.name === 'bodiedSyncBlock' && sliceFullyContainsNode(slice, node)) {
+              _containsCutSyncBlock = true;
+            }
+            return node;
+          });
+          if (_containsCutSyncBlock) {
+            ctx.markCutRemovalPending();
+          }
+          return slice;
+        }
+        var containsCutSyncBlock = false;
+        var transformedSlice = mapSlice(slice, function (node) {
           if (syncBlockStore.referenceManager.isReferenceBlock(node)) {
             var _syncBlockStore$refer;
             if (isCut) {
+              containsCutSyncBlock = isPromptedFeedbackCut;
               return node;
             }
             showCopiedFlag(api, options === null || options === void 0 ? void 0 : options.__livePage, ((_syncBlockStore$refer = syncBlockStore.referenceManager.getFromCache(node.attrs.resourceId)) === null || _syncBlockStore$refer === void 0 || (_syncBlockStore$refer = _syncBlockStore$refer.data) === null || _syncBlockStore$refer === void 0 ? void 0 : _syncBlockStore$refer.status) === 'unpublished', getSourceProductFromResourceIdSafe(node.attrs.resourceId));
             return node;
           }
           if (node.type.name === 'bodiedSyncBlock' && node.attrs.resourceId) {
+            if (isPromptedFeedbackCut && isCut && sliceFullyContainsNode(slice, node)) {
+              containsCutSyncBlock = true;
+            }
             // if we only selected part of the bodied sync block content,
             // remove the sync block node and only keep the content
             if (!sliceFullyContainsNode(slice, node)) {
@@ -886,6 +1060,10 @@ export var createPlugin = function createPlugin(options, pmPluginFactoryParams,
           }
           return node;
         });
+        if (containsCutSyncBlock) {
+          ctx.markCutRemovalPending();
+        }
+        return transformedSlice;
       }
     },
     filterTransaction: function filterTransaction(tr, state) {
@@ -972,6 +1150,7 @@ export var createPlugin = function createPlugin(options, pmPluginFactoryParams,
         syncBlockStore: syncBlockStore,
         api: api,
         confirmationTransactionRef: confirmationTransactionRef,
+        ctx: ctx,
         bodiedSyncBlockRemoved: bodiedSyncBlockRemoved,
         bodiedSyncBlockAdded: bodiedSyncBlockAdded,
         extensionFlagShown: extensionFlagShown
@@ -995,6 +1174,17 @@ export var createPlugin = function createPlugin(options, pmPluginFactoryParams,
       if (viewMode === 'view') {
         return null;
       }
+      if (options !== null && options !== void 0 && options.onGiveFeedback) {
+        var feedbackContexts = trs.flatMap(function (tr) {
+          var feedbackContext = tr.getMeta(syncedBlockPromptedFeedbackMetaKey);
+          return feedbackContext ? [feedbackContext] : [];
+        });
+        if (feedbackContexts.length > 0 && expValEqualsNoExposure('platform_editor_sync_block_activation', 'isEnabled', true)) {
+          feedbackContexts.forEach(function (feedbackContext) {
+            ctx.handleAppliedFeedback(feedbackContext);
+          });
+        }
+      }
 
       // Update source sync block cache for user-initiated changes only.
       // Cache updates are handled here instead of in the nodeview update() so we
@@ -1079,8 +1269,8 @@ export var createPlugin = function createPlugin(options, pmPluginFactoryParams,
             if (!(step instanceof ReplaceStep || step instanceof ReplaceAroundStep) || !('slice' in step)) {
               return false;
             }
-            var _ref0 = step,
-              slice = _ref0.slice;
+            var _ref1 = step,
+              slice = _ref1.slice;
             var found = false;
             slice.content.descendants(function (node) {
               if (syncBlockStore.sourceManager.isSourceBlock(node) && node.attrs.resourceId) {
@@ -1120,8 +1310,8 @@ export var createPlugin = function createPlugin(options, pmPluginFactoryParams,
           tr.setMeta('addToHistory', false);
           deferDispatch(function () {
             var _api$core;
-            api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(function (_ref1) {
-              var tr = _ref1.tr;
+            api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(function (_ref10) {
+              var tr = _ref10.tr;
               return tr.setMeta(syncedBlockPluginKey, {
                 activeFlag: {
                   id: FLAG_ID.DUPLICATE_SOURCE_SYNC_BLOCK

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

@@ -27,7 +27,7 @@ var onDismissed = function onDismissed(syncBlockStore) {
     });
   };
 };
-export var handleBodiedSyncBlockRemoval = function handleBodiedSyncBlockRemoval(bodiedSyncBlockRemoved, syncBlockStore, api, confirmationTransactionRef, deletionReason, mechanism) {
+export var handleBodiedSyncBlockRemoval = function handleBodiedSyncBlockRemoval(bodiedSyncBlockRemoved, syncBlockStore, api, confirmationTransactionRef, deletionReason, mechanism, feedbackCallbacks) {
   // Clear potential old pending deletion to retreat the deletion as first attempt
   syncBlockStore.sourceManager.clearPendingDeletion();
 
@@ -63,6 +63,7 @@ export var handleBodiedSyncBlockRemoval = function handleBodiedSyncBlockRemoval(
           return null;
         }
         recomputedTr.setMeta('isConfirmedSyncBlockDeletion', true);
+        feedbackCallbacks === null || feedbackCallbacks === void 0 || feedbackCallbacks.onDeleteTransaction(recomputedTr);
         if (!recomputedTr.getMeta(pmHistoryPluginKey)) {
           // bodiedSyncBlock deletion is expected to be permanent (cannot undo)
           // For a normal deletion (not triggered by undo), remove it from history so that it cannot be undone
@@ -78,6 +79,7 @@ export var handleBodiedSyncBlockRemoval = function handleBodiedSyncBlockRemoval(
     }
     api === null || api === void 0 || (_api$core3 = api.core) === null || _api$core3 === void 0 || _api$core3.actions.execute(function () {
       var trToDispatch = confirmationTransaction.setMeta('isConfirmedSyncBlockDeletion', true);
+      feedbackCallbacks === null || feedbackCallbacks === void 0 || feedbackCallbacks.onDeleteTransaction(trToDispatch);
       if (!trToDispatch.getMeta(pmHistoryPluginKey)) {
         // bodiedSyncBlock deletion is expected to be permanent (cannot undo)
         // For a normal deletion (not triggered by undo), remove it from history so that it cannot be undone
@@ -87,6 +89,7 @@ export var handleBodiedSyncBlockRemoval = function handleBodiedSyncBlockRemoval(
     });
   }, function (success) {
     var _api$core4;
+    feedbackCallbacks === null || feedbackCallbacks === void 0 || feedbackCallbacks.onDeleteCompleted(success);
     api === null || api === void 0 || (_api$core4 = api.core) === null || _api$core4 === void 0 || _api$core4.actions.execute(function (_ref3) {
       var tr = _ref3.tr;
       var newState;
@@ -114,6 +117,7 @@ export var handleBodiedSyncBlockRemoval = function handleBodiedSyncBlockRemoval(
     });
   }, function () {
     confirmationTransactionRef.current = undefined;
+    feedbackCallbacks === null || feedbackCallbacks === void 0 || feedbackCallbacks.onDestroy();
   }, mechanism);
   return false;
 };

package/dist/esm/syncedBlockPlugin.js

@@ -14,6 +14,7 @@ import { DeleteConfirmationModal } from './ui/DeleteConfirmationModal';
 import { Flag } from './ui/Flag';
 import { getToolbarConfig } from './ui/floating-toolbar';
 import { getQuickInsertConfig } from './ui/quick-insert';
+import { SourceSyncBlockPlaceholder } from './ui/SourceSyncBlockPlaceholder';
 import { SyncBlockRefresher } from './ui/SyncBlockRefresher';
 import { getToolbarComponents } from './ui/toolbar-components';
 
@@ -151,10 +152,10 @@ export var syncedBlockPlugin = function syncedBlockPlugin(_ref2) {
       refs.containerElement = containerElement || undefined;
       refs.popupsMountPoint = popupsMountPoint || undefined;
       refs.wrapperElement = wrapperElement || undefined;
-      return /*#__PURE__*/React.createElement(LazySyncedBlockUI, {
+      return /*#__PURE__*/React.createElement(React.Fragment, null, expValEquals('platform_editor_sync_block_activation', 'isEnabled', true) && /*#__PURE__*/React.createElement(SourceSyncBlockPlaceholder, null), /*#__PURE__*/React.createElement(LazySyncedBlockUI, {
         syncBlockStore: syncBlockStore,
         api: api
-      });
+      }));
     },
     getSharedState: function getSharedState(editorState) {
       if (!editorState) {

package/dist/esm/ui/SourceSyncBlockPlaceholder.js

@@ -0,0 +1,42 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { useMemo } from 'react';
+
+// Plugin content components need a global selector because the ProseMirror content is not a child
+// of this component. This follows the existing layout placeholder pattern.
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-global-styles, @atlaskit/ui-styling-standard/use-compiled, @typescript-eslint/consistent-type-imports
+import { css, Global, jsx } from '@emotion/react';
+import { useIntl } from 'react-intl';
+import { placeholderTextMessages } from '@atlaskit/editor-common/messages';
+import { BodiedSyncBlockSharedCssClassName } from '@atlaskit/editor-common/sync-block';
+var getSourceSyncBlockPlaceholderStyles = function getSourceSyncBlockPlaceholderStyles(placeholderText) {
+  return css(_defineProperty({}, ".ProseMirror .".concat(BodiedSyncBlockSharedCssClassName.prefix, " .").concat(BodiedSyncBlockSharedCssClassName.content, "[contenteditable=\"true\"] > p:only-child:has(.ProseMirror-trailingBreak:only-child)"), {
+    position: 'relative',
+    '&::before': {
+      // JSON.stringify produces a quoted and escaped CSS string.
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
+      content: placeholderText,
+      position: 'absolute',
+      boxSizing: 'border-box',
+      color: "var(--ds-text-subtlest, #6B6E76)",
+      font: 'inherit',
+      insetInlineStart: 0,
+      width: '100%',
+      pointerEvents: 'none',
+      userSelect: 'none'
+    }
+  }));
+};
+export var SourceSyncBlockPlaceholder = function SourceSyncBlockPlaceholder() {
+  var _useIntl = useIntl(),
+    formatMessage = _useIntl.formatMessage;
+  var placeholderStyles = useMemo(function () {
+    return getSourceSyncBlockPlaceholderStyles(JSON.stringify(formatMessage(placeholderTextMessages.sourceSyncBlockPlaceholderText)));
+  }, [formatMessage]);
+  return jsx(Global, {
+    styles: placeholderStyles
+  });
+};

package/dist/esm/ui/floating-toolbar.js

@@ -30,6 +30,7 @@ export var getToolbarConfig = function getToolbarConfig(state, intl, api, syncBl
   if (syncBlockStore.sourceManager.isPendingCreation(syncBlockObject.node.attrs.resourceId)) {
     return;
   }
+  var isSyncBlockActivationEnabled = expValEquals('platform_editor_sync_block_activation', 'isEnabled', true);
   var syncBlockInstance = syncBlockStore.referenceManager.getFromCache(syncBlockObject.node.attrs.resourceId);
   var isUnsyncedBlock = (syncBlockInstance === null || syncBlockInstance === void 0 || (_syncBlockInstance$er = syncBlockInstance.error) === null || _syncBlockInstance$er === void 0 ? void 0 : _syncBlockInstance$er.type) === SyncBlockError.NotFound;
   var isErroredBlock = syncBlockInstance === null || syncBlockInstance === void 0 ? void 0 : syncBlockInstance.error;
@@ -50,7 +51,6 @@ export var getToolbarConfig = function getToolbarConfig(state, intl, api, syncBl
     };
   };
   var items = [];
-  var isSyncBlockActivationEnabled = expValEquals('platform_editor_sync_block_activation', 'isEnabled', true);
   if (isUnsyncedBlock) {
     var deleteButton = _objectSpread({
       type: 'button',
@@ -188,7 +188,8 @@ export var getToolbarConfig = function getToolbarConfig(state, intl, api, syncBl
               return tr.setSelection(new GapCursorSelection(tr.doc.resolve(syncBlockObject.pos + syncBlockObject.node.nodeSize), Side.RIGHT));
             });
             onGiveFeedback({
-              blockType: isBodiedSyncBlock ? 'source' : 'reference'
+              blockType: isBodiedSyncBlock ? 'source' : 'reference',
+              entryPoint: 'overflow-menu'
             });
             return true;
           }

package/dist/types/pm-plugins/main.d.ts

@@ -6,7 +6,7 @@ import { PluginKey } from '@atlaskit/editor-prosemirror/state';
 import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import type { SyncBlockStoreManager } from '@atlaskit/editor-synced-block-provider';
 import type { DeletionMechanism } from '@atlaskit/editor-synced-block-provider/common/types';
-import type { SyncedBlockPlugin, SyncedBlockPluginOptions } from '../syncedBlockPluginType';
+import type { SyncedBlockFeedbackContext, SyncedBlockPlugin, SyncedBlockPluginOptions } from '../syncedBlockPluginType';
 import type { ActiveFlag, BodiedSyncBlockDeletionStatus, RetryCreationPosMap } from '../types';
 export declare const syncedBlockPluginKey: PluginKey;
 /**
@@ -89,5 +89,6 @@ type SyncedBlockPluginState = {
  * selected when the edit was made.
  */
 export declare const getDeleteMechanism: (tr: Transaction, state: EditorState) => DeletionMechanism;
+export declare const getPromptedFeedbackEntryPoint: (mechanism: DeletionMechanism) => SyncedBlockFeedbackContext['entryPoint'] | undefined;
 export declare const createPlugin: (options: SyncedBlockPluginOptions | undefined, pmPluginFactoryParams: PMPluginFactoryParams, syncBlockStore: SyncBlockStoreManager, api?: ExtractInjectionAPI<SyncedBlockPlugin>) => SafePlugin<SyncedBlockPluginState>;
 export {};

package/dist/types/pm-plugins/utils/handle-bodied-sync-block-removal.d.ts

@@ -7,4 +7,10 @@ import type { SyncBlockInfo } from '../../types';
 export type TransactionRef = {
     current: Transaction | undefined;
 };
-export declare const handleBodiedSyncBlockRemoval: (bodiedSyncBlockRemoved: SyncBlockInfo[], syncBlockStore: SyncBlockStoreManager, api: ExtractInjectionAPI<SyncedBlockPlugin> | undefined, confirmationTransactionRef: TransactionRef, deletionReason: DeletionReason, mechanism?: DeletionMechanism) => boolean;
+type SourceFeedbackCallbacks = {
+    onDeleteCompleted: (success: boolean) => void;
+    onDeleteTransaction: (tr: Transaction) => void;
+    onDestroy: () => void;
+};
+export declare const handleBodiedSyncBlockRemoval: (bodiedSyncBlockRemoved: SyncBlockInfo[], syncBlockStore: SyncBlockStoreManager, api: ExtractInjectionAPI<SyncedBlockPlugin> | undefined, confirmationTransactionRef: TransactionRef, deletionReason: DeletionReason, mechanism?: DeletionMechanism, feedbackCallbacks?: SourceFeedbackCallbacks) => boolean;
+export {};

package/dist/types/syncedBlockPluginType.d.ts

@@ -45,7 +45,7 @@ export type SyncedBlockRendererProps = {
 };
 export type SyncedBlockFeedbackContext = {
     blockType: 'source' | 'reference';
-    entryPoint?: string;
+    entryPoint: 'overflow-menu' | 'prompted-delete' | 'prompted-undo';
 };
 export interface SyncedBlockPluginOptions extends LongPressSelectionPluginOptions {
     /**
@@ -62,7 +62,7 @@ export interface SyncedBlockPluginOptions extends LongPressSelectionPluginOption
      * The editor plugin owns the menu affordance; the product owns the collector
      * configuration and lifecycle.
      */
-    onGiveFeedback?: (context: SyncedBlockFeedbackContext) => void;
+    onGiveFeedback?: (context: SyncedBlockFeedbackContext) => Promise<void> | void;
     syncBlockDataProvider: SyncBlockDataProviderInterface;
     syncedBlockRenderer: (props: SyncedBlockRendererProps) => React.JSX.Element;
 }

package/dist/types/ui/SourceSyncBlockPlaceholder.d.ts

@@ -0,0 +1 @@
+export declare const SourceSyncBlockPlaceholder: () => JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-synced-block",
-	"version": "10.4.6",
+	"version": "10.5.0",
 	"description": "SyncedBlock plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -46,18 +46,19 @@
 		"@atlaskit/platform-feature-flags": "^2.1.0",
 		"@atlaskit/primitives": "^22.2.0",
 		"@atlaskit/spinner": "20.1.1",
-		"@atlaskit/tmp-editor-statsig": "^135.0.0",
+		"@atlaskit/tmp-editor-statsig": "^135.3.0",
 		"@atlaskit/tokens": "16.3.0",
 		"@atlaskit/tooltip": "^23.2.0",
 		"@atlaskit/visually-hidden": "^4.2.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^1.0.0",
+		"@emotion/react": "^11.7.1",
 		"bind-event-listener": "^3.0.0",
 		"date-fns": "^2.17.0",
 		"memoize-one": "^6.0.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^116.41.0",
+		"@atlaskit/editor-common": "^116.44.0",
 		"react": "^18.2.0",
 		"react-intl": "^5.25.1 || ^6.0.0 || ^7.0.0"
 	},