@bigbinary/neeto-editor 1.47.113 → 1.47.115

package/dist/cjs/{chunk-B_ZuTQG9.cjs.js → chunk-BKrsK0Ld.cjs.js}

@@ -179,22 +179,26 @@ var CALLOUT_TYPES = [{
   type: "info",
   label: i18n.t("neetoEditor.menu.calloutInfo"),
   icon: lucideReact.Info,
-  bgColor: "--neeto-editor-info-100"
+  bgColor: "--neeto-editor-info-100",
+  iconColor: "var(--ne-editor-content-callout-info-foreground-color)"
 }, {
   type: "warning",
   label: i18n.t("neetoEditor.menu.calloutWarning"),
   icon: lucideReact.AlertTriangle,
-  bgColor: "--neeto-editor-warning-100"
+  bgColor: "--neeto-editor-warning-100",
+  iconColor: "var(--ne-editor-content-callout-warning-foreground-color)"
 }, {
   type: "error",
   label: i18n.t("neetoEditor.menu.calloutError"),
   icon: lucideReact.AlertOctagon,
-  bgColor: "--neeto-editor-error-100"
+  bgColor: "--neeto-editor-error-100",
+  iconColor: "var(--ne-editor-content-callout-error-foreground-color)"
 }, {
   type: "success",
   label: i18n.t("neetoEditor.menu.calloutSuccess"),
   icon: lucideReact.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; }
@@ -292,19 +296,6 @@ var validateUrl = function validateUrl(url) {
   return false;
 };
 
-var MenuItem$4 = neetoAtoms.DropdownMenu.MenuItem;
-var SecondaryMenuTarget = function SecondaryMenuTarget(_ref) {
-  var Icon = _ref.icon,
-    label = _ref.label;
-  return /*#__PURE__*/jsxRuntime.jsx(MenuItem$4, {
-    "data-testid": "neeto-editor-fixed-menu-".concat(neetoCist.hyphenate(label), "-option"),
-    prefix: /*#__PURE__*/jsxRuntime.jsx(Icon, {
-      size: 16
-    }),
-    children: label
-  });
-};
-
 var Menu$4 = neetoAtoms.DropdownMenu.Menu,
   MenuItem$3 = neetoAtoms.DropdownMenu.MenuItem;
 var Mentions$1 = function Mentions(_ref) {
@@ -315,13 +306,48 @@ var Mentions$1 = function Mentions(_ref) {
     isSecondaryMenu = _ref$isSecondaryMenu === void 0 ? false : _ref$isSecondaryMenu,
     label = _ref.label;
   if (ramda.isEmpty(mentions)) return null;
+  var renderItems = mentions.map(function (_ref2) {
+    var key = _ref2.key,
+      name = _ref2.name,
+      imageUrl = _ref2.imageUrl;
+    return /*#__PURE__*/jsxRuntime.jsx(MenuItem$3, {
+      "data-testid": "neeto-editor-mention-option-".concat(key),
+      prefix: /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.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__*/jsxRuntime.jsx(neetoAtoms.DropdownMenu.SubMenu, {
+      label: label,
+      contentProps: {
+        className: "ne-editor-dropdown min-w-56"
+      },
+      icon: lucideReact.AtSign,
+      triggerProps: {
+        "data-testid": "neeto-editor-mention-option"
+      },
+      children: renderItems
+    });
+  }
   return /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.DropdownMenu, {
     "data-testid": "neeto-editor-mention-option",
     dropdownProps: {
       className: "ne-editor-dropdown min-w-56"
     },
     icon: lucideReact.AtSign,
-    position: isSecondaryMenu ? "left-start" : "bottom-start",
+    position: "bottom-start",
     buttonProps: {
       variant: "ghost",
       size: "sm",
@@ -331,33 +357,8 @@ var Mentions$1 = function Mentions(_ref) {
       },
       className: "ne-toolbar-item ne-toolbar-dropdown"
     },
-    customTarget: isSecondaryMenu && /*#__PURE__*/jsxRuntime.jsx(SecondaryMenuTarget, {
-      label: label,
-      icon: lucideReact.AtSign
-    }),
     children: /*#__PURE__*/jsxRuntime.jsx(Menu$4, {
-      children: mentions.map(function (_ref2) {
-        var key = _ref2.key,
-          name = _ref2.name,
-          imageUrl = _ref2.imageUrl;
-        return /*#__PURE__*/jsxRuntime.jsx(MenuItem$3, {
-          "data-testid": "neeto-editor-mention-option-".concat(key),
-          prefix: /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Avatar, {
-            size: "sm",
-            user: {
-              name: name,
-              imageUrl: imageUrl
-            }
-          }),
-          onClick: function onClick() {
-            return editor.commands.setMention({
-              id: key,
-              label: name
-            });
-          },
-          children: name
-        }, key);
-      })
+      children: renderItems
     })
   });
 };
@@ -400,17 +401,10 @@ var MenuButton$1 = function MenuButton(_ref) {
 var MenuButton = /*#__PURE__*/React.memo(MenuButton$1);
 
 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__*/jsxRuntime.jsx("span", {
-      className: "neeto-editor-callout-dropdown__current-emoji",
-      children: /*#__PURE__*/jsxRuntime.jsx(Icon, {
-        size: 22
-      })
-    });
-  }
-  return /*#__PURE__*/jsxRuntime.jsx(lucideReact.Flag, {
+  var Icon = (_currentType$icon = currentType === null || currentType === void 0 ? void 0 : currentType.icon) !== null && _currentType$icon !== void 0 ? _currentType$icon : lucideReact.Flag;
+  return /*#__PURE__*/jsxRuntime.jsx(Icon, {
     size: 16
   });
 };
@@ -426,7 +420,10 @@ var CalloutTypeOption = function CalloutTypeOption(_ref) {
     "data-testid": "callout-type-option",
     isActive: isSelected,
     prefix: /*#__PURE__*/jsxRuntime.jsx(Icon, {
-      size: 16
+      size: 16,
+      style: {
+        stroke: calloutType.iconColor
+      }
     }),
     children: calloutType.label
   });
@@ -451,7 +448,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 = reactI18next.useTranslation(),
     t = _useTranslation.t;
   var dropdownRef = React.useRef(null);
@@ -477,6 +476,28 @@ var CalloutDropdown = function CalloutDropdown(_ref) {
       }).run();
     }
   };
+  var renderOptions = /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/jsxRuntime.jsx(neetoAtoms.DropdownMenu.Label, {
+      children: t("neetoEditor.menu.selectCalloutType")
+    }), /*#__PURE__*/jsxRuntime.jsx(RenderCalloutOptions, {
+      currentCalloutAttrs: currentCalloutAttrs,
+      handleCalloutTypeClick: handleCalloutTypeClick,
+      isInCallout: isInCallout
+    })]
+  });
+  if (isSecondaryMenu) {
+    return /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.DropdownMenu.SubMenu, {
+      label: label,
+      contentProps: {
+        className: "ne-editor-dropdown w-[200px] p-2"
+      },
+      icon: isInCallout ? currentType.icon : lucideReact.Flag,
+      triggerProps: {
+        "data-testid": "neeto-editor-fixed-menu-callout-option"
+      },
+      children: renderOptions
+    });
+  }
   return /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.DropdownMenu, {
     dropdownProps: {
       className: "ne-editor-dropdown w-[200px] p-2"
@@ -499,14 +520,8 @@ var CalloutDropdown = function CalloutDropdown(_ref) {
       variant: isInCallout ? "secondary" : "ghost",
       className: "ne-toolbar-item ne-toolbar-dropdown"
     },
-    children: /*#__PURE__*/jsxRuntime.jsxs(neetoAtoms.DropdownMenu.Menu, {
-      children: [/*#__PURE__*/jsxRuntime.jsx(neetoAtoms.DropdownMenu.Label, {
-        children: t("neetoEditor.menu.selectCalloutType")
-      }), /*#__PURE__*/jsxRuntime.jsx(RenderCalloutOptions, {
-        currentCalloutAttrs: currentCalloutAttrs,
-        handleCalloutTypeClick: handleCalloutTypeClick,
-        isInCallout: isInCallout
-      })]
+    children: /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.DropdownMenu.Menu, {
+      children: renderOptions
     })
   });
 };
@@ -532,10 +547,26 @@ var EmojiOption$1 = function EmojiOption(_ref) {
       return k + 1;
     });
   };
+  if (isSecondaryMenu) {
+    return /*#__PURE__*/React.createElement(neetoAtoms.DropdownMenu.SubMenu, {
+      label: label,
+      icon: lucideReact.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__*/jsxRuntime.jsx(EmojiPickerMenu, {
+      editor: editor,
+      setActive: handlePicked
+    }));
+  }
   return /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.DropdownMenu, {
     closeOnSelect: false,
     icon: lucideReact.Smile,
-    position: isSecondaryMenu ? "left-start" : "bottom-start",
+    position: "bottom-start",
     buttonProps: {
       variant: "ghost",
       tabIndex: -1,
@@ -546,15 +577,8 @@ var EmojiOption$1 = function EmojiOption(_ref) {
       className: "ne-toolbar-item ne-toolbar-dropdown",
       "data-testid": "neeto-editor-fixed-menu-emoji-option"
     },
-    customTarget: isSecondaryMenu && /*#__PURE__*/jsxRuntime.jsx(SecondaryMenuTarget, {
-      label: label,
-      icon: lucideReact.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);
@@ -603,13 +627,72 @@ var TextColorOption = function TextColorOption(_ref) {
   React.useEffect(function () {
     setColor(editor.getAttributes("textStyle").color);
   }, [resetKey, editor.getAttributes("textStyle").color]);
+  var pickerContent = /*#__PURE__*/jsxRuntime.jsxs("div", {
+    style: {
+      minWidth: "236px"
+    },
+    onClick: function onClick(e) {
+      e.stopPropagation();
+    },
+    children: [/*#__PURE__*/jsxRuntime.jsx(reactColorful.HexColorPicker, {
+      color: color || "#000000",
+      onChange: setColor
+    }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "neeto-editor-text-color-option__options-group",
+      children: [/*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Input, {
+        autoFocus: true,
+        className: "neeto-editor-text-color-option__options-group__input",
+        placeholder: t("neetoEditor.placeholders.pickColor"),
+        size: "small",
+        value: color,
+        onChange: utils.withEventTargetValue(setColor),
+        onClick: function onClick(event) {
+          return event.stopPropagation();
+        }
+      }), /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Button, {
+        icon: lucideReact.Check,
+        size: "sm",
+        onClick: handleSave
+      }), /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Button, {
+        icon: lucideReact.X,
+        size: "sm",
+        variant: "ghost",
+        onClick: function onClick() {
+          editor.commands.focus();
+          closeMenu();
+        }
+      }), /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Button, {
+        icon: lucideReact.RotateCw,
+        size: "sm",
+        variant: "ghost",
+        tooltipProps: {
+          content: t("neetoEditor.common.resetToDefault"),
+          position: "top"
+        },
+        onClick: handleUnset
+      })]
+    })]
+  });
+  if (isSecondaryMenu) {
+    return /*#__PURE__*/React.createElement(neetoAtoms.DropdownMenu.SubMenu, {
+      label: label,
+      contentProps: {
+        className: "ne-editor-dropdown w-[260px] p-2"
+      },
+      icon: lucideReact.Baseline,
+      key: resetKey,
+      triggerProps: {
+        "data-testid": "neeto-editor-fixed-menu-text-color-option"
+      }
+    }, pickerContent);
+  }
   return /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.DropdownMenu, {
     closeOnSelect: false,
     dropdownProps: {
       className: "ne-editor-dropdown w-[260px] p-2"
     },
     icon: lucideReact.Baseline,
-    position: isSecondaryMenu ? "left-start" : "bottom-start",
+    position: "bottom-start",
     buttonProps: {
       variant: color ? "secondary" : "ghost",
       tabIndex: -1,
@@ -619,56 +702,7 @@ var TextColorOption = function TextColorOption(_ref) {
       },
       className: "ne-toolbar-item ne-toolbar-dropdown neeto-editor-text-color-option"
     },
-    customTarget: isSecondaryMenu && /*#__PURE__*/jsxRuntime.jsx(SecondaryMenuTarget, {
-      label: label,
-      icon: lucideReact.Baseline
-    }),
-    children: /*#__PURE__*/jsxRuntime.jsxs("div", {
-      style: {
-        "min-width": "236px"
-      },
-      onClick: function onClick(e) {
-        e.stopPropagation();
-      },
-      children: [/*#__PURE__*/jsxRuntime.jsx(reactColorful.HexColorPicker, {
-        color: color || "#000000",
-        onChange: setColor
-      }), /*#__PURE__*/jsxRuntime.jsxs("div", {
-        className: "neeto-editor-text-color-option__options-group",
-        children: [/*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Input, {
-          autoFocus: true,
-          className: "neeto-editor-text-color-option__options-group__input",
-          placeholder: t("neetoEditor.placeholders.pickColor"),
-          size: "small",
-          value: color,
-          onChange: utils.withEventTargetValue(setColor),
-          onClick: function onClick(event) {
-            return event.stopPropagation();
-          }
-        }), /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Button, {
-          icon: lucideReact.Check,
-          size: "sm",
-          onClick: handleSave
-        }), /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Button, {
-          icon: lucideReact.X,
-          size: "sm",
-          variant: "ghost",
-          onClick: function onClick() {
-            editor.commands.focus();
-            closeMenu();
-          }
-        }), /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Button, {
-          icon: lucideReact.RotateCw,
-          size: "sm",
-          variant: "ghost",
-          tooltipProps: {
-            content: t("neetoEditor.common.resetToDefault"),
-            position: "top"
-          },
-          onClick: handleUnset
-        })]
-      })]
-    })
+    children: pickerContent
   }, resetKey);
 };
 
@@ -2606,7 +2640,9 @@ var FontSizeOption$1 = 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 = React.useRef(null);
   var lastOption = ramda.last(FONT_SIZE_OPTIONS);
   var _useEditorStore = useEditorStore.useEditorStore(function (store) {
@@ -2631,6 +2667,36 @@ var FontSizeOption$1 = 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__*/jsxRuntime.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__*/jsxRuntime.jsx(Icon, {
+        size: 16
+      }),
+      onClick: function onClick() {
+        return handleClick(value);
+      },
+      children: itemLabel
+    }, value);
+  });
+  if (isSecondaryMenu) {
+    return /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.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__*/jsxRuntime.jsx(neetoAtoms.DropdownMenu, {
     dropdownProps: {
       className: "ne-editor-dropdown"
@@ -2652,23 +2718,7 @@ var FontSizeOption$1 = function FontSizeOption(_ref) {
       className: "ne-toolbar-item ne-toolbar-dropdown neeto-editor-font-size__wrapper"
     },
     children: /*#__PURE__*/jsxRuntime.jsx(Menu$2, {
-      children: menuOptions.map(function (_ref2) {
-        var label = _ref2.label,
-          Icon = _ref2.icon,
-          value = _ref2.value,
-          key = _ref2.key;
-        return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx(Icon, {
-            size: 16
-          }),
-          onClick: function onClick() {
-            return handleClick(value);
-          },
-          children: label
-        }, value);
-      })
+      children: renderItems
     })
   });
 };
@@ -2713,7 +2763,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 = React.useRef(null);
   var textColor = editor.getAttributes("textStyle").color;
   var backgroundColor = editor.getAttributes("textStyle").backgroundColor;
@@ -2754,6 +2806,37 @@ var HighlightDropdown = function HighlightDropdown(_ref) {
       });
     });
   };
+  var renderSections = colorSections.map(function (_ref2) {
+    var title = _ref2.title,
+      colors = _ref2.colors,
+      isTextColor = _ref2.isTextColor;
+    return /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "neeto-editor-highlight-dropdown__section",
+      children: [/*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Typography, {
+        className: "neeto-editor-highlight-dropdown__section-title",
+        variant: "body2",
+        weight: "medium",
+        children: title
+      }), /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: "neeto-editor-highlight-dropdown__color-grid",
+        "data-testid": "neeto-editor-highlight-".concat(utils.hyphenize(title), "-grid"),
+        children: renderColorDots(colors, isTextColor)
+      })]
+    }, title);
+  });
+  if (isSecondaryMenu) {
+    return /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.DropdownMenu.SubMenu, {
+      label: label,
+      icon: lucideReact.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__*/jsxRuntime.jsx(neetoAtoms.DropdownMenu, {
     dropdownProps: {
       className: "ne-editor-dropdown w-[280px] p-3"
@@ -2776,24 +2859,7 @@ var HighlightDropdown = function HighlightDropdown(_ref) {
     },
     children: /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.DropdownMenu.Menu, {
       className: "neeto-editor-highlight-dropdown",
-      children: colorSections.map(function (_ref2) {
-        var title = _ref2.title,
-          colors = _ref2.colors,
-          isTextColor = _ref2.isTextColor;
-        return /*#__PURE__*/jsxRuntime.jsxs("div", {
-          className: "neeto-editor-highlight-dropdown__section",
-          children: [/*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Typography, {
-            className: "neeto-editor-highlight-dropdown__section-title",
-            variant: "body2",
-            weight: "medium",
-            children: title
-          }), /*#__PURE__*/jsxRuntime.jsx("div", {
-            className: "neeto-editor-highlight-dropdown__color-grid",
-            "data-testid": "neeto-editor-highlight-".concat(utils.hyphenize(title), "-grid"),
-            children: renderColorDots(colors, isTextColor)
-          })]
-        }, title);
-      })
+      children: renderSections
     })
   });
 };
@@ -2840,13 +2906,57 @@ var TableOption$1 = function TableOption(_ref) {
       return k + 1;
     });
   };
+  var formContent = /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/jsxRuntime.jsx(neetoAtoms.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: utils.withEventTargetValue(setRows)
+    }), /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.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: utils.withEventTargetValue(setColumns)
+    }), /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "neeto-editor-table-menu__button",
+      children: /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Button, {
+        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__*/React.createElement(neetoAtoms.DropdownMenu.SubMenu, {
+      label: label,
+      icon: lucideReact.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__*/jsxRuntime.jsx(neetoAtoms.DropdownMenu, {
     closeOnSelect: false,
     dropdownProps: {
       className: "ne-editor-dropdown w-auto p-2"
     },
     icon: lucideReact.Table,
-    position: isSecondaryMenu ? "left-start" : "bottom",
+    position: "bottom",
     buttonProps: {
       tabIndex: -1,
       tooltipProps: {
@@ -2857,42 +2967,10 @@ var TableOption$1 = function TableOption(_ref) {
       className: "ne-toolbar-item ne-toolbar-dropdown",
       "data-testid": "neeto-editor-fixed-menu-table-option"
     },
-    customTarget: isSecondaryMenu && /*#__PURE__*/jsxRuntime.jsx(SecondaryMenuTarget, {
-      label: label,
-      icon: lucideReact.Table
-    }),
     onClose: handleClose,
-    children: /*#__PURE__*/jsxRuntime.jsxs(Menu$1, {
+    children: /*#__PURE__*/jsxRuntime.jsx(Menu$1, {
       className: "neeto-editor-table__item",
-      children: [/*#__PURE__*/jsxRuntime.jsx(neetoAtoms.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: utils.withEventTargetValue(setRows)
-      }), /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.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: utils.withEventTargetValue(setColumns)
-      }), /*#__PURE__*/jsxRuntime.jsx("div", {
-        className: "neeto-editor-table-menu__button",
-        children: /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Button, {
-          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);
 };
@@ -3404,4 +3482,4 @@ exports.transformEditorContent = transformEditorContent;
 exports.transformPastedHTML = transformPastedHTML;
 exports.validateAndFormatUrl = validateAndFormatUrl;
 exports.validateUrl = validateUrl;
-//# sourceMappingURL=chunk-B_ZuTQG9.cjs.js.map
+//# sourceMappingURL=chunk-BKrsK0Ld.cjs.js.map