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

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/editor-plugin-block-menu
 
+## 6.0.27
+
+### Patch Changes
+
+- [`4cafa94a73e1e`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/4cafa94a73e1e) -
+  Add delete track event for block menu
+- Updated dependencies
+
 ## 6.0.26
 
 ### Patch Changes

package/dist/cjs/blockMenuPlugin.js

@@ -10,6 +10,7 @@ var _editorActions = require("./editor-actions");
 var _isTransformToTargetDisabled = require("./editor-actions/isTransformToTargetDisabled");
 var _formatNode2 = require("./editor-commands/formatNode");
 var _transformNode2 = require("./editor-commands/transformNode");
+var _blockMenuExperiences = require("./pm-plugins/experiences/block-menu-experiences");
 var _keymap = require("./pm-plugins/keymap");
 var _main = require("./pm-plugins/main");
 var _blockMenu = _interopRequireDefault(require("./ui/block-menu"));
@@ -24,6 +25,7 @@ var blockMenuPlugin = exports.blockMenuPlugin = function blockMenuPlugin(_ref) {
     api: api,
     config: config
   }));
+  var refs = {};
   return {
     name: 'blockMenu',
     pmPlugins: function pmPlugins() {
@@ -37,6 +39,17 @@ var blockMenuPlugin = exports.blockMenuPlugin = function blockMenuPlugin(_ref) {
         plugin: function plugin() {
           return (0, _keymap.keymapPlugin)(api, config);
         }
+      }, {
+        name: 'blockMenuExperiences',
+        plugin: function plugin() {
+          return (0, _blockMenuExperiences.getBlockMenuExperiencesPlugin)({
+            refs: refs,
+            dispatchAnalyticsEvent: function dispatchAnalyticsEvent(payload) {
+              var _api$analytics;
+              return 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(payload);
+            }
+          });
+        }
       }];
     },
     actions: {
@@ -94,6 +107,7 @@ var blockMenuPlugin = exports.blockMenuPlugin = function blockMenuPlugin(_ref) {
         popupsMountPoint = _ref2.popupsMountPoint,
         popupsBoundariesElement = _ref2.popupsBoundariesElement,
         popupsScrollableElement = _ref2.popupsScrollableElement;
+      refs.popupsMountPoint = popupsMountPoint || undefined;
       return /*#__PURE__*/_react.default.createElement(_blockMenuProvider.BlockMenuProvider, {
         api: api,
         editorView: editorView

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

@@ -84,6 +84,7 @@ var transformNode = exports.transformNode = function transformNode(api) {
             isNested: isNested,
             sourceNodesCount: sourceNodes.length,
             sourceNodesCountByType: sourceNodeTypes,
+            sourceNodeType: sourceNodes.length === 1 ? sourceNodes[0].type.name : 'multiple',
             startTime: startTime,
             targetNodeType: targetType.name,
             outputNodesCount: content.length,

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

@@ -0,0 +1,147 @@
+"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 _experiences = require("@atlaskit/editor-common/experiences");
+var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
+var _state = require("@atlaskit/editor-prosemirror/state");
+var TIMEOUT_DURATION = 1000;
+var pluginKey = new _state.PluginKey('blockMenuExperiences');
+var START_METHOD = {
+  DRAG_HANDLE_CLICK: 'dragHandleClick',
+  KEYBOARD: 'keyboard'
+};
+var ABORT_REASON = {
+  USER_CANCELED: 'userCanceled',
+  EDITOR_DESTROYED: 'editorDestroyed'
+};
+var getBlockMenuExperiencesPlugin = exports.getBlockMenuExperiencesPlugin = function getBlockMenuExperiencesPlugin(_ref) {
+  var refs = _ref.refs,
+    dispatchAnalyticsEvent = _ref.dispatchAnalyticsEvent;
+  var targetEl;
+  var editorViewEl;
+  var getPopupsTarget = function getPopupsTarget() {
+    if (!targetEl) {
+      targetEl = refs.popupsMountPoint || (0, _experiences.getPopupContainerFromEditorView)(editorViewEl);
+    }
+    return targetEl;
+  };
+  var blockMenuOpenExperience = new _experiences.Experience(_experiences.EXPERIENCE_ID.MENU_OPEN, {
+    actionSubjectId: _analytics.ACTION_SUBJECT_ID.BLOCK_MENU,
+    dispatchAnalyticsEvent: dispatchAnalyticsEvent,
+    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;
+      },
+      observeConfig: function observeConfig() {
+        return {
+          target: getPopupsTarget(),
+          options: {
+            childList: true
+          }
+        };
+      }
+    })]
+  });
+  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)) {
+        return;
+      }
+
+      // Don't start if block menu is already visible
+      if (isBlockMenuVisible(getPopupsTarget())) {
+        return;
+      }
+      blockMenuOpenExperience.start({
+        method: START_METHOD.DRAG_HANDLE_CLICK
+      });
+    },
+    options: {
+      capture: true
+    }
+  });
+  var unbindKeydownListener = (0, _bindEventListener.bind)(document, {
+    type: 'keydown',
+    listener: function listener(event) {
+      if (!(event.target instanceof Element)) {
+        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
+        });
+      }
+
+      // Abort on Escape key if block menu is not yet visible
+      if (event.key === 'Escape' && !isBlockMenuVisible(getPopupsTarget())) {
+        blockMenuOpenExperience.abort({
+          reason: ABORT_REASON.USER_CANCELED
+        });
+      }
+    },
+    options: {
+      capture: true
+    }
+  });
+  return new _safePlugin.SafePlugin({
+    key: pluginKey,
+    view: function view(editorView) {
+      editorViewEl = editorView.dom;
+      return {
+        destroy: function destroy() {
+          blockMenuOpenExperience.abort({
+            reason: ABORT_REASON.EDITOR_DESTROYED
+          });
+          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/ui/delete-button.js

@@ -34,7 +34,30 @@ var DeleteDropdownItemContent = function DeleteDropdownItemContent(_ref) {
         eventType: _analytics.EVENT_TYPE.UI
       };
       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(payload)(tr);
-      (0, _selection.deleteSelectedRange)(tr, api === null || api === void 0 || (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 || (_api$blockControls = _api$blockControls.sharedState.currentState()) === null || _api$blockControls === void 0 ? void 0 : _api$blockControls.preservedSelection);
+
+      // Extract node information before deletion
+      var preservedSelection = api === null || api === void 0 || (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 || (_api$blockControls = _api$blockControls.sharedState.currentState()) === null || _api$blockControls === void 0 ? void 0 : _api$blockControls.preservedSelection;
+      var selection = preservedSelection || tr.selection;
+      var sourceNodes = (0, _selection.getSourceNodesFromSelectionRange)(tr, selection);
+      var nodeCount = sourceNodes.length;
+
+      // Fire node deletion analytics event if nodes are being deleted
+      if (nodeCount > 0) {
+        var _api$analytics2;
+        var nodeType = sourceNodes.length === 1 ? sourceNodes[0].type.name : 'multiple';
+        var nodeDeletedPayload = {
+          action: _analytics.ACTION.DELETED,
+          actionSubject: _analytics.ACTION_SUBJECT.ELEMENT,
+          attributes: {
+            inputMethod: _analytics.INPUT_METHOD.BLOCK_MENU,
+            nodeType: nodeType,
+            nodeCount: nodeCount
+          },
+          eventType: _analytics.EVENT_TYPE.TRACK
+        };
+        api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 || (_api$analytics2 = _api$analytics2.actions) === null || _api$analytics2 === void 0 || _api$analytics2.attachAnalyticsEvent(nodeDeletedPayload)(tr);
+      }
+      (0, _selection.deleteSelectedRange)(tr, preservedSelection);
       api === null || api === void 0 || (_api$blockControls2 = api.blockControls) === null || _api$blockControls2 === void 0 || (_api$blockControls2 = _api$blockControls2.commands) === null || _api$blockControls2 === void 0 || _api$blockControls2.toggleBlockMenu({
         closeMenu: true
       })({

package/dist/es2019/blockMenuPlugin.js

@@ -3,6 +3,7 @@ import { createBlockMenuRegistry } from './editor-actions';
 import { isTransformToTargetDisabled } from './editor-actions/isTransformToTargetDisabled';
 import { formatNode } from './editor-commands/formatNode';
 import { transformNode } from './editor-commands/transformNode';
+import { getBlockMenuExperiencesPlugin } from './pm-plugins/experiences/block-menu-experiences';
 import { keymapPlugin } from './pm-plugins/keymap';
 import { blockMenuPluginKey, createPlugin } from './pm-plugins/main';
 import BlockMenu from './ui/block-menu';
@@ -18,6 +19,7 @@ export const blockMenuPlugin = ({
     api,
     config
   }));
+  const refs = {};
   return {
     name: 'blockMenu',
     pmPlugins() {
@@ -27,6 +29,15 @@ export const blockMenuPlugin = ({
       }, {
         name: 'blockMenuKeymap',
         plugin: () => keymapPlugin(api, config)
+      }, {
+        name: 'blockMenuExperiences',
+        plugin: () => getBlockMenuExperiencesPlugin({
+          refs,
+          dispatchAnalyticsEvent: payload => {
+            var _api$analytics, _api$analytics$action;
+            return api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : (_api$analytics$action = _api$analytics.actions) === null || _api$analytics$action === void 0 ? void 0 : _api$analytics$action.fireAnalyticsEvent(payload);
+          }
+        })
       }];
     },
     actions: {
@@ -85,6 +96,7 @@ export const blockMenuPlugin = ({
       popupsBoundariesElement,
       popupsScrollableElement
     }) {
+      refs.popupsMountPoint = popupsMountPoint || undefined;
       return /*#__PURE__*/React.createElement(BlockMenuProvider, {
         api: api,
         editorView: editorView

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

@@ -76,6 +76,7 @@ export const transformNode = api => (targetType, metadata) => ({
         isNested,
         sourceNodesCount: sourceNodes.length,
         sourceNodesCountByType: sourceNodeTypes,
+        sourceNodeType: sourceNodes.length === 1 ? sourceNodes[0].type.name : 'multiple',
         startTime,
         targetNodeType: targetType.name,
         outputNodesCount: content.length,

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

@@ -0,0 +1,140 @@
+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 { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { PluginKey } from '@atlaskit/editor-prosemirror/state';
+const TIMEOUT_DURATION = 1000;
+const pluginKey = new PluginKey('blockMenuExperiences');
+const START_METHOD = {
+  DRAG_HANDLE_CLICK: 'dragHandleClick',
+  KEYBOARD: 'keyboard'
+};
+const ABORT_REASON = {
+  USER_CANCELED: 'userCanceled',
+  EDITOR_DESTROYED: 'editorDestroyed'
+};
+export const getBlockMenuExperiencesPlugin = ({
+  refs,
+  dispatchAnalyticsEvent
+}) => {
+  let targetEl;
+  let editorViewEl;
+  const getPopupsTarget = () => {
+    if (!targetEl) {
+      targetEl = refs.popupsMountPoint || getPopupContainerFromEditorView(editorViewEl);
+    }
+    return targetEl;
+  };
+  const blockMenuOpenExperience = new Experience(EXPERIENCE_ID.MENU_OPEN, {
+    actionSubjectId: ACTION_SUBJECT_ID.BLOCK_MENU,
+    dispatchAnalyticsEvent,
+    checks: [new ExperienceCheckTimeout({
+      durationMs: TIMEOUT_DURATION
+    }), new ExperienceCheckDomMutation({
+      onDomMutation: ({
+        mutations
+      }) => {
+        if (mutations.some(isBlockMenuAddedInMutation)) {
+          return {
+            status: 'success'
+          };
+        }
+        return undefined;
+      },
+      observeConfig: () => ({
+        target: getPopupsTarget(),
+        options: {
+          childList: true
+        }
+      })
+    })]
+  });
+  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)) {
+        return;
+      }
+
+      // Don't start if block menu is already visible
+      if (isBlockMenuVisible(getPopupsTarget())) {
+        return;
+      }
+      blockMenuOpenExperience.start({
+        method: START_METHOD.DRAG_HANDLE_CLICK
+      });
+    },
+    options: {
+      capture: true
+    }
+  });
+  const unbindKeydownListener = bind(document, {
+    type: 'keydown',
+    listener: event => {
+      if (!(event.target instanceof Element)) {
+        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
+        });
+      }
+
+      // Abort on Escape key if block menu is not yet visible
+      if (event.key === 'Escape' && !isBlockMenuVisible(getPopupsTarget())) {
+        blockMenuOpenExperience.abort({
+          reason: ABORT_REASON.USER_CANCELED
+        });
+      }
+    },
+    options: {
+      capture: true
+    }
+  });
+  return new SafePlugin({
+    key: pluginKey,
+    view: editorView => {
+      editorViewEl = editorView.dom;
+      return {
+        destroy: () => {
+          blockMenuOpenExperience.abort({
+            reason: ABORT_REASON.EDITOR_DESTROYED
+          });
+          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/ui/delete-button.js

@@ -1,8 +1,8 @@
 import React, { useCallback, useEffect } from 'react';
 import { injectIntl, useIntl } from 'react-intl-next';
-import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
+import { ACTION, ACTION_SUBJECT, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { blockMenuMessages } from '@atlaskit/editor-common/messages';
-import { deleteSelectedRange } from '@atlaskit/editor-common/selection';
+import { deleteSelectedRange, getSourceNodesFromSelectionRange } from '@atlaskit/editor-common/selection';
 import { ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
 import DeleteIcon from '@atlaskit/icon/core/delete';
 import { Box } from '@atlaskit/primitives/box';
@@ -28,7 +28,30 @@ const DeleteDropdownItemContent = ({
         eventType: EVENT_TYPE.UI
       };
       api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : (_api$analytics$action = _api$analytics.actions) === null || _api$analytics$action === void 0 ? void 0 : _api$analytics$action.attachAnalyticsEvent(payload)(tr);
-      deleteSelectedRange(tr, api === null || api === void 0 ? void 0 : (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 ? void 0 : (_api$blockControls$sh = _api$blockControls.sharedState.currentState()) === null || _api$blockControls$sh === void 0 ? void 0 : _api$blockControls$sh.preservedSelection);
+
+      // Extract node information before deletion
+      const preservedSelection = api === null || api === void 0 ? void 0 : (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 ? void 0 : (_api$blockControls$sh = _api$blockControls.sharedState.currentState()) === null || _api$blockControls$sh === void 0 ? void 0 : _api$blockControls$sh.preservedSelection;
+      const selection = preservedSelection || tr.selection;
+      const sourceNodes = getSourceNodesFromSelectionRange(tr, selection);
+      const nodeCount = sourceNodes.length;
+
+      // Fire node deletion analytics event if nodes are being deleted
+      if (nodeCount > 0) {
+        var _api$analytics2, _api$analytics2$actio;
+        const nodeType = sourceNodes.length === 1 ? sourceNodes[0].type.name : 'multiple';
+        const nodeDeletedPayload = {
+          action: ACTION.DELETED,
+          actionSubject: ACTION_SUBJECT.ELEMENT,
+          attributes: {
+            inputMethod: INPUT_METHOD.BLOCK_MENU,
+            nodeType,
+            nodeCount
+          },
+          eventType: EVENT_TYPE.TRACK
+        };
+        api === null || api === void 0 ? void 0 : (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : (_api$analytics2$actio = _api$analytics2.actions) === null || _api$analytics2$actio === void 0 ? void 0 : _api$analytics2$actio.attachAnalyticsEvent(nodeDeletedPayload)(tr);
+      }
+      deleteSelectedRange(tr, preservedSelection);
       api === null || api === void 0 ? void 0 : (_api$blockControls2 = api.blockControls) === null || _api$blockControls2 === void 0 ? void 0 : (_api$blockControls2$c = _api$blockControls2.commands) === null || _api$blockControls2$c === void 0 ? void 0 : _api$blockControls2$c.toggleBlockMenu({
         closeMenu: true
       })({

package/dist/esm/blockMenuPlugin.js

@@ -3,6 +3,7 @@ import { createBlockMenuRegistry } from './editor-actions';
 import { isTransformToTargetDisabled } from './editor-actions/isTransformToTargetDisabled';
 import { formatNode as _formatNode } from './editor-commands/formatNode';
 import { transformNode as _transformNode } from './editor-commands/transformNode';
+import { getBlockMenuExperiencesPlugin } from './pm-plugins/experiences/block-menu-experiences';
 import { keymapPlugin } from './pm-plugins/keymap';
 import { blockMenuPluginKey, createPlugin } from './pm-plugins/main';
 import BlockMenu from './ui/block-menu';
@@ -17,6 +18,7 @@ export var blockMenuPlugin = function blockMenuPlugin(_ref) {
     api: api,
     config: config
   }));
+  var refs = {};
   return {
     name: 'blockMenu',
     pmPlugins: function pmPlugins() {
@@ -30,6 +32,17 @@ export var blockMenuPlugin = function blockMenuPlugin(_ref) {
         plugin: function plugin() {
           return keymapPlugin(api, config);
         }
+      }, {
+        name: 'blockMenuExperiences',
+        plugin: function plugin() {
+          return getBlockMenuExperiencesPlugin({
+            refs: refs,
+            dispatchAnalyticsEvent: function dispatchAnalyticsEvent(payload) {
+              var _api$analytics;
+              return 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(payload);
+            }
+          });
+        }
       }];
     },
     actions: {
@@ -87,6 +100,7 @@ export var blockMenuPlugin = function blockMenuPlugin(_ref) {
         popupsMountPoint = _ref2.popupsMountPoint,
         popupsBoundariesElement = _ref2.popupsBoundariesElement,
         popupsScrollableElement = _ref2.popupsScrollableElement;
+      refs.popupsMountPoint = popupsMountPoint || undefined;
       return /*#__PURE__*/React.createElement(BlockMenuProvider, {
         api: api,
         editorView: editorView

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

@@ -78,6 +78,7 @@ export var transformNode = function transformNode(api) {
             isNested: isNested,
             sourceNodesCount: sourceNodes.length,
             sourceNodesCountByType: sourceNodeTypes,
+            sourceNodeType: sourceNodes.length === 1 ? sourceNodes[0].type.name : 'multiple',
             startTime: startTime,
             targetNodeType: targetType.name,
             outputNodesCount: content.length,

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

@@ -0,0 +1,140 @@
+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 { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { PluginKey } from '@atlaskit/editor-prosemirror/state';
+var TIMEOUT_DURATION = 1000;
+var pluginKey = new PluginKey('blockMenuExperiences');
+var START_METHOD = {
+  DRAG_HANDLE_CLICK: 'dragHandleClick',
+  KEYBOARD: 'keyboard'
+};
+var ABORT_REASON = {
+  USER_CANCELED: 'userCanceled',
+  EDITOR_DESTROYED: 'editorDestroyed'
+};
+export var getBlockMenuExperiencesPlugin = function getBlockMenuExperiencesPlugin(_ref) {
+  var refs = _ref.refs,
+    dispatchAnalyticsEvent = _ref.dispatchAnalyticsEvent;
+  var targetEl;
+  var editorViewEl;
+  var getPopupsTarget = function getPopupsTarget() {
+    if (!targetEl) {
+      targetEl = refs.popupsMountPoint || getPopupContainerFromEditorView(editorViewEl);
+    }
+    return targetEl;
+  };
+  var blockMenuOpenExperience = new Experience(EXPERIENCE_ID.MENU_OPEN, {
+    actionSubjectId: ACTION_SUBJECT_ID.BLOCK_MENU,
+    dispatchAnalyticsEvent: dispatchAnalyticsEvent,
+    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;
+      },
+      observeConfig: function observeConfig() {
+        return {
+          target: getPopupsTarget(),
+          options: {
+            childList: true
+          }
+        };
+      }
+    })]
+  });
+  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)) {
+        return;
+      }
+
+      // Don't start if block menu is already visible
+      if (isBlockMenuVisible(getPopupsTarget())) {
+        return;
+      }
+      blockMenuOpenExperience.start({
+        method: START_METHOD.DRAG_HANDLE_CLICK
+      });
+    },
+    options: {
+      capture: true
+    }
+  });
+  var unbindKeydownListener = bind(document, {
+    type: 'keydown',
+    listener: function listener(event) {
+      if (!(event.target instanceof Element)) {
+        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
+        });
+      }
+
+      // Abort on Escape key if block menu is not yet visible
+      if (event.key === 'Escape' && !isBlockMenuVisible(getPopupsTarget())) {
+        blockMenuOpenExperience.abort({
+          reason: ABORT_REASON.USER_CANCELED
+        });
+      }
+    },
+    options: {
+      capture: true
+    }
+  });
+  return new SafePlugin({
+    key: pluginKey,
+    view: function view(editorView) {
+      editorViewEl = editorView.dom;
+      return {
+        destroy: function destroy() {
+          blockMenuOpenExperience.abort({
+            reason: ABORT_REASON.EDITOR_DESTROYED
+          });
+          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;
+};

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

@@ -1,8 +1,8 @@
 import React, { useCallback, useEffect } from 'react';
 import { injectIntl, useIntl } from 'react-intl-next';
-import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
+import { ACTION, ACTION_SUBJECT, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { blockMenuMessages } from '@atlaskit/editor-common/messages';
-import { deleteSelectedRange } from '@atlaskit/editor-common/selection';
+import { deleteSelectedRange, getSourceNodesFromSelectionRange } from '@atlaskit/editor-common/selection';
 import { ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
 import DeleteIcon from '@atlaskit/icon/core/delete';
 import { Box } from '@atlaskit/primitives/box';
@@ -25,7 +25,30 @@ var DeleteDropdownItemContent = function DeleteDropdownItemContent(_ref) {
         eventType: EVENT_TYPE.UI
       };
       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(payload)(tr);
-      deleteSelectedRange(tr, api === null || api === void 0 || (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 || (_api$blockControls = _api$blockControls.sharedState.currentState()) === null || _api$blockControls === void 0 ? void 0 : _api$blockControls.preservedSelection);
+
+      // Extract node information before deletion
+      var preservedSelection = api === null || api === void 0 || (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 || (_api$blockControls = _api$blockControls.sharedState.currentState()) === null || _api$blockControls === void 0 ? void 0 : _api$blockControls.preservedSelection;
+      var selection = preservedSelection || tr.selection;
+      var sourceNodes = getSourceNodesFromSelectionRange(tr, selection);
+      var nodeCount = sourceNodes.length;
+
+      // Fire node deletion analytics event if nodes are being deleted
+      if (nodeCount > 0) {
+        var _api$analytics2;
+        var nodeType = sourceNodes.length === 1 ? sourceNodes[0].type.name : 'multiple';
+        var nodeDeletedPayload = {
+          action: ACTION.DELETED,
+          actionSubject: ACTION_SUBJECT.ELEMENT,
+          attributes: {
+            inputMethod: INPUT_METHOD.BLOCK_MENU,
+            nodeType: nodeType,
+            nodeCount: nodeCount
+          },
+          eventType: EVENT_TYPE.TRACK
+        };
+        api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 || (_api$analytics2 = _api$analytics2.actions) === null || _api$analytics2 === void 0 || _api$analytics2.attachAnalyticsEvent(nodeDeletedPayload)(tr);
+      }
+      deleteSelectedRange(tr, preservedSelection);
       api === null || api === void 0 || (_api$blockControls2 = api.blockControls) === null || _api$blockControls2 === void 0 || (_api$blockControls2 = _api$blockControls2.commands) === null || _api$blockControls2 === void 0 || _api$blockControls2.toggleBlockMenu({
         closeMenu: true
       })({

package/dist/types/pm-plugins/experiences/block-menu-experiences.d.ts

@@ -0,0 +1,10 @@
+import { type DispatchAnalyticsEvent } from '@atlaskit/editor-common/analytics';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+type ExperienceOptions = {
+    dispatchAnalyticsEvent: DispatchAnalyticsEvent;
+    refs: {
+        popupsMountPoint?: HTMLElement;
+    };
+};
+export declare const getBlockMenuExperiencesPlugin: ({ refs, dispatchAnalyticsEvent, }: ExperienceOptions) => SafePlugin<any>;
+export {};

package/dist/types-ts4.5/pm-plugins/experiences/block-menu-experiences.d.ts

@@ -0,0 +1,10 @@
+import { type DispatchAnalyticsEvent } from '@atlaskit/editor-common/analytics';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+type ExperienceOptions = {
+    dispatchAnalyticsEvent: DispatchAnalyticsEvent;
+    refs: {
+        popupsMountPoint?: HTMLElement;
+    };
+};
+export declare const getBlockMenuExperiencesPlugin: ({ refs, dispatchAnalyticsEvent, }: ExperienceOptions) => SafePlugin<any>;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-block-menu",
-	"version": "6.0.26",
+	"version": "6.0.27",
 	"description": "BlockMenu plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -46,9 +46,10 @@
 		"@atlaskit/platform-feature-flags-react": "^0.4.0",
 		"@atlaskit/primitives": "^17.1.0",
 		"@atlaskit/prosemirror-history": "^0.2.0",
-		"@atlaskit/tmp-editor-statsig": "^17.0.0",
+		"@atlaskit/tmp-editor-statsig": "^17.2.0",
 		"@atlaskit/tokens": "^10.1.0",
-		"@babel/runtime": "^7.0.0"
+		"@babel/runtime": "^7.0.0",
+		"bind-event-listener": "^3.0.0"
 	},
 	"peerDependencies": {
 		"@atlaskit/editor-common": "^111.9.0",