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

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

@@ -12,6 +12,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 var getToolbarConfig = function getToolbarConfig(state, intl, api, syncBlockStore) {
   var _api$decorations, _api$connectivity;
@@ -45,7 +46,7 @@ export var getToolbarConfig = function getToolbarConfig(state, intl, api, syncBl
       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);
   } else {

package/dist/types/editor-commands/index.d.ts

@@ -1,13 +1,15 @@
+import { type DispatchAnalyticsEvent } from '@atlaskit/editor-common/analytics';
 import type { Command, EditorCommand, ExtractInjectionAPI, TypeAheadInsert } from '@atlaskit/editor-common/types';
 import { type Transaction } from '@atlaskit/editor-prosemirror/state';
 import type { SyncBlockStoreManager } from '@atlaskit/editor-synced-block-provider';
 import type { SyncedBlockPlugin } from '../syncedBlockPluginType';
 type createSyncedBlockProps = {
+    fireAnalyticsEvent?: DispatchAnalyticsEvent;
     syncBlockStore: SyncBlockStoreManager;
     tr: Transaction;
     typeAheadInsert?: TypeAheadInsert;
 };
-export declare const createSyncedBlock: ({ tr, syncBlockStore, typeAheadInsert, }: createSyncedBlockProps) => false | Transaction;
+export declare const createSyncedBlock: ({ tr, syncBlockStore, typeAheadInsert, fireAnalyticsEvent, }: createSyncedBlockProps) => false | Transaction;
 export declare const copySyncedBlockReferenceToClipboardEditorCommand: (syncBlockStore: SyncBlockStoreManager, api?: ExtractInjectionAPI<SyncedBlockPlugin>) => EditorCommand;
 export declare const copySyncedBlockReferenceToClipboard: (syncBlockStore: SyncBlockStoreManager, api?: ExtractInjectionAPI<SyncedBlockPlugin>) => Command;
 export declare const editSyncedBlockSource: (syncBlockStore: SyncBlockStoreManager, api?: ExtractInjectionAPI<SyncedBlockPlugin>) => Command;

package/dist/types/pm-plugins/menu-and-toolbar-experiences.d.ts

@@ -0,0 +1,12 @@
+import { type DispatchAnalyticsEvent } from '@atlaskit/editor-common/analytics';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+type ExperienceOptions = {
+    dispatchAnalyticsEvent: DispatchAnalyticsEvent;
+    refs: {
+        containerElement?: HTMLElement;
+        popupsMountPoint?: HTMLElement;
+        wrapperElement?: HTMLElement;
+    };
+};
+export declare const getMenuAndToolbarExperiencesPlugin: ({ refs, dispatchAnalyticsEvent, }: ExperienceOptions) => SafePlugin<any>;
+export {};

package/dist/types/types/index.d.ts

@@ -1,4 +1,3 @@
-import type { DispatchAnalyticsEvent } from "@atlaskit/editor-common/analytics";
 import type { Transaction } from '@atlaskit/editor-prosemirror/state';
 import type { SyncBlockStoreManager } from '@atlaskit/editor-synced-block-provider';
 export declare enum FLAG_ID {
@@ -41,18 +40,10 @@ export type SyncBlockInfo = {
 export type SyncBlockMap = {
     [key: string]: SyncBlockInfo;
 };
-export type ExperienceOptions = {
-    dispatchAnalyticsEvent: DispatchAnalyticsEvent;
-    refs: {
-        containerElement?: HTMLElement;
-        popupsMountPoint?: HTMLElement;
-        wrapperElement?: HTMLElement;
-    };
-};
-export type ProviderExperienceOptions = ExperienceOptions & {
-    syncBlockStore: SyncBlockStoreManager;
-};
-export declare const EXPERIENCE_ABORT_REASON: {
-    EDITOR_DESTROYED: string;
+export declare const SYNCED_BLOCK_BUTTON_TEST_ID: {
+    readonly primaryToolbarCreate: "create-synced-block-toolbar-btn";
+    readonly blockMenuCreate: "create-synced-block-block-menu-btn";
+    readonly quickInsertCreate: "create-synced-block-quick-insert-btn";
+    readonly syncedBlockToolbarReferenceDelete: "reference-synced-block-delete-btn";
 };
 export {};

package/dist/types-ts4.5/editor-commands/index.d.ts

@@ -1,13 +1,15 @@
+import { type DispatchAnalyticsEvent } from '@atlaskit/editor-common/analytics';
 import type { Command, EditorCommand, ExtractInjectionAPI, TypeAheadInsert } from '@atlaskit/editor-common/types';
 import { type Transaction } from '@atlaskit/editor-prosemirror/state';
 import type { SyncBlockStoreManager } from '@atlaskit/editor-synced-block-provider';
 import type { SyncedBlockPlugin } from '../syncedBlockPluginType';
 type createSyncedBlockProps = {
+    fireAnalyticsEvent?: DispatchAnalyticsEvent;
     syncBlockStore: SyncBlockStoreManager;
     tr: Transaction;
     typeAheadInsert?: TypeAheadInsert;
 };
-export declare const createSyncedBlock: ({ tr, syncBlockStore, typeAheadInsert, }: createSyncedBlockProps) => false | Transaction;
+export declare const createSyncedBlock: ({ tr, syncBlockStore, typeAheadInsert, fireAnalyticsEvent, }: createSyncedBlockProps) => false | Transaction;
 export declare const copySyncedBlockReferenceToClipboardEditorCommand: (syncBlockStore: SyncBlockStoreManager, api?: ExtractInjectionAPI<SyncedBlockPlugin>) => EditorCommand;
 export declare const copySyncedBlockReferenceToClipboard: (syncBlockStore: SyncBlockStoreManager, api?: ExtractInjectionAPI<SyncedBlockPlugin>) => Command;
 export declare const editSyncedBlockSource: (syncBlockStore: SyncBlockStoreManager, api?: ExtractInjectionAPI<SyncedBlockPlugin>) => Command;

package/dist/types-ts4.5/pm-plugins/menu-and-toolbar-experiences.d.ts

@@ -0,0 +1,12 @@
+import { type DispatchAnalyticsEvent } from '@atlaskit/editor-common/analytics';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+type ExperienceOptions = {
+    dispatchAnalyticsEvent: DispatchAnalyticsEvent;
+    refs: {
+        containerElement?: HTMLElement;
+        popupsMountPoint?: HTMLElement;
+        wrapperElement?: HTMLElement;
+    };
+};
+export declare const getMenuAndToolbarExperiencesPlugin: ({ refs, dispatchAnalyticsEvent, }: ExperienceOptions) => SafePlugin<any>;
+export {};

package/dist/types-ts4.5/types/index.d.ts

@@ -1,4 +1,3 @@
-import type { DispatchAnalyticsEvent } from "@atlaskit/editor-common/analytics";
 import type { Transaction } from '@atlaskit/editor-prosemirror/state';
 import type { SyncBlockStoreManager } from '@atlaskit/editor-synced-block-provider';
 export declare enum FLAG_ID {
@@ -41,18 +40,10 @@ export type SyncBlockInfo = {
 export type SyncBlockMap = {
     [key: string]: SyncBlockInfo;
 };
-export type ExperienceOptions = {
-    dispatchAnalyticsEvent: DispatchAnalyticsEvent;
-    refs: {
-        containerElement?: HTMLElement;
-        popupsMountPoint?: HTMLElement;
-        wrapperElement?: HTMLElement;
-    };
-};
-export type ProviderExperienceOptions = ExperienceOptions & {
-    syncBlockStore: SyncBlockStoreManager;
-};
-export declare const EXPERIENCE_ABORT_REASON: {
-    EDITOR_DESTROYED: string;
+export declare const SYNCED_BLOCK_BUTTON_TEST_ID: {
+    readonly primaryToolbarCreate: "create-synced-block-toolbar-btn";
+    readonly blockMenuCreate: "create-synced-block-block-menu-btn";
+    readonly quickInsertCreate: "create-synced-block-quick-insert-btn";
+    readonly syncedBlockToolbarReferenceDelete: "reference-synced-block-delete-btn";
 };
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-synced-block",
-	"version": "5.2.0",
+	"version": "5.2.2",
 	"description": "SyncedBlock plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -40,7 +40,7 @@
 		"@atlaskit/editor-plugin-selection": "^7.0.0",
 		"@atlaskit/editor-prosemirror": "^7.2.0",
 		"@atlaskit/editor-shared-styles": "^3.10.0",
-		"@atlaskit/editor-synced-block-provider": "^3.9.0",
+		"@atlaskit/editor-synced-block-provider": "^3.12.0",
 		"@atlaskit/editor-tables": "^2.9.0",
 		"@atlaskit/editor-toolbar": "^0.19.0",
 		"@atlaskit/flag": "^17.8.0",
@@ -52,8 +52,8 @@
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/primitives": "^17.1.0",
 		"@atlaskit/spinner": "19.0.9",
-		"@atlaskit/tmp-editor-statsig": "^16.24.0",
-		"@atlaskit/tokens": "10.0.1",
+		"@atlaskit/tmp-editor-statsig": "^16.28.0",
+		"@atlaskit/tokens": "10.1.0",
 		"@atlaskit/tooltip": "^20.14.0",
 		"@atlaskit/visually-hidden": "^3.0.0",
 		"@babel/runtime": "^7.0.0",

package/dist/cjs/pm-plugins/experience-tracking/create-reference-experience.js

@@ -1,113 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.getCreateReferenceExperiencePlugin = void 0;
-var _analytics = require("@atlaskit/editor-common/analytics");
-var _experiences = require("@atlaskit/editor-common/experiences");
-var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
-var _state = require("@atlaskit/editor-prosemirror/state");
-var _types = require("../../types");
-var _experienceTrackingUtils = require("../utils/experience-tracking-utils");
-var isPastedFromFabricEditor = function isPastedFromFabricEditor(html) {
-  return !!html && html.indexOf('data-pm-slice="') >= 0;
-};
-var pluginKey = new _state.PluginKey('createReferenceSyncBlockExperience');
-var START_METHOD = {
-  PASTE: 'paste',
-  UNDO: 'undo',
-  REDO: 'redo'
-};
-
-/**
- * This experience tracks when a reference sync block is inserted.
- *
- * Start: When user pastes a sync block from editor and createSyncedBlock is called
- * Success: When the sync block is added to the DOM within 500ms of start
- * Failure: When 500ms passes without the reference sync block being added to the DOM
- */
-var getCreateReferenceExperiencePlugin = exports.getCreateReferenceExperiencePlugin = function getCreateReferenceExperiencePlugin(_ref) {
-  var refs = _ref.refs,
-    dispatchAnalyticsEvent = _ref.dispatchAnalyticsEvent;
-  var experience = getCreateReferenceExperience({
-    refs: refs,
-    dispatchAnalyticsEvent: dispatchAnalyticsEvent
-  });
-  return new _safePlugin.SafePlugin({
-    key: pluginKey,
-    view: function view() {
-      return {
-        destroy: function destroy() {
-          experience.abort({
-            reason: _types.EXPERIENCE_ABORT_REASON.EDITOR_DESTROYED
-          });
-        }
-      };
-    },
-    props: {
-      handlePaste: function handlePaste(_view, rawEvent, slice) {
-        var _event$clipboardData;
-        var event = rawEvent;
-        var html = (_event$clipboardData = event.clipboardData) === null || _event$clipboardData === void 0 ? void 0 : _event$clipboardData.getData('text/html');
-
-        // do not start on paste from renderer, because this flattens the content and does not create a reference block
-        if (isPastedFromFabricEditor(html)) {
-          slice.content.forEach(function (node) {
-            if (node.type.name === 'syncBlock' || node.type.name === 'bodiedSyncBlock') {
-              experience.start({
-                method: START_METHOD.PASTE
-              });
-            }
-          });
-        }
-      }
-    },
-    appendTransaction: function appendTransaction(transactions, oldState, newState) {
-      transactions.forEach(function (tr) {
-        var _wasSyncBlockDeletedO = (0, _experienceTrackingUtils.wasSyncBlockDeletedOrAddedByHistory)(tr, oldState, newState),
-          hasAddedSyncBlock = _wasSyncBlockDeletedO.hasAddedSyncBlock,
-          isUndo = _wasSyncBlockDeletedO.isUndo;
-        if (hasAddedSyncBlock) {
-          experience.start({
-            method: isUndo ? START_METHOD.UNDO : START_METHOD.REDO
-          });
-        }
-      });
-      return null;
-    }
-  });
-};
-var getCreateReferenceExperience = function getCreateReferenceExperience(_ref2) {
-  var refs = _ref2.refs,
-    dispatchAnalyticsEvent = _ref2.dispatchAnalyticsEvent;
-  return new _experiences.Experience(_analytics.ACTION_SUBJECT.SYNCED_BLOCK, {
-    actionSubjectId: _analytics.ACTION_SUBJECT_ID.REFERENCE_SYNCED_BLOCK_CREATE,
-    dispatchAnalyticsEvent: dispatchAnalyticsEvent,
-    checks: [new _experiences.ExperienceCheckTimeout({
-      durationMs: 500
-    }), new _experiences.ExperienceCheckDomMutation({
-      onDomMutation: function onDomMutation(_ref3) {
-        var mutations = _ref3.mutations;
-        var insertedResourceIds = (0, _experienceTrackingUtils.getAddedResourceIds)(mutations, '[data-prosemirror-node-name="syncBlock"]');
-        if (insertedResourceIds.length > 0) {
-          return {
-            status: 'success',
-            metadata: {
-              insertedResourceIds: insertedResourceIds
-            }
-          };
-        }
-        return undefined;
-      },
-      observeConfig: function observeConfig() {
-        return {
-          target: (0, _experienceTrackingUtils.getTarget)(refs.containerElement),
-          options: {
-            childList: true
-          }
-        };
-      }
-    })]
-  });
-};

package/dist/cjs/pm-plugins/experience-tracking/create-source-experience.js

@@ -1,169 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.getCreateSourceExperiencePlugin = void 0;
-var _bindEventListener = require("bind-event-listener");
-var _analytics = require("@atlaskit/editor-common/analytics");
-var _experiences = require("@atlaskit/editor-common/experiences");
-var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
-var _state = require("@atlaskit/editor-prosemirror/state");
-var _types = require("../../types");
-var _experienceTrackingUtils = require("../utils/experience-tracking-utils");
-var pluginKey = new _state.PluginKey('createSourceSyncBlockExperience');
-var START_METHOD = {
-  BLOCK_MENU: 'block-menu',
-  PINNED_TOOLBAR: 'pinned-toolbar',
-  QUICK_INSERT: 'quick-insert'
-};
-var SYNCED_BLOCK_CREATE_BUTTON_IDS = ['create-synced-block-toolbar-btn', 'create-synced-block-block-menu-btn', 'create-synced-block-quick-insert-btn'];
-var syncedBlockCreateButtonIds = new Set(SYNCED_BLOCK_CREATE_BUTTON_IDS);
-
-/**
- * This experience tracks when a source sync block is inserted.
- *
- * Start: When user inserts a sync block via block menu, quick insert or pinned toolbar
- * Success: When the sync block is added to the DOM within 3000ms of start
- * Failure: When 3000ms passes without the source sync block being added to the DOM
- */
-var getCreateSourceExperiencePlugin = exports.getCreateSourceExperiencePlugin = function getCreateSourceExperiencePlugin(_ref) {
-  var refs = _ref.refs,
-    dispatchAnalyticsEvent = _ref.dispatchAnalyticsEvent,
-    syncBlockStore = _ref.syncBlockStore;
-  var popupsTargetEl;
-  var editorViewEl;
-  var getPopupsTarget = function getPopupsTarget() {
-    if (!popupsTargetEl) {
-      popupsTargetEl = refs.popupsMountPoint || refs.wrapperElement || (0, _experiences.getPopupContainerFromEditorView)(editorViewEl);
-    }
-    return popupsTargetEl;
-  };
-  var experience = getCreateSourceExperience({
-    refs: refs,
-    dispatchAnalyticsEvent: dispatchAnalyticsEvent
-  });
-  syncBlockStore.sourceManager.setCreateExperience(experience);
-  var unbindClickListener = (0, _bindEventListener.bind)(document, {
-    type: 'click',
-    listener: function listener(event) {
-      var target = event.target;
-      if (!target) {
-        return;
-      }
-      var button = target.closest('button[data-testid]');
-      if (!button || !(button instanceof HTMLButtonElement)) {
-        return;
-      }
-      var testId = button.dataset.testid;
-      if (!isSyncedBlockCreateButtonId(testId)) {
-        return;
-      }
-      handleButtonClick(testId, experience);
-    }
-  });
-  var unbindKeydownListener = (0, _bindEventListener.bind)(document, {
-    type: 'keydown',
-    listener: function listener(event) {
-      if (isEnterKey(event.key)) {
-        var typeaheadPopup = (0, _experiences.popupWithNestedElement)(getPopupsTarget(), '.fabric-editor-typeahead');
-        if (!typeaheadPopup || !(typeaheadPopup instanceof HTMLElement)) {
-          return;
-        }
-        var firstItem = typeaheadPopup.querySelector('[role="option"]');
-        if (!firstItem || !(firstItem instanceof HTMLElement)) {
-          return;
-        }
-        var testId = firstItem.dataset.testid;
-        if (testId === 'create-synced-block-quick-insert-btn') {
-          experience.start({
-            method: START_METHOD.QUICK_INSERT
-          });
-        }
-      }
-    },
-    options: {
-      capture: true
-    }
-  });
-  return new _safePlugin.SafePlugin({
-    key: pluginKey,
-    view: function view(editorView) {
-      editorViewEl = editorView.dom;
-      return {
-        destroy: function destroy() {
-          experience.abort({
-            reason: _types.EXPERIENCE_ABORT_REASON.EDITOR_DESTROYED
-          });
-          unbindClickListener();
-          unbindKeydownListener();
-        }
-      };
-    }
-  });
-};
-var getCreateSourceExperience = function getCreateSourceExperience(_ref2) {
-  var refs = _ref2.refs,
-    dispatchAnalyticsEvent = _ref2.dispatchAnalyticsEvent;
-  return new _experiences.Experience(_analytics.ACTION_SUBJECT.SYNCED_BLOCK, {
-    actionSubjectId: _analytics.ACTION_SUBJECT_ID.SYNCED_BLOCK_CREATE,
-    dispatchAnalyticsEvent: dispatchAnalyticsEvent,
-    checks: [new _experiences.ExperienceCheckTimeout({
-      durationMs: 3000
-    }), new _experiences.ExperienceCheckDomMutation({
-      onDomMutation: function onDomMutation(_ref3) {
-        var mutations = _ref3.mutations;
-        var createdResourceIds = (0, _experienceTrackingUtils.getAddedResourceIds)(mutations, '[data-prosemirror-node-name="bodiedSyncBlock"]');
-        if (createdResourceIds.length > 0) {
-          return {
-            status: 'success',
-            metadata: {
-              createdResourceIds: createdResourceIds
-            }
-          };
-        }
-        return undefined;
-      },
-      observeConfig: function observeConfig() {
-        return {
-          target: (0, _experienceTrackingUtils.getTarget)(refs.containerElement),
-          options: {
-            childList: true
-          }
-        };
-      }
-    })]
-  });
-};
-var isSyncedBlockCreateButtonId = function isSyncedBlockCreateButtonId(value) {
-  return !!value && syncedBlockCreateButtonIds.has(value);
-};
-var handleButtonClick = function handleButtonClick(testId, experience) {
-  switch (testId) {
-    case 'create-synced-block-toolbar-btn':
-      experience.start({
-        method: START_METHOD.PINNED_TOOLBAR
-      });
-      break;
-    case 'create-synced-block-block-menu-btn':
-      experience.start({
-        method: START_METHOD.BLOCK_MENU
-      });
-      break;
-    case 'create-synced-block-quick-insert-btn':
-      experience.start({
-        method: START_METHOD.QUICK_INSERT
-      });
-      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';
-};