@bigbinary/neeto-editor 1.47.114 → 1.47.116

package/dist/{chunk-C9Hjlrrk.js → chunk-C2YYL9vY.js}

@@ -6,10 +6,10 @@ import { isEmpty, prop, fromPairs, assoc, not, last } from 'ramda';
 import { A as ALL_PROTOCOL_URL_REGEXP, E as EDITOR_OPTIONS, b as URL_VALIDATORS } from './chunk-DDwycKmK.js';
 import i18n, { t as t$1 } from 'i18next';
 import * as yup from 'yup';
-import { Megaphone, Info, AlertTriangle, AlertOctagon, CheckCircle2, AtSign, Flag, Smile, Baseline, Check, X, RotateCw, Heading1, Heading2, Heading3, Pilcrow, Undo, Redo, Paperclip, ImageUp, Video, List, ListOrdered, Quote, Code, SquareCode, Bold, Italic, Underline, Link, Strikethrough, Highlighter, ChevronDown, Table, Ellipsis, FileText, Heading4, Heading5, ListChecks } from 'lucide-react';
+import { Megaphone, Info, AlertTriangle, AlertOctagon, CheckCircle2, AtSign, Flag, Smile, Check, X, RotateCw, Baseline, Heading1, Heading2, Heading3, Pilcrow, Undo, Redo, Paperclip, ImageUp, Video, List, ListOrdered, Quote, Code, SquareCode, Bold, Italic, Underline, Link, Strikethrough, Highlighter, ChevronDown, Table, Ellipsis, FileText, Heading4, Heading5, ListChecks } from 'lucide-react';
 import { e as emojiPickerApi, u as useEditorStore, g as generateFocusProps, B as BubbleMenu } from './chunk-BLXUWWgi.js';
 import classnames from 'classnames';
-import { isNotEmpty, hyphenate, findBy, isNotPresent, noop, filterBy } from '@bigbinary/neeto-cist';
+import { isNotEmpty, findBy, isNotPresent, noop, hyphenate, filterBy } from '@bigbinary/neeto-cist';
 import { roundArrow } from 'tippy.js';
 import 'tippy.js/dist/svg-arrow.css';
 import { DropdownMenu, Avatar, Button as Button$1, Input, Label, Typography, Tooltip, Dialog, Tabs, Toastr, Checkbox } from '@bigbinary/neeto-atoms';
@@ -28,7 +28,7 @@ import { withEventTargetValue, hyphenize } from '@bigbinary/neeto-commons-fronte
 import { HexColorPicker } from 'react-colorful';
 import { N as Node, F as Fragment, S as Slice, a as Selection } from './chunk-CBN5naeP.js';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import ImageUploader from '@bigbinary/neeto-image-uploader-frontend/ImageUploader';
+import ImageUploader from '@bigbinary/neeto-image-uploader-frontend/v2/ImageUploader';
 import { u as useDropFiles, d as directUploadsApi } from './chunk-BFKmIsWV.js';
 import { F as File, u as useFileUploader, b as ALLOWED_IMAGE_TYPES, d as ALLOWED_VIDEO_TYPES, c as convertToFileSize, e as DEFAULT_IMAGE_UPLOAD_CONFIG, f as DEFAULT_VIDEO_UPLOAD_CONFIG, V as VIDEO_EMBED_FORM_VALIDATION_SCHEMA, g as getTabs } from './chunk-KiXJWA8i.js';
 import { withT, useOnClickOutside } from '@bigbinary/neeto-commons-frontend/v2/react-utils';
@@ -138,22 +138,26 @@ var CALLOUT_TYPES = [{
   type: "info",
   label: t$1("neetoEditor.menu.calloutInfo"),
   icon: Info,
-  bgColor: "--neeto-editor-info-100"
+  bgColor: "--neeto-editor-info-100",
+  iconColor: "var(--ne-editor-content-callout-info-foreground-color)"
 }, {
   type: "warning",
   label: t$1("neetoEditor.menu.calloutWarning"),
   icon: AlertTriangle,
-  bgColor: "--neeto-editor-warning-100"
+  bgColor: "--neeto-editor-warning-100",
+  iconColor: "var(--ne-editor-content-callout-warning-foreground-color)"
 }, {
   type: "error",
   label: t$1("neetoEditor.menu.calloutError"),
   icon: AlertOctagon,
-  bgColor: "--neeto-editor-error-100"
+  bgColor: "--neeto-editor-error-100",
+  iconColor: "var(--ne-editor-content-callout-error-foreground-color)"
 }, {
   type: "success",
   label: t$1("neetoEditor.menu.calloutSuccess"),
   icon: CheckCircle2,
-  bgColor: "--neeto-editor-success-100"
+  bgColor: "--neeto-editor-success-100",
+  iconColor: "var(--ne-editor-content-callout-success-foreground-color)"
 }];
 
 function ownKeys$b(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
@@ -251,19 +255,6 @@ var validateUrl = function validateUrl(url) {
   return false;
 };
 
-var MenuItem$4 = DropdownMenu.MenuItem;
-var SecondaryMenuTarget = function SecondaryMenuTarget(_ref) {
-  var Icon = _ref.icon,
-    label = _ref.label;
-  return /*#__PURE__*/jsx(MenuItem$4, {
-    "data-testid": "neeto-editor-fixed-menu-".concat(hyphenate(label), "-option"),
-    prefix: /*#__PURE__*/jsx(Icon, {
-      size: 16
-    }),
-    children: label
-  });
-};
-
 var Menu$4 = DropdownMenu.Menu,
   MenuItem$3 = DropdownMenu.MenuItem;
 var Mentions = function Mentions(_ref) {
@@ -274,13 +265,48 @@ var Mentions = function Mentions(_ref) {
     isSecondaryMenu = _ref$isSecondaryMenu === void 0 ? false : _ref$isSecondaryMenu,
     label = _ref.label;
   if (isEmpty(mentions)) return null;
+  var renderItems = mentions.map(function (_ref2) {
+    var key = _ref2.key,
+      name = _ref2.name,
+      imageUrl = _ref2.imageUrl;
+    return /*#__PURE__*/jsx(MenuItem$3, {
+      "data-testid": "neeto-editor-mention-option-".concat(key),
+      prefix: /*#__PURE__*/jsx(Avatar, {
+        size: "sm",
+        user: {
+          name: name,
+          imageUrl: imageUrl
+        }
+      }),
+      onClick: function onClick() {
+        return editor.commands.setMention({
+          id: key,
+          label: name
+        });
+      },
+      children: name
+    }, key);
+  });
+  if (isSecondaryMenu) {
+    return /*#__PURE__*/jsx(DropdownMenu.SubMenu, {
+      label: label,
+      contentProps: {
+        className: "ne-editor-dropdown min-w-56"
+      },
+      icon: AtSign,
+      triggerProps: {
+        "data-testid": "neeto-editor-mention-option"
+      },
+      children: renderItems
+    });
+  }
   return /*#__PURE__*/jsx(DropdownMenu, {
     "data-testid": "neeto-editor-mention-option",
     dropdownProps: {
       className: "ne-editor-dropdown min-w-56"
     },
     icon: AtSign,
-    position: isSecondaryMenu ? "left-start" : "bottom-start",
+    position: "bottom-start",
     buttonProps: {
       variant: "ghost",
       size: "sm",
@@ -290,33 +316,8 @@ var Mentions = function Mentions(_ref) {
       },
       className: "ne-toolbar-item ne-toolbar-dropdown"
     },
-    customTarget: isSecondaryMenu && /*#__PURE__*/jsx(SecondaryMenuTarget, {
-      label: label,
-      icon: AtSign
-    }),
     children: /*#__PURE__*/jsx(Menu$4, {
-      children: mentions.map(function (_ref2) {
-        var key = _ref2.key,
-          name = _ref2.name,
-          imageUrl = _ref2.imageUrl;
-        return /*#__PURE__*/jsx(MenuItem$3, {
-          "data-testid": "neeto-editor-mention-option-".concat(key),
-          prefix: /*#__PURE__*/jsx(Avatar, {
-            size: "sm",
-            user: {
-              name: name,
-              imageUrl: imageUrl
-            }
-          }),
-          onClick: function onClick() {
-            return editor.commands.setMention({
-              id: key,
-              label: name
-            });
-          },
-          children: name
-        }, key);
-      })
+      children: renderItems
     })
   });
 };
@@ -359,17 +360,10 @@ var MenuButton = function MenuButton(_ref) {
 var MenuButton$1 = /*#__PURE__*/memo(MenuButton);
 
 var CalloutIcon = function CalloutIcon(_ref) {
+  var _currentType$icon;
   var currentType = _ref.currentType;
-  if (currentType !== null && currentType !== void 0 && currentType.icon) {
-    var Icon = currentType.icon;
-    return /*#__PURE__*/jsx("span", {
-      className: "neeto-editor-callout-dropdown__current-emoji",
-      children: /*#__PURE__*/jsx(Icon, {
-        size: 22
-      })
-    });
-  }
-  return /*#__PURE__*/jsx(Flag, {
+  var Icon = (_currentType$icon = currentType === null || currentType === void 0 ? void 0 : currentType.icon) !== null && _currentType$icon !== void 0 ? _currentType$icon : Flag;
+  return /*#__PURE__*/jsx(Icon, {
     size: 16
   });
 };
@@ -385,7 +379,10 @@ var CalloutTypeOption = function CalloutTypeOption(_ref) {
     "data-testid": "callout-type-option",
     isActive: isSelected,
     prefix: /*#__PURE__*/jsx(Icon, {
-      size: 16
+      size: 16,
+      style: {
+        stroke: calloutType.iconColor
+      }
     }),
     children: calloutType.label
   });
@@ -410,7 +407,9 @@ var RenderCalloutOptions = function RenderCalloutOptions(_ref) {
 var CalloutDropdown = function CalloutDropdown(_ref) {
   var editor = _ref.editor,
     label = _ref.label,
-    tooltipContent = _ref.tooltipContent;
+    tooltipContent = _ref.tooltipContent,
+    _ref$isSecondaryMenu = _ref.isSecondaryMenu,
+    isSecondaryMenu = _ref$isSecondaryMenu === void 0 ? false : _ref$isSecondaryMenu;
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
   var dropdownRef = useRef(null);
@@ -436,6 +435,28 @@ var CalloutDropdown = function CalloutDropdown(_ref) {
       }).run();
     }
   };
+  var renderOptions = /*#__PURE__*/jsxs(Fragment$1, {
+    children: [/*#__PURE__*/jsx(DropdownMenu.Label, {
+      children: t("neetoEditor.menu.selectCalloutType")
+    }), /*#__PURE__*/jsx(RenderCalloutOptions, {
+      currentCalloutAttrs: currentCalloutAttrs,
+      handleCalloutTypeClick: handleCalloutTypeClick,
+      isInCallout: isInCallout
+    })]
+  });
+  if (isSecondaryMenu) {
+    return /*#__PURE__*/jsx(DropdownMenu.SubMenu, {
+      label: label,
+      contentProps: {
+        className: "ne-editor-dropdown w-[200px] p-2"
+      },
+      icon: isInCallout ? currentType.icon : Flag,
+      triggerProps: {
+        "data-testid": "neeto-editor-fixed-menu-callout-option"
+      },
+      children: renderOptions
+    });
+  }
   return /*#__PURE__*/jsx(DropdownMenu, {
     dropdownProps: {
       className: "ne-editor-dropdown w-[200px] p-2"
@@ -458,14 +479,8 @@ var CalloutDropdown = function CalloutDropdown(_ref) {
       variant: isInCallout ? "secondary" : "ghost",
       className: "ne-toolbar-item ne-toolbar-dropdown"
     },
-    children: /*#__PURE__*/jsxs(DropdownMenu.Menu, {
-      children: [/*#__PURE__*/jsx(DropdownMenu.Label, {
-        children: t("neetoEditor.menu.selectCalloutType")
-      }), /*#__PURE__*/jsx(RenderCalloutOptions, {
-        currentCalloutAttrs: currentCalloutAttrs,
-        handleCalloutTypeClick: handleCalloutTypeClick,
-        isInCallout: isInCallout
-      })]
+    children: /*#__PURE__*/jsx(DropdownMenu.Menu, {
+      children: renderOptions
     })
   });
 };
@@ -491,10 +506,26 @@ var EmojiOption = function EmojiOption(_ref) {
       return k + 1;
     });
   };
+  if (isSecondaryMenu) {
+    return /*#__PURE__*/createElement(DropdownMenu.SubMenu, {
+      label: label,
+      icon: Smile,
+      key: resetKey,
+      contentProps: {
+        className: "ne-editor-dropdown neeto-editor-fixed-menu__emoji-dropdown min-w-[350px] p-0"
+      },
+      triggerProps: {
+        "data-testid": "neeto-editor-fixed-menu-emoji-option"
+      }
+    }, /*#__PURE__*/jsx(EmojiPickerMenu, {
+      editor: editor,
+      setActive: handlePicked
+    }));
+  }
   return /*#__PURE__*/jsx(DropdownMenu, {
     closeOnSelect: false,
     icon: Smile,
-    position: isSecondaryMenu ? "left-start" : "bottom-start",
+    position: "bottom-start",
     buttonProps: {
       variant: "ghost",
       tabIndex: -1,
@@ -505,15 +536,8 @@ var EmojiOption = function EmojiOption(_ref) {
       className: "ne-toolbar-item ne-toolbar-dropdown",
       "data-testid": "neeto-editor-fixed-menu-emoji-option"
     },
-    customTarget: isSecondaryMenu && /*#__PURE__*/jsx(SecondaryMenuTarget, {
-      label: label,
-      icon: Smile
-    }),
     dropdownProps: {
-      className: "ne-editor-dropdown neeto-editor-fixed-menu__emoji-dropdown min-w-[350px] p-0",
-      onClick: function onClick(e) {
-        return isSecondaryMenu && e.stopPropagation();
-      }
+      className: "ne-editor-dropdown neeto-editor-fixed-menu__emoji-dropdown min-w-[350px] p-0"
     },
     onClose: function onClose() {
       return setActive(false);
@@ -562,13 +586,72 @@ var TextColorOption = function TextColorOption(_ref) {
   useEffect(function () {
     setColor(editor.getAttributes("textStyle").color);
   }, [resetKey, editor.getAttributes("textStyle").color]);
+  var pickerContent = /*#__PURE__*/jsxs("div", {
+    style: {
+      minWidth: "236px"
+    },
+    onClick: function onClick(e) {
+      e.stopPropagation();
+    },
+    children: [/*#__PURE__*/jsx(HexColorPicker, {
+      color: color || "#000000",
+      onChange: setColor
+    }), /*#__PURE__*/jsxs("div", {
+      className: "neeto-editor-text-color-option__options-group",
+      children: [/*#__PURE__*/jsx(Input, {
+        autoFocus: true,
+        className: "neeto-editor-text-color-option__options-group__input",
+        placeholder: t("neetoEditor.placeholders.pickColor"),
+        size: "small",
+        value: color,
+        onChange: withEventTargetValue(setColor),
+        onClick: function onClick(event) {
+          return event.stopPropagation();
+        }
+      }), /*#__PURE__*/jsx(Button$1, {
+        icon: Check,
+        size: "sm",
+        onClick: handleSave
+      }), /*#__PURE__*/jsx(Button$1, {
+        icon: X,
+        size: "sm",
+        variant: "ghost",
+        onClick: function onClick() {
+          editor.commands.focus();
+          closeMenu();
+        }
+      }), /*#__PURE__*/jsx(Button$1, {
+        icon: RotateCw,
+        size: "sm",
+        variant: "ghost",
+        tooltipProps: {
+          content: t("neetoEditor.common.resetToDefault"),
+          position: "top"
+        },
+        onClick: handleUnset
+      })]
+    })]
+  });
+  if (isSecondaryMenu) {
+    return /*#__PURE__*/createElement(DropdownMenu.SubMenu, {
+      label: label,
+      contentProps: {
+        className: "ne-editor-dropdown w-[260px] p-2"
+      },
+      icon: Baseline,
+      key: resetKey,
+      triggerProps: {
+        "data-testid": "neeto-editor-fixed-menu-text-color-option"
+      }
+    }, pickerContent);
+  }
   return /*#__PURE__*/jsx(DropdownMenu, {
     closeOnSelect: false,
     dropdownProps: {
       className: "ne-editor-dropdown w-[260px] p-2"
     },
     icon: Baseline,
-    position: isSecondaryMenu ? "left-start" : "bottom-start",
+    position: "bottom-start",
     buttonProps: {
       variant: color ? "secondary" : "ghost",
       tabIndex: -1,
@@ -578,56 +661,7 @@ var TextColorOption = function TextColorOption(_ref) {
       },
       className: "ne-toolbar-item ne-toolbar-dropdown neeto-editor-text-color-option"
     },
-    customTarget: isSecondaryMenu && /*#__PURE__*/jsx(SecondaryMenuTarget, {
-      label: label,
-      icon: Baseline
-    }),
-    children: /*#__PURE__*/jsxs("div", {
-      style: {
-        "min-width": "236px"
-      },
-      onClick: function onClick(e) {
-        e.stopPropagation();
-      },
-      children: [/*#__PURE__*/jsx(HexColorPicker, {
-        color: color || "#000000",
-        onChange: setColor
-      }), /*#__PURE__*/jsxs("div", {
-        className: "neeto-editor-text-color-option__options-group",
-        children: [/*#__PURE__*/jsx(Input, {
-          autoFocus: true,
-          className: "neeto-editor-text-color-option__options-group__input",
-          placeholder: t("neetoEditor.placeholders.pickColor"),
-          size: "small",
-          value: color,
-          onChange: withEventTargetValue(setColor),
-          onClick: function onClick(event) {
-            return event.stopPropagation();
-          }
-        }), /*#__PURE__*/jsx(Button$1, {
-          icon: Check,
-          size: "sm",
-          onClick: handleSave
-        }), /*#__PURE__*/jsx(Button$1, {
-          icon: X,
-          size: "sm",
-          variant: "ghost",
-          onClick: function onClick() {
-            editor.commands.focus();
-            closeMenu();
-          }
-        }), /*#__PURE__*/jsx(Button$1, {
-          icon: RotateCw,
-          size: "sm",
-          variant: "ghost",
-          tooltipProps: {
-            content: t("neetoEditor.common.resetToDefault"),
-            position: "top"
-          },
-          onClick: handleUnset
-        })]
-      })]
-    })
+    children: pickerContent
   }, resetKey);
 };
 
@@ -2565,7 +2599,9 @@ var FontSizeOption = function FontSizeOption(_ref) {
     tooltipContent = _ref.tooltipContent,
     label = _ref.label,
     _ref$options = _ref.options,
-    options = _ref$options === void 0 ? [] : _ref$options;
+    options = _ref$options === void 0 ? [] : _ref$options,
+    _ref$isSecondaryMenu = _ref.isSecondaryMenu,
+    isSecondaryMenu = _ref$isSecondaryMenu === void 0 ? false : _ref$isSecondaryMenu;
   var dropdownRef = useRef(null);
   var lastOption = last(FONT_SIZE_OPTIONS);
   var _useEditorStore = useEditorStore(function (store) {
@@ -2590,6 +2626,36 @@ var FontSizeOption = function FontSizeOption(_ref) {
       return options.includes(_key);
     }
   }, FONT_SIZE_OPTIONS)), [FONT_SIZE_OPTIONS[FONT_SIZE_OPTIONS.length - 1]]);
+  var renderItems = menuOptions.map(function (_ref2) {
+    var itemLabel = _ref2.label,
+      Icon = _ref2.icon,
+      value = _ref2.value,
+      key = _ref2.key;
+    return /*#__PURE__*/jsx(MenuItem, {
+      "data-testid": "neeto-editor-fixed-menu-font-size-option-".concat(key),
+      isActive: (activeOption === null || activeOption === void 0 ? void 0 : activeOption.value) === value,
+      prefix: /*#__PURE__*/jsx(Icon, {
+        size: 16
+      }),
+      onClick: function onClick() {
+        return handleClick(value);
+      },
+      children: itemLabel
+    }, value);
+  });
+  if (isSecondaryMenu) {
+    return /*#__PURE__*/jsx(DropdownMenu.SubMenu, {
+      label: label,
+      contentProps: {
+        className: "ne-editor-dropdown"
+      },
+      icon: activeOption === null || activeOption === void 0 ? void 0 : activeOption.icon,
+      triggerProps: {
+        "data-testid": "neeto-editor-fixed-menu-font-size-option"
+      },
+      children: renderItems
+    });
+  }
   return /*#__PURE__*/jsx(DropdownMenu, {
     dropdownProps: {
       className: "ne-editor-dropdown"
@@ -2611,23 +2677,7 @@ var FontSizeOption = function FontSizeOption(_ref) {
       className: "ne-toolbar-item ne-toolbar-dropdown neeto-editor-font-size__wrapper"
     },
     children: /*#__PURE__*/jsx(Menu$2, {
-      children: menuOptions.map(function (_ref2) {
-        var label = _ref2.label,
-          Icon = _ref2.icon,
-          value = _ref2.value,
-          key = _ref2.key;
-        return /*#__PURE__*/jsx(MenuItem, {
-          "data-testid": "neeto-editor-fixed-menu-font-size-option-".concat(key),
-          isActive: (activeOption === null || activeOption === void 0 ? void 0 : activeOption.value) === value,
-          prefix: /*#__PURE__*/jsx(Icon, {
-            size: 16
-          }),
-          onClick: function onClick() {
-            return handleClick(value);
-          },
-          children: label
-        }, value);
-      })
+      children: renderItems
     })
   });
 };
@@ -2672,7 +2722,9 @@ var HighlightDropdown = function HighlightDropdown(_ref) {
   var editor = _ref.editor,
     label = _ref.label,
     tooltipContent = _ref.tooltipContent,
-    runEditorCommand = _ref.runEditorCommand;
+    runEditorCommand = _ref.runEditorCommand,
+    _ref$isSecondaryMenu = _ref.isSecondaryMenu,
+    isSecondaryMenu = _ref$isSecondaryMenu === void 0 ? false : _ref$isSecondaryMenu;
   var dropdownRef = useRef(null);
   var textColor = editor.getAttributes("textStyle").color;
   var backgroundColor = editor.getAttributes("textStyle").backgroundColor;
@@ -2713,6 +2765,37 @@ var HighlightDropdown = function HighlightDropdown(_ref) {
       });
     });
   };
+  var renderSections = colorSections.map(function (_ref2) {
+    var title = _ref2.title,
+      colors = _ref2.colors,
+      isTextColor = _ref2.isTextColor;
+    return /*#__PURE__*/jsxs("div", {
+      className: "neeto-editor-highlight-dropdown__section",
+      children: [/*#__PURE__*/jsx(Typography, {
+        className: "neeto-editor-highlight-dropdown__section-title",
+        variant: "body2",
+        weight: "medium",
+        children: title
+      }), /*#__PURE__*/jsx("div", {
+        className: "neeto-editor-highlight-dropdown__color-grid",
+        "data-testid": "neeto-editor-highlight-".concat(hyphenize(title), "-grid"),
+        children: renderColorDots(colors, isTextColor)
+      })]
+    }, title);
+  });
+  if (isSecondaryMenu) {
+    return /*#__PURE__*/jsx(DropdownMenu.SubMenu, {
+      label: label,
+      icon: Highlighter,
+      contentProps: {
+        className: "ne-editor-dropdown neeto-editor-highlight-dropdown w-[280px] p-3"
+      },
+      triggerProps: {
+        "data-testid": "neeto-editor-fixed-menu-highlight-option"
+      },
+      children: renderSections
+    });
+  }
   return /*#__PURE__*/jsx(DropdownMenu, {
     dropdownProps: {
       className: "ne-editor-dropdown w-[280px] p-3"
@@ -2735,24 +2818,7 @@ var HighlightDropdown = function HighlightDropdown(_ref) {
     },
     children: /*#__PURE__*/jsx(DropdownMenu.Menu, {
       className: "neeto-editor-highlight-dropdown",
-      children: colorSections.map(function (_ref2) {
-        var title = _ref2.title,
-          colors = _ref2.colors,
-          isTextColor = _ref2.isTextColor;
-        return /*#__PURE__*/jsxs("div", {
-          className: "neeto-editor-highlight-dropdown__section",
-          children: [/*#__PURE__*/jsx(Typography, {
-            className: "neeto-editor-highlight-dropdown__section-title",
-            variant: "body2",
-            weight: "medium",
-            children: title
-          }), /*#__PURE__*/jsx("div", {
-            className: "neeto-editor-highlight-dropdown__color-grid",
-            "data-testid": "neeto-editor-highlight-".concat(hyphenize(title), "-grid"),
-            children: renderColorDots(colors, isTextColor)
-          })]
-        }, title);
-      })
+      children: renderSections
     })
   });
 };
@@ -2799,13 +2865,57 @@ var TableOption = function TableOption(_ref) {
       return k + 1;
     });
   };
+  var formContent = /*#__PURE__*/jsxs(Fragment$1, {
+    children: [/*#__PURE__*/jsx(Input, {
+      autoFocus: true,
+      "data-testid": "neeto-editor-fixed-menu-table-rows-input",
+      label: t("neetoEditor.menu.rows"),
+      min: "1",
+      placeholder: t("neetoEditor.placeholders.rows"),
+      size: "small",
+      type: "number",
+      value: rows,
+      onChange: withEventTargetValue(setRows)
+    }), /*#__PURE__*/jsx(Input, {
+      "data-testid": "neeto-editor-fixed-menu-table-columns-input",
+      label: t("neetoEditor.menu.columns"),
+      min: "1",
+      placeholder: t("neetoEditor.placeholders.columns"),
+      size: "small",
+      type: "number",
+      value: columns,
+      onChange: withEventTargetValue(setColumns)
+    }), /*#__PURE__*/jsx("div", {
+      className: "neeto-editor-table-menu__button",
+      children: /*#__PURE__*/jsx(Button$1, {
+        className: "mt-auto",
+        "data-testid": "neeto-editor-fixed-menu-table-option-create-button",
+        label: t("neetoEditor.common.create"),
+        size: "sm",
+        onClick: handleSubmit
+      })
+    })]
+  });
+  if (isSecondaryMenu) {
+    return /*#__PURE__*/createElement(DropdownMenu.SubMenu, {
+      label: label,
+      icon: Table,
+      key: resetKey,
+      contentProps: {
+        className: "ne-editor-dropdown neeto-editor-table__item w-auto p-2 flex flex-col"
+      },
+      triggerProps: {
+        "data-testid": "neeto-editor-fixed-menu-table-option"
+      }
+    }, formContent);
+  }
   return /*#__PURE__*/jsx(DropdownMenu, {
     closeOnSelect: false,
     dropdownProps: {
       className: "ne-editor-dropdown w-auto p-2"
     },
     icon: Table,
-    position: isSecondaryMenu ? "left-start" : "bottom",
+    position: "bottom",
     buttonProps: {
       tabIndex: -1,
       tooltipProps: {
@@ -2816,42 +2926,10 @@ var TableOption = function TableOption(_ref) {
       className: "ne-toolbar-item ne-toolbar-dropdown",
       "data-testid": "neeto-editor-fixed-menu-table-option"
     },
-    customTarget: isSecondaryMenu && /*#__PURE__*/jsx(SecondaryMenuTarget, {
-      label: label,
-      icon: Table
-    }),
     onClose: handleClose,
-    children: /*#__PURE__*/jsxs(Menu$1, {
+    children: /*#__PURE__*/jsx(Menu$1, {
       className: "neeto-editor-table__item",
-      children: [/*#__PURE__*/jsx(Input, {
-        autoFocus: true,
-        "data-testid": "neeto-editor-fixed-menu-table-rows-input",
-        label: t("neetoEditor.menu.rows"),
-        min: "1",
-        placeholder: t("neetoEditor.placeholders.rows"),
-        size: "small",
-        type: "number",
-        value: rows,
-        onChange: withEventTargetValue(setRows)
-      }), /*#__PURE__*/jsx(Input, {
-        "data-testid": "neeto-editor-fixed-menu-table-columns-input",
-        label: t("neetoEditor.menu.columns"),
-        min: "1",
-        placeholder: t("neetoEditor.placeholders.rows"),
-        size: "small",
-        type: "number",
-        value: columns,
-        onChange: withEventTargetValue(setColumns)
-      }), /*#__PURE__*/jsx("div", {
-        className: "neeto-editor-table-menu__button",
-        children: /*#__PURE__*/jsx(Button$1, {
-          className: "mt-auto",
-          "data-testid": "neeto-editor-fixed-menu-table-option-create-button",
-          label: t("neetoEditor.common.create"),
-          size: "sm",
-          onClick: handleSubmit
-        })
-      })]
+      children: formContent
     })
   }, resetKey);
 };
@@ -3345,4 +3423,4 @@ var Menu = function Menu(props) {
 };
 
 export { CALLOUT_TYPES as C, DEFAULT_EDITOR_OPTIONS as D, EmojiPickerMenu as E, LINK_VALIDATION_SCHEMA as L, Menu as M, isEmojiSuggestionsMenuActive as a, buildLevelsFromOptions as b, validateAndFormatUrl as c, getEditorStyles as d, MenuDynamicVariables as e, MediaUploader as f, getLinkPopoverPosition as g, LinkAddPopOver as h, isEditorOverlaysActive as i, transformPastedHTML as j, clipboardTextParser as k, setInitialPosition as s, transformEditorContent as t, validateUrl as v };
-//# sourceMappingURL=chunk-C9Hjlrrk.js.map
+//# sourceMappingURL=chunk-C2YYL9vY.js.map