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

package/AGENTS.md

@@ -2,7 +2,7 @@
 
 > **For workflow guidance, debugging, and cross-package task guides, load the `synced-blocks`
 > skill:**
-> `get_skill(skill_name_or_path="platform/packages/editor/.rovodev/skills/synced-blocks/SKILL.md")`
+> `get_skill(skill_name_or_path="platform/packages/editor/.agents/skills/synced-blocks/SKILL.md")`
 
 ---
 
@@ -31,7 +31,8 @@ src/
 │                                 discardUnpublishedSyncBlocks (EDITOR-6473)
 ├── editor-commands/
 │   └── index.ts                # createSyncedBlock, copySyncedBlockReferenceToClipboardEditorCommand,
-│                                 removeSyncedBlockAtPos, unsyncSyncBlock
+│                                 copySyncedBlockReferenceToClipboard, editSyncedBlockSource,
+│                                 removeSyncedBlock, removeSyncedBlockAtPos, unsync
 ├── nodeviews/
 │   ├── syncedBlock.tsx         # NodeView for reference (syncBlock) — read-only, fetches from BE
 │   ├── lazySyncedBlock.tsx     # Lazy-loaded wrapper for syncedBlock (EDITOR-6928)
@@ -50,13 +51,18 @@ src/
 │       ├── rebase-transaction.ts                   # Rebase helpers used by main.ts
 │       ├── ignore-dom-event.ts                     # DOM event guard
 │       └── utils.ts                                # Misc shared helpers
-├── ui/
+├── ui/                          # (grep the dir for the full current list — it grows often)
 │   ├── toolbar-components.tsx    # Primary toolbar button ("Create Synced Block")
+│   ├── CreateSyncedBlockButton.tsx / CreateSyncedBlockDropdownItem.tsx # Toolbar/menu entry points
 │   ├── floating-toolbar.tsx      # Node-level actions: delete, unsync, copy link, view locations
 │   ├── block-menu-components.tsx # Block menu entry
 │   ├── quick-insert.tsx          # Slash command / quick insert config
+│   ├── SyncedLocationDropdown.tsx # "View synced locations" dropdown
 │   ├── DeleteConfirmationModal.tsx # Deletion confirmation dialog
 │   ├── SyncBlockRefresher.tsx    # Periodic data refresh from backend
+│   ├── SyncBlockLabel.tsx        # Source/reference label chrome
+│   ├── BodiedSyncBlockWrapper.tsx / SyncBlockRendererWrapper.tsx # Node-view wrappers
+│   ├── SyncBlockSSRReactContextsProvider.tsx # Supplies React contexts during SSR
 │   └── Flag.tsx                  # Error/info flags (offline, copy notifications)
 └── types/
     └── index.ts                # FLAG_ID, SyncedBlockSharedState, BodiedSyncBlockDeletionStatus
@@ -89,14 +95,18 @@ Behind the `editor_synced_block_perf` experiment, `main.ts`:
 
 1. User triggers via toolbar/block menu/slash command → `ui/toolbar-components.tsx` or
    `ui/block-menu-components.tsx`
-2. Calls `editor-commands/createSyncedBlock` → inserts `bodiedSyncBlock` node into document
-3. `pm-plugins/main.ts` detects new node → `handle-bodied-sync-block-creation.ts` → calls
-   `SyncBlockStoreManager.create()` → Block Service API
-4. `menu-and-toolbar-experiences.ts` fires experience event
+2. Calls `editor-commands/createSyncedBlock` → inserts `bodiedSyncBlock` node into document (marked
+   as **pending creation** — it is not persisted yet)
+3. `pm-plugins/main.ts` detects new node → `handle-bodied-sync-block-creation.ts` updates
+   `sourceManager` state. Persistence happens later when the product layer calls `flush()`
+   (via `flushBodiedSyncBlocks`), which creates the block in the Block Service and then reconciles
+   identifiers via `commitPendingCreation()`
+4. `menu-and-toolbar-experiences.ts` fires the experience event
 
 **Reference rendering** (flow through the code):
 
-1. `nodeviews/syncedBlock.tsx` mounts for each `syncBlock` node
-2. Calls `ReferenceSyncBlockStoreManager.fetch(resourceId)` → Block Service API
+1. `nodeviews/syncedBlock.tsx` (or `lazySyncedBlock.tsx`) mounts for each `syncBlock` node
+2. Calls `referenceManager.fetchSyncBlocksData(nodes)` → batched/deduped Block Service fetch
 3. Renders content via nested renderer from `editor-synced-block-renderer`
-4. Subscribes to AGG WebSocket for real-time updates
+4. Subscribes via `referenceManager.subscribeToSyncBlock(...)` — AGG WebSocket (Confluence) or Relay
+   (Jira) — for real-time updates

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @atlaskit/editor-plugin-synced-block
 
+## 10.5.0
+
+### Minor Changes
+
+- [`3d4d7717366f7`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/3d4d7717366f7) -
+  Prompt for feedback after eligible synced block deletion or undo
+
+### Patch Changes
+
+- Updated dependencies
+
+## 10.4.7
+
+### Patch Changes
+
+- [`d9e8a63a60b63`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/d9e8a63a60b63) -
+  Keep the placeholder visible in empty source synced blocks for the sync block activation treatment
+  while preserving the existing placeholder behavior in the control.
+
 ## 10.4.6
 
 ### Patch Changes

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

@@ -14,6 +14,7 @@ var _state = require("@atlaskit/editor-prosemirror/state");
 var _utils = require("@atlaskit/editor-prosemirror/utils");
 var _utils2 = require("@atlaskit/editor-synced-block-provider/utils");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _expValEqualsNoExposure = require("@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure");
 var _main = require("../pm-plugins/main");
 var _utils3 = require("../pm-plugins/utils/utils");
 var _types = require("../types");
@@ -355,7 +356,11 @@ var removeSyncedBlockAtPos = exports.removeSyncedBlockAtPos = function removeSyn
     var node = tr.doc.nodeAt(pos);
     if ((node === null || node === void 0 ? void 0 : node.type.name) === 'syncBlock') {
       var _node$nodeSize;
-      return tr.replace(pos, pos + ((_node$nodeSize = node === null || node === void 0 ? void 0 : node.nodeSize) !== null && _node$nodeSize !== void 0 ? _node$nodeSize : 0));
+      var removeTr = tr.replace(pos, pos + ((_node$nodeSize = node === null || node === void 0 ? void 0 : node.nodeSize) !== null && _node$nodeSize !== void 0 ? _node$nodeSize : 0));
+      if ((0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_sync_block_activation', 'isEnabled', true)) {
+        removeTr.setMeta(_main.deleteMechanismMetaKey, 'deleteButton');
+      }
+      return removeTr;
     }
     return tr;
   });

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

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.syncedBlockPluginKey = exports.getDeleteMechanism = exports.deleteMechanismMetaKey = exports.creationMetaKey = exports.createPlugin = void 0;
+exports.syncedBlockPluginKey = exports.getPromptedFeedbackEntryPoint = exports.getDeleteMechanism = exports.deleteMechanismMetaKey = exports.creationMetaKey = exports.createPlugin = void 0;
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
@@ -24,6 +24,7 @@ var _editorSyncedBlockProvider = require("@atlaskit/editor-synced-block-provider
 var _utils2 = require("@atlaskit/editor-synced-block-provider/utils");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
+var _expValEqualsNoExposure = require("@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _bodiedSyncedBlock = require("../nodeviews/bodiedSyncedBlock");
 var _syncedBlock = require("../nodeviews/syncedBlock");
@@ -53,6 +54,7 @@ var syncedBlockPluginKey = exports.syncedBlockPluginKey = new _state.PluginKey('
  * `platform_editor_blocks_patch_4`.
  */
 var deleteMechanismMetaKey = exports.deleteMechanismMetaKey = new _state.PluginKey('syncedBlockDeleteMechanism');
+var syncedBlockPromptedFeedbackMetaKey = new _state.PluginKey('syncedBlockPromptedFeedback');
 
 /**
  * Creation-type signals set by {@link createSyncedBlock} on the creating
@@ -149,7 +151,7 @@ var getDeleteReason = function getDeleteReason(tr) {
 
 /** Narrows the history plugin meta, matching the editor-plugin-card pattern. */
 var isHistoryMeta = function isHistoryMeta(meta) {
-  return (0, _typeof2.default)(meta) === 'object' && meta !== null && 'redo' in meta;
+  return (0, _typeof2.default)(meta) === 'object' && meta !== null && 'redo' in meta && typeof meta.redo === 'boolean';
 };
 
 /**
@@ -174,9 +176,16 @@ var isHistoryMeta = function isHistoryMeta(meta) {
  * selected when the edit was made.
  */
 var getDeleteMechanism = exports.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 = (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_sync_block_activation', 'isEnabled', true);
   var historyMeta = tr.getMeta(_utils.pmHistoryPluginKey);
   if (historyMeta) {
+    if (isSyncBlockActivationEnabled && !isHistoryMeta(historyMeta)) {
+      return 'other';
+    }
     return isHistoryMeta(historyMeta) && historyMeta.redo ? 'redo' : 'undo';
   }
 
@@ -185,16 +194,28 @@ var getDeleteMechanism = exports.getDeleteMechanism = function getDeleteMechanis
   if (tr.getMeta(deleteMechanismMetaKey) === 'deleteButton') {
     return 'deleteButton';
   }
+  var hasStructuralStep = isSyncBlockActivationEnabled && tr.steps.some(function (step) {
+    return step instanceof _transform.ReplaceAroundStep;
+  });
   var hasReplaceStep = tr.steps.some(function (step) {
     return step instanceof _transform.ReplaceStep;
   });
-  if (!hasReplaceStep) {
+  if (hasStructuralStep || !hasReplaceStep) {
     return 'other';
   }
   var selection = state.selection;
-  var isNodeSelected = selection instanceof _state.NodeSelection && ((_selection$node = selection.node) === null || _selection$node === void 0 ? void 0 : _selection$node.type.name) === 'bodiedSyncBlock';
+  var isNodeSelected = selection instanceof _state.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';
 };
+var getPromptedFeedbackEntryPoint = exports.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).
@@ -239,6 +260,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;
@@ -266,6 +288,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 && !(0, _collab.isDirtyTransaction)(tr) && !isCutRemoval && !isPasteOrDrop;
+  var promptedFeedbackEntryPoint = canPromptForRemoval ? getPromptedFeedbackEntryPoint(getDeleteMechanism(tr, state)) : undefined;
+  var entryPoint = promptedFeedbackEntryPoint && (0, _expValEqualsNoExposure.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({
@@ -293,7 +328,28 @@ var filterTransactionOnline = function filterTransactionOnline(_ref3) {
     }
     // Only derive the mechanism behind the gate — discarded gate-off.
     var mechanism = (0, _platformFeatureFlags.fg)('platform_editor_blocks_patch_4') ? getDeleteMechanism(tr, state) : undefined;
-    return (0, _handleBodiedSyncBlockRemoval.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 (0, _handleBodiedSyncBlockRemoval.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 (0, _handleBodiedSyncBlockRemoval.handleBodiedSyncBlockRemoval)(bodiedSyncBlockRemoved, syncBlockStore, api, confirmationTransactionRef, getDeleteReason(tr), mechanism, undefined);
   }
   if (bodiedSyncBlockAdded.length > 0) {
     if (tr.getMeta(_utils.pmHistoryPluginKey)) {
@@ -415,15 +471,18 @@ var buildStatusDecorations = function buildStatusDecorations(doc, syncBlockStore
  * is explicitly scoped to a single plugin instance.
  */
 var SyncedBlockPluginContext = /*#__PURE__*/function () {
-  function SyncedBlockPluginContext() {
+  function SyncedBlockPluginContext(onGiveFeedback) {
     (0, _classCallCheck2.default)(this, SyncedBlockPluginContext);
     (0, _defineProperty2.default)(this, "confirmationTransactionRef", {
       current: undefined
     });
+    (0, _defineProperty2.default)(this, "_cutRemovalPending", false);
+    (0, _defineProperty2.default)(this, "cutRemovalGeneration", 0);
     (0, _defineProperty2.default)(this, "_isCopyEvent", false);
     (0, _defineProperty2.default)(this, "_isCutEvent", false);
     (0, _defineProperty2.default)(this, "unpublishedFlagShown", new Set());
     (0, _defineProperty2.default)(this, "extensionFlagShown", new Set());
+    this.onGiveFeedback = onGiveFeedback;
   }
   return (0, _createClass2.default)(SyncedBlockPluginContext, [{
     key: "isCopyEvent",
@@ -454,19 +513,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;
+      (0, _utils3.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.
+        }
+      });
+    }
   }]);
 }();
 var createPlugin = exports.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 = (0, _expValEquals.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;
@@ -476,8 +630,8 @@ var createPlugin = exports.createPlugin = function createPlugin(options, pmPlugi
   // Classic pages with sync blocks.
   syncBlockStore.sourceManager.registerFlushCompletionCallback(function () {
     (0, _utils3.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;
       });
     });
@@ -505,8 +659,8 @@ var createPlugin = exports.createPlugin = function createPlugin(options, pmPlugi
       // case the Confluence default is used.
       var sourceProduct = (0, _utils2.getSourceProductFromResourceIdSafe)(resourceId);
       (0, _utils3.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: _types.FLAG_ID.UNPUBLISHED_SYNC_BLOCK_PASTED,
@@ -818,7 +972,7 @@ var createPlugin = exports.createPlugin = function createPlugin(options, pmPlugi
           return false;
         },
         cut: function cut() {
-          if ((0, _platformFeatureFlags.fg)('platform_synced_block_patch_13')) {
+          if ((0, _platformFeatureFlags.fg)('platform_synced_block_patch_13') || Boolean(options === null || options === void 0 ? void 0 : options.onGiveFeedback) && (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_sync_block_activation', 'isEnabled', true)) {
             ctx.consumeCutEvent();
             ctx.markCutEvent();
           }
@@ -849,27 +1003,47 @@ var createPlugin = exports.createPlugin = function createPlugin(options, pmPlugi
           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 = (0, _platformFeatureFlags.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) && (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_sync_block_activation', 'isEnabled', true);
+        if (!syncBlockStore || !isCopy && !isCut && !isPromptedFeedbackCut) {
           return slice;
         }
-        return (0, _utils.mapSlice)(slice, function (node) {
+        if (isPromptedFeedbackCut && !isCut) {
+          var _containsCutSyncBlock = false;
+          (0, _utils.mapSlice)(slice, function (node) {
+            if (syncBlockStore.referenceManager.isReferenceBlock(node) || node.type.name === 'bodiedSyncBlock' && (0, _utils3.sliceFullyContainsNode)(slice, node)) {
+              _containsCutSyncBlock = true;
+            }
+            return node;
+          });
+          if (_containsCutSyncBlock) {
+            ctx.markCutRemovalPending();
+          }
+          return slice;
+        }
+        var containsCutSyncBlock = false;
+        var transformedSlice = (0, _utils.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', (0, _utils2.getSourceProductFromResourceIdSafe)(node.attrs.resourceId));
             return node;
           }
           if (node.type.name === 'bodiedSyncBlock' && node.attrs.resourceId) {
+            if (isPromptedFeedbackCut && isCut && (0, _utils3.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 (!(0, _utils3.sliceFullyContainsNode)(slice, node)) {
@@ -893,6 +1067,10 @@ var createPlugin = exports.createPlugin = function createPlugin(options, pmPlugi
           }
           return node;
         });
+        if (containsCutSyncBlock) {
+          ctx.markCutRemovalPending();
+        }
+        return transformedSlice;
       }
     },
     filterTransaction: function filterTransaction(tr, state) {
@@ -979,6 +1157,7 @@ var createPlugin = exports.createPlugin = function createPlugin(options, pmPlugi
         syncBlockStore: syncBlockStore,
         api: api,
         confirmationTransactionRef: confirmationTransactionRef,
+        ctx: ctx,
         bodiedSyncBlockRemoved: bodiedSyncBlockRemoved,
         bodiedSyncBlockAdded: bodiedSyncBlockAdded,
         extensionFlagShown: extensionFlagShown
@@ -1002,6 +1181,17 @@ var createPlugin = exports.createPlugin = function createPlugin(options, pmPlugi
       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 && (0, _expValEqualsNoExposure.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
@@ -1086,8 +1276,8 @@ var createPlugin = exports.createPlugin = function createPlugin(options, pmPlugi
             if (!(step instanceof _transform.ReplaceStep || step instanceof _transform.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) {
@@ -1127,8 +1317,8 @@ var createPlugin = exports.createPlugin = function createPlugin(options, pmPlugi
           tr.setMeta('addToHistory', false);
           (0, _utils3.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: _types.FLAG_ID.DUPLICATE_SOURCE_SYNC_BLOCK

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

@@ -34,7 +34,7 @@ var onDismissed = function onDismissed(syncBlockStore) {
     });
   };
 };
-var handleBodiedSyncBlockRemoval = exports.handleBodiedSyncBlockRemoval = function handleBodiedSyncBlockRemoval(bodiedSyncBlockRemoved, syncBlockStore, api, confirmationTransactionRef, deletionReason, mechanism) {
+var handleBodiedSyncBlockRemoval = exports.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();
 
@@ -70,6 +70,7 @@ var handleBodiedSyncBlockRemoval = exports.handleBodiedSyncBlockRemoval = functi
           return null;
         }
         recomputedTr.setMeta('isConfirmedSyncBlockDeletion', true);
+        feedbackCallbacks === null || feedbackCallbacks === void 0 || feedbackCallbacks.onDeleteTransaction(recomputedTr);
         if (!recomputedTr.getMeta(_utils.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
@@ -85,6 +86,7 @@ var handleBodiedSyncBlockRemoval = exports.handleBodiedSyncBlockRemoval = functi
     }
     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(_utils.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
@@ -94,6 +96,7 @@ var handleBodiedSyncBlockRemoval = exports.handleBodiedSyncBlockRemoval = functi
     });
   }, 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;
@@ -121,6 +124,7 @@ var handleBodiedSyncBlockRemoval = exports.handleBodiedSyncBlockRemoval = functi
     });
   }, function () {
     confirmationTransactionRef.current = undefined;
+    feedbackCallbacks === null || feedbackCallbacks === void 0 || feedbackCallbacks.onDestroy();
   }, mechanism);
   return false;
 };

package/dist/cjs/syncedBlockPlugin.js

@@ -21,6 +21,7 @@ var _DeleteConfirmationModal = require("./ui/DeleteConfirmationModal");
 var _Flag = require("./ui/Flag");
 var _floatingToolbar = require("./ui/floating-toolbar");
 var _quickInsert = require("./ui/quick-insert");
+var _SourceSyncBlockPlaceholder = require("./ui/SourceSyncBlockPlaceholder");
 var _SyncBlockRefresher = require("./ui/SyncBlockRefresher");
 var _toolbarComponents = require("./ui/toolbar-components");
 /**
@@ -157,10 +158,10 @@ var syncedBlockPlugin = exports.syncedBlockPlugin = function syncedBlockPlugin(_
       refs.containerElement = containerElement || undefined;
       refs.popupsMountPoint = popupsMountPoint || undefined;
       refs.wrapperElement = wrapperElement || undefined;
-      return /*#__PURE__*/_react.default.createElement(LazySyncedBlockUI, {
+      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, (0, _expValEquals.expValEquals)('platform_editor_sync_block_activation', 'isEnabled', true) && /*#__PURE__*/_react.default.createElement(_SourceSyncBlockPlaceholder.SourceSyncBlockPlaceholder, null), /*#__PURE__*/_react.default.createElement(LazySyncedBlockUI, {
         syncBlockStore: syncBlockStore,
         api: api
-      });
+      }));
     },
     getSharedState: function getSharedState(editorState) {
       if (!editorState) {

package/dist/cjs/ui/SourceSyncBlockPlaceholder.js

@@ -0,0 +1,50 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SourceSyncBlockPlaceholder = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = require("react");
+var _react2 = require("@emotion/react");
+var _reactIntl = require("react-intl");
+var _messages = require("@atlaskit/editor-common/messages");
+var _syncBlock = require("@atlaskit/editor-common/sync-block");
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+
+// 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
+
+var getSourceSyncBlockPlaceholderStyles = function getSourceSyncBlockPlaceholderStyles(placeholderText) {
+  return (0, _react2.css)((0, _defineProperty2.default)({}, ".ProseMirror .".concat(_syncBlock.BodiedSyncBlockSharedCssClassName.prefix, " .").concat(_syncBlock.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'
+    }
+  }));
+};
+var SourceSyncBlockPlaceholder = exports.SourceSyncBlockPlaceholder = function SourceSyncBlockPlaceholder() {
+  var _useIntl = (0, _reactIntl.useIntl)(),
+    formatMessage = _useIntl.formatMessage;
+  var placeholderStyles = (0, _react.useMemo)(function () {
+    return getSourceSyncBlockPlaceholderStyles(JSON.stringify(formatMessage(_messages.placeholderTextMessages.sourceSyncBlockPlaceholderText)));
+  }, [formatMessage]);
+  return (0, _react2.jsx)(_react2.Global, {
+    styles: placeholderStyles
+  });
+};