@atlaskit/editor-plugin-block-menu 6.0.27 → 6.0.29

package/dist/es2019/pm-plugins/experiences/block-menu-experiences.js

@@ -1,8 +1,10 @@
 import { bind } from 'bind-event-listener';
-import { ACTION_SUBJECT_ID } from '@atlaskit/editor-common/analytics';
-import { Experience, EXPERIENCE_ID, ExperienceCheckDomMutation, ExperienceCheckTimeout, getPopupContainerFromEditorView, popupWithNestedElement } from '@atlaskit/editor-common/experiences';
+import { ACTION, ACTION_SUBJECT_ID } from '@atlaskit/editor-common/analytics';
+import { BLOCK_MENU_ACTION_TEST_ID } from '@atlaskit/editor-common/block-menu';
+import { Experience, EXPERIENCE_ID, ExperienceCheckDomMutation, ExperienceCheckTimeout, getPopupContainerFromEditorView } from '@atlaskit/editor-common/experiences';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { PluginKey } from '@atlaskit/editor-prosemirror/state';
+import { getParentDOMAtSelection, handleDeleteDomMutation, handleMenuOpenDomMutation, handleMoveDomMutation, isBlockMenuVisible, isDragHandleElement } from './experience-check-utils';
 const TIMEOUT_DURATION = 1000;
 const pluginKey = new PluginKey('blockMenuExperiences');
 const START_METHOD = {
@@ -17,13 +19,14 @@ export const getBlockMenuExperiencesPlugin = ({
   refs,
   dispatchAnalyticsEvent
 }) => {
-  let targetEl;
-  let editorViewEl;
+  let popupTargetEl;
+  let editorView;
   const getPopupsTarget = () => {
-    if (!targetEl) {
-      targetEl = refs.popupsMountPoint || getPopupContainerFromEditorView(editorViewEl);
+    if (!popupTargetEl) {
+      var _editorView;
+      popupTargetEl = refs.popupsMountPoint || getPopupContainerFromEditorView((_editorView = editorView) === null || _editorView === void 0 ? void 0 : _editorView.dom);
     }
-    return targetEl;
+    return popupTargetEl;
   };
   const blockMenuOpenExperience = new Experience(EXPERIENCE_ID.MENU_OPEN, {
     actionSubjectId: ACTION_SUBJECT_ID.BLOCK_MENU,
@@ -31,16 +34,7 @@ export const getBlockMenuExperiencesPlugin = ({
     checks: [new ExperienceCheckTimeout({
       durationMs: TIMEOUT_DURATION
     }), new ExperienceCheckDomMutation({
-      onDomMutation: ({
-        mutations
-      }) => {
-        if (mutations.some(isBlockMenuAddedInMutation)) {
-          return {
-            status: 'success'
-          };
-        }
-        return undefined;
-      },
+      onDomMutation: handleMenuOpenDomMutation,
       observeConfig: () => ({
         target: getPopupsTarget(),
         options: {
@@ -49,26 +43,87 @@ export const getBlockMenuExperiencesPlugin = ({
       })
     })]
   });
+  const actionObserveConfig = () => ({
+    target: getParentDOMAtSelection(editorView),
+    options: {
+      childList: true
+    }
+  });
+  const blockMoveUpExperience = new Experience(EXPERIENCE_ID.MENU_ACTION, {
+    action: ACTION.MOVED,
+    actionSubjectId: ACTION_SUBJECT_ID.MOVE_UP_BLOCK,
+    dispatchAnalyticsEvent,
+    checks: [new ExperienceCheckTimeout({
+      durationMs: TIMEOUT_DURATION
+    }), new ExperienceCheckDomMutation({
+      onDomMutation: handleMoveDomMutation,
+      observeConfig: actionObserveConfig
+    })]
+  });
+  const blockMoveDownExperience = new Experience(EXPERIENCE_ID.MENU_ACTION, {
+    action: ACTION.MOVED,
+    actionSubjectId: ACTION_SUBJECT_ID.MOVE_DOWN_BLOCK,
+    dispatchAnalyticsEvent,
+    checks: [new ExperienceCheckTimeout({
+      durationMs: TIMEOUT_DURATION
+    }), new ExperienceCheckDomMutation({
+      onDomMutation: handleMoveDomMutation,
+      observeConfig: actionObserveConfig
+    })]
+  });
+  const blockDeleteExperience = new Experience(EXPERIENCE_ID.MENU_ACTION, {
+    action: ACTION.DELETED,
+    actionSubjectId: ACTION_SUBJECT_ID.DELETE_BLOCK,
+    dispatchAnalyticsEvent,
+    checks: [new ExperienceCheckTimeout({
+      durationMs: TIMEOUT_DURATION
+    }), new ExperienceCheckDomMutation({
+      onDomMutation: handleDeleteDomMutation,
+      observeConfig: actionObserveConfig
+    })]
+  });
+  const handleMenuOpened = method => {
+    // Don't start if block menu is already visible
+    if (isBlockMenuVisible(getPopupsTarget())) {
+      return;
+    }
+    blockMenuOpenExperience.start({
+      method
+    });
+  };
+  const handleItemActioned = target => {
+    const button = target.closest('button[data-testid]');
+    if (!button || !(button instanceof HTMLButtonElement) || button.disabled || button.getAttribute('aria-disabled') === 'true') {
+      return;
+    }
+    const testId = button.dataset.testid;
+    if (!testId) {
+      return;
+    }
+    switch (testId) {
+      case BLOCK_MENU_ACTION_TEST_ID.MOVE_UP:
+        blockMoveUpExperience.start();
+        break;
+      case BLOCK_MENU_ACTION_TEST_ID.MOVE_DOWN:
+        blockMoveDownExperience.start();
+        break;
+      case BLOCK_MENU_ACTION_TEST_ID.DELETE:
+        blockDeleteExperience.start();
+        break;
+    }
+  };
   const unbindClickListener = bind(document, {
     type: 'click',
     listener: event => {
-      if (!(event.target instanceof Element)) {
-        return;
-      }
       const target = event.target;
-
-      // Check if the click is on a drag handle
-      if (!isDragHandleElement(target)) {
+      if (!(target instanceof HTMLElement)) {
         return;
       }
-
-      // Don't start if block menu is already visible
-      if (isBlockMenuVisible(getPopupsTarget())) {
-        return;
+      if (isDragHandleElement(target)) {
+        handleMenuOpened(START_METHOD.DRAG_HANDLE_CLICK);
+      } else {
+        handleItemActioned(target);
       }
-      blockMenuOpenExperience.start({
-        method: START_METHOD.DRAG_HANDLE_CLICK
-      });
     },
     options: {
       capture: true
@@ -77,20 +132,14 @@ export const getBlockMenuExperiencesPlugin = ({
   const unbindKeydownListener = bind(document, {
     type: 'keydown',
     listener: event => {
-      if (!(event.target instanceof Element)) {
+      const target = event.target;
+      if (!(target instanceof HTMLElement)) {
         return;
       }
-      const target = event.target;
 
       // Check if Enter or Space is pressed on a drag handle
       if ((event.key === 'Enter' || event.key === ' ') && isDragHandleElement(target)) {
-        // Don't start if block menu is already visible
-        if (isBlockMenuVisible(getPopupsTarget())) {
-          return;
-        }
-        blockMenuOpenExperience.start({
-          method: START_METHOD.KEYBOARD
-        });
+        handleMenuOpened(START_METHOD.KEYBOARD);
       }
 
       // Abort on Escape key if block menu is not yet visible
@@ -106,35 +155,27 @@ export const getBlockMenuExperiencesPlugin = ({
   });
   return new SafePlugin({
     key: pluginKey,
-    view: editorView => {
-      editorViewEl = editorView.dom;
+    view: view => {
+      editorView = view;
       return {
         destroy: () => {
           blockMenuOpenExperience.abort({
             reason: ABORT_REASON.EDITOR_DESTROYED
           });
+          blockMoveUpExperience.abort({
+            reason: ABORT_REASON.EDITOR_DESTROYED
+          });
+          blockMoveDownExperience.abort({
+            reason: ABORT_REASON.EDITOR_DESTROYED
+          });
+          blockDeleteExperience.abort({
+            reason: ABORT_REASON.EDITOR_DESTROYED
+          });
+          editorView = undefined;
           unbindClickListener();
           unbindKeydownListener();
         }
       };
     }
   });
-};
-const isBlockMenuAddedInMutation = ({
-  type,
-  addedNodes
-}) => {
-  return type === 'childList' && [...addedNodes].some(isBlockMenuWithinNode);
-};
-const isBlockMenuWithinNode = node => {
-  return popupWithNestedElement(node, '[data-testid="editor-block-menu"]') !== null;
-};
-const isDragHandleElement = element => {
-  return !!(element !== null && element !== void 0 && element.closest('[data-editor-block-ctrl-drag-handle]'));
-};
-const isBlockMenuVisible = popupsTarget => {
-  if (!popupsTarget) {
-    return false;
-  }
-  return popupWithNestedElement(popupsTarget, '[data-testid="editor-block-menu"]') !== null;
 };

package/dist/es2019/pm-plugins/experiences/experience-check-utils.js

@@ -0,0 +1,125 @@
+import { popupWithNestedElement } from '@atlaskit/editor-common/experiences';
+/**
+ * Checks if the given element or any of its ancestors is a drag handle element.
+ *
+ * @param element - The DOM element to check.
+ * @returns True if the element is a drag handle, false otherwise.
+ */
+export const isDragHandleElement = element => {
+  return !!(element !== null && element !== void 0 && element.closest('[data-editor-block-ctrl-drag-handle]'));
+};
+
+/**
+ * Checks if the block menu is currently visible within the provided popups target element.
+ *
+ * @param popupsTarget - The container element for popups.
+ * @returns True if the block menu is visible, false otherwise.
+ */
+export const isBlockMenuVisible = popupsTarget => {
+  if (!popupsTarget) {
+    return false;
+  }
+  return popupWithNestedElement(popupsTarget, '[data-testid="editor-block-menu"]') !== null;
+};
+
+/**
+ * Gets the parent DOM element at the starting position of the current selection
+ * from the provided editor view.
+ *
+ * @param editorView - The editor view from which to get the parent DOM element
+ * @returns The parent HTMLElement at the selection start, or null if not found
+ */
+export const getParentDOMAtSelection = editorView => {
+  if (!editorView) {
+    return null;
+  }
+  const {
+    selection
+  } = editorView.state;
+  const from = selection.from;
+  const nodeDOM = editorView.nodeDOM(from);
+  if (nodeDOM instanceof HTMLElement) {
+    return nodeDOM.parentElement;
+  }
+  return null;
+};
+const isBlockMenuAddedInMutation = ({
+  type,
+  addedNodes
+}) => {
+  return type === 'childList' && [...addedNodes].some(isBlockMenuWithinNode);
+};
+const isBlockMenuWithinNode = node => {
+  return popupWithNestedElement(node, '[data-testid="editor-block-menu"]') !== null;
+};
+
+/**
+ * Handles DOM mutations to determine if the block menu was opened
+ *
+ * This function looks for mutations that indicate the block menu
+ * has been added to the DOM.
+ *
+ * @param mutations - The list of DOM mutations to evaluate
+ * @returns An ExperienceCheckResult indicating success if the menu was opened, otherwise undefined
+ */
+export const handleMenuOpenDomMutation = ({
+  mutations
+}) => {
+  // Look for a mutation that added the block menu
+  for (const mutation of mutations) {
+    if (isBlockMenuAddedInMutation(mutation)) {
+      return {
+        status: 'success'
+      };
+    }
+  }
+  return undefined;
+};
+
+/**
+ * Handles DOM mutations to determine if a move action was performed
+ *
+ * Move actions typically produce two mutations: one where nodes are removed
+ * from their original location, and another where the same number of nodes are
+ * added to a new location. This function checks for that pattern.
+ *
+ * @param mutations - The list of DOM mutations to evaluate
+ * @returns An ExperienceCheckResult indicating success if a move was detected, otherwise undefined
+ */
+export const handleMoveDomMutation = ({
+  mutations
+}) => {
+  const removeMutation = mutations.find(m => m.type === 'childList' && m.removedNodes.length > 0);
+  const addMutation = mutations.find(m => m.type === 'childList' && m.addedNodes.length > 0);
+  if (removeMutation && addMutation && removeMutation.removedNodes.length === addMutation.addedNodes.length) {
+    return {
+      status: 'success'
+    };
+  }
+  return undefined;
+};
+
+/**
+ * Handles DOM mutations to determine if a delete action was performed
+ *
+ * Delete actions typically produce a single mutation where nodes are removed
+ * from the DOM without any corresponding additions. This function checks for
+ * that specific pattern.
+ *
+ * @param mutations - The list of DOM mutations to evaluate
+ * @returns An ExperienceCheckResult indicating success if a delete was detected, otherwise undefined
+ */
+export const handleDeleteDomMutation = ({
+  mutations
+}) => {
+  // Delete action produces a single childList mutation with only removedNodes
+  const childListMutations = mutations.filter(m => m.type === 'childList');
+
+  // Check for at least one mutation with removedNodes but no addedNodes
+  if (childListMutations.some(m => m.removedNodes.length > 0 && m.addedNodes.length === 0)) {
+    return {
+      status: 'success'
+    };
+  }
+  return undefined;
+};

package/dist/es2019/ui/delete-button.js

@@ -1,6 +1,7 @@
 import React, { useCallback, useEffect } from 'react';
 import { injectIntl, useIntl } from 'react-intl-next';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import { BLOCK_MENU_ACTION_TEST_ID } from '@atlaskit/editor-common/block-menu';
 import { blockMenuMessages } from '@atlaskit/editor-common/messages';
 import { deleteSelectedRange, getSourceNodesFromSelectionRange } from '@atlaskit/editor-common/selection';
 import { ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
@@ -101,7 +102,8 @@ const DeleteDropdownItemContent = ({
       color: "var(--ds-icon-danger, #C9372C)",
       label: ""
     }),
-    onClick: onClick
+    onClick: onClick,
+    testId: BLOCK_MENU_ACTION_TEST_ID.DELETE
   }, /*#__PURE__*/React.createElement(Text, {
     as: "span",
     color: "color.text.danger"

package/dist/es2019/ui/move-down.js

@@ -1,7 +1,8 @@
 import React, { useEffect } from 'react';
-import { useIntl, injectIntl } from 'react-intl-next';
+import { injectIntl, useIntl } from 'react-intl-next';
 import { getDocument } from '@atlaskit/browser-apis';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
+import { BLOCK_MENU_ACTION_TEST_ID } from '@atlaskit/editor-common/block-menu';
 import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import { blockMenuMessages as messages } from '@atlaskit/editor-common/messages';
 import { DIRECTION } from '@atlaskit/editor-common/types';
@@ -69,7 +70,8 @@ const MoveDownDropdownItemContent = ({
     elemBefore: /*#__PURE__*/React.createElement(ArrowDownIcon, {
       label: ""
     }),
-    isDisabled: !canMoveDown
+    isDisabled: !canMoveDown,
+    testId: BLOCK_MENU_ACTION_TEST_ID.MOVE_DOWN
   }, formatMessage(messages.moveDownBlock));
 };
 export const MoveDownDropdownItem = injectIntl(MoveDownDropdownItemContent);

package/dist/es2019/ui/move-up.js

@@ -1,7 +1,8 @@
 import React, { useEffect } from 'react';
-import { useIntl, injectIntl } from 'react-intl-next';
+import { injectIntl, useIntl } from 'react-intl-next';
 import { getDocument } from '@atlaskit/browser-apis';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
+import { BLOCK_MENU_ACTION_TEST_ID } from '@atlaskit/editor-common/block-menu';
 import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import { blockMenuMessages as messages } from '@atlaskit/editor-common/messages';
 import { DIRECTION } from '@atlaskit/editor-common/types';
@@ -67,7 +68,8 @@ const MoveUpDropdownItemContent = ({
     elemBefore: /*#__PURE__*/React.createElement(ArrowUpIcon, {
       label: ""
     }),
-    isDisabled: !canMoveUp
+    isDisabled: !canMoveUp,
+    testId: BLOCK_MENU_ACTION_TEST_ID.MOVE_UP
   }, formatMessage(messages.moveUpBlock));
 };
 export const MoveUpDropdownItem = injectIntl(MoveUpDropdownItemContent);

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

@@ -31,6 +31,9 @@ export var transformNode = function transformNode(api) {
         var typeName = node.type.name;
         sourceNodeTypes[typeName] = (sourceNodeTypes[typeName] || 0) + 1;
       });
+
+      // Check if source node is empty paragraph or heading
+      var isEmptyLine = sourceNodes.length === 1 && (sourceNodes[0].type === nodes.paragraph || sourceNodes[0].type === nodes.heading) && (sourceNodes[0].content.size === 0 || sourceNodes[0].textContent.trim() === '');
       var resultNodes = convertNodesToTargetType({
         sourceNodes: sourceNodes,
         targetNodeType: targetType,
@@ -69,12 +72,12 @@ export var transformNode = function transformNode(api) {
       }
       stopMeasure(measureId, function (duration, startTime) {
         var _api$analytics;
-        api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 || (_api$analytics = _api$analytics.actions) === null || _api$analytics === void 0 || _api$analytics.fireAnalyticsEvent({
+        api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 || (_api$analytics = _api$analytics.actions) === null || _api$analytics === void 0 || _api$analytics.attachAnalyticsEvent({
           action: ACTION.TRANSFORMED,
           actionSubject: ACTION_SUBJECT.ELEMENT,
           attributes: {
             duration: duration,
-            isList: isList,
+            isEmptyLine: isEmptyLine,
             isNested: isNested,
             sourceNodesCount: sourceNodes.length,
             sourceNodesCountByType: sourceNodeTypes,
@@ -85,7 +88,7 @@ export var transformNode = function transformNode(api) {
             inputMethod: INPUT_METHOD.BLOCK_MENU
           },
           eventType: EVENT_TYPE.TRACK
-        });
+        })(tr);
       });
       return tr;
     };

package/dist/esm/pm-plugins/experiences/block-menu-experiences.js

@@ -1,9 +1,10 @@
-import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import { bind } from 'bind-event-listener';
-import { ACTION_SUBJECT_ID } from '@atlaskit/editor-common/analytics';
-import { Experience, EXPERIENCE_ID, ExperienceCheckDomMutation, ExperienceCheckTimeout, getPopupContainerFromEditorView, popupWithNestedElement } from '@atlaskit/editor-common/experiences';
+import { ACTION, ACTION_SUBJECT_ID } from '@atlaskit/editor-common/analytics';
+import { BLOCK_MENU_ACTION_TEST_ID } from '@atlaskit/editor-common/block-menu';
+import { Experience, EXPERIENCE_ID, ExperienceCheckDomMutation, ExperienceCheckTimeout, getPopupContainerFromEditorView } from '@atlaskit/editor-common/experiences';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { PluginKey } from '@atlaskit/editor-prosemirror/state';
+import { getParentDOMAtSelection, handleDeleteDomMutation, handleMenuOpenDomMutation, handleMoveDomMutation, isBlockMenuVisible, isDragHandleElement } from './experience-check-utils';
 var TIMEOUT_DURATION = 1000;
 var pluginKey = new PluginKey('blockMenuExperiences');
 var START_METHOD = {
@@ -17,13 +18,14 @@ var ABORT_REASON = {
 export var getBlockMenuExperiencesPlugin = function getBlockMenuExperiencesPlugin(_ref) {
   var refs = _ref.refs,
     dispatchAnalyticsEvent = _ref.dispatchAnalyticsEvent;
-  var targetEl;
-  var editorViewEl;
+  var popupTargetEl;
+  var editorView;
   var getPopupsTarget = function getPopupsTarget() {
-    if (!targetEl) {
-      targetEl = refs.popupsMountPoint || getPopupContainerFromEditorView(editorViewEl);
+    if (!popupTargetEl) {
+      var _editorView;
+      popupTargetEl = refs.popupsMountPoint || getPopupContainerFromEditorView((_editorView = editorView) === null || _editorView === void 0 ? void 0 : _editorView.dom);
     }
-    return targetEl;
+    return popupTargetEl;
   };
   var blockMenuOpenExperience = new Experience(EXPERIENCE_ID.MENU_OPEN, {
     actionSubjectId: ACTION_SUBJECT_ID.BLOCK_MENU,
@@ -31,15 +33,7 @@ export var getBlockMenuExperiencesPlugin = function getBlockMenuExperiencesPlugi
     checks: [new ExperienceCheckTimeout({
       durationMs: TIMEOUT_DURATION
     }), new ExperienceCheckDomMutation({
-      onDomMutation: function onDomMutation(_ref2) {
-        var mutations = _ref2.mutations;
-        if (mutations.some(isBlockMenuAddedInMutation)) {
-          return {
-            status: 'success'
-          };
-        }
-        return undefined;
-      },
+      onDomMutation: handleMenuOpenDomMutation,
       observeConfig: function observeConfig() {
         return {
           target: getPopupsTarget(),
@@ -50,26 +44,89 @@ export var getBlockMenuExperiencesPlugin = function getBlockMenuExperiencesPlugi
       }
     })]
   });
+  var actionObserveConfig = function actionObserveConfig() {
+    return {
+      target: getParentDOMAtSelection(editorView),
+      options: {
+        childList: true
+      }
+    };
+  };
+  var blockMoveUpExperience = new Experience(EXPERIENCE_ID.MENU_ACTION, {
+    action: ACTION.MOVED,
+    actionSubjectId: ACTION_SUBJECT_ID.MOVE_UP_BLOCK,
+    dispatchAnalyticsEvent: dispatchAnalyticsEvent,
+    checks: [new ExperienceCheckTimeout({
+      durationMs: TIMEOUT_DURATION
+    }), new ExperienceCheckDomMutation({
+      onDomMutation: handleMoveDomMutation,
+      observeConfig: actionObserveConfig
+    })]
+  });
+  var blockMoveDownExperience = new Experience(EXPERIENCE_ID.MENU_ACTION, {
+    action: ACTION.MOVED,
+    actionSubjectId: ACTION_SUBJECT_ID.MOVE_DOWN_BLOCK,
+    dispatchAnalyticsEvent: dispatchAnalyticsEvent,
+    checks: [new ExperienceCheckTimeout({
+      durationMs: TIMEOUT_DURATION
+    }), new ExperienceCheckDomMutation({
+      onDomMutation: handleMoveDomMutation,
+      observeConfig: actionObserveConfig
+    })]
+  });
+  var blockDeleteExperience = new Experience(EXPERIENCE_ID.MENU_ACTION, {
+    action: ACTION.DELETED,
+    actionSubjectId: ACTION_SUBJECT_ID.DELETE_BLOCK,
+    dispatchAnalyticsEvent: dispatchAnalyticsEvent,
+    checks: [new ExperienceCheckTimeout({
+      durationMs: TIMEOUT_DURATION
+    }), new ExperienceCheckDomMutation({
+      onDomMutation: handleDeleteDomMutation,
+      observeConfig: actionObserveConfig
+    })]
+  });
+  var handleMenuOpened = function handleMenuOpened(method) {
+    // Don't start if block menu is already visible
+    if (isBlockMenuVisible(getPopupsTarget())) {
+      return;
+    }
+    blockMenuOpenExperience.start({
+      method: method
+    });
+  };
+  var handleItemActioned = function handleItemActioned(target) {
+    var button = target.closest('button[data-testid]');
+    if (!button || !(button instanceof HTMLButtonElement) || button.disabled || button.getAttribute('aria-disabled') === 'true') {
+      return;
+    }
+    var testId = button.dataset.testid;
+    if (!testId) {
+      return;
+    }
+    switch (testId) {
+      case BLOCK_MENU_ACTION_TEST_ID.MOVE_UP:
+        blockMoveUpExperience.start();
+        break;
+      case BLOCK_MENU_ACTION_TEST_ID.MOVE_DOWN:
+        blockMoveDownExperience.start();
+        break;
+      case BLOCK_MENU_ACTION_TEST_ID.DELETE:
+        blockDeleteExperience.start();
+        break;
+    }
+  };
   var unbindClickListener = bind(document, {
     type: 'click',
     listener: function listener(event) {
-      if (!(event.target instanceof Element)) {
-        return;
-      }
       var target = event.target;
-
-      // Check if the click is on a drag handle
-      if (!isDragHandleElement(target)) {
+      if (!(target instanceof HTMLElement)) {
         return;
       }
-
-      // Don't start if block menu is already visible
-      if (isBlockMenuVisible(getPopupsTarget())) {
-        return;
+      if (isDragHandleElement(target)) {
+        handleMenuOpened(START_METHOD.DRAG_HANDLE_CLICK);
+      } else {
+        handleItemActioned(target);
       }
-      blockMenuOpenExperience.start({
-        method: START_METHOD.DRAG_HANDLE_CLICK
-      });
     },
     options: {
       capture: true
@@ -78,20 +135,14 @@ export var getBlockMenuExperiencesPlugin = function getBlockMenuExperiencesPlugi
   var unbindKeydownListener = bind(document, {
     type: 'keydown',
     listener: function listener(event) {
-      if (!(event.target instanceof Element)) {
+      var target = event.target;
+      if (!(target instanceof HTMLElement)) {
         return;
       }
-      var target = event.target;
 
       // Check if Enter or Space is pressed on a drag handle
       if ((event.key === 'Enter' || event.key === ' ') && isDragHandleElement(target)) {
-        // Don't start if block menu is already visible
-        if (isBlockMenuVisible(getPopupsTarget())) {
-          return;
-        }
-        blockMenuOpenExperience.start({
-          method: START_METHOD.KEYBOARD
-        });
+        handleMenuOpened(START_METHOD.KEYBOARD);
       }
 
       // Abort on Escape key if block menu is not yet visible
@@ -107,34 +158,27 @@ export var getBlockMenuExperiencesPlugin = function getBlockMenuExperiencesPlugi
   });
   return new SafePlugin({
     key: pluginKey,
-    view: function view(editorView) {
-      editorViewEl = editorView.dom;
+    view: function view(_view) {
+      editorView = _view;
       return {
         destroy: function destroy() {
           blockMenuOpenExperience.abort({
             reason: ABORT_REASON.EDITOR_DESTROYED
           });
+          blockMoveUpExperience.abort({
+            reason: ABORT_REASON.EDITOR_DESTROYED
+          });
+          blockMoveDownExperience.abort({
+            reason: ABORT_REASON.EDITOR_DESTROYED
+          });
+          blockDeleteExperience.abort({
+            reason: ABORT_REASON.EDITOR_DESTROYED
+          });
+          editorView = undefined;
           unbindClickListener();
           unbindKeydownListener();
         }
       };
     }
   });
-};
-var isBlockMenuAddedInMutation = function isBlockMenuAddedInMutation(_ref3) {
-  var type = _ref3.type,
-    addedNodes = _ref3.addedNodes;
-  return type === 'childList' && _toConsumableArray(addedNodes).some(isBlockMenuWithinNode);
-};
-var isBlockMenuWithinNode = function isBlockMenuWithinNode(node) {
-  return popupWithNestedElement(node, '[data-testid="editor-block-menu"]') !== null;
-};
-var isDragHandleElement = function isDragHandleElement(element) {
-  return !!(element !== null && element !== void 0 && element.closest('[data-editor-block-ctrl-drag-handle]'));
-};
-var isBlockMenuVisible = function isBlockMenuVisible(popupsTarget) {
-  if (!popupsTarget) {
-    return false;
-  }
-  return popupWithNestedElement(popupsTarget, '[data-testid="editor-block-menu"]') !== null;
 };