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

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

@@ -9,15 +9,18 @@ exports.getToolbarConfig = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
 var _messages = _interopRequireWildcard(require("@atlaskit/editor-common/messages"));
+var _ui = require("@atlaskit/editor-common/ui");
 var _utils = require("@atlaskit/editor-prosemirror/utils");
 var _consts = require("@atlaskit/editor-shared-styles/consts");
 var _editorSyncedBlockProvider = require("@atlaskit/editor-synced-block-provider");
 var _copy = _interopRequireDefault(require("@atlaskit/icon/core/copy"));
 var _delete = _interopRequireDefault(require("@atlaskit/icon/core/delete"));
 var _edit = _interopRequireDefault(require("@atlaskit/icon/core/edit"));
+var _linkBroken = _interopRequireDefault(require("@atlaskit/icon/core/link-broken"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _editorCommands = require("../editor-commands");
 var _utils2 = require("../pm-plugins/utils/utils");
+var _types = require("../types");
 var _SyncedLocationDropdown = require("./SyncedLocationDropdown");
 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; }
@@ -54,7 +57,7 @@ var getToolbarConfig = exports.getToolbarConfig = function getToolbarConfig(stat
       title: formatMessage(_messages.default.delete),
       onClick: (0, _editorCommands.removeSyncedBlock)(api),
       icon: _delete.default,
-      testId: (0, _platformFeatureFlags.fg)('platform_synced_block_dogfooding') ? 'reference-synced-block-delete-button' : undefined
+      testId: (0, _platformFeatureFlags.fg)('platform_synced_block_dogfooding') ? _types.SYNCED_BLOCK_BUTTON_TEST_ID.syncedBlockToolbarReferenceDelete : undefined
     }, hoverDecorationProps(nodeType, _consts.akEditorSelectedNodeClassName));
     items.push(deleteButton);
   } else {
@@ -72,7 +75,23 @@ var getToolbarConfig = exports.getToolbarConfig = function getToolbarConfig(stat
           });
         }
       };
-      items.push(syncedLocation);
+      var unsyncButton = {
+        type: 'custom',
+        fallback: [],
+        render: function render(view) {
+          return /*#__PURE__*/_react.default.createElement(_ui.FloatingToolbarButton, {
+            areAnyNewToolbarFlagsEnabled: true,
+            icon: /*#__PURE__*/_react.default.createElement(_linkBroken.default, {
+              label: ""
+            }),
+            title: formatMessage(_messages.syncBlockMessages.unsyncButton),
+            onClick: function onClick() {
+              return (0, _editorCommands.unsync)(syncBlockStore, isBodiedSyncBlock, view);
+            }
+          });
+        }
+      };
+      items.push(syncedLocation, unsyncButton);
     }
     var copyButton = _objectSpread({
       id: 'editor.syncedBlock.copy',

package/dist/es2019/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 const createSyncedBlock = ({
   tr,
   syncBlockStore,
-  typeAheadInsert
+  typeAheadInsert,
+  fireAnalyticsEvent
 }) => {
   const {
     schema: {
@@ -41,9 +45,14 @@ export const createSyncedBlock = ({
     const 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 ? void 0 : _syncBlockStore$sourc.failure({
-          reason: 'Selection is not allowed to be converted to sync block'
+        fireAnalyticsEvent === null || fireAnalyticsEvent === void 0 ? 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;
@@ -170,4 +179,35 @@ export const removeSyncedBlock = api => (state, dispatch, _view) => {
   dispatch(removeTr);
   api === null || api === void 0 ? void 0 : api.core.actions.focus();
   return true;
+};
+
+/**
+ * Deletes (bodied)SyncBlock node and paste its content to the editor
+ */
+export const unsync = (storeManager, isBodiedSyncBlock, view) => {
+  var _storeManager$referen, _storeManager$referen2;
+  if (!view) {
+    return false;
+  }
+  const {
+    state
+  } = view;
+  const syncBlock = findSyncBlockOrBodiedSyncBlock(state.schema, state.selection);
+  if (!syncBlock) {
+    return false;
+  }
+  if (isBodiedSyncBlock) {
+    return true;
+  }
+
+  // handle syncBlock unsync
+  const syncBlockContent = (_storeManager$referen = storeManager.referenceManager.getFromCache(syncBlock.node.attrs.resourceId)) === null || _storeManager$referen === void 0 ? void 0 : (_storeManager$referen2 = _storeManager$referen.data) === null || _storeManager$referen2 === void 0 ? void 0 : _storeManager$referen2.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
+  const contentFragment = Fragment.fromJSON(defaultSchema, syncBlockContent);
+  const contentDOM = DOMSerializer.fromSchema(defaultSchema).serializeFragment(contentFragment);
+  return pasteSyncBlockHTMLContent(contentDOM, view);
 };

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

@@ -0,0 +1,14 @@
+export const pasteSyncBlockHTMLContent = (contentDOM, view) => {
+  const 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/es2019/pm-plugins/menu-and-toolbar-experiences.js

@@ -0,0 +1,261 @@
+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';
+const TIMEOUT_DURATION = 30000;
+const pluginKey = new PluginKey('syncedBlockMenuAndToolbarExperience');
+const SYNCED_BLOCK_BUTTON_TEST_IDS = Object.values(SYNCED_BLOCK_BUTTON_TEST_ID);
+const syncedBlockButtonIds = new Set(SYNCED_BLOCK_BUTTON_TEST_IDS);
+let targetEl;
+export const getMenuAndToolbarExperiencesPlugin = ({
+  refs,
+  dispatchAnalyticsEvent
+}) => {
+  let popupsTargetEl;
+  let editorViewEl;
+  const getPopupsTarget = () => {
+    if (!popupsTargetEl) {
+      popupsTargetEl = refs.popupsMountPoint || refs.wrapperElement || getPopupContainerFromEditorView(editorViewEl);
+    }
+    return popupsTargetEl;
+  };
+  const createSourcePrimaryToolbarExperience = getCreateSourcePrimaryToolbarExperience({
+    refs,
+    dispatchAnalyticsEvent
+  });
+  const createSourceBlockMenuExperience = getCreateSourceBlockMenuExperience({
+    refs,
+    dispatchAnalyticsEvent
+  });
+  const createSourceQuickInsertMenuExperience = getCreateSourceQuickInsertMenuExperience({
+    refs,
+    dispatchAnalyticsEvent
+  });
+  const deleteReferenceSyncedBlockExperience = getDeleteReferenceSyncedBlockToolbarExperience({
+    refs,
+    dispatchAnalyticsEvent
+  });
+  const unbindClickListener = bind(document, {
+    type: 'click',
+    listener: event => {
+      const target = event.target;
+      if (!target) {
+        return;
+      }
+      const button = target.closest('button[data-testid]');
+      if (!button || !(button instanceof HTMLButtonElement)) {
+        return;
+      }
+      const testId = button.dataset.testid;
+      if (!isSyncedBlockButtonId(testId)) {
+        return;
+      }
+      handleButtonClick({
+        testId,
+        createSourcePrimaryToolbarExperience,
+        createSourceBlockMenuExperience,
+        createSourceQuickInsertMenuExperience,
+        deleteReferenceSyncedBlockExperience
+      });
+    }
+  });
+  const unbindKeydownListener = bind(document, {
+    type: 'keydown',
+    listener: event => {
+      if (isEnterKey(event.key)) {
+        const typeaheadPopup = popupWithNestedElement(getPopupsTarget(), '.fabric-editor-typeahead');
+        if (!typeaheadPopup || !(typeaheadPopup instanceof HTMLElement)) {
+          return;
+        }
+        const firstItem = typeaheadPopup.querySelector('[role="option"]');
+        if (!firstItem || !(firstItem instanceof HTMLElement)) {
+          return;
+        }
+        const testId = firstItem.dataset.testid;
+        if (testId === SYNCED_BLOCK_BUTTON_TEST_ID.quickInsertCreate) {
+          createSourceQuickInsertMenuExperience.start();
+        }
+      }
+    },
+    options: {
+      capture: true
+    }
+  });
+  return new SafePlugin({
+    key: pluginKey,
+    view: editorView => {
+      editorViewEl = editorView.dom;
+      return {
+        destroy: () => {
+          createSourcePrimaryToolbarExperience.abort({
+            reason: 'editor-destroyed'
+          });
+          createSourceBlockMenuExperience.abort({
+            reason: 'editor-destroyed'
+          });
+          createSourceQuickInsertMenuExperience.abort({
+            reason: 'editor-destroyed'
+          });
+          deleteReferenceSyncedBlockExperience.abort({
+            reason: 'editor-destroyed'
+          });
+          unbindClickListener();
+          unbindKeydownListener();
+        }
+      };
+    }
+  });
+};
+const getCreateSourcePrimaryToolbarExperience = ({
+  refs,
+  dispatchAnalyticsEvent
+}) => {
+  return new Experience(EXPERIENCE_ID.TOOLBAR_ACTION, {
+    action: ACTION.SYNCED_BLOCK_CREATE,
+    actionSubjectId: ACTION_SUBJECT_ID.PRIMARY_TOOLBAR,
+    dispatchAnalyticsEvent,
+    checks: [new ExperienceCheckTimeout({
+      durationMs: TIMEOUT_DURATION
+    }), syncedBlockAddedToDomCheck(refs)]
+  });
+};
+const getCreateSourceBlockMenuExperience = ({
+  refs,
+  dispatchAnalyticsEvent
+}) => {
+  return new Experience(EXPERIENCE_ID.MENU_ACTION, {
+    action: ACTION.SYNCED_BLOCK_CREATE,
+    actionSubjectId: ACTION_SUBJECT_ID.BLOCK_MENU,
+    dispatchAnalyticsEvent,
+    checks: [new ExperienceCheckTimeout({
+      durationMs: TIMEOUT_DURATION
+    }), syncedBlockAddedToDomCheck(refs)]
+  });
+};
+const getCreateSourceQuickInsertMenuExperience = ({
+  refs,
+  dispatchAnalyticsEvent
+}) => {
+  return new Experience(EXPERIENCE_ID.MENU_ACTION, {
+    action: ACTION.SYNCED_BLOCK_CREATE,
+    actionSubjectId: ACTION_SUBJECT_ID.QUICK_INSERT,
+    dispatchAnalyticsEvent,
+    checks: [new ExperienceCheckTimeout({
+      durationMs: TIMEOUT_DURATION
+    }), syncedBlockAddedToDomCheck(refs)]
+  });
+};
+const getDeleteReferenceSyncedBlockToolbarExperience = ({
+  refs,
+  dispatchAnalyticsEvent
+}) => {
+  return new Experience(EXPERIENCE_ID.TOOLBAR_ACTION, {
+    action: ACTION.REFERENCE_SYNCED_BLOCK_DELETE,
+    actionSubjectId: ACTION_SUBJECT_ID.SYNCED_BLOCK_TOOLBAR,
+    dispatchAnalyticsEvent,
+    checks: [new ExperienceCheckTimeout({
+      durationMs: TIMEOUT_DURATION
+    }), referenceSyncBlockRemovedFromDomCheck(refs)]
+  });
+};
+const isSyncedBlockButtonId = value => {
+  return !!value && syncedBlockButtonIds.has(value);
+};
+const handleButtonClick = ({
+  testId,
+  createSourcePrimaryToolbarExperience,
+  createSourceBlockMenuExperience,
+  createSourceQuickInsertMenuExperience,
+  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.
+        const _exhaustiveCheck = testId;
+        return _exhaustiveCheck;
+      }
+  }
+};
+const isEnterKey = key => {
+  return key === 'Enter';
+};
+const getTarget = containerElement => {
+  if (!targetEl) {
+    const element = containerElement === null || containerElement === void 0 ? void 0 : containerElement.querySelector('.ProseMirror');
+    if (!element || !(element instanceof HTMLElement)) {
+      return null;
+    }
+    targetEl = element;
+  }
+  return targetEl;
+};
+const syncedBlockAddedToDomCheck = refs => new ExperienceCheckDomMutation({
+  onDomMutation: ({
+    mutations
+  }) => {
+    if (mutations.some(isBodiedSyncBlockAddedInMutation)) {
+      return {
+        status: 'success'
+      };
+    }
+    return undefined;
+  },
+  observeConfig: () => {
+    return {
+      target: getTarget(refs.containerElement),
+      options: {
+        childList: true
+      }
+    };
+  }
+});
+const isBodiedSyncBlockAddedInMutation = ({
+  type,
+  addedNodes
+}) => {
+  return type === 'childList' && [...addedNodes].some(isBodiedSyncBlockWithinNode);
+};
+const isBodiedSyncBlockWithinNode = node => getNodeQuery('[data-prosemirror-node-name="bodiedSyncBlock"]')(node);
+const referenceSyncBlockRemovedFromDomCheck = refs => new ExperienceCheckDomMutation({
+  onDomMutation: ({
+    mutations
+  }) => {
+    if (mutations.some(isSyncBlockRemovedInMutation)) {
+      return {
+        status: 'success'
+      };
+    }
+    return undefined;
+  },
+  observeConfig: () => {
+    return {
+      target: getTarget(refs.containerElement),
+      options: {
+        childList: true
+      }
+    };
+  }
+});
+const isSyncBlockRemovedInMutation = ({
+  type,
+  removedNodes
+}) => {
+  return type === 'childList' && [...removedNodes].some(isSyncBlockWithinNode);
+};
+const isSyncBlockWithinNode = node => getNodeQuery('[data-prosemirror-node-name="syncBlock"]')(node);

package/dist/es2019/syncedBlockPlugin.js

@@ -7,8 +7,9 @@ import Lozenge from '@atlaskit/lozenge';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { 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';
@@ -40,26 +41,30 @@ export const syncedBlockPlugin = ({
       return [{
         name: 'syncedBlockPlugin',
         plugin: params => createPlugin(config, params, syncBlockStore, api)
-      }, ...(fg('platform_synced_block_dogfooding') ? getExperienceTrackingPlugins({
-        refs,
-        dispatchAnalyticsEvent: payload => {
-          var _api$analytics2;
-          return api === null || api === void 0 ? void 0 : (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions.fireAnalyticsEvent(payload);
-        },
-        syncBlockStore
-      }) : [])];
+      }, ...(fg('platform_synced_block_dogfooding') ? [{
+        name: 'menuAndToolbarExperiencesPlugin',
+        plugin: () => getMenuAndToolbarExperiencesPlugin({
+          refs,
+          dispatchAnalyticsEvent: payload => {
+            var _api$analytics2, _api$analytics2$actio;
+            return api === null || api === void 0 ? void 0 : (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : (_api$analytics2$actio = _api$analytics2.actions) === null || _api$analytics2$actio === void 0 ? void 0 : _api$analytics2$actio.fireAnalyticsEvent(payload);
+          }
+        })
+      }] : [])];
     },
     commands: {
       copySyncedBlockReferenceToClipboard: () => copySyncedBlockReferenceToClipboardEditorCommand(syncBlockStore, api),
       insertSyncedBlock: () => ({
         tr
       }) => {
+        var _api$analytics3;
         if (!(config !== null && config !== void 0 && config.enableSourceCreation)) {
           return null;
         }
         return createSyncedBlock({
           tr,
-          syncBlockStore
+          syncBlockStore,
+          fireAnalyticsEvent: api === null || api === void 0 ? void 0 : (_api$analytics3 = api.analytics) === null || _api$analytics3 === void 0 ? void 0 : _api$analytics3.actions.fireAnalyticsEvent
         }) || null;
       }
     },
@@ -93,13 +98,15 @@ export const syncedBlockPlugin = ({
             label: formatMessage(blockTypeMessages.syncedBlock)
           }),
           action: (insert, state) => {
+            var _api$analytics4;
             return createSyncedBlock({
               tr: state.tr,
               syncBlockStore,
-              typeAheadInsert: insert
+              typeAheadInsert: insert,
+              fireAnalyticsEvent: api === null || api === void 0 ? 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: (state, intl) => getToolbarConfig(state, intl, api, syncBlockStore)

package/dist/es2019/types/index.js

@@ -6,6 +6,9 @@ export let FLAG_ID = /*#__PURE__*/function (FLAG_ID) {
   FLAG_ID["SYNC_BLOCK_COPIED"] = "sync-block-copied";
   return FLAG_ID;
 }({});
-export const EXPERIENCE_ABORT_REASON = {
-  EDITOR_DESTROYED: 'editor-destroyed'
+export const 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/es2019/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 const CreateSyncedBlockButton = ({
   api
 }) => {
@@ -45,7 +46,7 @@ export const CreateSyncedBlockButton = ({
       label: ""
     }),
     isDisabled: isDisabled,
-    testId: "create-synced-block-toolbar-btn",
+    testId: SYNCED_BLOCK_BUTTON_TEST_ID.primaryToolbarCreate,
     onClick: onClick
   }));
 };

package/dist/es2019/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';
 const CreateSyncedBlockDropdownItem = ({
   api
 }) => {
@@ -43,7 +44,7 @@ const CreateSyncedBlockDropdownItem = ({
     }),
     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/es2019/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 const 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 const SyncBlockRefresher = ({
   syncBlockStoreManager,
   api
@@ -16,9 +20,19 @@ export const SyncBlockRefresher = ({
       mode: (_states$connectivityS = states.connectivityState) === null || _states$connectivityS === void 0 ? void 0 : _states$connectivityS.mode
     };
   });
+  const featureFlagEnabled = fg('platform_synced_block_dogfooding');
+  const isOnline = !isOfflineMode(mode);
   useEffect(() => {
+    const useRealTimeSubscriptions = featureFlagEnabled && isOnline;
+    syncBlockStoreManager.referenceManager.setRealTimeSubscriptionsEnabled(useRealTimeSubscriptions);
+  }, [syncBlockStoreManager, featureFlagEnabled, isOnline]);
+  useEffect(() => {
+    const useRealTimeSubscriptions = featureFlagEnabled && isOnline;
+    if (useRealTimeSubscriptions) {
+      return;
+    }
     let interval = -1;
-    if (mode !== 'offline') {
+    if (isOnline) {
       interval = window.setInterval(() => {
         var _document;
         // check if document is visible to avoid unnecessary refreshes
@@ -32,6 +46,6 @@ export const SyncBlockRefresher = ({
     return () => {
       window.clearInterval(interval);
     };
-  }, [syncBlockStoreManager, mode]);
+  }, [syncBlockStoreManager, isOnline, featureFlagEnabled]);
   return null;
 };

package/dist/es2019/ui/SyncedLocationDropdown.js

@@ -39,17 +39,18 @@ const styles = {
 const ItemTitle = ({
   title,
   formatMessage,
-  onSamePage,
+  onSameDocument,
   isSource,
-  hasAccess
+  hasAccess,
+  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, {
@@ -66,7 +67,7 @@ const subTypeIconMap = {
   page: PageIcon,
   blogpost: QuotationMarkIcon
 };
-const getSubTypeIcon = subType => {
+const getConfluenceSubTypeIcon = subType => {
   return subType && subType in subTypeIconMap ? subTypeIconMap[subType] : PageIcon;
 };
 const ProductIcon = ({
@@ -86,18 +87,19 @@ const ItemIcon = ({
 }) => {
   const {
     hasAccess,
-    subType
+    subType,
+    productType
   } = reference;
-  if (hasAccess) {
+  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 const processReferenceData = (referenceData, intl) => {
@@ -230,9 +232,10 @@ const DropdownContent = ({
           }, /*#__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 {
           return /*#__PURE__*/React.createElement(NoResultScreen, {