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

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/editor-plugin-block-menu
 
+## 6.0.28
+
+### Patch Changes
+
+- [`957d9e1880c62`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/957d9e1880c62) -
+  EDITOR-3806 Block menu action experience tracking
+- Updated dependencies
+
 ## 6.0.27
 
 ### Patch Changes

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

@@ -1,16 +1,16 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.getBlockMenuExperiencesPlugin = void 0;
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _bindEventListener = require("bind-event-listener");
 var _analytics = require("@atlaskit/editor-common/analytics");
+var _blockMenu = require("@atlaskit/editor-common/block-menu");
 var _experiences = require("@atlaskit/editor-common/experiences");
 var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
 var _state = require("@atlaskit/editor-prosemirror/state");
+var _experienceCheckUtils = require("./experience-check-utils");
 var TIMEOUT_DURATION = 1000;
 var pluginKey = new _state.PluginKey('blockMenuExperiences');
 var START_METHOD = {
@@ -24,13 +24,14 @@ var ABORT_REASON = {
 var getBlockMenuExperiencesPlugin = exports.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 || (0, _experiences.getPopupContainerFromEditorView)(editorViewEl);
+    if (!popupTargetEl) {
+      var _editorView;
+      popupTargetEl = refs.popupsMountPoint || (0, _experiences.getPopupContainerFromEditorView)((_editorView = editorView) === null || _editorView === void 0 ? void 0 : _editorView.dom);
     }
-    return targetEl;
+    return popupTargetEl;
   };
   var blockMenuOpenExperience = new _experiences.Experience(_experiences.EXPERIENCE_ID.MENU_OPEN, {
     actionSubjectId: _analytics.ACTION_SUBJECT_ID.BLOCK_MENU,
@@ -38,15 +39,7 @@ var getBlockMenuExperiencesPlugin = exports.getBlockMenuExperiencesPlugin = func
     checks: [new _experiences.ExperienceCheckTimeout({
       durationMs: TIMEOUT_DURATION
     }), new _experiences.ExperienceCheckDomMutation({
-      onDomMutation: function onDomMutation(_ref2) {
-        var mutations = _ref2.mutations;
-        if (mutations.some(isBlockMenuAddedInMutation)) {
-          return {
-            status: 'success'
-          };
-        }
-        return undefined;
-      },
+      onDomMutation: _experienceCheckUtils.handleMenuOpenDomMutation,
       observeConfig: function observeConfig() {
         return {
           target: getPopupsTarget(),
@@ -57,26 +50,89 @@ var getBlockMenuExperiencesPlugin = exports.getBlockMenuExperiencesPlugin = func
       }
     })]
   });
+  var actionObserveConfig = function actionObserveConfig() {
+    return {
+      target: (0, _experienceCheckUtils.getParentDOMAtSelection)(editorView),
+      options: {
+        childList: true
+      }
+    };
+  };
+  var blockMoveUpExperience = new _experiences.Experience(_experiences.EXPERIENCE_ID.MENU_ACTION, {
+    action: _analytics.ACTION.MOVED,
+    actionSubjectId: _analytics.ACTION_SUBJECT_ID.MOVE_UP_BLOCK,
+    dispatchAnalyticsEvent: dispatchAnalyticsEvent,
+    checks: [new _experiences.ExperienceCheckTimeout({
+      durationMs: TIMEOUT_DURATION
+    }), new _experiences.ExperienceCheckDomMutation({
+      onDomMutation: _experienceCheckUtils.handleMoveDomMutation,
+      observeConfig: actionObserveConfig
+    })]
+  });
+  var blockMoveDownExperience = new _experiences.Experience(_experiences.EXPERIENCE_ID.MENU_ACTION, {
+    action: _analytics.ACTION.MOVED,
+    actionSubjectId: _analytics.ACTION_SUBJECT_ID.MOVE_DOWN_BLOCK,
+    dispatchAnalyticsEvent: dispatchAnalyticsEvent,
+    checks: [new _experiences.ExperienceCheckTimeout({
+      durationMs: TIMEOUT_DURATION
+    }), new _experiences.ExperienceCheckDomMutation({
+      onDomMutation: _experienceCheckUtils.handleMoveDomMutation,
+      observeConfig: actionObserveConfig
+    })]
+  });
+  var blockDeleteExperience = new _experiences.Experience(_experiences.EXPERIENCE_ID.MENU_ACTION, {
+    action: _analytics.ACTION.DELETED,
+    actionSubjectId: _analytics.ACTION_SUBJECT_ID.DELETE_BLOCK,
+    dispatchAnalyticsEvent: dispatchAnalyticsEvent,
+    checks: [new _experiences.ExperienceCheckTimeout({
+      durationMs: TIMEOUT_DURATION
+    }), new _experiences.ExperienceCheckDomMutation({
+      onDomMutation: _experienceCheckUtils.handleDeleteDomMutation,
+      observeConfig: actionObserveConfig
+    })]
+  });
+  var handleMenuOpened = function handleMenuOpened(method) {
+    // Don't start if block menu is already visible
+    if ((0, _experienceCheckUtils.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 _blockMenu.BLOCK_MENU_ACTION_TEST_ID.MOVE_UP:
+        blockMoveUpExperience.start();
+        break;
+      case _blockMenu.BLOCK_MENU_ACTION_TEST_ID.MOVE_DOWN:
+        blockMoveDownExperience.start();
+        break;
+      case _blockMenu.BLOCK_MENU_ACTION_TEST_ID.DELETE:
+        blockDeleteExperience.start();
+        break;
+    }
+  };
   var unbindClickListener = (0, _bindEventListener.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 ((0, _experienceCheckUtils.isDragHandleElement)(target)) {
+        handleMenuOpened(START_METHOD.DRAG_HANDLE_CLICK);
+      } else {
+        handleItemActioned(target);
       }
-      blockMenuOpenExperience.start({
-        method: START_METHOD.DRAG_HANDLE_CLICK
-      });
     },
     options: {
       capture: true
@@ -85,24 +141,18 @@ var getBlockMenuExperiencesPlugin = exports.getBlockMenuExperiencesPlugin = func
   var unbindKeydownListener = (0, _bindEventListener.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
-        });
+      if ((event.key === 'Enter' || event.key === ' ') && (0, _experienceCheckUtils.isDragHandleElement)(target)) {
+        handleMenuOpened(START_METHOD.KEYBOARD);
       }
 
       // Abort on Escape key if block menu is not yet visible
-      if (event.key === 'Escape' && !isBlockMenuVisible(getPopupsTarget())) {
+      if (event.key === 'Escape' && !(0, _experienceCheckUtils.isBlockMenuVisible)(getPopupsTarget())) {
         blockMenuOpenExperience.abort({
           reason: ABORT_REASON.USER_CANCELED
         });
@@ -114,34 +164,27 @@ var getBlockMenuExperiencesPlugin = exports.getBlockMenuExperiencesPlugin = func
   });
   return new _safePlugin.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' && (0, _toConsumableArray2.default)(addedNodes).some(isBlockMenuWithinNode);
-};
-var isBlockMenuWithinNode = function isBlockMenuWithinNode(node) {
-  return (0, _experiences.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 (0, _experiences.popupWithNestedElement)(popupsTarget, '[data-testid="editor-block-menu"]') !== null;
 };

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

@@ -0,0 +1,147 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isDragHandleElement = exports.isBlockMenuVisible = exports.handleMoveDomMutation = exports.handleMenuOpenDomMutation = exports.handleDeleteDomMutation = exports.getParentDOMAtSelection = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _experiences = require("@atlaskit/editor-common/experiences");
+function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t.return || t.return(); } finally { if (u) throw o; } } }; }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+/**
+ * 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.
+ */
+var isDragHandleElement = exports.isDragHandleElement = function 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.
+ */
+var isBlockMenuVisible = exports.isBlockMenuVisible = function isBlockMenuVisible(popupsTarget) {
+  if (!popupsTarget) {
+    return false;
+  }
+  return (0, _experiences.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
+ */
+var getParentDOMAtSelection = exports.getParentDOMAtSelection = function getParentDOMAtSelection(editorView) {
+  if (!editorView) {
+    return null;
+  }
+  var selection = editorView.state.selection;
+  var from = selection.from;
+  var nodeDOM = editorView.nodeDOM(from);
+  if (nodeDOM instanceof HTMLElement) {
+    return nodeDOM.parentElement;
+  }
+  return null;
+};
+var isBlockMenuAddedInMutation = function isBlockMenuAddedInMutation(_ref) {
+  var type = _ref.type,
+    addedNodes = _ref.addedNodes;
+  return type === 'childList' && (0, _toConsumableArray2.default)(addedNodes).some(isBlockMenuWithinNode);
+};
+var isBlockMenuWithinNode = function isBlockMenuWithinNode(node) {
+  return (0, _experiences.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
+ */
+var handleMenuOpenDomMutation = exports.handleMenuOpenDomMutation = function handleMenuOpenDomMutation(_ref2) {
+  var mutations = _ref2.mutations;
+  // Look for a mutation that added the block menu
+  var _iterator = _createForOfIteratorHelper(mutations),
+    _step;
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var mutation = _step.value;
+      if (isBlockMenuAddedInMutation(mutation)) {
+        return {
+          status: 'success'
+        };
+      }
+    }
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+  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
+ */
+var handleMoveDomMutation = exports.handleMoveDomMutation = function handleMoveDomMutation(_ref3) {
+  var mutations = _ref3.mutations;
+  var removeMutation = mutations.find(function (m) {
+    return m.type === 'childList' && m.removedNodes.length > 0;
+  });
+  var addMutation = mutations.find(function (m) {
+    return 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
+ */
+var handleDeleteDomMutation = exports.handleDeleteDomMutation = function handleDeleteDomMutation(_ref4) {
+  var mutations = _ref4.mutations;
+  // Delete action produces a single childList mutation with only removedNodes
+  var childListMutations = mutations.filter(function (m) {
+    return m.type === 'childList';
+  });
+
+  // Check for at least one mutation with removedNodes but no addedNodes
+  if (childListMutations.some(function (m) {
+    return m.removedNodes.length > 0 && m.addedNodes.length === 0;
+  })) {
+    return {
+      status: 'success'
+    };
+  }
+  return undefined;
+};

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

@@ -9,6 +9,7 @@ exports.DeleteDropdownItem = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _reactIntlNext = require("react-intl-next");
 var _analytics = require("@atlaskit/editor-common/analytics");
+var _blockMenu = require("@atlaskit/editor-common/block-menu");
 var _messages = require("@atlaskit/editor-common/messages");
 var _selection = require("@atlaskit/editor-common/selection");
 var _editorToolbar = require("@atlaskit/editor-toolbar");
@@ -105,7 +106,8 @@ var DeleteDropdownItemContent = function DeleteDropdownItemContent(_ref) {
       color: "var(--ds-icon-danger, #C9372C)",
       label: ""
     }),
-    onClick: onClick
+    onClick: onClick,
+    testId: _blockMenu.BLOCK_MENU_ACTION_TEST_ID.DELETE
   }, /*#__PURE__*/_react.default.createElement(_text.default, {
     as: "span",
     color: "color.text.danger"

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

@@ -10,6 +10,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _reactIntlNext = require("react-intl-next");
 var _browserApis = require("@atlaskit/browser-apis");
 var _analytics = require("@atlaskit/editor-common/analytics");
+var _blockMenu = require("@atlaskit/editor-common/block-menu");
 var _hooks = require("@atlaskit/editor-common/hooks");
 var _messages = require("@atlaskit/editor-common/messages");
 var _types = require("@atlaskit/editor-common/types");
@@ -72,7 +73,8 @@ var MoveDownDropdownItemContent = function MoveDownDropdownItemContent(_ref) {
     elemBefore: /*#__PURE__*/_react.default.createElement(_arrowDown.default, {
       label: ""
     }),
-    isDisabled: !canMoveDown
+    isDisabled: !canMoveDown,
+    testId: _blockMenu.BLOCK_MENU_ACTION_TEST_ID.MOVE_DOWN
   }, formatMessage(_messages.blockMenuMessages.moveDownBlock));
 };
 var MoveDownDropdownItem = exports.MoveDownDropdownItem = (0, _reactIntlNext.injectIntl)(MoveDownDropdownItemContent);

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

@@ -10,6 +10,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _reactIntlNext = require("react-intl-next");
 var _browserApis = require("@atlaskit/browser-apis");
 var _analytics = require("@atlaskit/editor-common/analytics");
+var _blockMenu = require("@atlaskit/editor-common/block-menu");
 var _hooks = require("@atlaskit/editor-common/hooks");
 var _messages = require("@atlaskit/editor-common/messages");
 var _types = require("@atlaskit/editor-common/types");
@@ -70,7 +71,8 @@ var MoveUpDropdownItemContent = function MoveUpDropdownItemContent(_ref) {
     elemBefore: /*#__PURE__*/_react.default.createElement(_arrowUp.default, {
       label: ""
     }),
-    isDisabled: !canMoveUp
+    isDisabled: !canMoveUp,
+    testId: _blockMenu.BLOCK_MENU_ACTION_TEST_ID.MOVE_UP
   }, formatMessage(_messages.blockMenuMessages.moveUpBlock));
 };
 var MoveUpDropdownItem = exports.MoveUpDropdownItem = (0, _reactIntlNext.injectIntl)(MoveUpDropdownItemContent);

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;
 };