@atlaskit/editor-plugin-block-menu 0.0.12 → 0.0.14

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

@@ -12,8 +12,8 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
 var NoOp = function NoOp(props) {
   return null;
 };
-var isMenuSection = function isMenuSection(component) {
-  return component.type === 'block-menu-section';
+var isNonNestedMenuSection = function isNonNestedMenuSection(component) {
+  return component.type === 'block-menu-section' && !('parent' in component);
 };
 var isMenuItem = function isMenuItem(component) {
   return component.type === 'block-menu-item';
@@ -21,31 +21,68 @@ var isMenuItem = function isMenuItem(component) {
 var isNestedMenu = function isNestedMenu(component) {
   return component.type === 'block-menu-nested';
 };
+var isNestedMenuSection = function isNestedMenuSection(component) {
+  return 'parent' in component && component.parent !== undefined && component.parent.type === 'block-menu-nested';
+};
 var getSortedChildren = function getSortedChildren(components, parentKey) {
   return components.filter(function (component) {
-    return component.parent.key === parentKey;
+    return 'parent' in component && component.parent !== undefined && component.parent.key === parentKey;
   }).sort(function (a, b) {
     return (a.parent.rank || 0) - (b.parent.rank || 0);
   });
 };
-var getSortedSections = function getSortedSections(components) {
-  return components.filter(isMenuSection).sort(function (a, b) {
+var getSortedNestedSections = function getSortedNestedSections(components, parentKey) {
+  var nestedMenuSections = components.filter(isNestedMenuSection);
+  var nestedMenuSectionsWithParent = nestedMenuSections.filter(function (section) {
+    return section.parent !== undefined;
+  });
+  return getSortedChildren(nestedMenuSectionsWithParent, parentKey);
+};
+var getSortedNonNestedSections = function getSortedNonNestedSections(components) {
+  return components.filter(isNonNestedMenuSection).sort(function (a, b) {
     return (a.rank || 0) - (b.rank || 0);
   });
 };
 var BlockMenuRenderer = exports.BlockMenuRenderer = function BlockMenuRenderer(_ref) {
   var components = _ref.components,
     fallbacks = _ref.fallbacks;
-  var menuSections = getSortedSections(components);
+  var menuSections = getSortedNonNestedSections(components);
   var menuItems = components.filter(isMenuItem);
   var nestedMenus = components.filter(isNestedMenu);
   return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, menuSections.map(function (section) {
-    var children = getSortedChildren([].concat((0, _toConsumableArray2.default)(menuItems), (0, _toConsumableArray2.default)(nestedMenus)), section.key).map(function (item) {
-      var ItemComponent = item.component || fallbacks.item || NoOp;
-      return /*#__PURE__*/_react.default.createElement(ItemComponent, {
-        key: item.key
+    // Get all items for the current section, including nested menus, and sort them by rank
+    var currentSectionItemsSorted = getSortedChildren([].concat((0, _toConsumableArray2.default)(menuItems), (0, _toConsumableArray2.default)(nestedMenus)), section.key);
+
+    // iterate over the current section items, if it is nested menu, get their children, sort them
+    // if they are menu items, just render as they are sorted above
+    var getChildrenWithNestedItems = function getChildrenWithNestedItems(items) {
+      return items.map(function (item) {
+        if (isNestedMenu(item)) {
+          var sortedNestedSections = getSortedNestedSections(components, item.key);
+          return sortedNestedSections.map(function (section) {
+            var sortedNestedMenuItems = getSortedChildren(menuItems, section.key);
+            var NestedMenuComponent = item.component || fallbacks.nestedMenu || NoOp;
+            var NestedSection = section.component || fallbacks.section || NoOp;
+            return /*#__PURE__*/_react.default.createElement(NestedMenuComponent, {
+              key: item.key
+            }, /*#__PURE__*/_react.default.createElement(NestedSection, {
+              key: section.key
+            }, sortedNestedMenuItems.map(function (nestedItem) {
+              var NestedMenuItemComponent = nestedItem.component || fallbacks.item || NoOp;
+              return /*#__PURE__*/_react.default.createElement(NestedMenuItemComponent, {
+                key: nestedItem.key
+              });
+            })));
+          });
+        } else {
+          var ItemComponent = item.component || fallbacks.item || NoOp;
+          return /*#__PURE__*/_react.default.createElement(ItemComponent, {
+            key: item.key
+          });
+        }
       });
-    });
+    };
+    var children = getChildrenWithNestedItems(currentSectionItemsSorted);
     var SectionComponent = section.component || fallbacks.section || NoOp;
     return /*#__PURE__*/_react.default.createElement(SectionComponent, {
       key: section.key

package/dist/es2019/blockMenuPlugin.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { createBlockMenuRegistry } from './editor-actions';
+import { formatNode } from './editor-commands/formatNode';
 import { createPlugin } from './pm-plugins/main';
 import BlockMenu from './ui/block-menu';
 import { getBlockMenuComponents } from './ui/block-menu-components';
@@ -28,6 +29,11 @@ export const blockMenuPlugin = ({
         return registry.components;
       }
     },
+    commands: {
+      formatNode: (currentNode, targetType) => {
+        return formatNode(currentNode, targetType);
+      }
+    },
     contentComponent({
       editorView,
       popupsMountPoint,

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

@@ -0,0 +1,20 @@
+import { transformNodeToTargetType } from './transforms/transformNodeToTargetType';
+/**
+ * Formats the current node or selection to the specified target type
+ * @param currentNode - The current node
+ * @param targetType - The target node type to convert to
+ */
+export const formatNode = (currentNode, targetType) => {
+  return ({
+    tr
+  }) => {
+    const {
+      selection
+    } = tr;
+    try {
+      return transformNodeToTargetType(tr, currentNode, selection.from, targetType);
+    } catch (e) {
+      return null;
+    }
+  };
+};

package/dist/es2019/editor-commands/transforms/block-transforms.js

@@ -0,0 +1,38 @@
+import { transformToContainer } from './container-transforms';
+import { transformToList } from './list-transforms';
+import { isListNodeType, isContainerNodeType, isBlockNodeType } from './utils';
+
+/**
+ * Transform block nodes (paragraph, heading, codeblock)
+ */
+export const transformBlockNode = context => {
+  const {
+    tr,
+    targetNodeType,
+    targetAttrs
+  } = context;
+  const {
+    selection
+  } = tr;
+  const {
+    $from,
+    $to
+  } = selection;
+
+  // Handle transformation to list types
+  if (isListNodeType(targetNodeType)) {
+    return transformToList();
+  }
+
+  // Handle transformation to container types (panel, expand, blockquote)
+  if (isContainerNodeType(targetNodeType)) {
+    return transformToContainer();
+  }
+
+  // Handle block type transformation (paragraph, heading, codeblock)
+  if (isBlockNodeType(targetNodeType)) {
+    tr.setBlockType($from.pos, $to.pos, targetNodeType, targetAttrs);
+    return tr;
+  }
+  return null;
+};

package/dist/es2019/editor-commands/transforms/container-transforms.js

@@ -0,0 +1,55 @@
+import { isBlockNodeType, isListNodeType, isContainerNodeType } from './utils';
+
+/**
+ * Transform selection to container type
+ */
+export const transformToContainer = () => {
+  return null;
+};
+
+/**
+ * Transform container nodes (panel, expand, blockquote)
+ */
+export const transformContainerNode = ({
+  tr,
+  sourcePos,
+  targetNodeType,
+  targetAttrs
+}) => {
+  if (sourcePos === null) {
+    return null;
+  }
+
+  // Transform container to block type - unwrap and convert content
+  if (isBlockNodeType(targetNodeType)) {
+    return unwrapAndConvertToBlockType();
+  }
+
+  // Transform container to list type
+  if (isListNodeType(targetNodeType)) {
+    return unwrapAndConvertToList();
+  }
+
+  // Transform between container types
+  if (isContainerNodeType(targetNodeType)) {
+    tr.setNodeMarkup(sourcePos, targetNodeType, targetAttrs);
+    return tr;
+  }
+  return null;
+};
+
+/**
+ * Unwrap container node and convert content to block type
+ */
+export const unwrapAndConvertToBlockType = () => {
+  // Convert to block type directly
+  return null;
+};
+
+/**
+ * Unwrap container node and convert content to list
+ */
+export const unwrapAndConvertToList = () => {
+  // Convert to list directly
+  return null;
+};

package/dist/es2019/editor-commands/transforms/list-transforms.js

@@ -0,0 +1,49 @@
+import { isBlockNodeType, isContainerNodeType, isListNodeType } from './utils';
+
+/**
+ * Transform selection to list type
+ */
+export const transformToList = () => {
+  return null;
+};
+
+/**
+ * Transform list nodes
+ */
+export const transformListNode = ({
+  targetNodeType
+}) => {
+  // Transform list to block type
+  if (isBlockNodeType(targetNodeType)) {
+    // Lift list items out of the list and convert to target block type
+    return null;
+  }
+
+  // Transform list to container type
+  if (isContainerNodeType(targetNodeType)) {
+    // Lift list items out of the list and convert to container type
+    return null;
+  }
+
+  // Transform between list types
+  if (isListNodeType(targetNodeType)) {
+    // Lift list items out of the list and convert to the other list type
+    return null;
+  }
+  return null;
+};
+
+/**
+ * Lift list content and convert to block type
+ */
+export const liftListToBlockType = () => {
+  // Convert to target block type directly
+  return null;
+};
+
+/**
+ * Transform between different list types
+ */
+export const transformBetweenListTypes = () => {
+  return null;
+};

package/dist/es2019/editor-commands/transforms/transformNodeToTargetType.js

@@ -0,0 +1,48 @@
+import { transformBlockNode } from './block-transforms';
+import { transformContainerNode } from './container-transforms';
+import { transformListNode } from './list-transforms';
+import { getTargetNodeInfo, isBlockNode, isListNode, isContainerNode } from './utils';
+export function transformNodeToTargetType(tr, sourceNode, sourcePos, targetType) {
+  const {
+    nodes
+  } = tr.doc.type.schema;
+  const targetNodeInfo = getTargetNodeInfo(targetType, nodes);
+  if (!targetNodeInfo) {
+    return null;
+  }
+  const {
+    nodeType: targetNodeType,
+    attrs: targetAttrs
+  } = targetNodeInfo;
+
+  // Early return if trying to transform to the same type
+  if (sourceNode.type === targetNodeType) {
+    return tr; // No transformation needed
+  }
+
+  // Prepare transformation context
+  const transformationContext = {
+    tr,
+    sourceNode,
+    sourcePos,
+    targetNodeType,
+    targetAttrs
+  };
+
+  // Route to appropriate transformation strategy based on source node type
+  try {
+    if (isBlockNode(sourceNode)) {
+      return transformBlockNode(transformationContext);
+    }
+    if (isListNode(sourceNode)) {
+      return transformListNode(transformationContext);
+    }
+    if (isContainerNode(sourceNode)) {
+      return transformContainerNode(transformationContext);
+    }
+    return null;
+  } catch (e) {
+    // Node transformation failed
+    return null;
+  }
+}

package/dist/es2019/editor-commands/transforms/types.js

@@ -0,0 +1 @@
+export {};

package/dist/es2019/editor-commands/transforms/utils.js

@@ -0,0 +1,103 @@
+export const getTargetNodeInfo = (targetType, nodes) => {
+  switch (targetType) {
+    case 'heading1':
+      return {
+        nodeType: nodes.heading,
+        attrs: {
+          level: 1
+        }
+      };
+    case 'heading2':
+      return {
+        nodeType: nodes.heading,
+        attrs: {
+          level: 2
+        }
+      };
+    case 'heading3':
+      return {
+        nodeType: nodes.heading,
+        attrs: {
+          level: 3
+        }
+      };
+    case 'heading4':
+      return {
+        nodeType: nodes.heading,
+        attrs: {
+          level: 4
+        }
+      };
+    case 'heading5':
+      return {
+        nodeType: nodes.heading,
+        attrs: {
+          level: 5
+        }
+      };
+    case 'heading6':
+      return {
+        nodeType: nodes.heading,
+        attrs: {
+          level: 6
+        }
+      };
+    case 'paragraph':
+      return {
+        nodeType: nodes.paragraph
+      };
+    case 'blockquote':
+      return {
+        nodeType: nodes.blockquote
+      };
+    case 'expand':
+      return {
+        nodeType: nodes.expand
+      };
+    case 'panel':
+      return {
+        nodeType: nodes.panel,
+        attrs: {
+          panelType: 'info'
+        }
+      };
+    case 'codeblock':
+      return {
+        nodeType: nodes.codeBlock
+      };
+    case 'bulletList':
+      return {
+        nodeType: nodes.bulletList
+      };
+    case 'orderedList':
+      return {
+        nodeType: nodes.orderedList
+      };
+    case 'taskList':
+      return {
+        nodeType: nodes.taskList
+      };
+    default:
+      return null;
+  }
+};
+
+// Helper functions to categorize node types
+export const isBlockNode = node => {
+  return ['paragraph', 'heading', 'codeBlock'].includes(node.type.name);
+};
+export const isListNode = node => {
+  return ['bulletList', 'orderedList', 'taskList', 'listItem'].includes(node.type.name);
+};
+export const isContainerNode = node => {
+  return ['panel', 'expand', 'blockquote'].includes(node.type.name);
+};
+export const isBlockNodeType = nodeType => {
+  return ['paragraph', 'heading', 'codeBlock'].includes(nodeType.name);
+};
+export const isListNodeType = nodeType => {
+  return ['bulletList', 'orderedList', 'taskList'].includes(nodeType.name);
+};
+export const isContainerNodeType = nodeType => {
+  return ['panel', 'expand', 'blockquote'].includes(nodeType.name);
+};

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

@@ -1,9 +1,8 @@
 import React from 'react';
-import { ToolbarDropdownItem, ToolbarDropdownItemSection, ToolbarNestedDropdownMenu } from '@atlaskit/editor-toolbar';
+import { ToolbarDropdownItemSection, ToolbarNestedDropdownMenu } from '@atlaskit/editor-toolbar';
 import ChangesIcon from '@atlaskit/icon/core/changes';
 import ChevronRightIcon from '@atlaskit/icon/core/chevron-right';
-import ListBulletedIcon from '@atlaskit/icon/core/list-bulleted';
-import TaskIcon from '@atlaskit/icon/core/task';
+import { fg } from '@atlaskit/platform-feature-flags';
 import CopyBlockMenuItem from './copy-block';
 import { CopyLinkDropdownItem } from './copy-link';
 import { DeleteDropdownItem } from './delete-button';
@@ -34,13 +33,54 @@ const getMoveUpMoveDownMenuComponents = api => {
     })
   }];
 };
+const getFormatMenuComponents = () => {
+  return [{
+    type: 'block-menu-nested',
+    key: 'nested-menu-format',
+    parent: {
+      type: 'block-menu-section',
+      key: 'block-menu-section-primary',
+      rank: 100
+    },
+    component: ({
+      children
+    } = {
+      children: null
+    }) => {
+      return /*#__PURE__*/React.createElement(ToolbarNestedDropdownMenu, {
+        text: "Format",
+        elemBefore: /*#__PURE__*/React.createElement(ChangesIcon, {
+          label: ""
+        }),
+        elemAfter: /*#__PURE__*/React.createElement(ChevronRightIcon, {
+          label: 'example nested menu'
+        })
+      }, children);
+    }
+  }, {
+    type: 'block-menu-section',
+    key: 'nested-menu-format-section-primary',
+    parent: {
+      type: 'block-menu-nested',
+      key: 'nested-menu-format',
+      rank: 100
+    },
+    component: ({
+      children
+    } = {
+      children: null
+    }) => {
+      return /*#__PURE__*/React.createElement(ToolbarDropdownItemSection, null, children);
+    }
+  }];
+};
 export const getBlockMenuComponents = ({
   api,
   config
 }) => {
-  return [{
+  return [...(fg('platform_editor_block_menu_format') ? getFormatMenuComponents() : []), {
     type: 'block-menu-section',
-    key: 'block-menu-section-format',
+    key: 'block-menu-section-primary',
     rank: 100,
     component: ({
       children
@@ -105,33 +145,6 @@ export const getBlockMenuComponents = ({
         hasSeparator: true
       }, children);
     }
-  }, {
-    type: 'block-menu-nested',
-    key: 'nested-menu',
-    parent: {
-      type: 'block-menu-section',
-      key: 'block-menu-section-format',
-      rank: 100
-    },
-    component: () => {
-      return /*#__PURE__*/React.createElement(ToolbarNestedDropdownMenu, {
-        text: "Format",
-        elemBefore: /*#__PURE__*/React.createElement(ChangesIcon, {
-          label: ""
-        }),
-        elemAfter: /*#__PURE__*/React.createElement(ChevronRightIcon, {
-          label: 'example nested menu'
-        })
-      }, /*#__PURE__*/React.createElement(ToolbarDropdownItemSection, null, /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
-        elemBefore: /*#__PURE__*/React.createElement(TaskIcon, {
-          label: ""
-        })
-      }, "Action item"), /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
-        elemBefore: /*#__PURE__*/React.createElement(ListBulletedIcon, {
-          label: ""
-        })
-      }, "Bullet list")));
-    }
   }, ...getMoveUpMoveDownMenuComponents(api), {
     type: 'block-menu-item',
     key: 'block-menu-item-delete',

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

@@ -1,7 +1,7 @@
 import React, { Fragment } from 'react';
 const NoOp = props => null;
-const isMenuSection = component => {
-  return component.type === 'block-menu-section';
+const isNonNestedMenuSection = component => {
+  return component.type === 'block-menu-section' && !('parent' in component);
 };
 const isMenuItem = component => {
   return component.type === 'block-menu-item';
@@ -9,24 +9,59 @@ const isMenuItem = component => {
 const isNestedMenu = component => {
   return component.type === 'block-menu-nested';
 };
-const getSortedChildren = (components, parentKey) => components.filter(component => component.parent.key === parentKey).sort((a, b) => (a.parent.rank || 0) - (b.parent.rank || 0));
-const getSortedSections = components => {
-  return components.filter(isMenuSection).sort((a, b) => (a.rank || 0) - (b.rank || 0));
+const isNestedMenuSection = component => {
+  return 'parent' in component && component.parent !== undefined && component.parent.type === 'block-menu-nested';
+};
+const getSortedChildren = (components, parentKey) => components.filter(component => 'parent' in component && component.parent !== undefined && component.parent.key === parentKey).sort((a, b) => (a.parent.rank || 0) - (b.parent.rank || 0));
+const getSortedNestedSections = (components, parentKey) => {
+  const nestedMenuSections = components.filter(isNestedMenuSection);
+  const nestedMenuSectionsWithParent = nestedMenuSections.filter(section => section.parent !== undefined);
+  return getSortedChildren(nestedMenuSectionsWithParent, parentKey);
+};
+const getSortedNonNestedSections = components => {
+  return components.filter(isNonNestedMenuSection).sort((a, b) => (a.rank || 0) - (b.rank || 0));
 };
 export const BlockMenuRenderer = ({
   components,
   fallbacks
 }) => {
-  const menuSections = getSortedSections(components);
+  const menuSections = getSortedNonNestedSections(components);
   const menuItems = components.filter(isMenuItem);
   const nestedMenus = components.filter(isNestedMenu);
   return /*#__PURE__*/React.createElement(Fragment, null, menuSections.map(section => {
-    const children = getSortedChildren([...menuItems, ...nestedMenus], section.key).map(item => {
-      const ItemComponent = item.component || fallbacks.item || NoOp;
-      return /*#__PURE__*/React.createElement(ItemComponent, {
-        key: item.key
+    // Get all items for the current section, including nested menus, and sort them by rank
+    const currentSectionItemsSorted = getSortedChildren([...menuItems, ...nestedMenus], section.key);
+
+    // iterate over the current section items, if it is nested menu, get their children, sort them
+    // if they are menu items, just render as they are sorted above
+    const getChildrenWithNestedItems = items => {
+      return items.map(item => {
+        if (isNestedMenu(item)) {
+          const sortedNestedSections = getSortedNestedSections(components, item.key);
+          return sortedNestedSections.map(section => {
+            const sortedNestedMenuItems = getSortedChildren(menuItems, section.key);
+            const NestedMenuComponent = item.component || fallbacks.nestedMenu || NoOp;
+            const NestedSection = section.component || fallbacks.section || NoOp;
+            return /*#__PURE__*/React.createElement(NestedMenuComponent, {
+              key: item.key
+            }, /*#__PURE__*/React.createElement(NestedSection, {
+              key: section.key
+            }, sortedNestedMenuItems.map(nestedItem => {
+              const NestedMenuItemComponent = nestedItem.component || fallbacks.item || NoOp;
+              return /*#__PURE__*/React.createElement(NestedMenuItemComponent, {
+                key: nestedItem.key
+              });
+            })));
+          });
+        } else {
+          const ItemComponent = item.component || fallbacks.item || NoOp;
+          return /*#__PURE__*/React.createElement(ItemComponent, {
+            key: item.key
+          });
+        }
       });
-    });
+    };
+    const children = getChildrenWithNestedItems(currentSectionItemsSorted);
     const SectionComponent = section.component || fallbacks.section || NoOp;
     return /*#__PURE__*/React.createElement(SectionComponent, {
       key: section.key

package/dist/esm/blockMenuPlugin.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { createBlockMenuRegistry } from './editor-actions';
+import { formatNode as _formatNode } from './editor-commands/formatNode';
 import { createPlugin } from './pm-plugins/main';
 import BlockMenu from './ui/block-menu';
 import { getBlockMenuComponents } from './ui/block-menu-components';
@@ -27,6 +28,11 @@ export var blockMenuPlugin = function blockMenuPlugin(_ref) {
         return registry.components;
       }
     },
+    commands: {
+      formatNode: function formatNode(currentNode, targetType) {
+        return _formatNode(currentNode, targetType);
+      }
+    },
     contentComponent: function contentComponent(_ref2) {
       var editorView = _ref2.editorView,
         popupsMountPoint = _ref2.popupsMountPoint,

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

@@ -0,0 +1,17 @@
+import { transformNodeToTargetType } from './transforms/transformNodeToTargetType';
+/**
+ * Formats the current node or selection to the specified target type
+ * @param currentNode - The current node
+ * @param targetType - The target node type to convert to
+ */
+export var formatNode = function formatNode(currentNode, targetType) {
+  return function (_ref) {
+    var tr = _ref.tr;
+    var selection = tr.selection;
+    try {
+      return transformNodeToTargetType(tr, currentNode, selection.from, targetType);
+    } catch (e) {
+      return null;
+    }
+  };
+};

package/dist/esm/editor-commands/transforms/block-transforms.js

@@ -0,0 +1,32 @@
+import { transformToContainer } from './container-transforms';
+import { transformToList } from './list-transforms';
+import { isListNodeType, isContainerNodeType, isBlockNodeType } from './utils';
+
+/**
+ * Transform block nodes (paragraph, heading, codeblock)
+ */
+export var transformBlockNode = function transformBlockNode(context) {
+  var tr = context.tr,
+    targetNodeType = context.targetNodeType,
+    targetAttrs = context.targetAttrs;
+  var selection = tr.selection;
+  var $from = selection.$from,
+    $to = selection.$to;
+
+  // Handle transformation to list types
+  if (isListNodeType(targetNodeType)) {
+    return transformToList();
+  }
+
+  // Handle transformation to container types (panel, expand, blockquote)
+  if (isContainerNodeType(targetNodeType)) {
+    return transformToContainer();
+  }
+
+  // Handle block type transformation (paragraph, heading, codeblock)
+  if (isBlockNodeType(targetNodeType)) {
+    tr.setBlockType($from.pos, $to.pos, targetNodeType, targetAttrs);
+    return tr;
+  }
+  return null;
+};