@atlaskit/editor-plugin-synced-block 10.7.2 → 10.8.0

package/CHANGELOG.md

@@ -1,5 +1,43 @@
 # @atlaskit/editor-plugin-synced-block
 
+## 10.8.0
+
+### Minor Changes
+
+- [`ff72ee885c82b`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/ff72ee885c82b) -
+  [ux] Prompt users with a feedback flag after undoing or deleting a synced block, and open the
+  product feedback collector only when they choose Give feedback. Keep the prompt UI and scoped
+  action alignment in the synced block plugin while preserving Flag's built-in action buttons.
+
+  Products check and persist the prompt allowance around the shared flag lifecycle:
+
+  ```ts
+  {
+  	shouldShowFeedbackPrompt: () => !feedbackStorage.has('prompt-shown'),
+  	onFeedbackPromptShown: () => feedbackStorage.set('prompt-shown', true),
+  	onGiveFeedback: (context) => openFeedbackCollector(context),
+  }
+  ```
+
+### Patch Changes
+
+- [`17014b0e91a7f`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/17014b0e91a7f) -
+  Update the synced locations activation empty state
+- [`b4e3664f1eb3c`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/b4e3664f1eb3c) -
+  Keep the source sync block placeholder within narrow containers
+- [`04f47b1369740`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/04f47b1369740) -
+  Clarify source synced block labels and show more of referenced titles
+- Updated dependencies
+
+## 10.7.3
+
+### Patch Changes
+
+- [`472c37e82078b`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/472c37e82078b) -
+  [ux] Fixed the source synced block placeholder disappearing after placing the cursor inside an
+  empty block and then clicking away from the editor.
+- Updated dependencies
+
 ## 10.7.2
 
 ### Patch Changes

package/dist/cjs/nodeviews/bodiedSyncedBlock.js

@@ -9,6 +9,7 @@ var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/cl
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+var _get2 = _interopRequireDefault(require("@babel/runtime/helpers/get"));
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 var _react = _interopRequireDefault(require("react"));
 var _analytics = require("@atlaskit/editor-common/analytics");
@@ -21,8 +22,10 @@ var _model = require("@atlaskit/editor-prosemirror/model");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _BodiedSyncBlockWrapper = require("../ui/BodiedSyncBlockWrapper");
 var _SyncBlockLabel = require("../ui/SyncBlockLabel");
+var _isEmptySourceSyncBlock = require("./isEmptySourceSyncBlock");
 function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+function _superPropGet(t, o, e, r) { var p = (0, _get2.default)((0, _getPrototypeOf2.default)(1 & r ? t.prototype : t), o, e); return 2 & r && "function" == typeof p ? function (t) { return p.apply(e, t); } : p; }
 var toDOMOld = function toDOMOld() {
   return ['div', {
     class: _syncBlock.BodiedSyncBlockSharedCssClassName.content,
@@ -91,8 +94,26 @@ var BodiedSyncBlockOld = /*#__PURE__*/function (_ReactNodeView) {
       // eslint-disable-next-line @atlaskit/platform/no-direct-document-usage -- NodeView DOM must be created against active runtime document
       var domRef = document.createElement('div');
       domRef.classList.add(_syncBlock.BodiedSyncBlockSharedCssClassName.prefix);
+      domRef.classList.toggle(_syncBlock.BodiedSyncBlockSharedCssClassName.empty, (0, _isEmptySourceSyncBlock.isEmptySourceSyncBlock)(this.node));
       return domRef;
     }
+
+    /**
+     * Keeps the empty marker class in sync so the source placeholder can be shown purely from
+     * document state. See `isEmptySourceSyncBlock` for why the DOM is not used to decide this.
+     */
+  }, {
+    key: "update",
+    value: function update(node, decorations) {
+      var updated = _superPropGet(BodiedSyncBlockOld, "update", this, 3)([node, decorations]);
+      if (updated) {
+        // `ReactNodeView`'s `dom` getter throws rather than returning nullish once the view is
+        // destroyed, so optional chaining here would be misleading. `super.update()` only
+        // returns true while the view is still mounted, so the ref is guaranteed.
+        this.dom.classList.toggle(_syncBlock.BodiedSyncBlockSharedCssClassName.empty, (0, _isEmptySourceSyncBlock.isEmptySourceSyncBlock)(this.node));
+      }
+      return updated;
+    }
   }, {
     key: "render",
     value: function render(_props, forwardRef) {
@@ -222,6 +243,7 @@ var BodiedSyncBlock = exports.BodiedSyncBlock = /*#__PURE__*/function () {
       }));
     }, labelContainer, this.labelKey);
     this.updateContentEditable({});
+    this.updateEmptyClass();
     this.handleConnectivityModeChange();
     this.handleViewModeChange();
 
@@ -269,6 +291,16 @@ var BodiedSyncBlock = exports.BodiedSyncBlock = /*#__PURE__*/function () {
         });
       }
     }
+
+    /**
+     * Marks the block as empty so the source placeholder can be shown purely from document state.
+     * See `isEmptySourceSyncBlock` for why the DOM is not used to decide this.
+     */
+  }, {
+    key: "updateEmptyClass",
+    value: function updateEmptyClass() {
+      this.dom.classList.toggle(_syncBlock.BodiedSyncBlockSharedCssClassName.empty, (0, _isEmptySourceSyncBlock.isEmptySourceSyncBlock)(this.node));
+    }
   }, {
     key: "update",
     value: function update(node) {
@@ -279,6 +311,7 @@ var BodiedSyncBlock = exports.BodiedSyncBlock = /*#__PURE__*/function () {
       // Cache updates are handled in appendTransaction where we can
       // filter out non-user changes (remote collab, table auto-scale, etc.)
       this.node = node;
+      this.updateEmptyClass();
       return true;
     }
   }, {

package/dist/cjs/nodeviews/isEmptySourceSyncBlock.js

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isEmptySourceSyncBlock = void 0;
+/**
+ * A source synced block counts as "empty" when it holds exactly one paragraph and that paragraph
+ * has no content. This is the only state in which the source placeholder should be shown.
+ *
+ * Emptiness is deliberately derived from the ProseMirror node rather than the rendered DOM.
+ * ProseMirror and other plugins inject non-content children into the paragraph element — the
+ * selection marker's cursor widget (`.ProseMirror-widget`), ProseMirror's `.ProseMirror-separator`
+ * hack node, and the `.ProseMirror-trailingBreak` — so DOM shape is not a reliable signal of
+ * whether the user has typed anything. See EDITOR-8327.
+ */
+var isEmptySourceSyncBlock = exports.isEmptySourceSyncBlock = function isEmptySourceSyncBlock(node) {
+  if (node.childCount !== 1) {
+    return false;
+  }
+  var firstChild = node.firstChild;
+  return (firstChild === null || firstChild === void 0 ? void 0 : firstChild.type.name) === 'paragraph' && firstChild.content.size === 0;
+};

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

@@ -471,7 +471,7 @@ var buildStatusDecorations = function buildStatusDecorations(doc, syncBlockStore
  * is explicitly scoped to a single plugin instance.
  */
 var SyncedBlockPluginContext = /*#__PURE__*/function () {
-  function SyncedBlockPluginContext(onGiveFeedback) {
+  function SyncedBlockPluginContext(onGiveFeedback, shouldShowFeedbackPrompt, api) {
     (0, _classCallCheck2.default)(this, SyncedBlockPluginContext);
     (0, _defineProperty2.default)(this, "confirmationTransactionRef", {
       current: undefined
@@ -480,9 +480,12 @@ var SyncedBlockPluginContext = /*#__PURE__*/function () {
     (0, _defineProperty2.default)(this, "cutRemovalGeneration", 0);
     (0, _defineProperty2.default)(this, "_isCopyEvent", false);
     (0, _defineProperty2.default)(this, "_isCutEvent", false);
+    (0, _defineProperty2.default)(this, "feedbackPromptConsumed", false);
     (0, _defineProperty2.default)(this, "unpublishedFlagShown", new Set());
     (0, _defineProperty2.default)(this, "extensionFlagShown", new Set());
     this.onGiveFeedback = onGiveFeedback;
+    this.shouldShowFeedbackPrompt = shouldShowFeedbackPrompt;
+    this.api = api;
   }
   return (0, _createClass2.default)(SyncedBlockPluginContext, [{
     key: "isCopyEvent",
@@ -580,7 +583,7 @@ var SyncedBlockPluginContext = /*#__PURE__*/function () {
         return;
       }
       if (context.blockType === 'reference') {
-        this.invokeFeedback(context);
+        this.requestFeedbackPrompt(context);
       }
     }
   }, {
@@ -590,37 +593,54 @@ var SyncedBlockPluginContext = /*#__PURE__*/function () {
       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);
+        this.requestFeedbackPrompt(context);
       }
     }
   }, {
-    key: "invokeFeedback",
-    value: function invokeFeedback(context) {
+    key: "requestFeedbackPrompt",
+    value: function requestFeedbackPrompt(context) {
       var _this2 = this;
+      if (this.feedbackPromptConsumed) {
+        return;
+      }
+      this.feedbackPromptConsumed = true;
       (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 () {});
+          var _this2$shouldShowFeed, _this2$shouldShowFeed2;
+          var shouldShow = (_this2$shouldShowFeed = (_this2$shouldShowFeed2 = _this2.shouldShowFeedbackPrompt) === null || _this2$shouldShowFeed2 === void 0 ? void 0 : _this2$shouldShowFeed2.call(_this2)) !== null && _this2$shouldShowFeed !== void 0 ? _this2$shouldShowFeed : true;
+          void Promise.resolve(shouldShow).then(function (isEligible) {
+            var _this2$api;
+            if (!isEligible) {
+              return;
+            }
+            (_this2$api = _this2.api) === null || _this2$api === void 0 || _this2$api.core.actions.execute(function (_ref7) {
+              var tr = _ref7.tr;
+              return tr.setMeta(syncedBlockPluginKey, {
+                activeFlag: {
+                  id: _types.FLAG_ID.SYNC_BLOCK_FEEDBACK_PROMPT,
+                  feedbackContext: context
+                }
+              });
+            });
+          }).catch(function () {});
         } catch (_unused) {
-          // Product feedback collectors are optional UI. Their failures must
-          // never affect the already-applied editor transaction.
+          // Persisted feedback eligibility is optional product UI.
         }
       });
     }
   }]);
 }();
 var createPlugin = exports.createPlugin = function createPlugin(options, pmPluginFactoryParams, syncBlockStore, api) {
-  var _ref7 = options || {},
-    _ref7$useLongPressSel = _ref7.useLongPressSelection,
-    useLongPressSelection = _ref7$useLongPressSel === void 0 ? false : _ref7$useLongPressSel;
+  var _ref8 = options || {},
+    _ref8$useLongPressSel = _ref8.useLongPressSelection,
+    useLongPressSelection = _ref8$useLongPressSel === void 0 ? false : _ref8$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(options === null || options === void 0 ? void 0 : options.onGiveFeedback);
+  var ctx = new SyncedBlockPluginContext(options === null || options === void 0 ? void 0 : options.onGiveFeedback, options === null || options === void 0 ? void 0 : options.shouldShowFeedbackPrompt, api);
   var confirmationTransactionRef = ctx.confirmationTransactionRef;
   var unpublishedFlagShown = ctx.unpublishedFlagShown;
   var extensionFlagShown = ctx.extensionFlagShown;
@@ -630,8 +650,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 (_ref8) {
-        var tr = _ref8.tr;
+      api === null || api === void 0 || api.core.actions.execute(function (_ref9) {
+        var tr = _ref9.tr;
         return tr;
       });
     });
@@ -659,8 +679,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 (_ref9) {
-          var tr = _ref9.tr;
+        api === null || api === void 0 || api.core.actions.execute(function (_ref0) {
+          var tr = _ref0.tr;
           return tr.setMeta(syncedBlockPluginKey, {
             activeFlag: {
               id: _types.FLAG_ID.UNPUBLISHED_SYNC_BLOCK_PASTED,
@@ -1003,8 +1023,8 @@ var createPlugin = exports.createPlugin = function createPlugin(options, pmPlugi
           return node;
         });
       },
-      transformCopied: function transformCopied(slice, _ref0) {
-        var state = _ref0.state;
+      transformCopied: function transformCopied(slice, _ref1) {
+        var state = _ref1.state;
         var pluginState = syncedBlockPluginKey.getState(state);
         var syncBlockStore = pluginState === null || pluginState === void 0 ? void 0 : pluginState.syncBlockStore;
         var schema = state.schema;
@@ -1276,8 +1296,8 @@ var createPlugin = exports.createPlugin = function createPlugin(options, pmPlugi
             if (!(step instanceof _transform.ReplaceStep || step instanceof _transform.ReplaceAroundStep) || !('slice' in step)) {
               return false;
             }
-            var _ref1 = step,
-              slice = _ref1.slice;
+            var _ref10 = step,
+              slice = _ref10.slice;
             var found = false;
             slice.content.descendants(function (node) {
               if (syncBlockStore.sourceManager.isSourceBlock(node) && node.attrs.resourceId) {
@@ -1317,8 +1337,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 (_ref10) {
-              var tr = _ref10.tr;
+            api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(function (_ref11) {
+              var tr = _ref11.tr;
               return tr.setMeta(syncedBlockPluginKey, {
                 activeFlag: {
                   id: _types.FLAG_ID.DUPLICATE_SOURCE_SYNC_BLOCK

package/dist/cjs/syncedBlockPlugin.js

@@ -34,7 +34,9 @@ var _toolbarComponents = require("./ui/toolbar-components");
  */
 var LazySyncedBlockUI = function LazySyncedBlockUI(_ref) {
   var syncBlockStoreManager = _ref.syncBlockStore,
-    api = _ref.api;
+    api = _ref.api,
+    onFeedbackPromptShown = _ref.onFeedbackPromptShown,
+    onGiveFeedback = _ref.onGiveFeedback;
   var hasSyncBlocks = (0, _hooks.useSharedPluginStateWithSelector)(api, ['syncedBlock'], function (states) {
     var _states$syncedBlockSt;
     return (_states$syncedBlockSt = states.syncedBlockState) === null || _states$syncedBlockSt === void 0 ? void 0 : _states$syncedBlockSt.hasSyncedBlocks;
@@ -53,7 +55,9 @@ var LazySyncedBlockUI = function LazySyncedBlockUI(_ref) {
     syncBlockStoreManager: syncBlockStoreManager,
     api: api
   }), /*#__PURE__*/_react.default.createElement(_Flag.Flag, {
-    api: api
+    api: api,
+    onFeedbackPromptShown: onFeedbackPromptShown,
+    onGiveFeedback: onGiveFeedback
   }));
 };
 var syncedBlockPlugin = exports.syncedBlockPlugin = function syncedBlockPlugin(_ref2) {
@@ -160,7 +164,9 @@ var syncedBlockPlugin = exports.syncedBlockPlugin = function syncedBlockPlugin(_
       refs.wrapperElement = wrapperElement || undefined;
       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
+        api: api,
+        onFeedbackPromptShown: config === null || config === void 0 ? void 0 : config.onFeedbackPromptShown,
+        onGiveFeedback: config === null || config === void 0 ? void 0 : config.onGiveFeedback
       }));
     },
     getSharedState: function getSharedState(editorState) {

package/dist/cjs/types/index.js

@@ -15,6 +15,7 @@ var FLAG_ID = exports.FLAG_ID = /*#__PURE__*/function (FLAG_ID) {
   FLAG_ID["INLINE_EXTENSION_IN_SYNC_BLOCK"] = "inline-extension-in-sync-block";
   FLAG_ID["EXTENSION_IN_SYNC_BLOCK"] = "extension-in-sync-block";
   FLAG_ID["DUPLICATE_SOURCE_SYNC_BLOCK"] = "duplicate-source-sync-block";
+  FLAG_ID["SYNC_BLOCK_FEEDBACK_PROMPT"] = "synced-block-feedback-prompt";
   return FLAG_ID;
 }({});
 var SYNCED_BLOCK_BUTTON_TEST_ID = exports.SYNCED_BLOCK_BUTTON_TEST_ID = {

package/dist/cjs/ui/DeleteConfirmationModal.js

@@ -1,4 +1,4 @@
-/* DeleteConfirmationModal.tsx generated by @compiled/babel-plugin v0.40.0 */
+/* DeleteConfirmationModal.tsx generated by @compiled/babel-plugin v2.0.0 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

package/dist/cjs/ui/Flag.compiled.css

@@ -0,0 +1 @@
+._btc7grf3 [data-testid=synced-block-feedback-prompt-actions] button{padding-inline-start:0!important}

package/dist/cjs/ui/Flag.js

@@ -1,3 +1,4 @@
+/* Flag.tsx generated by @compiled/babel-plugin v2.0.0 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -6,6 +7,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.getSyncBlockCopiedDescription = exports.Flag = void 0;
+require("./Flag.compiled.css");
+var _runtime = require("@compiled/react/runtime");
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
 var _reactIntl = require("react-intl");
@@ -14,15 +17,18 @@ var _messages = require("@atlaskit/editor-common/messages");
 var _syncBlock = require("@atlaskit/editor-common/sync-block");
 var _editorPluginConnectivity = require("@atlaskit/editor-plugin-connectivity");
 var _flag = _interopRequireWildcard(require("@atlaskit/flag"));
+var _megaphone = _interopRequireDefault(require("@atlaskit/icon/core/megaphone"));
 var _statusSuccess = _interopRequireDefault(require("@atlaskit/icon/core/status-success"));
 var _statusWarning = _interopRequireDefault(require("@atlaskit/icon/core/status-warning"));
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _main = require("../pm-plugins/main");
 var _types = require("../types");
+var _flagMap;
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var flagMap = (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, _types.FLAG_ID.CANNOT_DELETE_WHEN_OFFLINE, {
+var feedbackFlagStyles = null;
+var flagMap = (_flagMap = {}, (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)(_flagMap, _types.FLAG_ID.CANNOT_DELETE_WHEN_OFFLINE, {
   title: _messages.syncBlockMessages.failToDeleteTitle,
   description: _messages.syncBlockMessages.failToDeleteWhenOfflineDescription,
   type: 'error'
@@ -61,7 +67,11 @@ var flagMap = (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _d
   title: _messages.syncBlockMessages.duplicateSourceSyncBlockTitle,
   description: _messages.syncBlockMessages.duplicateSourceSyncBlockDescription,
   type: 'error'
-});
+}), (0, _defineProperty2.default)(_flagMap, _types.FLAG_ID.SYNC_BLOCK_FEEDBACK_PROMPT, {
+  title: _messages.syncBlockMessages.feedbackFlagTitle,
+  description: _messages.syncBlockMessages.feedbackFlagDescription,
+  type: 'feedback'
+}));
 var getSyncBlockCopiedDescription = exports.getSyncBlockCopiedDescription = function getSyncBlockCopiedDescription(activeFlag, isSyncBlockActivationEnabled) {
   if (!activeFlag || activeFlag.id !== _types.FLAG_ID.SYNC_BLOCK_COPIED || activeFlag.sourceProduct !== 'confluence-page' || !isSyncBlockActivationEnabled) {
     return undefined;
@@ -69,7 +79,9 @@ var getSyncBlockCopiedDescription = exports.getSyncBlockCopiedDescription = func
   return activeFlag.isLivePage || !activeFlag.isSourceContentUnpublished ? _messages.syncBlockMessages.syncBlockCopiedLivePageDescription : _messages.syncBlockMessages.syncBlockCopiedUnpublishedDescription;
 };
 var Flag = exports.Flag = function Flag(_ref) {
-  var api = _ref.api;
+  var api = _ref.api,
+    onFeedbackPromptShown = _ref.onFeedbackPromptShown,
+    onGiveFeedback = _ref.onGiveFeedback;
   var _useSharedPluginState = (0, _hooks.useSharedPluginStateWithSelector)(api, ['syncedBlock', 'connectivity'], function (states) {
       var _states$syncedBlockSt, _states$connectivityS;
       return {
@@ -81,6 +93,18 @@ var Flag = exports.Flag = function Flag(_ref) {
     mode = _useSharedPluginState.mode;
   var _useIntl = (0, _reactIntl.useIntl)(),
     formatMessage = _useIntl.formatMessage;
+  var isFeedbackPromptVisible = activeFlag && activeFlag.id === _types.FLAG_ID.SYNC_BLOCK_FEEDBACK_PROMPT;
+  _react.default.useEffect(function () {
+    if (!isFeedbackPromptVisible || !onFeedbackPromptShown) {
+      return;
+    }
+    try {
+      var promptShownResult = onFeedbackPromptShown();
+      void Promise.resolve(promptShownResult).catch(function () {});
+    } catch (_unused) {
+      // Prompt persistence is optional product UI.
+    }
+  }, [isFeedbackPromptVisible, onFeedbackPromptShown]);
   if (!activeFlag) {
     return;
   }
@@ -110,7 +134,7 @@ var Flag = exports.Flag = function Flag(_ref) {
     });
     return;
   }
-  var onDismissed = function onDismissed() {
+  var dismissFlag = function dismissFlag(shouldFocusEditor) {
     api === null || api === void 0 || api.core.actions.execute(function (_ref3) {
       var tr = _ref3.tr;
       onDismissedCallback === null || onDismissedCallback === void 0 || onDismissedCallback(tr);
@@ -120,7 +144,12 @@ var Flag = exports.Flag = function Flag(_ref) {
       }));
       return tr;
     });
-    api === null || api === void 0 || api.core.actions.focus();
+    if (shouldFocusEditor) {
+      api === null || api === void 0 || api.core.actions.focus();
+    }
+  };
+  var onDismissed = function onDismissed() {
+    return dismissFlag(true);
   };
   var typeToActions = function typeToActions() {
     if (type === 'error') {
@@ -137,11 +166,28 @@ var Flag = exports.Flag = function Flag(_ref) {
         target: '_blank',
         rel: 'noopener noreferrer'
       }];
+    } else if (type === 'feedback' && activeFlag.id === _types.FLAG_ID.SYNC_BLOCK_FEEDBACK_PROMPT && activeFlag.feedbackContext) {
+      var feedbackContext = activeFlag.feedbackContext;
+      return [{
+        content: formatMessage(_messages.syncBlockMessages.feedbackFlagGiveFeedback),
+        onClick: function onClick() {
+          dismissFlag(false);
+          try {
+            var feedbackResult = onGiveFeedback === null || onGiveFeedback === void 0 ? void 0 : onGiveFeedback(feedbackContext);
+            void Promise.resolve(feedbackResult).catch(function () {});
+          } catch (_unused2) {
+            // Feedback collectors are optional product UI.
+          }
+        }
+      }, {
+        content: formatMessage(_messages.syncBlockMessages.feedbackFlagNoThanks),
+        onClick: onDismissed
+      }];
     }
     return undefined;
   };
   var FlagComponent = type === 'info' ? _flag.AutoDismissFlag : _flag.default;
-  return /*#__PURE__*/_react.default.createElement(_flag.FlagGroup, null, /*#__PURE__*/_react.default.createElement(FlagComponent, {
+  var flag = /*#__PURE__*/_react.default.createElement(FlagComponent, {
     onDismissed: onDismissed,
     title: formatMessage(title),
     description: description ? formatMessage(description) : undefined,
@@ -149,7 +195,11 @@ var Flag = exports.Flag = function Flag(_ref) {
     testId: activeFlag.id,
     icon: typeToIcon(type),
     actions: typeToActions()
-  }));
+  });
+  return /*#__PURE__*/_react.default.createElement(_flag.FlagGroup, null, type === 'feedback' ? /*#__PURE__*/_react.default.createElement("div", {
+    id: activeFlag.id,
+    className: (0, _runtime.ax)(["_btc7grf3"])
+  }, flag) : flag);
 };
 var typeToIcon = function typeToIcon(type) {
   if (type === 'error') {
@@ -158,6 +208,13 @@ var typeToIcon = function typeToIcon(type) {
       color: "var(--ds-icon-warning, #E06C00)"
     });
   }
+  if (type === 'feedback') {
+    return /*#__PURE__*/_react.default.createElement(_megaphone.default, {
+      label: "",
+      spacing: "spacious",
+      color: "var(--ds-icon, #292A2E)"
+    });
+  }
   return /*#__PURE__*/_react.default.createElement(_statusSuccess.default, {
     label: "",
     color: "var(--ds-icon-success, #6A9A23)"

package/dist/cjs/ui/SourceSyncBlockPlaceholder.js

@@ -21,7 +21,7 @@ var _syncBlock = require("@atlaskit/editor-common/sync-block");
 // 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)"), {
+  return (0, _react2.css)((0, _defineProperty2.default)({}, ".ProseMirror .".concat(_syncBlock.BodiedSyncBlockSharedCssClassName.prefix, ".").concat(_syncBlock.BodiedSyncBlockSharedCssClassName.empty, " .").concat(_syncBlock.BodiedSyncBlockSharedCssClassName.content, "[contenteditable=\"true\"] > p:only-child"), {
     position: 'relative',
     '&::before': {
       // JSON.stringify produces a quoted and escaped CSS string.
@@ -33,8 +33,11 @@ var getSourceSyncBlockPlaceholderStyles = function getSourceSyncBlockPlaceholder
       font: 'inherit',
       insetInlineStart: 0,
       width: '100%',
+      overflow: 'hidden',
       pointerEvents: 'none',
-      userSelect: 'none'
+      textOverflow: 'ellipsis',
+      userSelect: 'none',
+      whiteSpace: 'nowrap'
     }
   }));
 };

package/dist/cjs/ui/SyncBlockLabel.js

@@ -14,6 +14,7 @@ var _syncBlock = require("@atlaskit/editor-common/sync-block");
 var _blockSynced = _interopRequireDefault(require("@atlaskit/icon-lab/core/block-synced"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _compiled = require("@atlaskit/primitives/compiled");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _visuallyHidden = _interopRequireDefault(require("@atlaskit/visually-hidden/visually-hidden"));
 var _time = require("./utils/time");
@@ -80,7 +81,13 @@ var SyncBlockLabelComponent = function SyncBlockLabelComponent(_ref) {
         color: "color.text.subtle"
       }, formatMessage(_messages.syncBlockMessages.unsyncedBlockLabel));
     }
-    if (isSource || !title) {
+    if (isSource) {
+      return /*#__PURE__*/_react.default.createElement(_compiled.Text, {
+        size: "small",
+        color: "color.text.subtle"
+      }, formatMessage((0, _expValEquals.expValEquals)('platform_editor_sync_block_activation', 'isEnabled', true) ? _messages.syncBlockMessages.sourceSyncedBlockLabel : _messages.syncBlockMessages.syncedBlockLabel));
+    }
+    if (!title) {
       return /*#__PURE__*/_react.default.createElement(_compiled.Text, {
         size: "small",
         color: "color.text.subtle"
@@ -119,6 +126,6 @@ var SyncBlockLabelComponent = function SyncBlockLabelComponent(_ref) {
     onShow: updateTooltipContent
   }, label, /*#__PURE__*/_react.default.createElement(_visuallyHidden.default, {
     id: ariaDescribedById
-  }, tooltipContent));
+  }, (0, _expValEquals.expValEquals)('platform_editor_sync_block_activation', 'isEnabled', true) ? tooltipMessage : tooltipContent));
 };
 var SyncBlockLabel = exports.SyncBlockLabel = /*#__PURE__*/_react.default.memo(SyncBlockLabelComponent);

package/dist/cjs/ui/SyncedLocationDropdown.compiled.css

@@ -1,12 +1,16 @@
 ._2rkol0p1{border-radius:var(--ds-radius-tile,25%)}
 ._y44vfmxe{animation:kgnpaw5 .7s ease-in-out}
+._195g1wug{margin-inline:auto}
 ._1mour5cr{margin-block:var(--ds-space-negative-050,-4px)}
 ._1rjcv77o{padding-block:var(--ds-space-025,2px)}
+._1rjcze3t{padding-block:var(--ds-space-0,0)}
 ._ku9g126e [data-ds--menu--heading-item]{margin-block:var(--ds-space-050,4px)!important}._18bk1rpy [data-ds--menu--heading-item]{color:var(--ds-text-subtlest,#6b6e76)}
 ._18m915vq{overflow-y:hidden}
 ._18m91wug{overflow-y:auto}
 ._1bah1h6o{justify-content:center}
+._1bsb12aa{width:290px}
 ._1bsb19n7{width:106px}
+._1bsb1kdj{width:25pc}
 ._1bsb1osq{width:100%}
 ._1bsbgktf{width:20px}
 ._1bsbo8uj{width:235px}
@@ -26,8 +30,11 @@
 ._ajmmnqa1{text-decoration-style:solid}
 ._bfhki8nm{background-color:var(--ds-background-neutral,#0515240f)}
 ._c71lko4j{max-height:19pc}
+._ca0q1ejb{padding-top:var(--ds-space-300,24px)}
+._n3td1ejb{padding-bottom:var(--ds-space-300,24px)}
 ._o5721q9c{white-space:nowrap}
 ._syaz1rpy{color:var(--ds-text-subtlest,#6b6e76)}
 ._syazazsu{color:var(--ds-text-subtle,#505258)}
+._vchhusvi{box-sizing:border-box}
 ._y3gn1h6o{text-align:center}
 @keyframes kgnpaw5{0%{opacity:0}to{opacity:1}}