@kopexa/tiptap 17.7.0 → 17.8.0

package/dist/index.mjs

@@ -991,7 +991,7 @@ var ImageNode = TiptapImage.extend({
     return ReactNodeViewRenderer2(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;
@@ -1350,7 +1350,7 @@ var ImageUploadNode = Node2.create({
     return ReactNodeViewRenderer3(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;
@@ -2743,6 +2743,7 @@ import * as React6 from "react";
 
 // src/ui/suggestion-menu/suggestion-menu.tsx
 import { FloatingPortal, flip, offset, shift, size } from "@floating-ui/react";
+import { useTiptapEditor } from "@kopexa/editor-utils";
 import { PluginKey } from "@tiptap/pm/state";
 import {
   Suggestion,
@@ -2928,35 +2929,6 @@ function useMenuNavigation({
   };
 }
 
-// src/hooks/use-tiptap-editor.ts
-import { useCurrentEditor, useEditorState as useEditorState7 } from "@tiptap/react";
-import { useMemo as useMemo12 } from "react";
-function useTiptapEditor(providedEditor) {
-  const { editor: coreEditor } = useCurrentEditor();
-  const mainEditor = useMemo12(
-    () => providedEditor || coreEditor,
-    [providedEditor, coreEditor]
-  );
-  const editorState = useEditorState7({
-    editor: mainEditor,
-    selector(context) {
-      if (!context.editor) {
-        return {
-          editor: null,
-          editorState: void 0,
-          canCommand: void 0
-        };
-      }
-      return {
-        editor: context.editor,
-        editorState: context.editor.state,
-        canCommand: context.editor.can
-      };
-    }
-  });
-  return editorState || { editor: null };
-}
-
 // src/ui/suggestion-menu/suggestion-menu-utils.ts
 function calculateStartPosition(cursorPosition, previousNode, triggerChar) {
   if (!(previousNode == null ? void 0 : previousNode.text) || !triggerChar) {
@@ -3434,11 +3406,290 @@ var Link = TiptapLink.extend({
   }
 });
 
+// src/extensions/node-alignment/index.ts
+import { getSelectedNodesOfType, updateNodesAttr } from "@kopexa/editor-utils";
+import { Extension } from "@tiptap/core";
+function getToggleValue(targets, attributeName, inputValue) {
+  var _a, _b;
+  if (targets.length === 0) return null;
+  for (const target of targets) {
+    const currentValue = (_b = (_a = target.node.attrs) == null ? void 0 : _a[attributeName]) != null ? _b : null;
+    if (currentValue !== inputValue) {
+      return inputValue;
+    }
+  }
+  return null;
+}
+var NodeAlignment = Extension.create({
+  name: "nodeAlignment",
+  addOptions() {
+    return {
+      types: ["paragraph", "heading", "blockquote", "tableCell", "tableHeader"],
+      useStyle: true,
+      textAlignValues: ["left", "center", "right", "justify"],
+      verticalAlignValues: ["top", "middle", "bottom"]
+    };
+  },
+  addGlobalAttributes() {
+    return [
+      {
+        types: this.options.types,
+        attributes: {
+          nodeTextAlign: {
+            default: null,
+            parseHTML: (element) => {
+              var _a;
+              const styleAlign = (_a = element.style) == null ? void 0 : _a.textAlign;
+              if (styleAlign && this.options.textAlignValues.includes(styleAlign)) {
+                return styleAlign;
+              }
+              const dataAlign = element.getAttribute("data-node-text-align");
+              if (dataAlign && this.options.textAlignValues.includes(dataAlign)) {
+                return dataAlign;
+              }
+              return null;
+            },
+            renderHTML: (attributes) => {
+              const align = attributes.nodeTextAlign;
+              if (!align || !this.options.textAlignValues.includes(align))
+                return {};
+              if (this.options.useStyle) {
+                return { style: `text-align: ${align}` };
+              } else {
+                return { "data-node-text-align": align };
+              }
+            }
+          },
+          nodeVerticalAlign: {
+            default: null,
+            parseHTML: (element) => {
+              var _a;
+              const styleVAlign = (_a = element.style) == null ? void 0 : _a.verticalAlign;
+              if (styleVAlign && this.options.verticalAlignValues.includes(styleVAlign)) {
+                return styleVAlign;
+              }
+              const dataVAlign = element.getAttribute(
+                "data-node-vertical-align"
+              );
+              if (dataVAlign && this.options.verticalAlignValues.includes(dataVAlign)) {
+                return dataVAlign;
+              }
+              return null;
+            },
+            renderHTML: (attributes) => {
+              const vAlign = attributes.nodeVerticalAlign;
+              if (!vAlign || !this.options.verticalAlignValues.includes(vAlign))
+                return {};
+              if (this.options.useStyle) {
+                return { style: `vertical-align: ${vAlign}` };
+              } else {
+                return { "data-node-vertical-align": vAlign };
+              }
+            }
+          }
+        }
+      }
+    ];
+  },
+  addCommands() {
+    const executeAlignmentCommand = (attributeName, getTargetValue) => {
+      return (inputValue) => ({ state, tr }) => {
+        const targets = getSelectedNodesOfType(
+          state.selection,
+          this.options.types
+        );
+        if (targets.length === 0) return false;
+        const targetValue = getTargetValue(targets, inputValue);
+        return updateNodesAttr(tr, targets, attributeName, targetValue);
+      };
+    };
+    return {
+      // TEXT ALIGN
+      setNodeTextAlign: executeAlignmentCommand(
+        "nodeTextAlign",
+        (_, inputValue) => {
+          if (!inputValue || !this.options.textAlignValues.includes(inputValue))
+            return null;
+          return inputValue;
+        }
+      ),
+      unsetNodeTextAlign: executeAlignmentCommand("nodeTextAlign", () => null),
+      toggleNodeTextAlign: executeAlignmentCommand(
+        "nodeTextAlign",
+        (targets, inputValue) => {
+          if (!inputValue || !this.options.textAlignValues.includes(inputValue))
+            return null;
+          return getToggleValue(targets, "nodeTextAlign", inputValue);
+        }
+      ),
+      // VERTICAL ALIGN
+      setNodeVAlign: executeAlignmentCommand(
+        "nodeVerticalAlign",
+        (_, inputValue) => {
+          if (!inputValue || !this.options.verticalAlignValues.includes(inputValue))
+            return null;
+          return inputValue;
+        }
+      ),
+      unsetNodeVAlign: executeAlignmentCommand("nodeVerticalAlign", () => null),
+      toggleNodeVAlign: executeAlignmentCommand(
+        "nodeVerticalAlign",
+        (targets, inputValue) => {
+          if (!inputValue || !this.options.verticalAlignValues.includes(inputValue))
+            return null;
+          return getToggleValue(targets, "nodeVerticalAlign", inputValue);
+        }
+      ),
+      // BOTH
+      setNodeAlignment: (textAlign, verticalAlign) => ({ state, tr }) => {
+        const targets = getSelectedNodesOfType(
+          state.selection,
+          this.options.types
+        );
+        if (targets.length === 0) return false;
+        let hasChanges = false;
+        for (const { node, pos } of targets) {
+          const newAttrs = { ...node.attrs };
+          if (textAlign && this.options.textAlignValues.includes(textAlign)) {
+            newAttrs.nodeTextAlign = textAlign;
+            hasChanges = true;
+          }
+          if (verticalAlign && this.options.verticalAlignValues.includes(verticalAlign)) {
+            newAttrs.nodeVerticalAlign = verticalAlign;
+            hasChanges = true;
+          }
+          if (hasChanges) tr.setNodeMarkup(pos, void 0, newAttrs);
+        }
+        return hasChanges;
+      },
+      unsetNodeAlignment: () => ({ state, tr }) => {
+        var _a, _b, _c, _d;
+        const targets = getSelectedNodesOfType(
+          state.selection,
+          this.options.types
+        );
+        if (targets.length === 0) return false;
+        let hasChanges = false;
+        for (const { node, pos } of targets) {
+          const hasText = (_b = (_a = node.attrs) == null ? void 0 : _a.nodeTextAlign) != null ? _b : null;
+          const hasV = (_d = (_c = node.attrs) == null ? void 0 : _c.nodeVerticalAlign) != null ? _d : null;
+          if (hasText || hasV) {
+            const newAttrs = {
+              ...node.attrs,
+              nodeTextAlign: null,
+              nodeVerticalAlign: null
+            };
+            tr.setNodeMarkup(pos, void 0, newAttrs);
+            hasChanges = true;
+          }
+        }
+        return hasChanges;
+      }
+    };
+  }
+});
+
+// src/extensions/node-background/index.ts
+import { getSelectedNodesOfType as getSelectedNodesOfType2, updateNodesAttr as updateNodesAttr2 } from "@kopexa/editor-utils";
+import { Extension as Extension2 } from "@tiptap/core";
+function getToggleColor(targets, inputColor) {
+  var _a, _b;
+  if (targets.length === 0) return null;
+  for (const target of targets) {
+    const currentColor = (_b = (_a = target.node.attrs) == null ? void 0 : _a.backgroundColor) != null ? _b : null;
+    if (currentColor !== inputColor) {
+      return inputColor;
+    }
+  }
+  return null;
+}
+var NodeBackground = Extension2.create({
+  name: "nodeBackground",
+  addOptions() {
+    return {
+      types: [
+        "paragraph",
+        "heading",
+        "blockquote",
+        "taskList",
+        "bulletList",
+        "orderedList",
+        "tableCell",
+        "tableHeader"
+      ],
+      useStyle: true
+    };
+  },
+  addGlobalAttributes() {
+    return [
+      {
+        types: this.options.types,
+        attributes: {
+          backgroundColor: {
+            default: null,
+            parseHTML: (element) => {
+              var _a;
+              const styleColor = (_a = element.style) == null ? void 0 : _a.backgroundColor;
+              if (styleColor) return styleColor;
+              const dataColor = element.getAttribute("data-background-color");
+              return dataColor || null;
+            },
+            renderHTML: (attributes) => {
+              const color = attributes.backgroundColor;
+              if (!color) return {};
+              if (this.options.useStyle) {
+                return {
+                  style: `background-color: ${color}`
+                };
+              } else {
+                return {
+                  "data-background-color": color
+                };
+              }
+            }
+          }
+        }
+      }
+    ];
+  },
+  addCommands() {
+    const executeBackgroundCommand = (getTargetColor) => {
+      return (inputColor) => ({ state, tr }) => {
+        const targets = getSelectedNodesOfType2(
+          state.selection,
+          this.options.types
+        );
+        if (targets.length === 0) return false;
+        const targetColor = getTargetColor(targets, inputColor);
+        return updateNodesAttr2(tr, targets, "backgroundColor", targetColor);
+      };
+    };
+    return {
+      /**
+       * Set background color to specific value
+       */
+      setNodeBackgroundColor: executeBackgroundCommand(
+        (_, inputColor) => inputColor || null
+      ),
+      /**
+       * Remove background color
+       */
+      unsetNodeBackgroundColor: executeBackgroundCommand(() => null),
+      /**
+       * Toggle background color (set if different/missing, unset if all have it)
+       */
+      toggleNodeBackgroundColor: executeBackgroundCommand(
+        (targets, inputColor) => getToggleColor(targets, inputColor || "")
+      )
+    };
+  }
+});
+
 // src/extensions/selection/index.ts
 import { Plugin as Plugin2, PluginKey as PluginKey4 } from "@tiptap/pm/state";
 import { Decoration, DecorationSet } from "@tiptap/pm/view";
-import { Extension, isNodeSelection } from "@tiptap/react";
-var Selection = Extension.create({
+import { Extension as Extension3, isNodeSelection } from "@tiptap/react";
+var Selection = Extension3.create({
   name: "selection",
   addProseMirrorPlugins() {
     const { editor } = this;
@@ -3470,7 +3721,7 @@ var Selection = Extension.create({
 
 // src/extensions/trailing-node/index.ts
 import { Plugin as Plugin3, PluginKey as PluginKey5 } from "@tiptap/pm/state";
-import { Extension as Extension2 } from "@tiptap/react";
+import { Extension as Extension4 } from "@tiptap/react";
 function nodeEqualsType({
   types,
   node
@@ -3481,7 +3732,7 @@ function nodeEqualsType({
   }
   return node.type === types;
 }
-var TrailingNode = Extension2.create({
+var TrailingNode = Extension4.create({
   name: "trailingNode",
   addOptions() {
     return {
@@ -3527,7 +3778,7 @@ var TrailingNode = Extension2.create({
 });
 
 // src/extensions/ui-state/index.ts
-import { Extension as Extension3 } from "@tiptap/core";
+import { Extension as Extension5 } from "@tiptap/core";
 var defaultUiState = {
   aiGenerationIsSelection: false,
   aiGenerationIsLoading: false,
@@ -3537,7 +3788,7 @@ var defaultUiState = {
   lockDragHandle: false,
   isDragging: false
 };
-var UiState = Extension3.create({
+var UiState = Extension5.create({
   name: "uiState",
   addStorage() {
     return {
@@ -3862,6 +4113,8 @@ function getExtensions({
     }),
     UiState,
     TableKit,
+    NodeAlignment,
+    NodeBackground,
     TocNode,
     CalloutNode,
     MathBlock,
@@ -4010,6 +4263,11 @@ async function handleFileUpload(editor, file, fileHandler, pos) {
 }
 
 // src/presets/basic/index.tsx
+import {
+  TableCellHandleMenu,
+  TableHandle,
+  TableSelectionOverlay
+} from "@kopexa/extension-table";
 import {
   editorBasic,
   editorSpinner
@@ -4018,17 +4276,17 @@ import {
   EditorContent,
   EditorContext
 } from "@tiptap/react";
-import { useCallback as useCallback36, useContext as useContext4 } from "react";
+import { useCallback as useCallback38, useContext as useContext4 } from "react";
 
 // src/context/editor-context.ts
 import { createContext as createContext4 } from "@kopexa/react-utils";
 var [EditorUIProvider, useEditorUIContext] = createContext4();
 
 // src/hooks/use-ui-editor-state.ts
-import { useEditorState as useEditorState8 } from "@tiptap/react";
+import { useEditorState as useEditorState7 } from "@tiptap/react";
 function useUiEditorState(editor) {
   var _a;
-  return (_a = useEditorState8({
+  return (_a = useEditorState7({
     editor,
     selector: ({ editor: editor2 }) => {
       if (!editor2) return defaultUiState;
@@ -4050,6 +4308,7 @@ import { BubbleMenu as TiptapBubbleMenu } from "@tiptap/react/menus";
 
 // src/ui/link-popover/link-popover.tsx
 import { IconButton as IconButton6 } from "@kopexa/button";
+import { useTiptapEditor as useTiptapEditor3 } from "@kopexa/editor-utils";
 import {
   CheckIcon,
   EditIcon as EditIcon2,
@@ -4063,7 +4322,7 @@ import { ToolbarButton } from "@kopexa/toolbar";
 import { useCallback as useCallback14, useEffect as useEffect16, useState as useState15 } from "react";
 
 // src/ui/link-popover/use-link-popover.ts
-import { isMarkInSchema } from "@kopexa/editor-utils";
+import { isMarkInSchema, useTiptapEditor as useTiptapEditor2 } from "@kopexa/editor-utils";
 import { LinkIcon } from "@kopexa/icons";
 import * as React7 from "react";
 
@@ -4269,7 +4528,7 @@ function useLinkPopover(config) {
     hideWhenUnavailable = false,
     onSetLink
   } = config || {};
-  const { editor } = useTiptapEditor(providedEditor);
+  const { editor } = useTiptapEditor2(providedEditor);
   const { isVisible, canSet, isActive } = useLinkState({
     editor,
     hideWhenUnavailable
@@ -4432,7 +4691,7 @@ function LinkPopover({
   children,
   ...buttonProps
 }) {
-  const { editor } = useTiptapEditor(providedEditor);
+  const { editor } = useTiptapEditor3(providedEditor);
   const [isOpen, setIsOpen] = useState15(false);
   const {
     isVisible,
@@ -4519,7 +4778,11 @@ function LinkPopover({
 LinkButton.displayName = "LinkButton";
 
 // src/ui/mark-button/index.tsx
-import { isMarkInSchema as isMarkInSchema2, isNodeTypeSelected } from "@kopexa/editor-utils";
+import {
+  isMarkInSchema as isMarkInSchema2,
+  isNodeTypeSelected,
+  useTiptapEditor as useTiptapEditor4
+} from "@kopexa/editor-utils";
 import {
   BoldIcon,
   CodeIcon,
@@ -4531,7 +4794,7 @@ import {
 } from "@kopexa/icons";
 import { ToolbarButton as ToolbarButton2 } from "@kopexa/toolbar";
 import { isNodeSelection as isNodeSelection2 } from "@tiptap/react";
-import { useCallback as useCallback15, useMemo as useMemo14 } from "react";
+import { useCallback as useCallback15, useMemo as useMemo13 } from "react";
 import { jsx as jsx17 } from "react/jsx-runtime";
 var markIcons = {
   bold: BoldIcon,
@@ -4614,7 +4877,7 @@ var MarkButton = ({
   children,
   ...buttonProps
 }) => {
-  const { editor } = useTiptapEditor(providedEditor);
+  const { editor } = useTiptapEditor4(providedEditor);
   const {
     markInSchema,
     isDisabled,
@@ -4632,7 +4895,7 @@ var MarkButton = ({
     },
     [onClick, isDisabled, editor, type]
   );
-  const show = useMemo14(() => {
+  const show = useMemo13(() => {
     return shouldShowMarkButton({
       editor,
       type,
@@ -4707,7 +4970,7 @@ function BubbleMenu({ editor }) {
 }
 
 // src/ui/copy-anchor-link-button/use-scroll-to-hash.ts
-import { getEditorExtension } from "@kopexa/editor-utils";
+import { getEditorExtension, useTiptapEditor as useTiptapEditor5 } from "@kopexa/editor-utils";
 import * as React9 from "react";
 
 // src/hooks/use-floating-toolbar-visibility.ts
@@ -4732,7 +4995,7 @@ function useScrollToHash(config = {}) {
     onTargetNotFound = () => {
     }
   } = config;
-  const { editor } = useTiptapEditor(providedEditor);
+  const { editor } = useTiptapEditor5(providedEditor);
   const scrollToNode = React9.useCallback(
     (id) => {
       var _a, _b, _c;
@@ -4997,7 +5260,11 @@ import {
 import * as React10 from "react";
 
 // src/ui/table-button/use-table.ts
-import { isNodeInSchema, isNodeTypeSelected as isNodeTypeSelected2 } from "@kopexa/editor-utils";
+import {
+  isNodeInSchema,
+  isNodeTypeSelected as isNodeTypeSelected2,
+  useTiptapEditor as useTiptapEditor6
+} from "@kopexa/editor-utils";
 import { TableIcon } from "@kopexa/icons";
 import { isNodeSelection as isNodeSelection4 } from "@tiptap/react";
 import { useCallback as useCallback18, useEffect as useEffect20, useState as useState18 } from "react";
@@ -5043,7 +5310,7 @@ function useTableBlock(config) {
     hideWhenUnavailable = false,
     onToggled
   } = config || {};
-  const { editor } = useTiptapEditor(providedEditor);
+  const { editor } = useTiptapEditor6(providedEditor);
   const [isVisible, setIsVisible] = useState18(true);
   const canToggleState = canToggle(editor);
   const isActive = (editor == null ? void 0 : editor.isActive("table")) || false;
@@ -5604,6 +5871,7 @@ var List = ({
 };
 
 // src/presets/basic/editor-header.tsx
+import { useTiptapEditor as useTiptapEditor26 } from "@kopexa/editor-utils";
 import { MoreVerticalIcon } from "@kopexa/icons";
 import { Popover as Popover3 } from "@kopexa/popover";
 import {
@@ -5612,8 +5880,8 @@ import {
   ToolbarGroup as ToolbarGroup2,
   ToolbarSeparator as ToolbarSeparator3
 } from "@kopexa/toolbar";
-import { useIsMobile as useIsMobile2 } from "@kopexa/use-is-mobile";
-import { useEffect as useEffect29, useRef as useRef11, useState as useState29 } from "react";
+import { useIsMobile as useIsMobile3 } from "@kopexa/use-is-mobile";
+import { useEffect as useEffect31, useRef as useRef11, useState as useState30 } from "react";
 
 // src/hooks/use-cursor-visibility.ts
 import * as React13 from "react";
@@ -5717,99 +5985,126 @@ function useCursorVisibility({
   return rect;
 }
 
-// src/ui/blockquote-button/blockquote-button.tsx
+// src/ui/color-highlight-popover/color-highlight-popover.tsx
+import { IconButton as IconButton8 } from "@kopexa/button";
+import { useTiptapEditor as useTiptapEditor9 } from "@kopexa/editor-utils";
+import { BanIcon, HighlighterIcon as HighlighterIcon2 } from "@kopexa/icons";
+import { Popover as Popover2 } from "@kopexa/popover";
+import { ToolbarSeparator as ToolbarSeparator2 } from "@kopexa/toolbar";
+import { useMemo as useMemo16, useRef as useRef10, useState as useState22 } from "react";
+
+// src/ui/color-highlight-button/color-highlight-button.tsx
+import { useTiptapEditor as useTiptapEditor8 } from "@kopexa/editor-utils";
+import { colorHighlightButton } from "@kopexa/theme";
 import { ToolbarButton as ToolbarButton3 } from "@kopexa/toolbar";
-import * as React15 from "react";
+import { useCallback as useCallback22, useMemo as useMemo15 } from "react";
 
-// src/ui/blockquote-button/use-blockquote.ts
+// src/ui/color-highlight-button/use-color-highlight.ts
 import {
-  findNodePosition,
-  isNodeInSchema as isNodeInSchema3,
+  isMarkInSchema as isMarkInSchema3,
   isNodeTypeSelected as isNodeTypeSelected3,
-  isValidPosition
+  useTiptapEditor as useTiptapEditor7
 } from "@kopexa/editor-utils";
-import { BlockquoteIcon as BlockquoteIcon2 } from "@kopexa/icons";
-import { NodeSelection as NodeSelection2, TextSelection as TextSelection2 } from "@tiptap/pm/state";
+import { HighlighterIcon } from "@kopexa/icons";
+import { useIsMobile } from "@kopexa/use-is-mobile";
 import * as React14 from "react";
-var BLOCKQUOTE_SHORTCUT_KEY = "mod+shift+b";
-function canToggleBlockquote(editor, turnInto = true) {
-  var _a;
-  if (!editor || !editor.isEditable) return false;
-  if (!isNodeInSchema3("blockquote", editor) || isNodeTypeSelected3(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 TextSelection2) {
-      const pos = (_a = findNodePosition({
-        editor,
-        node: state.selection.$anchor.node(1)
-      })) == null ? void 0 : _a.pos;
-      if (!isValidPosition(pos)) return false;
-    }
-    return true;
-  } catch {
-    return false;
+import { useHotkeys } from "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 TextSelection2) {
-      const pos = (_a = findNodePosition({
-        editor,
-        node: state.selection.$anchor.node(1)
-      })) == null ? void 0 : _a.pos;
-      if (!isValidPosition(pos)) return false;
-      tr = tr.setSelection(NodeSelection2.create(state.doc, pos));
-      view.dispatch(tr);
-      state = view.state;
-    }
-    const selection = state.selection;
-    let chain = editor.chain().focus();
-    if (selection instanceof NodeSelection2) {
-      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 (!isMarkInSchema3("highlight", editor) || isNodeTypeSelected3(editor, ["image"]))
     return false;
-  }
+  return editor.can().setMark("highlight");
 }
-function shouldShowButton2(props) {
-  const { editor, hideWhenUnavailable } = props;
+function isColorHighlightActive(editor, highlightColor) {
   if (!editor || !editor.isEditable) return false;
-  if (!isNodeInSchema3("blockquote", editor)) return false;
-  if (hideWhenUnavailable && !editor.isActive("code")) {
-    return canToggleBlockquote(editor);
-  }
+  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 (!isMarkInSchema3("highlight", editor)) return false;
+  if (hideWhenUnavailable && !editor.isActive("code")) {
+    return canColorHighlight(editor);
+  }
   return true;
 }
-function useBlockquote(config) {
+function useColorHighlight(config) {
   const {
     editor: providedEditor,
+    label,
+    highlightColor,
     hideWhenUnavailable = false,
-    onToggled
-  } = config || {};
-  const { editor } = useTiptapEditor(providedEditor);
+    onApplied
+  } = config;
+  const { editor } = useTiptapEditor7(providedEditor);
+  const isMobile = 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 = () => {
@@ -5821,1062 +6116,1320 @@ 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]);
+  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: BlockquoteIcon2
+    handleColorHighlight,
+    handleRemoveHighlight,
+    canColorHighlight: canColorHighlightState,
+    label: label || `Highlight`,
+    shortcutKeys: COLOR_HIGHLIGHT_SHORTCUT_KEY,
+    Icon: HighlighterIcon
   };
 }
 
-// src/ui/blockquote-button/blockquote-button.tsx
+// src/ui/color-highlight-button/color-highlight-button.tsx
 import { Fragment as Fragment4, jsx as jsx21, jsxs as jsxs16 } from "react/jsx-runtime";
-var BlockquoteButton = ({
+var ColorHighlightButton = ({
   editor: providedEditor,
+  highlightColor,
   text,
   hideWhenUnavailable = false,
-  onToggled,
+  onApplied,
   showShortcut = false,
   onClick,
   children,
+  style,
+  className,
   ...buttonProps
 }) => {
-  const { editor } = useTiptapEditor(providedEditor);
+  const { editor } = useTiptapEditor8(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 = useCallback22(
     (event) => {
       onClick == null ? void 0 : onClick(event);
       if (event.defaultPrevented) return;
-      handleToggle();
+      handleColorHighlight();
     },
-    [handleToggle, onClick]
+    [handleColorHighlight, onClick]
+  );
+  const buttonStyle = useMemo15(
+    () => ({
+      ...style,
+      "--highlight-color": highlightColor
+    }),
+    [highlightColor, style]
   );
   if (!isVisible) {
     return null;
   }
-  return /* @__PURE__ */ jsx21(
+  const styles = colorHighlightButton();
+  return /* @__PURE__ */ jsxs16(
     ToolbarButton3,
     {
       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,
+      style: buttonStyle,
+      className: styles.button({ className }),
+      isIconOnly: true,
       ...buttonProps,
-      children: children != null ? children : /* @__PURE__ */ jsxs16(Fragment4, { children: [
-        /* @__PURE__ */ jsx21(Icon, {}),
-        text && /* @__PURE__ */ jsx21("span", { children: text })
-      ] })
+      children: [
+        /* @__PURE__ */ jsx21(
+          "span",
+          {
+            "data-active-state": isActive ? "on" : "off",
+            className: styles.mark()
+          }
+        ),
+        children || /* @__PURE__ */ jsxs16(Fragment4, { children: [
+          /* @__PURE__ */ jsx21(
+            "span",
+            {
+              style: { "--highlight-color": highlightColor }
+            }
+          ),
+          text
+        ] })
+      ]
     }
   );
 };
 
-// src/ui/codeblock-button/code-block-button.tsx
-import { CodeblockIcon as CodeblockIcon2 } from "@kopexa/icons";
-import { ToolbarButton as ToolbarButton4 } from "@kopexa/toolbar";
-import { useCallback as useCallback24 } from "react";
-
-// src/ui/codeblock-button/use-code-block.ts
-import {
-  findNodePosition as findNodePosition2,
-  isNodeInSchema as isNodeInSchema4,
-  isNodeTypeSelected as isNodeTypeSelected4,
-  isValidPosition as isValidPosition2
-} from "@kopexa/editor-utils";
-import { CodeblockIcon } from "@kopexa/icons";
-import { NodeSelection as NodeSelection3, TextSelection as TextSelection3 } from "@tiptap/pm/state";
-import * as React16 from "react";
-var CODE_BLOCK_SHORTCUT_KEY = "mod+alt+c";
-function canToggle2(editor, turnInto = true) {
-  var _a;
-  if (!editor || !editor.isEditable) return false;
-  if (!isNodeInSchema4("codeBlock", editor) || isNodeTypeSelected4(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 TextSelection3) {
-      const pos = (_a = findNodePosition2({
-        editor,
-        node: state.selection.$anchor.node(1)
-      })) == null ? void 0 : _a.pos;
-      if (!isValidPosition2(pos)) return false;
-    }
-    return true;
-  } catch {
-    return false;
+// src/ui/color-highlight-popover/color-highlight-popover.tsx
+import { jsx as jsx22, jsxs as jsxs17 } from "react/jsx-runtime";
+var ColorHighlightPopoverButton = ({
+  className,
+  children,
+  ...props
+}) => /* @__PURE__ */ jsx22(
+  IconButton8,
+  {
+    type: "button",
+    className,
+    variant: "ghost",
+    color: "default",
+    tabIndex: -1,
+    "aria-label": "Highlight text",
+    tooltip: "Highlight",
+    isIconOnly: !children,
+    ...props,
+    children: children != null ? children : /* @__PURE__ */ jsx22(HighlighterIcon2, {})
   }
+);
+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 = useRef10(null);
+  const menuItems = useMemo16(
+    () => [...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__ */ jsxs17("div", { ref: containerRef, className: "flex gap-1 items-center", children: [
+    /* @__PURE__ */ jsx22(
+      "div",
+      {
+        className: "flex items-center gap-1 outline-none",
+        "data-orientation": "horizontal",
+        children: colors.map((color, index) => /* @__PURE__ */ jsx22(
+          ColorHighlightButton,
+          {
+            editor,
+            highlightColor: color.value,
+            "aria-label": `${color.label} highlight color`,
+            tabIndex: index === selectedIndex ? 0 : -1,
+            "data-highlighted": selectedIndex === index
+          },
+          color.value
+        ))
+      }
+    ),
+    /* @__PURE__ */ jsx22(ToolbarSeparator2, { orientation: "vertical" }),
+    /* @__PURE__ */ jsx22("div", { className: "tiptap-button-group", children: /* @__PURE__ */ jsx22(
+      IconButton8,
+      {
+        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__ */ jsx22(BanIcon, {})
+      }
+    ) })
+  ] });
 }
-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 TextSelection3) {
-      const pos = (_a = findNodePosition2({
-        editor,
-        node: state.selection.$anchor.node(1)
-      })) == null ? void 0 : _a.pos;
-      if (!isValidPosition2(pos)) return false;
-      tr = tr.setSelection(NodeSelection3.create(state.doc, pos));
-      view.dispatch(tr);
-      state = view.state;
-    }
-    const selection = state.selection;
-    let chain = editor.chain().focus();
-    if (selection instanceof NodeSelection3) {
-      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 {
+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 } = useTiptapEditor9(providedEditor);
+  const [isOpen, setIsOpen] = useState22(false);
+  const { isVisible, canColorHighlight: canColorHighlight2, isActive, label } = useColorHighlight({
+    editor,
+    hideWhenUnavailable,
+    onApplied
+  });
+  if (!isVisible) return null;
+  return /* @__PURE__ */ jsxs17(Popover2.Root, { open: isOpen, onOpenChange: setIsOpen, spacing: "dense", children: [
+    /* @__PURE__ */ jsx22(
+      Popover2.Trigger,
+      {
+        render: /* @__PURE__ */ jsx22(
+          ColorHighlightPopoverButton,
+          {
+            disabled: !canColorHighlight2,
+            "data-disabled": !canColorHighlight2,
+            "data-active-state": isActive ? "on" : "off",
+            "aria-pressed": isActive,
+            "aria-label": label,
+            title: label,
+            ...props
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx22(Popover2.Content, { "aria-label": "Highlight colors", children: /* @__PURE__ */ jsx22(ColorHighlightPopoverContent, { editor, colors }) })
+  ] });
+}
+
+// src/ui/list-dropdown-menu/index.tsx
+import { Button as Button8 } from "@kopexa/button";
+import { DropdownMenu } from "@kopexa/dropdown-menu";
+import { isNodeInSchema as isNodeInSchema4, useTiptapEditor as useTiptapEditor11 } from "@kopexa/editor-utils";
+import { ChevronDownIcon, ListIcon as ListIcon4 } from "@kopexa/icons";
+import { isNodeSelection as isNodeSelection6 } from "@tiptap/react";
+import { useCallback as useCallback24, useMemo as useMemo18, useState as useState23 } from "react";
+
+// src/ui/list-button/index.tsx
+import { Button as Button7 } from "@kopexa/button";
+import { isNodeInSchema as isNodeInSchema3, useTiptapEditor as useTiptapEditor10 } from "@kopexa/editor-utils";
+import { ListIcon as ListIcon3, ListOrderedIcon as ListOrderedIcon2, ListTodoIcon as ListTodoIcon2 } from "@kopexa/icons";
+import { isNodeSelection as isNodeSelection5 } from "@tiptap/react";
+import { useCallback as useCallback23, useMemo as useMemo17 } from "react";
+import { jsx as jsx23 } from "react/jsx-runtime";
+var listOptions = [
+  {
+    label: "Bullet List",
+    type: "bulletList",
+    icon: ListIcon3
+  },
+  {
+    label: "Ordered List",
+    type: "orderedList",
+    icon: ListOrderedIcon2
+  },
+  {
+    label: "Task List",
+    type: "taskList",
+    icon: ListTodoIcon2
+  }
+];
+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 shouldShowButton3(props) {
-  const { editor, hideWhenUnavailable } = props;
-  if (!editor || !editor.isEditable) return false;
-  if (!isNodeInSchema4("codeBlock", editor)) return false;
-  if (hideWhenUnavailable && !editor.isActive("code")) {
-    return canToggle2(editor);
+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;
   }
-  return true;
 }
-function useCodeBlock(config) {
-  const {
-    editor: providedEditor,
-    hideWhenUnavailable = false,
-    onToggled
-  } = config || {};
-  const { editor } = useTiptapEditor(providedEditor);
-  const [isVisible, setIsVisible] = React16.useState(true);
-  const canToggleState = canToggle2(editor);
-  const isActive = (editor == null ? void 0 : editor.isActive("codeBlock")) || false;
-  React16.useEffect(() => {
-    if (!editor) return;
-    const handleSelectionUpdate = () => {
-      setIsVisible(shouldShowButton3({ editor, hideWhenUnavailable }));
-    };
-    handleSelectionUpdate();
-    editor.on("selectionUpdate", handleSelectionUpdate);
-    return () => {
-      editor.off("selectionUpdate", handleSelectionUpdate);
-    };
-  }, [editor, hideWhenUnavailable]);
-  const handleToggle = React16.useCallback(() => {
-    if (!editor) return false;
-    const success = toggleCodeBlock(editor);
-    if (success) {
-      onToggled == null ? void 0 : onToggled();
+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 (isNodeSelection5(editor.state.selection) || !canToggleList(editor, type)) {
+      return false;
     }
-    return success;
-  }, [editor, onToggled]);
+  }
+  return true;
+}
+function useListState(editor, type) {
+  const listInSchema = isNodeInSchema3(type, editor);
+  const listOption = getListOption(type);
+  const isActive = isListActive(editor, type);
+  const shortcutKey = listShortcutKeys[type];
   return {
-    isVisible,
+    listInSchema,
+    listOption,
     isActive,
-    handleToggle,
-    canToggle: canToggleState,
-    label: "Code Block",
-    shortcutKeys: CODE_BLOCK_SHORTCUT_KEY,
-    Icon: CodeblockIcon
+    shortcutKey
   };
 }
-
-// src/ui/codeblock-button/code-block-button.tsx
-import { jsx as jsx22 } from "react/jsx-runtime";
-var CodeBlockButton = ({
+var ListButton = ({
   editor: providedEditor,
-  text,
+  type,
   hideWhenUnavailable = false,
-  onToggled,
-  showShortcut = false,
+  className = "",
   onClick,
+  text,
   children,
+  ref,
   ...buttonProps
 }) => {
-  const { editor } = useTiptapEditor(providedEditor);
-  const { isVisible, canToggle: canToggle3, isActive, handleToggle, label, shortcutKeys } = useCodeBlock({
+  const { editor } = useTiptapEditor10(providedEditor);
+  const { listInSchema, listOption, isActive, shortcutKey } = useListState(
     editor,
-    hideWhenUnavailable,
-    onToggled
-  });
-  const handleClick = useCallback24(
-    (event) => {
-      onClick == null ? void 0 : onClick(event);
-      if (event.defaultPrevented) return;
-      handleToggle();
+    type
+  );
+  const Icon = (listOption == null ? void 0 : listOption.icon) || ListIcon3;
+  const handleClick = useCallback23(
+    (e) => {
+      onClick == null ? void 0 : onClick(e);
+      if (!e.defaultPrevented && editor) {
+        toggleList(editor, type);
+      }
     },
-    [handleToggle, onClick]
+    [onClick, editor, type]
   );
-  if (!isVisible) {
+  const show = useMemo17(() => {
+    return shouldShowListButton({
+      editor,
+      type,
+      hideWhenUnavailable,
+      listInSchema
+    });
+  }, [editor, type, hideWhenUnavailable, listInSchema]);
+  if (!show || !editor || !editor.isEditable) {
     return null;
   }
-  return /* @__PURE__ */ jsx22(
-    ToolbarButton4,
+  return /* @__PURE__ */ jsx23(
+    Button7,
     {
       type: "button",
+      className: className.trim(),
       variant: "ghost",
       color: "default",
-      disabled: !canToggle3,
-      "data-disabled": !canToggle3,
       "data-active-state": isActive ? "on" : "off",
       tabIndex: -1,
-      "aria-label": "codeBlock",
+      "aria-label": (listOption == null ? void 0 : listOption.label) || type,
       "aria-pressed": isActive,
-      title: label,
-      shortcutKeys,
+      tooltip: (listOption == null ? void 0 : listOption.label) || type,
+      shortcutKeys: shortcutKey,
       onClick: handleClick,
-      isIconOnly: true,
+      startContent: /* @__PURE__ */ jsx23(Icon, {}),
       ...buttonProps,
-      children: /* @__PURE__ */ jsx22(CodeblockIcon2, {})
+      ref,
+      children: children || text
     }
   );
 };
 
-// src/ui/color-highlight-popover/color-highlight-popover.tsx
-import { IconButton as IconButton8 } from "@kopexa/button";
-import { BanIcon, HighlighterIcon as HighlighterIcon2 } from "@kopexa/icons";
-import { Popover as Popover2 } from "@kopexa/popover";
-import { ToolbarSeparator as ToolbarSeparator2 } from "@kopexa/toolbar";
-import { useMemo as useMemo17, useRef as useRef10, useState as useState24 } from "react";
-
-// src/ui/color-highlight-button/color-highlight-button.tsx
-import { colorHighlightButton } from "@kopexa/theme";
-import { ToolbarButton as ToolbarButton5 } from "@kopexa/toolbar";
-import { useCallback as useCallback26, useMemo as useMemo16 } from "react";
-
-// src/ui/color-highlight-button/use-color-highlight.ts
-import { isMarkInSchema as isMarkInSchema3, isNodeTypeSelected as isNodeTypeSelected5 } from "@kopexa/editor-utils";
-import { HighlighterIcon } from "@kopexa/icons";
-import { useIsMobile } from "@kopexa/use-is-mobile";
-import * as React17 from "react";
-import { useHotkeys } from "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) {
-  if (!editor || !editor.isEditable) return false;
-  if (!isMarkInSchema3("highlight", editor) || isNodeTypeSelected5(editor, ["image"]))
-    return false;
-  return editor.can().setMark("highlight");
+// src/ui/list-dropdown-menu/index.tsx
+import { jsx as jsx24, jsxs as jsxs18 } from "react/jsx-runtime";
+function canToggleAnyList(editor, listTypes) {
+  if (!editor) return false;
+  return listTypes.some((type) => canToggleList(editor, type));
 }
-function isColorHighlightActive(editor, highlightColor) {
-  if (!editor || !editor.isEditable) return false;
-  return highlightColor ? editor.isActive("highlight", { color: highlightColor }) : editor.isActive("highlight");
+function isAnyListActive(editor, listTypes) {
+  if (!editor) return false;
+  return listTypes.some((type) => isListActive(editor, type));
 }
-function removeHighlight(editor) {
-  if (!editor || !editor.isEditable) return false;
-  if (!canColorHighlight(editor)) return false;
-  return editor.chain().focus().unsetMark("highlight").run();
+function getFilteredListOptions(availableTypes) {
+  return listOptions.filter(
+    (option) => !option.type || availableTypes.includes(option.type)
+  );
 }
-function shouldShowButton4(props) {
-  const { editor, hideWhenUnavailable } = props;
-  if (!editor || !editor.isEditable) return false;
-  if (!isMarkInSchema3("highlight", editor)) return false;
-  if (hideWhenUnavailable && !editor.isActive("code")) {
-    return canColorHighlight(editor);
+function shouldShowListDropdown(params) {
+  const { editor, hideWhenUnavailable, listInSchema, canToggleAny } = params;
+  if (!listInSchema || !editor) {
+    return false;
   }
-  return true;
-}
-function useColorHighlight(config) {
-  const {
-    editor: providedEditor,
-    label,
-    highlightColor,
-    hideWhenUnavailable = false,
-    onApplied
-  } = config;
-  const { editor } = useTiptapEditor(providedEditor);
-  const isMobile = useIsMobile();
-  const [isVisible, setIsVisible] = React17.useState(true);
-  const canColorHighlightState = canColorHighlight(editor);
-  const isActive = isColorHighlightActive(editor, highlightColor);
-  React17.useEffect(() => {
-    if (!editor) return;
-    const handleSelectionUpdate = () => {
-      setIsVisible(shouldShowButton4({ editor, hideWhenUnavailable }));
-    };
-    handleSelectionUpdate();
-    editor.on("selectionUpdate", handleSelectionUpdate);
-    return () => {
-      editor.off("selectionUpdate", handleSelectionUpdate);
-    };
-  }, [editor, hideWhenUnavailable]);
-  const handleColorHighlight = React17.useCallback(() => {
-    if (!editor || !canColorHighlightState || !highlightColor || !label)
+  if (hideWhenUnavailable) {
+    if (isNodeSelection6(editor.state.selection) || !canToggleAny) {
       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);
-    if (success) {
-      onApplied == null ? void 0 : onApplied({ color: "", label: "Remove highlight" });
     }
-    return success;
-  }, [editor, onApplied]);
-  useHotkeys(
-    COLOR_HIGHLIGHT_SHORTCUT_KEY,
-    (event) => {
-      event.preventDefault();
-      handleColorHighlight();
+  }
+  return true;
+}
+function useListDropdownState(editor, availableTypes) {
+  const [isOpen, setIsOpen] = useState23(false);
+  const listInSchema = availableTypes.some(
+    (type) => isNodeInSchema4(type, editor)
+  );
+  const filteredLists = useMemo18(
+    () => getFilteredListOptions(availableTypes),
+    [availableTypes]
+  );
+  const canToggleAny = canToggleAnyList(editor, availableTypes);
+  const isAnyActive = isAnyListActive(editor, availableTypes);
+  const handleOpenChange = useCallback24(
+    (open, callback) => {
+      setIsOpen(open);
+      callback == null ? void 0 : callback(open);
     },
-    {
-      enabled: isVisible && canColorHighlightState,
-      enableOnContentEditable: !isMobile,
-      enableOnFormTags: true
-    }
+    []
   );
   return {
-    isVisible,
-    isActive,
-    handleColorHighlight,
-    handleRemoveHighlight,
-    canColorHighlight: canColorHighlightState,
-    label: label || `Highlight`,
-    shortcutKeys: COLOR_HIGHLIGHT_SHORTCUT_KEY,
-    Icon: HighlighterIcon
+    isOpen,
+    setIsOpen,
+    listInSchema,
+    filteredLists,
+    canToggleAny,
+    isAnyActive,
+    handleOpenChange
   };
 }
+function useActiveListIcon(editor, filteredLists) {
+  return useCallback24(() => {
+    const activeOption = filteredLists.find(
+      (option) => isListActive(editor, option.type)
+    );
+    return activeOption ? /* @__PURE__ */ jsx24(activeOption.icon, {}) : /* @__PURE__ */ jsx24(ListIcon4, {});
+  }, [editor, filteredLists]);
+}
+function ListDropdownMenu({
+  editor: providedEditor,
+  types = ["bulletList", "orderedList", "taskList"],
+  hideWhenUnavailable = false,
+  onOpenChange,
+  ...props
+}) {
+  const { editor } = useTiptapEditor11(providedEditor);
+  const {
+    isOpen,
+    listInSchema,
+    filteredLists,
+    canToggleAny,
+    isAnyActive,
+    handleOpenChange
+  } = useListDropdownState(editor, types);
+  const getActiveIcon = useActiveListIcon(editor, filteredLists);
+  const show = useMemo18(() => {
+    return shouldShowListDropdown({
+      editor,
+      listTypes: types,
+      hideWhenUnavailable,
+      listInSchema,
+      canToggleAny
+    });
+  }, [editor, types, hideWhenUnavailable, listInSchema, canToggleAny]);
+  const handleOnOpenChange = useCallback24(
+    (open) => handleOpenChange(open, onOpenChange),
+    [handleOpenChange, onOpenChange]
+  );
+  if (!show || !editor || !editor.isEditable) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs18(DropdownMenu.Root, { open: isOpen, onOpenChange: handleOnOpenChange, children: [
+    /* @__PURE__ */ jsx24(DropdownMenu.Trigger, { asChild: true, children: /* @__PURE__ */ jsx24(
+      Button8,
+      {
+        type: "button",
+        variant: "ghost",
+        color: "default",
+        "data-active-state": isAnyActive ? "on" : "off",
+        tabIndex: -1,
+        "aria-label": "List options",
+        tooltip: "List",
+        endContent: /* @__PURE__ */ jsx24(ChevronDownIcon, {}),
+        ...props,
+        children: getActiveIcon()
+      }
+    ) }),
+    /* @__PURE__ */ jsx24(DropdownMenu.Content, { children: /* @__PURE__ */ jsx24(DropdownMenu.Group, { children: filteredLists.map((option) => /* @__PURE__ */ jsx24(DropdownMenu.Item, { asChild: true, children: /* @__PURE__ */ jsx24(
+      ListButton,
+      {
+        editor,
+        type: option.type,
+        text: option.label,
+        hideWhenUnavailable,
+        tooltip: "",
+        fullWidth: true,
+        spacing: "start"
+      }
+    ) }, option.type)) }) })
+  ] });
+}
 
-// src/ui/color-highlight-button/color-highlight-button.tsx
-import { Fragment as Fragment5, jsx as jsx23, jsxs as jsxs17 } from "react/jsx-runtime";
-var ColorHighlightButton = ({
+// src/ui/table-button/index.tsx
+import { useTiptapEditor as useTiptapEditor12 } from "@kopexa/editor-utils";
+import { ToolbarButton as ToolbarButton4 } from "@kopexa/toolbar";
+import { useCallback as useCallback25 } from "react";
+import { Fragment as Fragment5, jsx as jsx25, jsxs as jsxs19 } from "react/jsx-runtime";
+var TableButton = ({
   editor: providedEditor,
-  highlightColor,
   text,
   hideWhenUnavailable = false,
-  onApplied,
-  showShortcut = false,
+  onToggled,
   onClick,
   children,
-  style,
-  className,
   ...buttonProps
 }) => {
-  const { editor } = useTiptapEditor(providedEditor);
+  const { editor } = useTiptapEditor12(providedEditor);
   const {
     isVisible,
-    canColorHighlight: canColorHighlight2,
+    canToggle: canToggle3,
     isActive,
-    handleColorHighlight,
+    handleToggle,
     label,
-    shortcutKeys
-  } = useColorHighlight({
+    //     shortcutKeys,
+    Icon
+  } = useTableBlock({
     editor,
-    highlightColor,
-    label: text || `Toggle highlight (${highlightColor})`,
     hideWhenUnavailable,
-    onApplied
+    onToggled
   });
-  const handleClick = useCallback26(
+  const handleClick = useCallback25(
     (event) => {
       onClick == null ? void 0 : onClick(event);
       if (event.defaultPrevented) return;
-      handleColorHighlight();
+      handleToggle();
     },
-    [handleColorHighlight, onClick]
-  );
-  const buttonStyle = useMemo16(
-    () => ({
-      ...style,
-      "--highlight-color": highlightColor
-    }),
-    [highlightColor, style]
+    [handleToggle, onClick]
   );
   if (!isVisible) {
     return null;
   }
-  const styles = colorHighlightButton();
-  return /* @__PURE__ */ jsxs17(
-    ToolbarButton5,
+  return /* @__PURE__ */ jsx25(
+    ToolbarButton4,
     {
       type: "button",
-      disabled: !canColorHighlight2,
-      "data-disabled": !canColorHighlight2,
       variant: "ghost",
       color: "default",
       "data-active-state": isActive ? "on" : "off",
+      disabled: !canToggle3,
+      "data-disabled": !canToggle3,
       tabIndex: -1,
       "aria-label": label,
-      shortcutKeys,
       "aria-pressed": isActive,
+      title: label,
       onClick: handleClick,
-      style: buttonStyle,
-      className: styles.button({ className }),
-      isIconOnly: true,
+      isIconOnly: !text && !children,
       ...buttonProps,
-      children: [
-        /* @__PURE__ */ jsx23(
-          "span",
-          {
-            "data-active-state": isActive ? "on" : "off",
-            className: styles.mark()
-          }
-        ),
-        children || /* @__PURE__ */ jsxs17(Fragment5, { children: [
-          /* @__PURE__ */ jsx23(
-            "span",
-            {
-              style: { "--highlight-color": highlightColor }
-            }
-          ),
-          text
-        ] })
-      ]
+      children: children || /* @__PURE__ */ jsxs19(Fragment5, { children: [
+        /* @__PURE__ */ jsx25(Icon, {}),
+        text && /* @__PURE__ */ jsx25("span", { children: text })
+      ] })
     }
   );
 };
 
-// src/ui/color-highlight-popover/color-highlight-popover.tsx
-import { jsx as jsx24, jsxs as jsxs18 } from "react/jsx-runtime";
-var ColorHighlightPopoverButton = ({
-  className,
-  children,
-  ...props
-}) => /* @__PURE__ */ jsx24(
-  IconButton8,
-  {
-    type: "button",
-    className,
-    variant: "ghost",
-    color: "default",
-    tabIndex: -1,
-    "aria-label": "Highlight text",
-    tooltip: "Highlight",
-    isIconOnly: !children,
-    ...props,
-    children: children != null ? children : /* @__PURE__ */ jsx24(HighlighterIcon2, {})
-  }
-);
-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 = useRef10(null);
-  const menuItems = useMemo17(
-    () => [...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__ */ jsxs18("div", { ref: containerRef, className: "flex gap-1 items-center", children: [
-    /* @__PURE__ */ jsx24(
-      "div",
-      {
-        className: "flex items-center gap-1 outline-none",
-        "data-orientation": "horizontal",
-        children: colors.map((color, index) => /* @__PURE__ */ jsx24(
-          ColorHighlightButton,
-          {
-            editor,
-            highlightColor: color.value,
-            "aria-label": `${color.label} highlight color`,
-            tabIndex: index === selectedIndex ? 0 : -1,
-            "data-highlighted": selectedIndex === index
-          },
-          color.value
-        ))
-      }
-    ),
-    /* @__PURE__ */ jsx24(ToolbarSeparator2, { orientation: "vertical" }),
-    /* @__PURE__ */ jsx24("div", { className: "tiptap-button-group", children: /* @__PURE__ */ jsx24(
-      IconButton8,
-      {
-        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__ */ jsx24(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 } = useTiptapEditor(providedEditor);
-  const [isOpen, setIsOpen] = useState24(false);
-  const { isVisible, canColorHighlight: canColorHighlight2, isActive, label } = useColorHighlight({
-    editor,
-    hideWhenUnavailable,
-    onApplied
-  });
-  if (!isVisible) return null;
-  return /* @__PURE__ */ jsxs18(Popover2.Root, { open: isOpen, onOpenChange: setIsOpen, spacing: "dense", children: [
-    /* @__PURE__ */ jsx24(
-      Popover2.Trigger,
-      {
-        render: /* @__PURE__ */ jsx24(
-          ColorHighlightPopoverButton,
-          {
-            disabled: !canColorHighlight2,
-            "data-disabled": !canColorHighlight2,
-            "data-active-state": isActive ? "on" : "off",
-            "aria-pressed": isActive,
-            "aria-label": label,
-            title: label,
-            ...props
-          }
-        )
-      }
-    ),
-    /* @__PURE__ */ jsx24(Popover2.Content, { "aria-label": "Highlight colors", children: /* @__PURE__ */ jsx24(ColorHighlightPopoverContent, { editor, colors }) })
-  ] });
-}
-
-// src/ui/heading-dropdown-menu/index.tsx
-import { Button as Button8 } from "@kopexa/button";
-import { DropdownMenu } from "@kopexa/dropdown-menu";
-import { isNodeInSchema as isNodeInSchema6 } from "@kopexa/editor-utils";
-import { ChevronDownIcon, HeadingIcon } from "@kopexa/icons";
-import { isNodeSelection as isNodeSelection6 } from "@tiptap/react";
-import * as React19 from "react";
+// src/ui/text-align-button/text-align-button.tsx
+import { IconButton as IconButton9 } from "@kopexa/button";
+import { useTiptapEditor as useTiptapEditor14 } from "@kopexa/editor-utils";
+import { useCallback as useCallback27 } from "react";
 
-// src/ui/heading-button/index.tsx
-import { Button as Button7 } from "@kopexa/button";
-import { isNodeInSchema as isNodeInSchema5 } from "@kopexa/editor-utils";
+// src/ui/text-align-button/use-text-align.ts
 import {
-  HeadingFiveIcon,
-  HeadingFourIcon,
-  HeadingOneIcon as HeadingOneIcon2,
-  HeadingSixIcon,
-  HeadingThreeIcon as HeadingThreeIcon2,
-  HeadingTwoIcon as HeadingTwoIcon2
+  isExtensionAvailable as isExtensionAvailable2,
+  isNodeTypeSelected as isNodeTypeSelected4,
+  useTiptapEditor as useTiptapEditor13
+} from "@kopexa/editor-utils";
+import {
+  AlignCenterIcon,
+  AlignJustifyIcon,
+  AlignLeftIcon,
+  AlignRightIcon
 } from "@kopexa/icons";
-import * as React18 from "react";
-
-// src/ui/heading-button/utils.ts
-import { isNodeSelection as isNodeSelection5 } from "@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"
+import { useCallback as useCallback26, useEffect as useEffect25, useState as useState24 } from "react";
+var TEXT_ALIGN_SHORTCUT_KEYS = {
+  left: "mod+shift+l",
+  center: "mod+shift+e",
+  right: "mod+shift+r",
+  justify: "mod+shift+j"
 };
-function canToggleHeading(editor, level) {
-  if (!editor) return false;
-  try {
-    return editor.can().toggleNode("heading", "paragraph", { level });
-  } catch {
+var textAlignIcons = {
+  left: AlignLeftIcon,
+  center: AlignCenterIcon,
+  right: AlignRightIcon,
+  justify: 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 (!isExtensionAvailable2(editor, "textAlign") || isNodeTypeSelected4(editor, ["image"]))
     return false;
-  }
+  return editor.can().setTextAlign(align);
 }
-function isHeadingActive(editor, level) {
-  if (!editor) return false;
-  return editor.isActive("heading", { level });
+function hasSetTextAlign(commands) {
+  return "setTextAlign" in commands;
 }
-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 isTextAlignActive(editor, align) {
+  if (!editor || !editor.isEditable) return false;
+  return editor.isActive({ textAlign: align });
 }
-function isHeadingButtonDisabled(editor, level, userDisabled = false) {
-  if (!editor) return true;
-  if (userDisabled) return true;
-  if (!canToggleHeading(editor, level)) return true;
+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 shouldShowHeadingButton(params) {
-  const { editor, hideWhenUnavailable, headingInSchema } = params;
-  if (!headingInSchema || !editor) {
-    return false;
-  }
-  if (hideWhenUnavailable) {
-    if (isNodeSelection5(editor.state.selection)) {
-      return false;
+function shouldShowButton3(props) {
+  const { editor, hideWhenUnavailable, align } = props;
+  if (!editor || !editor.isEditable) return false;
+  if (!isExtensionAvailable2(editor, "textAlign")) return false;
+  if (hideWhenUnavailable && !editor.isActive("code")) {
+    return canSetTextAlign(editor, align);
+  }
+  return true;
+}
+function useTextAlign(config) {
+  const {
+    editor: providedEditor,
+    align,
+    hideWhenUnavailable = false,
+    onAligned
+  } = config;
+  const { editor } = useTiptapEditor13(providedEditor);
+  const [isVisible, setIsVisible] = useState24(true);
+  const canAlign = canSetTextAlign(editor, align);
+  const isActive = isTextAlignActive(editor, align);
+  useEffect25(() => {
+    if (!editor) return;
+    const handleSelectionUpdate = () => {
+      setIsVisible(shouldShowButton3({ editor, align, hideWhenUnavailable }));
+    };
+    handleSelectionUpdate();
+    editor.on("selectionUpdate", handleSelectionUpdate);
+    return () => {
+      editor.off("selectionUpdate", handleSelectionUpdate);
+    };
+  }, [editor, hideWhenUnavailable, align]);
+  const handleTextAlign = useCallback26(() => {
+    if (!editor) return false;
+    const success = setTextAlign(editor, align);
+    if (success) {
+      onAligned == null ? void 0 : onAligned();
+    }
+    return success;
+  }, [editor, align, onAligned]);
+  return {
+    isVisible,
+    isActive,
+    handleTextAlign,
+    canAlign,
+    label: textAlignLabels[align],
+    shortcutKeys: TEXT_ALIGN_SHORTCUT_KEYS[align],
+    Icon: textAlignIcons[align]
+  };
+}
+
+// src/ui/text-align-button/text-align-button.tsx
+import { jsx as jsx26 } from "react/jsx-runtime";
+var TextAlignButton = ({
+  editor: providedEditor,
+  align,
+  text,
+  hideWhenUnavailable = false,
+  onAligned,
+  showShortcut = false,
+  onClick,
+  children,
+  ...buttonProps
+}) => {
+  const { editor } = useTiptapEditor14(providedEditor);
+  const {
+    isVisible,
+    handleTextAlign,
+    label,
+    canAlign,
+    isActive,
+    Icon,
+    shortcutKeys
+  } = useTextAlign({
+    editor,
+    align,
+    hideWhenUnavailable,
+    onAligned
+  });
+  const handleClick = useCallback27(
+    (e) => {
+      onClick == null ? void 0 : onClick(e);
+      if (e.defaultPrevented) return;
+      handleTextAlign();
+    },
+    [handleTextAlign, onClick]
+  );
+  if (!isVisible) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx26(
+    IconButton9,
+    {
+      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__ */ jsx26(Icon, {})
+    }
+  );
+};
+
+// src/ui/turn-into-dropdown/turn-into-dropdown.tsx
+import { Button as Button11 } from "@kopexa/button";
+import { DropdownMenu as DropdownMenu2 } from "@kopexa/dropdown-menu";
+import { useTiptapEditor as useTiptapEditor23 } from "@kopexa/editor-utils";
+import { forwardRef } from "react";
+
+// src/ui/blockquote-button/blockquote-button.tsx
+import { useTiptapEditor as useTiptapEditor16 } from "@kopexa/editor-utils";
+import { ToolbarButton as ToolbarButton5 } from "@kopexa/toolbar";
+import * as React16 from "react";
+
+// src/ui/blockquote-button/use-blockquote.ts
+import {
+  findNodePosition,
+  isNodeInSchema as isNodeInSchema5,
+  isNodeTypeSelected as isNodeTypeSelected5,
+  isValidPosition,
+  useTiptapEditor as useTiptapEditor15
+} from "@kopexa/editor-utils";
+import { BlockquoteIcon as BlockquoteIcon2 } from "@kopexa/icons";
+import { NodeSelection as NodeSelection2, TextSelection as TextSelection2 } from "@tiptap/pm/state";
+import * as React15 from "react";
+var BLOCKQUOTE_SHORTCUT_KEY = "mod+shift+b";
+function canToggleBlockquote(editor, turnInto = true) {
+  var _a;
+  if (!editor || !editor.isEditable) return false;
+  if (!isNodeInSchema5("blockquote", editor) || isNodeTypeSelected5(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 TextSelection2) {
+      const pos = (_a = findNodePosition({
+        editor,
+        node: state.selection.$anchor.node(1)
+      })) == null ? void 0 : _a.pos;
+      if (!isValidPosition(pos)) return false;
+    }
+    return true;
+  } catch {
+    return false;
+  }
+}
+function toggleBlockquote(editor) {
+  var _a, _b, _c;
+  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 TextSelection2) {
+      const pos = (_a = findNodePosition({
+        editor,
+        node: state.selection.$anchor.node(1)
+      })) == null ? void 0 : _a.pos;
+      if (!isValidPosition(pos)) return false;
+      tr = tr.setSelection(NodeSelection2.create(state.doc, pos));
+      view.dispatch(tr);
+      state = view.state;
+    }
+    const selection = state.selection;
+    let chain = editor.chain().focus();
+    if (selection instanceof NodeSelection2) {
+      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 (!isNodeInSchema5("blockquote", editor)) return false;
+  if (hideWhenUnavailable && !editor.isActive("code")) {
+    return canToggleBlockquote(editor);
+  }
+  return true;
+}
+function useBlockquote(config) {
+  const {
+    editor: providedEditor,
+    hideWhenUnavailable = false,
+    onToggled
+  } = config || {};
+  const { editor } = useTiptapEditor15(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 }));
+    };
+    handleSelectionUpdate();
+    editor.on("selectionUpdate", handleSelectionUpdate);
+    return () => {
+      editor.off("selectionUpdate", handleSelectionUpdate);
+    };
+  }, [editor, hideWhenUnavailable]);
+  const handleToggle = React15.useCallback(() => {
+    if (!editor) return false;
+    const success = toggleBlockquote(editor);
+    if (success) {
+      onToggled == null ? void 0 : onToggled();
+    }
+    return success;
+  }, [editor, onToggled]);
+  return {
+    isVisible,
+    isActive,
+    handleToggle,
+    canToggle: canToggle3,
+    label: "Blockquote",
+    shortcutKeys: BLOCKQUOTE_SHORTCUT_KEY,
+    Icon: BlockquoteIcon2
+  };
+}
+
+// src/ui/blockquote-button/blockquote-button.tsx
+import { Fragment as Fragment6, jsx as jsx27, jsxs as jsxs20 } from "react/jsx-runtime";
+var BlockquoteButton = ({
+  editor: providedEditor,
+  text,
+  hideWhenUnavailable = false,
+  onToggled,
+  showShortcut = false,
+  onClick,
+  children,
+  ...buttonProps
+}) => {
+  const { editor } = useTiptapEditor16(providedEditor);
+  const {
+    isVisible,
+    canToggle: canToggle3,
+    isActive,
+    handleToggle,
+    label,
+    shortcutKeys,
+    Icon
+  } = useBlockquote({
+    editor,
+    hideWhenUnavailable,
+    onToggled
+  });
+  const handleClick = React16.useCallback(
+    (event) => {
+      onClick == null ? void 0 : onClick(event);
+      if (event.defaultPrevented) return;
+      handleToggle();
+    },
+    [handleToggle, onClick]
+  );
+  if (!isVisible) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx27(
+    ToolbarButton5,
+    {
+      type: "button",
+      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,
+      shortcutKeys,
+      onClick: handleClick,
+      isIconOnly: !text && !children,
+      ...buttonProps,
+      children: children != null ? children : /* @__PURE__ */ jsxs20(Fragment6, { children: [
+        /* @__PURE__ */ jsx27(Icon, {}),
+        text && /* @__PURE__ */ jsx27("span", { children: text })
+      ] })
+    }
+  );
+};
+
+// src/ui/codeblock-button/code-block-button.tsx
+import { useTiptapEditor as useTiptapEditor18 } from "@kopexa/editor-utils";
+import { CodeblockIcon as CodeblockIcon2 } from "@kopexa/icons";
+import { ToolbarButton as ToolbarButton6 } from "@kopexa/toolbar";
+import { useCallback as useCallback31 } from "react";
+
+// src/ui/codeblock-button/use-code-block.ts
+import {
+  findNodePosition as findNodePosition2,
+  isNodeInSchema as isNodeInSchema6,
+  isNodeTypeSelected as isNodeTypeSelected6,
+  isValidPosition as isValidPosition2,
+  useTiptapEditor as useTiptapEditor17
+} from "@kopexa/editor-utils";
+import { CodeblockIcon } from "@kopexa/icons";
+import { NodeSelection as NodeSelection3, TextSelection as TextSelection3 } from "@tiptap/pm/state";
+import * as React17 from "react";
+var CODE_BLOCK_SHORTCUT_KEY = "mod+alt+c";
+function canToggle2(editor, turnInto = true) {
+  var _a;
+  if (!editor || !editor.isEditable) return false;
+  if (!isNodeInSchema6("codeBlock", editor) || isNodeTypeSelected6(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 TextSelection3) {
+      const pos = (_a = findNodePosition2({
+        editor,
+        node: state.selection.$anchor.node(1)
+      })) == null ? void 0 : _a.pos;
+      if (!isValidPosition2(pos)) return false;
     }
+    return true;
+  } catch {
+    return false;
+  }
+}
+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 TextSelection3) {
+      const pos = (_a = findNodePosition2({
+        editor,
+        node: state.selection.$anchor.node(1)
+      })) == null ? void 0 : _a.pos;
+      if (!isValidPosition2(pos)) return false;
+      tr = tr.setSelection(NodeSelection3.create(state.doc, pos));
+      view.dispatch(tr);
+      state = view.state;
+    }
+    const selection = state.selection;
+    let chain = editor.chain().focus();
+    if (selection instanceof NodeSelection3) {
+      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;
+  }
+}
+function shouldShowButton5(props) {
+  const { editor, hideWhenUnavailable } = props;
+  if (!editor || !editor.isEditable) return false;
+  if (!isNodeInSchema6("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
-import { jsx as jsx25 } from "react/jsx-runtime";
-var headingIcons = {
-  1: HeadingOneIcon2,
-  2: HeadingTwoIcon2,
-  3: HeadingThreeIcon2,
-  4: HeadingFourIcon,
-  5: HeadingFiveIcon,
-  6: HeadingSixIcon
-};
-function useHeadingState(editor, level, disabled = false) {
-  const headingInSchema = isNodeInSchema5("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 } = useTiptapEditor17(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: CodeblockIcon
   };
 }
-var HeadingButton = ({
+
+// src/ui/codeblock-button/code-block-button.tsx
+import { Fragment as Fragment7, jsx as jsx28, jsxs as jsxs21 } from "react/jsx-runtime";
+var CodeBlockButton = ({
   editor: providedEditor,
-  level,
   text,
   hideWhenUnavailable = false,
-  className = "",
-  disabled,
+  onToggled,
+  showShortcut = false,
   onClick,
   children,
-  ref,
   ...buttonProps
 }) => {
-  const { editor } = 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 } = useTiptapEditor18(providedEditor);
+  const { isVisible, canToggle: canToggle3, isActive, handleToggle, label, shortcutKeys } = useCodeBlock({
+    editor,
+    hideWhenUnavailable,
+    onToggled
+  });
+  const handleClick = useCallback31(
+    (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__ */ jsx25(
-    Button7,
+  return /* @__PURE__ */ jsx28(
+    ToolbarButton6,
     {
       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__ */ jsx25(Icon, {}),
+      isIconOnly: !text && !children,
       ...buttonProps,
-      ref,
-      children: children || text
+      children: children != null ? children : /* @__PURE__ */ jsxs21(Fragment7, { children: [
+        /* @__PURE__ */ jsx28(CodeblockIcon2, {}),
+        text && /* @__PURE__ */ jsx28("span", { children: text })
+      ] })
     }
   );
 };
 
-// src/ui/heading-dropdown-menu/index.tsx
-import { jsx as jsx26, jsxs as jsxs19 } from "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 } = useTiptapEditor(providedEditor);
-  const headingInSchema = isNodeInSchema6("heading", editor);
-  const handleOnOpenChange = React19.useCallback(
-    (open) => {
-      setIsOpen(open);
-      onOpenChange == null ? void 0 : onOpenChange(open);
-    },
-    [onOpenChange]
-  );
-  const getActiveIcon = React19.useCallback(() => {
-    if (!editor) return /* @__PURE__ */ jsx26(HeadingIcon, {});
-    const activeLevel = levels.find(
-      (level) => editor.isActive("heading", { level })
-    );
-    if (!activeLevel) return /* @__PURE__ */ jsx26(HeadingIcon, {});
-    const ActiveIcon = headingIcons[activeLevel];
-    return /* @__PURE__ */ jsx26(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 (isNodeSelection6(editor.state.selection) || !canToggleAnyHeading()) {
-        return false;
-      }
-    }
-    return true;
-  }, [headingInSchema, editor, hideWhenUnavailable, canToggleAnyHeading]);
-  if (!show || !editor || !editor.isEditable) {
-    return null;
-  }
-  return /* @__PURE__ */ jsxs19(DropdownMenu.Root, { open: isOpen, onOpenChange: handleOnOpenChange, children: [
-    /* @__PURE__ */ jsx26(DropdownMenu.Trigger, { asChild: true, children: /* @__PURE__ */ jsx26(
-      Button8,
-      {
-        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__ */ jsx26(ChevronDownIcon, {}),
-        ...props,
-        children: getActiveIcon()
-      }
-    ) }),
-    /* @__PURE__ */ jsx26(DropdownMenu.Content, { children: /* @__PURE__ */ jsx26(DropdownMenu.Group, { children: levels.map((level) => /* @__PURE__ */ jsx26(DropdownMenu.Item, { asChild: true, children: /* @__PURE__ */ jsx26(
-      HeadingButton,
-      {
-        editor,
-        level,
-        text: getFormattedHeadingName(level),
-        tooltip: "",
-        fullWidth: true,
-        spacing: "start"
-      }
-    ) }, `heading-${level}`)) }) })
-  ] });
-}
-
-// src/ui/list-dropdown-menu/index.tsx
-import { Button as Button10 } from "@kopexa/button";
-import { DropdownMenu as DropdownMenu2 } from "@kopexa/dropdown-menu";
-import { isNodeInSchema as isNodeInSchema8 } from "@kopexa/editor-utils";
-import { ChevronDownIcon as ChevronDownIcon2, ListIcon as ListIcon4 } from "@kopexa/icons";
-import { isNodeSelection as isNodeSelection8 } from "@tiptap/react";
-import { useCallback as useCallback30, useMemo as useMemo21, useState as useState26 } from "react";
-
-// src/ui/list-button/index.tsx
+// src/ui/heading-button/index.tsx
 import { Button as Button9 } from "@kopexa/button";
-import { isNodeInSchema as isNodeInSchema7 } from "@kopexa/editor-utils";
-import { ListIcon as ListIcon3, ListOrderedIcon as ListOrderedIcon2, ListTodoIcon as ListTodoIcon2 } from "@kopexa/icons";
+import { isNodeInSchema as isNodeInSchema7, useTiptapEditor as useTiptapEditor19 } from "@kopexa/editor-utils";
+import {
+  HeadingFiveIcon,
+  HeadingFourIcon,
+  HeadingOneIcon as HeadingOneIcon2,
+  HeadingSixIcon,
+  HeadingThreeIcon as HeadingThreeIcon2,
+  HeadingTwoIcon as HeadingTwoIcon2
+} from "@kopexa/icons";
+import * as React18 from "react";
+
+// src/ui/heading-button/utils.ts
 import { isNodeSelection as isNodeSelection7 } from "@tiptap/react";
-import { useCallback as useCallback29, useMemo as useMemo20 } from "react";
-import { jsx as jsx27 } from "react/jsx-runtime";
-var listOptions = [
-  {
-    label: "Bullet List",
-    type: "bulletList",
-    icon: ListIcon3
-  },
-  {
-    label: "Ordered List",
-    type: "orderedList",
-    icon: ListOrderedIcon2
-  },
-  {
-    label: "Task List",
-    type: "taskList",
-    icon: ListTodoIcon2
-  }
-];
-var listShortcutKeys = {
-  bulletList: "Ctrl-Shift-8",
-  orderedList: "Ctrl-Shift-7",
-  taskList: "Ctrl-Shift-9"
+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 (isNodeSelection7(editor.state.selection) || !canToggleList(editor, type)) {
+    if (isNodeSelection7(editor.state.selection)) {
       return false;
     }
   }
   return true;
 }
-function useListState(editor, type) {
-  const listInSchema = isNodeInSchema7(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
+import { jsx as jsx29 } from "react/jsx-runtime";
+var headingIcons = {
+  1: HeadingOneIcon2,
+  2: HeadingTwoIcon2,
+  3: HeadingThreeIcon2,
+  4: HeadingFourIcon,
+  5: HeadingFiveIcon,
+  6: HeadingSixIcon
+};
+function useHeadingState(editor, level, disabled = false) {
+  const headingInSchema = isNodeInSchema7("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 } = useTiptapEditor(providedEditor);
-  const { listInSchema, listOption, isActive, shortcutKey } = useListState(
-    editor,
-    type
-  );
-  const Icon = (listOption == null ? void 0 : listOption.icon) || ListIcon3;
-  const handleClick = useCallback29(
+  const { editor } = useTiptapEditor19(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 = useMemo20(() => {
-    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__ */ jsx27(
+  return /* @__PURE__ */ jsx29(
     Button9,
     {
       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__ */ jsx27(Icon, {}),
+      startContent: /* @__PURE__ */ jsx29(Icon, {}),
       ...buttonProps,
       ref,
       children: children || text
@@ -6884,161 +7437,196 @@ var ListButton = ({
   );
 };
 
-// src/ui/list-dropdown-menu/index.tsx
-import { jsx as jsx28, jsxs as jsxs20 } from "react/jsx-runtime";
-function canToggleAnyList(editor, listTypes) {
+// src/ui/text-button/text-button.tsx
+import { Button as Button10 } from "@kopexa/button";
+import { Chip } from "@kopexa/chip";
+import { useTiptapEditor as useTiptapEditor21 } from "@kopexa/editor-utils";
+import { parseShortcutKeys } from "@kopexa/shared-utils";
+import { useCallback as useCallback34 } from "react";
+
+// src/ui/text-button/use-text.ts
+import {
+  findNodePosition as findNodePosition3,
+  getSelectedBlockNodes,
+  isNodeInSchema as isNodeInSchema8,
+  isValidPosition as isValidPosition3,
+  selectionWithinConvertibleTypes,
+  useTiptapEditor as useTiptapEditor20
+} from "@kopexa/editor-utils";
+import { TypeIcon as TypeIcon2 } from "@kopexa/icons";
+import { useIsMobile as useIsMobile2 } from "@kopexa/use-is-mobile";
+import { NodeSelection as NodeSelection4, TextSelection as TextSelection4 } from "@tiptap/pm/state";
+import { useCallback as useCallback33, useEffect as useEffect28, useState as useState27 } from "react";
+import { useHotkeys as useHotkeys2 } from "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 (!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));
+  return editor.isActive("paragraph");
 }
-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) {
+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 = getSelectedBlockNodes(editor);
+    const isPossibleToTurnInto = selectionWithinConvertibleTypes(editor, [
+      "paragraph",
+      "heading",
+      "bulletList",
+      "orderedList",
+      "taskList",
+      "blockquote",
+      "codeBlock"
+    ]) && blocks.length === 1;
+    if ((state.selection.empty || state.selection instanceof TextSelection4) && isPossibleToTurnInto) {
+      const pos = (_a = findNodePosition3({
+        editor,
+        node: state.selection.$anchor.node(1)
+      })) == null ? void 0 : _a.pos;
+      if (!isValidPosition3(pos)) return false;
+      tr = tr.setSelection(NodeSelection4.create(state.doc, pos));
+      view.dispatch(tr);
+      state = view.state;
+    }
+    const selection = state.selection;
+    let chain = editor.chain().focus();
+    if (selection instanceof NodeSelection4) {
+      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(TextSelection4.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 (isNodeSelection8(editor.state.selection) || !canToggleAny) {
-      return false;
-    }
+}
+function shouldShowButton6(props) {
+  const { editor, hideWhenUnavailable } = props;
+  if (!editor || !editor.isEditable) return false;
+  if (!hideWhenUnavailable) {
+    return true;
+  }
+  if (!isNodeInSchema8("paragraph", editor)) return false;
+  if (!editor.isActive("code")) {
+    return canToggleText(editor);
   }
   return true;
 }
-function useListDropdownState(editor, availableTypes) {
-  const [isOpen, setIsOpen] = useState26(false);
-  const listInSchema = availableTypes.some(
-    (type) => isNodeInSchema8(type, editor)
-  );
-  const filteredLists = useMemo21(
-    () => getFilteredListOptions(availableTypes),
-    [availableTypes]
-  );
-  const canToggleAny = canToggleAnyList(editor, availableTypes);
-  const isAnyActive = isAnyListActive(editor, availableTypes);
-  const handleOpenChange = useCallback30(
-    (open, callback) => {
-      setIsOpen(open);
-      callback == null ? void 0 : callback(open);
-    },
-    []
-  );
-  return {
-    isOpen,
-    setIsOpen,
-    listInSchema,
-    filteredLists,
-    canToggleAny,
-    isAnyActive,
-    handleOpenChange
-  };
-}
-function useActiveListIcon(editor, filteredLists) {
-  return useCallback30(() => {
-    const activeOption = filteredLists.find(
-      (option) => isListActive(editor, option.type)
-    );
-    return activeOption ? /* @__PURE__ */ jsx28(activeOption.icon, {}) : /* @__PURE__ */ jsx28(ListIcon4, {});
-  }, [editor, filteredLists]);
-}
-function ListDropdownMenu({
-  editor: providedEditor,
-  types = ["bulletList", "orderedList", "taskList"],
-  hideWhenUnavailable = false,
-  onOpenChange,
-  ...props
-}) {
-  const { editor } = useTiptapEditor(providedEditor);
+function useText(config) {
   const {
-    isOpen,
-    listInSchema,
-    filteredLists,
-    canToggleAny,
-    isAnyActive,
-    handleOpenChange
-  } = useListDropdownState(editor, types);
-  const getActiveIcon = useActiveListIcon(editor, filteredLists);
-  const show = useMemo21(() => {
-    return shouldShowListDropdown({
-      editor,
-      listTypes: types,
-      hideWhenUnavailable,
-      listInSchema,
-      canToggleAny
-    });
-  }, [editor, types, hideWhenUnavailable, listInSchema, canToggleAny]);
-  const handleOnOpenChange = useCallback30(
-    (open) => handleOpenChange(open, onOpenChange),
-    [handleOpenChange, onOpenChange]
-  );
-  if (!show || !editor || !editor.isEditable) {
-    return null;
-  }
-  return /* @__PURE__ */ jsxs20(DropdownMenu2.Root, { open: isOpen, onOpenChange: handleOnOpenChange, children: [
-    /* @__PURE__ */ jsx28(DropdownMenu2.Trigger, { asChild: true, children: /* @__PURE__ */ jsx28(
-      Button10,
-      {
-        type: "button",
-        variant: "ghost",
-        color: "default",
-        "data-active-state": isAnyActive ? "on" : "off",
-        tabIndex: -1,
-        "aria-label": "List options",
-        tooltip: "List",
-        endContent: /* @__PURE__ */ jsx28(ChevronDownIcon2, {}),
-        ...props,
-        children: getActiveIcon()
-      }
-    ) }),
-    /* @__PURE__ */ jsx28(DropdownMenu2.Content, { children: /* @__PURE__ */ jsx28(DropdownMenu2.Group, { children: filteredLists.map((option) => /* @__PURE__ */ jsx28(DropdownMenu2.Item, { asChild: true, children: /* @__PURE__ */ jsx28(
-      ListButton,
-      {
-        editor,
-        type: option.type,
-        text: option.label,
-        hideWhenUnavailable,
-        tooltip: "",
-        fullWidth: true,
-        spacing: "start"
-      }
-    ) }, option.type)) }) })
-  ] });
+    editor: providedEditor,
+    hideWhenUnavailable = false,
+    onToggled
+  } = config || {};
+  const { editor } = useTiptapEditor20(providedEditor);
+  const isMobile = useIsMobile2();
+  const [isVisible, setIsVisible] = useState27(true);
+  const canToggle3 = canToggleText(editor);
+  const isActive = isParagraphActive(editor);
+  useEffect28(() => {
+    if (!editor) return;
+    const handleSelectionUpdate = () => {
+      setIsVisible(shouldShowButton6({ editor, hideWhenUnavailable }));
+    };
+    handleSelectionUpdate();
+    editor.on("selectionUpdate", handleSelectionUpdate);
+    return () => {
+      editor.off("selectionUpdate", handleSelectionUpdate);
+    };
+  }, [editor, hideWhenUnavailable]);
+  const handleToggle = useCallback33(() => {
+    if (!editor) return false;
+    const success = toggleParagraph(editor);
+    if (success) {
+      onToggled == null ? void 0 : onToggled();
+    }
+    return success;
+  }, [editor, onToggled]);
+  useHotkeys2(
+    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: TypeIcon2
+  };
 }
 
-// src/ui/table-button/index.tsx
-import { ToolbarButton as ToolbarButton6 } from "@kopexa/toolbar";
-import { useCallback as useCallback31 } from "react";
-import { Fragment as Fragment6, jsx as jsx29, jsxs as jsxs21 } from "react/jsx-runtime";
-var TableButton = ({
+// src/ui/text-button/text-button.tsx
+import { Fragment as Fragment8, jsx as jsx30, jsxs as jsxs22 } from "react/jsx-runtime";
+function TextShortcutBadge({
+  shortcutKeys = TEXT_SHORTCUT_KEY
+}) {
+  return /* @__PURE__ */ jsx30(Chip, { children: parseShortcutKeys({ shortcutKeys }) });
+}
+var TextButton = ({
   editor: providedEditor,
   text,
   hideWhenUnavailable = false,
   onToggled,
+  showShortcut = false,
   onClick,
   children,
+  ref,
   ...buttonProps
 }) => {
-  const { editor } = useTiptapEditor(providedEditor);
+  const { editor } = useTiptapEditor21(providedEditor);
   const {
     isVisible,
     canToggle: canToggle3,
     isActive,
     handleToggle,
     label,
-    //     shortcutKeys,
+    shortcutKeys,
     Icon
-  } = useTableBlock({
+  } = useText({
     editor,
     hideWhenUnavailable,
     onToggled
   });
-  const handleClick = useCallback31(
+  const handleClick = useCallback34(
     (event) => {
       onClick == null ? void 0 : onClick(event);
       if (event.defaultPrevented) return;
@@ -7049,201 +7637,343 @@ var TableButton = ({
   if (!isVisible) {
     return null;
   }
-  return /* @__PURE__ */ jsx29(
-    ToolbarButton6,
+  return /* @__PURE__ */ jsx30(
+    Button10,
     {
       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__ */ jsx30(Icon, {}),
       ...buttonProps,
-      children: children || /* @__PURE__ */ jsxs21(Fragment6, { children: [
-        /* @__PURE__ */ jsx29(Icon, {}),
-        text && /* @__PURE__ */ jsx29("span", { children: text })
+      ref,
+      children: children != null ? children : /* @__PURE__ */ jsxs22(Fragment8, { children: [
+        text,
+        showShortcut && /* @__PURE__ */ jsx30(TextShortcutBadge, { shortcutKeys })
       ] })
     }
   );
 };
 
-// src/ui/text-align-button/text-align-button.tsx
-import { IconButton as IconButton9 } from "@kopexa/button";
-import { useCallback as useCallback33 } from "react";
-
-// src/ui/text-align-button/use-text-align.ts
-import { isExtensionAvailable as isExtensionAvailable2, isNodeTypeSelected as isNodeTypeSelected6 } from "@kopexa/editor-utils";
-import {
-  AlignCenterIcon,
-  AlignJustifyIcon,
-  AlignLeftIcon,
-  AlignRightIcon
-} from "@kopexa/icons";
-import { useCallback as useCallback32, useEffect as useEffect27, useState as useState27 } from "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: AlignLeftIcon,
-  center: AlignCenterIcon,
-  right: AlignRightIcon,
-  justify: 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
+import { useTiptapEditor as useTiptapEditor22 } from "@kopexa/editor-utils";
+import { ChevronDownIcon as ChevronDownIcon2 } from "@kopexa/icons";
+import { NodeSelection as NodeSelection5 } from "@tiptap/pm/state";
+import { useCallback as useCallback35, useEffect as useEffect29, useState as useState28 } from "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 (!isExtensionAvailable2(editor, "textAlign") || isNodeTypeSelected6(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 NodeSelection5) {
+    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 (!isExtensionAvailable2(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 } = useTiptapEditor(providedEditor);
-  const [isVisible, setIsVisible] = useState27(true);
-  const canAlign = canSetTextAlign(editor, align);
-  const isActive = isTextAlignActive(editor, align);
-  useEffect27(() => {
+    blockTypes,
+    onOpenChange
+  } = config || {};
+  const { editor } = useTiptapEditor22(providedEditor);
+  const [isOpen, setIsOpen] = useState28(false);
+  const [isVisible, setIsVisible] = useState28(true);
+  const canToggle3 = canTurnInto(editor, blockTypes);
+  const activeBlockType = getActiveBlockType(editor, blockTypes);
+  const handleOpenChange = useCallback35(
+    (open) => {
+      if (!editor || !canToggle3) return;
+      setIsOpen(open);
+      onOpenChange == null ? void 0 : onOpenChange(open);
+    },
+    [canToggle3, editor, onOpenChange]
+  );
+  useEffect29(() => {
     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 = useCallback32(() => {
-    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: ChevronDownIcon2
   };
 }
 
-// src/ui/text-align-button/text-align-button.tsx
-import { jsx as jsx30 } from "react/jsx-runtime";
-var TextAlignButton = ({
-  editor: providedEditor,
-  align,
-  text,
-  hideWhenUnavailable = false,
-  onAligned,
-  showShortcut = false,
-  onClick,
-  children,
-  ...buttonProps
-}) => {
-  const { editor } = useTiptapEditor(providedEditor);
-  const {
-    isVisible,
-    handleTextAlign,
-    label,
-    canAlign,
-    isActive,
-    Icon,
-    shortcutKeys
-  } = useTextAlign({
-    editor,
-    align,
-    hideWhenUnavailable,
-    onAligned
-  });
-  const handleClick = useCallback33(
-    (e) => {
-      onClick == null ? void 0 : onClick(e);
-      if (e.defaultPrevented) return;
-      handleTextAlign();
-    },
-    [handleTextAlign, onClick]
-  );
-  if (!isVisible) {
-    return null;
-  }
-  return /* @__PURE__ */ jsx30(
-    IconButton9,
-    {
-      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__ */ jsx30(Icon, {})
+// src/ui/turn-into-dropdown/turn-into-dropdown.tsx
+import { jsx as jsx31, jsxs as jsxs23 } from "react/jsx-runtime";
+var TurnIntoDropdownContent = ({ blockTypes }) => {
+  const filteredOptions = getFilteredBlockTypeOptions(blockTypes);
+  return /* @__PURE__ */ jsx31(DropdownMenu2.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__ */ jsx31(DropdownMenu2.Item, { asChild: true, children: /* @__PURE__ */ jsx31(
+        TextButton,
+        {
+          fullWidth: true,
+          spacing: "start",
+          tooltip: "",
+          text: option.label
+        }
+      ) }, key);
+    case "heading":
+      if (!option.level) {
+        return null;
+      }
+      return /* @__PURE__ */ jsx31(DropdownMenu2.Item, { asChild: true, children: /* @__PURE__ */ jsx31(
+        HeadingButton,
+        {
+          level: option.level || 1,
+          fullWidth: true,
+          spacing: "start",
+          tooltip: "",
+          text: option.label
+        }
+      ) }, key);
+    case "bulletList":
+      return /* @__PURE__ */ jsx31(DropdownMenu2.Item, { asChild: true, children: /* @__PURE__ */ jsx31(
+        ListButton,
+        {
+          type: "bulletList",
+          fullWidth: true,
+          spacing: "start",
+          tooltip: "",
+          text: option.label
+        }
+      ) }, key);
+    case "orderedList":
+      return /* @__PURE__ */ jsx31(DropdownMenu2.Item, { asChild: true, children: /* @__PURE__ */ jsx31(
+        ListButton,
+        {
+          type: "orderedList",
+          fullWidth: true,
+          spacing: "start",
+          tooltip: "",
+          text: option.label
+        }
+      ) }, key);
+    case "taskList":
+      return /* @__PURE__ */ jsx31(DropdownMenu2.Item, { asChild: true, children: /* @__PURE__ */ jsx31(
+        ListButton,
+        {
+          type: "taskList",
+          fullWidth: true,
+          spacing: "start",
+          tooltip: "",
+          text: option.label
+        }
+      ) }, key);
+    case "blockquote":
+      return /* @__PURE__ */ jsx31(DropdownMenu2.Item, { asChild: true, children: /* @__PURE__ */ jsx31(
+        BlockquoteButton,
+        {
+          className: "w-full justify-start",
+          title: "",
+          tooltip: "",
+          text: option.label
+        }
+      ) }, key);
+    case "codeBlock":
+      return /* @__PURE__ */ jsx31(DropdownMenu2.Item, { asChild: true, children: /* @__PURE__ */ jsx31(
+        CodeBlockButton,
+        {
+          className: "w-full justify-start",
+          title: "",
+          tooltip: "",
+          text: option.label
+        }
+      ) }, key);
+    default:
+      return null;
+  }
+}
+var TurnIntoDropdown = forwardRef(
+  ({
+    editor: providedEditor,
+    hideWhenUnavailable = false,
+    blockTypes,
+    onOpenChange,
+    children,
+    ...buttonProps
+  }, ref) => {
+    const { editor } = useTiptapEditor23(providedEditor);
+    const {
+      isVisible,
+      canToggle: canToggle3,
+      isOpen,
+      activeBlockType,
+      handleOpenChange,
+      label,
+      Icon
+    } = useTurnIntoDropdown({
+      editor,
+      hideWhenUnavailable,
+      blockTypes,
+      onOpenChange
+    });
+    if (!isVisible) {
+      return null;
+    }
+    return /* @__PURE__ */ jsxs23(DropdownMenu2.Root, { open: isOpen, onOpenChange: handleOpenChange, children: [
+      /* @__PURE__ */ jsx31(DropdownMenu2.Trigger, { asChild: true, children: /* @__PURE__ */ jsx31(
+        Button11,
+        {
+          type: "button",
+          variant: "ghost",
+          color: "default",
+          disabled: !canToggle3,
+          "data-disabled": !canToggle3,
+          tabIndex: -1,
+          "aria-label": label,
+          tooltip: "Turn into",
+          endContent: /* @__PURE__ */ jsx31(Icon, {}),
+          ...buttonProps,
+          ref,
+          children: children != null ? children : /* @__PURE__ */ jsx31("span", { children: (activeBlockType == null ? void 0 : activeBlockType.label) || "Text" })
+        }
+      ) }),
+      /* @__PURE__ */ jsx31(DropdownMenu2.Content, { align: "start", children: /* @__PURE__ */ jsx31(TurnIntoDropdownContent, { blockTypes }) })
+    ] });
+  }
+);
+TurnIntoDropdown.displayName = "TurnIntoDropdown";
 
 // src/ui/undo-redo-button/undo-redo-button.tsx
+import { useTiptapEditor as useTiptapEditor25 } from "@kopexa/editor-utils";
 import { ToolbarButton as ToolbarButton7 } from "@kopexa/toolbar";
-import { useCallback as useCallback35 } from "react";
+import { useCallback as useCallback37 } from "react";
 
 // src/ui/undo-redo-button/use-undo-redo.ts
-import { isNodeTypeSelected as isNodeTypeSelected7 } from "@kopexa/editor-utils";
+import { isNodeTypeSelected as isNodeTypeSelected7, useTiptapEditor as useTiptapEditor24 } from "@kopexa/editor-utils";
 import { RedoIcon, UndoIcon } from "@kopexa/icons";
-import { useCallback as useCallback34, useEffect as useEffect28, useState as useState28 } from "react";
+import { useCallback as useCallback36, useEffect as useEffect30, useState as useState29 } from "react";
 var UNDO_REDO_SHORTCUT_KEYS = {
   undo: "mod+z",
   redo: "mod+shift+z"
@@ -7267,7 +7997,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")) {
@@ -7282,13 +8012,13 @@ function useUndoRedo(config) {
     hideWhenUnavailable = false,
     onExecuted
   } = config;
-  const { editor } = useTiptapEditor(providedEditor);
-  const [isVisible, setIsVisible] = useState28(true);
+  const { editor } = useTiptapEditor24(providedEditor);
+  const [isVisible, setIsVisible] = useState29(true);
   const canExecute = canExecuteUndoRedoAction(editor, action);
-  useEffect28(() => {
+  useEffect30(() => {
     if (!editor) return;
     const handleUpdate = () => {
-      setIsVisible(shouldShowButton6({ editor, hideWhenUnavailable, action }));
+      setIsVisible(shouldShowButton7({ editor, hideWhenUnavailable, action }));
     };
     handleUpdate();
     editor.on("transaction", handleUpdate);
@@ -7296,7 +8026,7 @@ function useUndoRedo(config) {
       editor.off("transaction", handleUpdate);
     };
   }, [editor, hideWhenUnavailable, action]);
-  const handleAction = useCallback34(() => {
+  const handleAction = useCallback36(() => {
     if (!editor) return false;
     const success = executeUndoRedoAction(editor, action);
     if (success) {
@@ -7315,7 +8045,7 @@ function useUndoRedo(config) {
 }
 
 // src/ui/undo-redo-button/undo-redo-button.tsx
-import { jsx as jsx31 } from "react/jsx-runtime";
+import { jsx as jsx32 } from "react/jsx-runtime";
 var UndoRedoButton = ({
   editor: providedEditor,
   action,
@@ -7327,14 +8057,14 @@ var UndoRedoButton = ({
   children,
   ...buttonProps
 }) => {
-  const { editor } = useTiptapEditor(providedEditor);
+  const { editor } = useTiptapEditor25(providedEditor);
   const { isVisible, handleAction, label, canExecute, Icon, shortcutKeys } = useUndoRedo({
     editor,
     action,
     hideWhenUnavailable,
     onExecuted
   });
-  const handleClick = useCallback35(
+  const handleClick = useCallback37(
     (event) => {
       onClick == null ? void 0 : onClick(event);
       if (event.defaultPrevented) return;
@@ -7345,7 +8075,7 @@ var UndoRedoButton = ({
   if (!isVisible) {
     return null;
   }
-  return /* @__PURE__ */ jsx31(
+  return /* @__PURE__ */ jsx32(
     ToolbarButton7,
     {
       type: "button",
@@ -7360,20 +8090,20 @@ var UndoRedoButton = ({
       onClick: handleClick,
       isIconOnly: true,
       ...buttonProps,
-      children: /* @__PURE__ */ jsx31(Icon, {})
+      children: /* @__PURE__ */ jsx32(Icon, {})
     }
   );
 };
 
 // src/presets/basic/editor-header.tsx
-import { Fragment as Fragment7, jsx as jsx32, jsxs as jsxs22 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx33, jsxs as jsxs24 } from "react/jsx-runtime";
 var EditorHeader = ({
   editor: providedEditor,
   variant
 }) => {
   var _a, _b;
-  const { editor } = useTiptapEditor(providedEditor);
-  const isMobile = useIsMobile2();
+  const { editor } = useTiptapEditor26(providedEditor);
+  const isMobile = useIsMobile3();
   const windowSize = useWindowSize();
   const { styles } = useEditorUIContext();
   const toolbarRef = useRef11(null);
@@ -7385,7 +8115,7 @@ var EditorHeader = ({
     return null;
   }
   const ToolbarContent = variant === "comment" ? CommentToolbarContent : variant === "field" ? FieldToolbarContent : MainToolbarContent;
-  return /* @__PURE__ */ jsx32("div", { className: styles.toolbarContainer(), "data-slot": "editor-toolbar", children: /* @__PURE__ */ jsx32(
+  return /* @__PURE__ */ jsx33("div", { className: styles.toolbarContainer(), "data-slot": "editor-toolbar", children: /* @__PURE__ */ jsx33(
     Toolbar2,
     {
       sticky: true,
@@ -7395,63 +8125,58 @@ var EditorHeader = ({
         bottom: `calc(100% - ${windowSize.height - bodyRect.y}px)`
       } : {},
       className: styles.toolbar(),
-      children: /* @__PURE__ */ jsx32(ToolbarContent, {})
+      children: /* @__PURE__ */ jsx33(ToolbarContent, {})
     }
   ) });
 };
-var MainToolbarContent = () => /* @__PURE__ */ jsxs22(Fragment7, { children: [
-  /* @__PURE__ */ jsxs22(ToolbarGroup2, { children: [
-    /* @__PURE__ */ jsx32(UndoRedoButton, { action: "undo" }),
-    /* @__PURE__ */ jsx32(UndoRedoButton, { action: "redo" })
+var MainToolbarContent = () => /* @__PURE__ */ jsxs24(Fragment9, { children: [
+  /* @__PURE__ */ jsxs24(ToolbarGroup2, { children: [
+    /* @__PURE__ */ jsx33(UndoRedoButton, { action: "undo" }),
+    /* @__PURE__ */ jsx33(UndoRedoButton, { action: "redo" })
   ] }),
-  /* @__PURE__ */ jsx32(ToolbarSeparator3, {}),
-  /* @__PURE__ */ jsxs22(ToolbarGroup2, { children: [
-    /* @__PURE__ */ jsx32(HeadingDropdownMenu, { levels: [1, 2, 3, 4] }),
-    /* @__PURE__ */ jsx32(ListDropdownMenu, { types: ["bulletList", "orderedList", "taskList"] }),
-    /* @__PURE__ */ jsx32(BlockquoteButton, {}),
-    /* @__PURE__ */ jsx32(CodeBlockButton, {})
+  /* @__PURE__ */ jsx33(ToolbarSeparator3, {}),
+  /* @__PURE__ */ jsx33(ToolbarGroup2, { children: /* @__PURE__ */ jsx33(TurnIntoDropdown, {}) }),
+  /* @__PURE__ */ jsx33(ToolbarSeparator3, {}),
+  /* @__PURE__ */ jsxs24(ToolbarGroup2, { children: [
+    /* @__PURE__ */ jsx33(MarkButton, { type: "bold" }),
+    /* @__PURE__ */ jsx33(MarkButton, { type: "italic" }),
+    /* @__PURE__ */ jsx33(MarkButton, { type: "strike" }),
+    /* @__PURE__ */ jsx33(MarkButton, { type: "code" }),
+    /* @__PURE__ */ jsx33(MarkButton, { type: "underline" }),
+    /* @__PURE__ */ jsx33(ColorHighlightPopover, {}),
+    /* @__PURE__ */ jsx33(LinkPopover, {})
   ] }),
-  /* @__PURE__ */ jsx32(ToolbarSeparator3, {}),
-  /* @__PURE__ */ jsxs22(ToolbarGroup2, { children: [
-    /* @__PURE__ */ jsx32(MarkButton, { type: "bold" }),
-    /* @__PURE__ */ jsx32(MarkButton, { type: "italic" }),
-    /* @__PURE__ */ jsx32(MarkButton, { type: "strike" }),
-    /* @__PURE__ */ jsx32(MarkButton, { type: "code" }),
-    /* @__PURE__ */ jsx32(MarkButton, { type: "underline" }),
-    /* @__PURE__ */ jsx32(ColorHighlightPopover, {}),
-    /* @__PURE__ */ jsx32(LinkPopover, {})
-  ] }),
-  /* @__PURE__ */ jsx32(ToolbarSeparator3, {}),
-  /* @__PURE__ */ jsx32(ToolbarGroup2, { children: /* @__PURE__ */ jsx32(TableButton, {}) }),
-  /* @__PURE__ */ jsx32(MoreOptions, { hideWhenUnavailable: true })
+  /* @__PURE__ */ jsx33(ToolbarSeparator3, {}),
+  /* @__PURE__ */ jsx33(ToolbarGroup2, { children: /* @__PURE__ */ jsx33(TableButton, {}) }),
+  /* @__PURE__ */ jsx33(MoreOptions, { hideWhenUnavailable: true })
 ] });
-var CommentToolbarContent = () => /* @__PURE__ */ jsxs22(Fragment7, { children: [
-  /* @__PURE__ */ jsxs22(ToolbarGroup2, { children: [
-    /* @__PURE__ */ jsx32(MarkButton, { type: "bold" }),
-    /* @__PURE__ */ jsx32(MarkButton, { type: "italic" }),
-    /* @__PURE__ */ jsx32(MarkButton, { type: "strike" }),
-    /* @__PURE__ */ jsx32(MarkButton, { type: "code" })
+var CommentToolbarContent = () => /* @__PURE__ */ jsxs24(Fragment9, { children: [
+  /* @__PURE__ */ jsxs24(ToolbarGroup2, { children: [
+    /* @__PURE__ */ jsx33(MarkButton, { type: "bold" }),
+    /* @__PURE__ */ jsx33(MarkButton, { type: "italic" }),
+    /* @__PURE__ */ jsx33(MarkButton, { type: "strike" }),
+    /* @__PURE__ */ jsx33(MarkButton, { type: "code" })
   ] }),
-  /* @__PURE__ */ jsx32(ToolbarSeparator3, {}),
-  /* @__PURE__ */ jsxs22(ToolbarGroup2, { children: [
-    /* @__PURE__ */ jsx32(LinkPopover, {}),
-    /* @__PURE__ */ jsx32(ListDropdownMenu, { types: ["bulletList", "orderedList"] })
+  /* @__PURE__ */ jsx33(ToolbarSeparator3, {}),
+  /* @__PURE__ */ jsxs24(ToolbarGroup2, { children: [
+    /* @__PURE__ */ jsx33(LinkPopover, {}),
+    /* @__PURE__ */ jsx33(ListDropdownMenu, { types: ["bulletList", "orderedList"] })
   ] })
 ] });
-var FieldToolbarContent = () => /* @__PURE__ */ jsxs22(ToolbarGroup2, { children: [
-  /* @__PURE__ */ jsx32(MarkButton, { type: "bold" }),
-  /* @__PURE__ */ jsx32(MarkButton, { type: "italic" }),
-  /* @__PURE__ */ jsx32(MarkButton, { type: "strike" }),
-  /* @__PURE__ */ jsx32(LinkPopover, {})
+var FieldToolbarContent = () => /* @__PURE__ */ jsxs24(ToolbarGroup2, { children: [
+  /* @__PURE__ */ jsx33(MarkButton, { type: "bold" }),
+  /* @__PURE__ */ jsx33(MarkButton, { type: "italic" }),
+  /* @__PURE__ */ jsx33(MarkButton, { type: "strike" }),
+  /* @__PURE__ */ jsx33(LinkPopover, {})
 ] });
 function MoreOptions({
   editor: providedEditor,
   hideWhenUnavailable = false,
   ...props
 }) {
-  const { editor } = useTiptapEditor(providedEditor);
-  const [show, setShow] = useState29(false);
-  useEffect29(() => {
+  const { editor } = useTiptapEditor26(providedEditor);
+  const [show, setShow] = useState30(false);
+  useEffect31(() => {
     if (!editor) return;
     const handleSelectionUpdate = () => {
       setShow(
@@ -7470,13 +8195,13 @@ function MoreOptions({
   if (!show || !editor || !editor.isEditable) {
     return null;
   }
-  return /* @__PURE__ */ jsxs22(Fragment7, { children: [
-    /* @__PURE__ */ jsx32(ToolbarSeparator3, {}),
-    /* @__PURE__ */ jsx32(ToolbarGroup2, { children: /* @__PURE__ */ jsxs22(Popover3.Root, { spacing: "dense", width: "auto", children: [
-      /* @__PURE__ */ jsx32(
+  return /* @__PURE__ */ jsxs24(Fragment9, { children: [
+    /* @__PURE__ */ jsx33(ToolbarSeparator3, {}),
+    /* @__PURE__ */ jsx33(ToolbarGroup2, { children: /* @__PURE__ */ jsxs24(Popover3.Root, { spacing: "dense", width: "auto", children: [
+      /* @__PURE__ */ jsx33(
         Popover3.Trigger,
         {
-          render: /* @__PURE__ */ jsx32(
+          render: /* @__PURE__ */ jsx33(
             ToolbarButton8,
             {
               type: "button",
@@ -7488,29 +8213,29 @@ function MoreOptions({
               title: "More options",
               isIconOnly: true,
               ...props,
-              children: /* @__PURE__ */ jsx32(MoreVerticalIcon, {})
+              children: /* @__PURE__ */ jsx33(MoreVerticalIcon, {})
             }
           )
         }
       ),
-      /* @__PURE__ */ jsx32(
+      /* @__PURE__ */ jsx33(
         Popover3.Content,
         {
           side: "top",
           align: "end",
           alignOffset: 4,
           sideOffset: 4,
-          children: /* @__PURE__ */ jsxs22(Toolbar2, { children: [
-            /* @__PURE__ */ jsxs22(ToolbarGroup2, { children: [
-              /* @__PURE__ */ jsx32(MarkButton, { type: "superscript" }),
-              /* @__PURE__ */ jsx32(MarkButton, { type: "subscript" })
+          children: /* @__PURE__ */ jsxs24(Toolbar2, { children: [
+            /* @__PURE__ */ jsxs24(ToolbarGroup2, { children: [
+              /* @__PURE__ */ jsx33(MarkButton, { type: "superscript" }),
+              /* @__PURE__ */ jsx33(MarkButton, { type: "subscript" })
             ] }),
-            /* @__PURE__ */ jsx32(ToolbarSeparator3, {}),
-            /* @__PURE__ */ jsxs22(ToolbarGroup2, { children: [
-              /* @__PURE__ */ jsx32(TextAlignButton, { align: "left" }),
-              /* @__PURE__ */ jsx32(TextAlignButton, { align: "center" }),
-              /* @__PURE__ */ jsx32(TextAlignButton, { align: "right" }),
-              /* @__PURE__ */ jsx32(TextAlignButton, { align: "justify" })
+            /* @__PURE__ */ jsx33(ToolbarSeparator3, {}),
+            /* @__PURE__ */ jsxs24(ToolbarGroup2, { children: [
+              /* @__PURE__ */ jsx33(TextAlignButton, { align: "left" }),
+              /* @__PURE__ */ jsx33(TextAlignButton, { align: "center" }),
+              /* @__PURE__ */ jsx33(TextAlignButton, { align: "right" }),
+              /* @__PURE__ */ jsx33(TextAlignButton, { align: "justify" })
             ] })
           ] })
         }
@@ -7542,7 +8267,7 @@ function shouldShowMoreOptions(params) {
 }
 
 // src/presets/basic/index.tsx
-import { jsx as jsx33, jsxs as jsxs23 } from "react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx34, jsxs as jsxs25 } from "react/jsx-runtime";
 var BasicEditor = ({
   variant,
   bordered,
@@ -7560,19 +8285,19 @@ var BasicEditor = ({
     ...options
   });
   const styles = editorBasic({ variant, bordered });
-  const resolveVariable = useCallback36(
+  const resolveVariable = useCallback38(
     (name) => variableValues == null ? void 0 : variableValues[name],
     [variableValues]
   );
   if (!editor) {
-    return /* @__PURE__ */ jsx33(LoadingSpinner, {});
+    return /* @__PURE__ */ jsx34(LoadingSpinner, {});
   }
   const isBottomToolbar = variant === "field";
   const hasVariables = variables && variables.length > 0;
   const hasPagination = !!pagesOptions;
-  const editorContent = /* @__PURE__ */ jsx33(EditorUIProvider, { value: { styles }, children: /* @__PURE__ */ jsx33("div", { className: styles.root(), "data-slot": "editor", children: /* @__PURE__ */ jsxs23(EditorContext.Provider, { value: { editor }, children: [
-    showToolbar && !isBottomToolbar && /* @__PURE__ */ jsx33(EditorHeader, { editor, variant }),
-    /* @__PURE__ */ jsx33(
+  const editorContent = /* @__PURE__ */ jsx34(EditorUIProvider, { value: { styles }, children: /* @__PURE__ */ jsx34("div", { className: styles.root(), "data-slot": "editor", children: /* @__PURE__ */ jsxs25(EditorContext.Provider, { value: { editor }, children: [
+    showToolbar && !isBottomToolbar && /* @__PURE__ */ jsx34(EditorHeader, { editor, variant }),
+    /* @__PURE__ */ jsx34(
       EditorContentArea,
       {
         variant,
@@ -7580,10 +8305,10 @@ var BasicEditor = ({
         hasPagination
       }
     ),
-    showToolbar && isBottomToolbar && /* @__PURE__ */ jsx33(EditorHeader, { editor, variant })
+    showToolbar && isBottomToolbar && /* @__PURE__ */ jsx34(EditorHeader, { editor, variant })
   ] }) }) });
   if (hasVariables) {
-    return /* @__PURE__ */ jsx33(VariableProvider, { variables, resolveVariable, children: editorContent });
+    return /* @__PURE__ */ jsx34(VariableProvider, { variables, resolveVariable, children: editorContent });
   }
   return editorContent;
 };
@@ -7596,7 +8321,7 @@ var EditorContentArea = ({
   const { editor } = useContext4(EditorContext);
   const { isDragging } = useUiEditorState(editor);
   useScrollToHash();
-  const handleKeyDown = useCallback36(
+  const handleKeyDown = useCallback38(
     (e) => {
       if (!(editor == null ? void 0 : editor.isFocused)) return;
       const isMod = e.metaKey || e.ctrlKey;
@@ -7638,8 +8363,8 @@ 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__ */ jsxs23("div", { className: styles.wrapper(), onKeyDown: handleKeyDown, children: [
-      /* @__PURE__ */ jsxs23(
+    /* @__PURE__ */ jsxs25("div", { className: styles.wrapper(), onKeyDown: handleKeyDown, children: [
+      /* @__PURE__ */ jsxs25(
         EditorContent,
         {
           editor,
@@ -7649,20 +8374,36 @@ var EditorContentArea = ({
             cursor: isDragging ? "grabbing" : "auto"
           },
           children: [
-            isEditable && /* @__PURE__ */ jsx33(SlashDropdownMenu, {}),
-            isEditable && variables && variables.length > 0 && /* @__PURE__ */ jsx33(VariableSuggestion, { editor, variables })
+            isEditable && /* @__PURE__ */ jsx34(SlashDropdownMenu, {}),
+            isEditable && variables && variables.length > 0 && /* @__PURE__ */ jsx34(VariableSuggestion, { editor, variables })
           ]
         }
       ),
-      isEditable && /* @__PURE__ */ jsx33(BubbleMenu, { editor }),
-      isEditable && /* @__PURE__ */ jsx33(LinkBubble, { editor })
+      isEditable && /* @__PURE__ */ jsx34(BubbleMenu, { editor }),
+      isEditable && /* @__PURE__ */ jsx34(LinkBubble, { editor }),
+      isEditable && /* @__PURE__ */ jsxs25(Fragment10, { children: [
+        /* @__PURE__ */ jsx34(TableHandle, { editor }),
+        /* @__PURE__ */ jsx34(
+          TableSelectionOverlay,
+          {
+            showResizeHandles: true,
+            cellMenu: (props) => /* @__PURE__ */ jsx34(
+              TableCellHandleMenu,
+              {
+                editor: props.editor,
+                onOpenChange: props.onOpenChange
+              }
+            )
+          }
+        )
+      ] })
     ] })
   );
 };
 function LoadingSpinner({ text = "Connecting..." }) {
   const styles = editorSpinner();
-  return /* @__PURE__ */ jsx33("div", { className: styles.root(), children: /* @__PURE__ */ jsxs23("div", { className: styles.content(), children: [
-    /* @__PURE__ */ jsxs23(
+  return /* @__PURE__ */ jsx34("div", { className: styles.root(), children: /* @__PURE__ */ jsxs25("div", { className: styles.content(), children: [
+    /* @__PURE__ */ jsxs25(
       "svg",
       {
         className: styles.svg(),
@@ -7670,9 +8411,9 @@ function LoadingSpinner({ text = "Connecting..." }) {
         fill: "none",
         viewBox: "0 0 24 24",
         children: [
-          /* @__PURE__ */ jsx33("title", { children: "Loading Spinner" }),
-          /* @__PURE__ */ jsx33("circle", { className: styles.circle(), cx: "12", cy: "12", r: "10" }),
-          /* @__PURE__ */ jsx33(
+          /* @__PURE__ */ jsx34("title", { children: "Loading Spinner" }),
+          /* @__PURE__ */ jsx34("circle", { className: styles.circle(), cx: "12", cy: "12", r: "10" }),
+          /* @__PURE__ */ jsx34(
             "path",
             {
               className: styles.path(),
@@ -7682,7 +8423,7 @@ function LoadingSpinner({ text = "Connecting..." }) {
         ]
       }
     ),
-    /* @__PURE__ */ jsx33("div", { className: styles.text(), children: text })
+    /* @__PURE__ */ jsx34("div", { className: styles.text(), children: text })
   ] }) });
 }
 export {