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

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/editor-plugin-synced-block
 
+## 5.1.1
+
+### Patch Changes
+
+- [`656adaeec9d0b`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/656adaeec9d0b) -
+  [ux] EDITOR-1665 add experience tracking for create sync block
+- Updated dependencies
+
 ## 5.1.0
 
 ### Minor Changes

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

@@ -8,6 +8,7 @@ var _analytics = require("@atlaskit/editor-common/analytics");
 var _copyButton = require("@atlaskit/editor-common/copy-button");
 var _state = require("@atlaskit/editor-prosemirror/state");
 var _utils = require("@atlaskit/editor-prosemirror/utils");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _main = require("../pm-plugins/main");
 var _utils2 = require("../pm-plugins/utils/utils");
 var _types = require("../types");
@@ -39,7 +40,12 @@ var createSyncedBlock = exports.createSyncedBlock = function createSyncedBlock(_
   } else {
     var conversionInfo = (0, _utils2.canBeConvertedToSyncBlock)(tr.selection);
     if (!conversionInfo) {
-      // TODO: EDITOR-1665 - Raise an error analytics event
+      if ((0, _platformFeatureFlags.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/cjs/pm-plugins/experience-tracking/create-reference-experience.js

@@ -0,0 +1,113 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getCreateReferenceExperiencePlugin = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+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 isPastedFromFabricEditor = function isPastedFromFabricEditor(html) {
+  return !!html && html.indexOf('data-pm-slice="') >= 0;
+};
+var pluginKey = new _state.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
+ */
+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: 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 _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;
+        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' && (0, _toConsumableArray2.default)(addedNodes).some(isReferenceSyncBlockNode);
+};
+var isReferenceSyncBlockNode = function isReferenceSyncBlockNode(node) {
+  if (!(node instanceof HTMLElement)) {
+    return false;
+  }
+  return !!node.querySelector('[data-prosemirror-node-name="syncBlock"]');
+};

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

@@ -0,0 +1,185 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getCreateSourceExperiencePlugin = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+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 pluginKey = new _state.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
+ */
+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: syncBlockStore
+  });
+  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: 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: 2000
+    }), new _experiences.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' && (0, _toConsumableArray2.default)(addedNodes).some(isSourceSyncBlockNode);
+};
+var isSourceSyncBlockNode = function isSourceSyncBlockNode(node) {
+  if (!(node instanceof HTMLElement)) {
+    return false;
+  }
+  return !!node.querySelector('[data-prosemirror-node-name="bodiedSyncBlock"]');
+};

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

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getExperienceTrackingPlugins = void 0;
+var _createReferenceExperience = require("./create-reference-experience");
+var _createSourceExperience = require("./create-source-experience");
+var getExperienceTrackingPlugins = exports.getExperienceTrackingPlugins = function getExperienceTrackingPlugins(_ref) {
+  var refs = _ref.refs,
+    dispatchAnalyticsEvent = _ref.dispatchAnalyticsEvent,
+    syncBlockStore = _ref.syncBlockStore;
+  return [{
+    name: 'createReferenceSyncedBlockExperiencePlugin',
+    plugin: function plugin() {
+      return (0, _createReferenceExperience.getCreateReferenceExperiencePlugin)({
+        refs: refs,
+        dispatchAnalyticsEvent: dispatchAnalyticsEvent
+      });
+    }
+  }, {
+    name: 'createSourceSyncedBlockExperiencePlugin',
+    plugin: function plugin() {
+      return (0, _createSourceExperience.getCreateSourceExperiencePlugin)({
+        refs: refs,
+        dispatchAnalyticsEvent: dispatchAnalyticsEvent,
+        syncBlockStore: syncBlockStore
+      });
+    }
+  }];
+};

package/dist/cjs/syncedBlockPlugin.js

@@ -5,14 +5,17 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.syncedBlockPlugin = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _react = _interopRequireDefault(require("react"));
 var _adfSchema = require("@atlaskit/adf-schema");
 var _messages = require("@atlaskit/editor-common/messages");
 var _quickInsert = require("@atlaskit/editor-common/quick-insert");
 var _editorSyncedBlockProvider = require("@atlaskit/editor-synced-block-provider");
 var _lozenge = _interopRequireDefault(require("@atlaskit/lozenge"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _editorActions = require("./editor-actions");
 var _editorCommands = require("./editor-commands");
+var _getExperienceTrackingPlugins = require("./pm-plugins/experience-tracking/get-experience-tracking-plugins");
 var _main = require("./pm-plugins/main");
 var _blockMenuComponents = require("./ui/block-menu-components");
 var _DeleteConfirmationModal = require("./ui/DeleteConfirmationModal");
@@ -24,6 +27,7 @@ var syncedBlockPlugin = exports.syncedBlockPlugin = function syncedBlockPlugin(_
   var _api$analytics, _api$blockMenu, _config$enableSourceC, _api$toolbar, _config$enableSourceC2;
   var config = _ref.config,
     api = _ref.api;
+  var refs = {};
   var syncBlockStore = new _editorSyncedBlockProvider.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((0, _blockMenuComponents.getBlockMenuComponents)(api, (_config$enableSourceC = config === null || config === void 0 ? void 0 : config.enableSourceCreation) !== null && _config$enableSourceC !== void 0 ? _config$enableSourceC : false));
@@ -45,7 +49,14 @@ var syncedBlockPlugin = exports.syncedBlockPlugin = function syncedBlockPlugin(_
         plugin: function plugin(params) {
           return (0, _main.createPlugin)(config, params, syncBlockStore, api);
         }
-      }];
+      }].concat((0, _toConsumableArray2.default)((0, _platformFeatureFlags.fg)('platform_synced_block_dogfooding') ? (0, _getExperienceTrackingPlugins.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() {
@@ -100,14 +111,21 @@ var syncedBlockPlugin = exports.syncedBlockPlugin = function syncedBlockPlugin(_
               syncBlockStore: syncBlockStore,
               typeAheadInsert: insert
             });
-          }
+          },
+          testId: (0, _platformFeatureFlags.fg)('platform_synced_block_dogfooding') ? 'create-synced-block-quick-insert-btn' : undefined
         }];
       },
       floatingToolbar: function floatingToolbar(state, intl) {
         return (0, _floatingToolbar.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.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_SyncBlockRefresher.SyncBlockRefresher, {
         syncBlockStoreManager: syncBlockStore,
         api: api

package/dist/cjs/ui/CreateSyncedBlockButton.js

@@ -53,6 +53,7 @@ var CreateSyncedBlockButton = exports.CreateSyncedBlockButton = function CreateS
       label: ""
     }),
     isDisabled: isDisabled,
+    testId: "create-synced-block-toolbar-btn",
     onClick: onClick
   }));
 };

package/dist/cjs/ui/CreateSyncedBlockDropdownItem.js

@@ -51,6 +51,7 @@ var CreateSyncedBlockDropdownItem = function CreateSyncedBlockDropdownItem(_ref)
     }),
     onClick: onClick,
     isDisabled: isOffline,
+    testId: "create-synced-block-block-menu-btn",
     elemAfter: /*#__PURE__*/_react.default.createElement(_lozenge.default, {
       appearance: "new"
     }, formatMessage(_messages.blockMenuMessages.newLozenge))

package/dist/es2019/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';
@@ -39,7 +40,12 @@ export const createSyncedBlock = ({
   } else {
     const 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 ? void 0 : _syncBlockStore$sourc.failure({
+          reason: 'Selection is not allowed to be converted to sync block'
+        });
+      }
       return false;
     }
     const attrs = syncBlockStore.sourceManager.generateBodiedSyncBlockAttrs();

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