@atlaskit/editor-plugin-synced-block 5.2.0 → 5.2.2

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/floating-toolbar.js

@@ -9,6 +9,7 @@ import EditIcon from '@atlaskit/icon/core/edit';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { copySyncedBlockReferenceToClipboard, editSyncedBlockSource, removeSyncedBlock } 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 +50,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);

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

@@ -9,7 +9,8 @@ import { FLAG_ID } from '../types';
 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 +36,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;

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);
+};