@atlaskit/editor-plugin-synced-block 5.1.0 → 5.1.1

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

@@ -0,0 +1,179 @@
+import { bind } from 'bind-event-listener';
+import { ACTION_SUBJECT, ACTION_SUBJECT_ID } from '@atlaskit/editor-common/analytics';
+import { Experience, ExperienceCheckDomMutation, ExperienceCheckTimeout, getPopupContainerFromEditorView, popupWithNestedElement } from '@atlaskit/editor-common/experiences';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { PluginKey } from '@atlaskit/editor-prosemirror/state';
+const pluginKey = new PluginKey('createSourceSyncBlockExperience');
+const ABORT_REASON = {
+  EDITOR_DESTROYED: 'editor-destroyed'
+};
+const START_METHOD = {
+  BLOCK_MENU: 'block-menu',
+  PINNED_TOOLBAR: 'pinned-toolbar',
+  QUICK_INSERT: 'quick-insert'
+};
+const SYNCED_BLOCK_CREATE_BUTTON_IDS = ['create-synced-block-toolbar-btn', 'create-synced-block-block-menu-btn', 'create-synced-block-quick-insert-btn'];
+const 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 2000ms of start
+ * Failure: When 500ms passes without the source sync block being added to the DOM
+ */
+export const getCreateSourceExperiencePlugin = ({
+  refs,
+  dispatchAnalyticsEvent,
+  syncBlockStore
+}) => {
+  let popupsTargetEl;
+  let editorViewEl;
+  const getPopupsTarget = () => {
+    if (!popupsTargetEl) {
+      popupsTargetEl = refs.popupsMountPoint || refs.wrapperElement || getPopupContainerFromEditorView(editorViewEl);
+    }
+    return popupsTargetEl;
+  };
+  const experience = getCreateSourceExperience({
+    refs,
+    dispatchAnalyticsEvent,
+    syncBlockStore
+  });
+  syncBlockStore.sourceManager.setCreateExperience(experience);
+  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 (!isSyncedBlockCreateButtonId(testId)) {
+        return;
+      }
+      handleButtonClick(testId, experience);
+    }
+  });
+  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 === 'create-synced-block-quick-insert-btn') {
+          experience.start({
+            method: START_METHOD.QUICK_INSERT
+          });
+        }
+      }
+    },
+    options: {
+      capture: true
+    }
+  });
+  return new SafePlugin({
+    key: pluginKey,
+    view: editorView => {
+      editorViewEl = editorView.dom;
+      return {
+        destroy: () => {
+          experience.abort({
+            reason: ABORT_REASON.EDITOR_DESTROYED
+          });
+          unbindClickListener();
+          unbindKeydownListener();
+        }
+      };
+    }
+  });
+};
+const getCreateSourceExperience = ({
+  refs,
+  dispatchAnalyticsEvent
+}) => {
+  return new Experience(ACTION_SUBJECT.SYNCED_BLOCK, {
+    actionSubjectId: ACTION_SUBJECT_ID.SYNCED_BLOCK_CREATE,
+    dispatchAnalyticsEvent,
+    checks: [new ExperienceCheckTimeout({
+      durationMs: 2000
+    }), new ExperienceCheckDomMutation({
+      onDomMutation: ({
+        mutations
+      }) => {
+        if (mutations.some(isSourceSyncBlockAddedInMutation)) {
+          return {
+            status: 'success'
+          };
+        }
+        return undefined;
+      },
+      observeConfig: () => {
+        var _refs$containerElemen;
+        const proseMirrorElement = (_refs$containerElemen = refs.containerElement) === null || _refs$containerElemen === void 0 ? void 0 : _refs$containerElemen.querySelector('.ProseMirror');
+        if (!proseMirrorElement || !(proseMirrorElement instanceof HTMLElement)) {
+          return null;
+        }
+        return {
+          target: proseMirrorElement,
+          options: {
+            childList: true
+          }
+        };
+      }
+    })]
+  });
+};
+const isSyncedBlockCreateButtonId = value => {
+  return !!value && syncedBlockCreateButtonIds.has(value);
+};
+const 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.
+        const _exhaustiveCheck = testId;
+        return _exhaustiveCheck;
+      }
+  }
+};
+const isEnterKey = key => {
+  return key === 'Enter';
+};
+const isSourceSyncBlockAddedInMutation = ({
+  type,
+  addedNodes
+}) => type === 'childList' && [...addedNodes].some(isSourceSyncBlockNode);
+const isSourceSyncBlockNode = node => {
+  if (!(node instanceof HTMLElement)) {
+    return false;
+  }
+  return !!node.querySelector('[data-prosemirror-node-name="bodiedSyncBlock"]');
+};

package/dist/es2019/pm-plugins/experience-tracking/get-experience-tracking-plugins.js

@@ -0,0 +1,22 @@
+import { getCreateReferenceExperiencePlugin } from "./create-reference-experience";
+import { getCreateSourceExperiencePlugin } from "./create-source-experience";
+export const getExperienceTrackingPlugins = ({
+  refs,
+  dispatchAnalyticsEvent,
+  syncBlockStore
+}) => {
+  return [{
+    name: 'createReferenceSyncedBlockExperiencePlugin',
+    plugin: () => getCreateReferenceExperiencePlugin({
+      refs,
+      dispatchAnalyticsEvent
+    })
+  }, {
+    name: 'createSourceSyncedBlockExperiencePlugin',
+    plugin: () => getCreateSourceExperiencePlugin({
+      refs,
+      dispatchAnalyticsEvent,
+      syncBlockStore
+    })
+  }];
+};

package/dist/es2019/syncedBlockPlugin.js

@@ -4,8 +4,10 @@ import { blockTypeMessages } from '@atlaskit/editor-common/messages';
 import { IconSyncBlock } from '@atlaskit/editor-common/quick-insert';
 import { SyncBlockStoreManager } from '@atlaskit/editor-synced-block-provider';
 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 { getBlockMenuComponents } from './ui/block-menu-components';
 import { DeleteConfirmationModal } from './ui/DeleteConfirmationModal';
@@ -18,6 +20,7 @@ export const syncedBlockPlugin = ({
   api
 }) => {
   var _api$analytics, _api$analytics$action, _api$blockMenu, _config$enableSourceC, _api$toolbar, _config$enableSourceC2;
+  const refs = {};
   const syncBlockStore = new SyncBlockStoreManager(config === null || config === void 0 ? void 0 : config.syncBlockDataProvider);
   syncBlockStore.setFireAnalyticsEvent(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);
   api === null || api === void 0 ? void 0 : (_api$blockMenu = api.blockMenu) === null || _api$blockMenu === void 0 ? void 0 : _api$blockMenu.actions.registerBlockMenuComponents(getBlockMenuComponents(api, (_config$enableSourceC = config === null || config === void 0 ? void 0 : config.enableSourceCreation) !== null && _config$enableSourceC !== void 0 ? _config$enableSourceC : false));
@@ -37,7 +40,14 @@ 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
+      }) : [])];
     },
     commands: {
       copySyncedBlockReferenceToClipboard: () => copySyncedBlockReferenceToClipboardEditorCommand(syncBlockStore, api),
@@ -88,12 +98,20 @@ export const syncedBlockPlugin = ({
               syncBlockStore,
               typeAheadInsert: insert
             });
-          }
+          },
+          testId: fg('platform_synced_block_dogfooding') ? 'create-synced-block-quick-insert-btn' : undefined
         }];
       },
       floatingToolbar: (state, intl) => getToolbarConfig(state, intl, api, syncBlockStore)
     },
-    contentComponent: () => {
+    contentComponent: ({
+      containerElement,
+      wrapperElement,
+      popupsMountPoint
+    }) => {
+      refs.containerElement = containerElement || undefined;
+      refs.popupsMountPoint = popupsMountPoint || undefined;
+      refs.wrapperElement = wrapperElement || undefined;
       return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SyncBlockRefresher, {
         syncBlockStoreManager: syncBlockStore,
         api: api

package/dist/es2019/ui/CreateSyncedBlockButton.js

@@ -45,6 +45,7 @@ export const CreateSyncedBlockButton = ({
       label: ""
     }),
     isDisabled: isDisabled,
+    testId: "create-synced-block-toolbar-btn",
     onClick: onClick
   }));
 };

package/dist/es2019/ui/CreateSyncedBlockDropdownItem.js

@@ -43,6 +43,7 @@ const CreateSyncedBlockDropdownItem = ({
     }),
     onClick: onClick,
     isDisabled: isOffline,
+    testId: "create-synced-block-block-menu-btn",
     elemAfter: /*#__PURE__*/React.createElement(Lozenge, {
       appearance: "new"
     }, formatMessage(blockMenuMessages.newLozenge))

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

@@ -2,6 +2,7 @@ import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit
 import { copyDomNode, toDOM } from '@atlaskit/editor-common/copy-button';
 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';
@@ -33,7 +34,12 @@ export var createSyncedBlock = function createSyncedBlock(_ref) {
   } else {
     var conversionInfo = canBeConvertedToSyncBlock(tr.selection);
     if (!conversionInfo) {
-      // TODO: EDITOR-1665 - Raise an error analytics event
+      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'
+        });
+      }
       return false;
     }
     var _attrs = syncBlockStore.sourceManager.generateBodiedSyncBlockAttrs();

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

@@ -0,0 +1,106 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import { ACTION_SUBJECT, ACTION_SUBJECT_ID } from '@atlaskit/editor-common/analytics';
+import { Experience, ExperienceCheckDomMutation, ExperienceCheckTimeout } from '@atlaskit/editor-common/experiences';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { PluginKey } from '@atlaskit/editor-prosemirror/state';
+var isPastedFromFabricEditor = function isPastedFromFabricEditor(html) {
+  return !!html && html.indexOf('data-pm-slice="') >= 0;
+};
+var pluginKey = new PluginKey('createReferenceSyncBlockExperience');
+var START_METHOD = {
+  PASTE: 'paste'
+};
+var ABORT_REASON = {
+  EDITOR_DESTROYED: 'editor-destroyed'
+};
+
+/**
+ * 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
+ */
+export var getCreateReferenceExperiencePlugin = function getCreateReferenceExperiencePlugin(_ref) {
+  var refs = _ref.refs,
+    dispatchAnalyticsEvent = _ref.dispatchAnalyticsEvent;
+  var experience = getCreateReferenceExperience({
+    refs: refs,
+    dispatchAnalyticsEvent: dispatchAnalyticsEvent
+  });
+  return new SafePlugin({
+    key: pluginKey,
+    view: function view() {
+      return {
+        destroy: function destroy() {
+          experience.abort({
+            reason: 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
+              });
+            }
+          });
+        }
+      }
+    }
+  });
+};
+var getCreateReferenceExperience = function getCreateReferenceExperience(_ref2) {
+  var refs = _ref2.refs,
+    dispatchAnalyticsEvent = _ref2.dispatchAnalyticsEvent;
+  return new Experience(ACTION_SUBJECT.SYNCED_BLOCK, {
+    actionSubjectId: ACTION_SUBJECT_ID.REFERENCE_SYNCED_BLOCK_CREATE,
+    dispatchAnalyticsEvent: dispatchAnalyticsEvent,
+    checks: [new ExperienceCheckTimeout({
+      durationMs: 500
+    }), new ExperienceCheckDomMutation({
+      onDomMutation: function onDomMutation(_ref3) {
+        var mutations = _ref3.mutations;
+        if (mutations.some(isReferenceSyncBlockAddedInMutation)) {
+          return {
+            status: 'success'
+          };
+        }
+        return undefined;
+      },
+      observeConfig: function observeConfig() {
+        var _refs$containerElemen;
+        var proseMirrorElement = (_refs$containerElemen = refs.containerElement) === null || _refs$containerElemen === void 0 ? void 0 : _refs$containerElemen.querySelector('.ProseMirror');
+        if (!proseMirrorElement || !(proseMirrorElement instanceof HTMLElement)) {
+          return null;
+        }
+        return {
+          target: proseMirrorElement,
+          options: {
+            childList: true
+          }
+        };
+      }
+    })]
+  });
+};
+var isReferenceSyncBlockAddedInMutation = function isReferenceSyncBlockAddedInMutation(_ref4) {
+  var type = _ref4.type,
+    addedNodes = _ref4.addedNodes;
+  return type === 'childList' && _toConsumableArray(addedNodes).some(isReferenceSyncBlockNode);
+};
+var isReferenceSyncBlockNode = function isReferenceSyncBlockNode(node) {
+  if (!(node instanceof HTMLElement)) {
+    return false;
+  }
+  return !!node.querySelector('[data-prosemirror-node-name="syncBlock"]');
+};

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

@@ -0,0 +1,178 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import { bind } from 'bind-event-listener';
+import { ACTION_SUBJECT, ACTION_SUBJECT_ID } from '@atlaskit/editor-common/analytics';
+import { Experience, ExperienceCheckDomMutation, ExperienceCheckTimeout, getPopupContainerFromEditorView, popupWithNestedElement } from '@atlaskit/editor-common/experiences';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { PluginKey } from '@atlaskit/editor-prosemirror/state';
+var pluginKey = new PluginKey('createSourceSyncBlockExperience');
+var ABORT_REASON = {
+  EDITOR_DESTROYED: 'editor-destroyed'
+};
+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 2000ms of start
+ * Failure: When 500ms passes without the source sync block being added to the DOM
+ */
+export var 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 || getPopupContainerFromEditorView(editorViewEl);
+    }
+    return popupsTargetEl;
+  };
+  var experience = getCreateSourceExperience({
+    refs: refs,
+    dispatchAnalyticsEvent: dispatchAnalyticsEvent,
+    syncBlockStore: syncBlockStore
+  });
+  syncBlockStore.sourceManager.setCreateExperience(experience);
+  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 (!isSyncedBlockCreateButtonId(testId)) {
+        return;
+      }
+      handleButtonClick(testId, experience);
+    }
+  });
+  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 === 'create-synced-block-quick-insert-btn') {
+          experience.start({
+            method: START_METHOD.QUICK_INSERT
+          });
+        }
+      }
+    },
+    options: {
+      capture: true
+    }
+  });
+  return new SafePlugin({
+    key: pluginKey,
+    view: function view(editorView) {
+      editorViewEl = editorView.dom;
+      return {
+        destroy: function destroy() {
+          experience.abort({
+            reason: ABORT_REASON.EDITOR_DESTROYED
+          });
+          unbindClickListener();
+          unbindKeydownListener();
+        }
+      };
+    }
+  });
+};
+var getCreateSourceExperience = function getCreateSourceExperience(_ref2) {
+  var refs = _ref2.refs,
+    dispatchAnalyticsEvent = _ref2.dispatchAnalyticsEvent;
+  return new Experience(ACTION_SUBJECT.SYNCED_BLOCK, {
+    actionSubjectId: ACTION_SUBJECT_ID.SYNCED_BLOCK_CREATE,
+    dispatchAnalyticsEvent: dispatchAnalyticsEvent,
+    checks: [new ExperienceCheckTimeout({
+      durationMs: 2000
+    }), new ExperienceCheckDomMutation({
+      onDomMutation: function onDomMutation(_ref3) {
+        var mutations = _ref3.mutations;
+        if (mutations.some(isSourceSyncBlockAddedInMutation)) {
+          return {
+            status: 'success'
+          };
+        }
+        return undefined;
+      },
+      observeConfig: function observeConfig() {
+        var _refs$containerElemen;
+        var proseMirrorElement = (_refs$containerElemen = refs.containerElement) === null || _refs$containerElemen === void 0 ? void 0 : _refs$containerElemen.querySelector('.ProseMirror');
+        if (!proseMirrorElement || !(proseMirrorElement instanceof HTMLElement)) {
+          return null;
+        }
+        return {
+          target: proseMirrorElement,
+          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';
+};
+var isSourceSyncBlockAddedInMutation = function isSourceSyncBlockAddedInMutation(_ref4) {
+  var type = _ref4.type,
+    addedNodes = _ref4.addedNodes;
+  return type === 'childList' && _toConsumableArray(addedNodes).some(isSourceSyncBlockNode);
+};
+var isSourceSyncBlockNode = function isSourceSyncBlockNode(node) {
+  if (!(node instanceof HTMLElement)) {
+    return false;
+  }
+  return !!node.querySelector('[data-prosemirror-node-name="bodiedSyncBlock"]');
+};

package/dist/esm/pm-plugins/experience-tracking/get-experience-tracking-plugins.js

@@ -0,0 +1,25 @@
+import { getCreateReferenceExperiencePlugin } from "./create-reference-experience";
+import { getCreateSourceExperiencePlugin } from "./create-source-experience";
+export var getExperienceTrackingPlugins = function getExperienceTrackingPlugins(_ref) {
+  var refs = _ref.refs,
+    dispatchAnalyticsEvent = _ref.dispatchAnalyticsEvent,
+    syncBlockStore = _ref.syncBlockStore;
+  return [{
+    name: 'createReferenceSyncedBlockExperiencePlugin',
+    plugin: function plugin() {
+      return getCreateReferenceExperiencePlugin({
+        refs: refs,
+        dispatchAnalyticsEvent: dispatchAnalyticsEvent
+      });
+    }
+  }, {
+    name: 'createSourceSyncedBlockExperiencePlugin',
+    plugin: function plugin() {
+      return getCreateSourceExperiencePlugin({
+        refs: refs,
+        dispatchAnalyticsEvent: dispatchAnalyticsEvent,
+        syncBlockStore: syncBlockStore
+      });
+    }
+  }];
+};

package/dist/esm/syncedBlockPlugin.js

@@ -1,11 +1,14 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import React from 'react';
 import { bodiedSyncBlock, syncBlock } from '@atlaskit/adf-schema';
 import { blockTypeMessages } from '@atlaskit/editor-common/messages';
 import { IconSyncBlock } from '@atlaskit/editor-common/quick-insert';
 import { SyncBlockStoreManager } from '@atlaskit/editor-synced-block-provider';
 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 { getBlockMenuComponents } from './ui/block-menu-components';
 import { DeleteConfirmationModal } from './ui/DeleteConfirmationModal';
@@ -17,6 +20,7 @@ export var syncedBlockPlugin = function syncedBlockPlugin(_ref) {
   var _api$analytics, _api$blockMenu, _config$enableSourceC, _api$toolbar, _config$enableSourceC2;
   var config = _ref.config,
     api = _ref.api;
+  var refs = {};
   var syncBlockStore = new SyncBlockStoreManager(config === null || config === void 0 ? void 0 : config.syncBlockDataProvider);
   syncBlockStore.setFireAnalyticsEvent(api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 || (_api$analytics = _api$analytics.actions) === null || _api$analytics === void 0 ? void 0 : _api$analytics.fireAnalyticsEvent);
   api === null || api === void 0 || (_api$blockMenu = api.blockMenu) === null || _api$blockMenu === void 0 || _api$blockMenu.actions.registerBlockMenuComponents(getBlockMenuComponents(api, (_config$enableSourceC = config === null || config === void 0 ? void 0 : config.enableSourceCreation) !== null && _config$enableSourceC !== void 0 ? _config$enableSourceC : false));
@@ -38,7 +42,14 @@ 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
+      }) : []));
     },
     commands: {
       copySyncedBlockReferenceToClipboard: function copySyncedBlockReferenceToClipboard() {
@@ -93,14 +104,21 @@ export var syncedBlockPlugin = function syncedBlockPlugin(_ref) {
               syncBlockStore: syncBlockStore,
               typeAheadInsert: insert
             });
-          }
+          },
+          testId: fg('platform_synced_block_dogfooding') ? 'create-synced-block-quick-insert-btn' : undefined
         }];
       },
       floatingToolbar: function floatingToolbar(state, intl) {
         return getToolbarConfig(state, intl, api, syncBlockStore);
       }
     },
-    contentComponent: function contentComponent() {
+    contentComponent: function contentComponent(_ref4) {
+      var containerElement = _ref4.containerElement,
+        wrapperElement = _ref4.wrapperElement,
+        popupsMountPoint = _ref4.popupsMountPoint;
+      refs.containerElement = containerElement || undefined;
+      refs.popupsMountPoint = popupsMountPoint || undefined;
+      refs.wrapperElement = wrapperElement || undefined;
       return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SyncBlockRefresher, {
         syncBlockStoreManager: syncBlockStore,
         api: api

package/dist/esm/ui/CreateSyncedBlockButton.js

@@ -44,6 +44,7 @@ export var CreateSyncedBlockButton = function CreateSyncedBlockButton(_ref) {
       label: ""
     }),
     isDisabled: isDisabled,
+    testId: "create-synced-block-toolbar-btn",
     onClick: onClick
   }));
 };