@atlaskit/editor-plugin-block-menu 3.2.2 → 3.2.4

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/editor-plugin-block-menu
 
+## 3.2.4
+
+### Patch Changes
+
+- [`ef686b3cfdbff`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/ef686b3cfdbff) -
+  ED-29222: Make empty line experiment dependent on block menu
+- Updated dependencies
+
+## 3.2.3
+
+### Patch Changes
+
+- [`d5e5b25fe885a`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/d5e5b25fe885a) -
+  [ux] ED-29226 Open block menu when drag handle is focussed and space or enter key is pressed
+- Updated dependencies
+
 ## 3.2.2
 
 ### Patch Changes

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

@@ -5,7 +5,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.formatNode = void 0;
 var _utils = require("@atlaskit/editor-prosemirror/utils");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _expValEqualsNoExposure = require("@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure");
+var _selection = require("./selection");
 var _layoutTransforms = require("./transforms/layout-transforms");
 var _transformNodeToTargetType = require("./transforms/transformNodeToTargetType");
 /**
@@ -98,7 +100,11 @@ var formatNode = exports.formatNode = function formatNode(targetType) {
       nodePos = selection.$from.pos;
     }
     try {
-      return (0, _transformNodeToTargetType.transformNodeToTargetType)(tr, nodeToFormat, nodePos, targetType);
+      var newTr = (0, _transformNodeToTargetType.transformNodeToTargetType)(tr, nodeToFormat, nodePos, targetType);
+      if (newTr && (0, _platformFeatureFlags.fg)('platform_editor_block_menu_selection_fix')) {
+        return (0, _selection.setSelectionAfterTransform)(newTr, nodePos, targetType);
+      }
+      return newTr;
     } catch (_unused) {
       return null;
     }

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

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.setSelectionAfterTransform = void 0;
+var _state = require("@atlaskit/editor-prosemirror/state");
+/**
+ * Sets the appropriate selection after transforming a node to a target type
+ * @param newTr - The transaction containing the transformed node
+ * @param nodePos - The position of the transformed node
+ * @param targetType - The target type the node was transformed to
+ * @returns The transaction with the updated selection, or the original transaction if no selection change needed
+ */
+var setSelectionAfterTransform = exports.setSelectionAfterTransform = function setSelectionAfterTransform(newTr, nodePos, targetType) {
+  // Find the actual node that was transformed to get its positioning
+  var transformedNodePos = newTr.doc.resolve(nodePos);
+  var transformedNode = transformedNodePos.nodeAfter;
+  if (!transformedNode) {
+    return newTr;
+  }
+
+  // Check if target type is other than list, text, heading, blockquotes
+  var isListNode = targetType === 'bulletList' || targetType === 'orderedList' || targetType === 'taskList';
+  var isBlockquote = targetType === 'blockquote';
+  var isContainer = ['panel', 'expand', 'codeBlock', 'layoutSection'].includes(targetType);
+  if (isListNode || isBlockquote) {
+    // For taskList, select all content within the list
+    var textStart = transformedNodePos.pos + 1; // Inside the taskList
+    var textEnd = transformedNodePos.pos + transformedNode.nodeSize - 1; // End of taskList content
+    var textSelection = _state.TextSelection.between(newTr.doc.resolve(textStart), newTr.doc.resolve(textEnd));
+    return newTr.setSelection(textSelection);
+  } else if (isContainer) {
+    // Use NodeSelection for types other than list, text, heading, blockquotes
+    var nodeSelection = _state.NodeSelection.create(newTr.doc, transformedNodePos.pos);
+    return newTr.setSelection(nodeSelection);
+  }
+  return newTr;
+};

package/dist/cjs/ui/block-menu.js

@@ -56,7 +56,7 @@ var BlockMenuContent = function BlockMenuContent(_ref) {
   }));
 };
 var BlockMenu = function BlockMenu(_ref2) {
-  var _editorView$hasFocus, _editorView$dom;
+  var _editorView$dom, _ref3, _editorView$hasFocus;
   var editorView = _ref2.editorView,
     api = _ref2.api,
     mountTo = _ref2.mountTo,
@@ -77,13 +77,13 @@ var BlockMenu = function BlockMenu(_ref2) {
     currentUserIntent = _useSharedPluginState.currentUserIntent;
   var _useBlockMenu = (0, _blockMenuProvider.useBlockMenu)(),
     onDropdownOpenChanged = _useBlockMenu.onDropdownOpenChanged;
-  var hasFocus = (_editorView$hasFocus = editorView === null || editorView === void 0 ? void 0 : editorView.hasFocus()) !== null && _editorView$hasFocus !== void 0 ? _editorView$hasFocus : false;
+  var targetHandleRef = editorView === null || editorView === void 0 || (_editorView$dom = editorView.dom) === null || _editorView$dom === void 0 ? void 0 : _editorView$dom.querySelector(_styles.DRAG_HANDLE_SELECTOR);
+  var hasFocus = (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_block_menu_keyboard_navigation', 'isEnabled', true) ? (_ref3 = (editorView === null || editorView === void 0 ? void 0 : editorView.hasFocus()) || document.activeElement === targetHandleRef) !== null && _ref3 !== void 0 ? _ref3 : false : (_editorView$hasFocus = editorView === null || editorView === void 0 ? void 0 : editorView.hasFocus()) !== null && _editorView$hasFocus !== void 0 ? _editorView$hasFocus : false;
   var hasSelection = !!editorView && !editorView.state.selection.empty;
-  var emptyLineEnabled = (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_block_menu_empty_line', 'isEnabled', true);
 
   // hasSelection true, always show block menu
   // hasSelection false, only show block menu when empty line experiment is enabled
-  var shouldShowBlockMenuForEmptyLine = hasSelection || emptyLineEnabled && !hasSelection;
+  var shouldShowBlockMenuForEmptyLine = hasSelection || !hasSelection && (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_block_menu_empty_line', 'isEnabled', true);
   (0, _react.useEffect)(function () {
     var _api$userIntent;
     if (!isMenuOpen || !menuTriggerBy || !isSelectedViaDragHandle || !hasFocus || !shouldShowBlockMenuForEmptyLine || ['resizing', 'dragging'].includes(currentUserIntent || '')) {
@@ -95,9 +95,9 @@ var BlockMenu = function BlockMenu(_ref2) {
     return null;
   }
   var closeMenu = function closeMenu() {
-    api === null || api === void 0 || api.core.actions.execute(function (_ref3) {
+    api === null || api === void 0 || api.core.actions.execute(function (_ref4) {
       var _api$blockControls, _api$userIntent2;
-      var tr = _ref3.tr;
+      var tr = _ref4.tr;
       api === null || api === void 0 || (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 || _api$blockControls.commands.toggleBlockMenu({
         closeMenu: true
       })({
@@ -114,7 +114,6 @@ var BlockMenu = function BlockMenu(_ref2) {
     closeMenu();
     return null;
   }
-  var targetHandleRef = editorView === null || editorView === void 0 || (_editorView$dom = editorView.dom) === null || _editorView$dom === void 0 ? void 0 : _editorView$dom.querySelector(_styles.DRAG_HANDLE_SELECTOR);
   if (targetHandleRef instanceof HTMLElement) {
     return /*#__PURE__*/_react.default.createElement(PopupWithListeners, {
       alignX: 'right',

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

@@ -1,5 +1,7 @@
 import { findParentNodeOfType, findSelectedNodeOfType, safeInsert as pmSafeInsert } from '@atlaskit/editor-prosemirror/utils';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
+import { setSelectionAfterTransform } from './selection';
 import { createDefaultLayoutSection } from './transforms/layout-transforms';
 import { transformNodeToTargetType } from './transforms/transformNodeToTargetType';
 /**
@@ -101,7 +103,11 @@ export const formatNode = targetType => {
       nodePos = selection.$from.pos;
     }
     try {
-      return transformNodeToTargetType(tr, nodeToFormat, nodePos, targetType);
+      const newTr = transformNodeToTargetType(tr, nodeToFormat, nodePos, targetType);
+      if (newTr && fg('platform_editor_block_menu_selection_fix')) {
+        return setSelectionAfterTransform(newTr, nodePos, targetType);
+      }
+      return newTr;
     } catch {
       return null;
     }

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

@@ -0,0 +1,33 @@
+import { NodeSelection, TextSelection } from '@atlaskit/editor-prosemirror/state';
+/**
+ * Sets the appropriate selection after transforming a node to a target type
+ * @param newTr - The transaction containing the transformed node
+ * @param nodePos - The position of the transformed node
+ * @param targetType - The target type the node was transformed to
+ * @returns The transaction with the updated selection, or the original transaction if no selection change needed
+ */
+export const setSelectionAfterTransform = (newTr, nodePos, targetType) => {
+  // Find the actual node that was transformed to get its positioning
+  const transformedNodePos = newTr.doc.resolve(nodePos);
+  const transformedNode = transformedNodePos.nodeAfter;
+  if (!transformedNode) {
+    return newTr;
+  }
+
+  // Check if target type is other than list, text, heading, blockquotes
+  const isListNode = targetType === 'bulletList' || targetType === 'orderedList' || targetType === 'taskList';
+  const isBlockquote = targetType === 'blockquote';
+  const isContainer = ['panel', 'expand', 'codeBlock', 'layoutSection'].includes(targetType);
+  if (isListNode || isBlockquote) {
+    // For taskList, select all content within the list
+    const textStart = transformedNodePos.pos + 1; // Inside the taskList
+    const textEnd = transformedNodePos.pos + transformedNode.nodeSize - 1; // End of taskList content
+    const textSelection = TextSelection.between(newTr.doc.resolve(textStart), newTr.doc.resolve(textEnd));
+    return newTr.setSelection(textSelection);
+  } else if (isContainer) {
+    // Use NodeSelection for types other than list, text, heading, blockquotes
+    const nodeSelection = NodeSelection.create(newTr.doc, transformedNodePos.pos);
+    return newTr.setSelection(nodeSelection);
+  }
+  return newTr;
+};

package/dist/es2019/ui/block-menu.js

@@ -49,7 +49,7 @@ const BlockMenu = ({
   boundariesElement,
   scrollableElement
 }) => {
-  var _editorView$hasFocus, _editorView$dom;
+  var _editorView$dom, _ref, _editorView$hasFocus;
   const {
     menuTriggerBy,
     isSelectedViaDragHandle,
@@ -67,13 +67,13 @@ const BlockMenu = ({
   const {
     onDropdownOpenChanged
   } = useBlockMenu();
-  const hasFocus = (_editorView$hasFocus = editorView === null || editorView === void 0 ? void 0 : editorView.hasFocus()) !== null && _editorView$hasFocus !== void 0 ? _editorView$hasFocus : false;
+  const targetHandleRef = editorView === null || editorView === void 0 ? void 0 : (_editorView$dom = editorView.dom) === null || _editorView$dom === void 0 ? void 0 : _editorView$dom.querySelector(DRAG_HANDLE_SELECTOR);
+  const hasFocus = expValEqualsNoExposure('platform_editor_block_menu_keyboard_navigation', 'isEnabled', true) ? (_ref = (editorView === null || editorView === void 0 ? void 0 : editorView.hasFocus()) || document.activeElement === targetHandleRef) !== null && _ref !== void 0 ? _ref : false : (_editorView$hasFocus = editorView === null || editorView === void 0 ? void 0 : editorView.hasFocus()) !== null && _editorView$hasFocus !== void 0 ? _editorView$hasFocus : false;
   const hasSelection = !!editorView && !editorView.state.selection.empty;
-  const emptyLineEnabled = expValEqualsNoExposure('platform_editor_block_menu_empty_line', 'isEnabled', true);
 
   // hasSelection true, always show block menu
   // hasSelection false, only show block menu when empty line experiment is enabled
-  const shouldShowBlockMenuForEmptyLine = hasSelection || emptyLineEnabled && !hasSelection;
+  const shouldShowBlockMenuForEmptyLine = hasSelection || !hasSelection && expValEqualsNoExposure('platform_editor_block_menu_empty_line', 'isEnabled', true);
   useEffect(() => {
     var _api$userIntent;
     if (!isMenuOpen || !menuTriggerBy || !isSelectedViaDragHandle || !hasFocus || !shouldShowBlockMenuForEmptyLine || ['resizing', 'dragging'].includes(currentUserIntent || '')) {
@@ -105,7 +105,6 @@ const BlockMenu = ({
     closeMenu();
     return null;
   }
-  const targetHandleRef = editorView === null || editorView === void 0 ? void 0 : (_editorView$dom = editorView.dom) === null || _editorView$dom === void 0 ? void 0 : _editorView$dom.querySelector(DRAG_HANDLE_SELECTOR);
   if (targetHandleRef instanceof HTMLElement) {
     return /*#__PURE__*/React.createElement(PopupWithListeners, {
       alignX: 'right',

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

@@ -1,5 +1,7 @@
 import { findParentNodeOfType, findSelectedNodeOfType, safeInsert as pmSafeInsert } from '@atlaskit/editor-prosemirror/utils';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
+import { setSelectionAfterTransform } from './selection';
 import { createDefaultLayoutSection } from './transforms/layout-transforms';
 import { transformNodeToTargetType } from './transforms/transformNodeToTargetType';
 /**
@@ -92,7 +94,11 @@ export var formatNode = function formatNode(targetType) {
       nodePos = selection.$from.pos;
     }
     try {
-      return transformNodeToTargetType(tr, nodeToFormat, nodePos, targetType);
+      var newTr = transformNodeToTargetType(tr, nodeToFormat, nodePos, targetType);
+      if (newTr && fg('platform_editor_block_menu_selection_fix')) {
+        return setSelectionAfterTransform(newTr, nodePos, targetType);
+      }
+      return newTr;
     } catch (_unused) {
       return null;
     }

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

@@ -0,0 +1,33 @@
+import { NodeSelection, TextSelection } from '@atlaskit/editor-prosemirror/state';
+/**
+ * Sets the appropriate selection after transforming a node to a target type
+ * @param newTr - The transaction containing the transformed node
+ * @param nodePos - The position of the transformed node
+ * @param targetType - The target type the node was transformed to
+ * @returns The transaction with the updated selection, or the original transaction if no selection change needed
+ */
+export var setSelectionAfterTransform = function setSelectionAfterTransform(newTr, nodePos, targetType) {
+  // Find the actual node that was transformed to get its positioning
+  var transformedNodePos = newTr.doc.resolve(nodePos);
+  var transformedNode = transformedNodePos.nodeAfter;
+  if (!transformedNode) {
+    return newTr;
+  }
+
+  // Check if target type is other than list, text, heading, blockquotes
+  var isListNode = targetType === 'bulletList' || targetType === 'orderedList' || targetType === 'taskList';
+  var isBlockquote = targetType === 'blockquote';
+  var isContainer = ['panel', 'expand', 'codeBlock', 'layoutSection'].includes(targetType);
+  if (isListNode || isBlockquote) {
+    // For taskList, select all content within the list
+    var textStart = transformedNodePos.pos + 1; // Inside the taskList
+    var textEnd = transformedNodePos.pos + transformedNode.nodeSize - 1; // End of taskList content
+    var textSelection = TextSelection.between(newTr.doc.resolve(textStart), newTr.doc.resolve(textEnd));
+    return newTr.setSelection(textSelection);
+  } else if (isContainer) {
+    // Use NodeSelection for types other than list, text, heading, blockquotes
+    var nodeSelection = NodeSelection.create(newTr.doc, transformedNodePos.pos);
+    return newTr.setSelection(nodeSelection);
+  }
+  return newTr;
+};

package/dist/esm/ui/block-menu.js

@@ -48,7 +48,7 @@ var BlockMenuContent = function BlockMenuContent(_ref) {
   }));
 };
 var BlockMenu = function BlockMenu(_ref2) {
-  var _editorView$hasFocus, _editorView$dom;
+  var _editorView$dom, _ref3, _editorView$hasFocus;
   var editorView = _ref2.editorView,
     api = _ref2.api,
     mountTo = _ref2.mountTo,
@@ -69,13 +69,13 @@ var BlockMenu = function BlockMenu(_ref2) {
     currentUserIntent = _useSharedPluginState.currentUserIntent;
   var _useBlockMenu = useBlockMenu(),
     onDropdownOpenChanged = _useBlockMenu.onDropdownOpenChanged;
-  var hasFocus = (_editorView$hasFocus = editorView === null || editorView === void 0 ? void 0 : editorView.hasFocus()) !== null && _editorView$hasFocus !== void 0 ? _editorView$hasFocus : false;
+  var targetHandleRef = editorView === null || editorView === void 0 || (_editorView$dom = editorView.dom) === null || _editorView$dom === void 0 ? void 0 : _editorView$dom.querySelector(DRAG_HANDLE_SELECTOR);
+  var hasFocus = expValEqualsNoExposure('platform_editor_block_menu_keyboard_navigation', 'isEnabled', true) ? (_ref3 = (editorView === null || editorView === void 0 ? void 0 : editorView.hasFocus()) || document.activeElement === targetHandleRef) !== null && _ref3 !== void 0 ? _ref3 : false : (_editorView$hasFocus = editorView === null || editorView === void 0 ? void 0 : editorView.hasFocus()) !== null && _editorView$hasFocus !== void 0 ? _editorView$hasFocus : false;
   var hasSelection = !!editorView && !editorView.state.selection.empty;
-  var emptyLineEnabled = expValEqualsNoExposure('platform_editor_block_menu_empty_line', 'isEnabled', true);
 
   // hasSelection true, always show block menu
   // hasSelection false, only show block menu when empty line experiment is enabled
-  var shouldShowBlockMenuForEmptyLine = hasSelection || emptyLineEnabled && !hasSelection;
+  var shouldShowBlockMenuForEmptyLine = hasSelection || !hasSelection && expValEqualsNoExposure('platform_editor_block_menu_empty_line', 'isEnabled', true);
   useEffect(function () {
     var _api$userIntent;
     if (!isMenuOpen || !menuTriggerBy || !isSelectedViaDragHandle || !hasFocus || !shouldShowBlockMenuForEmptyLine || ['resizing', 'dragging'].includes(currentUserIntent || '')) {
@@ -87,9 +87,9 @@ var BlockMenu = function BlockMenu(_ref2) {
     return null;
   }
   var closeMenu = function closeMenu() {
-    api === null || api === void 0 || api.core.actions.execute(function (_ref3) {
+    api === null || api === void 0 || api.core.actions.execute(function (_ref4) {
       var _api$blockControls, _api$userIntent2;
-      var tr = _ref3.tr;
+      var tr = _ref4.tr;
       api === null || api === void 0 || (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 || _api$blockControls.commands.toggleBlockMenu({
         closeMenu: true
       })({
@@ -106,7 +106,6 @@ var BlockMenu = function BlockMenu(_ref2) {
     closeMenu();
     return null;
   }
-  var targetHandleRef = editorView === null || editorView === void 0 || (_editorView$dom = editorView.dom) === null || _editorView$dom === void 0 ? void 0 : _editorView$dom.querySelector(DRAG_HANDLE_SELECTOR);
   if (targetHandleRef instanceof HTMLElement) {
     return /*#__PURE__*/React.createElement(PopupWithListeners, {
       alignX: 'right',

package/dist/types/editor-commands/selection.d.ts

@@ -0,0 +1,10 @@
+import { type Transaction } from '@atlaskit/editor-prosemirror/state';
+import type { FormatNodeTargetType } from './transforms/types';
+/**
+ * Sets the appropriate selection after transforming a node to a target type
+ * @param newTr - The transaction containing the transformed node
+ * @param nodePos - The position of the transformed node
+ * @param targetType - The target type the node was transformed to
+ * @returns The transaction with the updated selection, or the original transaction if no selection change needed
+ */
+export declare const setSelectionAfterTransform: (newTr: Transaction, nodePos: number, targetType: FormatNodeTargetType) => Transaction;

package/dist/types-ts4.5/editor-commands/selection.d.ts

@@ -0,0 +1,10 @@
+import { type Transaction } from '@atlaskit/editor-prosemirror/state';
+import type { FormatNodeTargetType } from './transforms/types';
+/**
+ * Sets the appropriate selection after transforming a node to a target type
+ * @param newTr - The transaction containing the transformed node
+ * @param nodePos - The position of the transformed node
+ * @param targetType - The target type the node was transformed to
+ * @returns The transaction with the updated selection, or the original transaction if no selection change needed
+ */
+export declare const setSelectionAfterTransform: (newTr: Transaction, nodePos: number, targetType: FormatNodeTargetType) => Transaction;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-block-menu",
-	"version": "3.2.2",
+	"version": "3.2.4",
 	"description": "BlockMenu plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -42,7 +42,7 @@
 		"@atlaskit/icon-lab": "^5.7.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/primitives": "^14.15.0",
-		"@atlaskit/tmp-editor-statsig": "^12.26.0",
+		"@atlaskit/tmp-editor-statsig": "^12.28.0",
 		"@atlaskit/tokens": "^6.3.0",
 		"@babel/runtime": "^7.0.0"
 	},
@@ -90,6 +90,9 @@
 	"platform-feature-flags": {
 		"platform_editor_adf_with_localid": {
 			"type": "boolean"
+		},
+		"platform_editor_block_menu_selection_fix": {
+			"type": "boolean"
 		}
 	}
 }