@atlaskit/editor-plugin-synced-block 5.1.9 → 5.1.10

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

@@ -0,0 +1,98 @@
+import { bind } from 'bind-event-listener';
+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';
+import { EXPERIENCE_ABORT_REASON } from '../../types';
+import { getRemovedResourceIds, getTarget } from '../utils/experience-tracking-utils';
+const pluginKey = new PluginKey('deleteSourceSyncBlockExperience');
+const START_METHOD = {
+  DELETE_CONFIRM_BUTTON: 'delete-confirm-button'
+};
+
+/**
+ * This experience tracks when a source sync block is deleted.
+ *
+ * Start: When user clicks the delete button in the delete modal
+ * Success: When the sync block is removed from the DOM within 2000ms of start
+ * Failure: When 2000ms passes without the source sync block being removed from the DOM
+ */
+export const getDeleteSourceExperiencePlugin = ({
+  refs,
+  dispatchAnalyticsEvent,
+  syncBlockStore
+}) => {
+  const experience = getDeleteSourceExperience({
+    refs,
+    dispatchAnalyticsEvent
+  });
+  syncBlockStore.sourceManager.setDeleteExperience(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 (isSyncedBlockDeleteButtonId(testId)) {
+        experience.start({
+          method: START_METHOD.DELETE_CONFIRM_BUTTON
+        });
+      }
+    }
+  });
+  return new SafePlugin({
+    key: pluginKey,
+    view: () => {
+      return {
+        destroy: () => {
+          experience.abort({
+            reason: EXPERIENCE_ABORT_REASON.EDITOR_DESTROYED
+          });
+          unbindClickListener();
+        }
+      };
+    }
+  });
+};
+export const getDeleteSourceExperience = ({
+  refs,
+  dispatchAnalyticsEvent
+}) => {
+  return new Experience(ACTION_SUBJECT.SYNCED_BLOCK, {
+    actionSubjectId: ACTION_SUBJECT_ID.SYNCED_BLOCK_DELETE,
+    dispatchAnalyticsEvent,
+    checks: [new ExperienceCheckTimeout({
+      durationMs: 2000
+    }), new ExperienceCheckDomMutation({
+      onDomMutation: ({
+        mutations
+      }) => {
+        const deletedResourceIds = getRemovedResourceIds(mutations, '[data-prosemirror-node-name="bodiedSyncBlock"]');
+        if (deletedResourceIds.length > 0) {
+          return {
+            status: 'success',
+            metadata: {
+              deletedResourceIds
+            }
+          };
+        }
+        return undefined;
+      },
+      observeConfig: () => {
+        return {
+          target: getTarget(refs.containerElement),
+          options: {
+            childList: true
+          }
+        };
+      }
+    })]
+  });
+};
+const isSyncedBlockDeleteButtonId = testId => testId === 'synced-block-delete-confirmation-modal-delete-button';

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

@@ -1,5 +1,8 @@
 import { getCreateReferenceExperiencePlugin } from "./create-reference-experience";
 import { getCreateSourceExperiencePlugin } from "./create-source-experience";
+import { getDeleteReferenceExperiencePlugin } from "./delete-reference-experience";
+import { getDeleteSourceExperiencePlugin } from "./delete-source-experience";
+import { getProviderOnlyExperiencesPlugin } from "./provider-only-experiences";
 export const getExperienceTrackingPlugins = ({
   refs,
   dispatchAnalyticsEvent,
@@ -18,5 +21,26 @@ export const getExperienceTrackingPlugins = ({
       dispatchAnalyticsEvent,
       syncBlockStore
     })
+  }, {
+    name: 'deleteSourceExperiencePlugin',
+    plugin: () => getDeleteSourceExperiencePlugin({
+      refs,
+      dispatchAnalyticsEvent,
+      syncBlockStore
+    })
+  }, {
+    name: 'deleteReferenceExperiencePlugin',
+    plugin: () => getDeleteReferenceExperiencePlugin({
+      refs,
+      dispatchAnalyticsEvent,
+      syncBlockStore
+    })
+  }, {
+    name: 'providerOnlySyncedBlockExperiencesPlugin',
+    plugin: () => getProviderOnlyExperiencesPlugin({
+      refs,
+      dispatchAnalyticsEvent,
+      syncBlockStore
+    })
   }];
 };

package/dist/es2019/pm-plugins/experience-tracking/provider-only-experiences.js

@@ -0,0 +1,127 @@
+import { ACTION_SUBJECT, ACTION_SUBJECT_ID } from '@atlaskit/editor-common/analytics';
+import { Experience, ExperienceCheckTimeout } from '@atlaskit/editor-common/experiences';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { PluginKey } from '@atlaskit/editor-prosemirror/state';
+import { EXPERIENCE_ABORT_REASON } from '../../types';
+const pluginKey = new PluginKey('providerOnlySyncBlockExperiences');
+export const getProviderOnlyExperiencesPlugin = ({
+  refs,
+  dispatchAnalyticsEvent,
+  syncBlockStore
+}) => {
+  const saveSourceExperience = getSaveSourceExperience({
+    refs,
+    dispatchAnalyticsEvent
+  });
+  syncBlockStore.sourceManager.setSaveExperience(saveSourceExperience);
+  const saveReferenceExperience = getSaveReferenceExperience({
+    refs,
+    dispatchAnalyticsEvent
+  });
+  const fetchExperience = getFetchExperience({
+    refs,
+    dispatchAnalyticsEvent
+  });
+  const fetchSourceInfoExperience = getFetchSourceInfoExperience({
+    refs,
+    dispatchAnalyticsEvent
+  });
+  syncBlockStore.referenceManager.setExperiences(fetchExperience, fetchSourceInfoExperience, saveReferenceExperience);
+  return new SafePlugin({
+    key: pluginKey,
+    view: () => {
+      return {
+        destroy: () => {
+          saveSourceExperience.abort({
+            reason: EXPERIENCE_ABORT_REASON.EDITOR_DESTROYED
+          });
+          saveReferenceExperience.abort({
+            reason: EXPERIENCE_ABORT_REASON.EDITOR_DESTROYED
+          });
+          fetchExperience.abort({
+            reason: EXPERIENCE_ABORT_REASON.EDITOR_DESTROYED
+          });
+          fetchSourceInfoExperience.abort({
+            reason: EXPERIENCE_ABORT_REASON.EDITOR_DESTROYED
+          });
+        }
+      };
+    }
+  });
+};
+
+/**
+ * This experience tracks when a source sync block is saved to the BE.
+ *
+ * Start: When the flush source sync block function is called.
+ * Success: When the sync block save is successful within 1500ms of start.
+ * Failure: When 1500ms passes without the sync block being successfully saved
+ */
+const getSaveSourceExperience = ({
+  dispatchAnalyticsEvent
+}) => {
+  return new Experience(ACTION_SUBJECT.SYNCED_BLOCK, {
+    actionSubjectId: ACTION_SUBJECT_ID.SYNCED_BLOCK_UPDATE,
+    dispatchAnalyticsEvent,
+    checks: [new ExperienceCheckTimeout({
+      durationMs: 1500
+    })]
+  });
+};
+
+/**
+ * This experience tracks when a reference sync block is saved to the BE.
+ *
+ * Start: When the flush sync block function is called.
+ * Success: When the sync block save is successful within 1500ms of start.
+ * Failure: When 1500ms passes without the sync block being successfully saved
+ */
+const getSaveReferenceExperience = ({
+  dispatchAnalyticsEvent
+}) => {
+  return new Experience(ACTION_SUBJECT.SYNCED_BLOCK, {
+    actionSubjectId: ACTION_SUBJECT_ID.REFERENCE_SYNCED_BLOCK_UPDATE,
+    dispatchAnalyticsEvent,
+    checks: [new ExperienceCheckTimeout({
+      durationMs: 1500
+    })]
+  });
+};
+
+/**
+ * This experience tracks when a reference sync block data is fetched from the BE.
+ *
+ * Start: When the fetchNodesData function is called.
+ * Success: When the fetching the data is successful within 1500ms of start.
+ * Failure: When 1500ms passes without the data being successfully fetched, or the fetch fails
+ */
+const getFetchExperience = ({
+  dispatchAnalyticsEvent
+}) => {
+  return new Experience(ACTION_SUBJECT.SYNCED_BLOCK, {
+    actionSubjectId: ACTION_SUBJECT_ID.SYNCED_BLOCK_FETCH,
+    dispatchAnalyticsEvent,
+    checks: [new ExperienceCheckTimeout({
+      durationMs: 1500
+    })]
+  });
+};
+
+/**
+ * This experience tracks when a reference sync block source info data (title, url) is fetched from the BE.
+ *
+ * Start: When the fetchSourceInfo function is called.
+ * Success: When the fetching the data is successful within 2500ms of start.
+ * Failure: When 2500ms passes without the data being successfully fetched, or the fetch fails
+ */
+const getFetchSourceInfoExperience = ({
+  dispatchAnalyticsEvent
+}) => {
+  return new Experience(ACTION_SUBJECT.SYNCED_BLOCK, {
+    actionSubjectId: ACTION_SUBJECT_ID.SYNCED_BLOCK_GET_SOURCE_INFO,
+    dispatchAnalyticsEvent,
+    checks: [new ExperienceCheckTimeout({
+      durationMs: 2500
+    })]
+  });
+};

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

@@ -0,0 +1,65 @@
+import { pmHistoryPluginKey } from '@atlaskit/editor-common/utils';
+import { findChildren } from '@atlaskit/editor-prosemirror/utils';
+let targetEl;
+export 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;
+};
+export const wasSyncBlockDeletedOrAddedByHistory = (tr, oldState, newState) => {
+  const historyMeta = tr.getMeta(pmHistoryPluginKey);
+  if (!Boolean(historyMeta)) {
+    return {};
+  }
+  const {
+    syncBlock
+  } = newState.schema.nodes;
+  const oldSyncBlockNodes = findChildren(oldState.doc, node => node.type === syncBlock);
+  const newSyncBlockNodes = findChildren(newState.doc, node => node.type === syncBlock);
+  const oldSyncBlockIds = new Set(oldSyncBlockNodes.map(nodeWithPos => nodeWithPos.node.attrs.localId).filter(localId => Boolean(localId)));
+  const newSyncBlockIds = new Set(newSyncBlockNodes.map(nodeWithPos => nodeWithPos.node.attrs.localId).filter(localId => Boolean(localId)));
+  const hasDeletedSyncBlock = Array.from(oldSyncBlockIds).some(localId => !newSyncBlockIds.has(localId));
+  const hasAddedSyncBlock = Array.from(newSyncBlockIds).some(localId => !oldSyncBlockIds.has(localId));
+  return {
+    hasDeletedSyncBlock,
+    hasAddedSyncBlock,
+    isUndo: historyMeta.redo === false
+  };
+};
+const getResourceIds = (nodes, resourceIds, query) => {
+  nodes.forEach(node => {
+    if (!(node instanceof HTMLElement)) {
+      return;
+    }
+    const syncBlockElements = node.querySelectorAll(query);
+    syncBlockElements.forEach(element => {
+      const resourceId = element.getAttribute('resourceid');
+      if (resourceId) {
+        resourceIds.push(resourceId);
+      }
+    });
+  });
+};
+export const getAddedResourceIds = (mutations, query) => {
+  const resourceIds = [];
+  mutations.forEach(mutation => {
+    if (mutation.type === 'childList') {
+      getResourceIds(mutation.addedNodes, resourceIds, query);
+    }
+  });
+  return resourceIds;
+};
+export const getRemovedResourceIds = (mutations, query) => {
+  const resourceIds = [];
+  mutations.forEach(mutation => {
+    if (mutation.type === 'childList') {
+      getResourceIds(mutation.removedNodes, resourceIds, query);
+    }
+  });
+  return resourceIds;
+};

package/dist/es2019/types/index.js

@@ -5,4 +5,7 @@ export let FLAG_ID = /*#__PURE__*/function (FLAG_ID) {
   FLAG_ID["FAIL_TO_DELETE"] = "fail-to-delete";
   FLAG_ID["SYNC_BLOCK_COPIED"] = "sync-block-copied";
   return FLAG_ID;
-}({});
+}({});
+export const EXPERIENCE_ABORT_REASON = {
+  EDITOR_DESTROYED: 'editor-destroyed'
+};

package/dist/es2019/ui/CreateSyncedBlockDropdownItem.js

@@ -43,17 +43,48 @@ const CreateSyncedBlockDropdownItem = ({
     }),
     onClick: onClick,
     isDisabled: isOffline,
-    testId: 'create-synced-block-block-menu-btn',
+    testId: "create-synced-block-block-menu-btn",
     elemAfter: /*#__PURE__*/React.createElement(Lozenge, {
       appearance: "new"
     }, formatMessage(blockMenuMessages.newLozenge))
   }, formatMessage(blockMenuMessages.createSyncedBlock));
 };
+const CopySyncedBlockDropdownItem = ({
+  api
+}) => {
+  const {
+    formatMessage
+  } = useIntl();
+  const {
+    mode
+  } = useSharedPluginStateWithSelector(api, ['connectivity'], states => {
+    var _states$connectivityS2;
+    return {
+      mode: (_states$connectivityS2 = states.connectivityState) === null || _states$connectivityS2 === void 0 ? void 0 : _states$connectivityS2.mode
+    };
+  });
+  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$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
+    }));
+  };
+  return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
+    elemBefore: /*#__PURE__*/React.createElement(SyncBlocksIcon, {
+      label: ""
+    }),
+    onClick: onClick,
+    isDisabled: isOfflineMode(mode),
+    elemAfter: /*#__PURE__*/React.createElement(Lozenge, {
+      appearance: "new"
+    }, formatMessage(blockMenuMessages.newLozenge))
+  }, formatMessage(blockMenuMessages.copySyncedBlock));
+};
 export const CreateOrCopySyncedBlockDropdownItem = ({
   api,
   enableSourceSyncedBlockCreation
 }) => {
-  var _menuTriggerByNode$no;
   const {
     menuTriggerByNode
   } = useSharedPluginStateWithSelector(api, ['blockControls'], states => {
@@ -62,7 +93,11 @@ export const CreateOrCopySyncedBlockDropdownItem = ({
       menuTriggerByNode: (_states$blockControls3 = (_states$blockControls4 = states.blockControlsState) === null || _states$blockControls4 === void 0 ? void 0 : _states$blockControls4.menuTriggerByNode) !== null && _states$blockControls3 !== void 0 ? _states$blockControls3 : undefined
     };
   });
-  if (!['syncBlock', 'bodiedSyncBlock'].includes((_menuTriggerByNode$no = menuTriggerByNode === null || menuTriggerByNode === void 0 ? void 0 : menuTriggerByNode.nodeType) !== null && _menuTriggerByNode$no !== void 0 ? _menuTriggerByNode$no : '') && enableSourceSyncedBlockCreation) {
+  if ((menuTriggerByNode === null || menuTriggerByNode === void 0 ? void 0 : menuTriggerByNode.nodeType) === 'syncBlock' || (menuTriggerByNode === null || menuTriggerByNode === void 0 ? void 0 : menuTriggerByNode.nodeType) === 'bodiedSyncBlock') {
+    return /*#__PURE__*/React.createElement(CopySyncedBlockDropdownItem, {
+      api: api
+    });
+  } else if (enableSourceSyncedBlockCreation) {
     return /*#__PURE__*/React.createElement(CreateSyncedBlockDropdownItem, {
       api: api
     });

package/dist/es2019/ui/DeleteConfirmationModal.js

@@ -5,6 +5,7 @@ import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks'
 import { syncBlockMessages as messages } from '@atlaskit/editor-common/messages';
 import { isOfflineMode } from '@atlaskit/editor-plugin-connectivity';
 import ModalDialog, { ModalBody, ModalFooter, ModalHeader, ModalTitle, ModalTransition } from '@atlaskit/modal-dialog';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { Text } from '@atlaskit/primitives/compiled';
 import { syncedBlockPluginKey } from '../pm-plugins/main';
 export const DeleteConfirmationModal = ({
@@ -105,6 +106,7 @@ export const DeleteConfirmationModal = ({
     onClick: handleClick(true),
     autoFocus: true,
     isDisabled: isOfflineMode(mode),
-    isLoading: bodiedSyncBlockDeletionStatus === 'processing'
+    isLoading: bodiedSyncBlockDeletionStatus === 'processing',
+    testId: fg('platform_synced_block_dogfooding') ? 'synced-block-delete-confirmation-modal-delete-button' : undefined
   }, formatMessage(messages.deleteConfirmationModalDeleteButton)))));
 };

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

@@ -6,6 +6,7 @@ import { SyncBlockError } from '@atlaskit/editor-synced-block-provider';
 import CopyIcon from '@atlaskit/icon/core/copy';
 import DeleteIcon from '@atlaskit/icon/core/delete';
 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';
 export const getToolbarConfig = (state, intl, api, syncBlockStore) => {
@@ -42,6 +43,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,
       ...hoverDecorationProps(nodeType, akEditorSelectedNodeClassName)
     };
     items.push(deleteButton);
@@ -53,7 +55,7 @@ export const getToolbarConfig = (state, intl, api, syncBlockStore) => {
       icon: CopyIcon,
       title: formatMessage(messages.copySyncBlockLabel),
       showTitle: false,
-      tooltipContent: formatMessage(messages.copySyncBlockTooltip),
+      tooltipContent: formatMessage(messages.copySyncedBlockTooltip),
       onClick: copySyncedBlockReferenceToClipboard(syncBlockStore, api),
       ...hoverDecorationProps(nodeType, akEditorSelectedNodeClassName)
     };

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

@@ -53,8 +53,8 @@ export var createSyncedBlock = function createSyncedBlock(_ref) {
     syncBlockStore.sourceManager.createBodiedSyncBlockNode(_attrs);
     tr.replaceWith(conversionInfo.from > 0 ? conversionInfo.from - 1 : 0, conversionInfo.to, _newBodiedSyncBlockNode).scrollIntoView();
 
-    // set selection to the end of the previous selection + 1 for the position taken up by the start of the new synced block
-    tr.setSelection(TextSelection.create(tr.doc, conversionInfo.to + 1));
+    // set selection to the start of the previous selection for the position taken up by the start of the new synced block
+    tr.setSelection(TextSelection.create(tr.doc, conversionInfo.from));
   }
 
   // This transaction will be intercepted in filterTransaction and dispatched when saving to backend succeeds

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

@@ -1,17 +1,17 @@
-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';
+import { EXPERIENCE_ABORT_REASON } from '../../types';
+import { getAddedResourceIds, wasSyncBlockDeletedOrAddedByHistory, getTarget } from '../utils/experience-tracking-utils';
 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'
+  PASTE: 'paste',
+  UNDO: 'undo',
+  REDO: 'redo'
 };
 
 /**
@@ -34,7 +34,7 @@ export var getCreateReferenceExperiencePlugin = function getCreateReferenceExper
       return {
         destroy: function destroy() {
           experience.abort({
-            reason: ABORT_REASON.EDITOR_DESTROYED
+            reason: EXPERIENCE_ABORT_REASON.EDITOR_DESTROYED
           });
         }
       };
@@ -56,6 +56,19 @@ export var getCreateReferenceExperiencePlugin = function getCreateReferenceExper
           });
         }
       }
+    },
+    appendTransaction: function appendTransaction(transactions, oldState, newState) {
+      transactions.forEach(function (tr) {
+        var _wasSyncBlockDeletedO = wasSyncBlockDeletedOrAddedByHistory(tr, oldState, newState),
+          hasAddedSyncBlock = _wasSyncBlockDeletedO.hasAddedSyncBlock,
+          isUndo = _wasSyncBlockDeletedO.isUndo;
+        if (hasAddedSyncBlock) {
+          experience.start({
+            method: isUndo ? START_METHOD.UNDO : START_METHOD.REDO
+          });
+        }
+      });
+      return null;
     }
   });
 };
@@ -70,21 +83,20 @@ var getCreateReferenceExperience = function getCreateReferenceExperience(_ref2)
     }), new ExperienceCheckDomMutation({
       onDomMutation: function onDomMutation(_ref3) {
         var mutations = _ref3.mutations;
-        if (mutations.some(isReferenceSyncBlockAddedInMutation)) {
+        var insertedResourceIds = getAddedResourceIds(mutations, '[data-prosemirror-node-name="syncBlock"]');
+        if (insertedResourceIds.length > 0) {
           return {
-            status: 'success'
+            status: 'success',
+            metadata: {
+              insertedResourceIds: insertedResourceIds
+            }
           };
         }
         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,
+          target: getTarget(refs.containerElement),
           options: {
             childList: true
           }
@@ -92,15 +104,4 @@ var getCreateReferenceExperience = function getCreateReferenceExperience(_ref2)
       }
     })]
   });
-};
-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

@@ -1,13 +1,11 @@
-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';
+import { EXPERIENCE_ABORT_REASON } from '../../types';
+import { getAddedResourceIds, getTarget } from '../utils/experience-tracking-utils';
 var pluginKey = new PluginKey('createSourceSyncBlockExperience');
-var ABORT_REASON = {
-  EDITOR_DESTROYED: 'editor-destroyed'
-};
 var START_METHOD = {
   BLOCK_MENU: 'block-menu',
   PINNED_TOOLBAR: 'pinned-toolbar',
@@ -20,8 +18,8 @@ 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
+ * 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
  */
 export var getCreateSourceExperiencePlugin = function getCreateSourceExperiencePlugin(_ref) {
   var refs = _ref.refs,
@@ -37,8 +35,7 @@ export var getCreateSourceExperiencePlugin = function getCreateSourceExperienceP
   };
   var experience = getCreateSourceExperience({
     refs: refs,
-    dispatchAnalyticsEvent: dispatchAnalyticsEvent,
-    syncBlockStore: syncBlockStore
+    dispatchAnalyticsEvent: dispatchAnalyticsEvent
   });
   syncBlockStore.sourceManager.setCreateExperience(experience);
   var unbindClickListener = bind(document, {
@@ -90,7 +87,7 @@ export var getCreateSourceExperiencePlugin = function getCreateSourceExperienceP
       return {
         destroy: function destroy() {
           experience.abort({
-            reason: ABORT_REASON.EDITOR_DESTROYED
+            reason: EXPERIENCE_ABORT_REASON.EDITOR_DESTROYED
           });
           unbindClickListener();
           unbindKeydownListener();
@@ -106,25 +103,24 @@ var getCreateSourceExperience = function getCreateSourceExperience(_ref2) {
     actionSubjectId: ACTION_SUBJECT_ID.SYNCED_BLOCK_CREATE,
     dispatchAnalyticsEvent: dispatchAnalyticsEvent,
     checks: [new ExperienceCheckTimeout({
-      durationMs: 2000
+      durationMs: 3000
     }), new ExperienceCheckDomMutation({
       onDomMutation: function onDomMutation(_ref3) {
         var mutations = _ref3.mutations;
-        if (mutations.some(isSourceSyncBlockAddedInMutation)) {
+        var createdResourceIds = getAddedResourceIds(mutations, '[data-prosemirror-node-name="bodiedSyncBlock"]');
+        if (createdResourceIds.length > 0) {
           return {
-            status: 'success'
+            status: 'success',
+            metadata: {
+              createdResourceIds: createdResourceIds
+            }
           };
         }
         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,
+          target: getTarget(refs.containerElement),
           options: {
             childList: true
           }
@@ -164,15 +160,4 @@ var handleButtonClick = function handleButtonClick(testId, experience) {
 };
 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"]');
 };