@kopexa/tiptap 17.7.2 → 17.8.1

package/dist/index.js

@@ -208,7 +208,7 @@ function CollaborationProvider({
   (0, import_react3.useEffect)(() => {
     const remote = remoteRef.current;
     if (!remote) return;
-    if (enableLocalPersistence) {
+    if (enableLocalPersistence && !localRef.current) {
       const local = new import_y_indexeddb.IndexeddbPersistence(documentId, ydoc);
       local.on("synced", () => setLocalSynced(true));
       localRef.current = local;
@@ -262,12 +262,19 @@ function CollaborationProvider({
       remote.off("authenticationFailed", onAuthFailed);
       remote.off("synced", onSynced);
       remote.off("status", onStatus);
-      remote.destroy();
+      remote.disconnect();
       (_a = localRef.current) == null ? void 0 : _a.destroy();
       localRef.current = null;
-      remoteRef.current = null;
+      setReady(false);
     };
   }, [documentId, ydoc, enableLocalPersistence]);
+  (0, import_react3.useEffect)(() => {
+    return () => {
+      var _a;
+      (_a = remoteRef.current) == null ? void 0 : _a.destroy();
+      remoteRef.current = null;
+    };
+  }, []);
   (0, import_react3.useEffect)(() => {
     var _a;
     const awareness = (_a = remoteRef.current) == null ? void 0 : _a.awareness;
@@ -1023,7 +1030,7 @@ var ImageNode = import_extension_image.Image.extend({
     return (0, import_react11.ReactNodeViewRenderer)(ImageNodeView, {
       stopEvent: ({ event }) => {
         const target = event.target;
-        if (target.closest("button, [role='button'], input, a")) {
+        if (target instanceof HTMLElement && target.closest("button, [role='button'], input, a")) {
           return true;
         }
         return false;
@@ -1374,7 +1381,7 @@ var ImageUploadNode = import_core2.Node.create({
     return (0, import_react14.ReactNodeViewRenderer)(ImageUploadNodeView, {
       stopEvent: ({ event }) => {
         const target = event.target;
-        if (target.closest("button, [role='button'], input, a")) {
+        if (target instanceof HTMLElement && target.closest("button, [role='button'], input, a")) {
           return true;
         }
         return false;
@@ -4267,8 +4274,8 @@ async function handleFileUpload(editor, file, fileHandler, pos) {
 // src/presets/basic/index.tsx
 var import_extension_table2 = require("@kopexa/extension-table");
 var import_theme9 = require("@kopexa/theme");
-var import_react57 = require("@tiptap/react");
-var import_react58 = require("react");
+var import_react60 = require("@tiptap/react");
+var import_react61 = require("react");
 
 // src/context/editor-context.ts
 var import_react_utils = require("@kopexa/react-utils");
@@ -5818,12 +5825,12 @@ var List = ({
 };
 
 // src/presets/basic/editor-header.tsx
-var import_editor_utils28 = require("@kopexa/editor-utils");
-var import_icons25 = require("@kopexa/icons");
+var import_editor_utils31 = require("@kopexa/editor-utils");
+var import_icons26 = require("@kopexa/icons");
 var import_popover3 = require("@kopexa/popover");
 var import_toolbar10 = require("@kopexa/toolbar");
-var import_use_is_mobile2 = require("@kopexa/use-is-mobile");
-var import_react56 = require("react");
+var import_use_is_mobile3 = require("@kopexa/use-is-mobile");
+var import_react59 = require("react");
 
 // src/hooks/use-cursor-visibility.ts
 var React13 = __toESM(require("react"));
@@ -5927,95 +5934,122 @@ function useCursorVisibility({
   return rect;
 }
 
-// src/ui/blockquote-button/blockquote-button.tsx
+// src/ui/color-highlight-popover/color-highlight-popover.tsx
+var import_button11 = require("@kopexa/button");
+var import_editor_utils14 = require("@kopexa/editor-utils");
+var import_icons15 = require("@kopexa/icons");
+var import_popover2 = require("@kopexa/popover");
+var import_toolbar5 = require("@kopexa/toolbar");
+var import_react43 = require("react");
+
+// src/ui/color-highlight-button/color-highlight-button.tsx
 var import_editor_utils13 = require("@kopexa/editor-utils");
+var import_theme8 = require("@kopexa/theme");
 var import_toolbar4 = require("@kopexa/toolbar");
-var React15 = __toESM(require("react"));
+var import_react42 = require("react");
 
-// src/ui/blockquote-button/use-blockquote.ts
+// src/ui/color-highlight-button/use-color-highlight.ts
 var import_editor_utils12 = require("@kopexa/editor-utils");
 var import_icons14 = require("@kopexa/icons");
-var import_state7 = require("@tiptap/pm/state");
+var import_use_is_mobile = require("@kopexa/use-is-mobile");
 var React14 = __toESM(require("react"));
-var BLOCKQUOTE_SHORTCUT_KEY = "mod+shift+b";
-function canToggleBlockquote(editor, turnInto = true) {
-  var _a;
-  if (!editor || !editor.isEditable) return false;
-  if (!(0, import_editor_utils12.isNodeInSchema)("blockquote", editor) || (0, import_editor_utils12.isNodeTypeSelected)(editor, ["image"]))
-    return false;
-  if (!turnInto) {
-    return editor.can().toggleWrap("blockquote");
-  }
-  try {
-    const view = editor.view;
-    const state = view.state;
-    const selection = state.selection;
-    if (selection.empty || selection instanceof import_state7.TextSelection) {
-      const pos = (_a = (0, import_editor_utils12.findNodePosition)({
-        editor,
-        node: state.selection.$anchor.node(1)
-      })) == null ? void 0 : _a.pos;
-      if (!(0, import_editor_utils12.isValidPosition)(pos)) return false;
-    }
-    return true;
-  } catch {
-    return false;
+var import_react_hotkeys_hook = require("react-hotkeys-hook");
+var COLOR_HIGHLIGHT_SHORTCUT_KEY = "mod+shift+h";
+var HIGHLIGHT_COLORS = [
+  {
+    label: "Default background",
+    value: "var(--tt-bg-color)",
+    border: "var(--tt-bg-color-contrast)"
+  },
+  {
+    label: "Gray background",
+    value: "var(--tt-color-highlight-gray)",
+    border: "var(--tt-color-highlight-gray-contrast)"
+  },
+  {
+    label: "Brown background",
+    value: "var(--tt-color-highlight-brown)",
+    border: "var(--tt-color-highlight-brown-contrast)"
+  },
+  {
+    label: "Orange background",
+    value: "var(--tt-color-highlight-orange)",
+    border: "var(--tt-color-highlight-orange-contrast)"
+  },
+  {
+    label: "Yellow background",
+    value: "var(--tt-color-highlight-yellow)",
+    border: "var(--tt-color-highlight-yellow-contrast)"
+  },
+  {
+    label: "Green background",
+    value: "var(--tt-color-highlight-green)",
+    border: "var(--tt-color-highlight-green-contrast)"
+  },
+  {
+    label: "Blue background",
+    value: "var(--tt-color-highlight-blue)",
+    border: "var(--tt-color-highlight-blue-contrast)"
+  },
+  {
+    label: "Purple background",
+    value: "var(--tt-color-highlight-purple)",
+    border: "var(--tt-color-highlight-purple-contrast)"
+  },
+  {
+    label: "Pink background",
+    value: "var(--tt-color-highlight-pink)",
+    border: "var(--tt-color-highlight-pink-contrast)"
+  },
+  {
+    label: "Red background",
+    value: "var(--tt-color-highlight-red)",
+    border: "var(--tt-color-highlight-red-contrast)"
   }
+];
+function pickHighlightColorsByValue(values) {
+  const colorMap = new Map(
+    HIGHLIGHT_COLORS.map((color) => [color.value, color])
+  );
+  return values.map((value) => colorMap.get(value)).filter((color) => !!color);
 }
-function toggleBlockquote(editor) {
-  var _a, _b, _c;
+function canColorHighlight(editor) {
   if (!editor || !editor.isEditable) return false;
-  if (!canToggleBlockquote(editor)) return false;
-  try {
-    const view = editor.view;
-    let state = view.state;
-    let tr = state.tr;
-    if (state.selection.empty || state.selection instanceof import_state7.TextSelection) {
-      const pos = (_a = (0, import_editor_utils12.findNodePosition)({
-        editor,
-        node: state.selection.$anchor.node(1)
-      })) == null ? void 0 : _a.pos;
-      if (!(0, import_editor_utils12.isValidPosition)(pos)) return false;
-      tr = tr.setSelection(import_state7.NodeSelection.create(state.doc, pos));
-      view.dispatch(tr);
-      state = view.state;
-    }
-    const selection = state.selection;
-    let chain = editor.chain().focus();
-    if (selection instanceof import_state7.NodeSelection) {
-      const firstChild = (_b = selection.node.firstChild) == null ? void 0 : _b.firstChild;
-      const lastChild = (_c = selection.node.lastChild) == null ? void 0 : _c.lastChild;
-      const from = firstChild ? selection.from + firstChild.nodeSize : selection.from + 1;
-      const to = lastChild ? selection.to - lastChild.nodeSize : selection.to - 1;
-      chain = chain.setTextSelection({ from, to }).clearNodes();
-    }
-    const toggle = editor.isActive("blockquote") ? chain.lift("blockquote") : chain.wrapIn("blockquote");
-    toggle.run();
-    editor.chain().focus().selectTextblockEnd().run();
-    return true;
-  } catch {
+  if (!(0, import_editor_utils12.isMarkInSchema)("highlight", editor) || (0, import_editor_utils12.isNodeTypeSelected)(editor, ["image"]))
     return false;
-  }
+  return editor.can().setMark("highlight");
+}
+function isColorHighlightActive(editor, highlightColor) {
+  if (!editor || !editor.isEditable) return false;
+  return highlightColor ? editor.isActive("highlight", { color: highlightColor }) : editor.isActive("highlight");
+}
+function removeHighlight(editor) {
+  if (!editor || !editor.isEditable) return false;
+  if (!canColorHighlight(editor)) return false;
+  return editor.chain().focus().unsetMark("highlight").run();
 }
 function shouldShowButton2(props) {
   const { editor, hideWhenUnavailable } = props;
   if (!editor || !editor.isEditable) return false;
-  if (!(0, import_editor_utils12.isNodeInSchema)("blockquote", editor)) return false;
+  if (!(0, import_editor_utils12.isMarkInSchema)("highlight", editor)) return false;
   if (hideWhenUnavailable && !editor.isActive("code")) {
-    return canToggleBlockquote(editor);
+    return canColorHighlight(editor);
   }
   return true;
 }
-function useBlockquote(config) {
+function useColorHighlight(config) {
   const {
     editor: providedEditor,
+    label,
+    highlightColor,
     hideWhenUnavailable = false,
-    onToggled
-  } = config || {};
+    onApplied
+  } = config;
   const { editor } = (0, import_editor_utils12.useTiptapEditor)(providedEditor);
+  const isMobile = (0, import_use_is_mobile.useIsMobile)();
   const [isVisible, setIsVisible] = React14.useState(true);
-  const canToggle3 = canToggleBlockquote(editor);
-  const isActive = (editor == null ? void 0 : editor.isActive("blockquote")) || false;
+  const canColorHighlightState = canColorHighlight(editor);
+  const isActive = isColorHighlightActive(editor, highlightColor);
   React14.useEffect(() => {
     if (!editor) return;
     const handleSelectionUpdate = () => {
@@ -6027,375 +6061,885 @@ function useBlockquote(config) {
       editor.off("selectionUpdate", handleSelectionUpdate);
     };
   }, [editor, hideWhenUnavailable]);
-  const handleToggle = React14.useCallback(() => {
-    if (!editor) return false;
-    const success = toggleBlockquote(editor);
+  const handleColorHighlight = React14.useCallback(() => {
+    if (!editor || !canColorHighlightState || !highlightColor || !label)
+      return false;
+    if (editor.state.storedMarks) {
+      const highlightMarkType = editor.schema.marks.highlight;
+      if (highlightMarkType) {
+        editor.view.dispatch(
+          editor.state.tr.removeStoredMark(highlightMarkType)
+        );
+      }
+    }
+    setTimeout(() => {
+      const success = editor.chain().focus().toggleMark("highlight", { color: highlightColor }).run();
+      if (success) {
+        onApplied == null ? void 0 : onApplied({ color: highlightColor, label });
+      }
+      return success;
+    }, 0);
+  }, [canColorHighlightState, highlightColor, editor, label, onApplied]);
+  const handleRemoveHighlight = React14.useCallback(() => {
+    const success = removeHighlight(editor);
     if (success) {
-      onToggled == null ? void 0 : onToggled();
+      onApplied == null ? void 0 : onApplied({ color: "", label: "Remove highlight" });
     }
     return success;
-  }, [editor, onToggled]);
+  }, [editor, onApplied]);
+  (0, import_react_hotkeys_hook.useHotkeys)(
+    COLOR_HIGHLIGHT_SHORTCUT_KEY,
+    (event) => {
+      event.preventDefault();
+      handleColorHighlight();
+    },
+    {
+      enabled: isVisible && canColorHighlightState,
+      enableOnContentEditable: !isMobile,
+      enableOnFormTags: true
+    }
+  );
   return {
     isVisible,
     isActive,
-    handleToggle,
-    canToggle: canToggle3,
-    label: "Blockquote",
-    shortcutKeys: BLOCKQUOTE_SHORTCUT_KEY,
-    Icon: import_icons14.BlockquoteIcon
+    handleColorHighlight,
+    handleRemoveHighlight,
+    canColorHighlight: canColorHighlightState,
+    label: label || `Highlight`,
+    shortcutKeys: COLOR_HIGHLIGHT_SHORTCUT_KEY,
+    Icon: import_icons14.HighlighterIcon
   };
 }
 
-// src/ui/blockquote-button/blockquote-button.tsx
+// src/ui/color-highlight-button/color-highlight-button.tsx
 var import_jsx_runtime21 = require("react/jsx-runtime");
-var BlockquoteButton = ({
+var ColorHighlightButton = ({
   editor: providedEditor,
+  highlightColor,
   text,
   hideWhenUnavailable = false,
-  onToggled,
+  onApplied,
   showShortcut = false,
   onClick,
   children,
+  style,
+  className,
   ...buttonProps
 }) => {
   const { editor } = (0, import_editor_utils13.useTiptapEditor)(providedEditor);
   const {
     isVisible,
-    canToggle: canToggle3,
+    canColorHighlight: canColorHighlight2,
     isActive,
-    handleToggle,
+    handleColorHighlight,
     label,
-    shortcutKeys,
-    Icon
-  } = useBlockquote({
+    shortcutKeys
+  } = useColorHighlight({
     editor,
+    highlightColor,
+    label: text || `Toggle highlight (${highlightColor})`,
     hideWhenUnavailable,
-    onToggled
+    onApplied
   });
-  const handleClick = React15.useCallback(
+  const handleClick = (0, import_react42.useCallback)(
     (event) => {
       onClick == null ? void 0 : onClick(event);
       if (event.defaultPrevented) return;
-      handleToggle();
+      handleColorHighlight();
     },
-    [handleToggle, onClick]
+    [handleColorHighlight, onClick]
+  );
+  const buttonStyle = (0, import_react42.useMemo)(
+    () => ({
+      ...style,
+      "--highlight-color": highlightColor
+    }),
+    [highlightColor, style]
   );
   if (!isVisible) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+  const styles = (0, import_theme8.colorHighlightButton)();
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
     import_toolbar4.ToolbarButton,
     {
       type: "button",
+      disabled: !canColorHighlight2,
+      "data-disabled": !canColorHighlight2,
       variant: "ghost",
       color: "default",
-      disabled: !canToggle3,
-      "data-disabled": !canToggle3,
       "data-active-state": isActive ? "on" : "off",
       tabIndex: -1,
-      "aria-label": "blockquote",
-      "aria-pressed": isActive,
-      title: label,
+      "aria-label": label,
       shortcutKeys,
+      "aria-pressed": isActive,
       onClick: handleClick,
-      isIconOnly: !text && !children,
-      ...buttonProps,
-      children: children != null ? children : /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Icon, {}),
-        text && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { children: text })
-      ] })
+      style: buttonStyle,
+      className: styles.button({ className }),
+      isIconOnly: true,
+      ...buttonProps,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+          "span",
+          {
+            "data-active-state": isActive ? "on" : "off",
+            className: styles.mark()
+          }
+        ),
+        children || /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+            "span",
+            {
+              style: { "--highlight-color": highlightColor }
+            }
+          ),
+          text
+        ] })
+      ]
+    }
+  );
+};
+
+// src/ui/color-highlight-popover/color-highlight-popover.tsx
+var import_jsx_runtime22 = require("react/jsx-runtime");
+var ColorHighlightPopoverButton = ({
+  className,
+  children,
+  ...props
+}) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+  import_button11.IconButton,
+  {
+    type: "button",
+    className,
+    variant: "ghost",
+    color: "default",
+    tabIndex: -1,
+    "aria-label": "Highlight text",
+    tooltip: "Highlight",
+    isIconOnly: !children,
+    ...props,
+    children: children != null ? children : /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_icons15.HighlighterIcon, {})
+  }
+);
+function ColorHighlightPopoverContent({
+  editor,
+  colors = pickHighlightColorsByValue([
+    "var(--tt-color-highlight-green)",
+    "var(--tt-color-highlight-blue)",
+    "var(--tt-color-highlight-red)",
+    "var(--tt-color-highlight-purple)",
+    "var(--tt-color-highlight-yellow)"
+  ])
+}) {
+  const { handleRemoveHighlight } = useColorHighlight({ editor });
+  const containerRef = (0, import_react43.useRef)(null);
+  const menuItems = (0, import_react43.useMemo)(
+    () => [...colors, { label: "Remove highlight", value: "none" }],
+    [colors]
+  );
+  const { selectedIndex } = useMenuNavigation({
+    containerRef,
+    items: menuItems,
+    orientation: "both",
+    onSelect: (item) => {
+      if (!containerRef.current) return false;
+      const highlightedElement = containerRef.current.querySelector(
+        '[data-highlighted="true"]'
+      );
+      if (highlightedElement) highlightedElement.click();
+      if (item.value === "none") handleRemoveHighlight();
+    },
+    autoSelectFirstItem: false
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { ref: containerRef, className: "flex gap-1 items-center", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+      "div",
+      {
+        className: "flex items-center gap-1 outline-none",
+        "data-orientation": "horizontal",
+        children: colors.map((color, index) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+          ColorHighlightButton,
+          {
+            editor,
+            highlightColor: color.value,
+            "aria-label": `${color.label} highlight color`,
+            tabIndex: index === selectedIndex ? 0 : -1,
+            "data-highlighted": selectedIndex === index
+          },
+          color.value
+        ))
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_toolbar5.ToolbarSeparator, { orientation: "vertical" }),
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "tiptap-button-group", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+      import_button11.IconButton,
+      {
+        onClick: handleRemoveHighlight,
+        "aria-label": "Remove highlight",
+        tabIndex: selectedIndex === colors.length ? 0 : -1,
+        type: "button",
+        role: "menuitem",
+        variant: "ghost",
+        color: "default",
+        "data-highlighted": selectedIndex === colors.length,
+        children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_icons15.BanIcon, {})
+      }
+    ) })
+  ] });
+}
+function ColorHighlightPopover({
+  editor: providedEditor,
+  colors = pickHighlightColorsByValue([
+    "var(--tt-color-highlight-green)",
+    "var(--tt-color-highlight-blue)",
+    "var(--tt-color-highlight-red)",
+    "var(--tt-color-highlight-purple)",
+    "var(--tt-color-highlight-yellow)"
+  ]),
+  hideWhenUnavailable = false,
+  onApplied,
+  ...props
+}) {
+  const { editor } = (0, import_editor_utils14.useTiptapEditor)(providedEditor);
+  const [isOpen, setIsOpen] = (0, import_react43.useState)(false);
+  const { isVisible, canColorHighlight: canColorHighlight2, isActive, label } = useColorHighlight({
+    editor,
+    hideWhenUnavailable,
+    onApplied
+  });
+  if (!isVisible) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_popover2.Popover.Root, { open: isOpen, onOpenChange: setIsOpen, spacing: "dense", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+      import_popover2.Popover.Trigger,
+      {
+        render: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+          ColorHighlightPopoverButton,
+          {
+            disabled: !canColorHighlight2,
+            "data-disabled": !canColorHighlight2,
+            "data-active-state": isActive ? "on" : "off",
+            "aria-pressed": isActive,
+            "aria-label": label,
+            title: label,
+            ...props
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_popover2.Popover.Content, { "aria-label": "Highlight colors", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ColorHighlightPopoverContent, { editor, colors }) })
+  ] });
+}
+
+// src/ui/list-dropdown-menu/index.tsx
+var import_button13 = require("@kopexa/button");
+var import_dropdown_menu = require("@kopexa/dropdown-menu");
+var import_editor_utils16 = require("@kopexa/editor-utils");
+var import_icons17 = require("@kopexa/icons");
+var import_react46 = require("@tiptap/react");
+var import_react47 = require("react");
+
+// src/ui/list-button/index.tsx
+var import_button12 = require("@kopexa/button");
+var import_editor_utils15 = require("@kopexa/editor-utils");
+var import_icons16 = require("@kopexa/icons");
+var import_react44 = require("@tiptap/react");
+var import_react45 = require("react");
+var import_jsx_runtime23 = require("react/jsx-runtime");
+var listOptions = [
+  {
+    label: "Bullet List",
+    type: "bulletList",
+    icon: import_icons16.ListIcon
+  },
+  {
+    label: "Ordered List",
+    type: "orderedList",
+    icon: import_icons16.ListOrderedIcon
+  },
+  {
+    label: "Task List",
+    type: "taskList",
+    icon: import_icons16.ListTodoIcon
+  }
+];
+var listShortcutKeys = {
+  bulletList: "Ctrl-Shift-8",
+  orderedList: "Ctrl-Shift-7",
+  taskList: "Ctrl-Shift-9"
+};
+function canToggleList(editor, type) {
+  if (!editor) {
+    return false;
+  }
+  switch (type) {
+    case "bulletList":
+      return editor.can().toggleBulletList();
+    case "orderedList":
+      return editor.can().toggleOrderedList();
+    case "taskList":
+      return editor.can().toggleList("taskList", "taskItem");
+    default:
+      return false;
+  }
+}
+function isListActive(editor, type) {
+  if (!editor) return false;
+  switch (type) {
+    case "bulletList":
+      return editor.isActive("bulletList");
+    case "orderedList":
+      return editor.isActive("orderedList");
+    case "taskList":
+      return editor.isActive("taskList");
+    default:
+      return false;
+  }
+}
+function toggleList(editor, type) {
+  if (!editor) return;
+  switch (type) {
+    case "bulletList":
+      editor.chain().focus().toggleBulletList().run();
+      break;
+    case "orderedList":
+      editor.chain().focus().toggleOrderedList().run();
+      break;
+    case "taskList":
+      editor.chain().focus().toggleList("taskList", "taskItem").run();
+      break;
+  }
+}
+function getListOption(type) {
+  return listOptions.find((option) => option.type === type);
+}
+function shouldShowListButton(params) {
+  const { editor, type, hideWhenUnavailable, listInSchema } = params;
+  if (!listInSchema || !editor) {
+    return false;
+  }
+  if (hideWhenUnavailable) {
+    if ((0, import_react44.isNodeSelection)(editor.state.selection) || !canToggleList(editor, type)) {
+      return false;
+    }
+  }
+  return true;
+}
+function useListState(editor, type) {
+  const listInSchema = (0, import_editor_utils15.isNodeInSchema)(type, editor);
+  const listOption = getListOption(type);
+  const isActive = isListActive(editor, type);
+  const shortcutKey = listShortcutKeys[type];
+  return {
+    listInSchema,
+    listOption,
+    isActive,
+    shortcutKey
+  };
+}
+var ListButton = ({
+  editor: providedEditor,
+  type,
+  hideWhenUnavailable = false,
+  className = "",
+  onClick,
+  text,
+  children,
+  ref,
+  ...buttonProps
+}) => {
+  const { editor } = (0, import_editor_utils15.useTiptapEditor)(providedEditor);
+  const { listInSchema, listOption, isActive, shortcutKey } = useListState(
+    editor,
+    type
+  );
+  const Icon = (listOption == null ? void 0 : listOption.icon) || import_icons16.ListIcon;
+  const handleClick = (0, import_react45.useCallback)(
+    (e) => {
+      onClick == null ? void 0 : onClick(e);
+      if (!e.defaultPrevented && editor) {
+        toggleList(editor, type);
+      }
+    },
+    [onClick, editor, type]
+  );
+  const show = (0, import_react45.useMemo)(() => {
+    return shouldShowListButton({
+      editor,
+      type,
+      hideWhenUnavailable,
+      listInSchema
+    });
+  }, [editor, type, hideWhenUnavailable, listInSchema]);
+  if (!show || !editor || !editor.isEditable) {
+    return null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+    import_button12.Button,
+    {
+      type: "button",
+      className: className.trim(),
+      variant: "ghost",
+      color: "default",
+      "data-active-state": isActive ? "on" : "off",
+      tabIndex: -1,
+      "aria-label": (listOption == null ? void 0 : listOption.label) || type,
+      "aria-pressed": isActive,
+      tooltip: (listOption == null ? void 0 : listOption.label) || type,
+      shortcutKeys: shortcutKey,
+      onClick: handleClick,
+      startContent: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Icon, {}),
+      ...buttonProps,
+      ref,
+      children: children || text
+    }
+  );
+};
+
+// src/ui/list-dropdown-menu/index.tsx
+var import_jsx_runtime24 = require("react/jsx-runtime");
+function canToggleAnyList(editor, listTypes) {
+  if (!editor) return false;
+  return listTypes.some((type) => canToggleList(editor, type));
+}
+function isAnyListActive(editor, listTypes) {
+  if (!editor) return false;
+  return listTypes.some((type) => isListActive(editor, type));
+}
+function getFilteredListOptions(availableTypes) {
+  return listOptions.filter(
+    (option) => !option.type || availableTypes.includes(option.type)
+  );
+}
+function shouldShowListDropdown(params) {
+  const { editor, hideWhenUnavailable, listInSchema, canToggleAny } = params;
+  if (!listInSchema || !editor) {
+    return false;
+  }
+  if (hideWhenUnavailable) {
+    if ((0, import_react46.isNodeSelection)(editor.state.selection) || !canToggleAny) {
+      return false;
+    }
+  }
+  return true;
+}
+function useListDropdownState(editor, availableTypes) {
+  const [isOpen, setIsOpen] = (0, import_react47.useState)(false);
+  const listInSchema = availableTypes.some(
+    (type) => (0, import_editor_utils16.isNodeInSchema)(type, editor)
+  );
+  const filteredLists = (0, import_react47.useMemo)(
+    () => getFilteredListOptions(availableTypes),
+    [availableTypes]
+  );
+  const canToggleAny = canToggleAnyList(editor, availableTypes);
+  const isAnyActive = isAnyListActive(editor, availableTypes);
+  const handleOpenChange = (0, import_react47.useCallback)(
+    (open, callback) => {
+      setIsOpen(open);
+      callback == null ? void 0 : callback(open);
+    },
+    []
+  );
+  return {
+    isOpen,
+    setIsOpen,
+    listInSchema,
+    filteredLists,
+    canToggleAny,
+    isAnyActive,
+    handleOpenChange
+  };
+}
+function useActiveListIcon(editor, filteredLists) {
+  return (0, import_react47.useCallback)(() => {
+    const activeOption = filteredLists.find(
+      (option) => isListActive(editor, option.type)
+    );
+    return activeOption ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(activeOption.icon, {}) : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_icons17.ListIcon, {});
+  }, [editor, filteredLists]);
+}
+function ListDropdownMenu({
+  editor: providedEditor,
+  types = ["bulletList", "orderedList", "taskList"],
+  hideWhenUnavailable = false,
+  onOpenChange,
+  ...props
+}) {
+  const { editor } = (0, import_editor_utils16.useTiptapEditor)(providedEditor);
+  const {
+    isOpen,
+    listInSchema,
+    filteredLists,
+    canToggleAny,
+    isAnyActive,
+    handleOpenChange
+  } = useListDropdownState(editor, types);
+  const getActiveIcon = useActiveListIcon(editor, filteredLists);
+  const show = (0, import_react47.useMemo)(() => {
+    return shouldShowListDropdown({
+      editor,
+      listTypes: types,
+      hideWhenUnavailable,
+      listInSchema,
+      canToggleAny
+    });
+  }, [editor, types, hideWhenUnavailable, listInSchema, canToggleAny]);
+  const handleOnOpenChange = (0, import_react47.useCallback)(
+    (open) => handleOpenChange(open, onOpenChange),
+    [handleOpenChange, onOpenChange]
+  );
+  if (!show || !editor || !editor.isEditable) {
+    return null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_dropdown_menu.DropdownMenu.Root, { open: isOpen, onOpenChange: handleOnOpenChange, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_dropdown_menu.DropdownMenu.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+      import_button13.Button,
+      {
+        type: "button",
+        variant: "ghost",
+        color: "default",
+        "data-active-state": isAnyActive ? "on" : "off",
+        tabIndex: -1,
+        "aria-label": "List options",
+        tooltip: "List",
+        endContent: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_icons17.ChevronDownIcon, {}),
+        ...props,
+        children: getActiveIcon()
+      }
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_dropdown_menu.DropdownMenu.Content, { children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_dropdown_menu.DropdownMenu.Group, { children: filteredLists.map((option) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_dropdown_menu.DropdownMenu.Item, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+      ListButton,
+      {
+        editor,
+        type: option.type,
+        text: option.label,
+        hideWhenUnavailable,
+        tooltip: "",
+        fullWidth: true,
+        spacing: "start"
+      }
+    ) }, option.type)) }) })
+  ] });
+}
+
+// src/ui/table-button/index.tsx
+var import_editor_utils17 = require("@kopexa/editor-utils");
+var import_toolbar6 = require("@kopexa/toolbar");
+var import_react48 = require("react");
+var import_jsx_runtime25 = require("react/jsx-runtime");
+var TableButton = ({
+  editor: providedEditor,
+  text,
+  hideWhenUnavailable = false,
+  onToggled,
+  onClick,
+  children,
+  ...buttonProps
+}) => {
+  const { editor } = (0, import_editor_utils17.useTiptapEditor)(providedEditor);
+  const {
+    isVisible,
+    canToggle: canToggle3,
+    isActive,
+    handleToggle,
+    label,
+    //     shortcutKeys,
+    Icon
+  } = useTableBlock({
+    editor,
+    hideWhenUnavailable,
+    onToggled
+  });
+  const handleClick = (0, import_react48.useCallback)(
+    (event) => {
+      onClick == null ? void 0 : onClick(event);
+      if (event.defaultPrevented) return;
+      handleToggle();
+    },
+    [handleToggle, onClick]
+  );
+  if (!isVisible) {
+    return null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+    import_toolbar6.ToolbarButton,
+    {
+      type: "button",
+      variant: "ghost",
+      color: "default",
+      "data-active-state": isActive ? "on" : "off",
+      disabled: !canToggle3,
+      "data-disabled": !canToggle3,
+      tabIndex: -1,
+      "aria-label": label,
+      "aria-pressed": isActive,
+      title: label,
+      onClick: handleClick,
+      isIconOnly: !text && !children,
+      ...buttonProps,
+      children: children || /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_jsx_runtime25.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Icon, {}),
+        text && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { children: text })
+      ] })
     }
   );
 };
 
-// src/ui/codeblock-button/code-block-button.tsx
-var import_editor_utils15 = require("@kopexa/editor-utils");
-var import_icons16 = require("@kopexa/icons");
-var import_toolbar5 = require("@kopexa/toolbar");
-var import_react42 = require("react");
+// src/ui/text-align-button/text-align-button.tsx
+var import_button14 = require("@kopexa/button");
+var import_editor_utils19 = require("@kopexa/editor-utils");
+var import_react50 = require("react");
 
-// src/ui/codeblock-button/use-code-block.ts
-var import_editor_utils14 = require("@kopexa/editor-utils");
-var import_icons15 = require("@kopexa/icons");
-var import_state8 = require("@tiptap/pm/state");
-var React16 = __toESM(require("react"));
-var CODE_BLOCK_SHORTCUT_KEY = "mod+alt+c";
-function canToggle2(editor, turnInto = true) {
-  var _a;
+// src/ui/text-align-button/use-text-align.ts
+var import_editor_utils18 = require("@kopexa/editor-utils");
+var import_icons18 = require("@kopexa/icons");
+var import_react49 = require("react");
+var TEXT_ALIGN_SHORTCUT_KEYS = {
+  left: "mod+shift+l",
+  center: "mod+shift+e",
+  right: "mod+shift+r",
+  justify: "mod+shift+j"
+};
+var textAlignIcons = {
+  left: import_icons18.AlignLeftIcon,
+  center: import_icons18.AlignCenterIcon,
+  right: import_icons18.AlignRightIcon,
+  justify: import_icons18.AlignJustifyIcon
+};
+var textAlignLabels = {
+  left: "Align left",
+  center: "Align center",
+  right: "Align right",
+  justify: "Align justify"
+};
+function canSetTextAlign(editor, align) {
   if (!editor || !editor.isEditable) return false;
-  if (!(0, import_editor_utils14.isNodeInSchema)("codeBlock", editor) || (0, import_editor_utils14.isNodeTypeSelected)(editor, ["image"]))
-    return false;
-  if (!turnInto) {
-    return editor.can().toggleNode("codeBlock", "paragraph");
-  }
-  try {
-    const view = editor.view;
-    const state = view.state;
-    const selection = state.selection;
-    if (selection.empty || selection instanceof import_state8.TextSelection) {
-      const pos = (_a = (0, import_editor_utils14.findNodePosition)({
-        editor,
-        node: state.selection.$anchor.node(1)
-      })) == null ? void 0 : _a.pos;
-      if (!(0, import_editor_utils14.isValidPosition)(pos)) return false;
-    }
-    return true;
-  } catch {
+  if (!(0, import_editor_utils18.isExtensionAvailable)(editor, "textAlign") || (0, import_editor_utils18.isNodeTypeSelected)(editor, ["image"]))
     return false;
-  }
+  return editor.can().setTextAlign(align);
 }
-function toggleCodeBlock(editor) {
-  var _a, _b, _c;
+function hasSetTextAlign(commands) {
+  return "setTextAlign" in commands;
+}
+function isTextAlignActive(editor, align) {
   if (!editor || !editor.isEditable) return false;
-  if (!canToggle2(editor)) return false;
-  try {
-    const view = editor.view;
-    let state = view.state;
-    let tr = state.tr;
-    if (state.selection.empty || state.selection instanceof import_state8.TextSelection) {
-      const pos = (_a = (0, import_editor_utils14.findNodePosition)({
-        editor,
-        node: state.selection.$anchor.node(1)
-      })) == null ? void 0 : _a.pos;
-      if (!(0, import_editor_utils14.isValidPosition)(pos)) return false;
-      tr = tr.setSelection(import_state8.NodeSelection.create(state.doc, pos));
-      view.dispatch(tr);
-      state = view.state;
-    }
-    const selection = state.selection;
-    let chain = editor.chain().focus();
-    if (selection instanceof import_state8.NodeSelection) {
-      const firstChild = (_b = selection.node.firstChild) == null ? void 0 : _b.firstChild;
-      const lastChild = (_c = selection.node.lastChild) == null ? void 0 : _c.lastChild;
-      const from = firstChild ? selection.from + firstChild.nodeSize : selection.from + 1;
-      const to = lastChild ? selection.to - lastChild.nodeSize : selection.to - 1;
-      chain = chain.setTextSelection({ from, to }).clearNodes();
-    }
-    const toggle = editor.isActive("codeBlock") ? chain.setNode("paragraph") : chain.toggleNode("codeBlock", "paragraph");
-    toggle.run();
-    editor.chain().focus().selectTextblockEnd().run();
-    return true;
-  } catch {
-    return false;
+  return editor.isActive({ textAlign: align });
+}
+function setTextAlign(editor, align) {
+  if (!editor || !editor.isEditable) return false;
+  if (!canSetTextAlign(editor, align)) return false;
+  const chain = editor.chain().focus();
+  if (hasSetTextAlign(chain)) {
+    return chain.setTextAlign(align).run();
   }
+  return false;
 }
 function shouldShowButton3(props) {
-  const { editor, hideWhenUnavailable } = props;
+  const { editor, hideWhenUnavailable, align } = props;
   if (!editor || !editor.isEditable) return false;
-  if (!(0, import_editor_utils14.isNodeInSchema)("codeBlock", editor)) return false;
+  if (!(0, import_editor_utils18.isExtensionAvailable)(editor, "textAlign")) return false;
   if (hideWhenUnavailable && !editor.isActive("code")) {
-    return canToggle2(editor);
+    return canSetTextAlign(editor, align);
   }
   return true;
 }
-function useCodeBlock(config) {
+function useTextAlign(config) {
   const {
     editor: providedEditor,
+    align,
     hideWhenUnavailable = false,
-    onToggled
-  } = config || {};
-  const { editor } = (0, import_editor_utils14.useTiptapEditor)(providedEditor);
-  const [isVisible, setIsVisible] = React16.useState(true);
-  const canToggleState = canToggle2(editor);
-  const isActive = (editor == null ? void 0 : editor.isActive("codeBlock")) || false;
-  React16.useEffect(() => {
+    onAligned
+  } = config;
+  const { editor } = (0, import_editor_utils18.useTiptapEditor)(providedEditor);
+  const [isVisible, setIsVisible] = (0, import_react49.useState)(true);
+  const canAlign = canSetTextAlign(editor, align);
+  const isActive = isTextAlignActive(editor, align);
+  (0, import_react49.useEffect)(() => {
     if (!editor) return;
     const handleSelectionUpdate = () => {
-      setIsVisible(shouldShowButton3({ editor, hideWhenUnavailable }));
+      setIsVisible(shouldShowButton3({ editor, align, hideWhenUnavailable }));
     };
     handleSelectionUpdate();
     editor.on("selectionUpdate", handleSelectionUpdate);
     return () => {
       editor.off("selectionUpdate", handleSelectionUpdate);
     };
-  }, [editor, hideWhenUnavailable]);
-  const handleToggle = React16.useCallback(() => {
+  }, [editor, hideWhenUnavailable, align]);
+  const handleTextAlign = (0, import_react49.useCallback)(() => {
     if (!editor) return false;
-    const success = toggleCodeBlock(editor);
+    const success = setTextAlign(editor, align);
     if (success) {
-      onToggled == null ? void 0 : onToggled();
+      onAligned == null ? void 0 : onAligned();
     }
     return success;
-  }, [editor, onToggled]);
+  }, [editor, align, onAligned]);
   return {
     isVisible,
     isActive,
-    handleToggle,
-    canToggle: canToggleState,
-    label: "Code Block",
-    shortcutKeys: CODE_BLOCK_SHORTCUT_KEY,
-    Icon: import_icons15.CodeblockIcon
+    handleTextAlign,
+    canAlign,
+    label: textAlignLabels[align],
+    shortcutKeys: TEXT_ALIGN_SHORTCUT_KEYS[align],
+    Icon: textAlignIcons[align]
   };
 }
 
-// src/ui/codeblock-button/code-block-button.tsx
-var import_jsx_runtime22 = require("react/jsx-runtime");
-var CodeBlockButton = ({
+// src/ui/text-align-button/text-align-button.tsx
+var import_jsx_runtime26 = require("react/jsx-runtime");
+var TextAlignButton = ({
   editor: providedEditor,
+  align,
   text,
   hideWhenUnavailable = false,
-  onToggled,
+  onAligned,
   showShortcut = false,
   onClick,
   children,
   ...buttonProps
 }) => {
-  const { editor } = (0, import_editor_utils15.useTiptapEditor)(providedEditor);
-  const { isVisible, canToggle: canToggle3, isActive, handleToggle, label, shortcutKeys } = useCodeBlock({
+  const { editor } = (0, import_editor_utils19.useTiptapEditor)(providedEditor);
+  const {
+    isVisible,
+    handleTextAlign,
+    label,
+    canAlign,
+    isActive,
+    Icon,
+    shortcutKeys
+  } = useTextAlign({
     editor,
+    align,
     hideWhenUnavailable,
-    onToggled
+    onAligned
   });
-  const handleClick = (0, import_react42.useCallback)(
-    (event) => {
-      onClick == null ? void 0 : onClick(event);
-      if (event.defaultPrevented) return;
-      handleToggle();
+  const handleClick = (0, import_react50.useCallback)(
+    (e) => {
+      onClick == null ? void 0 : onClick(e);
+      if (e.defaultPrevented) return;
+      handleTextAlign();
     },
-    [handleToggle, onClick]
+    [handleTextAlign, onClick]
   );
   if (!isVisible) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
-    import_toolbar5.ToolbarButton,
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+    import_button14.IconButton,
     {
       type: "button",
+      disabled: canAlign,
       variant: "ghost",
       color: "default",
-      disabled: !canToggle3,
-      "data-disabled": !canToggle3,
       "data-active-state": isActive ? "on" : "off",
+      "data-disabled": canAlign,
       tabIndex: -1,
-      "aria-label": "codeBlock",
+      "aria-label": label,
       "aria-pressed": isActive,
-      title: label,
+      tooltip: label,
       shortcutKeys,
       onClick: handleClick,
-      isIconOnly: true,
       ...buttonProps,
-      children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_icons16.CodeblockIcon, {})
+      children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Icon, {})
     }
   );
 };
 
-// src/ui/color-highlight-popover/color-highlight-popover.tsx
-var import_button11 = require("@kopexa/button");
-var import_editor_utils18 = require("@kopexa/editor-utils");
-var import_icons18 = require("@kopexa/icons");
-var import_popover2 = require("@kopexa/popover");
-var import_toolbar7 = require("@kopexa/toolbar");
-var import_react44 = require("react");
+// src/ui/turn-into-dropdown/turn-into-dropdown.tsx
+var import_button17 = require("@kopexa/button");
+var import_dropdown_menu2 = require("@kopexa/dropdown-menu");
+var import_editor_utils28 = require("@kopexa/editor-utils");
+var import_react56 = require("react");
 
-// src/ui/color-highlight-button/color-highlight-button.tsx
-var import_editor_utils17 = require("@kopexa/editor-utils");
-var import_theme8 = require("@kopexa/theme");
-var import_toolbar6 = require("@kopexa/toolbar");
-var import_react43 = require("react");
+// src/ui/blockquote-button/blockquote-button.tsx
+var import_editor_utils21 = require("@kopexa/editor-utils");
+var import_toolbar7 = require("@kopexa/toolbar");
+var React16 = __toESM(require("react"));
 
-// src/ui/color-highlight-button/use-color-highlight.ts
-var import_editor_utils16 = require("@kopexa/editor-utils");
-var import_icons17 = require("@kopexa/icons");
-var import_use_is_mobile = require("@kopexa/use-is-mobile");
-var React17 = __toESM(require("react"));
-var import_react_hotkeys_hook = require("react-hotkeys-hook");
-var COLOR_HIGHLIGHT_SHORTCUT_KEY = "mod+shift+h";
-var HIGHLIGHT_COLORS = [
-  {
-    label: "Default background",
-    value: "var(--tt-bg-color)",
-    border: "var(--tt-bg-color-contrast)"
-  },
-  {
-    label: "Gray background",
-    value: "var(--tt-color-highlight-gray)",
-    border: "var(--tt-color-highlight-gray-contrast)"
-  },
-  {
-    label: "Brown background",
-    value: "var(--tt-color-highlight-brown)",
-    border: "var(--tt-color-highlight-brown-contrast)"
-  },
-  {
-    label: "Orange background",
-    value: "var(--tt-color-highlight-orange)",
-    border: "var(--tt-color-highlight-orange-contrast)"
-  },
-  {
-    label: "Yellow background",
-    value: "var(--tt-color-highlight-yellow)",
-    border: "var(--tt-color-highlight-yellow-contrast)"
-  },
-  {
-    label: "Green background",
-    value: "var(--tt-color-highlight-green)",
-    border: "var(--tt-color-highlight-green-contrast)"
-  },
-  {
-    label: "Blue background",
-    value: "var(--tt-color-highlight-blue)",
-    border: "var(--tt-color-highlight-blue-contrast)"
-  },
-  {
-    label: "Purple background",
-    value: "var(--tt-color-highlight-purple)",
-    border: "var(--tt-color-highlight-purple-contrast)"
-  },
-  {
-    label: "Pink background",
-    value: "var(--tt-color-highlight-pink)",
-    border: "var(--tt-color-highlight-pink-contrast)"
-  },
-  {
-    label: "Red background",
-    value: "var(--tt-color-highlight-red)",
-    border: "var(--tt-color-highlight-red-contrast)"
-  }
-];
-function pickHighlightColorsByValue(values) {
-  const colorMap = new Map(
-    HIGHLIGHT_COLORS.map((color) => [color.value, color])
-  );
-  return values.map((value) => colorMap.get(value)).filter((color) => !!color);
-}
-function canColorHighlight(editor) {
+// src/ui/blockquote-button/use-blockquote.ts
+var import_editor_utils20 = require("@kopexa/editor-utils");
+var import_icons19 = require("@kopexa/icons");
+var import_state7 = require("@tiptap/pm/state");
+var React15 = __toESM(require("react"));
+var BLOCKQUOTE_SHORTCUT_KEY = "mod+shift+b";
+function canToggleBlockquote(editor, turnInto = true) {
+  var _a;
   if (!editor || !editor.isEditable) return false;
-  if (!(0, import_editor_utils16.isMarkInSchema)("highlight", editor) || (0, import_editor_utils16.isNodeTypeSelected)(editor, ["image"]))
+  if (!(0, import_editor_utils20.isNodeInSchema)("blockquote", editor) || (0, import_editor_utils20.isNodeTypeSelected)(editor, ["image"]))
     return false;
-  return editor.can().setMark("highlight");
-}
-function isColorHighlightActive(editor, highlightColor) {
-  if (!editor || !editor.isEditable) return false;
-  return highlightColor ? editor.isActive("highlight", { color: highlightColor }) : editor.isActive("highlight");
+  if (!turnInto) {
+    return editor.can().toggleWrap("blockquote");
+  }
+  try {
+    const view = editor.view;
+    const state = view.state;
+    const selection = state.selection;
+    if (selection.empty || selection instanceof import_state7.TextSelection) {
+      const pos = (_a = (0, import_editor_utils20.findNodePosition)({
+        editor,
+        node: state.selection.$anchor.node(1)
+      })) == null ? void 0 : _a.pos;
+      if (!(0, import_editor_utils20.isValidPosition)(pos)) return false;
+    }
+    return true;
+  } catch {
+    return false;
+  }
 }
-function removeHighlight(editor) {
+function toggleBlockquote(editor) {
+  var _a, _b, _c;
   if (!editor || !editor.isEditable) return false;
-  if (!canColorHighlight(editor)) return false;
-  return editor.chain().focus().unsetMark("highlight").run();
+  if (!canToggleBlockquote(editor)) return false;
+  try {
+    const view = editor.view;
+    let state = view.state;
+    let tr = state.tr;
+    if (state.selection.empty || state.selection instanceof import_state7.TextSelection) {
+      const pos = (_a = (0, import_editor_utils20.findNodePosition)({
+        editor,
+        node: state.selection.$anchor.node(1)
+      })) == null ? void 0 : _a.pos;
+      if (!(0, import_editor_utils20.isValidPosition)(pos)) return false;
+      tr = tr.setSelection(import_state7.NodeSelection.create(state.doc, pos));
+      view.dispatch(tr);
+      state = view.state;
+    }
+    const selection = state.selection;
+    let chain = editor.chain().focus();
+    if (selection instanceof import_state7.NodeSelection) {
+      const firstChild = (_b = selection.node.firstChild) == null ? void 0 : _b.firstChild;
+      const lastChild = (_c = selection.node.lastChild) == null ? void 0 : _c.lastChild;
+      const from = firstChild ? selection.from + firstChild.nodeSize : selection.from + 1;
+      const to = lastChild ? selection.to - lastChild.nodeSize : selection.to - 1;
+      chain = chain.setTextSelection({ from, to }).clearNodes();
+    }
+    const toggle = editor.isActive("blockquote") ? chain.lift("blockquote") : chain.wrapIn("blockquote");
+    toggle.run();
+    editor.chain().focus().selectTextblockEnd().run();
+    return true;
+  } catch {
+    return false;
+  }
 }
 function shouldShowButton4(props) {
   const { editor, hideWhenUnavailable } = props;
   if (!editor || !editor.isEditable) return false;
-  if (!(0, import_editor_utils16.isMarkInSchema)("highlight", editor)) return false;
+  if (!(0, import_editor_utils20.isNodeInSchema)("blockquote", editor)) return false;
   if (hideWhenUnavailable && !editor.isActive("code")) {
-    return canColorHighlight(editor);
+    return canToggleBlockquote(editor);
   }
   return true;
 }
-function useColorHighlight(config) {
+function useBlockquote(config) {
   const {
     editor: providedEditor,
-    label,
-    highlightColor,
     hideWhenUnavailable = false,
-    onApplied
-  } = config;
-  const { editor } = (0, import_editor_utils16.useTiptapEditor)(providedEditor);
-  const isMobile = (0, import_use_is_mobile.useIsMobile)();
-  const [isVisible, setIsVisible] = React17.useState(true);
-  const canColorHighlightState = canColorHighlight(editor);
-  const isActive = isColorHighlightActive(editor, highlightColor);
-  React17.useEffect(() => {
+    onToggled
+  } = config || {};
+  const { editor } = (0, import_editor_utils20.useTiptapEditor)(providedEditor);
+  const [isVisible, setIsVisible] = React15.useState(true);
+  const canToggle3 = canToggleBlockquote(editor);
+  const isActive = (editor == null ? void 0 : editor.isActive("blockquote")) || false;
+  React15.useEffect(() => {
     if (!editor) return;
     const handleSelectionUpdate = () => {
       setIsVisible(shouldShowButton4({ editor, hideWhenUnavailable }));
@@ -6406,674 +6950,403 @@ function useColorHighlight(config) {
       editor.off("selectionUpdate", handleSelectionUpdate);
     };
   }, [editor, hideWhenUnavailable]);
-  const handleColorHighlight = React17.useCallback(() => {
-    if (!editor || !canColorHighlightState || !highlightColor || !label)
-      return false;
-    if (editor.state.storedMarks) {
-      const highlightMarkType = editor.schema.marks.highlight;
-      if (highlightMarkType) {
-        editor.view.dispatch(
-          editor.state.tr.removeStoredMark(highlightMarkType)
-        );
-      }
-    }
-    setTimeout(() => {
-      const success = editor.chain().focus().toggleMark("highlight", { color: highlightColor }).run();
-      if (success) {
-        onApplied == null ? void 0 : onApplied({ color: highlightColor, label });
-      }
-      return success;
-    }, 0);
-  }, [canColorHighlightState, highlightColor, editor, label, onApplied]);
-  const handleRemoveHighlight = React17.useCallback(() => {
-    const success = removeHighlight(editor);
+  const handleToggle = React15.useCallback(() => {
+    if (!editor) return false;
+    const success = toggleBlockquote(editor);
     if (success) {
-      onApplied == null ? void 0 : onApplied({ color: "", label: "Remove highlight" });
+      onToggled == null ? void 0 : onToggled();
     }
     return success;
-  }, [editor, onApplied]);
-  (0, import_react_hotkeys_hook.useHotkeys)(
-    COLOR_HIGHLIGHT_SHORTCUT_KEY,
-    (event) => {
-      event.preventDefault();
-      handleColorHighlight();
-    },
-    {
-      enabled: isVisible && canColorHighlightState,
-      enableOnContentEditable: !isMobile,
-      enableOnFormTags: true
-    }
-  );
+  }, [editor, onToggled]);
   return {
     isVisible,
     isActive,
-    handleColorHighlight,
-    handleRemoveHighlight,
-    canColorHighlight: canColorHighlightState,
-    label: label || `Highlight`,
-    shortcutKeys: COLOR_HIGHLIGHT_SHORTCUT_KEY,
-    Icon: import_icons17.HighlighterIcon
+    handleToggle,
+    canToggle: canToggle3,
+    label: "Blockquote",
+    shortcutKeys: BLOCKQUOTE_SHORTCUT_KEY,
+    Icon: import_icons19.BlockquoteIcon
   };
 }
 
-// src/ui/color-highlight-button/color-highlight-button.tsx
-var import_jsx_runtime23 = require("react/jsx-runtime");
-var ColorHighlightButton = ({
+// src/ui/blockquote-button/blockquote-button.tsx
+var import_jsx_runtime27 = require("react/jsx-runtime");
+var BlockquoteButton = ({
   editor: providedEditor,
-  highlightColor,
   text,
   hideWhenUnavailable = false,
-  onApplied,
+  onToggled,
   showShortcut = false,
   onClick,
   children,
-  style,
-  className,
   ...buttonProps
 }) => {
-  const { editor } = (0, import_editor_utils17.useTiptapEditor)(providedEditor);
+  const { editor } = (0, import_editor_utils21.useTiptapEditor)(providedEditor);
   const {
     isVisible,
-    canColorHighlight: canColorHighlight2,
+    canToggle: canToggle3,
     isActive,
-    handleColorHighlight,
+    handleToggle,
     label,
-    shortcutKeys
-  } = useColorHighlight({
+    shortcutKeys,
+    Icon
+  } = useBlockquote({
     editor,
-    highlightColor,
-    label: text || `Toggle highlight (${highlightColor})`,
     hideWhenUnavailable,
-    onApplied
+    onToggled
   });
-  const handleClick = (0, import_react43.useCallback)(
+  const handleClick = React16.useCallback(
     (event) => {
       onClick == null ? void 0 : onClick(event);
       if (event.defaultPrevented) return;
-      handleColorHighlight();
+      handleToggle();
     },
-    [handleColorHighlight, onClick]
-  );
-  const buttonStyle = (0, import_react43.useMemo)(
-    () => ({
-      ...style,
-      "--highlight-color": highlightColor
-    }),
-    [highlightColor, style]
+    [handleToggle, onClick]
   );
   if (!isVisible) {
     return null;
   }
-  const styles = (0, import_theme8.colorHighlightButton)();
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
-    import_toolbar6.ToolbarButton,
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+    import_toolbar7.ToolbarButton,
     {
       type: "button",
-      disabled: !canColorHighlight2,
-      "data-disabled": !canColorHighlight2,
       variant: "ghost",
       color: "default",
+      disabled: !canToggle3,
+      "data-disabled": !canToggle3,
       "data-active-state": isActive ? "on" : "off",
       tabIndex: -1,
-      "aria-label": label,
-      shortcutKeys,
+      "aria-label": "blockquote",
       "aria-pressed": isActive,
+      title: label,
+      shortcutKeys,
       onClick: handleClick,
-      style: buttonStyle,
-      className: styles.button({ className }),
-      isIconOnly: true,
+      isIconOnly: !text && !children,
       ...buttonProps,
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-          "span",
-          {
-            "data-active-state": isActive ? "on" : "off",
-            className: styles.mark()
-          }
-        ),
-        children || /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_jsx_runtime23.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-            "span",
-            {
-              style: { "--highlight-color": highlightColor }
-            }
-          ),
-          text
-        ] })
-      ]
+      children: children != null ? children : /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_jsx_runtime27.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Icon, {}),
+        text && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { children: text })
+      ] })
     }
   );
 };
 
-// src/ui/color-highlight-popover/color-highlight-popover.tsx
-var import_jsx_runtime24 = require("react/jsx-runtime");
-var ColorHighlightPopoverButton = ({
-  className,
-  children,
-  ...props
-}) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
-  import_button11.IconButton,
-  {
-    type: "button",
-    className,
-    variant: "ghost",
-    color: "default",
-    tabIndex: -1,
-    "aria-label": "Highlight text",
-    tooltip: "Highlight",
-    isIconOnly: !children,
-    ...props,
-    children: children != null ? children : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_icons18.HighlighterIcon, {})
-  }
-);
-function ColorHighlightPopoverContent({
-  editor,
-  colors = pickHighlightColorsByValue([
-    "var(--tt-color-highlight-green)",
-    "var(--tt-color-highlight-blue)",
-    "var(--tt-color-highlight-red)",
-    "var(--tt-color-highlight-purple)",
-    "var(--tt-color-highlight-yellow)"
-  ])
-}) {
-  const { handleRemoveHighlight } = useColorHighlight({ editor });
-  const containerRef = (0, import_react44.useRef)(null);
-  const menuItems = (0, import_react44.useMemo)(
-    () => [...colors, { label: "Remove highlight", value: "none" }],
-    [colors]
-  );
-  const { selectedIndex } = useMenuNavigation({
-    containerRef,
-    items: menuItems,
-    orientation: "both",
-    onSelect: (item) => {
-      if (!containerRef.current) return false;
-      const highlightedElement = containerRef.current.querySelector(
-        '[data-highlighted="true"]'
-      );
-      if (highlightedElement) highlightedElement.click();
-      if (item.value === "none") handleRemoveHighlight();
-    },
-    autoSelectFirstItem: false
-  });
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { ref: containerRef, className: "flex gap-1 items-center", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
-      "div",
-      {
-        className: "flex items-center gap-1 outline-none",
-        "data-orientation": "horizontal",
-        children: colors.map((color, index) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
-          ColorHighlightButton,
-          {
-            editor,
-            highlightColor: color.value,
-            "aria-label": `${color.label} highlight color`,
-            tabIndex: index === selectedIndex ? 0 : -1,
-            "data-highlighted": selectedIndex === index
-          },
-          color.value
-        ))
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_toolbar7.ToolbarSeparator, { orientation: "vertical" }),
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "tiptap-button-group", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
-      import_button11.IconButton,
-      {
-        onClick: handleRemoveHighlight,
-        "aria-label": "Remove highlight",
-        tabIndex: selectedIndex === colors.length ? 0 : -1,
-        type: "button",
-        role: "menuitem",
-        variant: "ghost",
-        color: "default",
-        "data-highlighted": selectedIndex === colors.length,
-        children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_icons18.BanIcon, {})
-      }
-    ) })
-  ] });
-}
-function ColorHighlightPopover({
-  editor: providedEditor,
-  colors = pickHighlightColorsByValue([
-    "var(--tt-color-highlight-green)",
-    "var(--tt-color-highlight-blue)",
-    "var(--tt-color-highlight-red)",
-    "var(--tt-color-highlight-purple)",
-    "var(--tt-color-highlight-yellow)"
-  ]),
-  hideWhenUnavailable = false,
-  onApplied,
-  ...props
-}) {
-  const { editor } = (0, import_editor_utils18.useTiptapEditor)(providedEditor);
-  const [isOpen, setIsOpen] = (0, import_react44.useState)(false);
-  const { isVisible, canColorHighlight: canColorHighlight2, isActive, label } = useColorHighlight({
-    editor,
-    hideWhenUnavailable,
-    onApplied
-  });
-  if (!isVisible) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_popover2.Popover.Root, { open: isOpen, onOpenChange: setIsOpen, spacing: "dense", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
-      import_popover2.Popover.Trigger,
-      {
-        render: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
-          ColorHighlightPopoverButton,
-          {
-            disabled: !canColorHighlight2,
-            "data-disabled": !canColorHighlight2,
-            "data-active-state": isActive ? "on" : "off",
-            "aria-pressed": isActive,
-            "aria-label": label,
-            title: label,
-            ...props
-          }
-        )
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_popover2.Popover.Content, { "aria-label": "Highlight colors", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(ColorHighlightPopoverContent, { editor, colors }) })
-  ] });
-}
+// src/ui/codeblock-button/code-block-button.tsx
+var import_editor_utils23 = require("@kopexa/editor-utils");
+var import_icons21 = require("@kopexa/icons");
+var import_toolbar8 = require("@kopexa/toolbar");
+var import_react51 = require("react");
 
-// src/ui/heading-dropdown-menu/index.tsx
-var import_button13 = require("@kopexa/button");
-var import_dropdown_menu = require("@kopexa/dropdown-menu");
-var import_editor_utils20 = require("@kopexa/editor-utils");
+// src/ui/codeblock-button/use-code-block.ts
+var import_editor_utils22 = require("@kopexa/editor-utils");
 var import_icons20 = require("@kopexa/icons");
-var import_react46 = require("@tiptap/react");
-var React19 = __toESM(require("react"));
-
-// src/ui/heading-button/index.tsx
-var import_button12 = require("@kopexa/button");
-var import_editor_utils19 = require("@kopexa/editor-utils");
-var import_icons19 = require("@kopexa/icons");
-var React18 = __toESM(require("react"));
-
-// src/ui/heading-button/utils.ts
-var import_react45 = require("@tiptap/react");
-var headingShortcutKeys = {
-  1: "Ctrl-Alt-1",
-  2: "Ctrl-Alt-2",
-  3: "Ctrl-Alt-3",
-  4: "Ctrl-Alt-4",
-  5: "Ctrl-Alt-5",
-  6: "Ctrl-Alt-6"
-};
-function canToggleHeading(editor, level) {
-  if (!editor) return false;
+var import_state8 = require("@tiptap/pm/state");
+var React17 = __toESM(require("react"));
+var CODE_BLOCK_SHORTCUT_KEY = "mod+alt+c";
+function canToggle2(editor, turnInto = true) {
+  var _a;
+  if (!editor || !editor.isEditable) return false;
+  if (!(0, import_editor_utils22.isNodeInSchema)("codeBlock", editor) || (0, import_editor_utils22.isNodeTypeSelected)(editor, ["image"]))
+    return false;
+  if (!turnInto) {
+    return editor.can().toggleNode("codeBlock", "paragraph");
+  }
   try {
-    return editor.can().toggleNode("heading", "paragraph", { level });
+    const view = editor.view;
+    const state = view.state;
+    const selection = state.selection;
+    if (selection.empty || selection instanceof import_state8.TextSelection) {
+      const pos = (_a = (0, import_editor_utils22.findNodePosition)({
+        editor,
+        node: state.selection.$anchor.node(1)
+      })) == null ? void 0 : _a.pos;
+      if (!(0, import_editor_utils22.isValidPosition)(pos)) return false;
+    }
+    return true;
   } catch {
     return false;
   }
 }
-function isHeadingActive(editor, level) {
-  if (!editor) return false;
-  return editor.isActive("heading", { level });
-}
-function toggleHeading(editor, level) {
-  if (!editor) return;
-  if (editor.isActive("heading", { level })) {
-    editor.chain().focus().setNode("paragraph").run();
-  } else {
-    editor.chain().focus().toggleNode("heading", "paragraph", { level }).run();
-  }
-}
-function isHeadingButtonDisabled(editor, level, userDisabled = false) {
-  if (!editor) return true;
-  if (userDisabled) return true;
-  if (!canToggleHeading(editor, level)) return true;
-  return false;
-}
-function shouldShowHeadingButton(params) {
-  const { editor, hideWhenUnavailable, headingInSchema } = params;
-  if (!headingInSchema || !editor) {
+function toggleCodeBlock(editor) {
+  var _a, _b, _c;
+  if (!editor || !editor.isEditable) return false;
+  if (!canToggle2(editor)) return false;
+  try {
+    const view = editor.view;
+    let state = view.state;
+    let tr = state.tr;
+    if (state.selection.empty || state.selection instanceof import_state8.TextSelection) {
+      const pos = (_a = (0, import_editor_utils22.findNodePosition)({
+        editor,
+        node: state.selection.$anchor.node(1)
+      })) == null ? void 0 : _a.pos;
+      if (!(0, import_editor_utils22.isValidPosition)(pos)) return false;
+      tr = tr.setSelection(import_state8.NodeSelection.create(state.doc, pos));
+      view.dispatch(tr);
+      state = view.state;
+    }
+    const selection = state.selection;
+    let chain = editor.chain().focus();
+    if (selection instanceof import_state8.NodeSelection) {
+      const firstChild = (_b = selection.node.firstChild) == null ? void 0 : _b.firstChild;
+      const lastChild = (_c = selection.node.lastChild) == null ? void 0 : _c.lastChild;
+      const from = firstChild ? selection.from + firstChild.nodeSize : selection.from + 1;
+      const to = lastChild ? selection.to - lastChild.nodeSize : selection.to - 1;
+      chain = chain.setTextSelection({ from, to }).clearNodes();
+    }
+    const toggle = editor.isActive("codeBlock") ? chain.setNode("paragraph") : chain.toggleNode("codeBlock", "paragraph");
+    toggle.run();
+    editor.chain().focus().selectTextblockEnd().run();
+    return true;
+  } catch {
     return false;
   }
-  if (hideWhenUnavailable) {
-    if ((0, import_react45.isNodeSelection)(editor.state.selection)) {
-      return false;
-    }
+}
+function shouldShowButton5(props) {
+  const { editor, hideWhenUnavailable } = props;
+  if (!editor || !editor.isEditable) return false;
+  if (!(0, import_editor_utils22.isNodeInSchema)("codeBlock", editor)) return false;
+  if (hideWhenUnavailable && !editor.isActive("code")) {
+    return canToggle2(editor);
   }
   return true;
 }
-function getFormattedHeadingName(level) {
-  return `Heading ${level}`;
-}
-
-// src/ui/heading-button/index.tsx
-var import_jsx_runtime25 = require("react/jsx-runtime");
-var headingIcons = {
-  1: import_icons19.HeadingOneIcon,
-  2: import_icons19.HeadingTwoIcon,
-  3: import_icons19.HeadingThreeIcon,
-  4: import_icons19.HeadingFourIcon,
-  5: import_icons19.HeadingFiveIcon,
-  6: import_icons19.HeadingSixIcon
-};
-function useHeadingState(editor, level, disabled = false) {
-  const headingInSchema = (0, import_editor_utils19.isNodeInSchema)("heading", editor);
-  const isDisabled = isHeadingButtonDisabled(editor, level, disabled);
-  const isActive = isHeadingActive(editor, level);
-  const Icon = headingIcons[level];
-  const shortcutKey = headingShortcutKeys[level];
-  const formattedName = getFormattedHeadingName(level);
+function useCodeBlock(config) {
+  const {
+    editor: providedEditor,
+    hideWhenUnavailable = false,
+    onToggled
+  } = config || {};
+  const { editor } = (0, import_editor_utils22.useTiptapEditor)(providedEditor);
+  const [isVisible, setIsVisible] = React17.useState(true);
+  const canToggleState = canToggle2(editor);
+  const isActive = (editor == null ? void 0 : editor.isActive("codeBlock")) || false;
+  React17.useEffect(() => {
+    if (!editor) return;
+    const handleSelectionUpdate = () => {
+      setIsVisible(shouldShowButton5({ editor, hideWhenUnavailable }));
+    };
+    handleSelectionUpdate();
+    editor.on("selectionUpdate", handleSelectionUpdate);
+    return () => {
+      editor.off("selectionUpdate", handleSelectionUpdate);
+    };
+  }, [editor, hideWhenUnavailable]);
+  const handleToggle = React17.useCallback(() => {
+    if (!editor) return false;
+    const success = toggleCodeBlock(editor);
+    if (success) {
+      onToggled == null ? void 0 : onToggled();
+    }
+    return success;
+  }, [editor, onToggled]);
   return {
-    headingInSchema,
-    isDisabled,
+    isVisible,
     isActive,
-    Icon,
-    shortcutKey,
-    formattedName
+    handleToggle,
+    canToggle: canToggleState,
+    label: "Code Block",
+    shortcutKeys: CODE_BLOCK_SHORTCUT_KEY,
+    Icon: import_icons20.CodeblockIcon
   };
 }
-var HeadingButton = ({
+
+// src/ui/codeblock-button/code-block-button.tsx
+var import_jsx_runtime28 = require("react/jsx-runtime");
+var CodeBlockButton = ({
   editor: providedEditor,
-  level,
   text,
   hideWhenUnavailable = false,
-  className = "",
-  disabled,
+  onToggled,
+  showShortcut = false,
   onClick,
   children,
-  ref,
   ...buttonProps
 }) => {
-  const { editor } = (0, import_editor_utils19.useTiptapEditor)(providedEditor);
-  const {
-    headingInSchema,
-    isDisabled,
-    isActive,
-    Icon,
-    shortcutKey,
-    formattedName
-  } = useHeadingState(editor, level, disabled);
-  const handleClick = React18.useCallback(
-    (e) => {
-      onClick == null ? void 0 : onClick(e);
-      if (!e.defaultPrevented && !isDisabled && editor) {
-        toggleHeading(editor, level);
-      }
+  const { editor } = (0, import_editor_utils23.useTiptapEditor)(providedEditor);
+  const { isVisible, canToggle: canToggle3, isActive, handleToggle, label, shortcutKeys } = useCodeBlock({
+    editor,
+    hideWhenUnavailable,
+    onToggled
+  });
+  const handleClick = (0, import_react51.useCallback)(
+    (event) => {
+      onClick == null ? void 0 : onClick(event);
+      if (event.defaultPrevented) return;
+      handleToggle();
     },
-    [onClick, isDisabled, editor, level]
+    [handleToggle, onClick]
   );
-  const show = React18.useMemo(() => {
-    return shouldShowHeadingButton({
-      editor,
-      level,
-      hideWhenUnavailable,
-      headingInSchema
-    });
-  }, [editor, level, hideWhenUnavailable, headingInSchema]);
-  if (!show || !editor || !editor.isEditable) {
+  if (!isVisible) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
-    import_button12.Button,
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+    import_toolbar8.ToolbarButton,
     {
       type: "button",
-      className: className.trim(),
-      disabled: isDisabled,
       variant: "ghost",
       color: "default",
+      disabled: !canToggle3,
+      "data-disabled": !canToggle3,
       "data-active-state": isActive ? "on" : "off",
-      "data-disabled": isDisabled,
       tabIndex: -1,
-      "aria-label": formattedName,
+      "aria-label": "codeBlock",
       "aria-pressed": isActive,
-      tooltip: formattedName,
-      shortcutKeys: shortcutKey,
+      title: label,
+      shortcutKeys,
       onClick: handleClick,
-      startContent: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Icon, {}),
+      isIconOnly: !text && !children,
       ...buttonProps,
-      ref,
-      children: children || text
+      children: children != null ? children : /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_jsx_runtime28.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_icons21.CodeblockIcon, {}),
+        text && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { children: text })
+      ] })
     }
   );
 };
 
-// src/ui/heading-dropdown-menu/index.tsx
-var import_jsx_runtime26 = require("react/jsx-runtime");
-function HeadingDropdownMenu({
-  editor: providedEditor,
-  levels = [1, 2, 3, 4, 5, 6],
-  hideWhenUnavailable = false,
-  onOpenChange,
-  ...props
-}) {
-  var _a;
-  const [isOpen, setIsOpen] = React19.useState(false);
-  const { editor } = (0, import_editor_utils20.useTiptapEditor)(providedEditor);
-  const headingInSchema = (0, import_editor_utils20.isNodeInSchema)("heading", editor);
-  const handleOnOpenChange = React19.useCallback(
-    (open) => {
-      setIsOpen(open);
-      onOpenChange == null ? void 0 : onOpenChange(open);
-    },
-    [onOpenChange]
-  );
-  const getActiveIcon = React19.useCallback(() => {
-    if (!editor) return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_icons20.HeadingIcon, {});
-    const activeLevel = levels.find(
-      (level) => editor.isActive("heading", { level })
-    );
-    if (!activeLevel) return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_icons20.HeadingIcon, {});
-    const ActiveIcon = headingIcons[activeLevel];
-    return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(ActiveIcon, {});
-  }, [editor, levels]);
-  const canToggleAnyHeading = React19.useCallback(() => {
-    if (!editor) return false;
-    return levels.some(
-      (level) => editor.can().toggleNode("heading", "paragraph", { level })
-    );
-  }, [editor, levels]);
-  const isDisabled = !canToggleAnyHeading();
-  const isAnyHeadingActive = (_a = editor == null ? void 0 : editor.isActive("heading")) != null ? _a : false;
-  const show = React19.useMemo(() => {
-    if (!headingInSchema || !editor) {
-      return false;
-    }
-    if (hideWhenUnavailable) {
-      if ((0, import_react46.isNodeSelection)(editor.state.selection) || !canToggleAnyHeading()) {
-        return false;
-      }
-    }
-    return true;
-  }, [headingInSchema, editor, hideWhenUnavailable, canToggleAnyHeading]);
-  if (!show || !editor || !editor.isEditable) {
-    return null;
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_dropdown_menu.DropdownMenu.Root, { open: isOpen, onOpenChange: handleOnOpenChange, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_dropdown_menu.DropdownMenu.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
-      import_button13.Button,
-      {
-        type: "button",
-        disabled: isDisabled,
-        variant: "ghost",
-        color: "default",
-        "data-active-state": isAnyHeadingActive ? "on" : "off",
-        "data-disabled": isDisabled,
-        tabIndex: -1,
-        "aria-label": "Format text as heading",
-        "aria-pressed": isAnyHeadingActive,
-        tooltip: "Heading",
-        endContent: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_icons20.ChevronDownIcon, {}),
-        ...props,
-        children: getActiveIcon()
-      }
-    ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_dropdown_menu.DropdownMenu.Content, { children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_dropdown_menu.DropdownMenu.Group, { children: levels.map((level) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_dropdown_menu.DropdownMenu.Item, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
-      HeadingButton,
-      {
-        editor,
-        level,
-        text: getFormattedHeadingName(level),
-        tooltip: "",
-        fullWidth: true,
-        spacing: "start"
-      }
-    ) }, `heading-${level}`)) }) })
-  ] });
-}
-
-// src/ui/list-dropdown-menu/index.tsx
+// src/ui/heading-button/index.tsx
 var import_button15 = require("@kopexa/button");
-var import_dropdown_menu2 = require("@kopexa/dropdown-menu");
-var import_editor_utils22 = require("@kopexa/editor-utils");
+var import_editor_utils24 = require("@kopexa/editor-utils");
 var import_icons22 = require("@kopexa/icons");
-var import_react49 = require("@tiptap/react");
-var import_react50 = require("react");
+var React18 = __toESM(require("react"));
 
-// src/ui/list-button/index.tsx
-var import_button14 = require("@kopexa/button");
-var import_editor_utils21 = require("@kopexa/editor-utils");
-var import_icons21 = require("@kopexa/icons");
-var import_react47 = require("@tiptap/react");
-var import_react48 = require("react");
-var import_jsx_runtime27 = require("react/jsx-runtime");
-var listOptions = [
-  {
-    label: "Bullet List",
-    type: "bulletList",
-    icon: import_icons21.ListIcon
-  },
-  {
-    label: "Ordered List",
-    type: "orderedList",
-    icon: import_icons21.ListOrderedIcon
-  },
-  {
-    label: "Task List",
-    type: "taskList",
-    icon: import_icons21.ListTodoIcon
-  }
-];
-var listShortcutKeys = {
-  bulletList: "Ctrl-Shift-8",
-  orderedList: "Ctrl-Shift-7",
-  taskList: "Ctrl-Shift-9"
+// src/ui/heading-button/utils.ts
+var import_react52 = require("@tiptap/react");
+var headingShortcutKeys = {
+  1: "Ctrl-Alt-1",
+  2: "Ctrl-Alt-2",
+  3: "Ctrl-Alt-3",
+  4: "Ctrl-Alt-4",
+  5: "Ctrl-Alt-5",
+  6: "Ctrl-Alt-6"
 };
-function canToggleList(editor, type) {
-  if (!editor) {
+function canToggleHeading(editor, level) {
+  if (!editor) return false;
+  try {
+    return editor.can().toggleNode("heading", "paragraph", { level });
+  } catch {
     return false;
   }
-  switch (type) {
-    case "bulletList":
-      return editor.can().toggleBulletList();
-    case "orderedList":
-      return editor.can().toggleOrderedList();
-    case "taskList":
-      return editor.can().toggleList("taskList", "taskItem");
-    default:
-      return false;
-  }
 }
-function isListActive(editor, type) {
+function isHeadingActive(editor, level) {
   if (!editor) return false;
-  switch (type) {
-    case "bulletList":
-      return editor.isActive("bulletList");
-    case "orderedList":
-      return editor.isActive("orderedList");
-    case "taskList":
-      return editor.isActive("taskList");
-    default:
-      return false;
-  }
+  return editor.isActive("heading", { level });
 }
-function toggleList(editor, type) {
+function toggleHeading(editor, level) {
   if (!editor) return;
-  switch (type) {
-    case "bulletList":
-      editor.chain().focus().toggleBulletList().run();
-      break;
-    case "orderedList":
-      editor.chain().focus().toggleOrderedList().run();
-      break;
-    case "taskList":
-      editor.chain().focus().toggleList("taskList", "taskItem").run();
-      break;
+  if (editor.isActive("heading", { level })) {
+    editor.chain().focus().setNode("paragraph").run();
+  } else {
+    editor.chain().focus().toggleNode("heading", "paragraph", { level }).run();
   }
 }
-function getListOption(type) {
-  return listOptions.find((option) => option.type === type);
+function isHeadingButtonDisabled(editor, level, userDisabled = false) {
+  if (!editor) return true;
+  if (userDisabled) return true;
+  if (!canToggleHeading(editor, level)) return true;
+  return false;
 }
-function shouldShowListButton(params) {
-  const { editor, type, hideWhenUnavailable, listInSchema } = params;
-  if (!listInSchema || !editor) {
+function shouldShowHeadingButton(params) {
+  const { editor, hideWhenUnavailable, headingInSchema } = params;
+  if (!headingInSchema || !editor) {
     return false;
   }
   if (hideWhenUnavailable) {
-    if ((0, import_react47.isNodeSelection)(editor.state.selection) || !canToggleList(editor, type)) {
+    if ((0, import_react52.isNodeSelection)(editor.state.selection)) {
       return false;
     }
   }
   return true;
 }
-function useListState(editor, type) {
-  const listInSchema = (0, import_editor_utils21.isNodeInSchema)(type, editor);
-  const listOption = getListOption(type);
-  const isActive = isListActive(editor, type);
-  const shortcutKey = listShortcutKeys[type];
+function getFormattedHeadingName(level) {
+  return `Heading ${level}`;
+}
+
+// src/ui/heading-button/index.tsx
+var import_jsx_runtime29 = require("react/jsx-runtime");
+var headingIcons = {
+  1: import_icons22.HeadingOneIcon,
+  2: import_icons22.HeadingTwoIcon,
+  3: import_icons22.HeadingThreeIcon,
+  4: import_icons22.HeadingFourIcon,
+  5: import_icons22.HeadingFiveIcon,
+  6: import_icons22.HeadingSixIcon
+};
+function useHeadingState(editor, level, disabled = false) {
+  const headingInSchema = (0, import_editor_utils24.isNodeInSchema)("heading", editor);
+  const isDisabled = isHeadingButtonDisabled(editor, level, disabled);
+  const isActive = isHeadingActive(editor, level);
+  const Icon = headingIcons[level];
+  const shortcutKey = headingShortcutKeys[level];
+  const formattedName = getFormattedHeadingName(level);
   return {
-    listInSchema,
-    listOption,
+    headingInSchema,
+    isDisabled,
     isActive,
-    shortcutKey
+    Icon,
+    shortcutKey,
+    formattedName
   };
 }
-var ListButton = ({
+var HeadingButton = ({
   editor: providedEditor,
-  type,
+  level,
+  text,
   hideWhenUnavailable = false,
   className = "",
+  disabled,
   onClick,
-  text,
   children,
   ref,
   ...buttonProps
 }) => {
-  const { editor } = (0, import_editor_utils21.useTiptapEditor)(providedEditor);
-  const { listInSchema, listOption, isActive, shortcutKey } = useListState(
-    editor,
-    type
-  );
-  const Icon = (listOption == null ? void 0 : listOption.icon) || import_icons21.ListIcon;
-  const handleClick = (0, import_react48.useCallback)(
+  const { editor } = (0, import_editor_utils24.useTiptapEditor)(providedEditor);
+  const {
+    headingInSchema,
+    isDisabled,
+    isActive,
+    Icon,
+    shortcutKey,
+    formattedName
+  } = useHeadingState(editor, level, disabled);
+  const handleClick = React18.useCallback(
     (e) => {
       onClick == null ? void 0 : onClick(e);
-      if (!e.defaultPrevented && editor) {
-        toggleList(editor, type);
+      if (!e.defaultPrevented && !isDisabled && editor) {
+        toggleHeading(editor, level);
       }
     },
-    [onClick, editor, type]
+    [onClick, isDisabled, editor, level]
   );
-  const show = (0, import_react48.useMemo)(() => {
-    return shouldShowListButton({
+  const show = React18.useMemo(() => {
+    return shouldShowHeadingButton({
       editor,
-      type,
+      level,
       hideWhenUnavailable,
-      listInSchema
+      headingInSchema
     });
-  }, [editor, type, hideWhenUnavailable, listInSchema]);
+  }, [editor, level, hideWhenUnavailable, headingInSchema]);
   if (!show || !editor || !editor.isEditable) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
-    import_button14.Button,
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+    import_button15.Button,
     {
       type: "button",
       className: className.trim(),
+      disabled: isDisabled,
       variant: "ghost",
       color: "default",
       "data-active-state": isActive ? "on" : "off",
+      "data-disabled": isDisabled,
       tabIndex: -1,
-      "aria-label": (listOption == null ? void 0 : listOption.label) || type,
+      "aria-label": formattedName,
       "aria-pressed": isActive,
-      tooltip: (listOption == null ? void 0 : listOption.label) || type,
+      tooltip: formattedName,
       shortcutKeys: shortcutKey,
       onClick: handleClick,
-      startContent: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Icon, {}),
+      startContent: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Icon, {}),
       ...buttonProps,
       ref,
       children: children || text
@@ -7081,162 +7354,189 @@ var ListButton = ({
   );
 };
 
-// src/ui/list-dropdown-menu/index.tsx
-var import_jsx_runtime28 = require("react/jsx-runtime");
-function canToggleAnyList(editor, listTypes) {
+// src/ui/text-button/text-button.tsx
+var import_button16 = require("@kopexa/button");
+var import_chip = require("@kopexa/chip");
+var import_editor_utils26 = require("@kopexa/editor-utils");
+var import_shared_utils = require("@kopexa/shared-utils");
+var import_react54 = require("react");
+
+// src/ui/text-button/use-text.ts
+var import_editor_utils25 = require("@kopexa/editor-utils");
+var import_icons23 = require("@kopexa/icons");
+var import_use_is_mobile2 = require("@kopexa/use-is-mobile");
+var import_state9 = require("@tiptap/pm/state");
+var import_react53 = require("react");
+var import_react_hotkeys_hook2 = require("react-hotkeys-hook");
+var TEXT_SHORTCUT_KEY = "mod+alt+0";
+function canToggleText(editor, turnInto = true) {
   if (!editor) return false;
-  return listTypes.some((type) => canToggleList(editor, type));
+  if (!editor.schema.nodes.paragraph) return false;
+  if (!turnInto) {
+    return editor.can().setNode("paragraph");
+  }
+  if (!(0, import_editor_utils25.selectionWithinConvertibleTypes)(editor, [
+    "paragraph",
+    "heading",
+    "bulletList",
+    "orderedList",
+    "taskList",
+    "blockquote",
+    "codeBlock"
+  ]))
+    return false;
+  return editor.can().setNode("paragraph") || editor.can().clearNodes();
 }
-function isAnyListActive(editor, listTypes) {
+function isParagraphActive(editor) {
   if (!editor) return false;
-  return listTypes.some((type) => isListActive(editor, type));
-}
-function getFilteredListOptions(availableTypes) {
-  return listOptions.filter(
-    (option) => !option.type || availableTypes.includes(option.type)
-  );
+  return editor.isActive("paragraph");
 }
-function shouldShowListDropdown(params) {
-  const { editor, hideWhenUnavailable, listInSchema, canToggleAny } = params;
-  if (!listInSchema || !editor) {
+function toggleParagraph(editor) {
+  var _a, _b, _c;
+  if (!editor || !editor.isEditable) return false;
+  if (!canToggleText(editor)) return false;
+  try {
+    const view = editor.view;
+    let state = view.state;
+    let tr = state.tr;
+    const blocks = (0, import_editor_utils25.getSelectedBlockNodes)(editor);
+    const isPossibleToTurnInto = (0, import_editor_utils25.selectionWithinConvertibleTypes)(editor, [
+      "paragraph",
+      "heading",
+      "bulletList",
+      "orderedList",
+      "taskList",
+      "blockquote",
+      "codeBlock"
+    ]) && blocks.length === 1;
+    if ((state.selection.empty || state.selection instanceof import_state9.TextSelection) && isPossibleToTurnInto) {
+      const pos = (_a = (0, import_editor_utils25.findNodePosition)({
+        editor,
+        node: state.selection.$anchor.node(1)
+      })) == null ? void 0 : _a.pos;
+      if (!(0, import_editor_utils25.isValidPosition)(pos)) return false;
+      tr = tr.setSelection(import_state9.NodeSelection.create(state.doc, pos));
+      view.dispatch(tr);
+      state = view.state;
+    }
+    const selection = state.selection;
+    let chain = editor.chain().focus();
+    if (selection instanceof import_state9.NodeSelection) {
+      const firstChild = (_b = selection.node.firstChild) == null ? void 0 : _b.firstChild;
+      const lastChild = (_c = selection.node.lastChild) == null ? void 0 : _c.lastChild;
+      const from = firstChild ? selection.from + firstChild.nodeSize : selection.from + 1;
+      const to = lastChild ? selection.to - lastChild.nodeSize : selection.to - 1;
+      const resolvedFrom = state.doc.resolve(from);
+      const resolvedTo = state.doc.resolve(to);
+      chain = chain.setTextSelection(import_state9.TextSelection.between(resolvedFrom, resolvedTo)).clearNodes();
+    }
+    if (!editor.isActive("paragraph")) {
+      chain.setNode("paragraph").run();
+    }
+    editor.chain().focus().selectTextblockEnd().run();
+    return true;
+  } catch {
     return false;
   }
-  if (hideWhenUnavailable) {
-    if ((0, import_react49.isNodeSelection)(editor.state.selection) || !canToggleAny) {
-      return false;
-    }
+}
+function shouldShowButton6(props) {
+  const { editor, hideWhenUnavailable } = props;
+  if (!editor || !editor.isEditable) return false;
+  if (!hideWhenUnavailable) {
+    return true;
+  }
+  if (!(0, import_editor_utils25.isNodeInSchema)("paragraph", editor)) return false;
+  if (!editor.isActive("code")) {
+    return canToggleText(editor);
   }
   return true;
 }
-function useListDropdownState(editor, availableTypes) {
-  const [isOpen, setIsOpen] = (0, import_react50.useState)(false);
-  const listInSchema = availableTypes.some(
-    (type) => (0, import_editor_utils22.isNodeInSchema)(type, editor)
-  );
-  const filteredLists = (0, import_react50.useMemo)(
-    () => getFilteredListOptions(availableTypes),
-    [availableTypes]
-  );
-  const canToggleAny = canToggleAnyList(editor, availableTypes);
-  const isAnyActive = isAnyListActive(editor, availableTypes);
-  const handleOpenChange = (0, import_react50.useCallback)(
-    (open, callback) => {
-      setIsOpen(open);
-      callback == null ? void 0 : callback(open);
-    },
-    []
-  );
-  return {
-    isOpen,
-    setIsOpen,
-    listInSchema,
-    filteredLists,
-    canToggleAny,
-    isAnyActive,
-    handleOpenChange
-  };
-}
-function useActiveListIcon(editor, filteredLists) {
-  return (0, import_react50.useCallback)(() => {
-    const activeOption = filteredLists.find(
-      (option) => isListActive(editor, option.type)
-    );
-    return activeOption ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(activeOption.icon, {}) : /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_icons22.ListIcon, {});
-  }, [editor, filteredLists]);
-}
-function ListDropdownMenu({
-  editor: providedEditor,
-  types = ["bulletList", "orderedList", "taskList"],
-  hideWhenUnavailable = false,
-  onOpenChange,
-  ...props
-}) {
-  const { editor } = (0, import_editor_utils22.useTiptapEditor)(providedEditor);
+function useText(config) {
   const {
-    isOpen,
-    listInSchema,
-    filteredLists,
-    canToggleAny,
-    isAnyActive,
-    handleOpenChange
-  } = useListDropdownState(editor, types);
-  const getActiveIcon = useActiveListIcon(editor, filteredLists);
-  const show = (0, import_react50.useMemo)(() => {
-    return shouldShowListDropdown({
-      editor,
-      listTypes: types,
-      hideWhenUnavailable,
-      listInSchema,
-      canToggleAny
-    });
-  }, [editor, types, hideWhenUnavailable, listInSchema, canToggleAny]);
-  const handleOnOpenChange = (0, import_react50.useCallback)(
-    (open) => handleOpenChange(open, onOpenChange),
-    [handleOpenChange, onOpenChange]
-  );
-  if (!show || !editor || !editor.isEditable) {
-    return null;
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_dropdown_menu2.DropdownMenu.Root, { open: isOpen, onOpenChange: handleOnOpenChange, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_dropdown_menu2.DropdownMenu.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
-      import_button15.Button,
-      {
-        type: "button",
-        variant: "ghost",
-        color: "default",
-        "data-active-state": isAnyActive ? "on" : "off",
-        tabIndex: -1,
-        "aria-label": "List options",
-        tooltip: "List",
-        endContent: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_icons22.ChevronDownIcon, {}),
-        ...props,
-        children: getActiveIcon()
-      }
-    ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_dropdown_menu2.DropdownMenu.Content, { children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_dropdown_menu2.DropdownMenu.Group, { children: filteredLists.map((option) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_dropdown_menu2.DropdownMenu.Item, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
-      ListButton,
-      {
-        editor,
-        type: option.type,
-        text: option.label,
-        hideWhenUnavailable,
-        tooltip: "",
-        fullWidth: true,
-        spacing: "start"
-      }
-    ) }, option.type)) }) })
-  ] });
+    editor: providedEditor,
+    hideWhenUnavailable = false,
+    onToggled
+  } = config || {};
+  const { editor } = (0, import_editor_utils25.useTiptapEditor)(providedEditor);
+  const isMobile = (0, import_use_is_mobile2.useIsMobile)();
+  const [isVisible, setIsVisible] = (0, import_react53.useState)(true);
+  const canToggle3 = canToggleText(editor);
+  const isActive = isParagraphActive(editor);
+  (0, import_react53.useEffect)(() => {
+    if (!editor) return;
+    const handleSelectionUpdate = () => {
+      setIsVisible(shouldShowButton6({ editor, hideWhenUnavailable }));
+    };
+    handleSelectionUpdate();
+    editor.on("selectionUpdate", handleSelectionUpdate);
+    return () => {
+      editor.off("selectionUpdate", handleSelectionUpdate);
+    };
+  }, [editor, hideWhenUnavailable]);
+  const handleToggle = (0, import_react53.useCallback)(() => {
+    if (!editor) return false;
+    const success = toggleParagraph(editor);
+    if (success) {
+      onToggled == null ? void 0 : onToggled();
+    }
+    return success;
+  }, [editor, onToggled]);
+  (0, import_react_hotkeys_hook2.useHotkeys)(
+    TEXT_SHORTCUT_KEY,
+    (event) => {
+      event.preventDefault();
+      handleToggle();
+    },
+    {
+      enabled: isVisible && canToggle3,
+      enableOnContentEditable: !isMobile,
+      enableOnFormTags: true
+    }
+  );
+  return {
+    isVisible,
+    isActive,
+    handleToggle,
+    canToggle: canToggle3,
+    label: "Text",
+    shortcutKeys: TEXT_SHORTCUT_KEY,
+    Icon: import_icons23.TypeIcon
+  };
 }
 
-// src/ui/table-button/index.tsx
-var import_editor_utils23 = require("@kopexa/editor-utils");
-var import_toolbar8 = require("@kopexa/toolbar");
-var import_react51 = require("react");
-var import_jsx_runtime29 = require("react/jsx-runtime");
-var TableButton = ({
+// src/ui/text-button/text-button.tsx
+var import_jsx_runtime30 = require("react/jsx-runtime");
+function TextShortcutBadge({
+  shortcutKeys = TEXT_SHORTCUT_KEY
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_chip.Chip, { children: (0, import_shared_utils.parseShortcutKeys)({ shortcutKeys }) });
+}
+var TextButton = ({
   editor: providedEditor,
   text,
   hideWhenUnavailable = false,
   onToggled,
+  showShortcut = false,
   onClick,
   children,
+  ref,
   ...buttonProps
 }) => {
-  const { editor } = (0, import_editor_utils23.useTiptapEditor)(providedEditor);
+  const { editor } = (0, import_editor_utils26.useTiptapEditor)(providedEditor);
   const {
     isVisible,
     canToggle: canToggle3,
     isActive,
     handleToggle,
     label,
-    //     shortcutKeys,
+    shortcutKeys,
     Icon
-  } = useTableBlock({
+  } = useText({
     editor,
     hideWhenUnavailable,
     onToggled
   });
-  const handleClick = (0, import_react51.useCallback)(
+  const handleClick = (0, import_react54.useCallback)(
     (event) => {
       onClick == null ? void 0 : onClick(event);
       if (event.defaultPrevented) return;
@@ -7247,198 +7547,343 @@ var TableButton = ({
   if (!isVisible) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
-    import_toolbar8.ToolbarButton,
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+    import_button16.Button,
     {
       type: "button",
       variant: "ghost",
       color: "default",
       "data-active-state": isActive ? "on" : "off",
+      tabIndex: -1,
       disabled: !canToggle3,
       "data-disabled": !canToggle3,
-      tabIndex: -1,
       "aria-label": label,
       "aria-pressed": isActive,
-      title: label,
+      tooltip: "Text",
+      shortcutKeys,
       onClick: handleClick,
-      isIconOnly: !text && !children,
+      startContent: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Icon, {}),
       ...buttonProps,
-      children: children || /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_jsx_runtime29.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Icon, {}),
-        text && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { children: text })
+      ref,
+      children: children != null ? children : /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_jsx_runtime30.Fragment, { children: [
+        text,
+        showShortcut && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(TextShortcutBadge, { shortcutKeys })
       ] })
     }
   );
 };
 
-// src/ui/text-align-button/text-align-button.tsx
-var import_button16 = require("@kopexa/button");
-var import_editor_utils25 = require("@kopexa/editor-utils");
-var import_react53 = require("react");
-
-// src/ui/text-align-button/use-text-align.ts
-var import_editor_utils24 = require("@kopexa/editor-utils");
-var import_icons23 = require("@kopexa/icons");
-var import_react52 = require("react");
-var TEXT_ALIGN_SHORTCUT_KEYS = {
-  left: "mod+shift+l",
-  center: "mod+shift+e",
-  right: "mod+shift+r",
-  justify: "mod+shift+j"
-};
-var textAlignIcons = {
-  left: import_icons23.AlignLeftIcon,
-  center: import_icons23.AlignCenterIcon,
-  right: import_icons23.AlignRightIcon,
-  justify: import_icons23.AlignJustifyIcon
-};
-var textAlignLabels = {
-  left: "Align left",
-  center: "Align center",
-  right: "Align right",
-  justify: "Align justify"
-};
-function canSetTextAlign(editor, align) {
+// src/ui/turn-into-dropdown/use-turn-into-dropdown.ts
+var import_editor_utils27 = require("@kopexa/editor-utils");
+var import_icons24 = require("@kopexa/icons");
+var import_state10 = require("@tiptap/pm/state");
+var import_react55 = require("react");
+var TURN_INTO_BLOCKS = [
+  "paragraph",
+  "heading",
+  "bulletList",
+  "orderedList",
+  "taskList",
+  "blockquote",
+  "codeBlock"
+];
+var blockTypeOptions = [
+  {
+    type: "paragraph",
+    label: "Text",
+    isActive: (editor) => editor.isActive("paragraph") && !editor.isActive("heading") && !editor.isActive("bulletList") && !editor.isActive("orderedList") && !editor.isActive("taskList") && !editor.isActive("blockquote") && !editor.isActive("codeBlock")
+  },
+  {
+    type: "heading",
+    label: "Heading 1",
+    level: 1,
+    isActive: (editor) => editor.isActive("heading", { level: 1 })
+  },
+  {
+    type: "heading",
+    label: "Heading 2",
+    level: 2,
+    isActive: (editor) => editor.isActive("heading", { level: 2 })
+  },
+  {
+    type: "heading",
+    label: "Heading 3",
+    level: 3,
+    isActive: (editor) => editor.isActive("heading", { level: 3 })
+  },
+  {
+    type: "heading",
+    label: "Heading 4",
+    level: 4,
+    isActive: (editor) => editor.isActive("heading", { level: 4 })
+  },
+  {
+    type: "bulletList",
+    label: "Bulleted list",
+    isActive: (editor) => editor.isActive("bulletList")
+  },
+  {
+    type: "orderedList",
+    label: "Numbered list",
+    isActive: (editor) => editor.isActive("orderedList")
+  },
+  {
+    type: "taskList",
+    label: "To-do list",
+    isActive: (editor) => editor.isActive("taskList")
+  },
+  {
+    type: "blockquote",
+    label: "Blockquote",
+    isActive: (editor) => editor.isActive("blockquote")
+  },
+  {
+    type: "codeBlock",
+    label: "Code block",
+    isActive: (editor) => editor.isActive("codeBlock")
+  }
+];
+function canTurnInto(editor, allowedBlockTypes) {
   if (!editor || !editor.isEditable) return false;
-  if (!(0, import_editor_utils24.isExtensionAvailable)(editor, "textAlign") || (0, import_editor_utils24.isNodeTypeSelected)(editor, ["image"]))
-    return false;
-  return editor.can().setTextAlign(align);
-}
-function hasSetTextAlign(commands) {
-  return "setTextAlign" in commands;
+  const blockTypes = allowedBlockTypes || TURN_INTO_BLOCKS;
+  const { selection } = editor.state;
+  if (selection instanceof import_state10.NodeSelection) {
+    const nodeType2 = selection.node.type.name;
+    return blockTypes.includes(nodeType2);
+  }
+  const { $anchor } = selection;
+  const nodeType = $anchor.parent.type.name;
+  return blockTypes.includes(nodeType);
 }
-function isTextAlignActive(editor, align) {
-  if (!editor || !editor.isEditable) return false;
-  return editor.isActive({ textAlign: align });
+function getFilteredBlockTypeOptions(blockTypes) {
+  if (!blockTypes) return blockTypeOptions;
+  return blockTypeOptions.filter((option) => {
+    return blockTypes.includes(option.type);
+  });
 }
-function setTextAlign(editor, align) {
-  if (!editor || !editor.isEditable) return false;
-  if (!canSetTextAlign(editor, align)) return false;
-  const chain = editor.chain().focus();
-  if (hasSetTextAlign(chain)) {
-    return chain.setTextAlign(align).run();
-  }
-  return false;
+function getActiveBlockType(editor, blockTypes) {
+  if (!editor) return getFilteredBlockTypeOptions(blockTypes)[0];
+  const filteredOptions = getFilteredBlockTypeOptions(blockTypes);
+  const activeOption = filteredOptions.find(
+    (option) => option.isActive(editor)
+  );
+  return activeOption || filteredOptions[0];
 }
-function shouldShowButton5(props) {
-  const { editor, hideWhenUnavailable, align } = props;
+function shouldShowTurnInto(params) {
+  const { editor, hideWhenUnavailable, blockTypes } = params;
   if (!editor || !editor.isEditable) return false;
-  if (!(0, import_editor_utils24.isExtensionAvailable)(editor, "textAlign")) return false;
   if (hideWhenUnavailable && !editor.isActive("code")) {
-    return canSetTextAlign(editor, align);
+    return canTurnInto(editor, blockTypes);
   }
   return true;
 }
-function useTextAlign(config) {
+function useTurnIntoDropdown(config) {
   const {
     editor: providedEditor,
-    align,
     hideWhenUnavailable = false,
-    onAligned
-  } = config;
-  const { editor } = (0, import_editor_utils24.useTiptapEditor)(providedEditor);
-  const [isVisible, setIsVisible] = (0, import_react52.useState)(true);
-  const canAlign = canSetTextAlign(editor, align);
-  const isActive = isTextAlignActive(editor, align);
-  (0, import_react52.useEffect)(() => {
+    blockTypes,
+    onOpenChange
+  } = config || {};
+  const { editor } = (0, import_editor_utils27.useTiptapEditor)(providedEditor);
+  const [isOpen, setIsOpen] = (0, import_react55.useState)(false);
+  const [isVisible, setIsVisible] = (0, import_react55.useState)(true);
+  const canToggle3 = canTurnInto(editor, blockTypes);
+  const activeBlockType = getActiveBlockType(editor, blockTypes);
+  const handleOpenChange = (0, import_react55.useCallback)(
+    (open) => {
+      if (!editor || !canToggle3) return;
+      setIsOpen(open);
+      onOpenChange == null ? void 0 : onOpenChange(open);
+    },
+    [canToggle3, editor, onOpenChange]
+  );
+  (0, import_react55.useEffect)(() => {
     if (!editor) return;
     const handleSelectionUpdate = () => {
-      setIsVisible(shouldShowButton5({ editor, align, hideWhenUnavailable }));
+      setIsVisible(
+        shouldShowTurnInto({
+          editor,
+          hideWhenUnavailable,
+          blockTypes
+        })
+      );
     };
     handleSelectionUpdate();
     editor.on("selectionUpdate", handleSelectionUpdate);
     return () => {
       editor.off("selectionUpdate", handleSelectionUpdate);
     };
-  }, [editor, hideWhenUnavailable, align]);
-  const handleTextAlign = (0, import_react52.useCallback)(() => {
-    if (!editor) return false;
-    const success = setTextAlign(editor, align);
-    if (success) {
-      onAligned == null ? void 0 : onAligned();
-    }
-    return success;
-  }, [editor, align, onAligned]);
+  }, [editor, hideWhenUnavailable, blockTypes]);
   return {
     isVisible,
-    isActive,
-    handleTextAlign,
-    canAlign,
-    label: textAlignLabels[align],
-    shortcutKeys: TEXT_ALIGN_SHORTCUT_KEYS[align],
-    Icon: textAlignIcons[align]
+    canToggle: canToggle3,
+    isOpen,
+    setIsOpen,
+    activeBlockType,
+    handleOpenChange,
+    filteredOptions: getFilteredBlockTypeOptions(blockTypes),
+    label: `Turn into (current: ${(activeBlockType == null ? void 0 : activeBlockType.label) || "Text"})`,
+    Icon: import_icons24.ChevronDownIcon
   };
 }
 
-// src/ui/text-align-button/text-align-button.tsx
-var import_jsx_runtime30 = require("react/jsx-runtime");
-var TextAlignButton = ({
-  editor: providedEditor,
-  align,
-  text,
-  hideWhenUnavailable = false,
-  onAligned,
-  showShortcut = false,
-  onClick,
-  children,
-  ...buttonProps
-}) => {
-  const { editor } = (0, import_editor_utils25.useTiptapEditor)(providedEditor);
-  const {
-    isVisible,
-    handleTextAlign,
-    label,
-    canAlign,
-    isActive,
-    Icon,
-    shortcutKeys
-  } = useTextAlign({
-    editor,
-    align,
-    hideWhenUnavailable,
-    onAligned
-  });
-  const handleClick = (0, import_react53.useCallback)(
-    (e) => {
-      onClick == null ? void 0 : onClick(e);
-      if (e.defaultPrevented) return;
-      handleTextAlign();
-    },
-    [handleTextAlign, onClick]
-  );
-  if (!isVisible) {
-    return null;
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
-    import_button16.IconButton,
-    {
-      type: "button",
-      disabled: canAlign,
-      variant: "ghost",
-      color: "default",
-      "data-active-state": isActive ? "on" : "off",
-      "data-disabled": canAlign,
-      tabIndex: -1,
-      "aria-label": label,
-      "aria-pressed": isActive,
-      tooltip: label,
-      shortcutKeys,
-      onClick: handleClick,
-      ...buttonProps,
-      children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Icon, {})
+// src/ui/turn-into-dropdown/turn-into-dropdown.tsx
+var import_jsx_runtime31 = require("react/jsx-runtime");
+var TurnIntoDropdownContent = ({ blockTypes }) => {
+  const filteredOptions = getFilteredBlockTypeOptions(blockTypes);
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_dropdown_menu2.DropdownMenu.Group, { children: filteredOptions.map(
+    (option, index) => {
+      var _a;
+      return renderBlockTypeButton(
+        option,
+        `${option.type}-${(_a = option.level) != null ? _a : index}`
+      );
     }
-  );
+  ) });
 };
+function renderBlockTypeButton(option, key) {
+  switch (option.type) {
+    case "paragraph":
+      return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_dropdown_menu2.DropdownMenu.Item, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+        TextButton,
+        {
+          fullWidth: true,
+          spacing: "start",
+          tooltip: "",
+          text: option.label
+        }
+      ) }, key);
+    case "heading":
+      if (!option.level) {
+        return null;
+      }
+      return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_dropdown_menu2.DropdownMenu.Item, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+        HeadingButton,
+        {
+          level: option.level || 1,
+          fullWidth: true,
+          spacing: "start",
+          tooltip: "",
+          text: option.label
+        }
+      ) }, key);
+    case "bulletList":
+      return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_dropdown_menu2.DropdownMenu.Item, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+        ListButton,
+        {
+          type: "bulletList",
+          fullWidth: true,
+          spacing: "start",
+          tooltip: "",
+          text: option.label
+        }
+      ) }, key);
+    case "orderedList":
+      return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_dropdown_menu2.DropdownMenu.Item, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+        ListButton,
+        {
+          type: "orderedList",
+          fullWidth: true,
+          spacing: "start",
+          tooltip: "",
+          text: option.label
+        }
+      ) }, key);
+    case "taskList":
+      return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_dropdown_menu2.DropdownMenu.Item, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+        ListButton,
+        {
+          type: "taskList",
+          fullWidth: true,
+          spacing: "start",
+          tooltip: "",
+          text: option.label
+        }
+      ) }, key);
+    case "blockquote":
+      return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_dropdown_menu2.DropdownMenu.Item, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+        BlockquoteButton,
+        {
+          className: "w-full justify-start",
+          title: "",
+          tooltip: "",
+          text: option.label
+        }
+      ) }, key);
+    case "codeBlock":
+      return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_dropdown_menu2.DropdownMenu.Item, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+        CodeBlockButton,
+        {
+          className: "w-full justify-start",
+          title: "",
+          tooltip: "",
+          text: option.label
+        }
+      ) }, key);
+    default:
+      return null;
+  }
+}
+var TurnIntoDropdown = (0, import_react56.forwardRef)(
+  ({
+    editor: providedEditor,
+    hideWhenUnavailable = false,
+    blockTypes,
+    onOpenChange,
+    children,
+    ...buttonProps
+  }, ref) => {
+    const { editor } = (0, import_editor_utils28.useTiptapEditor)(providedEditor);
+    const {
+      isVisible,
+      canToggle: canToggle3,
+      isOpen,
+      activeBlockType,
+      handleOpenChange,
+      label,
+      Icon
+    } = useTurnIntoDropdown({
+      editor,
+      hideWhenUnavailable,
+      blockTypes,
+      onOpenChange
+    });
+    if (!isVisible) {
+      return null;
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_dropdown_menu2.DropdownMenu.Root, { open: isOpen, onOpenChange: handleOpenChange, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_dropdown_menu2.DropdownMenu.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+        import_button17.Button,
+        {
+          type: "button",
+          variant: "ghost",
+          color: "default",
+          disabled: !canToggle3,
+          "data-disabled": !canToggle3,
+          tabIndex: -1,
+          "aria-label": label,
+          tooltip: "Turn into",
+          endContent: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Icon, {}),
+          ...buttonProps,
+          ref,
+          children: children != null ? children : /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { children: (activeBlockType == null ? void 0 : activeBlockType.label) || "Text" })
+        }
+      ) }),
+      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_dropdown_menu2.DropdownMenu.Content, { align: "start", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(TurnIntoDropdownContent, { blockTypes }) })
+    ] });
+  }
+);
+TurnIntoDropdown.displayName = "TurnIntoDropdown";
 
 // src/ui/undo-redo-button/undo-redo-button.tsx
-var import_editor_utils27 = require("@kopexa/editor-utils");
+var import_editor_utils30 = require("@kopexa/editor-utils");
 var import_toolbar9 = require("@kopexa/toolbar");
-var import_react55 = require("react");
+var import_react58 = require("react");
 
 // src/ui/undo-redo-button/use-undo-redo.ts
-var import_editor_utils26 = require("@kopexa/editor-utils");
-var import_icons24 = require("@kopexa/icons");
-var import_react54 = require("react");
+var import_editor_utils29 = require("@kopexa/editor-utils");
+var import_icons25 = require("@kopexa/icons");
+var import_react57 = require("react");
 var UNDO_REDO_SHORTCUT_KEYS = {
   undo: "mod+z",
   redo: "mod+shift+z"
@@ -7448,12 +7893,12 @@ var historyActionLabels = {
   redo: "Redo"
 };
 var historyIcons = {
-  undo: import_icons24.UndoIcon,
-  redo: import_icons24.RedoIcon
+  undo: import_icons25.UndoIcon,
+  redo: import_icons25.RedoIcon
 };
 function canExecuteUndoRedoAction(editor, action) {
   if (!editor || !editor.isEditable) return false;
-  if ((0, import_editor_utils26.isNodeTypeSelected)(editor, ["image"])) return false;
+  if ((0, import_editor_utils29.isNodeTypeSelected)(editor, ["image"])) return false;
   return action === "undo" ? editor.can().undo() : editor.can().redo();
 }
 function executeUndoRedoAction(editor, action) {
@@ -7462,7 +7907,7 @@ function executeUndoRedoAction(editor, action) {
   const chain = editor.chain().focus();
   return action === "undo" ? chain.undo().run() : chain.redo().run();
 }
-function shouldShowButton6(props) {
+function shouldShowButton7(props) {
   const { editor, hideWhenUnavailable, action } = props;
   if (!editor || !editor.isEditable) return false;
   if (hideWhenUnavailable && !editor.isActive("code")) {
@@ -7477,13 +7922,13 @@ function useUndoRedo(config) {
     hideWhenUnavailable = false,
     onExecuted
   } = config;
-  const { editor } = (0, import_editor_utils26.useTiptapEditor)(providedEditor);
-  const [isVisible, setIsVisible] = (0, import_react54.useState)(true);
+  const { editor } = (0, import_editor_utils29.useTiptapEditor)(providedEditor);
+  const [isVisible, setIsVisible] = (0, import_react57.useState)(true);
   const canExecute = canExecuteUndoRedoAction(editor, action);
-  (0, import_react54.useEffect)(() => {
+  (0, import_react57.useEffect)(() => {
     if (!editor) return;
     const handleUpdate = () => {
-      setIsVisible(shouldShowButton6({ editor, hideWhenUnavailable, action }));
+      setIsVisible(shouldShowButton7({ editor, hideWhenUnavailable, action }));
     };
     handleUpdate();
     editor.on("transaction", handleUpdate);
@@ -7491,7 +7936,7 @@ function useUndoRedo(config) {
       editor.off("transaction", handleUpdate);
     };
   }, [editor, hideWhenUnavailable, action]);
-  const handleAction = (0, import_react54.useCallback)(() => {
+  const handleAction = (0, import_react57.useCallback)(() => {
     if (!editor) return false;
     const success = executeUndoRedoAction(editor, action);
     if (success) {
@@ -7510,7 +7955,7 @@ function useUndoRedo(config) {
 }
 
 // src/ui/undo-redo-button/undo-redo-button.tsx
-var import_jsx_runtime31 = require("react/jsx-runtime");
+var import_jsx_runtime32 = require("react/jsx-runtime");
 var UndoRedoButton = ({
   editor: providedEditor,
   action,
@@ -7522,14 +7967,14 @@ var UndoRedoButton = ({
   children,
   ...buttonProps
 }) => {
-  const { editor } = (0, import_editor_utils27.useTiptapEditor)(providedEditor);
+  const { editor } = (0, import_editor_utils30.useTiptapEditor)(providedEditor);
   const { isVisible, handleAction, label, canExecute, Icon, shortcutKeys } = useUndoRedo({
     editor,
     action,
     hideWhenUnavailable,
     onExecuted
   });
-  const handleClick = (0, import_react55.useCallback)(
+  const handleClick = (0, import_react58.useCallback)(
     (event) => {
       onClick == null ? void 0 : onClick(event);
       if (event.defaultPrevented) return;
@@ -7540,7 +7985,7 @@ var UndoRedoButton = ({
   if (!isVisible) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
     import_toolbar9.ToolbarButton,
     {
       type: "button",
@@ -7555,23 +8000,23 @@ var UndoRedoButton = ({
       onClick: handleClick,
       isIconOnly: true,
       ...buttonProps,
-      children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Icon, {})
+      children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Icon, {})
     }
   );
 };
 
 // src/presets/basic/editor-header.tsx
-var import_jsx_runtime32 = require("react/jsx-runtime");
+var import_jsx_runtime33 = require("react/jsx-runtime");
 var EditorHeader = ({
   editor: providedEditor,
   variant
 }) => {
   var _a, _b;
-  const { editor } = (0, import_editor_utils28.useTiptapEditor)(providedEditor);
-  const isMobile = (0, import_use_is_mobile2.useIsMobile)();
+  const { editor } = (0, import_editor_utils31.useTiptapEditor)(providedEditor);
+  const isMobile = (0, import_use_is_mobile3.useIsMobile)();
   const windowSize = useWindowSize();
   const { styles } = useEditorUIContext();
-  const toolbarRef = (0, import_react56.useRef)(null);
+  const toolbarRef = (0, import_react59.useRef)(null);
   const bodyRect = useCursorVisibility({
     editor,
     overlayHeight: (_b = (_a = toolbarRef.current) == null ? void 0 : _a.getBoundingClientRect().height) != null ? _b : 0
@@ -7580,7 +8025,7 @@ var EditorHeader = ({
     return null;
   }
   const ToolbarContent = variant === "comment" ? CommentToolbarContent : variant === "field" ? FieldToolbarContent : MainToolbarContent;
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: styles.toolbarContainer(), "data-slot": "editor-toolbar", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: styles.toolbarContainer(), "data-slot": "editor-toolbar", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
     import_toolbar10.Toolbar,
     {
       sticky: true,
@@ -7590,63 +8035,58 @@ var EditorHeader = ({
         bottom: `calc(100% - ${windowSize.height - bodyRect.y}px)`
       } : {},
       className: styles.toolbar(),
-      children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ToolbarContent, {})
+      children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ToolbarContent, {})
     }
   ) });
 };
-var MainToolbarContent = () => /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_jsx_runtime32.Fragment, { children: [
-  /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_toolbar10.ToolbarGroup, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(UndoRedoButton, { action: "undo" }),
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(UndoRedoButton, { action: "redo" })
+var MainToolbarContent = () => /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_jsx_runtime33.Fragment, { children: [
+  /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_toolbar10.ToolbarGroup, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(UndoRedoButton, { action: "undo" }),
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(UndoRedoButton, { action: "redo" })
   ] }),
-  /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_toolbar10.ToolbarSeparator, {}),
-  /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_toolbar10.ToolbarGroup, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(HeadingDropdownMenu, { levels: [1, 2, 3, 4] }),
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ListDropdownMenu, { types: ["bulletList", "orderedList", "taskList"] }),
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(BlockquoteButton, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(CodeBlockButton, {})
+  /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_toolbar10.ToolbarSeparator, {}),
+  /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_toolbar10.ToolbarGroup, { children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(TurnIntoDropdown, {}) }),
+  /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_toolbar10.ToolbarSeparator, {}),
+  /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_toolbar10.ToolbarGroup, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(MarkButton, { type: "bold" }),
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(MarkButton, { type: "italic" }),
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(MarkButton, { type: "strike" }),
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(MarkButton, { type: "code" }),
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(MarkButton, { type: "underline" }),
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ColorHighlightPopover, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(LinkPopover, {})
   ] }),
-  /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_toolbar10.ToolbarSeparator, {}),
-  /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_toolbar10.ToolbarGroup, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(MarkButton, { type: "bold" }),
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(MarkButton, { type: "italic" }),
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(MarkButton, { type: "strike" }),
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(MarkButton, { type: "code" }),
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(MarkButton, { type: "underline" }),
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ColorHighlightPopover, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(LinkPopover, {})
-  ] }),
-  /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_toolbar10.ToolbarSeparator, {}),
-  /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_toolbar10.ToolbarGroup, { children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(TableButton, {}) }),
-  /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(MoreOptions, { hideWhenUnavailable: true })
+  /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_toolbar10.ToolbarSeparator, {}),
+  /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_toolbar10.ToolbarGroup, { children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(TableButton, {}) }),
+  /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(MoreOptions, { hideWhenUnavailable: true })
 ] });
-var CommentToolbarContent = () => /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_jsx_runtime32.Fragment, { children: [
-  /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_toolbar10.ToolbarGroup, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(MarkButton, { type: "bold" }),
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(MarkButton, { type: "italic" }),
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(MarkButton, { type: "strike" }),
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(MarkButton, { type: "code" })
+var CommentToolbarContent = () => /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_jsx_runtime33.Fragment, { children: [
+  /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_toolbar10.ToolbarGroup, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(MarkButton, { type: "bold" }),
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(MarkButton, { type: "italic" }),
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(MarkButton, { type: "strike" }),
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(MarkButton, { type: "code" })
   ] }),
-  /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_toolbar10.ToolbarSeparator, {}),
-  /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_toolbar10.ToolbarGroup, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(LinkPopover, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ListDropdownMenu, { types: ["bulletList", "orderedList"] })
+  /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_toolbar10.ToolbarSeparator, {}),
+  /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_toolbar10.ToolbarGroup, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(LinkPopover, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ListDropdownMenu, { types: ["bulletList", "orderedList"] })
   ] })
 ] });
-var FieldToolbarContent = () => /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_toolbar10.ToolbarGroup, { children: [
-  /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(MarkButton, { type: "bold" }),
-  /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(MarkButton, { type: "italic" }),
-  /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(MarkButton, { type: "strike" }),
-  /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(LinkPopover, {})
+var FieldToolbarContent = () => /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_toolbar10.ToolbarGroup, { children: [
+  /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(MarkButton, { type: "bold" }),
+  /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(MarkButton, { type: "italic" }),
+  /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(MarkButton, { type: "strike" }),
+  /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(LinkPopover, {})
 ] });
 function MoreOptions({
   editor: providedEditor,
   hideWhenUnavailable = false,
   ...props
 }) {
-  const { editor } = (0, import_editor_utils28.useTiptapEditor)(providedEditor);
-  const [show, setShow] = (0, import_react56.useState)(false);
-  (0, import_react56.useEffect)(() => {
+  const { editor } = (0, import_editor_utils31.useTiptapEditor)(providedEditor);
+  const [show, setShow] = (0, import_react59.useState)(false);
+  (0, import_react59.useEffect)(() => {
     if (!editor) return;
     const handleSelectionUpdate = () => {
       setShow(
@@ -7665,13 +8105,13 @@ function MoreOptions({
   if (!show || !editor || !editor.isEditable) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_jsx_runtime32.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_toolbar10.ToolbarSeparator, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_toolbar10.ToolbarGroup, { children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_popover3.Popover.Root, { spacing: "dense", width: "auto", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_jsx_runtime33.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_toolbar10.ToolbarSeparator, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_toolbar10.ToolbarGroup, { children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_popover3.Popover.Root, { spacing: "dense", width: "auto", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
         import_popover3.Popover.Trigger,
         {
-          render: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+          render: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
             import_toolbar10.ToolbarButton,
             {
               type: "button",
@@ -7683,29 +8123,29 @@ function MoreOptions({
               title: "More options",
               isIconOnly: true,
               ...props,
-              children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_icons25.MoreVerticalIcon, {})
+              children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_icons26.MoreVerticalIcon, {})
             }
           )
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
         import_popover3.Popover.Content,
         {
           side: "top",
           align: "end",
           alignOffset: 4,
           sideOffset: 4,
-          children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_toolbar10.Toolbar, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_toolbar10.ToolbarGroup, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(MarkButton, { type: "superscript" }),
-              /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(MarkButton, { type: "subscript" })
+          children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_toolbar10.Toolbar, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_toolbar10.ToolbarGroup, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(MarkButton, { type: "superscript" }),
+              /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(MarkButton, { type: "subscript" })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_toolbar10.ToolbarSeparator, {}),
-            /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_toolbar10.ToolbarGroup, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(TextAlignButton, { align: "left" }),
-              /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(TextAlignButton, { align: "center" }),
-              /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(TextAlignButton, { align: "right" }),
-              /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(TextAlignButton, { align: "justify" })
+            /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_toolbar10.ToolbarSeparator, {}),
+            /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_toolbar10.ToolbarGroup, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(TextAlignButton, { align: "left" }),
+              /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(TextAlignButton, { align: "center" }),
+              /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(TextAlignButton, { align: "right" }),
+              /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(TextAlignButton, { align: "justify" })
             ] })
           ] })
         }
@@ -7737,7 +8177,7 @@ function shouldShowMoreOptions(params) {
 }
 
 // src/presets/basic/index.tsx
-var import_jsx_runtime33 = require("react/jsx-runtime");
+var import_jsx_runtime34 = require("react/jsx-runtime");
 var BasicEditor = ({
   variant,
   bordered,
@@ -7755,19 +8195,19 @@ var BasicEditor = ({
     ...options
   });
   const styles = (0, import_theme9.editorBasic)({ variant, bordered });
-  const resolveVariable = (0, import_react58.useCallback)(
+  const resolveVariable = (0, import_react61.useCallback)(
     (name) => variableValues == null ? void 0 : variableValues[name],
     [variableValues]
   );
   if (!editor) {
-    return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(LoadingSpinner, {});
+    return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(LoadingSpinner, {});
   }
   const isBottomToolbar = variant === "field";
   const hasVariables = variables && variables.length > 0;
   const hasPagination = !!pagesOptions;
-  const editorContent = /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(EditorUIProvider, { value: { styles }, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: styles.root(), "data-slot": "editor", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_react57.EditorContext.Provider, { value: { editor }, children: [
-    showToolbar && !isBottomToolbar && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(EditorHeader, { editor, variant }),
-    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+  const editorContent = /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(EditorUIProvider, { value: { styles }, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: styles.root(), "data-slot": "editor", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_react60.EditorContext.Provider, { value: { editor }, children: [
+    showToolbar && !isBottomToolbar && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(EditorHeader, { editor, variant }),
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
       EditorContentArea,
       {
         variant,
@@ -7775,10 +8215,10 @@ var BasicEditor = ({
         hasPagination
       }
     ),
-    showToolbar && isBottomToolbar && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(EditorHeader, { editor, variant })
+    showToolbar && isBottomToolbar && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(EditorHeader, { editor, variant })
   ] }) }) });
   if (hasVariables) {
-    return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(VariableProvider, { variables, resolveVariable, children: editorContent });
+    return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(VariableProvider, { variables, resolveVariable, children: editorContent });
   }
   return editorContent;
 };
@@ -7788,10 +8228,10 @@ var EditorContentArea = ({
   hasPagination
 }) => {
   const styles = (0, import_theme9.editorBasic)({ variant });
-  const { editor } = (0, import_react58.useContext)(import_react57.EditorContext);
+  const { editor } = (0, import_react61.useContext)(import_react60.EditorContext);
   const { isDragging } = useUiEditorState(editor);
   useScrollToHash();
-  const handleKeyDown = (0, import_react58.useCallback)(
+  const handleKeyDown = (0, import_react61.useCallback)(
     (e) => {
       if (!(editor == null ? void 0 : editor.isFocused)) return;
       const isMod = e.metaKey || e.ctrlKey;
@@ -7833,9 +8273,9 @@ var EditorContentArea = ({
   const contentClassName = hasPagination ? "w-full min-w-0 h-auto min-h-0" : styles.content();
   return (
     // biome-ignore lint/a11y/noStaticElementInteractions: Wrapper intercepts keyboard shortcuts to prevent propagation
-    /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: styles.wrapper(), onKeyDown: handleKeyDown, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
-        import_react57.EditorContent,
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: styles.wrapper(), onKeyDown: handleKeyDown, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+        import_react60.EditorContent,
         {
           editor,
           role: "presentation",
@@ -7844,20 +8284,20 @@ var EditorContentArea = ({
             cursor: isDragging ? "grabbing" : "auto"
           },
           children: [
-            isEditable && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(SlashDropdownMenu, {}),
-            isEditable && variables && variables.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(VariableSuggestion, { editor, variables })
+            isEditable && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(SlashDropdownMenu, {}),
+            isEditable && variables && variables.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(VariableSuggestion, { editor, variables })
           ]
         }
       ),
-      isEditable && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(BubbleMenu, { editor }),
-      isEditable && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(LinkBubble, { editor }),
-      isEditable && /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_jsx_runtime33.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_extension_table2.TableHandle, { editor }),
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+      isEditable && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(BubbleMenu, { editor }),
+      isEditable && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(LinkBubble, { editor }),
+      isEditable && /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_jsx_runtime34.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_extension_table2.TableHandle, { editor }),
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
           import_extension_table2.TableSelectionOverlay,
           {
             showResizeHandles: true,
-            cellMenu: (props) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+            cellMenu: (props) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
               import_extension_table2.TableCellHandleMenu,
               {
                 editor: props.editor,
@@ -7872,8 +8312,8 @@ var EditorContentArea = ({
 };
 function LoadingSpinner({ text = "Connecting..." }) {
   const styles = (0, import_theme9.editorSpinner)();
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: styles.root(), children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: styles.content(), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: styles.root(), children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: styles.content(), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
       "svg",
       {
         className: styles.svg(),
@@ -7881,9 +8321,9 @@ function LoadingSpinner({ text = "Connecting..." }) {
         fill: "none",
         viewBox: "0 0 24 24",
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("title", { children: "Loading Spinner" }),
-          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("circle", { className: styles.circle(), cx: "12", cy: "12", r: "10" }),
-          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("title", { children: "Loading Spinner" }),
+          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("circle", { className: styles.circle(), cx: "12", cy: "12", r: "10" }),
+          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
             "path",
             {
               className: styles.path(),
@@ -7893,7 +8333,7 @@ function LoadingSpinner({ text = "Connecting..." }) {
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: styles.text(), children: text })
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: styles.text(), children: text })
   ] }) });
 }
 // Annotate the CommonJS export names for ESM import in node: