@atlaskit/editor-plugin-block-menu 5.2.15 → 5.2.17

package/dist/esm/editor-commands/transform-node-utils/transform.js

@@ -8,6 +8,7 @@ import { unwrapLayoutStep } from './steps/unwrapLayoutStep';
 import { unwrapListStep } from './steps/unwrapListStep';
 import { wrapBlockquoteToDecisionListStep } from './steps/wrapBlockquoteToDecisionListStep';
 import { wrapMixedContentStep } from './steps/wrapMixedContentStep';
+import { wrapTextToCodeblockStep } from './steps/wrapTextToCodeblock';
 import { stubStep } from './stubStep';
 import { NODE_CATEGORY_BY_TYPE, toNodeTypeValue } from './types';
 import { unwrapExpandStep } from './unwrapExpandStep';
@@ -16,14 +17,6 @@ import { wrapIntoLayoutStep } from './wrapIntoLayoutStep';
 import { wrapIntoListStep } from './wrapIntoListStep';
 import { wrapStep } from './wrapStep';
 
-// Exampled step for overrides:
-// - open Block menu on a paragraph, click 'Panel' in the Turn into'
-// - expected to put paragraph into a panel
-var wrapIntoPanelStep = function wrapIntoPanelStep(nodes, context) {
-  var newNode = context.schema.nodes.panel.createAndFill({}, nodes);
-  return newNode ? [newNode] : [];
-};
-
 // Transform steps for combinations of node categories (block/container/list/text)
 var TRANSFORM_STEPS = {
   atomic: {
@@ -46,8 +39,8 @@ var TRANSFORM_STEPS = {
   },
   text: {
     atomic: undefined,
-    container: [stubStep],
-    list: [stubStep],
+    container: [wrapStep],
+    list: [wrapIntoListStep],
     text: [stubStep]
   }
 };
@@ -56,7 +49,8 @@ var TRANSFORM_STEPS = {
 // using generic rules/steps from TRANSFORM_STEPS.
 var TRANSFORM_STEPS_OVERRIDE = {
   paragraph: {
-    panel: [wrapIntoPanelStep]
+    codeBlock: [wrapTextToCodeblockStep],
+    layoutSection: [wrapIntoLayoutStep]
   },
   panel: {
     layoutSection: [unwrapStep, wrapIntoLayoutStep],
@@ -130,6 +124,12 @@ var TRANSFORM_STEPS_OVERRIDE = {
     orderedList: [decisionListToListStep],
     taskList: [decisionListToListStep],
     layoutSection: [wrapIntoLayoutStep]
+  },
+  blockCard: {
+    layoutSection: [wrapIntoLayoutStep]
+  },
+  embedCard: {
+    layoutSection: [wrapIntoLayoutStep]
   }
 };
 var getTransformStepsForNodeTypes = function getTransformStepsForNodeTypes(selectedNodeTypeName, targetNodeTypeName) {

package/dist/esm/editor-commands/transform-node-utils/utils.js

@@ -49,12 +49,6 @@ export var getTargetNodeTypeNameInContext = function getTargetNodeTypeNameInCont
   }
   return nodeTypeName;
 };
-export var isListType = function isListType(node, schema) {
-  var lists = [schema.nodes.taskList, schema.nodes.bulletList, schema.nodes.orderedList];
-  return lists.some(function (list) {
-    return list === node.type;
-  });
-};
 
 /**
  * Converts a nestedExpand to a regular expand node.
@@ -101,4 +95,23 @@ export var getBlockNodesInRange = function getBlockNodesInRange(range) {
     }
   }
   return blockNodes;
+};
+
+/**
+ * Iterates over a nodes children and extracting text content, removing all other inline content and converting
+ * hardbreaks to newlines.
+ *
+ * @param node - The node to create text content from (should be paragraph)
+ * @returns The text content string.
+ */
+export var createTextContent = function createTextContent(node) {
+  var textContent = node.children.map(function (child) {
+    if (child.isText) {
+      return child.text;
+    } else if (child.type.name === 'hardBreak') {
+      return '\n';
+    }
+    return '';
+  });
+  return textContent.join('');
 };

package/dist/esm/editor-commands/transform-node-utils/wrapIntoListStep.js

@@ -1,11 +1,33 @@
-/** wrap nodes into bullet list or numbered list, does not work for task list */
+import { isListWithTextContentOnly } from './nodeChecks';
+var wrapIntoTaskOrDecisionList = function wrapIntoTaskOrDecisionList(nodes, targetNodeTypeName, schema) {
+  var itemNodeType = targetNodeTypeName === 'taskList' ? schema.nodes.taskItem : schema.nodes.decisionItem;
+  var inlineContent = nodes.flatMap(function (node) {
+    if (node.isTextblock) {
+      return node.children;
+    } else if (node.isText) {
+      return [node];
+    }
+    return [];
+  });
+  var itemNode = itemNodeType.create({}, inlineContent);
+  var outputNode = schema.nodes[targetNodeTypeName].createAndFill({}, itemNode);
+  return outputNode ? [outputNode] : nodes;
+};
+var wrapIntoBulletOrOrderedList = function wrapIntoBulletOrOrderedList(nodes, targetNodeTypeName, schema) {
+  var listItemNode = schema.nodes.listItem.createAndFill({}, nodes);
+  var outputNode = schema.nodes[targetNodeTypeName].createAndFill({}, listItemNode);
+  return outputNode ? [outputNode] : nodes;
+};
+
+/**
+ * Wraps nodes into bullet list, numbered list, task list, or decision list.
+ *
+ * @param nodes - The nodes to wrap.
+ * @param context - The transformation context containing schema and target node type.
+ * @returns The wrapped nodes.
+ */
 export var wrapIntoListStep = function wrapIntoListStep(nodes, context) {
   var schema = context.schema,
     targetNodeTypeName = context.targetNodeTypeName;
-  var listItemNode = schema.nodes.listItem.createAndFill({}, nodes);
-  var outputNode = schema.nodes[targetNodeTypeName].createAndFill({}, listItemNode);
-  if (outputNode) {
-    return [outputNode];
-  }
-  return nodes;
+  return isListWithTextContentOnly(targetNodeTypeName, schema) ? wrapIntoTaskOrDecisionList(nodes, targetNodeTypeName, schema) : wrapIntoBulletOrOrderedList(nodes, targetNodeTypeName, schema);
 };

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

@@ -20,8 +20,9 @@ export var transformNode = function transformNode(api) {
         var _expandSelectionToBlo = expandSelectionToBlockRange(preservedSelection),
           $from = _expandSelectionToBlo.$from,
           $to = _expandSelectionToBlo.$to;
-        var isNested = isNestedNode(preservedSelection, '');
         var selectedParent = $from.parent;
+        var isParentLayout = selectedParent.type === nodes.layoutColumn;
+        var isNestedExceptLayout = isNestedNode(preservedSelection, '') && !isParentLayout;
         var fragment = Fragment.empty;
         var isList = isListNode(selectedParent);
         var slice = tr.doc.slice(isList ? $from.pos - 1 : $from.pos, isList ? $to.pos + 1 : $to.pos);
@@ -30,7 +31,7 @@ export var transformNode = function transformNode(api) {
             sourceNode: node,
             targetNodeType: targetType,
             schema: tr.doc.type.schema,
-            isNested: isNested
+            isNested: isNestedExceptLayout
           });
           if (outputNode) {
             fragment = fragment.append(Fragment.fromArray(outputNode));

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

@@ -196,9 +196,7 @@ export var getBlockMenuComponents = function getBlockMenuComponents(_ref7) {
     rank: MAIN_BLOCK_MENU_SECTION_RANK[DELETE_MENU_SECTION.key],
     component: function component(_ref0) {
       var children = _ref0.children;
-      return /*#__PURE__*/React.createElement(DeleteSection, {
-        api: api
-      }, children);
+      return /*#__PURE__*/React.createElement(DeleteSection, null, children);
     }
   }, {
     type: 'block-menu-item',

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

@@ -118,7 +118,7 @@ var BlockMenuContent = function BlockMenuContent(_ref3) {
   })));
 };
 var BlockMenu = function BlockMenu(_ref4) {
-  var _editorView$dom, _ref5;
+  var _editorView$dom, _ref5, _api$analytics3;
   var editorView = _ref4.editorView,
     api = _ref4.api,
     mountTo = _ref4.mountTo,
@@ -193,6 +193,13 @@ var BlockMenu = function BlockMenu(_ref4) {
       return tr;
     });
   };
+  var handleClickOutside = function handleClickOutside(e) {
+    // check if the clicked element was another drag handle, if so don't close the menu
+    if (e.target instanceof HTMLElement && e.target.closest(DRAG_HANDLE_SELECTOR)) {
+      return;
+    }
+    closeMenu();
+  };
   var closeMenu = function closeMenu() {
     api === null || api === void 0 || api.core.actions.execute(function (_ref7) {
       var _api$blockControls3, _api$userIntent3;
@@ -218,39 +225,37 @@ var BlockMenu = function BlockMenu(_ref4) {
       popupRef.current = el;
     }
   };
-  if (targetHandleRef instanceof HTMLElement) {
-    var _api$analytics3;
-    return /*#__PURE__*/React.createElement(ErrorBoundary, {
-      component: ACTION_SUBJECT.BLOCK_MENU,
-      dispatchAnalyticsEvent: api === null || api === void 0 || (_api$analytics3 = api.analytics) === null || _api$analytics3 === void 0 ? void 0 : _api$analytics3.actions.fireAnalyticsEvent,
-      fallbackComponent: null
-    }, /*#__PURE__*/React.createElement(PopupWithListeners, {
-      alignX: 'right',
-      alignY: 'start',
-      handleClickOutside: closeMenu,
-      handleEscapeKeydown: closeMenu,
-      handleBackspaceDeleteKeydown: handleBackspaceDeleteKeydown,
-      mountTo: mountTo,
-      boundariesElement: boundariesElement,
-      scrollableElement: scrollableElement,
-      target: targetHandleRef,
-      zIndex: akEditorFloatingOverlapPanelZIndex,
-      fitWidth: DEFAULT_MENU_WIDTH,
-      fitHeight: menuHeight,
-      preventOverflow: true,
-      stick: true,
-      offset: [DRAG_HANDLE_WIDTH + DRAG_HANDLE_OFFSET_PADDING, targetHandleHeightOffset],
-      focusTrap: openedViaKeyboard ?
-      // Only enable focus trap when opened via keyboard to make sure the focus is on the first focusable menu item
-      {
-        initialFocus: undefined
-      } : undefined
-    }, /*#__PURE__*/React.createElement(BlockMenuContent, {
-      api: api,
-      setRef: setRef
-    })));
-  } else {
+  if (!(targetHandleRef instanceof HTMLElement)) {
     return null;
   }
+  return /*#__PURE__*/React.createElement(ErrorBoundary, {
+    component: ACTION_SUBJECT.BLOCK_MENU,
+    dispatchAnalyticsEvent: api === null || api === void 0 || (_api$analytics3 = api.analytics) === null || _api$analytics3 === void 0 ? void 0 : _api$analytics3.actions.fireAnalyticsEvent,
+    fallbackComponent: null
+  }, /*#__PURE__*/React.createElement(PopupWithListeners, {
+    alignX: 'right',
+    alignY: 'start',
+    handleClickOutside: handleClickOutside,
+    handleEscapeKeydown: closeMenu,
+    handleBackspaceDeleteKeydown: handleBackspaceDeleteKeydown,
+    mountTo: mountTo,
+    boundariesElement: boundariesElement,
+    scrollableElement: scrollableElement,
+    target: targetHandleRef,
+    zIndex: akEditorFloatingOverlapPanelZIndex,
+    fitWidth: DEFAULT_MENU_WIDTH,
+    fitHeight: menuHeight,
+    preventOverflow: true,
+    stick: true,
+    offset: [DRAG_HANDLE_WIDTH + DRAG_HANDLE_OFFSET_PADDING, targetHandleHeightOffset],
+    focusTrap: openedViaKeyboard ?
+    // Only enable focus trap when opened via keyboard to make sure the focus is on the first focusable menu item
+    {
+      initialFocus: undefined
+    } : undefined
+  }, /*#__PURE__*/React.createElement(BlockMenuContent, {
+    api: api,
+    setRef: setRef
+  })));
 };
 export default injectIntl(BlockMenu);

package/dist/esm/ui/copy-link.js

@@ -76,8 +76,8 @@ var CopyLinkDropdownItemContent = function CopyLinkDropdownItemContent(_ref) {
     });
   }, [api, blockLinkHashPrefix, getLinkPath, onDropdownOpenChanged, selection]);
 
-  // Hide copy link when `platform_editor_adf_with_localid` feature flag is off or when the node is nested or on empty line
-  if (!fg('platform_editor_adf_with_localid') || !!menuTriggerBy && isNestedNode(selection, menuTriggerBy) || selection !== null && selection !== void 0 && selection.empty) {
+  // Hide copy link when `platform_editor_adf_with_localid` feature flag is off or when the node is nested
+  if (!fg('platform_editor_adf_with_localid') || !!menuTriggerBy && isNestedNode(selection, menuTriggerBy)) {
     return null;
   }
   return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {

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

@@ -1,14 +1,7 @@
 import React from 'react';
 import { ToolbarDropdownItemSection } from '@atlaskit/editor-toolbar';
 export var DeleteSection = function DeleteSection(_ref) {
-  var _api$selection;
-  var api = _ref.api,
-    children = _ref.children;
-  var selection = api === null || api === void 0 || (_api$selection = api.selection) === null || _api$selection === void 0 || (_api$selection = _api$selection.sharedState) === null || _api$selection === void 0 || (_api$selection = _api$selection.currentState()) === null || _api$selection === void 0 ? void 0 : _api$selection.selection;
-  var isEmptyLineSelected = !!(selection !== null && selection !== void 0 && selection.empty);
-  if (isEmptyLineSelected) {
-    return null;
-  }
+  var children = _ref.children;
   return /*#__PURE__*/React.createElement(ToolbarDropdownItemSection, {
     hasSeparator: true
   }, children);

package/dist/types/editor-commands/transform-node-utils/nodeChecks.d.ts

@@ -0,0 +1,17 @@
+import type { Schema } from '@atlaskit/editor-prosemirror/model';
+/**
+ * Checks if a node is a list type that supports indentation (bulletList, orderedList, taskList).
+ *
+ * @param node - The node to check.
+ * @param schema - ProseMirror schema for check
+ * @returns True if the node is a list type, false otherwise.
+ */
+export declare const isListWithIndentation: (nodeTypeName: string, schema: Schema) => boolean;
+/**
+ * Checks if a node is a list where its list items only support text content (taskList or decisionList).
+ *
+ * @param nodeTypeName - The node type name to check.
+ * @param schema - ProseMirror schema for check
+ * @returns True if the node is a list text type, false otherwise.
+ */
+export declare const isListWithTextContentOnly: (nodeTypeName: string, schema: Schema) => boolean;

package/dist/types/editor-commands/transform-node-utils/steps/wrapTextToCodeblock.d.ts

@@ -0,0 +1,9 @@
+import type { TransformStep } from '../types';
+/**
+ * Transforms a paragraph (or heading) into a codeBlock by extracting its text content.
+ * This step handles the conversion of inline content (including marks) to plain text,
+ * which is required because codeBlocks can only contain plain text nodes.
+ *
+ * Example: paragraph with bold/italic/status → codeBlock with plain text
+ */
+export declare const wrapTextToCodeblockStep: TransformStep;

package/dist/types/editor-commands/transform-node-utils/utils.d.ts

@@ -4,7 +4,6 @@ import { type ContentNodeWithPos } from '@atlaskit/editor-prosemirror/utils';
 import type { NodeTypeName } from './types';
 export declare const getSelectedNode: (selection: Selection) => ContentNodeWithPos | undefined;
 export declare const getTargetNodeTypeNameInContext: (nodeTypeName: NodeTypeName | null, isNested?: boolean) => NodeTypeName | null;
-export declare const isListType: (node: PMNode, schema: Schema) => boolean;
 /**
  * Converts a nestedExpand to a regular expand node.
  * NestedExpands can only exist inside expands, so when breaking out or placing
@@ -18,3 +17,11 @@ export declare const convertNestedExpandToExpand: (node: PMNode, schema: Schema)
  */
 export declare const convertExpandToNestedExpand: (node: PMNode, schema: Schema) => PMNode | null;
 export declare const getBlockNodesInRange: (range: NodeRange) => PMNode[];
+/**
+ * Iterates over a nodes children and extracting text content, removing all other inline content and converting
+ * hardbreaks to newlines.
+ *
+ * @param node - The node to create text content from (should be paragraph)
+ * @returns The text content string.
+ */
+export declare const createTextContent: (node: PMNode) => string;

package/dist/types/editor-commands/transform-node-utils/wrapIntoListStep.d.ts

@@ -1,3 +1,9 @@
 import type { TransformStep } from './types';
-/** wrap nodes into bullet list or numbered list, does not work for task list */
+/**
+ * Wraps nodes into bullet list, numbered list, task list, or decision list.
+ *
+ * @param nodes - The nodes to wrap.
+ * @param context - The transformation context containing schema and target node type.
+ * @returns The wrapped nodes.
+ */
 export declare const wrapIntoListStep: TransformStep;

package/dist/types/ui/delete-section.d.ts

@@ -1,7 +1,4 @@
 import React from 'react';
-import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
-import type { BlockMenuPlugin } from '../blockMenuPluginType';
-export declare const DeleteSection: ({ api, children, }: {
-    api: ExtractInjectionAPI<BlockMenuPlugin> | undefined;
+export declare const DeleteSection: ({ children, }: {
     children: React.ReactNode;
 }) => React.JSX.Element | null;

package/dist/types-ts4.5/editor-commands/transform-node-utils/nodeChecks.d.ts

@@ -0,0 +1,17 @@
+import type { Schema } from '@atlaskit/editor-prosemirror/model';
+/**
+ * Checks if a node is a list type that supports indentation (bulletList, orderedList, taskList).
+ *
+ * @param node - The node to check.
+ * @param schema - ProseMirror schema for check
+ * @returns True if the node is a list type, false otherwise.
+ */
+export declare const isListWithIndentation: (nodeTypeName: string, schema: Schema) => boolean;
+/**
+ * Checks if a node is a list where its list items only support text content (taskList or decisionList).
+ *
+ * @param nodeTypeName - The node type name to check.
+ * @param schema - ProseMirror schema for check
+ * @returns True if the node is a list text type, false otherwise.
+ */
+export declare const isListWithTextContentOnly: (nodeTypeName: string, schema: Schema) => boolean;

package/dist/types-ts4.5/editor-commands/transform-node-utils/steps/wrapTextToCodeblock.d.ts

@@ -0,0 +1,9 @@
+import type { TransformStep } from '../types';
+/**
+ * Transforms a paragraph (or heading) into a codeBlock by extracting its text content.
+ * This step handles the conversion of inline content (including marks) to plain text,
+ * which is required because codeBlocks can only contain plain text nodes.
+ *
+ * Example: paragraph with bold/italic/status → codeBlock with plain text
+ */
+export declare const wrapTextToCodeblockStep: TransformStep;

package/dist/types-ts4.5/editor-commands/transform-node-utils/utils.d.ts

@@ -4,7 +4,6 @@ import { type ContentNodeWithPos } from '@atlaskit/editor-prosemirror/utils';
 import type { NodeTypeName } from './types';
 export declare const getSelectedNode: (selection: Selection) => ContentNodeWithPos | undefined;
 export declare const getTargetNodeTypeNameInContext: (nodeTypeName: NodeTypeName | null, isNested?: boolean) => NodeTypeName | null;
-export declare const isListType: (node: PMNode, schema: Schema) => boolean;
 /**
  * Converts a nestedExpand to a regular expand node.
  * NestedExpands can only exist inside expands, so when breaking out or placing
@@ -18,3 +17,11 @@ export declare const convertNestedExpandToExpand: (node: PMNode, schema: Schema)
  */
 export declare const convertExpandToNestedExpand: (node: PMNode, schema: Schema) => PMNode | null;
 export declare const getBlockNodesInRange: (range: NodeRange) => PMNode[];
+/**
+ * Iterates over a nodes children and extracting text content, removing all other inline content and converting
+ * hardbreaks to newlines.
+ *
+ * @param node - The node to create text content from (should be paragraph)
+ * @returns The text content string.
+ */
+export declare const createTextContent: (node: PMNode) => string;

package/dist/types-ts4.5/editor-commands/transform-node-utils/wrapIntoListStep.d.ts

@@ -1,3 +1,9 @@
 import type { TransformStep } from './types';
-/** wrap nodes into bullet list or numbered list, does not work for task list */
+/**
+ * Wraps nodes into bullet list, numbered list, task list, or decision list.
+ *
+ * @param nodes - The nodes to wrap.
+ * @param context - The transformation context containing schema and target node type.
+ * @returns The wrapped nodes.
+ */
 export declare const wrapIntoListStep: TransformStep;

package/dist/types-ts4.5/ui/delete-section.d.ts

@@ -1,7 +1,4 @@
 import React from 'react';
-import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
-import type { BlockMenuPlugin } from '../blockMenuPluginType';
-export declare const DeleteSection: ({ api, children, }: {
-    api: ExtractInjectionAPI<BlockMenuPlugin> | undefined;
+export declare const DeleteSection: ({ children, }: {
     children: React.ReactNode;
 }) => React.JSX.Element | null;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-block-menu",
-	"version": "5.2.15",
+	"version": "5.2.17",
 	"description": "BlockMenu plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -40,16 +40,16 @@
 		"@atlaskit/editor-tables": "^2.9.0",
 		"@atlaskit/editor-toolbar": "^0.18.0",
 		"@atlaskit/flag": "^17.7.0",
-		"@atlaskit/icon": "^29.2.0",
+		"@atlaskit/icon": "^29.3.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/platform-feature-flags-react": "^0.4.0",
 		"@atlaskit/primitives": "^16.4.0",
-		"@atlaskit/tmp-editor-statsig": "^15.12.0",
+		"@atlaskit/tmp-editor-statsig": "^15.16.0",
 		"@atlaskit/tokens": "^8.6.0",
 		"@babel/runtime": "^7.0.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^110.45.0",
+		"@atlaskit/editor-common": "^110.46.0",
 		"react": "^18.2.0",
 		"react-intl-next": "npm:react-intl@^5.18.1"
 	},