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

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

@@ -0,0 +1,105 @@
+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';
+const isPastedFromFabricEditor = html => !!html && html.indexOf('data-pm-slice="') >= 0;
+const pluginKey = new PluginKey('createReferenceSyncBlockExperience');
+const START_METHOD = {
+  PASTE: 'paste'
+};
+const 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 const getCreateReferenceExperiencePlugin = ({
+  refs,
+  dispatchAnalyticsEvent
+}) => {
+  const experience = getCreateReferenceExperience({
+    refs,
+    dispatchAnalyticsEvent
+  });
+  return new SafePlugin({
+    key: pluginKey,
+    view: () => {
+      return {
+        destroy: () => {
+          experience.abort({
+            reason: ABORT_REASON.EDITOR_DESTROYED
+          });
+        }
+      };
+    },
+    props: {
+      handlePaste: (_view, rawEvent, slice) => {
+        var _event$clipboardData;
+        const event = rawEvent;
+        const 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(node => {
+            if (node.type.name === 'syncBlock' || node.type.name === 'bodiedSyncBlock') {
+              experience.start({
+                method: START_METHOD.PASTE
+              });
+            }
+          });
+        }
+      }
+    }
+  });
+};
+const getCreateReferenceExperience = ({
+  refs,
+  dispatchAnalyticsEvent
+}) => {
+  return new Experience(ACTION_SUBJECT.SYNCED_BLOCK, {
+    actionSubjectId: ACTION_SUBJECT_ID.REFERENCE_SYNCED_BLOCK_CREATE,
+    dispatchAnalyticsEvent,
+    checks: [new ExperienceCheckTimeout({
+      durationMs: 500
+    }), new ExperienceCheckDomMutation({
+      onDomMutation: ({
+        mutations
+      }) => {
+        if (mutations.some(isReferenceSyncBlockAddedInMutation)) {
+          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 isReferenceSyncBlockAddedInMutation = ({
+  type,
+  addedNodes
+}) => type === 'childList' && [...addedNodes].some(isReferenceSyncBlockNode);
+const isReferenceSyncBlockNode = node => {
+  if (!(node instanceof HTMLElement)) {
+    return false;
+  }
+  return !!node.querySelector('[data-prosemirror-node-name="syncBlock"]');
+};

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/pm-plugins/main.js

@@ -6,8 +6,10 @@ import { isOfflineMode } from '@atlaskit/editor-plugin-connectivity';
 import { PluginKey } from '@atlaskit/editor-prosemirror/state';
 import { DecorationSet, Decoration } from '@atlaskit/editor-prosemirror/view';
 import { convertPMNodesToSyncBlockNodes, rebaseTransaction } from '@atlaskit/editor-synced-block-provider';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { lazyBodiedSyncBlockView } from '../nodeviews/bodiedLazySyncedBlock';
 import { lazySyncBlockView } from '../nodeviews/lazySyncedBlock';
+import { SyncBlock as SyncBlockView } from '../nodeviews/syncedBlock';
 import { FLAG_ID } from '../types';
 import { handleBodiedSyncBlockRemoval } from './utils/handle-bodied-sync-block-removal';
 import { shouldIgnoreDomEvent } from './utils/ignore-dom-event';
@@ -72,7 +74,22 @@ export const createPlugin = (options, pmPluginFactoryParams, syncBlockStore, api
     },
     props: {
       nodeViews: {
-        syncBlock: lazySyncBlockView({
+        syncBlock: fg('platform_synced_block_dogfooding') ? (node, view, getPos, _decorations) => {
+          // To support SSR, pass `syncBlockStore` here
+          // and do not use lazy loading.
+          // We cannot start rendering and then load `syncBlockStore` asynchronously,
+          // because obtaining it is asynchronous (sharedPluginState.currentState() is delayed).
+          return new SyncBlockView({
+            api,
+            options,
+            node,
+            view,
+            getPos,
+            portalProviderAPI: pmPluginFactoryParams.portalProviderAPI,
+            eventDispatcher: pmPluginFactoryParams.eventDispatcher,
+            syncBlockStore: syncBlockStore
+          }).init();
+        } : lazySyncBlockView({
           options,
           pmPluginFactoryParams,
           api

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/nodeviews/syncedBlock.js

@@ -11,14 +11,16 @@ import React from 'react';
 import ReactNodeView from '@atlaskit/editor-common/react-node-view';
 import { SyncBlockSharedCssClassName } from '@atlaskit/editor-common/sync-block';
 import { useFetchSyncBlockData as _useFetchSyncBlockData, useFetchSyncBlockTitle as _useFetchSyncBlockTitle } from '@atlaskit/editor-synced-block-provider';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { SyncBlockRendererWrapper } from '../ui/SyncBlockRendererWrapper';
-var SyncBlock = /*#__PURE__*/function (_ReactNodeView) {
+export var SyncBlock = /*#__PURE__*/function (_ReactNodeView) {
   function SyncBlock(props) {
     var _this;
     _classCallCheck(this, SyncBlock);
     _this = _callSuper(this, SyncBlock, [props.node, props.view, props.getPos, props.portalProviderAPI, props.eventDispatcher, props]);
     _this.options = props.options;
     _this.api = props.api;
+    _this.syncBlockStore = props.syncBlockStore;
     return _this;
   }
   _inherits(SyncBlock, _ReactNodeView);
@@ -33,6 +35,7 @@ var SyncBlock = /*#__PURE__*/function (_ReactNodeView) {
     key: "render",
     value: function render() {
       var _this$options,
+        _this$api$syncedBlock,
         _this$api,
         _this$options2,
         _this2 = this;
@@ -45,7 +48,8 @@ var SyncBlock = /*#__PURE__*/function (_ReactNodeView) {
       if (!resourceId || !localId) {
         return null;
       }
-      var syncBlockStore = (_this$api = this.api) === null || _this$api === void 0 || (_this$api = _this$api.syncedBlock) === null || _this$api === void 0 || (_this$api = _this$api.sharedState.currentState()) === null || _this$api === void 0 ? void 0 : _this$api.syncBlockStore;
+      var initialSyncBlockStore = fg('platform_synced_block_dogfooding') ? this.syncBlockStore : undefined;
+      var syncBlockStore = (_this$api$syncedBlock = (_this$api = this.api) === null || _this$api === void 0 || (_this$api = _this$api.syncedBlock) === null || _this$api === void 0 || (_this$api = _this$api.sharedState.currentState()) === null || _this$api === void 0 ? void 0 : _this$api.syncBlockStore) !== null && _this$api$syncedBlock !== void 0 ? _this$api$syncedBlock : initialSyncBlockStore;
       if (!syncBlockStore) {
         return null;
       }

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