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

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

@@ -0,0 +1,85 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.wasSyncBlockDeletedOrAddedByHistory = exports.getTarget = exports.getRemovedResourceIds = exports.getAddedResourceIds = void 0;
+var _utils = require("@atlaskit/editor-common/utils");
+var _utils2 = require("@atlaskit/editor-prosemirror/utils");
+var targetEl;
+var getTarget = exports.getTarget = function getTarget(containerElement) {
+  if (!targetEl) {
+    var element = containerElement === null || containerElement === void 0 ? void 0 : containerElement.querySelector('.ProseMirror');
+    if (!element || !(element instanceof HTMLElement)) {
+      return null;
+    }
+    targetEl = element;
+  }
+  return targetEl;
+};
+var wasSyncBlockDeletedOrAddedByHistory = exports.wasSyncBlockDeletedOrAddedByHistory = function wasSyncBlockDeletedOrAddedByHistory(tr, oldState, newState) {
+  var historyMeta = tr.getMeta(_utils.pmHistoryPluginKey);
+  if (!Boolean(historyMeta)) {
+    return {};
+  }
+  var syncBlock = newState.schema.nodes.syncBlock;
+  var oldSyncBlockNodes = (0, _utils2.findChildren)(oldState.doc, function (node) {
+    return node.type === syncBlock;
+  });
+  var newSyncBlockNodes = (0, _utils2.findChildren)(newState.doc, function (node) {
+    return node.type === syncBlock;
+  });
+  var oldSyncBlockIds = new Set(oldSyncBlockNodes.map(function (nodeWithPos) {
+    return nodeWithPos.node.attrs.localId;
+  }).filter(function (localId) {
+    return Boolean(localId);
+  }));
+  var newSyncBlockIds = new Set(newSyncBlockNodes.map(function (nodeWithPos) {
+    return nodeWithPos.node.attrs.localId;
+  }).filter(function (localId) {
+    return Boolean(localId);
+  }));
+  var hasDeletedSyncBlock = Array.from(oldSyncBlockIds).some(function (localId) {
+    return !newSyncBlockIds.has(localId);
+  });
+  var hasAddedSyncBlock = Array.from(newSyncBlockIds).some(function (localId) {
+    return !oldSyncBlockIds.has(localId);
+  });
+  return {
+    hasDeletedSyncBlock: hasDeletedSyncBlock,
+    hasAddedSyncBlock: hasAddedSyncBlock,
+    isUndo: historyMeta.redo === false
+  };
+};
+var getResourceIds = function getResourceIds(nodes, resourceIds, query) {
+  nodes.forEach(function (node) {
+    if (!(node instanceof HTMLElement)) {
+      return;
+    }
+    var syncBlockElements = node.querySelectorAll(query);
+    syncBlockElements.forEach(function (element) {
+      var resourceId = element.getAttribute('resourceid');
+      if (resourceId) {
+        resourceIds.push(resourceId);
+      }
+    });
+  });
+};
+var getAddedResourceIds = exports.getAddedResourceIds = function getAddedResourceIds(mutations, query) {
+  var resourceIds = [];
+  mutations.forEach(function (mutation) {
+    if (mutation.type === 'childList') {
+      getResourceIds(mutation.addedNodes, resourceIds, query);
+    }
+  });
+  return resourceIds;
+};
+var getRemovedResourceIds = exports.getRemovedResourceIds = function getRemovedResourceIds(mutations, query) {
+  var resourceIds = [];
+  mutations.forEach(function (mutation) {
+    if (mutation.type === 'childList') {
+      getResourceIds(mutation.removedNodes, resourceIds, query);
+    }
+  });
+  return resourceIds;
+};

package/dist/cjs/types/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.FLAG_ID = void 0;
+exports.FLAG_ID = exports.EXPERIENCE_ABORT_REASON = void 0;
 var FLAG_ID = exports.FLAG_ID = /*#__PURE__*/function (FLAG_ID) {
   FLAG_ID["CANNOT_DELETE_WHEN_OFFLINE"] = "cannot-delete-when-offline";
   FLAG_ID["CANNOT_EDIT_WHEN_OFFLINE"] = "cannot-edit-when-offline";
@@ -11,4 +11,7 @@ var FLAG_ID = exports.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;
-}({});
+}({});
+var EXPERIENCE_ABORT_REASON = exports.EXPERIENCE_ABORT_REASON = {
+  EDITOR_DESTROYED: 'editor-destroyed'
+};

package/dist/cjs/ui/CreateSyncedBlockDropdownItem.js

@@ -51,24 +51,56 @@ var CreateSyncedBlockDropdownItem = function CreateSyncedBlockDropdownItem(_ref)
     }),
     onClick: onClick,
     isDisabled: isOffline,
-    testId: 'create-synced-block-block-menu-btn',
+    testId: "create-synced-block-block-menu-btn",
     elemAfter: /*#__PURE__*/_react.default.createElement(_lozenge.default, {
       appearance: "new"
     }, formatMessage(_messages.blockMenuMessages.newLozenge))
   }, formatMessage(_messages.blockMenuMessages.createSyncedBlock));
 };
-var CreateOrCopySyncedBlockDropdownItem = exports.CreateOrCopySyncedBlockDropdownItem = function CreateOrCopySyncedBlockDropdownItem(_ref2) {
-  var _menuTriggerByNode$no;
-  var api = _ref2.api,
-    enableSourceSyncedBlockCreation = _ref2.enableSourceSyncedBlockCreation;
-  var _useSharedPluginState2 = (0, _hooks.useSharedPluginStateWithSelector)(api, ['blockControls'], function (states) {
+var CopySyncedBlockDropdownItem = function CopySyncedBlockDropdownItem(_ref2) {
+  var api = _ref2.api;
+  var _useIntl2 = (0, _reactIntlNext.useIntl)(),
+    formatMessage = _useIntl2.formatMessage;
+  var _useSharedPluginState2 = (0, _hooks.useSharedPluginStateWithSelector)(api, ['connectivity'], function (states) {
+      var _states$connectivityS2;
+      return {
+        mode: (_states$connectivityS2 = states.connectivityState) === null || _states$connectivityS2 === void 0 ? void 0 : _states$connectivityS2.mode
+      };
+    }),
+    mode = _useSharedPluginState2.mode;
+  var onClick = function onClick() {
+    var _api$core3, _api$core4, _api$blockControls2;
+    api === null || api === void 0 || (_api$core3 = api.core) === null || _api$core3 === void 0 || _api$core3.actions.execute(api === null || api === void 0 ? void 0 : api.syncedBlock.commands.copySyncedBlockReferenceToClipboard());
+    api === null || api === void 0 || (_api$core4 = api.core) === null || _api$core4 === void 0 || _api$core4.actions.execute(api === null || api === void 0 || (_api$blockControls2 = api.blockControls) === null || _api$blockControls2 === void 0 || (_api$blockControls2 = _api$blockControls2.commands) === null || _api$blockControls2 === void 0 ? void 0 : _api$blockControls2.toggleBlockMenu({
+      closeMenu: true
+    }));
+  };
+  return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItem, {
+    elemBefore: /*#__PURE__*/_react.default.createElement(_editorToolbar.SyncBlocksIcon, {
+      label: ""
+    }),
+    onClick: onClick,
+    isDisabled: (0, _editorPluginConnectivity.isOfflineMode)(mode),
+    elemAfter: /*#__PURE__*/_react.default.createElement(_lozenge.default, {
+      appearance: "new"
+    }, formatMessage(_messages.blockMenuMessages.newLozenge))
+  }, formatMessage(_messages.blockMenuMessages.copySyncedBlock));
+};
+var CreateOrCopySyncedBlockDropdownItem = exports.CreateOrCopySyncedBlockDropdownItem = function CreateOrCopySyncedBlockDropdownItem(_ref3) {
+  var api = _ref3.api,
+    enableSourceSyncedBlockCreation = _ref3.enableSourceSyncedBlockCreation;
+  var _useSharedPluginState3 = (0, _hooks.useSharedPluginStateWithSelector)(api, ['blockControls'], function (states) {
       var _states$blockControls3, _states$blockControls4;
       return {
         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
       };
     }),
-    menuTriggerByNode = _useSharedPluginState2.menuTriggerByNode;
-  if (!['syncBlock', 'bodiedSyncBlock'].includes((_menuTriggerByNode$no = menuTriggerByNode === null || menuTriggerByNode === void 0 ? void 0 : menuTriggerByNode.nodeType) !== null && _menuTriggerByNode$no !== void 0 ? _menuTriggerByNode$no : '') && enableSourceSyncedBlockCreation) {
+    menuTriggerByNode = _useSharedPluginState3.menuTriggerByNode;
+  if ((menuTriggerByNode === null || menuTriggerByNode === void 0 ? void 0 : menuTriggerByNode.nodeType) === 'syncBlock' || (menuTriggerByNode === null || menuTriggerByNode === void 0 ? void 0 : menuTriggerByNode.nodeType) === 'bodiedSyncBlock') {
+    return /*#__PURE__*/_react.default.createElement(CopySyncedBlockDropdownItem, {
+      api: api
+    });
+  } else if (enableSourceSyncedBlockCreation) {
     return /*#__PURE__*/_react.default.createElement(CreateSyncedBlockDropdownItem, {
       api: api
     });

package/dist/cjs/ui/DeleteConfirmationModal.js

@@ -14,6 +14,7 @@ var _hooks = require("@atlaskit/editor-common/hooks");
 var _messages = require("@atlaskit/editor-common/messages");
 var _editorPluginConnectivity = require("@atlaskit/editor-plugin-connectivity");
 var _modalDialog = _interopRequireWildcard(require("@atlaskit/modal-dialog"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _compiled = require("@atlaskit/primitives/compiled");
 var _main = require("../pm-plugins/main");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
@@ -117,6 +118,7 @@ var DeleteConfirmationModal = exports.DeleteConfirmationModal = function DeleteC
     onClick: handleClick(true),
     autoFocus: true,
     isDisabled: (0, _editorPluginConnectivity.isOfflineMode)(mode),
-    isLoading: bodiedSyncBlockDeletionStatus === 'processing'
+    isLoading: bodiedSyncBlockDeletionStatus === 'processing',
+    testId: (0, _platformFeatureFlags.fg)('platform_synced_block_dogfooding') ? 'synced-block-delete-confirmation-modal-delete-button' : undefined
   }, formatMessage(_messages.syncBlockMessages.deleteConfirmationModalDeleteButton)))));
 };

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

@@ -15,6 +15,7 @@ var _editorSyncedBlockProvider = require("@atlaskit/editor-synced-block-provider
 var _copy = _interopRequireDefault(require("@atlaskit/icon/core/copy"));
 var _delete = _interopRequireDefault(require("@atlaskit/icon/core/delete"));
 var _edit = _interopRequireDefault(require("@atlaskit/icon/core/edit"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _editorCommands = require("../editor-commands");
 var _utils2 = require("../pm-plugins/utils/utils");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
@@ -47,7 +48,8 @@ var getToolbarConfig = exports.getToolbarConfig = function getToolbarConfig(stat
       type: 'button',
       title: formatMessage(_messages.default.delete),
       onClick: (0, _editorCommands.removeSyncedBlock)(api),
-      icon: _delete.default
+      icon: _delete.default,
+      testId: (0, _platformFeatureFlags.fg)('platform_synced_block_dogfooding') ? 'reference-synced-block-delete-button' : undefined
     }, hoverDecorationProps(nodeType, _consts.akEditorSelectedNodeClassName));
     items.push(deleteButton);
   } else {
@@ -58,7 +60,7 @@ var getToolbarConfig = exports.getToolbarConfig = function getToolbarConfig(stat
       icon: _copy.default,
       title: formatMessage(_messages.syncBlockMessages.copySyncBlockLabel),
       showTitle: false,
-      tooltipContent: formatMessage(_messages.syncBlockMessages.copySyncBlockTooltip),
+      tooltipContent: formatMessage(_messages.syncBlockMessages.copySyncedBlockTooltip),
       onClick: (0, _editorCommands.copySyncedBlockReferenceToClipboard)(syncBlockStore, api)
     }, hoverDecorationProps(nodeType, _consts.akEditorSelectedNodeClassName));
     items.push(copyButton);

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

@@ -59,8 +59,8 @@ export const createSyncedBlock = ({
     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/es2019/pm-plugins/experience-tracking/create-reference-experience.js

@@ -2,13 +2,14 @@ import { ACTION_SUBJECT, ACTION_SUBJECT_ID } from '@atlaskit/editor-common/analy
 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';
 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'
+  PASTE: 'paste',
+  UNDO: 'undo',
+  REDO: 'redo'
 };
 
 /**
@@ -32,7 +33,7 @@ export const getCreateReferenceExperiencePlugin = ({
       return {
         destroy: () => {
           experience.abort({
-            reason: ABORT_REASON.EDITOR_DESTROYED
+            reason: EXPERIENCE_ABORT_REASON.EDITOR_DESTROYED
           });
         }
       };
@@ -54,6 +55,20 @@ export const getCreateReferenceExperiencePlugin = ({
           });
         }
       }
+    },
+    appendTransaction: (transactions, oldState, newState) => {
+      transactions.forEach(tr => {
+        const {
+          hasAddedSyncBlock,
+          isUndo
+        } = wasSyncBlockDeletedOrAddedByHistory(tr, oldState, newState);
+        if (hasAddedSyncBlock) {
+          experience.start({
+            method: isUndo ? START_METHOD.UNDO : START_METHOD.REDO
+          });
+        }
+      });
+      return null;
     }
   });
 };
@@ -70,21 +85,20 @@ const getCreateReferenceExperience = ({
       onDomMutation: ({
         mutations
       }) => {
-        if (mutations.some(isReferenceSyncBlockAddedInMutation)) {
+        const insertedResourceIds = getAddedResourceIds(mutations, '[data-prosemirror-node-name="syncBlock"]');
+        if (insertedResourceIds.length > 0) {
           return {
-            status: 'success'
+            status: 'success',
+            metadata: {
+              insertedResourceIds
+            }
           };
         }
         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,
+          target: getTarget(refs.containerElement),
           options: {
             childList: true
           }
@@ -92,14 +106,4 @@ const getCreateReferenceExperience = ({
       }
     })]
   });
-};
-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

@@ -3,10 +3,9 @@ import { ACTION_SUBJECT, ACTION_SUBJECT_ID } from '@atlaskit/editor-common/analy
 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';
 const pluginKey = new PluginKey('createSourceSyncBlockExperience');
-const ABORT_REASON = {
-  EDITOR_DESTROYED: 'editor-destroyed'
-};
 const START_METHOD = {
   BLOCK_MENU: 'block-menu',
   PINNED_TOOLBAR: 'pinned-toolbar',
@@ -19,8 +18,8 @@ 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
+ * 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 const getCreateSourceExperiencePlugin = ({
   refs,
@@ -37,8 +36,7 @@ export const getCreateSourceExperiencePlugin = ({
   };
   const experience = getCreateSourceExperience({
     refs,
-    dispatchAnalyticsEvent,
-    syncBlockStore
+    dispatchAnalyticsEvent
   });
   syncBlockStore.sourceManager.setCreateExperience(experience);
   const unbindClickListener = bind(document, {
@@ -90,7 +88,7 @@ export const getCreateSourceExperiencePlugin = ({
       return {
         destroy: () => {
           experience.abort({
-            reason: ABORT_REASON.EDITOR_DESTROYED
+            reason: EXPERIENCE_ABORT_REASON.EDITOR_DESTROYED
           });
           unbindClickListener();
           unbindKeydownListener();
@@ -107,26 +105,25 @@ const getCreateSourceExperience = ({
     actionSubjectId: ACTION_SUBJECT_ID.SYNCED_BLOCK_CREATE,
     dispatchAnalyticsEvent,
     checks: [new ExperienceCheckTimeout({
-      durationMs: 2000
+      durationMs: 3000
     }), new ExperienceCheckDomMutation({
       onDomMutation: ({
         mutations
       }) => {
-        if (mutations.some(isSourceSyncBlockAddedInMutation)) {
+        const createdResourceIds = getAddedResourceIds(mutations, '[data-prosemirror-node-name="bodiedSyncBlock"]');
+        if (createdResourceIds.length > 0) {
           return {
-            status: 'success'
+            status: 'success',
+            metadata: {
+              createdResourceIds
+            }
           };
         }
         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,
+          target: getTarget(refs.containerElement),
           options: {
             childList: true
           }
@@ -166,14 +163,4 @@ const handleButtonClick = (testId, experience) => {
 };
 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/delete-reference-experience.js

@@ -0,0 +1,181 @@
+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, wasSyncBlockDeletedOrAddedByHistory } from '../utils/experience-tracking-utils';
+const pluginKey = new PluginKey('deleteReferenceSyncBlockExperience');
+const START_METHOD = {
+  ELEMENT_TOOLBAR: 'element-toolbar',
+  DELETE: 'delete',
+  TYPED_OVER: 'typed-over',
+  CUT: 'cut',
+  UNDO: 'undo',
+  REDO: 'redo'
+};
+
+/**
+ * This experience tracks when a reference sync block is deleted.
+ *
+ * Start: When user deletes ref sync block from toolbar, presses delete when cursor is in front of ref sync block,
+ * presses any key with a ref sync block selected, cuts with a ref sync block selected, triggers undo/redo that deletes a ref sync block
+ * Success: When the sync block is removed from the DOM within 2000ms of start
+ * Failure: When 2000ms passes without the reference sync block being removed from the DOM
+ */
+export const getDeleteReferenceExperiencePlugin = ({
+  refs,
+  dispatchAnalyticsEvent,
+  syncBlockStore
+}) => {
+  const experience = getDeleteReferenceExperience({
+    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 (isReferenceSyncedBlockDeleteButtonId(testId)) {
+        experience.start({
+          method: START_METHOD.ELEMENT_TOOLBAR
+        });
+      }
+    }
+  });
+  return new SafePlugin({
+    key: pluginKey,
+    props: {
+      handleDOMEvents: {
+        cut: view => {
+          const {
+            state
+          } = view;
+          if (hasSyncBlockInSelection(state.selection)) {
+            experience.start({
+              method: START_METHOD.CUT
+            });
+          }
+          return false;
+        },
+        keydown: (view, event) => {
+          const {
+            state
+          } = view;
+          const hasSelection = hasSyncBlockInSelection(state.selection);
+          const hasAdjacent = hasSyncBlockBeforeCursor(state.selection);
+          if (hasSelection) {
+            experience.start({
+              method: START_METHOD.TYPED_OVER
+            });
+          }
+          if (isDeleteKey(event.key) && hasAdjacent) {
+            experience.start({
+              method: START_METHOD.DELETE
+            });
+          }
+          return false;
+        }
+      }
+    },
+    appendTransaction: (transactions, oldState, newState) => {
+      transactions.forEach(tr => {
+        const {
+          hasDeletedSyncBlock,
+          isUndo
+        } = wasSyncBlockDeletedOrAddedByHistory(tr, oldState, newState);
+        if (hasDeletedSyncBlock) {
+          experience.start({
+            method: isUndo ? START_METHOD.UNDO : START_METHOD.REDO
+          });
+        }
+      });
+      return null;
+    },
+    view: () => {
+      return {
+        destroy: () => {
+          experience.abort({
+            reason: EXPERIENCE_ABORT_REASON.EDITOR_DESTROYED
+          });
+          unbindClickListener();
+        }
+      };
+    }
+  });
+};
+export const getDeleteReferenceExperience = ({
+  refs,
+  dispatchAnalyticsEvent
+}) => {
+  return new Experience(ACTION_SUBJECT.SYNCED_BLOCK, {
+    actionSubjectId: ACTION_SUBJECT_ID.REFERENCE_SYNCED_BLOCK_DELETE,
+    dispatchAnalyticsEvent,
+    checks: [new ExperienceCheckTimeout({
+      durationMs: 2000
+    }), new ExperienceCheckDomMutation({
+      onDomMutation: ({
+        mutations
+      }) => {
+        const deletedResourceIds = getRemovedResourceIds(mutations, '[data-prosemirror-node-name="syncBlock"]');
+        if (deletedResourceIds.length > 0) {
+          return {
+            status: 'success',
+            metadata: {
+              deletedResourceIds
+            }
+          };
+        }
+        return undefined;
+      },
+      observeConfig: () => {
+        return {
+          target: getTarget(refs.containerElement),
+          options: {
+            childList: true
+          }
+        };
+      }
+    })]
+  });
+};
+const isReferenceSyncedBlockDeleteButtonId = testId => testId === 'reference-synced-block-delete-button';
+const isDeleteKey = key => {
+  return key === 'Delete' || key === 'Backspace';
+};
+const hasSyncBlockInSelection = selection => {
+  const {
+    syncBlock
+  } = selection.$from.doc.type.schema.nodes;
+  let found = false;
+  selection.$from.doc.nodesBetween(selection.from, selection.to, node => {
+    if (node.type === syncBlock) {
+      found = true;
+      return false;
+    }
+    // sync block nodes can only be found at the top level
+    return false;
+  });
+  return found;
+};
+const hasSyncBlockBeforeCursor = selection => {
+  if (!selection.empty) {
+    return false;
+  }
+  const {
+    syncBlock
+  } = selection.$from.doc.type.schema.nodes;
+  const {
+    nodeBefore
+  } = selection.$from;
+  return (nodeBefore === null || nodeBefore === void 0 ? void 0 : nodeBefore.type) === syncBlock;
+};