ritext 1.0.23 → 1.0.27

package/dist/extension/strike.js

@@ -1,12 +1,10 @@
 "use strict";
-var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __defProps = Object.defineProperties;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __propIsEnum = Object.prototype.propertyIsEnumerable;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
@@ -46,14 +44,6 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/extension/Strike.tsx
@@ -62,9 +52,9 @@ __export(Strike_exports, {
   Strike: () => Strike
 });
 module.exports = __toCommonJS(Strike_exports);
-var import_extension_strike = __toESM(require("@tiptap/extension-strike"));
+var import_extension_strike = require("@tiptap/extension-strike");
 
-// src/lib/icon/StrikeIcon.tsx
+// src/lib/icons/index.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
 var StrikeIcon = (_a) => {
   var _b = _a, { size = 17, className } = _b, props = __objRest(_b, ["size", "className"]);
@@ -90,9 +80,9 @@ var StrikeIcon = (_a) => {
     })
   );
 };
-var StrikeIcon_default = StrikeIcon;
 
 // src/lib/components/ButtonComponent.tsx
+var import_react5 = require("react");
 var import_tailwind_merge2 = require("tailwind-merge");
 
 // src/lib/components/_com/Tooltip.tsx
@@ -188,53 +178,40 @@ var useEditor = () => {
 };
 
 // src/lib/components/ButtonComponent.tsx
-var import_react5 = require("@tiptap/react");
+var import_react6 = require("@tiptap/react");
 var import_jsx_runtime4 = require("react/jsx-runtime");
 var ButtonComponent = ({ className, activeClassName, icon, style, tooltip = true, tooltipClassName, tooltipPlacement, _extName, _internalIcon, _tooltipContent, _onToggle, _interShortcut, _buttonClassName }) => {
   const { editor } = useEditor();
-  const editorState = (0, import_react5.useEditorState)({
+  const editorState = (0, import_react6.useEditorState)({
     editor,
     selector: ({ editor: editor2 }) => ({ isActive: (editor2 == null ? void 0 : editor2.isActive(_extName)) || false })
   });
+  const shortcutText = (0, import_react5.useMemo)(() => {
+    if (!_interShortcut) return "";
+    return (0, import_react6.isMacOS)() ? _interShortcut.mac : _interShortcut.win;
+  }, [_interShortcut]);
   const tooltipContent = /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("p", { children: [
     typeof tooltip === "string" ? tooltip : _tooltipContent,
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("br", {}),
-    _interShortcut
+    shortcutText ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("br", {}),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "opacity-70", children: shortcutText })
+    ] }) : null
   ] });
-  const btn = /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-    "button",
-    {
-      onClick: _onToggle,
-      className: (0, import_tailwind_merge2.twMerge)(
-        "py-1.5 px-2.5 rounded-md",
-        _buttonClassName,
-        (editorState == null ? void 0 : editorState.isActive) ? "bg-gray-200/60" : "hover:bg-gray-100",
-        className,
-        (editorState == null ? void 0 : editorState.isActive) ? activeClassName : "hover:bg-gray-100"
-      ),
-      style,
-      children: icon != null ? icon : _internalIcon
-    }
-  );
+  const btn = /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { onClick: _onToggle, className: (0, import_tailwind_merge2.twMerge)("py-1.5 px-2.5 rounded-md", _buttonClassName, (editorState == null ? void 0 : editorState.isActive) ? "bg-gray-200/60" : "hover:bg-gray-100", className, (editorState == null ? void 0 : editorState.isActive) ? activeClassName : "hover:bg-gray-100"), style, children: icon != null ? icon : _internalIcon });
   if (tooltip === false) return btn;
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-    Tooltip_default,
-    {
-      content: tooltipContent,
-      className: tooltipClassName,
-      placement: tooltipPlacement,
-      children: btn
-    }
-  );
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Tooltip_default, { content: tooltipContent, className: tooltipClassName, placement: tooltipPlacement, children: btn });
 };
 var ButtonComponent_default = ButtonComponent;
 
 // src/extension/Strike.tsx
 var import_jsx_runtime5 = require("react/jsx-runtime");
-var Strike = import_extension_strike.default.extend({
+var Strike = import_extension_strike.Strike.extend({
   addOptions() {
     var _a;
-    return __spreadProps(__spreadValues({}, (_a = this.parent) == null ? void 0 : _a.call(this)), {
+    const parent = (_a = this.parent) == null ? void 0 : _a.call(this);
+    return __spreadProps(__spreadValues({}, parent != null ? parent : {}), {
+      showInBubbleMenu: true,
+      bubbleMenuPosition: 5,
       component: ({ options, editor, buttonClassName }) => {
         return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
           ButtonComponent_default,
@@ -246,10 +223,10 @@ var Strike = import_extension_strike.default.extend({
             tooltip: options.tooltip,
             tooltipClassName: options.tooltipClassName,
             tooltipPlacement: options.tooltipPlacement,
-            _internalIcon: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(StrikeIcon_default, {}),
+            _internalIcon: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(StrikeIcon, {}),
             _extName: "strike",
             _onToggle: () => editor.chain().focus().toggleStrike().run(),
-            _interShortcut: "\u2318 \u21E7 S",
+            _interShortcut: { win: "Ctrl + \u21E7 + S", mac: "\u2318 + \u21E7 + S" },
             _tooltipContent: "Strike",
             _buttonClassName: buttonClassName
           }

package/dist/extension/strike.mjs

@@ -1,53 +1,27 @@
 import {
   ButtonComponent_default
-} from "../chunk-GSHINFPO.mjs";
-import "../chunk-7QOFJIQ3.mjs";
+} from "../chunk-SJFT7WNM.mjs";
 import "../chunk-VYDH6BZE.mjs";
 import {
-  __objRest,
+  StrikeIcon
+} from "../chunk-EN4BPI7N.mjs";
+import {
   __spreadProps,
   __spreadValues
-} from "../chunk-FWCSY2DS.mjs";
-
-// src/extension/Strike.tsx
-import TiptapStrike from "@tiptap/extension-strike";
-
-// src/lib/icon/StrikeIcon.tsx
-import { jsx, jsxs } from "react/jsx-runtime";
-var StrikeIcon = (_a) => {
-  var _b = _a, { size = 17, className } = _b, props = __objRest(_b, ["size", "className"]);
-  return /* @__PURE__ */ jsxs(
-    "svg",
-    __spreadProps(__spreadValues({
-      xmlns: "http://www.w3.org/2000/svg",
-      viewBox: "0 0 24 24",
-      fill: "none",
-      stroke: "currentColor",
-      strokeWidth: 2,
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      width: size,
-      height: size,
-      className
-    }, props), {
-      children: [
-        /* @__PURE__ */ jsx("path", { d: "M16 4H9a3 3 0 0 0-2.83 4" }),
-        /* @__PURE__ */ jsx("path", { d: "M14 12a4 4 0 0 1 0 8H6" }),
-        /* @__PURE__ */ jsx("line", { x1: "4", x2: "20", y1: "12", y2: "12" })
-      ]
-    })
-  );
-};
-var StrikeIcon_default = StrikeIcon;
+} from "../chunk-WNQUEZJF.mjs";
 
 // src/extension/Strike.tsx
-import { jsx as jsx2 } from "react/jsx-runtime";
+import { Strike as TiptapStrike } from "@tiptap/extension-strike";
+import { jsx } from "react/jsx-runtime";
 var Strike = TiptapStrike.extend({
   addOptions() {
     var _a;
-    return __spreadProps(__spreadValues({}, (_a = this.parent) == null ? void 0 : _a.call(this)), {
+    const parent = (_a = this.parent) == null ? void 0 : _a.call(this);
+    return __spreadProps(__spreadValues({}, parent != null ? parent : {}), {
+      showInBubbleMenu: true,
+      bubbleMenuPosition: 5,
       component: ({ options, editor, buttonClassName }) => {
-        return /* @__PURE__ */ jsx2(
+        return /* @__PURE__ */ jsx(
           ButtonComponent_default,
           {
             className: options.className,
@@ -57,10 +31,10 @@ var Strike = TiptapStrike.extend({
             tooltip: options.tooltip,
             tooltipClassName: options.tooltipClassName,
             tooltipPlacement: options.tooltipPlacement,
-            _internalIcon: /* @__PURE__ */ jsx2(StrikeIcon_default, {}),
+            _internalIcon: /* @__PURE__ */ jsx(StrikeIcon, {}),
             _extName: "strike",
             _onToggle: () => editor.chain().focus().toggleStrike().run(),
-            _interShortcut: "\u2318 \u21E7 S",
+            _interShortcut: { win: "Ctrl + \u21E7 + S", mac: "\u2318 + \u21E7 + S" },
             _tooltipContent: "Strike",
             _buttonClassName: buttonClassName
           }

package/dist/extension/subandsuperscript.d.mts

@@ -1,21 +1,18 @@
 import { ReactNode } from 'react';
-import { Extension, Editor } from '@tiptap/react';
-import { a as ExtDropdownOptions } from '../tiptap-ext.type-DrneAC5G.mjs';
+import { Extension } from '@tiptap/react';
+import { a as ExtDropdownOptions } from '../tiptap-ext.type-B3TtT7-J.mjs';
 import '@floating-ui/react';
 
-interface ExtSubAndSupOptions extends ExtDropdownOptions {
+type ExtSubAndSupOptions = ExtDropdownOptions<{
     subscript?: string | boolean;
     superscript?: string | boolean;
     subscriptIcon?: ReactNode;
     superscriptIcon?: ReactNode;
     showCommandText?: boolean;
-    component: (args: {
-        options: ExtSubAndSupOptions;
-        editor: Editor;
-        dropdownContainerClassName: string;
-        dropdownItemClassName: string;
-    }) => ReactNode;
-}
+}, {
+    dropdownContainerClassName: string;
+    dropdownItemClassName: string;
+}>;
 declare const SubAndSuperscript: Extension<ExtSubAndSupOptions, any>;
 
 export { SubAndSuperscript };

package/dist/extension/subandsuperscript.d.ts

@@ -1,21 +1,18 @@
 import { ReactNode } from 'react';
-import { Extension, Editor } from '@tiptap/react';
-import { a as ExtDropdownOptions } from '../tiptap-ext.type-DrneAC5G.js';
+import { Extension } from '@tiptap/react';
+import { a as ExtDropdownOptions } from '../tiptap-ext.type-B3TtT7-J.js';
 import '@floating-ui/react';
 
-interface ExtSubAndSupOptions extends ExtDropdownOptions {
+type ExtSubAndSupOptions = ExtDropdownOptions<{
     subscript?: string | boolean;
     superscript?: string | boolean;
     subscriptIcon?: ReactNode;
     superscriptIcon?: ReactNode;
     showCommandText?: boolean;
-    component: (args: {
-        options: ExtSubAndSupOptions;
-        editor: Editor;
-        dropdownContainerClassName: string;
-        dropdownItemClassName: string;
-    }) => ReactNode;
-}
+}, {
+    dropdownContainerClassName: string;
+    dropdownItemClassName: string;
+}>;
 declare const SubAndSuperscript: Extension<ExtSubAndSupOptions, any>;
 
 export { SubAndSuperscript };

package/dist/extension/subandsuperscript.js

@@ -65,10 +65,31 @@ module.exports = __toCommonJS(SubAndSuperscript_exports);
 var import_react9 = require("@tiptap/react");
 var import_extension_subscript = __toESM(require("@tiptap/extension-subscript"));
 var import_extension_superscript = __toESM(require("@tiptap/extension-superscript"));
+var import_react10 = require("@tiptap/react");
 
-// src/lib/icon/SubIcon.tsx
+// src/lib/icons/index.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
-var SubIcon = (_a) => {
+var ArrowIcon = (_a) => {
+  var _b = _a, { size = 17, className } = _b, props = __objRest(_b, ["size", "className"]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "svg",
+    __spreadProps(__spreadValues({
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 48 48",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      width: size,
+      height: size,
+      className
+    }, props), {
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { fill: "currentColor", stroke: "currentColor", strokeLinejoin: "round", strokeWidth: "4", d: "M36 19L24 31L12 19z" })
+    })
+  );
+};
+var SubAndSupIcon = (_a) => {
   var _b = _a, { size = 17, className } = _b, props = __objRest(_b, ["size", "className"]);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     "svg",
@@ -85,20 +106,16 @@ var SubIcon = (_a) => {
       className
     }, props), {
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "m4 5 8 8" }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "m12 5-8 8" }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M20 19h-4c0-1.5.44-2 1.5-2.5S20 15.33 20 14c0-.47-.17-.93-.48-1.29a2.11 2.11 0 0 0-2.62-.44c-.42.24-.74.62-.9 1.07" })
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M12 4v16" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M4 7V5a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v2" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M9 20h6" })
       ]
     })
   );
 };
-var SubIcon_default = SubIcon;
-
-// src/lib/icon/SupIcon.tsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
-var SupIcon = (_a) => {
+var SubIcon = (_a) => {
   var _b = _a, { size = 17, className } = _b, props = __objRest(_b, ["size", "className"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     "svg",
     __spreadProps(__spreadValues({
       xmlns: "http://www.w3.org/2000/svg",
@@ -113,20 +130,16 @@ var SupIcon = (_a) => {
       className
     }, props), {
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "m4 19 8-8" }),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "m12 19-8-8" }),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M20 12h-4c0-1.5.442-2 1.5-2.5S20 8.334 20 7.002c0-.472-.17-.93-.484-1.29a2.105 2.105 0 0 0-2.617-.436c-.42.239-.738.614-.899 1.06" })
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "m4 5 8 8" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "m12 5-8 8" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M20 19h-4c0-1.5.44-2 1.5-2.5S20 15.33 20 14c0-.47-.17-.93-.48-1.29a2.11 2.11 0 0 0-2.62-.44c-.42.24-.74.62-.9 1.07" })
       ]
     })
   );
 };
-var SupIcon_default = SupIcon;
-
-// src/lib/icon/SubAndSupIcon.tsx
-var import_jsx_runtime3 = require("react/jsx-runtime");
-var SubAndSupIcon = (_a) => {
+var SupIcon = (_a) => {
   var _b = _a, { size = 17, className } = _b, props = __objRest(_b, ["size", "className"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     "svg",
     __spreadProps(__spreadValues({
       xmlns: "http://www.w3.org/2000/svg",
@@ -141,14 +154,13 @@ var SubAndSupIcon = (_a) => {
       className
     }, props), {
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M12 4v16" }),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M4 7V5a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v2" }),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M9 20h6" })
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "m4 19 8-8" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "m12 19-8-8" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M20 12h-4c0-1.5.442-2 1.5-2.5S20 8.334 20 7.002c0-.472-.17-.93-.484-1.29a2.105 2.105 0 0 0-2.617-.436c-.42.239-.738.614-.899 1.06" })
       ]
     })
   );
 };
-var SubAndSupIcon_default = SubAndSupIcon;
 
 // src/lib/components/DropdownComponent.tsx
 var import_react4 = require("react");
@@ -159,7 +171,7 @@ var import_react = require("react");
 var import_react2 = require("@floating-ui/react");
 var import_react3 = require("motion/react");
 var import_tailwind_merge = require("tailwind-merge");
-var import_jsx_runtime4 = require("react/jsx-runtime");
+var import_jsx_runtime2 = require("react/jsx-runtime");
 var Tooltip = ({ placement = "top", children, content, className }) => {
   const [open, setOpen] = (0, import_react.useState)(false);
   const { x, y, refs, strategy, context, placement: resolvedPlacement } = (0, import_react2.useFloating)({
@@ -199,7 +211,7 @@ var Tooltip = ({ placement = "top", children, content, className }) => {
     }
   };
   const getExit = () => __spreadProps(__spreadValues({}, getInitial()), { opacity: 0 });
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react.Fragment, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react.Fragment, { children: [
     (0, import_react.isValidElement)(children) ? (0, import_react.cloneElement)(children, __spreadProps(__spreadValues({}, getReferenceProps({
       onFocus: () => setOpen(true),
       onBlur: () => setOpen(false),
@@ -209,7 +221,7 @@ var Tooltip = ({ placement = "top", children, content, className }) => {
       /* eslint-disable @typescript-eslint/no-explicit-any */
       ref: mergeRefs(children.props.ref, refs.setReference)
     })) : children,
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react2.FloatingPortal, { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react3.AnimatePresence, { children: open && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react2.FloatingPortal, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react3.AnimatePresence, { children: open && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
       import_react3.motion.div,
       __spreadProps(__spreadValues({
         ref: refs.setFloating
@@ -238,34 +250,8 @@ var Tooltip_default = Tooltip;
 
 // src/lib/components/DropdownComponent.tsx
 var import_react5 = require("@floating-ui/react");
-
-// src/lib/icon/ArrowIcon.tsx
-var import_jsx_runtime5 = require("react/jsx-runtime");
-var ArrowIcon = (_a) => {
-  var _b = _a, { size = 17, className } = _b, props = __objRest(_b, ["size", "className"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-    "svg",
-    __spreadProps(__spreadValues({
-      xmlns: "http://www.w3.org/2000/svg",
-      viewBox: "0 0 48 48",
-      fill: "none",
-      stroke: "currentColor",
-      strokeWidth: 2,
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      width: size,
-      height: size,
-      className
-    }, props), {
-      children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { fill: "currentColor", stroke: "currentColor", strokeLinejoin: "round", strokeWidth: "4", d: "M36 19L24 31L12 19z" })
-    })
-  );
-};
-var ArrowIcon_default = ArrowIcon;
-
-// src/lib/components/DropdownComponent.tsx
 var import_react6 = require("motion/react");
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_jsx_runtime3 = require("react/jsx-runtime");
 var DropdownComponent = ({ children, className, showArrow = true, content, dropdownClassName, style, tooltip, tooltipClassName, tooltipPlacement, _tooltipContent, _internalContent, _dropdownClassName }) => {
   const [open, setOpen] = (0, import_react4.useState)(false);
   const { x, y, refs, strategy, context } = (0, import_react5.useFloating)({
@@ -279,20 +265,23 @@ var DropdownComponent = ({ children, className, showArrow = true, content, dropd
   const dismiss = (0, import_react5.useDismiss)(context);
   const { getReferenceProps, getFloatingProps } = (0, import_react5.useInteractions)([click, dismiss]);
   const listId = (0, import_react4.useId)();
-  const tooltipContent = /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { children: typeof tooltip === "string" ? tooltip : _tooltipContent });
+  const tooltipContent = /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { children: typeof tooltip === "string" ? tooltip : _tooltipContent });
   const initialMotion = { opacity: 0, scale: 0.95 };
   const animateMotion = { opacity: 1, scale: 1 };
   const enhancedChildren = import_react4.Children.map(children, (child) => {
     if (!(0, import_react4.isValidElement)(child)) return child;
-    if (!("onSelect" in child.props)) return child;
     const prevOnSelect = child.props.onSelect;
     const combinedOnSelect = () => {
       prevOnSelect == null ? void 0 : prevOnSelect();
       setOpen(false);
     };
-    return (0, import_react4.cloneElement)(child, { onSelect: combinedOnSelect });
+    return (0, import_react4.cloneElement)(child, {
+      onSelect: prevOnSelect ? combinedOnSelect : void 0,
+      open,
+      onClose: () => setOpen(false)
+    });
   });
-  const btn = /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+  const btn = /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
     "button",
     __spreadProps(__spreadValues({}, getReferenceProps({
       ref: refs.setReference,
@@ -305,13 +294,13 @@ var DropdownComponent = ({ children, className, showArrow = true, content, dropd
       ),
       style,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { children: content != null ? content : _internalContent }),
-        showArrow && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ArrowIcon_default, { size: 14, className: "text-gray-500 block" })
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: content != null ? content : _internalContent }),
+        showArrow && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ArrowIcon, { size: 14, className: "text-gray-500 block" })
       ]
     })
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_react4.Fragment, { children: [
-    tooltip === false ? btn : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react4.Fragment, { children: [
+    tooltip === false ? btn : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
       Tooltip_default,
       {
         content: tooltipContent,
@@ -320,7 +309,7 @@ var DropdownComponent = ({ children, className, showArrow = true, content, dropd
         children: btn
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react5.FloatingPortal, { children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react6.AnimatePresence, { children: open && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react5.FloatingPortal, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react6.AnimatePresence, { children: open && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
       import_react6.motion.div,
       __spreadProps(__spreadValues({}, getFloatingProps({
         ref: refs.setFloating,
@@ -335,7 +324,7 @@ var DropdownComponent = ({ children, className, showArrow = true, content, dropd
         initial: initialMotion,
         animate: animateMotion,
         exit: initialMotion,
-        className: (0, import_tailwind_merge2.twMerge)("bg-white border border-solid border-gray-200 p-2 space-y-1 rounded-lg shadow-sm shadow-gray-200/40 max-h-125 overflow-auto", _dropdownClassName, dropdownClassName),
+        className: (0, import_tailwind_merge2.twMerge)("bg-white border border-solid border-gray-200 p-2 space-y-1 rounded-lg shadow-sm shadow-gray-200/40 z-99999999 max-h-125 overflow-auto", _dropdownClassName, dropdownClassName),
         children: enhancedChildren
       })
     ) }) })
@@ -348,7 +337,7 @@ var import_tailwind_merge3 = require("tailwind-merge");
 
 // src/lib/context/editor.context.tsx
 var import_react7 = require("react");
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_jsx_runtime4 = require("react/jsx-runtime");
 var EditorContext = (0, import_react7.createContext)({ editor: null });
 var useEditor = () => {
   const ctx = (0, import_react7.useContext)(EditorContext);
@@ -358,14 +347,14 @@ var useEditor = () => {
 
 // src/lib/components/DropdownItemComponent.tsx
 var import_react8 = require("@tiptap/react");
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_jsx_runtime5 = require("react/jsx-runtime");
 var DropdownItemComponent = ({ item, onSelect, activeClassName, itemClassName, _itemClassName, showKeyShortcutText = true, spClass }) => {
   const { editor } = useEditor();
   const editorState = (0, import_react8.useEditorState)({
     editor,
     selector: ({ editor: editor2 }) => ({ isActive: (editor2 == null ? void 0 : editor2.isActive(item.name, item.ext ? { level: item.ext } : void 0)) || false })
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: (0, import_tailwind_merge3.twMerge)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: (0, import_tailwind_merge3.twMerge)(
     "flex items-center gap-x-2.5 transition-all duration-100 cursor-pointer select-none px-2 py-1.5 rounded-md",
     _itemClassName,
     (editorState == null ? void 0 : editorState.isActive) ? "bg-gray-200/60" : "hover:bg-gray-100",
@@ -373,14 +362,14 @@ var DropdownItemComponent = ({ item, onSelect, activeClassName, itemClassName, _
     (editorState == null ? void 0 : editorState.isActive) ? activeClassName : "hover:bg-gray-100"
   ), onClick: onSelect, children: [
     item.icon,
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: (0, import_tailwind_merge3.twMerge)("flex-1 text-base", spClass), style: item.style, children: item.text }),
-    showKeyShortcutText && item.keyBind && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "ml-6 text-gray-400", children: item.keyBind })
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: (0, import_tailwind_merge3.twMerge)("flex-1 text-base", spClass), style: item.style, children: item.text }),
+    showKeyShortcutText && item.keyBind && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "ml-6 text-gray-400", children: item.keyBind })
   ] });
 };
 var DropdownItemComponent_default = DropdownItemComponent;
 
 // src/extension/SubAndSuperscript.tsx
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 var SubAndSuperscript = import_react9.Extension.create({
   name: "subAndSuperScript",
   addOptions() {
@@ -392,24 +381,24 @@ var SubAndSuperscript = import_react9.Extension.create({
         if (options.subscript !== false) {
           list.push({
             id: crypto.randomUUID(),
-            icon: (_a2 = options.subscriptIcon) != null ? _a2 : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SubIcon_default, {}),
+            icon: (_a2 = options.subscriptIcon) != null ? _a2 : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SubIcon, {}),
             text: typeof options.subscript === "string" ? options.subscript : "Subscript",
             onClick: () => editor.chain().focus().toggleSubscript().run(),
-            keyBind: "\u2318 .",
+            keyBind: (0, import_react10.isMacOS)() ? "\u2318 + ," : "Ctrl + ,",
             name: "subscript"
           });
         }
         if (options.superscript !== false) {
           list.push({
             id: crypto.randomUUID(),
-            icon: (_b = options.superscriptIcon) != null ? _b : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SupIcon_default, {}),
+            icon: (_b = options.superscriptIcon) != null ? _b : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SupIcon, {}),
             text: typeof options.superscript === "string" ? options.superscript : "Superscript",
             onClick: () => editor.chain().focus().toggleSuperscript().run(),
-            keyBind: "\u2318 ,",
+            keyBind: (0, import_react10.isMacOS)() ? "\u2318 + ." : "Ctrl + .",
             name: "superscript"
           });
         }
-        return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
           DropdownComponent_default,
           {
             className: options.className,
@@ -421,9 +410,9 @@ var SubAndSuperscript = import_react9.Extension.create({
             tooltipClassName: options.tooltipClassName,
             tooltipPlacement: options.tooltipPlacement,
             _tooltipContent: "Sub & Superscript",
-            _internalContent: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SubAndSupIcon_default, {}),
+            _internalContent: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SubAndSupIcon, {}),
             _dropdownClassName: dropdownContainerClassName,
-            children: list.map((item) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+            children: list.map((item) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
               DropdownItemComponent_default,
               {
                 onSelect: item.onClick,