@atlaskit/editor-plugin-synced-block 5.2.1 → 5.3.0

package/CHANGELOG.md

@@ -1,5 +1,30 @@
 # @atlaskit/editor-plugin-synced-block
 
+## 5.3.0
+
+### Minor Changes
+
+- [`870c3baec758b`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/870c3baec758b) -
+  Enable consumers to use GraphQL subscription for fetching the block data when the block changes
+
+### Patch Changes
+
+- [`5c522f81f181e`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/5c522f81f181e) -
+  [ux] EDITOR-4369 Support synced location for references on Jira in source and reference synced
+  block
+- [`058065aadf69f`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/058065aadf69f) -
+  [ux] [EDITOR-2851] Support reference sync block unsyc
+- Updated dependencies
+
+## 5.2.2
+
+### Patch Changes
+
+- [`7f41011a1b0ff`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/7f41011a1b0ff) -
+  EDITOR-1665 update sync block experience events to use general experience ids, keep existing error
+  events and add success events
+- Updated dependencies
+
 ## 5.2.1
 
 ### Patch Changes

package/afm-jira/tsconfig.json

@@ -1,5 +1,5 @@
 {
-	"extends": "../../../../tsconfig.entry-points.jira.json",
+	"extends": "../../../../tsconfig.local-consumption.json",
 	"compilerOptions": {
 		"target": "es5",
 		"outDir": "../../../../../jira/tsDist/@atlaskit__editor-plugin-synced-block/app",

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

@@ -3,19 +3,23 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.removeSyncedBlock = exports.editSyncedBlockSource = exports.createSyncedBlock = exports.copySyncedBlockReferenceToClipboardEditorCommand = exports.copySyncedBlockReferenceToClipboard = void 0;
+exports.unsync = exports.removeSyncedBlock = exports.editSyncedBlockSource = exports.createSyncedBlock = exports.copySyncedBlockReferenceToClipboardEditorCommand = exports.copySyncedBlockReferenceToClipboard = void 0;
+var _schemaDefault = require("@atlaskit/adf-schema/schema-default");
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _copyButton = require("@atlaskit/editor-common/copy-button");
+var _model = require("@atlaskit/editor-prosemirror/model");
 var _state = require("@atlaskit/editor-prosemirror/state");
 var _utils = require("@atlaskit/editor-prosemirror/utils");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _main = require("../pm-plugins/main");
 var _utils2 = require("../pm-plugins/utils/utils");
 var _types = require("../types");
+var _utils3 = require("./utils");
 var createSyncedBlock = exports.createSyncedBlock = function createSyncedBlock(_ref) {
   var tr = _ref.tr,
     syncBlockStore = _ref.syncBlockStore,
-    typeAheadInsert = _ref.typeAheadInsert;
+    typeAheadInsert = _ref.typeAheadInsert,
+    fireAnalyticsEvent = _ref.fireAnalyticsEvent;
   var _tr$doc$type$schema$n = tr.doc.type.schema.nodes,
     bodiedSyncBlock = _tr$doc$type$schema$n.bodiedSyncBlock,
     paragraph = _tr$doc$type$schema$n.paragraph;
@@ -41,9 +45,14 @@ var createSyncedBlock = exports.createSyncedBlock = function createSyncedBlock(_
     var conversionInfo = (0, _utils2.canBeConvertedToSyncBlock)(tr.selection);
     if (!conversionInfo) {
       if ((0, _platformFeatureFlags.fg)('platform_synced_block_dogfooding')) {
-        var _syncBlockStore$sourc;
-        (_syncBlockStore$sourc = syncBlockStore.sourceManager.createExperience) === null || _syncBlockStore$sourc === void 0 || _syncBlockStore$sourc.failure({
-          reason: 'Selection is not allowed to be converted to sync block'
+        fireAnalyticsEvent === null || fireAnalyticsEvent === void 0 || fireAnalyticsEvent({
+          action: _analytics.ACTION.ERROR,
+          actionSubject: _analytics.ACTION_SUBJECT.SYNCED_BLOCK,
+          actionSubjectId: _analytics.ACTION_SUBJECT_ID.SYNCED_BLOCK_CREATE,
+          attributes: {
+            error: 'Content cannot be converted to sync block'
+          },
+          eventType: _analytics.EVENT_TYPE.OPERATIONAL
         });
       }
       return false;
@@ -168,4 +177,33 @@ var removeSyncedBlock = exports.removeSyncedBlock = function removeSyncedBlock(a
     api === null || api === void 0 || api.core.actions.focus();
     return true;
   };
+};
+
+/**
+ * Deletes (bodied)SyncBlock node and paste its content to the editor
+ */
+var unsync = exports.unsync = function unsync(storeManager, isBodiedSyncBlock, view) {
+  var _storeManager$referen;
+  if (!view) {
+    return false;
+  }
+  var state = view.state;
+  var syncBlock = (0, _utils2.findSyncBlockOrBodiedSyncBlock)(state.schema, state.selection);
+  if (!syncBlock) {
+    return false;
+  }
+  if (isBodiedSyncBlock) {
+    return true;
+  }
+
+  // handle syncBlock unsync
+  var syncBlockContent = (_storeManager$referen = storeManager.referenceManager.getFromCache(syncBlock.node.attrs.resourceId)) === null || _storeManager$referen === void 0 || (_storeManager$referen = _storeManager$referen.data) === null || _storeManager$referen === void 0 ? void 0 : _storeManager$referen.content;
+  if (!syncBlockContent) {
+    return false;
+  }
+
+  // use defaultSchema for serialization so we can serialize any type of nodes and marks despite current editor's schema might not allow it
+  var contentFragment = _model.Fragment.fromJSON(_schemaDefault.defaultSchema, syncBlockContent);
+  var contentDOM = _model.DOMSerializer.fromSchema(_schemaDefault.defaultSchema).serializeFragment(contentFragment);
+  return (0, _utils3.pasteSyncBlockHTMLContent)(contentDOM, view);
 };

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

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.pasteSyncBlockHTMLContent = void 0;
+var pasteSyncBlockHTMLContent = exports.pasteSyncBlockHTMLContent = function pasteSyncBlockHTMLContent(contentDOM, view) {
+  var tmpDiv = document.createElement('div');
+  tmpDiv.appendChild(contentDOM);
+
+  // This is required so that prosemirror can read the fragment context and slice properly
+  if (tmpDiv.firstChild instanceof HTMLElement) {
+    tmpDiv.firstChild.setAttribute('data-pm-slice', '0 0 []');
+
+    // As per requirement - when unsync reference block, it should render its content as copy&paste behaviour
+    // Hence here we call pasteHTML to evoke editor paste logic that handles any unsupported nodes/marks
+    return view.pasteHTML(tmpDiv.innerHTML);
+  }
+  return false;
+};

package/dist/cjs/pm-plugins/menu-and-toolbar-experiences.js

@@ -0,0 +1,267 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getMenuAndToolbarExperiencesPlugin = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _bindEventListener = require("bind-event-listener");
+var _analytics = require("@atlaskit/editor-common/analytics");
+var _experiences = require("@atlaskit/editor-common/experiences");
+var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
+var _state = require("@atlaskit/editor-prosemirror/state");
+var _types = require("../types");
+var TIMEOUT_DURATION = 30000;
+var pluginKey = new _state.PluginKey('syncedBlockMenuAndToolbarExperience');
+var SYNCED_BLOCK_BUTTON_TEST_IDS = Object.values(_types.SYNCED_BLOCK_BUTTON_TEST_ID);
+var syncedBlockButtonIds = new Set(SYNCED_BLOCK_BUTTON_TEST_IDS);
+var targetEl;
+var getMenuAndToolbarExperiencesPlugin = exports.getMenuAndToolbarExperiencesPlugin = function getMenuAndToolbarExperiencesPlugin(_ref) {
+  var refs = _ref.refs,
+    dispatchAnalyticsEvent = _ref.dispatchAnalyticsEvent;
+  var popupsTargetEl;
+  var editorViewEl;
+  var getPopupsTarget = function getPopupsTarget() {
+    if (!popupsTargetEl) {
+      popupsTargetEl = refs.popupsMountPoint || refs.wrapperElement || (0, _experiences.getPopupContainerFromEditorView)(editorViewEl);
+    }
+    return popupsTargetEl;
+  };
+  var createSourcePrimaryToolbarExperience = getCreateSourcePrimaryToolbarExperience({
+    refs: refs,
+    dispatchAnalyticsEvent: dispatchAnalyticsEvent
+  });
+  var createSourceBlockMenuExperience = getCreateSourceBlockMenuExperience({
+    refs: refs,
+    dispatchAnalyticsEvent: dispatchAnalyticsEvent
+  });
+  var createSourceQuickInsertMenuExperience = getCreateSourceQuickInsertMenuExperience({
+    refs: refs,
+    dispatchAnalyticsEvent: dispatchAnalyticsEvent
+  });
+  var deleteReferenceSyncedBlockExperience = getDeleteReferenceSyncedBlockToolbarExperience({
+    refs: refs,
+    dispatchAnalyticsEvent: dispatchAnalyticsEvent
+  });
+  var unbindClickListener = (0, _bindEventListener.bind)(document, {
+    type: 'click',
+    listener: function listener(event) {
+      var target = event.target;
+      if (!target) {
+        return;
+      }
+      var button = target.closest('button[data-testid]');
+      if (!button || !(button instanceof HTMLButtonElement)) {
+        return;
+      }
+      var testId = button.dataset.testid;
+      if (!isSyncedBlockButtonId(testId)) {
+        return;
+      }
+      handleButtonClick({
+        testId: testId,
+        createSourcePrimaryToolbarExperience: createSourcePrimaryToolbarExperience,
+        createSourceBlockMenuExperience: createSourceBlockMenuExperience,
+        createSourceQuickInsertMenuExperience: createSourceQuickInsertMenuExperience,
+        deleteReferenceSyncedBlockExperience: deleteReferenceSyncedBlockExperience
+      });
+    }
+  });
+  var unbindKeydownListener = (0, _bindEventListener.bind)(document, {
+    type: 'keydown',
+    listener: function listener(event) {
+      if (isEnterKey(event.key)) {
+        var typeaheadPopup = (0, _experiences.popupWithNestedElement)(getPopupsTarget(), '.fabric-editor-typeahead');
+        if (!typeaheadPopup || !(typeaheadPopup instanceof HTMLElement)) {
+          return;
+        }
+        var firstItem = typeaheadPopup.querySelector('[role="option"]');
+        if (!firstItem || !(firstItem instanceof HTMLElement)) {
+          return;
+        }
+        var testId = firstItem.dataset.testid;
+        if (testId === _types.SYNCED_BLOCK_BUTTON_TEST_ID.quickInsertCreate) {
+          createSourceQuickInsertMenuExperience.start();
+        }
+      }
+    },
+    options: {
+      capture: true
+    }
+  });
+  return new _safePlugin.SafePlugin({
+    key: pluginKey,
+    view: function view(editorView) {
+      editorViewEl = editorView.dom;
+      return {
+        destroy: function destroy() {
+          createSourcePrimaryToolbarExperience.abort({
+            reason: 'editor-destroyed'
+          });
+          createSourceBlockMenuExperience.abort({
+            reason: 'editor-destroyed'
+          });
+          createSourceQuickInsertMenuExperience.abort({
+            reason: 'editor-destroyed'
+          });
+          deleteReferenceSyncedBlockExperience.abort({
+            reason: 'editor-destroyed'
+          });
+          unbindClickListener();
+          unbindKeydownListener();
+        }
+      };
+    }
+  });
+};
+var getCreateSourcePrimaryToolbarExperience = function getCreateSourcePrimaryToolbarExperience(_ref2) {
+  var refs = _ref2.refs,
+    dispatchAnalyticsEvent = _ref2.dispatchAnalyticsEvent;
+  return new _experiences.Experience(_experiences.EXPERIENCE_ID.TOOLBAR_ACTION, {
+    action: _analytics.ACTION.SYNCED_BLOCK_CREATE,
+    actionSubjectId: _analytics.ACTION_SUBJECT_ID.PRIMARY_TOOLBAR,
+    dispatchAnalyticsEvent: dispatchAnalyticsEvent,
+    checks: [new _experiences.ExperienceCheckTimeout({
+      durationMs: TIMEOUT_DURATION
+    }), syncedBlockAddedToDomCheck(refs)]
+  });
+};
+var getCreateSourceBlockMenuExperience = function getCreateSourceBlockMenuExperience(_ref3) {
+  var refs = _ref3.refs,
+    dispatchAnalyticsEvent = _ref3.dispatchAnalyticsEvent;
+  return new _experiences.Experience(_experiences.EXPERIENCE_ID.MENU_ACTION, {
+    action: _analytics.ACTION.SYNCED_BLOCK_CREATE,
+    actionSubjectId: _analytics.ACTION_SUBJECT_ID.BLOCK_MENU,
+    dispatchAnalyticsEvent: dispatchAnalyticsEvent,
+    checks: [new _experiences.ExperienceCheckTimeout({
+      durationMs: TIMEOUT_DURATION
+    }), syncedBlockAddedToDomCheck(refs)]
+  });
+};
+var getCreateSourceQuickInsertMenuExperience = function getCreateSourceQuickInsertMenuExperience(_ref4) {
+  var refs = _ref4.refs,
+    dispatchAnalyticsEvent = _ref4.dispatchAnalyticsEvent;
+  return new _experiences.Experience(_experiences.EXPERIENCE_ID.MENU_ACTION, {
+    action: _analytics.ACTION.SYNCED_BLOCK_CREATE,
+    actionSubjectId: _analytics.ACTION_SUBJECT_ID.QUICK_INSERT,
+    dispatchAnalyticsEvent: dispatchAnalyticsEvent,
+    checks: [new _experiences.ExperienceCheckTimeout({
+      durationMs: TIMEOUT_DURATION
+    }), syncedBlockAddedToDomCheck(refs)]
+  });
+};
+var getDeleteReferenceSyncedBlockToolbarExperience = function getDeleteReferenceSyncedBlockToolbarExperience(_ref5) {
+  var refs = _ref5.refs,
+    dispatchAnalyticsEvent = _ref5.dispatchAnalyticsEvent;
+  return new _experiences.Experience(_experiences.EXPERIENCE_ID.TOOLBAR_ACTION, {
+    action: _analytics.ACTION.REFERENCE_SYNCED_BLOCK_DELETE,
+    actionSubjectId: _analytics.ACTION_SUBJECT_ID.SYNCED_BLOCK_TOOLBAR,
+    dispatchAnalyticsEvent: dispatchAnalyticsEvent,
+    checks: [new _experiences.ExperienceCheckTimeout({
+      durationMs: TIMEOUT_DURATION
+    }), referenceSyncBlockRemovedFromDomCheck(refs)]
+  });
+};
+var isSyncedBlockButtonId = function isSyncedBlockButtonId(value) {
+  return !!value && syncedBlockButtonIds.has(value);
+};
+var handleButtonClick = function handleButtonClick(_ref6) {
+  var testId = _ref6.testId,
+    createSourcePrimaryToolbarExperience = _ref6.createSourcePrimaryToolbarExperience,
+    createSourceBlockMenuExperience = _ref6.createSourceBlockMenuExperience,
+    createSourceQuickInsertMenuExperience = _ref6.createSourceQuickInsertMenuExperience,
+    deleteReferenceSyncedBlockExperience = _ref6.deleteReferenceSyncedBlockExperience;
+  switch (testId) {
+    case _types.SYNCED_BLOCK_BUTTON_TEST_ID.primaryToolbarCreate:
+      createSourcePrimaryToolbarExperience.start();
+      break;
+    case _types.SYNCED_BLOCK_BUTTON_TEST_ID.blockMenuCreate:
+      createSourceBlockMenuExperience.start();
+      break;
+    case _types.SYNCED_BLOCK_BUTTON_TEST_ID.quickInsertCreate:
+      createSourceQuickInsertMenuExperience.start();
+      break;
+    case _types.SYNCED_BLOCK_BUTTON_TEST_ID.syncedBlockToolbarReferenceDelete:
+      deleteReferenceSyncedBlockExperience.start();
+      break;
+    default:
+      {
+        // Exhaustiveness check: if a new SyncedBlockToolbarButtonId is added
+        // but not handled above, TypeScript will error here.
+        var _exhaustiveCheck = testId;
+        return _exhaustiveCheck;
+      }
+  }
+};
+var isEnterKey = function isEnterKey(key) {
+  return key === 'Enter';
+};
+var getTarget = function getTarget(containerElement) {
+  if (!targetEl) {
+    var element = containerElement === null || containerElement === void 0 ? void 0 : containerElement.querySelector('.ProseMirror');
+    if (!element || !(element instanceof HTMLElement)) {
+      return null;
+    }
+    targetEl = element;
+  }
+  return targetEl;
+};
+var syncedBlockAddedToDomCheck = function syncedBlockAddedToDomCheck(refs) {
+  return new _experiences.ExperienceCheckDomMutation({
+    onDomMutation: function onDomMutation(_ref7) {
+      var mutations = _ref7.mutations;
+      if (mutations.some(isBodiedSyncBlockAddedInMutation)) {
+        return {
+          status: 'success'
+        };
+      }
+      return undefined;
+    },
+    observeConfig: function observeConfig() {
+      return {
+        target: getTarget(refs.containerElement),
+        options: {
+          childList: true
+        }
+      };
+    }
+  });
+};
+var isBodiedSyncBlockAddedInMutation = function isBodiedSyncBlockAddedInMutation(_ref8) {
+  var type = _ref8.type,
+    addedNodes = _ref8.addedNodes;
+  return type === 'childList' && (0, _toConsumableArray2.default)(addedNodes).some(isBodiedSyncBlockWithinNode);
+};
+var isBodiedSyncBlockWithinNode = function isBodiedSyncBlockWithinNode(node) {
+  return (0, _experiences.getNodeQuery)('[data-prosemirror-node-name="bodiedSyncBlock"]')(node);
+};
+var referenceSyncBlockRemovedFromDomCheck = function referenceSyncBlockRemovedFromDomCheck(refs) {
+  return new _experiences.ExperienceCheckDomMutation({
+    onDomMutation: function onDomMutation(_ref9) {
+      var mutations = _ref9.mutations;
+      if (mutations.some(isSyncBlockRemovedInMutation)) {
+        return {
+          status: 'success'
+        };
+      }
+      return undefined;
+    },
+    observeConfig: function observeConfig() {
+      return {
+        target: getTarget(refs.containerElement),
+        options: {
+          childList: true
+        }
+      };
+    }
+  });
+};
+var isSyncBlockRemovedInMutation = function isSyncBlockRemovedInMutation(_ref0) {
+  var type = _ref0.type,
+    removedNodes = _ref0.removedNodes;
+  return type === 'childList' && (0, _toConsumableArray2.default)(removedNodes).some(isSyncBlockWithinNode);
+};
+var isSyncBlockWithinNode = function isSyncBlockWithinNode(node) {
+  return (0, _experiences.getNodeQuery)('[data-prosemirror-node-name="syncBlock"]')(node);
+};

package/dist/cjs/syncedBlockPlugin.js

@@ -15,8 +15,9 @@ var _lozenge = _interopRequireDefault(require("@atlaskit/lozenge"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _editorActions = require("./editor-actions");
 var _editorCommands = require("./editor-commands");
-var _getExperienceTrackingPlugins = require("./pm-plugins/experience-tracking/get-experience-tracking-plugins");
 var _main = require("./pm-plugins/main");
+var _menuAndToolbarExperiences = require("./pm-plugins/menu-and-toolbar-experiences");
+var _types = require("./types");
 var _blockMenuComponents = require("./ui/block-menu-components");
 var _DeleteConfirmationModal = require("./ui/DeleteConfirmationModal");
 var _Flag = require("./ui/Flag");
@@ -49,14 +50,18 @@ var syncedBlockPlugin = exports.syncedBlockPlugin = function syncedBlockPlugin(_
         plugin: function plugin(params) {
           return (0, _main.createPlugin)(config, params, syncBlockStore, api);
         }
-      }].concat((0, _toConsumableArray2.default)((0, _platformFeatureFlags.fg)('platform_synced_block_dogfooding') ? (0, _getExperienceTrackingPlugins.getExperienceTrackingPlugins)({
-        refs: refs,
-        dispatchAnalyticsEvent: function dispatchAnalyticsEvent(payload) {
-          var _api$analytics2;
-          return api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions.fireAnalyticsEvent(payload);
-        },
-        syncBlockStore: syncBlockStore
-      }) : []));
+      }].concat((0, _toConsumableArray2.default)((0, _platformFeatureFlags.fg)('platform_synced_block_dogfooding') ? [{
+        name: 'menuAndToolbarExperiencesPlugin',
+        plugin: function plugin() {
+          return (0, _menuAndToolbarExperiences.getMenuAndToolbarExperiencesPlugin)({
+            refs: refs,
+            dispatchAnalyticsEvent: function dispatchAnalyticsEvent(payload) {
+              var _api$analytics2;
+              return api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 || (_api$analytics2 = _api$analytics2.actions) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.fireAnalyticsEvent(payload);
+            }
+          });
+        }
+      }] : []));
     },
     commands: {
       copySyncedBlockReferenceToClipboard: function copySyncedBlockReferenceToClipboard() {
@@ -64,13 +69,15 @@ var syncedBlockPlugin = exports.syncedBlockPlugin = function syncedBlockPlugin(_
       },
       insertSyncedBlock: function insertSyncedBlock() {
         return function (_ref2) {
+          var _api$analytics3;
           var tr = _ref2.tr;
           if (!(config !== null && config !== void 0 && config.enableSourceCreation)) {
             return null;
           }
           return (0, _editorCommands.createSyncedBlock)({
             tr: tr,
-            syncBlockStore: syncBlockStore
+            syncBlockStore: syncBlockStore,
+            fireAnalyticsEvent: api === null || api === void 0 || (_api$analytics3 = api.analytics) === null || _api$analytics3 === void 0 ? void 0 : _api$analytics3.actions.fireAnalyticsEvent
           }) || null;
         };
       }
@@ -106,13 +113,15 @@ var syncedBlockPlugin = exports.syncedBlockPlugin = function syncedBlockPlugin(_
             });
           },
           action: function action(insert, state) {
+            var _api$analytics4;
             return (0, _editorCommands.createSyncedBlock)({
               tr: state.tr,
               syncBlockStore: syncBlockStore,
-              typeAheadInsert: insert
+              typeAheadInsert: insert,
+              fireAnalyticsEvent: api === null || api === void 0 || (_api$analytics4 = api.analytics) === null || _api$analytics4 === void 0 ? void 0 : _api$analytics4.actions.fireAnalyticsEvent
             });
           },
-          testId: (0, _platformFeatureFlags.fg)('platform_synced_block_dogfooding') ? 'create-synced-block-quick-insert-btn' : undefined
+          testId: (0, _platformFeatureFlags.fg)('platform_synced_block_dogfooding') ? _types.SYNCED_BLOCK_BUTTON_TEST_ID.quickInsertCreate : undefined
         }];
       },
       floatingToolbar: function floatingToolbar(state, intl) {

package/dist/cjs/types/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.FLAG_ID = exports.EXPERIENCE_ABORT_REASON = void 0;
+exports.SYNCED_BLOCK_BUTTON_TEST_ID = exports.FLAG_ID = void 0;
 var FLAG_ID = exports.FLAG_ID = /*#__PURE__*/function (FLAG_ID) {
   FLAG_ID["CANNOT_DELETE_WHEN_OFFLINE"] = "cannot-delete-when-offline";
   FLAG_ID["CANNOT_EDIT_WHEN_OFFLINE"] = "cannot-edit-when-offline";
@@ -12,6 +12,9 @@ var FLAG_ID = exports.FLAG_ID = /*#__PURE__*/function (FLAG_ID) {
   FLAG_ID["SYNC_BLOCK_COPIED"] = "sync-block-copied";
   return FLAG_ID;
 }({});
-var EXPERIENCE_ABORT_REASON = exports.EXPERIENCE_ABORT_REASON = {
-  EDITOR_DESTROYED: 'editor-destroyed'
+var SYNCED_BLOCK_BUTTON_TEST_ID = exports.SYNCED_BLOCK_BUTTON_TEST_ID = {
+  primaryToolbarCreate: 'create-synced-block-toolbar-btn',
+  blockMenuCreate: 'create-synced-block-block-menu-btn',
+  quickInsertCreate: 'create-synced-block-quick-insert-btn',
+  syncedBlockToolbarReferenceDelete: 'reference-synced-block-delete-btn'
 };

package/dist/cjs/ui/CreateSyncedBlockButton.js

@@ -14,6 +14,7 @@ var _editorPluginConnectivity = require("@atlaskit/editor-plugin-connectivity");
 var _editorToolbar = require("@atlaskit/editor-toolbar");
 var _blockSynced = _interopRequireDefault(require("@atlaskit/icon-lab/core/block-synced"));
 var _utils = require("../pm-plugins/utils/utils");
+var _types = require("../types");
 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); }
 var CreateSyncedBlockButton = exports.CreateSyncedBlockButton = function CreateSyncedBlockButton(_ref) {
   var api = _ref.api;
@@ -53,7 +54,7 @@ var CreateSyncedBlockButton = exports.CreateSyncedBlockButton = function CreateS
       label: ""
     }),
     isDisabled: isDisabled,
-    testId: "create-synced-block-toolbar-btn",
+    testId: _types.SYNCED_BLOCK_BUTTON_TEST_ID.primaryToolbarCreate,
     onClick: onClick
   }));
 };

package/dist/cjs/ui/CreateSyncedBlockDropdownItem.js

@@ -14,6 +14,7 @@ var _editorPluginConnectivity = require("@atlaskit/editor-plugin-connectivity");
 var _editorToolbar = require("@atlaskit/editor-toolbar");
 var _lozenge = _interopRequireDefault(require("@atlaskit/lozenge"));
 var _utils = require("../pm-plugins/utils/utils");
+var _types = require("../types");
 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); }
 var CreateSyncedBlockDropdownItem = function CreateSyncedBlockDropdownItem(_ref) {
   var api = _ref.api;
@@ -51,7 +52,7 @@ var CreateSyncedBlockDropdownItem = function CreateSyncedBlockDropdownItem(_ref)
     }),
     onClick: onClick,
     isDisabled: isOffline,
-    testId: "create-synced-block-block-menu-btn",
+    testId: _types.SYNCED_BLOCK_BUTTON_TEST_ID.blockMenuCreate,
     elemAfter: /*#__PURE__*/_react.default.createElement(_lozenge.default, {
       appearance: "new"
     }, formatMessage(_messages.blockMenuMessages.newLozenge))

package/dist/cjs/ui/SyncBlockRefresher.js

@@ -6,10 +6,14 @@ Object.defineProperty(exports, "__esModule", {
 exports.SyncBlockRefresher = exports.SYNC_BLOCK_FETCH_INTERVAL = void 0;
 var _react = require("react");
 var _hooks = require("@atlaskit/editor-common/hooks");
+var _editorPluginConnectivity = require("@atlaskit/editor-plugin-connectivity");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var SYNC_BLOCK_FETCH_INTERVAL = exports.SYNC_BLOCK_FETCH_INTERVAL = 3000;
 
-// Component that refreshes synced block subscriptions at regular intervals
-// this is a workaround for the subscription mechanism not being real-time
+// Component that manages synced block data synchronization.
+// When the feature flag 'platform_synced_block_dogfooding' is enabled,
+// it uses provider-based GraphQL subscriptions for updates.
+// When disabled, it falls back to polling at regular intervals.
 var SyncBlockRefresher = exports.SyncBlockRefresher = function SyncBlockRefresher(_ref) {
   var syncBlockStoreManager = _ref.syncBlockStoreManager,
     api = _ref.api;
@@ -20,9 +24,19 @@ var SyncBlockRefresher = exports.SyncBlockRefresher = function SyncBlockRefreshe
       };
     }),
     mode = _useSharedPluginState.mode;
+  var featureFlagEnabled = (0, _platformFeatureFlags.fg)('platform_synced_block_dogfooding');
+  var isOnline = !(0, _editorPluginConnectivity.isOfflineMode)(mode);
   (0, _react.useEffect)(function () {
+    var useRealTimeSubscriptions = featureFlagEnabled && isOnline;
+    syncBlockStoreManager.referenceManager.setRealTimeSubscriptionsEnabled(useRealTimeSubscriptions);
+  }, [syncBlockStoreManager, featureFlagEnabled, isOnline]);
+  (0, _react.useEffect)(function () {
+    var useRealTimeSubscriptions = featureFlagEnabled && isOnline;
+    if (useRealTimeSubscriptions) {
+      return;
+    }
     var interval = -1;
-    if (mode !== 'offline') {
+    if (isOnline) {
       interval = window.setInterval(function () {
         var _document;
         // check if document is visible to avoid unnecessary refreshes
@@ -36,6 +50,6 @@ var SyncBlockRefresher = exports.SyncBlockRefresher = function SyncBlockRefreshe
     return function () {
       window.clearInterval(interval);
     };
-  }, [syncBlockStoreManager, mode]);
+  }, [syncBlockStoreManager, isOnline, featureFlagEnabled]);
   return null;
 };

package/dist/cjs/ui/SyncedLocationDropdown.js

@@ -56,16 +56,17 @@ var styles = {
 var ItemTitle = function ItemTitle(_ref) {
   var title = _ref.title,
     formatMessage = _ref.formatMessage,
-    onSamePage = _ref.onSamePage,
+    onSameDocument = _ref.onSameDocument,
     isSource = _ref.isSource,
-    hasAccess = _ref.hasAccess;
+    hasAccess = _ref.hasAccess,
+    productType = _ref.productType;
   return /*#__PURE__*/React.createElement(_compiled.Inline, null, /*#__PURE__*/React.createElement(_compiled.Box, {
     as: "span",
     xcss: styles.title
-  }, title), onSamePage && /*#__PURE__*/React.createElement(_compiled.Box, {
+  }, title), onSameDocument && /*#__PURE__*/React.createElement(_compiled.Box, {
     as: "span",
     xcss: styles.note
-  }, "\xA0- ", formatMessage(_messages.syncBlockMessages.syncedLocationDropdownTitleNote)), isSource && /*#__PURE__*/React.createElement(_compiled.Box, {
+  }, "\xA0- ", formatMessage(productType === 'confluence-page' ? _messages.syncBlockMessages.syncedLocationDropdownTitleNoteForConfluencePage : _messages.syncBlockMessages.syncedLocationDropdownTitleNoteForJiraWorkItem)), isSource && /*#__PURE__*/React.createElement(_compiled.Box, {
     as: "span",
     xcss: styles.lozenge
   }, /*#__PURE__*/React.createElement(_lozenge.default, null, formatMessage(_messages.syncBlockMessages.syncedLocationDropdownSourceLozenge))), !hasAccess && /*#__PURE__*/React.createElement(_compiled.Box, {
@@ -82,7 +83,7 @@ var subTypeIconMap = {
   page: _page.default,
   blogpost: _quotationMark.default
 };
-var getSubTypeIcon = function getSubTypeIcon(subType) {
+var getConfluenceSubTypeIcon = function getConfluenceSubTypeIcon(subType) {
   return subType && subType in subTypeIconMap ? subTypeIconMap[subType] : _page.default;
 };
 var ProductIcon = function ProductIcon(_ref2) {
@@ -99,17 +100,18 @@ var ProductIcon = function ProductIcon(_ref2) {
 var ItemIcon = function ItemIcon(_ref3) {
   var reference = _ref3.reference;
   var hasAccess = reference.hasAccess,
-    subType = reference.subType;
-  if (hasAccess) {
+    subType = reference.subType,
+    productType = reference.productType;
+  if (productType === 'confluence-page' && hasAccess) {
     return /*#__PURE__*/React.createElement(_icon.IconTile, {
-      icon: getSubTypeIcon(subType),
+      icon: getConfluenceSubTypeIcon(subType),
       label: "",
       appearance: 'gray',
       size: "xsmall"
     });
   }
   return /*#__PURE__*/React.createElement(ProductIcon, {
-    product: reference.productType
+    product: productType
   });
 };
 var processReferenceData = exports.processReferenceData = function processReferenceData(referenceData, intl) {
@@ -277,9 +279,10 @@ var DropdownContent = function DropdownContent(_ref7) {
             }, /*#__PURE__*/React.createElement(ItemTitle, {
               title: reference.title || reference.url || '',
               formatMessage: formatMessage,
-              onSamePage: reference.onSamePage,
+              onSameDocument: reference.onSameDocument,
               isSource: reference.isSource,
-              hasAccess: reference.hasAccess
+              hasAccess: reference.hasAccess,
+              productType: reference.productType
             }))));
           })));
         } else {