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

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

@@ -1,14 +1,17 @@
 import React from 'react';
 import commonMessages, { syncBlockMessages as messages } from '@atlaskit/editor-common/messages';
+import { FloatingToolbarButton as Button } from '@atlaskit/editor-common/ui';
 import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
 import { akEditorSelectedNodeClassName } from '@atlaskit/editor-shared-styles/consts';
 import { SyncBlockError } from '@atlaskit/editor-synced-block-provider';
 import CopyIcon from '@atlaskit/icon/core/copy';
 import DeleteIcon from '@atlaskit/icon/core/delete';
 import EditIcon from '@atlaskit/icon/core/edit';
+import LinkBrokenIcon from '@atlaskit/icon/core/link-broken';
 import { fg } from '@atlaskit/platform-feature-flags';
-import { copySyncedBlockReferenceToClipboard, editSyncedBlockSource, removeSyncedBlock } from '../editor-commands';
+import { copySyncedBlockReferenceToClipboard, editSyncedBlockSource, removeSyncedBlock, unsync } from '../editor-commands';
 import { findSyncBlockOrBodiedSyncBlock, isBodiedSyncBlockNode } from '../pm-plugins/utils/utils';
+import { SYNCED_BLOCK_BUTTON_TEST_ID } from '../types';
 import { SyncedLocationDropdown } from './SyncedLocationDropdown';
 export const getToolbarConfig = (state, intl, api, syncBlockStore) => {
   var _api$decorations, _api$connectivity, _api$connectivity$sha;
@@ -49,7 +52,7 @@ export const getToolbarConfig = (state, intl, api, syncBlockStore) => {
       title: formatMessage(commonMessages.delete),
       onClick: removeSyncedBlock(api),
       icon: DeleteIcon,
-      testId: fg('platform_synced_block_dogfooding') ? 'reference-synced-block-delete-button' : undefined,
+      testId: fg('platform_synced_block_dogfooding') ? SYNCED_BLOCK_BUTTON_TEST_ID.syncedBlockToolbarReferenceDelete : undefined,
       ...hoverDecorationProps(nodeType, akEditorSelectedNodeClassName)
     };
     items.push(deleteButton);
@@ -68,7 +71,21 @@ export const getToolbarConfig = (state, intl, api, syncBlockStore) => {
           });
         }
       };
-      items.push(syncedLocation);
+      const unsyncButton = {
+        type: 'custom',
+        fallback: [],
+        render: view => {
+          return /*#__PURE__*/React.createElement(Button, {
+            areAnyNewToolbarFlagsEnabled: true,
+            icon: /*#__PURE__*/React.createElement(LinkBrokenIcon, {
+              label: ""
+            }),
+            title: formatMessage(messages.unsyncButton),
+            onClick: () => unsync(syncBlockStore, isBodiedSyncBlock, view)
+          });
+        }
+      };
+      items.push(syncedLocation, unsyncButton);
     }
     const copyButton = {
       id: 'editor.syncedBlock.copy',

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

@@ -1,15 +1,19 @@
+import { defaultSchema } from '@atlaskit/adf-schema/schema-default';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
 import { copyDomNode, toDOM } from '@atlaskit/editor-common/copy-button';
+import { DOMSerializer, Fragment } from '@atlaskit/editor-prosemirror/model';
 import { TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { findSelectedNodeOfType, removeParentNodeOfType, removeSelectedNode, safeInsert } from '@atlaskit/editor-prosemirror/utils';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { syncedBlockPluginKey } from '../pm-plugins/main';
 import { canBeConvertedToSyncBlock, findSyncBlock, findSyncBlockOrBodiedSyncBlock, isBodiedSyncBlockNode } from '../pm-plugins/utils/utils';
 import { FLAG_ID } from '../types';
+import { pasteSyncBlockHTMLContent } from './utils';
 export var 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;
@@ -35,9 +39,14 @@ export var createSyncedBlock = function createSyncedBlock(_ref) {
     var conversionInfo = canBeConvertedToSyncBlock(tr.selection);
     if (!conversionInfo) {
       if (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: ACTION.ERROR,
+          actionSubject: ACTION_SUBJECT.SYNCED_BLOCK,
+          actionSubjectId: ACTION_SUBJECT_ID.SYNCED_BLOCK_CREATE,
+          attributes: {
+            error: 'Content cannot be converted to sync block'
+          },
+          eventType: EVENT_TYPE.OPERATIONAL
         });
       }
       return false;
@@ -162,4 +171,33 @@ export var removeSyncedBlock = function removeSyncedBlock(api) {
     api === null || api === void 0 || api.core.actions.focus();
     return true;
   };
+};
+
+/**
+ * Deletes (bodied)SyncBlock node and paste its content to the editor
+ */
+export var unsync = function unsync(storeManager, isBodiedSyncBlock, view) {
+  var _storeManager$referen;
+  if (!view) {
+    return false;
+  }
+  var state = view.state;
+  var syncBlock = 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 = Fragment.fromJSON(defaultSchema, syncBlockContent);
+  var contentDOM = DOMSerializer.fromSchema(defaultSchema).serializeFragment(contentFragment);
+  return pasteSyncBlockHTMLContent(contentDOM, view);
 };

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

@@ -0,0 +1,14 @@
+export var 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/esm/pm-plugins/menu-and-toolbar-experiences.js

@@ -0,0 +1,260 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import { bind } from 'bind-event-listener';
+import { ACTION, ACTION_SUBJECT_ID } from '@atlaskit/editor-common/analytics';
+import { Experience, EXPERIENCE_ID, ExperienceCheckDomMutation, ExperienceCheckTimeout, getNodeQuery, getPopupContainerFromEditorView, popupWithNestedElement } from '@atlaskit/editor-common/experiences';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { PluginKey } from '@atlaskit/editor-prosemirror/state';
+import { SYNCED_BLOCK_BUTTON_TEST_ID } from '../types';
+var TIMEOUT_DURATION = 30000;
+var pluginKey = new PluginKey('syncedBlockMenuAndToolbarExperience');
+var SYNCED_BLOCK_BUTTON_TEST_IDS = Object.values(SYNCED_BLOCK_BUTTON_TEST_ID);
+var syncedBlockButtonIds = new Set(SYNCED_BLOCK_BUTTON_TEST_IDS);
+var targetEl;
+export var 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 || 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 = 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 = bind(document, {
+    type: 'keydown',
+    listener: function listener(event) {
+      if (isEnterKey(event.key)) {
+        var typeaheadPopup = 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 === SYNCED_BLOCK_BUTTON_TEST_ID.quickInsertCreate) {
+          createSourceQuickInsertMenuExperience.start();
+        }
+      }
+    },
+    options: {
+      capture: true
+    }
+  });
+  return new 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 Experience(EXPERIENCE_ID.TOOLBAR_ACTION, {
+    action: ACTION.SYNCED_BLOCK_CREATE,
+    actionSubjectId: ACTION_SUBJECT_ID.PRIMARY_TOOLBAR,
+    dispatchAnalyticsEvent: dispatchAnalyticsEvent,
+    checks: [new ExperienceCheckTimeout({
+      durationMs: TIMEOUT_DURATION
+    }), syncedBlockAddedToDomCheck(refs)]
+  });
+};
+var getCreateSourceBlockMenuExperience = function getCreateSourceBlockMenuExperience(_ref3) {
+  var refs = _ref3.refs,
+    dispatchAnalyticsEvent = _ref3.dispatchAnalyticsEvent;
+  return new Experience(EXPERIENCE_ID.MENU_ACTION, {
+    action: ACTION.SYNCED_BLOCK_CREATE,
+    actionSubjectId: ACTION_SUBJECT_ID.BLOCK_MENU,
+    dispatchAnalyticsEvent: dispatchAnalyticsEvent,
+    checks: [new ExperienceCheckTimeout({
+      durationMs: TIMEOUT_DURATION
+    }), syncedBlockAddedToDomCheck(refs)]
+  });
+};
+var getCreateSourceQuickInsertMenuExperience = function getCreateSourceQuickInsertMenuExperience(_ref4) {
+  var refs = _ref4.refs,
+    dispatchAnalyticsEvent = _ref4.dispatchAnalyticsEvent;
+  return new Experience(EXPERIENCE_ID.MENU_ACTION, {
+    action: ACTION.SYNCED_BLOCK_CREATE,
+    actionSubjectId: ACTION_SUBJECT_ID.QUICK_INSERT,
+    dispatchAnalyticsEvent: dispatchAnalyticsEvent,
+    checks: [new ExperienceCheckTimeout({
+      durationMs: TIMEOUT_DURATION
+    }), syncedBlockAddedToDomCheck(refs)]
+  });
+};
+var getDeleteReferenceSyncedBlockToolbarExperience = function getDeleteReferenceSyncedBlockToolbarExperience(_ref5) {
+  var refs = _ref5.refs,
+    dispatchAnalyticsEvent = _ref5.dispatchAnalyticsEvent;
+  return new Experience(EXPERIENCE_ID.TOOLBAR_ACTION, {
+    action: ACTION.REFERENCE_SYNCED_BLOCK_DELETE,
+    actionSubjectId: ACTION_SUBJECT_ID.SYNCED_BLOCK_TOOLBAR,
+    dispatchAnalyticsEvent: dispatchAnalyticsEvent,
+    checks: [new 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 SYNCED_BLOCK_BUTTON_TEST_ID.primaryToolbarCreate:
+      createSourcePrimaryToolbarExperience.start();
+      break;
+    case SYNCED_BLOCK_BUTTON_TEST_ID.blockMenuCreate:
+      createSourceBlockMenuExperience.start();
+      break;
+    case SYNCED_BLOCK_BUTTON_TEST_ID.quickInsertCreate:
+      createSourceQuickInsertMenuExperience.start();
+      break;
+    case 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 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' && _toConsumableArray(addedNodes).some(isBodiedSyncBlockWithinNode);
+};
+var isBodiedSyncBlockWithinNode = function isBodiedSyncBlockWithinNode(node) {
+  return getNodeQuery('[data-prosemirror-node-name="bodiedSyncBlock"]')(node);
+};
+var referenceSyncBlockRemovedFromDomCheck = function referenceSyncBlockRemovedFromDomCheck(refs) {
+  return new 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' && _toConsumableArray(removedNodes).some(isSyncBlockWithinNode);
+};
+var isSyncBlockWithinNode = function isSyncBlockWithinNode(node) {
+  return getNodeQuery('[data-prosemirror-node-name="syncBlock"]')(node);
+};

package/dist/esm/syncedBlockPlugin.js

@@ -8,8 +8,9 @@ import Lozenge from '@atlaskit/lozenge';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { flushBodiedSyncBlocks as _flushBodiedSyncBlocks, flushSyncBlocks } from './editor-actions';
 import { copySyncedBlockReferenceToClipboardEditorCommand, createSyncedBlock } from './editor-commands';
-import { getExperienceTrackingPlugins } from './pm-plugins/experience-tracking/get-experience-tracking-plugins';
 import { createPlugin, syncedBlockPluginKey } from './pm-plugins/main';
+import { getMenuAndToolbarExperiencesPlugin } from './pm-plugins/menu-and-toolbar-experiences';
+import { SYNCED_BLOCK_BUTTON_TEST_ID } from './types';
 import { getBlockMenuComponents } from './ui/block-menu-components';
 import { DeleteConfirmationModal } from './ui/DeleteConfirmationModal';
 import { Flag } from './ui/Flag';
@@ -42,14 +43,18 @@ export var syncedBlockPlugin = function syncedBlockPlugin(_ref) {
         plugin: function plugin(params) {
           return createPlugin(config, params, syncBlockStore, api);
         }
-      }].concat(_toConsumableArray(fg('platform_synced_block_dogfooding') ? 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(_toConsumableArray(fg('platform_synced_block_dogfooding') ? [{
+        name: 'menuAndToolbarExperiencesPlugin',
+        plugin: function plugin() {
+          return 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() {
@@ -57,13 +62,15 @@ export var syncedBlockPlugin = function syncedBlockPlugin(_ref) {
       },
       insertSyncedBlock: function insertSyncedBlock() {
         return function (_ref2) {
+          var _api$analytics3;
           var tr = _ref2.tr;
           if (!(config !== null && config !== void 0 && config.enableSourceCreation)) {
             return null;
           }
           return 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;
         };
       }
@@ -99,13 +106,15 @@ export var syncedBlockPlugin = function syncedBlockPlugin(_ref) {
             });
           },
           action: function action(insert, state) {
+            var _api$analytics4;
             return 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: fg('platform_synced_block_dogfooding') ? 'create-synced-block-quick-insert-btn' : undefined
+          testId: fg('platform_synced_block_dogfooding') ? SYNCED_BLOCK_BUTTON_TEST_ID.quickInsertCreate : undefined
         }];
       },
       floatingToolbar: function floatingToolbar(state, intl) {

package/dist/esm/types/index.js

@@ -6,6 +6,9 @@ export var FLAG_ID = /*#__PURE__*/function (FLAG_ID) {
   FLAG_ID["SYNC_BLOCK_COPIED"] = "sync-block-copied";
   return FLAG_ID;
 }({});
-export var EXPERIENCE_ABORT_REASON = {
-  EDITOR_DESTROYED: 'editor-destroyed'
+export var 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/esm/ui/CreateSyncedBlockButton.js

@@ -6,6 +6,7 @@ import { isOfflineMode } from '@atlaskit/editor-plugin-connectivity';
 import { ToolbarButton, ToolbarTooltip } from '@atlaskit/editor-toolbar';
 import BlockSyncedIcon from '@atlaskit/icon-lab/core/block-synced';
 import { canBeConvertedToSyncBlock } from '../pm-plugins/utils/utils';
+import { SYNCED_BLOCK_BUTTON_TEST_ID } from '../types';
 export var CreateSyncedBlockButton = function CreateSyncedBlockButton(_ref) {
   var api = _ref.api;
   var intl = useIntl();
@@ -44,7 +45,7 @@ export var CreateSyncedBlockButton = function CreateSyncedBlockButton(_ref) {
       label: ""
     }),
     isDisabled: isDisabled,
-    testId: "create-synced-block-toolbar-btn",
+    testId: SYNCED_BLOCK_BUTTON_TEST_ID.primaryToolbarCreate,
     onClick: onClick
   }));
 };

package/dist/esm/ui/CreateSyncedBlockDropdownItem.js

@@ -6,6 +6,7 @@ import { isOfflineMode } from '@atlaskit/editor-plugin-connectivity';
 import { SyncBlocksIcon, ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
 import Lozenge from '@atlaskit/lozenge';
 import { canBeConvertedToSyncBlock } from '../pm-plugins/utils/utils';
+import { SYNCED_BLOCK_BUTTON_TEST_ID } from '../types';
 var CreateSyncedBlockDropdownItem = function CreateSyncedBlockDropdownItem(_ref) {
   var api = _ref.api;
   var _useIntl = useIntl(),
@@ -42,7 +43,7 @@ var CreateSyncedBlockDropdownItem = function CreateSyncedBlockDropdownItem(_ref)
     }),
     onClick: onClick,
     isDisabled: isOffline,
-    testId: "create-synced-block-block-menu-btn",
+    testId: SYNCED_BLOCK_BUTTON_TEST_ID.blockMenuCreate,
     elemAfter: /*#__PURE__*/React.createElement(Lozenge, {
       appearance: "new"
     }, formatMessage(blockMenuMessages.newLozenge))

package/dist/esm/ui/SyncBlockRefresher.js

@@ -1,9 +1,13 @@
 import { useEffect } from 'react';
 import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
+import { isOfflineMode } from '@atlaskit/editor-plugin-connectivity';
+import { fg } from '@atlaskit/platform-feature-flags';
 export var 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.
 export var SyncBlockRefresher = function SyncBlockRefresher(_ref) {
   var syncBlockStoreManager = _ref.syncBlockStoreManager,
     api = _ref.api;
@@ -14,9 +18,19 @@ export var SyncBlockRefresher = function SyncBlockRefresher(_ref) {
       };
     }),
     mode = _useSharedPluginState.mode;
+  var featureFlagEnabled = fg('platform_synced_block_dogfooding');
+  var isOnline = !isOfflineMode(mode);
   useEffect(function () {
+    var useRealTimeSubscriptions = featureFlagEnabled && isOnline;
+    syncBlockStoreManager.referenceManager.setRealTimeSubscriptionsEnabled(useRealTimeSubscriptions);
+  }, [syncBlockStoreManager, featureFlagEnabled, isOnline]);
+  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
@@ -30,6 +44,6 @@ export var SyncBlockRefresher = function SyncBlockRefresher(_ref) {
     return function () {
       window.clearInterval(interval);
     };
-  }, [syncBlockStoreManager, mode]);
+  }, [syncBlockStoreManager, isOnline, featureFlagEnabled]);
   return null;
 };

package/dist/esm/ui/SyncedLocationDropdown.js

@@ -47,16 +47,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(Inline, null, /*#__PURE__*/React.createElement(Box, {
     as: "span",
     xcss: styles.title
-  }, title), onSamePage && /*#__PURE__*/React.createElement(Box, {
+  }, title), onSameDocument && /*#__PURE__*/React.createElement(Box, {
     as: "span",
     xcss: styles.note
-  }, "\xA0- ", formatMessage(messages.syncedLocationDropdownTitleNote)), isSource && /*#__PURE__*/React.createElement(Box, {
+  }, "\xA0- ", formatMessage(productType === 'confluence-page' ? messages.syncedLocationDropdownTitleNoteForConfluencePage : messages.syncedLocationDropdownTitleNoteForJiraWorkItem)), isSource && /*#__PURE__*/React.createElement(Box, {
     as: "span",
     xcss: styles.lozenge
   }, /*#__PURE__*/React.createElement(Lozenge, null, formatMessage(messages.syncedLocationDropdownSourceLozenge))), !hasAccess && /*#__PURE__*/React.createElement(Box, {
@@ -73,7 +74,7 @@ var subTypeIconMap = {
   page: PageIcon,
   blogpost: QuotationMarkIcon
 };
-var getSubTypeIcon = function getSubTypeIcon(subType) {
+var getConfluenceSubTypeIcon = function getConfluenceSubTypeIcon(subType) {
   return subType && subType in subTypeIconMap ? subTypeIconMap[subType] : PageIcon;
 };
 var ProductIcon = function ProductIcon(_ref2) {
@@ -90,17 +91,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(IconTile, {
-      icon: getSubTypeIcon(subType),
+      icon: getConfluenceSubTypeIcon(subType),
       label: "",
       appearance: 'gray',
       size: "xsmall"
     });
   }
   return /*#__PURE__*/React.createElement(ProductIcon, {
-    product: reference.productType
+    product: productType
   });
 };
 export var processReferenceData = function processReferenceData(referenceData, intl) {
@@ -268,9 +270,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 {