@atlaskit/editor-plugin-synced-block 5.3.10 → 5.3.12

package/dist/cjs/ui/SyncedLocationDropdown.js

@@ -18,6 +18,7 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react2 = require("@compiled/react");
 var _dropdownMenu = _interopRequireWildcard(require("@atlaskit/dropdown-menu"));
+var _analytics = require("@atlaskit/editor-common/analytics");
 var _messages = require("@atlaskit/editor-common/messages");
 var _ui = require("@atlaskit/editor-common/ui");
 var _icon = require("@atlaskit/icon");
@@ -28,6 +29,7 @@ var _quotationMark = _interopRequireDefault(require("@atlaskit/icon/core/quotati
 var _statusError = _interopRequireDefault(require("@atlaskit/icon/core/status-error"));
 var _logo = require("@atlaskit/logo");
 var _lozenge = _interopRequireDefault(require("@atlaskit/lozenge"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _compiled = require("@atlaskit/primitives/compiled");
 var _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
@@ -168,7 +170,8 @@ var SyncedLocationDropdown = exports.SyncedLocationDropdown = function SyncedLoc
     resourceId = _ref4.resourceId,
     intl = _ref4.intl,
     isSource = _ref4.isSource,
-    localId = _ref4.localId;
+    localId = _ref4.localId,
+    api = _ref4.api;
   var formatMessage = intl.formatMessage;
   var triggerTitle = formatMessage(_messages.syncBlockMessages.syncedLocationDropdownTitle);
   var _useState = (0, _react.useState)(false),
@@ -181,12 +184,14 @@ var SyncedLocationDropdown = exports.SyncedLocationDropdown = function SyncedLoc
       var isOpen = _ref5.isOpen;
       return setIsOpen(isOpen);
     },
+    testId: (0, _platformFeatureFlags.fg)('platform_synced_block_patch_1') ? 'synced-block-synced-locations-dropdown' : undefined,
     trigger: function trigger(_ref6) {
       var triggerRef = _ref6.triggerRef,
         triggerProps = (0, _objectWithoutProperties2.default)(_ref6, _excluded);
       return /*#__PURE__*/React.createElement(_ui.FloatingToolbarButton, (0, _extends2.default)({
         ref: triggerRef,
         areAnyNewToolbarFlagsEnabled: true,
+        selected: (0, _platformFeatureFlags.fg)('platform_synced_block_patch_1') ? isOpen : undefined,
         iconAfter: /*#__PURE__*/React.createElement(_chevronDown.default, {
           color: "currentColor",
           spacing: "spacious",
@@ -201,7 +206,8 @@ var SyncedLocationDropdown = exports.SyncedLocationDropdown = function SyncedLoc
     resourceId: resourceId,
     intl: intl,
     isSource: isSource,
-    localId: localId
+    localId: localId,
+    api: api
   }));
 };
 var DropdownContent = function DropdownContent(_ref7) {
@@ -209,7 +215,8 @@ var DropdownContent = function DropdownContent(_ref7) {
     resourceId = _ref7.resourceId,
     intl = _ref7.intl,
     isSource = _ref7.isSource,
-    localId = _ref7.localId;
+    localId = _ref7.localId,
+    api = _ref7.api;
   var formatMessage = intl.formatMessage;
   var _useState3 = (0, _react.useState)('none'),
     _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
@@ -252,6 +259,20 @@ var DropdownContent = function DropdownContent(_ref7) {
     }();
     getReferenceData();
   }, [syncBlockStore, intl, isSource, localId, resourceId]);
+  var handleLocationClick = function handleLocationClick() {
+    if ((0, _platformFeatureFlags.fg)('platform_synced_block_patch_1')) {
+      var _api$analytics;
+      api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 || (_api$analytics = _api$analytics.actions) === null || _api$analytics === void 0 || _api$analytics.fireAnalyticsEvent({
+        eventType: _analytics.EVENT_TYPE.OPERATIONAL,
+        action: _analytics.ACTION.CLICKED,
+        actionSubject: _analytics.ACTION_SUBJECT.SYNCED_BLOCK,
+        actionSubjectId: _analytics.ACTION_SUBJECT_ID.SYNCED_BLOCK_CLICK_SYNCED_LOCATION,
+        attributes: {
+          resourceId: resourceId
+        }
+      });
+    }
+  };
   var content = function content() {
     switch (fetchStatus) {
       case 'loading':
@@ -281,7 +302,10 @@ var DropdownContent = function DropdownContent(_ref7) {
               }),
               href: reference.url,
               target: "_blank",
-              key: reference.title
+              key: reference.title,
+              onClick: function onClick() {
+                return handleLocationClick();
+              }
             }, /*#__PURE__*/React.createElement(ItemTitle, {
               title: reference.title || reference.url || '',
               formatMessage: formatMessage,
@@ -308,7 +332,8 @@ var LoadingScreen = function LoadingScreen() {
 var ErrorScreen = function ErrorScreen(_ref9) {
   var formatMessage = _ref9.formatMessage;
   return /*#__PURE__*/React.createElement(_compiled.Box, {
-    xcss: styles.errorContainer
+    xcss: styles.errorContainer,
+    testId: (0, _platformFeatureFlags.fg)('platform_synced_block_patch_1') ? 'synced-locations-dropdown-content-error' : undefined
   }, /*#__PURE__*/React.createElement(_compiled.Box, {
     xcss: styles.errorIcon
   }, /*#__PURE__*/React.createElement(_statusError.default, {
@@ -325,7 +350,8 @@ var NoResultScreen = function NoResultScreen(_ref0) {
   var formatMessage = _ref0.formatMessage;
   return /*#__PURE__*/React.createElement(_compiled.Stack, {
     xcss: styles.noResultsContainer,
-    space: "space.100"
+    space: "space.100",
+    testId: (0, _platformFeatureFlags.fg)('platform_synced_block_patch_1') ? 'synced-locations-dropdown-content-no-results' : undefined
   }, /*#__PURE__*/React.createElement(_compiled.Text, {
     as: "p"
   }, formatMessage(_messages.syncBlockMessages.syncedLocationDropdownNoResults)), /*#__PURE__*/React.createElement(_compiled.Text, {

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

@@ -8,6 +8,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.getToolbarConfig = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
+var _analytics = require("@atlaskit/editor-common/analytics");
 var _messages = _interopRequireWildcard(require("@atlaskit/editor-common/messages"));
 var _ui = require("@atlaskit/editor-common/ui");
 var _utils = require("@atlaskit/editor-prosemirror/utils");
@@ -71,7 +72,8 @@ var getToolbarConfig = exports.getToolbarConfig = function getToolbarConfig(stat
             resourceId: resourceId,
             localId: localId,
             intl: intl,
-            isSource: isBodiedSyncBlock
+            isSource: isBodiedSyncBlock,
+            api: api
           });
         }
       };
@@ -87,7 +89,8 @@ var getToolbarConfig = exports.getToolbarConfig = function getToolbarConfig(stat
             title: formatMessage(_messages.syncBlockMessages.unsyncButton),
             onClick: function onClick() {
               return (0, _editorCommands.unsync)(syncBlockStore, isBodiedSyncBlock, view);
-            }
+            },
+            testId: (0, _platformFeatureFlags.fg)('platform_synced_block_patch_1') ? isBodiedSyncBlock ? _types.SYNCED_BLOCK_BUTTON_TEST_ID.syncedBlockToolbarSourceUnsync : _types.SYNCED_BLOCK_BUTTON_TEST_ID.syncedBlockToolbarReferenceUnsync : undefined
           });
         }
       };
@@ -101,7 +104,7 @@ var getToolbarConfig = exports.getToolbarConfig = function getToolbarConfig(stat
       title: formatMessage(_messages.syncBlockMessages.copySyncBlockLabel),
       showTitle: false,
       tooltipContent: formatMessage(_messages.syncBlockMessages.copySyncedBlockTooltip),
-      onClick: (0, _editorCommands.copySyncedBlockReferenceToClipboard)(syncBlockStore, api)
+      onClick: (0, _editorCommands.copySyncedBlockReferenceToClipboard)(syncBlockStore, _analytics.INPUT_METHOD.SYNCED_BLOCK_TB, api)
     }, hoverDecorationProps(nodeType, _consts.akEditorSelectedNodeClassName));
     items.push(copyButton);
     var disabled = !syncBlockStore.referenceManager.getSyncBlockURL(syncBlockObject.node.attrs.resourceId);
@@ -131,7 +134,8 @@ var getToolbarConfig = exports.getToolbarConfig = function getToolbarConfig(stat
         onClick: (0, _editorCommands.removeSyncedBlock)(api),
         icon: /*#__PURE__*/_react.default.createElement(_delete.default, {
           label: ""
-        })
+        }),
+        testId: (0, _platformFeatureFlags.fg)('platform_synced_block_patch_1') ? isBodiedSyncBlock ? _types.SYNCED_BLOCK_BUTTON_TEST_ID.syncedBlockToolbarSourceDelete : _types.SYNCED_BLOCK_BUTTON_TEST_ID.syncedBlockToolbarReferenceDelete : undefined
       }, hoverDecorationProps(nodeType))]
     }];
     items.push.apply(items, overflowMenuConfig);

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

@@ -98,20 +98,33 @@ export const createSyncedBlock = ({
   // see filterTransaction for more details
   return tr;
 };
-export const copySyncedBlockReferenceToClipboardEditorCommand = (syncBlockStore, api) => ({
+export const copySyncedBlockReferenceToClipboardEditorCommand = (syncBlockStore, inputMethod, api) => ({
   tr
 }) => {
-  if (copySyncedBlockReferenceToClipboardInternal(tr.doc.type.schema, tr.selection, syncBlockStore, api)) {
+  if (copySyncedBlockReferenceToClipboardInternal(tr.doc.type.schema, tr.selection, syncBlockStore, inputMethod, api)) {
     return tr;
   }
   return null;
 };
-export const copySyncedBlockReferenceToClipboard = (syncBlockStore, api) => (state, _dispatch, _view) => {
-  return copySyncedBlockReferenceToClipboardInternal(state.tr.doc.type.schema, state.tr.selection, syncBlockStore, api);
+export const copySyncedBlockReferenceToClipboard = (syncBlockStore, inputMethod, api) => (state, _dispatch, _view) => {
+  return copySyncedBlockReferenceToClipboardInternal(state.tr.doc.type.schema, state.tr.selection, syncBlockStore, inputMethod, api);
 };
-const copySyncedBlockReferenceToClipboardInternal = (schema, selection, syncBlockStore, api) => {
+const copySyncedBlockReferenceToClipboardInternal = (schema, selection, syncBlockStore, inputMethod, api) => {
   const syncBlockFindResult = findSyncBlockOrBodiedSyncBlock(schema, selection);
   if (!syncBlockFindResult) {
+    if (fg('platform_synced_block_patch_1')) {
+      var _api$analytics, _api$analytics$action;
+      api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : (_api$analytics$action = _api$analytics.actions) === null || _api$analytics$action === void 0 ? void 0 : _api$analytics$action.fireAnalyticsEvent({
+        eventType: EVENT_TYPE.OPERATIONAL,
+        action: ACTION.ERROR,
+        actionSubject: ACTION_SUBJECT.SYNCED_BLOCK,
+        actionSubjectId: ACTION_SUBJECT_ID.SYNCED_BLOCK_COPY,
+        attributes: {
+          error: 'No sync block found in selection',
+          inputMethod
+        }
+      });
+    }
     return false;
   }
   const isBodiedSyncBlock = isBodiedSyncBlockNode(syncBlockFindResult.node, schema.nodes.bodiedSyncBlock);
@@ -128,12 +141,39 @@ const copySyncedBlockReferenceToClipboardInternal = (schema, selection, syncBloc
       resourceId: syncBlockStore.referenceManager.generateResourceIdForReference(syncBlockFindResult.node.attrs.resourceId)
     });
     if (!referenceSyncBlockNode) {
+      if (fg('platform_synced_block_patch_1')) {
+        var _api$analytics2, _api$analytics2$actio;
+        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({
+          eventType: EVENT_TYPE.OPERATIONAL,
+          action: ACTION.ERROR,
+          actionSubject: ACTION_SUBJECT.SYNCED_BLOCK,
+          actionSubjectId: ACTION_SUBJECT_ID.SYNCED_BLOCK_COPY,
+          attributes: {
+            error: 'Failed to create reference sync block node',
+            resourceId: syncBlockFindResult.node.attrs.resourceId,
+            inputMethod
+          }
+        });
+      }
       return false;
     }
   } else {
     referenceSyncBlockNode = syncBlockFindResult.node;
   }
   if (!referenceSyncBlockNode) {
+    if (fg('platform_synced_block_patch_1')) {
+      var _api$analytics3, _api$analytics3$actio;
+      api === null || api === void 0 ? void 0 : (_api$analytics3 = api.analytics) === null || _api$analytics3 === void 0 ? void 0 : (_api$analytics3$actio = _api$analytics3.actions) === null || _api$analytics3$actio === void 0 ? void 0 : _api$analytics3$actio.fireAnalyticsEvent({
+        eventType: EVENT_TYPE.OPERATIONAL,
+        action: ACTION.ERROR,
+        actionSubject: ACTION_SUBJECT.SYNCED_BLOCK,
+        actionSubjectId: ACTION_SUBJECT_ID.SYNCED_BLOCK_COPY,
+        attributes: {
+          error: 'No reference sync block node available',
+          inputMethod
+        }
+      });
+    }
     return false;
   }
   const domNode = toDOM(referenceSyncBlockNode, schema);
@@ -144,6 +184,19 @@ const copySyncedBlockReferenceToClipboardInternal = (schema, selection, syncBloc
     api === null || api === void 0 ? void 0 : api.core.actions.execute(({
       tr
     }) => {
+      if (fg('platform_synced_block_patch_1')) {
+        var _api$analytics4, _api$analytics4$actio;
+        api === null || api === void 0 ? void 0 : (_api$analytics4 = api.analytics) === null || _api$analytics4 === void 0 ? void 0 : (_api$analytics4$actio = _api$analytics4.actions) === null || _api$analytics4$actio === void 0 ? void 0 : _api$analytics4$actio.fireAnalyticsEvent({
+          eventType: EVENT_TYPE.OPERATIONAL,
+          action: ACTION.COPIED,
+          actionSubject: ACTION_SUBJECT.SYNCED_BLOCK,
+          actionSubjectId: ACTION_SUBJECT_ID.SYNCED_BLOCK_COPY,
+          attributes: {
+            resourceId: referenceSyncBlockNode.attrs.resourceId,
+            inputMethod
+          }
+        });
+      }
       return tr.setMeta(syncedBlockPluginKey, {
         activeFlag: {
           id: FLAG_ID.SYNC_BLOCK_COPIED
@@ -162,11 +215,23 @@ export const editSyncedBlockSource = (syncBlockStore, api) => (state, dispatch,
   }
   const syncBlockURL = syncBlockStore.referenceManager.getSyncBlockURL(resourceId);
   if (syncBlockURL) {
+    if (fg('platform_synced_block_patch_1')) {
+      var _api$analytics5;
+      api === null || api === void 0 ? void 0 : (_api$analytics5 = api.analytics) === null || _api$analytics5 === void 0 ? void 0 : _api$analytics5.actions.fireAnalyticsEvent({
+        eventType: EVENT_TYPE.OPERATIONAL,
+        action: ACTION.SYNCED_BLOCK_EDIT_SOURCE,
+        actionSubject: ACTION_SUBJECT.SYNCED_BLOCK,
+        actionSubjectId: ACTION_SUBJECT_ID.SYNCED_BLOCK_SOURCE_URL,
+        attributes: {
+          resourceId: resourceId
+        }
+      });
+    }
     window.open(syncBlockURL, '_blank');
   } else {
-    var _api$analytics, _api$analytics$action;
+    var _api$analytics6, _api$analytics6$actio;
     const tr = state.tr;
-    api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : (_api$analytics$action = _api$analytics.actions) === null || _api$analytics$action === void 0 ? void 0 : _api$analytics$action.attachAnalyticsEvent({
+    api === null || api === void 0 ? void 0 : (_api$analytics6 = api.analytics) === null || _api$analytics6 === void 0 ? void 0 : (_api$analytics6$actio = _api$analytics6.actions) === null || _api$analytics6$actio === void 0 ? void 0 : _api$analytics6$actio.attachAnalyticsEvent({
       eventType: EVENT_TYPE.OPERATIONAL,
       action: ACTION.ERROR,
       actionSubject: ACTION_SUBJECT.SYNCED_BLOCK,

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

@@ -3,6 +3,7 @@ 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 { fg } from '@atlaskit/platform-feature-flags';
 import { SYNCED_BLOCK_BUTTON_TEST_ID } from '../types';
 const TIMEOUT_DURATION = 30000;
 const pluginKey = new PluginKey('syncedBlockMenuAndToolbarExperience');
@@ -21,22 +22,76 @@ export const getMenuAndToolbarExperiencesPlugin = ({
     }
     return popupsTargetEl;
   };
-  const createSourcePrimaryToolbarExperience = getCreateSourcePrimaryToolbarExperience({
-    refs,
-    dispatchAnalyticsEvent
+  const createSourcePrimaryToolbarExperience = 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 createSourceBlockMenuExperience = getCreateSourceBlockMenuExperience({
-    refs,
-    dispatchAnalyticsEvent
+  const createSourceBlockMenuExperience = 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 createSourceQuickInsertMenuExperience = getCreateSourceQuickInsertMenuExperience({
-    refs,
-    dispatchAnalyticsEvent
+  const createSourceQuickInsertMenuExperience = 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 deleteReferenceSyncedBlockExperience = getDeleteReferenceSyncedBlockToolbarExperience({
-    refs,
-    dispatchAnalyticsEvent
+  const deleteReferenceSyncedBlockExperience = 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)]
   });
+  let unsyncReferenceSyncedBlockExperience;
+  let unsyncSourceSyncedBlockExperience;
+  let deleteSourceSyncedBlockExperience;
+  let syncedLocationsExperience;
+  if (fg('platform_synced_block_patch_1')) {
+    unsyncReferenceSyncedBlockExperience = new Experience(EXPERIENCE_ID.TOOLBAR_ACTION, {
+      action: ACTION.REFERENCE_SYNCED_BLOCK_UNSYNC,
+      actionSubjectId: ACTION_SUBJECT_ID.SYNCED_BLOCK_TOOLBAR,
+      dispatchAnalyticsEvent,
+      checks: [new ExperienceCheckTimeout({
+        durationMs: TIMEOUT_DURATION
+      }), referenceSyncBlockRemovedFromDomCheck(refs)]
+    });
+    unsyncSourceSyncedBlockExperience = new Experience(EXPERIENCE_ID.TOOLBAR_ACTION, {
+      action: ACTION.SYNCED_BLOCK_UNSYNC,
+      actionSubjectId: ACTION_SUBJECT_ID.SYNCED_BLOCK_TOOLBAR,
+      dispatchAnalyticsEvent,
+      checks: [new ExperienceCheckTimeout({
+        durationMs: TIMEOUT_DURATION
+      }), syncBlockDeleteConfirmationModalAddedCheck(refs)]
+    });
+    deleteSourceSyncedBlockExperience = new Experience(EXPERIENCE_ID.TOOLBAR_ACTION, {
+      action: ACTION.SYNCED_BLOCK_DELETE,
+      actionSubjectId: ACTION_SUBJECT_ID.SYNCED_BLOCK_TOOLBAR,
+      dispatchAnalyticsEvent,
+      checks: [new ExperienceCheckTimeout({
+        durationMs: TIMEOUT_DURATION
+      }), syncBlockDeleteConfirmationModalAddedCheck(refs)]
+    });
+    syncedLocationsExperience = new Experience(EXPERIENCE_ID.TOOLBAR_ACTION, {
+      action: ACTION.SYNCED_BLOCK_VIEW_SYNCED_LOCATIONS,
+      actionSubjectId: ACTION_SUBJECT_ID.SYNCED_BLOCK_TOOLBAR,
+      dispatchAnalyticsEvent,
+      checks: [new ExperienceCheckTimeout({
+        durationMs: TIMEOUT_DURATION
+      }), syncedLocationsDropdownOpenedCheck(refs)]
+    });
+  }
   const unbindClickListener = bind(document, {
     type: 'click',
     listener: event => {
@@ -52,13 +107,24 @@ export const getMenuAndToolbarExperiencesPlugin = ({
       if (!isSyncedBlockButtonId(testId)) {
         return;
       }
+      if (button.disabled) {
+        return;
+      }
       handleButtonClick({
         testId,
+        button,
         createSourcePrimaryToolbarExperience,
         createSourceBlockMenuExperience,
         createSourceQuickInsertMenuExperience,
-        deleteReferenceSyncedBlockExperience
+        deleteReferenceSyncedBlockExperience,
+        unsyncReferenceSyncedBlockExperience,
+        unsyncSourceSyncedBlockExperience,
+        deleteSourceSyncedBlockExperience,
+        syncedLocationsExperience
       });
+    },
+    options: {
+      capture: true
     }
   });
   const unbindKeydownListener = bind(document, {
@@ -89,6 +155,7 @@ export const getMenuAndToolbarExperiencesPlugin = ({
       editorViewEl = editorView.dom;
       return {
         destroy: () => {
+          var _deleteSourceSyncedBl, _unsyncReferenceSynce, _unsyncSourceSyncedBl, _syncedLocationsExper;
           createSourcePrimaryToolbarExperience.abort({
             reason: 'editorDestroyed'
           });
@@ -101,6 +168,18 @@ export const getMenuAndToolbarExperiencesPlugin = ({
           deleteReferenceSyncedBlockExperience.abort({
             reason: 'editorDestroyed'
           });
+          (_deleteSourceSyncedBl = deleteSourceSyncedBlockExperience) === null || _deleteSourceSyncedBl === void 0 ? void 0 : _deleteSourceSyncedBl.abort({
+            reason: 'editorDestroyed'
+          });
+          (_unsyncReferenceSynce = unsyncReferenceSyncedBlockExperience) === null || _unsyncReferenceSynce === void 0 ? void 0 : _unsyncReferenceSynce.abort({
+            reason: 'editorDestroyed'
+          });
+          (_unsyncSourceSyncedBl = unsyncSourceSyncedBlockExperience) === null || _unsyncSourceSyncedBl === void 0 ? void 0 : _unsyncSourceSyncedBl.abort({
+            reason: 'editorDestroyed'
+          });
+          (_syncedLocationsExper = syncedLocationsExperience) === null || _syncedLocationsExper === void 0 ? void 0 : _syncedLocationsExper.abort({
+            reason: 'editorDestroyed'
+          });
           unbindClickListener();
           unbindKeydownListener();
         }
@@ -108,80 +187,64 @@ export const getMenuAndToolbarExperiencesPlugin = ({
     }
   });
 };
-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,
+  button,
   createSourcePrimaryToolbarExperience,
   createSourceBlockMenuExperience,
   createSourceQuickInsertMenuExperience,
-  deleteReferenceSyncedBlockExperience
+  deleteReferenceSyncedBlockExperience,
+  unsyncReferenceSyncedBlockExperience,
+  unsyncSourceSyncedBlockExperience,
+  deleteSourceSyncedBlockExperience,
+  syncedLocationsExperience
 }) => {
   switch (testId) {
     case SYNCED_BLOCK_BUTTON_TEST_ID.primaryToolbarCreate:
-      createSourcePrimaryToolbarExperience.start();
+      createSourcePrimaryToolbarExperience.start({
+        forceRestart: true
+      });
       break;
     case SYNCED_BLOCK_BUTTON_TEST_ID.blockMenuCreate:
-      createSourceBlockMenuExperience.start();
+      createSourceBlockMenuExperience.start({
+        forceRestart: true
+      });
       break;
     case SYNCED_BLOCK_BUTTON_TEST_ID.quickInsertCreate:
-      createSourceQuickInsertMenuExperience.start();
+      createSourceQuickInsertMenuExperience.start({
+        forceRestart: true
+      });
       break;
     case SYNCED_BLOCK_BUTTON_TEST_ID.syncedBlockToolbarReferenceDelete:
-      deleteReferenceSyncedBlockExperience.start();
+      deleteReferenceSyncedBlockExperience.start({
+        forceRestart: true
+      });
+      break;
+    case SYNCED_BLOCK_BUTTON_TEST_ID.syncedBlockToolbarReferenceUnsync:
+      unsyncReferenceSyncedBlockExperience === null || unsyncReferenceSyncedBlockExperience === void 0 ? void 0 : unsyncReferenceSyncedBlockExperience.start({
+        forceRestart: true
+      });
+      break;
+    case SYNCED_BLOCK_BUTTON_TEST_ID.syncedBlockToolbarSourceUnsync:
+      unsyncSourceSyncedBlockExperience === null || unsyncSourceSyncedBlockExperience === void 0 ? void 0 : unsyncSourceSyncedBlockExperience.start({
+        forceRestart: true
+      });
+      break;
+    case SYNCED_BLOCK_BUTTON_TEST_ID.syncedBlockToolbarSourceDelete:
+      deleteSourceSyncedBlockExperience === null || deleteSourceSyncedBlockExperience === void 0 ? void 0 : deleteSourceSyncedBlockExperience.start({
+        forceRestart: true
+      });
+      break;
+    case SYNCED_BLOCK_BUTTON_TEST_ID.syncedBlockToolbarSyncedLocationsTrigger:
+      // Only track when opening the dropdown
+      if (button.getAttribute('aria-pressed') === 'false') {
+        syncedLocationsExperience === null || syncedLocationsExperience === void 0 ? void 0 : syncedLocationsExperience.start({
+          forceRestart: true
+        });
+      }
       break;
     default:
       {
@@ -258,4 +321,76 @@ const isSyncBlockRemovedInMutation = ({
 }) => {
   return type === 'childList' && [...removedNodes].some(isSyncBlockWithinNode);
 };
-const isSyncBlockWithinNode = node => getNodeQuery('[data-prosemirror-node-name="syncBlock"]')(node);
+const isSyncBlockWithinNode = node => getNodeQuery('[data-prosemirror-node-name="syncBlock"]')(node);
+const syncBlockDeleteConfirmationModalAddedCheck = refs => new ExperienceCheckDomMutation({
+  onDomMutation: ({
+    mutations
+  }) => {
+    if (mutations.some(isDeleteConfirmationModalAddedInMutation)) {
+      return {
+        status: 'success'
+      };
+    }
+    return undefined;
+  },
+  observeConfig: () => {
+    return {
+      target: document.body,
+      options: {
+        childList: true,
+        subtree: true
+      }
+    };
+  }
+});
+const isDeleteConfirmationModalAddedInMutation = ({
+  type,
+  addedNodes
+}) => {
+  return type === 'childList' && [...addedNodes].some(isDeleteConfirmationModalWithinNode);
+};
+const isDeleteConfirmationModalWithinNode = node => getNodeQuery('[data-testid="sync-block-delete-confirmation"]')(node);
+const syncedLocationsDropdownOpenedCheck = refs => new ExperienceCheckDomMutation({
+  onDomMutation: ({
+    mutations
+  }) => {
+    if (mutations.some(isSyncedLocationsDropdownErrorInMutation)) {
+      return {
+        status: 'failure'
+      };
+    }
+    if (mutations.some(isSyncedLocationsDropdownAddedInMutation)) {
+      return {
+        status: 'success'
+      };
+    }
+    return undefined;
+  },
+  observeConfig: () => {
+    return {
+      target: document.body,
+      options: {
+        childList: true,
+        subtree: true
+      }
+    };
+  }
+});
+const isSyncedLocationsDropdownAddedInMutation = ({
+  type,
+  addedNodes
+}) => {
+  return type === 'childList' && [...addedNodes].some(isSyncedLocationsDropdownWithinNode);
+};
+const isSyncedLocationsDropdownErrorInMutation = ({
+  type,
+  addedNodes
+}) => {
+  return type === 'childList' && [...addedNodes].some(isSyncedLocationsDropdownErrorWithinNode);
+};
+const isSyncedLocationsDropdownWithinNode = node => {
+  return !!(getNodeQuery('[data-testid="synced-locations-dropdown-content"]')(node) || getNodeQuery('[data-testid="synced-locations-dropdown-content-no-results"]')(node));
+};
+const isSyncedLocationsDropdownErrorWithinNode = node => {
+  return !!getNodeQuery('[data-testid="synced-locations-dropdown-content-error"]')(node);
+};

package/dist/es2019/syncedBlockPlugin.js

@@ -53,7 +53,7 @@ export const syncedBlockPlugin = ({
       }] : [])];
     },
     commands: {
-      copySyncedBlockReferenceToClipboard: () => copySyncedBlockReferenceToClipboardEditorCommand(syncBlockStore, api),
+      copySyncedBlockReferenceToClipboard: inputMethod => copySyncedBlockReferenceToClipboardEditorCommand(syncBlockStore, inputMethod, api),
       insertSyncedBlock: () => ({
         tr
       }) => {

package/dist/es2019/types/index.js

@@ -11,5 +11,9 @@ 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'
+  syncedBlockToolbarReferenceDelete: 'reference-synced-block-delete-btn',
+  syncedBlockToolbarSourceDelete: 'source-synced-block-delete-btn',
+  syncedBlockToolbarReferenceUnsync: 'reference-synced-block-unsync-btn',
+  syncedBlockToolbarSourceUnsync: 'source-synced-block-unsync-btn',
+  syncedBlockToolbarSyncedLocationsTrigger: 'synced-block-synced-locations-dropdown--trigger'
 };

package/dist/es2019/ui/CreateSyncedBlockDropdownItem.js

@@ -1,5 +1,6 @@
 import React, { useMemo } from 'react';
 import { useIntl } from 'react-intl-next';
+import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import { blockMenuMessages } from '@atlaskit/editor-common/messages';
 import { isOfflineMode } from '@atlaskit/editor-plugin-connectivity';
@@ -66,7 +67,7 @@ const CopySyncedBlockDropdownItem = ({
   });
   const onClick = () => {
     var _api$core3, _api$core4, _api$blockControls2, _api$blockControls2$c;
-    api === null || api === void 0 ? void 0 : (_api$core3 = api.core) === null || _api$core3 === void 0 ? void 0 : _api$core3.actions.execute(api === null || api === void 0 ? void 0 : api.syncedBlock.commands.copySyncedBlockReferenceToClipboard());
+    api === null || api === void 0 ? void 0 : (_api$core3 = api.core) === null || _api$core3 === void 0 ? void 0 : _api$core3.actions.execute(api === null || api === void 0 ? void 0 : api.syncedBlock.commands.copySyncedBlockReferenceToClipboard(INPUT_METHOD.BLOCK_MENU));
     api === null || api === void 0 ? void 0 : (_api$core4 = api.core) === null || _api$core4 === void 0 ? void 0 : _api$core4.actions.execute(api === null || api === void 0 ? void 0 : (_api$blockControls2 = api.blockControls) === null || _api$blockControls2 === void 0 ? void 0 : (_api$blockControls2$c = _api$blockControls2.commands) === null || _api$blockControls2$c === void 0 ? void 0 : _api$blockControls2$c.toggleBlockMenu({
       closeMenu: true
     }));