@kopexa/tiptap 17.7.0 → 17.8.0

package/dist/index.js

@@ -1023,7 +1023,7 @@ var ImageNode = import_extension_image.Image.extend({
     return (0, import_react11.ReactNodeViewRenderer)(ImageNodeView, {
       stopEvent: ({ event }) => {
         const target = event.target;
-        if (target.closest("button, [role='button'], input, a")) {
+        if (target instanceof HTMLElement && target.closest("button, [role='button'], input, a")) {
           return true;
         }
         return false;
@@ -1374,7 +1374,7 @@ var ImageUploadNode = import_core2.Node.create({
     return (0, import_react14.ReactNodeViewRenderer)(ImageUploadNodeView, {
       stopEvent: ({ event }) => {
         const target = event.target;
-        if (target.closest("button, [role='button'], input, a")) {
+        if (target instanceof HTMLElement && target.closest("button, [role='button'], input, a")) {
           return true;
         }
         return false;
@@ -2751,13 +2751,14 @@ function VariableFillerDialog({
 }
 
 // src/extensions/variable/variable-suggestion.tsx
-var import_editor_utils = require("@kopexa/editor-utils");
+var import_editor_utils2 = require("@kopexa/editor-utils");
 var import_theme6 = require("@kopexa/theme");
 var import_state2 = require("@tiptap/pm/state");
 var React6 = __toESM(require("react"));
 
 // src/ui/suggestion-menu/suggestion-menu.tsx
-var import_react30 = require("@floating-ui/react");
+var import_react28 = require("@floating-ui/react");
+var import_editor_utils = require("@kopexa/editor-utils");
 var import_state = require("@tiptap/pm/state");
 var import_suggestion = require("@tiptap/suggestion");
 var React5 = __toESM(require("react"));
@@ -2935,35 +2936,6 @@ function useMenuNavigation({
   };
 }
 
-// src/hooks/use-tiptap-editor.ts
-var import_react28 = require("@tiptap/react");
-var import_react29 = require("react");
-function useTiptapEditor(providedEditor) {
-  const { editor: coreEditor } = (0, import_react28.useCurrentEditor)();
-  const mainEditor = (0, import_react29.useMemo)(
-    () => providedEditor || coreEditor,
-    [providedEditor, coreEditor]
-  );
-  const editorState = (0, import_react28.useEditorState)({
-    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) {
@@ -3020,7 +2992,7 @@ var SuggestionMenu = ({
   pluginKey = import_suggestion.SuggestionPluginKey,
   ...internalSuggestionProps
 }) => {
-  const { editor } = useTiptapEditor(providedEditor);
+  const { editor } = (0, import_editor_utils.useTiptapEditor)(providedEditor);
   const [show, setShow] = React5.useState(false);
   const [internalClientRect, setInternalClientRect] = React5.useState(null);
   const [internalCommand, setInternalCommand] = React5.useState(null);
@@ -3036,13 +3008,13 @@ var SuggestionMenu = ({
     {
       placement: "bottom-start",
       middleware: [
-        (0, import_react30.offset)(10),
-        (0, import_react30.flip)({
+        (0, import_react28.offset)(10),
+        (0, import_react28.flip)({
           mainAxis: true,
           crossAxis: false
         }),
-        (0, import_react30.shift)(),
-        (0, import_react30.size)({
+        (0, import_react28.shift)(),
+        (0, import_react28.size)({
           apply({ availableHeight, elements }) {
             if (elements.floating) {
               const maxHeightValue = maxHeight ? Math.min(maxHeight, availableHeight) : availableHeight;
@@ -3181,7 +3153,7 @@ var SuggestionMenu = ({
   if (!isMounted || !show || !editor) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react30.FloatingPortal, { children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react28.FloatingPortal, { children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
     "div",
     {
       ref,
@@ -3276,7 +3248,7 @@ var VariableItem = ({
       '[data-selector="tiptap-variable-suggestion-menu"]'
     );
     if (!itemRef.current || !isSelected || !selector) return;
-    const overflow = (0, import_editor_utils.getElementOverflowPosition)(itemRef.current, selector);
+    const overflow = (0, import_editor_utils2.getElementOverflowPosition)(itemRef.current, selector);
     if (overflow === "top") {
       itemRef.current.scrollIntoView(true);
     } else if (overflow === "bottom") {
@@ -3376,14 +3348,14 @@ var import_extension_text_style = require("@tiptap/extension-text-style");
 var import_extension_typography = require("@tiptap/extension-typography");
 var import_extension_unique_id = require("@tiptap/extension-unique-id");
 var import_extensions = require("@tiptap/extensions");
-var import_react34 = require("@tiptap/react");
+var import_react32 = require("@tiptap/react");
 var import_starter_kit = require("@tiptap/starter-kit");
-var import_react35 = require("react");
+var import_react33 = require("react");
 
 // src/extensions/link/index.ts
 var import_extension_link = __toESM(require("@tiptap/extension-link"));
 var import_state3 = require("@tiptap/pm/state");
-var import_react31 = require("@tiptap/react");
+var import_react29 = require("@tiptap/react");
 var Link = import_extension_link.default.extend({
   inclusive: false,
   parseHTML() {
@@ -3412,7 +3384,7 @@ var Link = import_extension_link.default.extend({
             const { schema, doc, tr } = view.state;
             let range;
             if (schema.marks.link) {
-              range = (0, import_react31.getMarkRange)(doc.resolve(pos), schema.marks.link);
+              range = (0, import_react29.getMarkRange)(doc.resolve(pos), schema.marks.link);
             }
             if (!range) {
               return;
@@ -3436,11 +3408,290 @@ var Link = import_extension_link.default.extend({
   }
 });
 
+// src/extensions/node-alignment/index.ts
+var import_editor_utils3 = require("@kopexa/editor-utils");
+var import_core7 = require("@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 = import_core7.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 = (0, import_editor_utils3.getSelectedNodesOfType)(
+          state.selection,
+          this.options.types
+        );
+        if (targets.length === 0) return false;
+        const targetValue = getTargetValue(targets, inputValue);
+        return (0, import_editor_utils3.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 = (0, import_editor_utils3.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 = (0, import_editor_utils3.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
+var import_editor_utils4 = require("@kopexa/editor-utils");
+var import_core8 = require("@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 = import_core8.Extension.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 = (0, import_editor_utils4.getSelectedNodesOfType)(
+          state.selection,
+          this.options.types
+        );
+        if (targets.length === 0) return false;
+        const targetColor = getTargetColor(targets, inputColor);
+        return (0, import_editor_utils4.updateNodesAttr)(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
 var import_state4 = require("@tiptap/pm/state");
 var import_view = require("@tiptap/pm/view");
-var import_react32 = require("@tiptap/react");
-var Selection = import_react32.Extension.create({
+var import_react30 = require("@tiptap/react");
+var Selection = import_react30.Extension.create({
   name: "selection",
   addProseMirrorPlugins() {
     const { editor } = this;
@@ -3455,7 +3706,7 @@ var Selection = import_react32.Extension.create({
             if (editor.isFocused === true || !editor.isEditable) {
               return null;
             }
-            if ((0, import_react32.isNodeSelection)(state.selection)) {
+            if ((0, import_react30.isNodeSelection)(state.selection)) {
               return null;
             }
             return import_view.DecorationSet.create(state.doc, [
@@ -3472,7 +3723,7 @@ var Selection = import_react32.Extension.create({
 
 // src/extensions/trailing-node/index.ts
 var import_state5 = require("@tiptap/pm/state");
-var import_react33 = require("@tiptap/react");
+var import_react31 = require("@tiptap/react");
 function nodeEqualsType({
   types,
   node
@@ -3483,7 +3734,7 @@ function nodeEqualsType({
   }
   return node.type === types;
 }
-var TrailingNode = import_react33.Extension.create({
+var TrailingNode = import_react31.Extension.create({
   name: "trailingNode",
   addOptions() {
     return {
@@ -3529,7 +3780,7 @@ var TrailingNode = import_react33.Extension.create({
 });
 
 // src/extensions/ui-state/index.ts
-var import_core7 = require("@tiptap/core");
+var import_core9 = require("@tiptap/core");
 var defaultUiState = {
   aiGenerationIsSelection: false,
   aiGenerationIsLoading: false,
@@ -3539,7 +3790,7 @@ var defaultUiState = {
   lockDragHandle: false,
   isDragging: false
 };
-var UiState = import_core7.Extension.create({
+var UiState = import_core9.Extension.create({
   name: "uiState",
   addStorage() {
     return {
@@ -3764,7 +4015,7 @@ var useCreateEditor = ({
   const fileHandlerFromContext = useEditorFile();
   const fileHandler = fileHandlerProp != null ? fileHandlerProp : fileHandlerFromContext;
   const collaboration = useCollaboration();
-  const [extensions] = (0, import_react35.useState)(
+  const [extensions] = (0, import_react33.useState)(
     () => getExtensions({
       editable,
       placeholder,
@@ -3778,7 +4029,7 @@ var useCreateEditor = ({
       disabled
     })
   );
-  const editor = (0, import_react34.useEditor)({
+  const editor = (0, import_react32.useEditor)({
     editorProps: {
       attributes: {
         autocomplete: "off",
@@ -3797,7 +4048,7 @@ var useCreateEditor = ({
     content: safeParseContent(content),
     ...options
   });
-  (0, import_react35.useEffect)(() => {
+  (0, import_react33.useEffect)(() => {
     if (editor && editor.isEditable !== editable) {
       editor.setEditable(editable);
     }
@@ -3864,6 +4115,8 @@ function getExtensions({
     }),
     UiState,
     import_extension_table.TableKit,
+    NodeAlignment,
+    NodeBackground,
     TocNode,
     CalloutNode,
     MathBlock,
@@ -4012,19 +4265,20 @@ async function handleFileUpload(editor, file, fileHandler, pos) {
 }
 
 // src/presets/basic/index.tsx
+var import_extension_table2 = require("@kopexa/extension-table");
 var import_theme9 = require("@kopexa/theme");
-var import_react59 = require("@tiptap/react");
-var import_react60 = require("react");
+var import_react60 = require("@tiptap/react");
+var import_react61 = require("react");
 
 // src/context/editor-context.ts
 var import_react_utils = require("@kopexa/react-utils");
 var [EditorUIProvider, useEditorUIContext] = (0, import_react_utils.createContext)();
 
 // src/hooks/use-ui-editor-state.ts
-var import_react36 = require("@tiptap/react");
+var import_react34 = require("@tiptap/react");
 function useUiEditorState(editor) {
   var _a;
-  return (_a = (0, import_react36.useEditorState)({
+  return (_a = (0, import_react34.useEditorState)({
     editor,
     selector: ({ editor: editor2 }) => {
       if (!editor2) return defaultUiState;
@@ -4046,14 +4300,15 @@ var import_menus = require("@tiptap/react/menus");
 
 // src/ui/link-popover/link-popover.tsx
 var import_button8 = require("@kopexa/button");
+var import_editor_utils6 = require("@kopexa/editor-utils");
 var import_icons9 = require("@kopexa/icons");
 var import_input3 = require("@kopexa/input");
 var import_popover = require("@kopexa/popover");
 var import_toolbar = require("@kopexa/toolbar");
-var import_react37 = require("react");
+var import_react35 = require("react");
 
 // src/ui/link-popover/use-link-popover.ts
-var import_editor_utils2 = require("@kopexa/editor-utils");
+var import_editor_utils5 = require("@kopexa/editor-utils");
 var import_icons8 = require("@kopexa/icons");
 var React7 = __toESM(require("react"));
 
@@ -4160,7 +4415,7 @@ function isLinkActive(editor) {
 }
 function shouldShowLinkButton(props) {
   const { editor, hideWhenUnavailable } = props;
-  const linkInSchema = (0, import_editor_utils2.isMarkInSchema)("link", editor);
+  const linkInSchema = (0, import_editor_utils5.isMarkInSchema)("link", editor);
   if (!linkInSchema || !editor) {
     return false;
   }
@@ -4259,7 +4514,7 @@ function useLinkPopover(config) {
     hideWhenUnavailable = false,
     onSetLink
   } = config || {};
-  const { editor } = useTiptapEditor(providedEditor);
+  const { editor } = (0, import_editor_utils5.useTiptapEditor)(providedEditor);
   const { isVisible, canSet, isActive } = useLinkState({
     editor,
     hideWhenUnavailable
@@ -4306,8 +4561,8 @@ var LinkMain = ({
   isActive,
   onSave
 }) => {
-  const [isEditing, setIsEditing] = (0, import_react37.useState)(!isActive || !url);
-  (0, import_react37.useEffect)(() => {
+  const [isEditing, setIsEditing] = (0, import_react35.useState)(!isActive || !url);
+  (0, import_react35.useEffect)(() => {
     setIsEditing(!isActive || !url);
   }, [isActive, url]);
   const handleKeyDown = (event) => {
@@ -4422,8 +4677,8 @@ function LinkPopover({
   children,
   ...buttonProps
 }) {
-  const { editor } = useTiptapEditor(providedEditor);
-  const [isOpen, setIsOpen] = (0, import_react37.useState)(false);
+  const { editor } = (0, import_editor_utils6.useTiptapEditor)(providedEditor);
+  const [isOpen, setIsOpen] = (0, import_react35.useState)(false);
   const {
     isVisible,
     canSet,
@@ -4439,18 +4694,18 @@ function LinkPopover({
     hideWhenUnavailable,
     onSetLink
   });
-  const handleOnOpenChange = (0, import_react37.useCallback)(
+  const handleOnOpenChange = (0, import_react35.useCallback)(
     (nextIsOpen) => {
       setIsOpen(nextIsOpen);
       onOpenChange == null ? void 0 : onOpenChange(nextIsOpen);
     },
     [onOpenChange]
   );
-  const handleSetLink = (0, import_react37.useCallback)(() => {
+  const handleSetLink = (0, import_react35.useCallback)(() => {
     setLink();
     setIsOpen(false);
   }, [setLink]);
-  const handleClick = (0, import_react37.useCallback)(
+  const handleClick = (0, import_react35.useCallback)(
     (event) => {
       onClick == null ? void 0 : onClick(event);
       if (event.defaultPrevented) return;
@@ -4458,7 +4713,7 @@ function LinkPopover({
     },
     [onClick, isOpen]
   );
-  (0, import_react37.useEffect)(() => {
+  (0, import_react35.useEffect)(() => {
     if (autoOpenOnLinkActive && isActive) {
       setIsOpen(true);
     }
@@ -4509,11 +4764,11 @@ function LinkPopover({
 LinkButton.displayName = "LinkButton";
 
 // src/ui/mark-button/index.tsx
-var import_editor_utils3 = require("@kopexa/editor-utils");
+var import_editor_utils7 = require("@kopexa/editor-utils");
 var import_icons10 = require("@kopexa/icons");
 var import_toolbar2 = require("@kopexa/toolbar");
-var import_react38 = require("@tiptap/react");
-var import_react39 = require("react");
+var import_react36 = require("@tiptap/react");
+var import_react37 = require("react");
 var import_jsx_runtime17 = require("react/jsx-runtime");
 var markIcons = {
   bold: import_icons10.BoldIcon,
@@ -4535,7 +4790,7 @@ var markShortcutKeys = {
 };
 function canToggleMark(editor, type) {
   if (!editor || !editor.isEditable) return false;
-  if (!(0, import_editor_utils3.isMarkInSchema)(type, editor) || (0, import_editor_utils3.isNodeTypeSelected)(editor, ["image"]))
+  if (!(0, import_editor_utils7.isMarkInSchema)(type, editor) || (0, import_editor_utils7.isNodeTypeSelected)(editor, ["image"]))
     return false;
   return editor.can().toggleMark(type);
 }
@@ -4560,7 +4815,7 @@ function shouldShowMarkButton(params) {
     return false;
   }
   if (hideWhenUnavailable) {
-    if ((0, import_react38.isNodeSelection)(editor.state.selection) || !canToggleMark(editor, type)) {
+    if ((0, import_react36.isNodeSelection)(editor.state.selection) || !canToggleMark(editor, type)) {
       return false;
     }
   }
@@ -4570,7 +4825,7 @@ function getFormattedMarkName(type) {
   return type.charAt(0).toUpperCase() + type.slice(1);
 }
 function useMarkState(editor, type, disabled = false) {
-  const markInSchema = (0, import_editor_utils3.isMarkInSchema)(type, editor);
+  const markInSchema = (0, import_editor_utils7.isMarkInSchema)(type, editor);
   const isDisabled = isMarkButtonDisabled(editor, type, disabled);
   const isActive = isMarkActive(editor, type);
   const Icon = markIcons[type];
@@ -4596,7 +4851,7 @@ var MarkButton = ({
   children,
   ...buttonProps
 }) => {
-  const { editor } = useTiptapEditor(providedEditor);
+  const { editor } = (0, import_editor_utils7.useTiptapEditor)(providedEditor);
   const {
     markInSchema,
     isDisabled,
@@ -4605,7 +4860,7 @@ var MarkButton = ({
     shortcutKey,
     formattedName
   } = useMarkState(editor, type, disabled);
-  const handleClick = (0, import_react39.useCallback)(
+  const handleClick = (0, import_react37.useCallback)(
     (e) => {
       onClick == null ? void 0 : onClick(e);
       if (!e.defaultPrevented && !isDisabled && editor) {
@@ -4614,7 +4869,7 @@ var MarkButton = ({
     },
     [onClick, isDisabled, editor, type]
   );
-  const show = (0, import_react39.useMemo)(() => {
+  const show = (0, import_react37.useMemo)(() => {
     return shouldShowMarkButton({
       editor,
       type,
@@ -4689,12 +4944,12 @@ function BubbleMenu({ editor }) {
 }
 
 // src/ui/copy-anchor-link-button/use-scroll-to-hash.ts
-var import_editor_utils4 = require("@kopexa/editor-utils");
+var import_editor_utils8 = require("@kopexa/editor-utils");
 var React9 = __toESM(require("react"));
 
 // src/hooks/use-floating-toolbar-visibility.ts
 var import_state6 = require("@tiptap/pm/state");
-var import_react40 = require("@tiptap/react");
+var import_react38 = require("@tiptap/react");
 var React8 = __toESM(require("react"));
 var HIDE_FLOATING_META = "hideFloatingToolbar";
 var selectNodeAndHideFloating = (editor, pos) => {
@@ -4714,12 +4969,12 @@ function useScrollToHash(config = {}) {
     onTargetNotFound = () => {
     }
   } = config;
-  const { editor } = useTiptapEditor(providedEditor);
+  const { editor } = (0, import_editor_utils8.useTiptapEditor)(providedEditor);
   const scrollToNode = React9.useCallback(
     (id) => {
       var _a, _b, _c;
       if (!editor) return false;
-      const attributeName = (_c = (_b = (_a = (0, import_editor_utils4.getEditorExtension)(editor, "uniqueID")) == null ? void 0 : _a.options) == null ? void 0 : _b.attributeName) != null ? _c : "data-id";
+      const attributeName = (_c = (_b = (_a = (0, import_editor_utils8.getEditorExtension)(editor, "uniqueID")) == null ? void 0 : _a.options) == null ? void 0 : _b.attributeName) != null ? _c : "data-id";
       let position = null;
       editor.state.doc.descendants((node, pos) => {
         var _a2;
@@ -4796,37 +5051,37 @@ var import_button9 = require("@kopexa/button");
 var import_icons11 = require("@kopexa/icons");
 var import_input4 = require("@kopexa/input");
 var import_menus2 = require("@tiptap/react/menus");
-var import_react41 = require("react");
+var import_react39 = require("react");
 var import_jsx_runtime19 = require("react/jsx-runtime");
 function LinkBubble({ editor }) {
-  const [isEditing, setIsEditing] = (0, import_react41.useState)(false);
-  const [url, setUrl] = (0, import_react41.useState)("");
-  const getCurrentUrl = (0, import_react41.useCallback)(() => {
+  const [isEditing, setIsEditing] = (0, import_react39.useState)(false);
+  const [url, setUrl] = (0, import_react39.useState)("");
+  const getCurrentUrl = (0, import_react39.useCallback)(() => {
     if (!editor) return "";
     const attrs = editor.getAttributes("link");
     return attrs.href || "";
   }, [editor]);
-  (0, import_react41.useEffect)(() => {
+  (0, import_react39.useEffect)(() => {
     const isLinkActive2 = editor == null ? void 0 : editor.isActive("link");
     if (isLinkActive2) {
       setUrl(getCurrentUrl());
       setIsEditing(false);
     }
   }, [editor, getCurrentUrl]);
-  const handleOpenLink = (0, import_react41.useCallback)(() => {
+  const handleOpenLink = (0, import_react39.useCallback)(() => {
     const href = getCurrentUrl();
     if (href) {
       window.open(href, "_blank", "noopener,noreferrer");
     }
   }, [getCurrentUrl]);
-  const handleRemoveLink = (0, import_react41.useCallback)(() => {
+  const handleRemoveLink = (0, import_react39.useCallback)(() => {
     editor == null ? void 0 : editor.chain().focus().unsetLink().run();
   }, [editor]);
-  const handleEdit = (0, import_react41.useCallback)(() => {
+  const handleEdit = (0, import_react39.useCallback)(() => {
     setUrl(getCurrentUrl());
     setIsEditing(true);
   }, [getCurrentUrl]);
-  const handleSave = (0, import_react41.useCallback)(() => {
+  const handleSave = (0, import_react39.useCallback)(() => {
     if (url) {
       editor == null ? void 0 : editor.chain().focus().extendMarkRange("link").setLink({ href: url }).run();
     } else {
@@ -4834,7 +5089,7 @@ function LinkBubble({ editor }) {
     }
     setIsEditing(false);
   }, [editor, url]);
-  const handleKeyDown = (0, import_react41.useCallback)(
+  const handleKeyDown = (0, import_react39.useCallback)(
     (e) => {
       if (e.key === "Enter") {
         e.preventDefault();
@@ -4945,24 +5200,24 @@ function LinkBubble({ editor }) {
 
 // src/ui/slash-dropdown-menu/slash-dropdown-menu.tsx
 var import_button10 = require("@kopexa/button");
-var import_editor_utils7 = require("@kopexa/editor-utils");
+var import_editor_utils11 = require("@kopexa/editor-utils");
 var import_separator = require("@kopexa/separator");
 var import_theme7 = require("@kopexa/theme");
 var React11 = __toESM(require("react"));
 
 // src/ui/slash-dropdown-menu/use-slash-dropdown-menu.ts
-var import_editor_utils6 = require("@kopexa/editor-utils");
+var import_editor_utils10 = require("@kopexa/editor-utils");
 var import_icons13 = require("@kopexa/icons");
 var React10 = __toESM(require("react"));
 
 // src/ui/table-button/use-table.ts
-var import_editor_utils5 = require("@kopexa/editor-utils");
+var import_editor_utils9 = require("@kopexa/editor-utils");
 var import_icons12 = require("@kopexa/icons");
-var import_react42 = require("@tiptap/react");
-var import_react43 = require("react");
+var import_react40 = require("@tiptap/react");
+var import_react41 = require("react");
 function canToggle(editor) {
   if (!editor || !editor.isEditable) return false;
-  if (!(0, import_editor_utils5.isNodeInSchema)("table", editor) || (0, import_editor_utils5.isNodeTypeSelected)(editor, ["image"])) {
+  if (!(0, import_editor_utils9.isNodeInSchema)("table", editor) || (0, import_editor_utils9.isNodeTypeSelected)(editor, ["image"])) {
     return false;
   }
   try {
@@ -4988,9 +5243,9 @@ function toggleTable(editor, config) {
 function shouldShowButton(props) {
   const { editor, hideWhenUnavailable } = props;
   if (!editor || !editor.isEditable) return false;
-  if (!(0, import_editor_utils5.isNodeInSchema)("table", editor)) return false;
+  if (!(0, import_editor_utils9.isNodeInSchema)("table", editor)) return false;
   if (hideWhenUnavailable) {
-    if ((0, import_react42.isNodeSelection)(editor.state.selection) || !canToggle) {
+    if ((0, import_react40.isNodeSelection)(editor.state.selection) || !canToggle) {
       return false;
     }
   }
@@ -5002,11 +5257,11 @@ function useTableBlock(config) {
     hideWhenUnavailable = false,
     onToggled
   } = config || {};
-  const { editor } = useTiptapEditor(providedEditor);
-  const [isVisible, setIsVisible] = (0, import_react43.useState)(true);
+  const { editor } = (0, import_editor_utils9.useTiptapEditor)(providedEditor);
+  const [isVisible, setIsVisible] = (0, import_react41.useState)(true);
   const canToggleState = canToggle(editor);
   const isActive = (editor == null ? void 0 : editor.isActive("table")) || false;
-  (0, import_react43.useEffect)(() => {
+  (0, import_react41.useEffect)(() => {
     if (!editor) return;
     const handleSelectionUpdate = () => {
       setIsVisible(shouldShowButton({ editor, hideWhenUnavailable }));
@@ -5017,7 +5272,7 @@ function useTableBlock(config) {
       editor.off("selectionUpdate", handleSelectionUpdate);
     };
   }, [editor, hideWhenUnavailable]);
-  const handleToggle = (0, import_react43.useCallback)(() => {
+  const handleToggle = (0, import_react41.useCallback)(() => {
     if (!editor) return false;
     const success = toggleTable(editor);
     if (success) {
@@ -5203,8 +5458,8 @@ var getItemImplementations = () => {
     // AI
     continue_writing: {
       check: (editor) => {
-        const { hasContent } = (0, import_editor_utils6.hasContentAbove)(editor);
-        const extensionsReady = (0, import_editor_utils6.isExtensionAvailable)(editor, [
+        const { hasContent } = (0, import_editor_utils10.hasContentAbove)(editor);
+        const extensionsReady = (0, import_editor_utils10.isExtensionAvailable)(editor, [
           "ai",
           "aiAdvanced"
         ]);
@@ -5212,14 +5467,14 @@ var getItemImplementations = () => {
       },
       action: ({ editor }) => {
         const editorChain = editor.chain().focus();
-        const nodeSelectionPosition = (0, import_editor_utils6.findSelectionPosition)({ editor });
+        const nodeSelectionPosition = (0, import_editor_utils10.findSelectionPosition)({ editor });
         if (nodeSelectionPosition !== null) {
           editorChain.setNodeSelection(nodeSelectionPosition);
         }
         editorChain.run();
         editor.chain().focus().aiGenerationShow().run();
         requestAnimationFrame(() => {
-          const { hasContent, content } = (0, import_editor_utils6.hasContentAbove)(editor);
+          const { hasContent, content } = (0, import_editor_utils10.hasContentAbove)(editor);
           const snippet = content.length > 500 ? `...${content.slice(-500)}` : content;
           const prompt = hasContent ? `Context: ${snippet}
 
@@ -5233,10 +5488,10 @@ Continue writing from where the text above ends. Write ONLY ONE SENTENCE. DONT R
       }
     },
     ai_ask_button: {
-      check: (editor) => (0, import_editor_utils6.isExtensionAvailable)(editor, ["ai", "aiAdvanced"]),
+      check: (editor) => (0, import_editor_utils10.isExtensionAvailable)(editor, ["ai", "aiAdvanced"]),
       action: ({ editor }) => {
         const editorChain = editor.chain().focus();
-        const nodeSelectionPosition = (0, import_editor_utils6.findSelectionPosition)({ editor });
+        const nodeSelectionPosition = (0, import_editor_utils10.findSelectionPosition)({ editor });
         if (nodeSelectionPosition !== null) {
           editorChain.setNodeSelection(nodeSelectionPosition);
         }
@@ -5246,55 +5501,55 @@ Continue writing from where the text above ends. Write ONLY ONE SENTENCE. DONT R
     },
     // Style
     text: {
-      check: (editor) => (0, import_editor_utils6.isNodeInSchema)("paragraph", editor),
+      check: (editor) => (0, import_editor_utils10.isNodeInSchema)("paragraph", editor),
       action: ({ editor }) => {
         editor.chain().focus().setParagraph().run();
       }
     },
     heading_1: {
-      check: (editor) => (0, import_editor_utils6.isNodeInSchema)("heading", editor),
+      check: (editor) => (0, import_editor_utils10.isNodeInSchema)("heading", editor),
       action: ({ editor }) => {
         editor.chain().focus().toggleHeading({ level: 1 }).run();
       }
     },
     heading_2: {
-      check: (editor) => (0, import_editor_utils6.isNodeInSchema)("heading", editor),
+      check: (editor) => (0, import_editor_utils10.isNodeInSchema)("heading", editor),
       action: ({ editor }) => {
         editor.chain().focus().toggleHeading({ level: 2 }).run();
       }
     },
     heading_3: {
-      check: (editor) => (0, import_editor_utils6.isNodeInSchema)("heading", editor),
+      check: (editor) => (0, import_editor_utils10.isNodeInSchema)("heading", editor),
       action: ({ editor }) => {
         editor.chain().focus().toggleHeading({ level: 3 }).run();
       }
     },
     bullet_list: {
-      check: (editor) => (0, import_editor_utils6.isNodeInSchema)("bulletList", editor),
+      check: (editor) => (0, import_editor_utils10.isNodeInSchema)("bulletList", editor),
       action: ({ editor }) => {
         editor.chain().focus().toggleBulletList().run();
       }
     },
     ordered_list: {
-      check: (editor) => (0, import_editor_utils6.isNodeInSchema)("orderedList", editor),
+      check: (editor) => (0, import_editor_utils10.isNodeInSchema)("orderedList", editor),
       action: ({ editor }) => {
         editor.chain().focus().toggleOrderedList().run();
       }
     },
     task_list: {
-      check: (editor) => (0, import_editor_utils6.isNodeInSchema)("taskList", editor),
+      check: (editor) => (0, import_editor_utils10.isNodeInSchema)("taskList", editor),
       action: ({ editor }) => {
         editor.chain().focus().toggleTaskList().run();
       }
     },
     quote: {
-      check: (editor) => (0, import_editor_utils6.isNodeInSchema)("blockquote", editor),
+      check: (editor) => (0, import_editor_utils10.isNodeInSchema)("blockquote", editor),
       action: ({ editor }) => {
         editor.chain().focus().toggleBlockquote().run();
       }
     },
     code_block: {
-      check: (editor) => (0, import_editor_utils6.isNodeInSchema)("codeBlock", editor),
+      check: (editor) => (0, import_editor_utils10.isNodeInSchema)("codeBlock", editor),
       action: ({ editor }) => {
         editor.chain().focus().toggleNode("codeBlock", "paragraph").run();
       }
@@ -5311,17 +5566,17 @@ Continue writing from where the text above ends. Write ONLY ONE SENTENCE. DONT R
     //   action: ({ editor }: { editor: Editor }) => addEmojiTrigger(editor),
     // },
     divider: {
-      check: (editor) => (0, import_editor_utils6.isNodeInSchema)("horizontalRule", editor),
+      check: (editor) => (0, import_editor_utils10.isNodeInSchema)("horizontalRule", editor),
       action: ({ editor }) => {
         editor.chain().focus().setHorizontalRule().run();
       }
     },
     table: {
-      check: (editor) => (0, import_editor_utils6.isNodeInSchema)("table", editor),
+      check: (editor) => (0, import_editor_utils10.isNodeInSchema)("table", editor),
       action: ({ editor }) => toggleTable(editor, { rows: 3, cols: 3, withHeaderRow: true })
     },
     control: {
-      check: (editor) => (0, import_editor_utils6.isNodeInSchema)("controlBlock", editor),
+      check: (editor) => (0, import_editor_utils10.isNodeInSchema)("controlBlock", editor),
       action: ({ editor }) => {
         try {
           return editor.chain().focus().insertControlBlock().run();
@@ -5331,32 +5586,32 @@ Continue writing from where the text above ends. Write ONLY ONE SENTENCE. DONT R
       }
     },
     table_of_contents: {
-      check: (editor) => (0, import_editor_utils6.isNodeInSchema)("tableOfContentsNode", editor),
+      check: (editor) => (0, import_editor_utils10.isNodeInSchema)("tableOfContentsNode", editor),
       action: ({ editor }) => {
         editor.chain().focus().insertTableOfContents().run();
       }
     },
     callout: {
-      check: (editor) => (0, import_editor_utils6.isNodeInSchema)("calloutNode", editor),
+      check: (editor) => (0, import_editor_utils10.isNodeInSchema)("calloutNode", editor),
       action: ({ editor }) => {
         editor.chain().focus().insertCallout("info").run();
       }
     },
     callout_warning: {
-      check: (editor) => (0, import_editor_utils6.isNodeInSchema)("calloutNode", editor),
+      check: (editor) => (0, import_editor_utils10.isNodeInSchema)("calloutNode", editor),
       action: ({ editor }) => {
         editor.chain().focus().insertCallout("warning").run();
       }
     },
     math: {
-      check: (editor) => (0, import_editor_utils6.isNodeInSchema)("mathBlock", editor),
+      check: (editor) => (0, import_editor_utils10.isNodeInSchema)("mathBlock", editor),
       action: ({ editor }) => {
         editor.chain().focus().insertMathBlock().run();
       }
     },
     // Upload
     image: {
-      check: (editor) => (0, import_editor_utils6.isNodeInSchema)("imageUpload", editor),
+      check: (editor) => (0, import_editor_utils10.isNodeInSchema)("imageUpload", editor),
       action: ({ editor }) => {
         editor.chain().focus().setImageUpload().run();
       }
@@ -5445,7 +5700,7 @@ var Item = (props) => {
       '[data-selector="tiptap-slash-dropdown-menu"]'
     );
     if (!itemRef.current || !isSelected || !selector) return;
-    const overflow = (0, import_editor_utils7.getElementOverflowPosition)(itemRef.current, selector);
+    const overflow = (0, import_editor_utils11.getElementOverflowPosition)(itemRef.current, selector);
     if (overflow === "top") {
       itemRef.current.scrollIntoView(true);
     } else if (overflow === "bottom") {
@@ -5563,11 +5818,12 @@ var List = ({
 };
 
 // src/presets/basic/editor-header.tsx
-var import_icons25 = require("@kopexa/icons");
+var import_editor_utils31 = require("@kopexa/editor-utils");
+var import_icons26 = require("@kopexa/icons");
 var import_popover3 = require("@kopexa/popover");
 var import_toolbar10 = require("@kopexa/toolbar");
-var import_use_is_mobile2 = require("@kopexa/use-is-mobile");
-var import_react58 = require("react");
+var import_use_is_mobile3 = require("@kopexa/use-is-mobile");
+var import_react59 = require("react");
 
 // src/hooks/use-cursor-visibility.ts
 var React13 = __toESM(require("react"));
@@ -5671,94 +5927,122 @@ function useCursorVisibility({
   return rect;
 }
 
-// src/ui/blockquote-button/blockquote-button.tsx
+// src/ui/color-highlight-popover/color-highlight-popover.tsx
+var import_button11 = require("@kopexa/button");
+var import_editor_utils14 = require("@kopexa/editor-utils");
+var import_icons15 = require("@kopexa/icons");
+var import_popover2 = require("@kopexa/popover");
+var import_toolbar5 = require("@kopexa/toolbar");
+var import_react43 = require("react");
+
+// src/ui/color-highlight-button/color-highlight-button.tsx
+var import_editor_utils13 = require("@kopexa/editor-utils");
+var import_theme8 = require("@kopexa/theme");
 var import_toolbar4 = require("@kopexa/toolbar");
-var React15 = __toESM(require("react"));
+var import_react42 = require("react");
 
-// src/ui/blockquote-button/use-blockquote.ts
-var import_editor_utils8 = require("@kopexa/editor-utils");
+// src/ui/color-highlight-button/use-color-highlight.ts
+var import_editor_utils12 = require("@kopexa/editor-utils");
 var import_icons14 = require("@kopexa/icons");
-var import_state7 = require("@tiptap/pm/state");
+var import_use_is_mobile = require("@kopexa/use-is-mobile");
 var React14 = __toESM(require("react"));
-var BLOCKQUOTE_SHORTCUT_KEY = "mod+shift+b";
-function canToggleBlockquote(editor, turnInto = true) {
-  var _a;
-  if (!editor || !editor.isEditable) return false;
-  if (!(0, import_editor_utils8.isNodeInSchema)("blockquote", editor) || (0, import_editor_utils8.isNodeTypeSelected)(editor, ["image"]))
-    return false;
-  if (!turnInto) {
-    return editor.can().toggleWrap("blockquote");
-  }
-  try {
-    const view = editor.view;
-    const state = view.state;
-    const selection = state.selection;
-    if (selection.empty || selection instanceof import_state7.TextSelection) {
-      const pos = (_a = (0, import_editor_utils8.findNodePosition)({
-        editor,
-        node: state.selection.$anchor.node(1)
-      })) == null ? void 0 : _a.pos;
-      if (!(0, import_editor_utils8.isValidPosition)(pos)) return false;
-    }
-    return true;
-  } catch {
-    return false;
+var import_react_hotkeys_hook = require("react-hotkeys-hook");
+var COLOR_HIGHLIGHT_SHORTCUT_KEY = "mod+shift+h";
+var HIGHLIGHT_COLORS = [
+  {
+    label: "Default background",
+    value: "var(--tt-bg-color)",
+    border: "var(--tt-bg-color-contrast)"
+  },
+  {
+    label: "Gray background",
+    value: "var(--tt-color-highlight-gray)",
+    border: "var(--tt-color-highlight-gray-contrast)"
+  },
+  {
+    label: "Brown background",
+    value: "var(--tt-color-highlight-brown)",
+    border: "var(--tt-color-highlight-brown-contrast)"
+  },
+  {
+    label: "Orange background",
+    value: "var(--tt-color-highlight-orange)",
+    border: "var(--tt-color-highlight-orange-contrast)"
+  },
+  {
+    label: "Yellow background",
+    value: "var(--tt-color-highlight-yellow)",
+    border: "var(--tt-color-highlight-yellow-contrast)"
+  },
+  {
+    label: "Green background",
+    value: "var(--tt-color-highlight-green)",
+    border: "var(--tt-color-highlight-green-contrast)"
+  },
+  {
+    label: "Blue background",
+    value: "var(--tt-color-highlight-blue)",
+    border: "var(--tt-color-highlight-blue-contrast)"
+  },
+  {
+    label: "Purple background",
+    value: "var(--tt-color-highlight-purple)",
+    border: "var(--tt-color-highlight-purple-contrast)"
+  },
+  {
+    label: "Pink background",
+    value: "var(--tt-color-highlight-pink)",
+    border: "var(--tt-color-highlight-pink-contrast)"
+  },
+  {
+    label: "Red background",
+    value: "var(--tt-color-highlight-red)",
+    border: "var(--tt-color-highlight-red-contrast)"
   }
+];
+function pickHighlightColorsByValue(values) {
+  const colorMap = new Map(
+    HIGHLIGHT_COLORS.map((color) => [color.value, color])
+  );
+  return values.map((value) => colorMap.get(value)).filter((color) => !!color);
 }
-function toggleBlockquote(editor) {
-  var _a, _b, _c;
+function canColorHighlight(editor) {
   if (!editor || !editor.isEditable) return false;
-  if (!canToggleBlockquote(editor)) return false;
-  try {
-    const view = editor.view;
-    let state = view.state;
-    let tr = state.tr;
-    if (state.selection.empty || state.selection instanceof import_state7.TextSelection) {
-      const pos = (_a = (0, import_editor_utils8.findNodePosition)({
-        editor,
-        node: state.selection.$anchor.node(1)
-      })) == null ? void 0 : _a.pos;
-      if (!(0, import_editor_utils8.isValidPosition)(pos)) return false;
-      tr = tr.setSelection(import_state7.NodeSelection.create(state.doc, pos));
-      view.dispatch(tr);
-      state = view.state;
-    }
-    const selection = state.selection;
-    let chain = editor.chain().focus();
-    if (selection instanceof import_state7.NodeSelection) {
-      const firstChild = (_b = selection.node.firstChild) == null ? void 0 : _b.firstChild;
-      const lastChild = (_c = selection.node.lastChild) == null ? void 0 : _c.lastChild;
-      const from = firstChild ? selection.from + firstChild.nodeSize : selection.from + 1;
-      const to = lastChild ? selection.to - lastChild.nodeSize : selection.to - 1;
-      chain = chain.setTextSelection({ from, to }).clearNodes();
-    }
-    const toggle = editor.isActive("blockquote") ? chain.lift("blockquote") : chain.wrapIn("blockquote");
-    toggle.run();
-    editor.chain().focus().selectTextblockEnd().run();
-    return true;
-  } catch {
+  if (!(0, import_editor_utils12.isMarkInSchema)("highlight", editor) || (0, import_editor_utils12.isNodeTypeSelected)(editor, ["image"]))
     return false;
-  }
+  return editor.can().setMark("highlight");
+}
+function isColorHighlightActive(editor, highlightColor) {
+  if (!editor || !editor.isEditable) return false;
+  return highlightColor ? editor.isActive("highlight", { color: highlightColor }) : editor.isActive("highlight");
+}
+function removeHighlight(editor) {
+  if (!editor || !editor.isEditable) return false;
+  if (!canColorHighlight(editor)) return false;
+  return editor.chain().focus().unsetMark("highlight").run();
 }
 function shouldShowButton2(props) {
   const { editor, hideWhenUnavailable } = props;
   if (!editor || !editor.isEditable) return false;
-  if (!(0, import_editor_utils8.isNodeInSchema)("blockquote", editor)) return false;
+  if (!(0, import_editor_utils12.isMarkInSchema)("highlight", editor)) return false;
   if (hideWhenUnavailable && !editor.isActive("code")) {
-    return canToggleBlockquote(editor);
+    return canColorHighlight(editor);
   }
   return true;
 }
-function useBlockquote(config) {
+function useColorHighlight(config) {
   const {
     editor: providedEditor,
+    label,
+    highlightColor,
     hideWhenUnavailable = false,
-    onToggled
-  } = config || {};
-  const { editor } = useTiptapEditor(providedEditor);
+    onApplied
+  } = config;
+  const { editor } = (0, import_editor_utils12.useTiptapEditor)(providedEditor);
+  const isMobile = (0, import_use_is_mobile.useIsMobile)();
   const [isVisible, setIsVisible] = React14.useState(true);
-  const canToggle3 = canToggleBlockquote(editor);
-  const isActive = (editor == null ? void 0 : editor.isActive("blockquote")) || false;
+  const canColorHighlightState = canColorHighlight(editor);
+  const isActive = isColorHighlightActive(editor, highlightColor);
   React14.useEffect(() => {
     if (!editor) return;
     const handleSelectionUpdate = () => {
@@ -5770,372 +6054,885 @@ function useBlockquote(config) {
       editor.off("selectionUpdate", handleSelectionUpdate);
     };
   }, [editor, hideWhenUnavailable]);
-  const handleToggle = React14.useCallback(() => {
-    if (!editor) return false;
-    const success = toggleBlockquote(editor);
+  const handleColorHighlight = React14.useCallback(() => {
+    if (!editor || !canColorHighlightState || !highlightColor || !label)
+      return false;
+    if (editor.state.storedMarks) {
+      const highlightMarkType = editor.schema.marks.highlight;
+      if (highlightMarkType) {
+        editor.view.dispatch(
+          editor.state.tr.removeStoredMark(highlightMarkType)
+        );
+      }
+    }
+    setTimeout(() => {
+      const success = editor.chain().focus().toggleMark("highlight", { color: highlightColor }).run();
+      if (success) {
+        onApplied == null ? void 0 : onApplied({ color: highlightColor, label });
+      }
+      return success;
+    }, 0);
+  }, [canColorHighlightState, highlightColor, editor, label, onApplied]);
+  const handleRemoveHighlight = React14.useCallback(() => {
+    const success = removeHighlight(editor);
     if (success) {
-      onToggled == null ? void 0 : onToggled();
+      onApplied == null ? void 0 : onApplied({ color: "", label: "Remove highlight" });
     }
     return success;
-  }, [editor, onToggled]);
+  }, [editor, onApplied]);
+  (0, import_react_hotkeys_hook.useHotkeys)(
+    COLOR_HIGHLIGHT_SHORTCUT_KEY,
+    (event) => {
+      event.preventDefault();
+      handleColorHighlight();
+    },
+    {
+      enabled: isVisible && canColorHighlightState,
+      enableOnContentEditable: !isMobile,
+      enableOnFormTags: true
+    }
+  );
   return {
     isVisible,
     isActive,
-    handleToggle,
-    canToggle: canToggle3,
-    label: "Blockquote",
-    shortcutKeys: BLOCKQUOTE_SHORTCUT_KEY,
-    Icon: import_icons14.BlockquoteIcon
+    handleColorHighlight,
+    handleRemoveHighlight,
+    canColorHighlight: canColorHighlightState,
+    label: label || `Highlight`,
+    shortcutKeys: COLOR_HIGHLIGHT_SHORTCUT_KEY,
+    Icon: import_icons14.HighlighterIcon
   };
 }
 
-// src/ui/blockquote-button/blockquote-button.tsx
+// src/ui/color-highlight-button/color-highlight-button.tsx
 var import_jsx_runtime21 = require("react/jsx-runtime");
-var BlockquoteButton = ({
+var ColorHighlightButton = ({
   editor: providedEditor,
+  highlightColor,
   text,
   hideWhenUnavailable = false,
-  onToggled,
+  onApplied,
   showShortcut = false,
   onClick,
   children,
+  style,
+  className,
   ...buttonProps
 }) => {
-  const { editor } = useTiptapEditor(providedEditor);
+  const { editor } = (0, import_editor_utils13.useTiptapEditor)(providedEditor);
   const {
     isVisible,
-    canToggle: canToggle3,
+    canColorHighlight: canColorHighlight2,
     isActive,
-    handleToggle,
+    handleColorHighlight,
     label,
-    shortcutKeys,
-    Icon
-  } = useBlockquote({
+    shortcutKeys
+  } = useColorHighlight({
     editor,
+    highlightColor,
+    label: text || `Toggle highlight (${highlightColor})`,
     hideWhenUnavailable,
-    onToggled
+    onApplied
   });
-  const handleClick = React15.useCallback(
+  const handleClick = (0, import_react42.useCallback)(
     (event) => {
       onClick == null ? void 0 : onClick(event);
       if (event.defaultPrevented) return;
-      handleToggle();
+      handleColorHighlight();
     },
-    [handleToggle, onClick]
+    [handleColorHighlight, onClick]
+  );
+  const buttonStyle = (0, import_react42.useMemo)(
+    () => ({
+      ...style,
+      "--highlight-color": highlightColor
+    }),
+    [highlightColor, style]
   );
   if (!isVisible) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+  const styles = (0, import_theme8.colorHighlightButton)();
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
     import_toolbar4.ToolbarButton,
     {
       type: "button",
+      disabled: !canColorHighlight2,
+      "data-disabled": !canColorHighlight2,
       variant: "ghost",
       color: "default",
-      disabled: !canToggle3,
-      "data-disabled": !canToggle3,
       "data-active-state": isActive ? "on" : "off",
       tabIndex: -1,
-      "aria-label": "blockquote",
-      "aria-pressed": isActive,
-      title: label,
+      "aria-label": label,
       shortcutKeys,
+      "aria-pressed": isActive,
       onClick: handleClick,
-      isIconOnly: !text && !children,
+      style: buttonStyle,
+      className: styles.button({ className }),
+      isIconOnly: true,
       ...buttonProps,
-      children: children != null ? children : /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Icon, {}),
-        text && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { children: text })
-      ] })
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+          "span",
+          {
+            "data-active-state": isActive ? "on" : "off",
+            className: styles.mark()
+          }
+        ),
+        children || /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+            "span",
+            {
+              style: { "--highlight-color": highlightColor }
+            }
+          ),
+          text
+        ] })
+      ]
     }
   );
 };
 
-// src/ui/codeblock-button/code-block-button.tsx
-var import_icons16 = require("@kopexa/icons");
-var import_toolbar5 = require("@kopexa/toolbar");
-var import_react44 = require("react");
-
-// src/ui/codeblock-button/use-code-block.ts
-var import_editor_utils9 = require("@kopexa/editor-utils");
-var import_icons15 = require("@kopexa/icons");
-var import_state8 = require("@tiptap/pm/state");
-var React16 = __toESM(require("react"));
-var CODE_BLOCK_SHORTCUT_KEY = "mod+alt+c";
-function canToggle2(editor, turnInto = true) {
-  var _a;
-  if (!editor || !editor.isEditable) return false;
-  if (!(0, import_editor_utils9.isNodeInSchema)("codeBlock", editor) || (0, import_editor_utils9.isNodeTypeSelected)(editor, ["image"]))
-    return false;
-  if (!turnInto) {
-    return editor.can().toggleNode("codeBlock", "paragraph");
-  }
-  try {
-    const view = editor.view;
-    const state = view.state;
-    const selection = state.selection;
-    if (selection.empty || selection instanceof import_state8.TextSelection) {
-      const pos = (_a = (0, import_editor_utils9.findNodePosition)({
-        editor,
-        node: state.selection.$anchor.node(1)
-      })) == null ? void 0 : _a.pos;
-      if (!(0, import_editor_utils9.isValidPosition)(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 import_state8.TextSelection) {
-      const pos = (_a = (0, import_editor_utils9.findNodePosition)({
-        editor,
-        node: state.selection.$anchor.node(1)
-      })) == null ? void 0 : _a.pos;
-      if (!(0, import_editor_utils9.isValidPosition)(pos)) return false;
-      tr = tr.setSelection(import_state8.NodeSelection.create(state.doc, pos));
-      view.dispatch(tr);
-      state = view.state;
-    }
-    const selection = state.selection;
-    let chain = editor.chain().focus();
-    if (selection instanceof import_state8.NodeSelection) {
-      const firstChild = (_b = selection.node.firstChild) == null ? void 0 : _b.firstChild;
-      const lastChild = (_c = selection.node.lastChild) == null ? void 0 : _c.lastChild;
-      const from = firstChild ? selection.from + firstChild.nodeSize : selection.from + 1;
-      const to = lastChild ? selection.to - lastChild.nodeSize : selection.to - 1;
-      chain = chain.setTextSelection({ from, to }).clearNodes();
-    }
-    const toggle = editor.isActive("codeBlock") ? chain.setNode("paragraph") : chain.toggleNode("codeBlock", "paragraph");
-    toggle.run();
-    editor.chain().focus().selectTextblockEnd().run();
-    return true;
-  } catch {
-    return false;
-  }
-}
-function shouldShowButton3(props) {
-  const { editor, hideWhenUnavailable } = props;
-  if (!editor || !editor.isEditable) return false;
-  if (!(0, import_editor_utils9.isNodeInSchema)("codeBlock", editor)) return false;
-  if (hideWhenUnavailable && !editor.isActive("code")) {
-    return canToggle2(editor);
+// src/ui/color-highlight-popover/color-highlight-popover.tsx
+var import_jsx_runtime22 = require("react/jsx-runtime");
+var ColorHighlightPopoverButton = ({
+  className,
+  children,
+  ...props
+}) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+  import_button11.IconButton,
+  {
+    type: "button",
+    className,
+    variant: "ghost",
+    color: "default",
+    tabIndex: -1,
+    "aria-label": "Highlight text",
+    tooltip: "Highlight",
+    isIconOnly: !children,
+    ...props,
+    children: children != null ? children : /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_icons15.HighlighterIcon, {})
   }
-  return true;
-}
-function useCodeBlock(config) {
-  const {
-    editor: providedEditor,
-    hideWhenUnavailable = false,
+);
+function ColorHighlightPopoverContent({
+  editor,
+  colors = pickHighlightColorsByValue([
+    "var(--tt-color-highlight-green)",
+    "var(--tt-color-highlight-blue)",
+    "var(--tt-color-highlight-red)",
+    "var(--tt-color-highlight-purple)",
+    "var(--tt-color-highlight-yellow)"
+  ])
+}) {
+  const { handleRemoveHighlight } = useColorHighlight({ editor });
+  const containerRef = (0, import_react43.useRef)(null);
+  const menuItems = (0, import_react43.useMemo)(
+    () => [...colors, { label: "Remove highlight", value: "none" }],
+    [colors]
+  );
+  const { selectedIndex } = useMenuNavigation({
+    containerRef,
+    items: menuItems,
+    orientation: "both",
+    onSelect: (item) => {
+      if (!containerRef.current) return false;
+      const highlightedElement = containerRef.current.querySelector(
+        '[data-highlighted="true"]'
+      );
+      if (highlightedElement) highlightedElement.click();
+      if (item.value === "none") handleRemoveHighlight();
+    },
+    autoSelectFirstItem: false
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { ref: containerRef, className: "flex gap-1 items-center", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+      "div",
+      {
+        className: "flex items-center gap-1 outline-none",
+        "data-orientation": "horizontal",
+        children: colors.map((color, index) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+          ColorHighlightButton,
+          {
+            editor,
+            highlightColor: color.value,
+            "aria-label": `${color.label} highlight color`,
+            tabIndex: index === selectedIndex ? 0 : -1,
+            "data-highlighted": selectedIndex === index
+          },
+          color.value
+        ))
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_toolbar5.ToolbarSeparator, { orientation: "vertical" }),
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "tiptap-button-group", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+      import_button11.IconButton,
+      {
+        onClick: handleRemoveHighlight,
+        "aria-label": "Remove highlight",
+        tabIndex: selectedIndex === colors.length ? 0 : -1,
+        type: "button",
+        role: "menuitem",
+        variant: "ghost",
+        color: "default",
+        "data-highlighted": selectedIndex === colors.length,
+        children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_icons15.BanIcon, {})
+      }
+    ) })
+  ] });
+}
+function ColorHighlightPopover({
+  editor: providedEditor,
+  colors = pickHighlightColorsByValue([
+    "var(--tt-color-highlight-green)",
+    "var(--tt-color-highlight-blue)",
+    "var(--tt-color-highlight-red)",
+    "var(--tt-color-highlight-purple)",
+    "var(--tt-color-highlight-yellow)"
+  ]),
+  hideWhenUnavailable = false,
+  onApplied,
+  ...props
+}) {
+  const { editor } = (0, import_editor_utils14.useTiptapEditor)(providedEditor);
+  const [isOpen, setIsOpen] = (0, import_react43.useState)(false);
+  const { isVisible, canColorHighlight: canColorHighlight2, isActive, label } = useColorHighlight({
+    editor,
+    hideWhenUnavailable,
+    onApplied
+  });
+  if (!isVisible) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_popover2.Popover.Root, { open: isOpen, onOpenChange: setIsOpen, spacing: "dense", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+      import_popover2.Popover.Trigger,
+      {
+        render: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+          ColorHighlightPopoverButton,
+          {
+            disabled: !canColorHighlight2,
+            "data-disabled": !canColorHighlight2,
+            "data-active-state": isActive ? "on" : "off",
+            "aria-pressed": isActive,
+            "aria-label": label,
+            title: label,
+            ...props
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_popover2.Popover.Content, { "aria-label": "Highlight colors", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ColorHighlightPopoverContent, { editor, colors }) })
+  ] });
+}
+
+// src/ui/list-dropdown-menu/index.tsx
+var import_button13 = require("@kopexa/button");
+var import_dropdown_menu = require("@kopexa/dropdown-menu");
+var import_editor_utils16 = require("@kopexa/editor-utils");
+var import_icons17 = require("@kopexa/icons");
+var import_react46 = require("@tiptap/react");
+var import_react47 = require("react");
+
+// src/ui/list-button/index.tsx
+var import_button12 = require("@kopexa/button");
+var import_editor_utils15 = require("@kopexa/editor-utils");
+var import_icons16 = require("@kopexa/icons");
+var import_react44 = require("@tiptap/react");
+var import_react45 = require("react");
+var import_jsx_runtime23 = require("react/jsx-runtime");
+var listOptions = [
+  {
+    label: "Bullet List",
+    type: "bulletList",
+    icon: import_icons16.ListIcon
+  },
+  {
+    label: "Ordered List",
+    type: "orderedList",
+    icon: import_icons16.ListOrderedIcon
+  },
+  {
+    label: "Task List",
+    type: "taskList",
+    icon: import_icons16.ListTodoIcon
+  }
+];
+var listShortcutKeys = {
+  bulletList: "Ctrl-Shift-8",
+  orderedList: "Ctrl-Shift-7",
+  taskList: "Ctrl-Shift-9"
+};
+function canToggleList(editor, type) {
+  if (!editor) {
+    return false;
+  }
+  switch (type) {
+    case "bulletList":
+      return editor.can().toggleBulletList();
+    case "orderedList":
+      return editor.can().toggleOrderedList();
+    case "taskList":
+      return editor.can().toggleList("taskList", "taskItem");
+    default:
+      return false;
+  }
+}
+function isListActive(editor, type) {
+  if (!editor) return false;
+  switch (type) {
+    case "bulletList":
+      return editor.isActive("bulletList");
+    case "orderedList":
+      return editor.isActive("orderedList");
+    case "taskList":
+      return editor.isActive("taskList");
+    default:
+      return false;
+  }
+}
+function toggleList(editor, type) {
+  if (!editor) return;
+  switch (type) {
+    case "bulletList":
+      editor.chain().focus().toggleBulletList().run();
+      break;
+    case "orderedList":
+      editor.chain().focus().toggleOrderedList().run();
+      break;
+    case "taskList":
+      editor.chain().focus().toggleList("taskList", "taskItem").run();
+      break;
+  }
+}
+function getListOption(type) {
+  return listOptions.find((option) => option.type === type);
+}
+function shouldShowListButton(params) {
+  const { editor, type, hideWhenUnavailable, listInSchema } = params;
+  if (!listInSchema || !editor) {
+    return false;
+  }
+  if (hideWhenUnavailable) {
+    if ((0, import_react44.isNodeSelection)(editor.state.selection) || !canToggleList(editor, type)) {
+      return false;
+    }
+  }
+  return true;
+}
+function useListState(editor, type) {
+  const listInSchema = (0, import_editor_utils15.isNodeInSchema)(type, editor);
+  const listOption = getListOption(type);
+  const isActive = isListActive(editor, type);
+  const shortcutKey = listShortcutKeys[type];
+  return {
+    listInSchema,
+    listOption,
+    isActive,
+    shortcutKey
+  };
+}
+var ListButton = ({
+  editor: providedEditor,
+  type,
+  hideWhenUnavailable = false,
+  className = "",
+  onClick,
+  text,
+  children,
+  ref,
+  ...buttonProps
+}) => {
+  const { editor } = (0, import_editor_utils15.useTiptapEditor)(providedEditor);
+  const { listInSchema, listOption, isActive, shortcutKey } = useListState(
+    editor,
+    type
+  );
+  const Icon = (listOption == null ? void 0 : listOption.icon) || import_icons16.ListIcon;
+  const handleClick = (0, import_react45.useCallback)(
+    (e) => {
+      onClick == null ? void 0 : onClick(e);
+      if (!e.defaultPrevented && editor) {
+        toggleList(editor, type);
+      }
+    },
+    [onClick, editor, type]
+  );
+  const show = (0, import_react45.useMemo)(() => {
+    return shouldShowListButton({
+      editor,
+      type,
+      hideWhenUnavailable,
+      listInSchema
+    });
+  }, [editor, type, hideWhenUnavailable, listInSchema]);
+  if (!show || !editor || !editor.isEditable) {
+    return null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+    import_button12.Button,
+    {
+      type: "button",
+      className: className.trim(),
+      variant: "ghost",
+      color: "default",
+      "data-active-state": isActive ? "on" : "off",
+      tabIndex: -1,
+      "aria-label": (listOption == null ? void 0 : listOption.label) || type,
+      "aria-pressed": isActive,
+      tooltip: (listOption == null ? void 0 : listOption.label) || type,
+      shortcutKeys: shortcutKey,
+      onClick: handleClick,
+      startContent: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Icon, {}),
+      ...buttonProps,
+      ref,
+      children: children || text
+    }
+  );
+};
+
+// src/ui/list-dropdown-menu/index.tsx
+var import_jsx_runtime24 = require("react/jsx-runtime");
+function canToggleAnyList(editor, listTypes) {
+  if (!editor) return false;
+  return listTypes.some((type) => canToggleList(editor, type));
+}
+function isAnyListActive(editor, listTypes) {
+  if (!editor) return false;
+  return listTypes.some((type) => isListActive(editor, type));
+}
+function getFilteredListOptions(availableTypes) {
+  return listOptions.filter(
+    (option) => !option.type || availableTypes.includes(option.type)
+  );
+}
+function shouldShowListDropdown(params) {
+  const { editor, hideWhenUnavailable, listInSchema, canToggleAny } = params;
+  if (!listInSchema || !editor) {
+    return false;
+  }
+  if (hideWhenUnavailable) {
+    if ((0, import_react46.isNodeSelection)(editor.state.selection) || !canToggleAny) {
+      return false;
+    }
+  }
+  return true;
+}
+function useListDropdownState(editor, availableTypes) {
+  const [isOpen, setIsOpen] = (0, import_react47.useState)(false);
+  const listInSchema = availableTypes.some(
+    (type) => (0, import_editor_utils16.isNodeInSchema)(type, editor)
+  );
+  const filteredLists = (0, import_react47.useMemo)(
+    () => getFilteredListOptions(availableTypes),
+    [availableTypes]
+  );
+  const canToggleAny = canToggleAnyList(editor, availableTypes);
+  const isAnyActive = isAnyListActive(editor, availableTypes);
+  const handleOpenChange = (0, import_react47.useCallback)(
+    (open, callback) => {
+      setIsOpen(open);
+      callback == null ? void 0 : callback(open);
+    },
+    []
+  );
+  return {
+    isOpen,
+    setIsOpen,
+    listInSchema,
+    filteredLists,
+    canToggleAny,
+    isAnyActive,
+    handleOpenChange
+  };
+}
+function useActiveListIcon(editor, filteredLists) {
+  return (0, import_react47.useCallback)(() => {
+    const activeOption = filteredLists.find(
+      (option) => isListActive(editor, option.type)
+    );
+    return activeOption ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(activeOption.icon, {}) : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_icons17.ListIcon, {});
+  }, [editor, filteredLists]);
+}
+function ListDropdownMenu({
+  editor: providedEditor,
+  types = ["bulletList", "orderedList", "taskList"],
+  hideWhenUnavailable = false,
+  onOpenChange,
+  ...props
+}) {
+  const { editor } = (0, import_editor_utils16.useTiptapEditor)(providedEditor);
+  const {
+    isOpen,
+    listInSchema,
+    filteredLists,
+    canToggleAny,
+    isAnyActive,
+    handleOpenChange
+  } = useListDropdownState(editor, types);
+  const getActiveIcon = useActiveListIcon(editor, filteredLists);
+  const show = (0, import_react47.useMemo)(() => {
+    return shouldShowListDropdown({
+      editor,
+      listTypes: types,
+      hideWhenUnavailable,
+      listInSchema,
+      canToggleAny
+    });
+  }, [editor, types, hideWhenUnavailable, listInSchema, canToggleAny]);
+  const handleOnOpenChange = (0, import_react47.useCallback)(
+    (open) => handleOpenChange(open, onOpenChange),
+    [handleOpenChange, onOpenChange]
+  );
+  if (!show || !editor || !editor.isEditable) {
+    return null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_dropdown_menu.DropdownMenu.Root, { open: isOpen, onOpenChange: handleOnOpenChange, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_dropdown_menu.DropdownMenu.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+      import_button13.Button,
+      {
+        type: "button",
+        variant: "ghost",
+        color: "default",
+        "data-active-state": isAnyActive ? "on" : "off",
+        tabIndex: -1,
+        "aria-label": "List options",
+        tooltip: "List",
+        endContent: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_icons17.ChevronDownIcon, {}),
+        ...props,
+        children: getActiveIcon()
+      }
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_dropdown_menu.DropdownMenu.Content, { children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_dropdown_menu.DropdownMenu.Group, { children: filteredLists.map((option) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_dropdown_menu.DropdownMenu.Item, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+      ListButton,
+      {
+        editor,
+        type: option.type,
+        text: option.label,
+        hideWhenUnavailable,
+        tooltip: "",
+        fullWidth: true,
+        spacing: "start"
+      }
+    ) }, option.type)) }) })
+  ] });
+}
+
+// src/ui/table-button/index.tsx
+var import_editor_utils17 = require("@kopexa/editor-utils");
+var import_toolbar6 = require("@kopexa/toolbar");
+var import_react48 = require("react");
+var import_jsx_runtime25 = require("react/jsx-runtime");
+var TableButton = ({
+  editor: providedEditor,
+  text,
+  hideWhenUnavailable = false,
+  onToggled,
+  onClick,
+  children,
+  ...buttonProps
+}) => {
+  const { editor } = (0, import_editor_utils17.useTiptapEditor)(providedEditor);
+  const {
+    isVisible,
+    canToggle: canToggle3,
+    isActive,
+    handleToggle,
+    label,
+    //     shortcutKeys,
+    Icon
+  } = useTableBlock({
+    editor,
+    hideWhenUnavailable,
     onToggled
-  } = 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(() => {
+  });
+  const handleClick = (0, import_react48.useCallback)(
+    (event) => {
+      onClick == null ? void 0 : onClick(event);
+      if (event.defaultPrevented) return;
+      handleToggle();
+    },
+    [handleToggle, onClick]
+  );
+  if (!isVisible) {
+    return null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+    import_toolbar6.ToolbarButton,
+    {
+      type: "button",
+      variant: "ghost",
+      color: "default",
+      "data-active-state": isActive ? "on" : "off",
+      disabled: !canToggle3,
+      "data-disabled": !canToggle3,
+      tabIndex: -1,
+      "aria-label": label,
+      "aria-pressed": isActive,
+      title: label,
+      onClick: handleClick,
+      isIconOnly: !text && !children,
+      ...buttonProps,
+      children: children || /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_jsx_runtime25.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Icon, {}),
+        text && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { children: text })
+      ] })
+    }
+  );
+};
+
+// src/ui/text-align-button/text-align-button.tsx
+var import_button14 = require("@kopexa/button");
+var import_editor_utils19 = require("@kopexa/editor-utils");
+var import_react50 = require("react");
+
+// src/ui/text-align-button/use-text-align.ts
+var import_editor_utils18 = require("@kopexa/editor-utils");
+var import_icons18 = require("@kopexa/icons");
+var import_react49 = require("react");
+var TEXT_ALIGN_SHORTCUT_KEYS = {
+  left: "mod+shift+l",
+  center: "mod+shift+e",
+  right: "mod+shift+r",
+  justify: "mod+shift+j"
+};
+var textAlignIcons = {
+  left: import_icons18.AlignLeftIcon,
+  center: import_icons18.AlignCenterIcon,
+  right: import_icons18.AlignRightIcon,
+  justify: import_icons18.AlignJustifyIcon
+};
+var textAlignLabels = {
+  left: "Align left",
+  center: "Align center",
+  right: "Align right",
+  justify: "Align justify"
+};
+function canSetTextAlign(editor, align) {
+  if (!editor || !editor.isEditable) return false;
+  if (!(0, import_editor_utils18.isExtensionAvailable)(editor, "textAlign") || (0, import_editor_utils18.isNodeTypeSelected)(editor, ["image"]))
+    return false;
+  return editor.can().setTextAlign(align);
+}
+function hasSetTextAlign(commands) {
+  return "setTextAlign" in commands;
+}
+function isTextAlignActive(editor, align) {
+  if (!editor || !editor.isEditable) return false;
+  return editor.isActive({ textAlign: align });
+}
+function setTextAlign(editor, align) {
+  if (!editor || !editor.isEditable) return false;
+  if (!canSetTextAlign(editor, align)) return false;
+  const chain = editor.chain().focus();
+  if (hasSetTextAlign(chain)) {
+    return chain.setTextAlign(align).run();
+  }
+  return false;
+}
+function shouldShowButton3(props) {
+  const { editor, hideWhenUnavailable, align } = props;
+  if (!editor || !editor.isEditable) return false;
+  if (!(0, import_editor_utils18.isExtensionAvailable)(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 } = (0, import_editor_utils18.useTiptapEditor)(providedEditor);
+  const [isVisible, setIsVisible] = (0, import_react49.useState)(true);
+  const canAlign = canSetTextAlign(editor, align);
+  const isActive = isTextAlignActive(editor, align);
+  (0, import_react49.useEffect)(() => {
     if (!editor) return;
     const handleSelectionUpdate = () => {
-      setIsVisible(shouldShowButton3({ editor, hideWhenUnavailable }));
+      setIsVisible(shouldShowButton3({ editor, align, hideWhenUnavailable }));
     };
     handleSelectionUpdate();
     editor.on("selectionUpdate", handleSelectionUpdate);
     return () => {
       editor.off("selectionUpdate", handleSelectionUpdate);
     };
-  }, [editor, hideWhenUnavailable]);
-  const handleToggle = React16.useCallback(() => {
+  }, [editor, hideWhenUnavailable, align]);
+  const handleTextAlign = (0, import_react49.useCallback)(() => {
     if (!editor) return false;
-    const success = toggleCodeBlock(editor);
+    const success = setTextAlign(editor, align);
     if (success) {
-      onToggled == null ? void 0 : onToggled();
+      onAligned == null ? void 0 : onAligned();
     }
     return success;
-  }, [editor, onToggled]);
+  }, [editor, align, onAligned]);
   return {
     isVisible,
     isActive,
-    handleToggle,
-    canToggle: canToggleState,
-    label: "Code Block",
-    shortcutKeys: CODE_BLOCK_SHORTCUT_KEY,
-    Icon: import_icons15.CodeblockIcon
+    handleTextAlign,
+    canAlign,
+    label: textAlignLabels[align],
+    shortcutKeys: TEXT_ALIGN_SHORTCUT_KEYS[align],
+    Icon: textAlignIcons[align]
   };
 }
 
-// src/ui/codeblock-button/code-block-button.tsx
-var import_jsx_runtime22 = require("react/jsx-runtime");
-var CodeBlockButton = ({
+// src/ui/text-align-button/text-align-button.tsx
+var import_jsx_runtime26 = require("react/jsx-runtime");
+var TextAlignButton = ({
   editor: providedEditor,
+  align,
   text,
   hideWhenUnavailable = false,
-  onToggled,
+  onAligned,
   showShortcut = false,
   onClick,
   children,
   ...buttonProps
 }) => {
-  const { editor } = useTiptapEditor(providedEditor);
-  const { isVisible, canToggle: canToggle3, isActive, handleToggle, label, shortcutKeys } = useCodeBlock({
+  const { editor } = (0, import_editor_utils19.useTiptapEditor)(providedEditor);
+  const {
+    isVisible,
+    handleTextAlign,
+    label,
+    canAlign,
+    isActive,
+    Icon,
+    shortcutKeys
+  } = useTextAlign({
     editor,
+    align,
     hideWhenUnavailable,
-    onToggled
+    onAligned
   });
-  const handleClick = (0, import_react44.useCallback)(
-    (event) => {
-      onClick == null ? void 0 : onClick(event);
-      if (event.defaultPrevented) return;
-      handleToggle();
+  const handleClick = (0, import_react50.useCallback)(
+    (e) => {
+      onClick == null ? void 0 : onClick(e);
+      if (e.defaultPrevented) return;
+      handleTextAlign();
     },
-    [handleToggle, onClick]
+    [handleTextAlign, onClick]
   );
   if (!isVisible) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
-    import_toolbar5.ToolbarButton,
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+    import_button14.IconButton,
     {
       type: "button",
+      disabled: canAlign,
       variant: "ghost",
       color: "default",
-      disabled: !canToggle3,
-      "data-disabled": !canToggle3,
       "data-active-state": isActive ? "on" : "off",
+      "data-disabled": canAlign,
       tabIndex: -1,
-      "aria-label": "codeBlock",
+      "aria-label": label,
       "aria-pressed": isActive,
-      title: label,
+      tooltip: label,
       shortcutKeys,
       onClick: handleClick,
-      isIconOnly: true,
       ...buttonProps,
-      children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_icons16.CodeblockIcon, {})
+      children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Icon, {})
     }
   );
 };
 
-// src/ui/color-highlight-popover/color-highlight-popover.tsx
-var import_button11 = require("@kopexa/button");
-var import_icons18 = require("@kopexa/icons");
-var import_popover2 = require("@kopexa/popover");
-var import_toolbar7 = require("@kopexa/toolbar");
-var import_react46 = require("react");
+// src/ui/turn-into-dropdown/turn-into-dropdown.tsx
+var import_button17 = require("@kopexa/button");
+var import_dropdown_menu2 = require("@kopexa/dropdown-menu");
+var import_editor_utils28 = require("@kopexa/editor-utils");
+var import_react56 = require("react");
 
-// src/ui/color-highlight-button/color-highlight-button.tsx
-var import_theme8 = require("@kopexa/theme");
-var import_toolbar6 = require("@kopexa/toolbar");
-var import_react45 = require("react");
+// src/ui/blockquote-button/blockquote-button.tsx
+var import_editor_utils21 = require("@kopexa/editor-utils");
+var import_toolbar7 = require("@kopexa/toolbar");
+var React16 = __toESM(require("react"));
 
-// src/ui/color-highlight-button/use-color-highlight.ts
-var import_editor_utils10 = require("@kopexa/editor-utils");
-var import_icons17 = require("@kopexa/icons");
-var import_use_is_mobile = require("@kopexa/use-is-mobile");
-var React17 = __toESM(require("react"));
-var import_react_hotkeys_hook = require("react-hotkeys-hook");
-var COLOR_HIGHLIGHT_SHORTCUT_KEY = "mod+shift+h";
-var HIGHLIGHT_COLORS = [
-  {
-    label: "Default background",
-    value: "var(--tt-bg-color)",
-    border: "var(--tt-bg-color-contrast)"
-  },
-  {
-    label: "Gray background",
-    value: "var(--tt-color-highlight-gray)",
-    border: "var(--tt-color-highlight-gray-contrast)"
-  },
-  {
-    label: "Brown background",
-    value: "var(--tt-color-highlight-brown)",
-    border: "var(--tt-color-highlight-brown-contrast)"
-  },
-  {
-    label: "Orange background",
-    value: "var(--tt-color-highlight-orange)",
-    border: "var(--tt-color-highlight-orange-contrast)"
-  },
-  {
-    label: "Yellow background",
-    value: "var(--tt-color-highlight-yellow)",
-    border: "var(--tt-color-highlight-yellow-contrast)"
-  },
-  {
-    label: "Green background",
-    value: "var(--tt-color-highlight-green)",
-    border: "var(--tt-color-highlight-green-contrast)"
-  },
-  {
-    label: "Blue background",
-    value: "var(--tt-color-highlight-blue)",
-    border: "var(--tt-color-highlight-blue-contrast)"
-  },
-  {
-    label: "Purple background",
-    value: "var(--tt-color-highlight-purple)",
-    border: "var(--tt-color-highlight-purple-contrast)"
-  },
-  {
-    label: "Pink background",
-    value: "var(--tt-color-highlight-pink)",
-    border: "var(--tt-color-highlight-pink-contrast)"
-  },
-  {
-    label: "Red background",
-    value: "var(--tt-color-highlight-red)",
-    border: "var(--tt-color-highlight-red-contrast)"
-  }
-];
-function pickHighlightColorsByValue(values) {
-  const colorMap = new Map(
-    HIGHLIGHT_COLORS.map((color) => [color.value, color])
-  );
-  return values.map((value) => colorMap.get(value)).filter((color) => !!color);
-}
-function canColorHighlight(editor) {
+// src/ui/blockquote-button/use-blockquote.ts
+var import_editor_utils20 = require("@kopexa/editor-utils");
+var import_icons19 = require("@kopexa/icons");
+var import_state7 = require("@tiptap/pm/state");
+var React15 = __toESM(require("react"));
+var BLOCKQUOTE_SHORTCUT_KEY = "mod+shift+b";
+function canToggleBlockquote(editor, turnInto = true) {
+  var _a;
   if (!editor || !editor.isEditable) return false;
-  if (!(0, import_editor_utils10.isMarkInSchema)("highlight", editor) || (0, import_editor_utils10.isNodeTypeSelected)(editor, ["image"]))
+  if (!(0, import_editor_utils20.isNodeInSchema)("blockquote", editor) || (0, import_editor_utils20.isNodeTypeSelected)(editor, ["image"]))
     return false;
-  return editor.can().setMark("highlight");
-}
-function isColorHighlightActive(editor, highlightColor) {
-  if (!editor || !editor.isEditable) return false;
-  return highlightColor ? editor.isActive("highlight", { color: highlightColor }) : editor.isActive("highlight");
+  if (!turnInto) {
+    return editor.can().toggleWrap("blockquote");
+  }
+  try {
+    const view = editor.view;
+    const state = view.state;
+    const selection = state.selection;
+    if (selection.empty || selection instanceof import_state7.TextSelection) {
+      const pos = (_a = (0, import_editor_utils20.findNodePosition)({
+        editor,
+        node: state.selection.$anchor.node(1)
+      })) == null ? void 0 : _a.pos;
+      if (!(0, import_editor_utils20.isValidPosition)(pos)) return false;
+    }
+    return true;
+  } catch {
+    return false;
+  }
 }
-function removeHighlight(editor) {
+function toggleBlockquote(editor) {
+  var _a, _b, _c;
   if (!editor || !editor.isEditable) return false;
-  if (!canColorHighlight(editor)) return false;
-  return editor.chain().focus().unsetMark("highlight").run();
+  if (!canToggleBlockquote(editor)) return false;
+  try {
+    const view = editor.view;
+    let state = view.state;
+    let tr = state.tr;
+    if (state.selection.empty || state.selection instanceof import_state7.TextSelection) {
+      const pos = (_a = (0, import_editor_utils20.findNodePosition)({
+        editor,
+        node: state.selection.$anchor.node(1)
+      })) == null ? void 0 : _a.pos;
+      if (!(0, import_editor_utils20.isValidPosition)(pos)) return false;
+      tr = tr.setSelection(import_state7.NodeSelection.create(state.doc, pos));
+      view.dispatch(tr);
+      state = view.state;
+    }
+    const selection = state.selection;
+    let chain = editor.chain().focus();
+    if (selection instanceof import_state7.NodeSelection) {
+      const firstChild = (_b = selection.node.firstChild) == null ? void 0 : _b.firstChild;
+      const lastChild = (_c = selection.node.lastChild) == null ? void 0 : _c.lastChild;
+      const from = firstChild ? selection.from + firstChild.nodeSize : selection.from + 1;
+      const to = lastChild ? selection.to - lastChild.nodeSize : selection.to - 1;
+      chain = chain.setTextSelection({ from, to }).clearNodes();
+    }
+    const toggle = editor.isActive("blockquote") ? chain.lift("blockquote") : chain.wrapIn("blockquote");
+    toggle.run();
+    editor.chain().focus().selectTextblockEnd().run();
+    return true;
+  } catch {
+    return false;
+  }
 }
 function shouldShowButton4(props) {
   const { editor, hideWhenUnavailable } = props;
   if (!editor || !editor.isEditable) return false;
-  if (!(0, import_editor_utils10.isMarkInSchema)("highlight", editor)) return false;
+  if (!(0, import_editor_utils20.isNodeInSchema)("blockquote", editor)) return false;
   if (hideWhenUnavailable && !editor.isActive("code")) {
-    return canColorHighlight(editor);
+    return canToggleBlockquote(editor);
   }
   return true;
 }
-function useColorHighlight(config) {
+function useBlockquote(config) {
   const {
     editor: providedEditor,
-    label,
-    highlightColor,
     hideWhenUnavailable = false,
-    onApplied
-  } = config;
-  const { editor } = useTiptapEditor(providedEditor);
-  const isMobile = (0, import_use_is_mobile.useIsMobile)();
-  const [isVisible, setIsVisible] = React17.useState(true);
-  const canColorHighlightState = canColorHighlight(editor);
-  const isActive = isColorHighlightActive(editor, highlightColor);
-  React17.useEffect(() => {
+    onToggled
+  } = config || {};
+  const { editor } = (0, import_editor_utils20.useTiptapEditor)(providedEditor);
+  const [isVisible, setIsVisible] = React15.useState(true);
+  const canToggle3 = canToggleBlockquote(editor);
+  const isActive = (editor == null ? void 0 : editor.isActive("blockquote")) || false;
+  React15.useEffect(() => {
     if (!editor) return;
     const handleSelectionUpdate = () => {
       setIsVisible(shouldShowButton4({ editor, hideWhenUnavailable }));
@@ -6146,674 +6943,403 @@ function useColorHighlight(config) {
       editor.off("selectionUpdate", handleSelectionUpdate);
     };
   }, [editor, hideWhenUnavailable]);
-  const handleColorHighlight = React17.useCallback(() => {
-    if (!editor || !canColorHighlightState || !highlightColor || !label)
-      return false;
-    if (editor.state.storedMarks) {
-      const highlightMarkType = editor.schema.marks.highlight;
-      if (highlightMarkType) {
-        editor.view.dispatch(
-          editor.state.tr.removeStoredMark(highlightMarkType)
-        );
-      }
-    }
-    setTimeout(() => {
-      const success = editor.chain().focus().toggleMark("highlight", { color: highlightColor }).run();
-      if (success) {
-        onApplied == null ? void 0 : onApplied({ color: highlightColor, label });
-      }
-      return success;
-    }, 0);
-  }, [canColorHighlightState, highlightColor, editor, label, onApplied]);
-  const handleRemoveHighlight = React17.useCallback(() => {
-    const success = removeHighlight(editor);
+  const handleToggle = React15.useCallback(() => {
+    if (!editor) return false;
+    const success = toggleBlockquote(editor);
     if (success) {
-      onApplied == null ? void 0 : onApplied({ color: "", label: "Remove highlight" });
+      onToggled == null ? void 0 : onToggled();
     }
     return success;
-  }, [editor, onApplied]);
-  (0, import_react_hotkeys_hook.useHotkeys)(
-    COLOR_HIGHLIGHT_SHORTCUT_KEY,
-    (event) => {
-      event.preventDefault();
-      handleColorHighlight();
-    },
-    {
-      enabled: isVisible && canColorHighlightState,
-      enableOnContentEditable: !isMobile,
-      enableOnFormTags: true
-    }
-  );
+  }, [editor, onToggled]);
   return {
     isVisible,
     isActive,
-    handleColorHighlight,
-    handleRemoveHighlight,
-    canColorHighlight: canColorHighlightState,
-    label: label || `Highlight`,
-    shortcutKeys: COLOR_HIGHLIGHT_SHORTCUT_KEY,
-    Icon: import_icons17.HighlighterIcon
+    handleToggle,
+    canToggle: canToggle3,
+    label: "Blockquote",
+    shortcutKeys: BLOCKQUOTE_SHORTCUT_KEY,
+    Icon: import_icons19.BlockquoteIcon
   };
 }
 
-// src/ui/color-highlight-button/color-highlight-button.tsx
-var import_jsx_runtime23 = require("react/jsx-runtime");
-var ColorHighlightButton = ({
+// src/ui/blockquote-button/blockquote-button.tsx
+var import_jsx_runtime27 = require("react/jsx-runtime");
+var BlockquoteButton = ({
   editor: providedEditor,
-  highlightColor,
   text,
   hideWhenUnavailable = false,
-  onApplied,
+  onToggled,
   showShortcut = false,
   onClick,
   children,
-  style,
-  className,
   ...buttonProps
 }) => {
-  const { editor } = useTiptapEditor(providedEditor);
+  const { editor } = (0, import_editor_utils21.useTiptapEditor)(providedEditor);
   const {
     isVisible,
-    canColorHighlight: canColorHighlight2,
+    canToggle: canToggle3,
     isActive,
-    handleColorHighlight,
+    handleToggle,
     label,
-    shortcutKeys
-  } = useColorHighlight({
+    shortcutKeys,
+    Icon
+  } = useBlockquote({
     editor,
-    highlightColor,
-    label: text || `Toggle highlight (${highlightColor})`,
     hideWhenUnavailable,
-    onApplied
+    onToggled
   });
-  const handleClick = (0, import_react45.useCallback)(
+  const handleClick = React16.useCallback(
     (event) => {
       onClick == null ? void 0 : onClick(event);
       if (event.defaultPrevented) return;
-      handleColorHighlight();
+      handleToggle();
     },
-    [handleColorHighlight, onClick]
-  );
-  const buttonStyle = (0, import_react45.useMemo)(
-    () => ({
-      ...style,
-      "--highlight-color": highlightColor
-    }),
-    [highlightColor, style]
+    [handleToggle, onClick]
   );
   if (!isVisible) {
     return null;
   }
-  const styles = (0, import_theme8.colorHighlightButton)();
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
-    import_toolbar6.ToolbarButton,
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+    import_toolbar7.ToolbarButton,
     {
       type: "button",
-      disabled: !canColorHighlight2,
-      "data-disabled": !canColorHighlight2,
       variant: "ghost",
       color: "default",
+      disabled: !canToggle3,
+      "data-disabled": !canToggle3,
       "data-active-state": isActive ? "on" : "off",
       tabIndex: -1,
-      "aria-label": label,
-      shortcutKeys,
+      "aria-label": "blockquote",
       "aria-pressed": isActive,
+      title: label,
+      shortcutKeys,
       onClick: handleClick,
-      style: buttonStyle,
-      className: styles.button({ className }),
-      isIconOnly: true,
+      isIconOnly: !text && !children,
       ...buttonProps,
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-          "span",
-          {
-            "data-active-state": isActive ? "on" : "off",
-            className: styles.mark()
-          }
-        ),
-        children || /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_jsx_runtime23.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-            "span",
-            {
-              style: { "--highlight-color": highlightColor }
-            }
-          ),
-          text
-        ] })
-      ]
+      children: children != null ? children : /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_jsx_runtime27.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Icon, {}),
+        text && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { children: text })
+      ] })
     }
   );
 };
 
-// src/ui/color-highlight-popover/color-highlight-popover.tsx
-var import_jsx_runtime24 = require("react/jsx-runtime");
-var ColorHighlightPopoverButton = ({
-  className,
-  children,
-  ...props
-}) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
-  import_button11.IconButton,
-  {
-    type: "button",
-    className,
-    variant: "ghost",
-    color: "default",
-    tabIndex: -1,
-    "aria-label": "Highlight text",
-    tooltip: "Highlight",
-    isIconOnly: !children,
-    ...props,
-    children: children != null ? children : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_icons18.HighlighterIcon, {})
-  }
-);
-function ColorHighlightPopoverContent({
-  editor,
-  colors = pickHighlightColorsByValue([
-    "var(--tt-color-highlight-green)",
-    "var(--tt-color-highlight-blue)",
-    "var(--tt-color-highlight-red)",
-    "var(--tt-color-highlight-purple)",
-    "var(--tt-color-highlight-yellow)"
-  ])
-}) {
-  const { handleRemoveHighlight } = useColorHighlight({ editor });
-  const containerRef = (0, import_react46.useRef)(null);
-  const menuItems = (0, import_react46.useMemo)(
-    () => [...colors, { label: "Remove highlight", value: "none" }],
-    [colors]
-  );
-  const { selectedIndex } = useMenuNavigation({
-    containerRef,
-    items: menuItems,
-    orientation: "both",
-    onSelect: (item) => {
-      if (!containerRef.current) return false;
-      const highlightedElement = containerRef.current.querySelector(
-        '[data-highlighted="true"]'
-      );
-      if (highlightedElement) highlightedElement.click();
-      if (item.value === "none") handleRemoveHighlight();
-    },
-    autoSelectFirstItem: false
-  });
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { ref: containerRef, className: "flex gap-1 items-center", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
-      "div",
-      {
-        className: "flex items-center gap-1 outline-none",
-        "data-orientation": "horizontal",
-        children: colors.map((color, index) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
-          ColorHighlightButton,
-          {
-            editor,
-            highlightColor: color.value,
-            "aria-label": `${color.label} highlight color`,
-            tabIndex: index === selectedIndex ? 0 : -1,
-            "data-highlighted": selectedIndex === index
-          },
-          color.value
-        ))
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_toolbar7.ToolbarSeparator, { orientation: "vertical" }),
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "tiptap-button-group", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
-      import_button11.IconButton,
-      {
-        onClick: handleRemoveHighlight,
-        "aria-label": "Remove highlight",
-        tabIndex: selectedIndex === colors.length ? 0 : -1,
-        type: "button",
-        role: "menuitem",
-        variant: "ghost",
-        color: "default",
-        "data-highlighted": selectedIndex === colors.length,
-        children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_icons18.BanIcon, {})
-      }
-    ) })
-  ] });
-}
-function ColorHighlightPopover({
-  editor: providedEditor,
-  colors = pickHighlightColorsByValue([
-    "var(--tt-color-highlight-green)",
-    "var(--tt-color-highlight-blue)",
-    "var(--tt-color-highlight-red)",
-    "var(--tt-color-highlight-purple)",
-    "var(--tt-color-highlight-yellow)"
-  ]),
-  hideWhenUnavailable = false,
-  onApplied,
-  ...props
-}) {
-  const { editor } = useTiptapEditor(providedEditor);
-  const [isOpen, setIsOpen] = (0, import_react46.useState)(false);
-  const { isVisible, canColorHighlight: canColorHighlight2, isActive, label } = useColorHighlight({
-    editor,
-    hideWhenUnavailable,
-    onApplied
-  });
-  if (!isVisible) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_popover2.Popover.Root, { open: isOpen, onOpenChange: setIsOpen, spacing: "dense", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
-      import_popover2.Popover.Trigger,
-      {
-        render: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
-          ColorHighlightPopoverButton,
-          {
-            disabled: !canColorHighlight2,
-            "data-disabled": !canColorHighlight2,
-            "data-active-state": isActive ? "on" : "off",
-            "aria-pressed": isActive,
-            "aria-label": label,
-            title: label,
-            ...props
-          }
-        )
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_popover2.Popover.Content, { "aria-label": "Highlight colors", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(ColorHighlightPopoverContent, { editor, colors }) })
-  ] });
-}
+// src/ui/codeblock-button/code-block-button.tsx
+var import_editor_utils23 = require("@kopexa/editor-utils");
+var import_icons21 = require("@kopexa/icons");
+var import_toolbar8 = require("@kopexa/toolbar");
+var import_react51 = require("react");
 
-// src/ui/heading-dropdown-menu/index.tsx
-var import_button13 = require("@kopexa/button");
-var import_dropdown_menu = require("@kopexa/dropdown-menu");
-var import_editor_utils12 = require("@kopexa/editor-utils");
+// src/ui/codeblock-button/use-code-block.ts
+var import_editor_utils22 = require("@kopexa/editor-utils");
 var import_icons20 = require("@kopexa/icons");
-var import_react48 = require("@tiptap/react");
-var React19 = __toESM(require("react"));
-
-// src/ui/heading-button/index.tsx
-var import_button12 = require("@kopexa/button");
-var import_editor_utils11 = require("@kopexa/editor-utils");
-var import_icons19 = require("@kopexa/icons");
-var React18 = __toESM(require("react"));
-
-// src/ui/heading-button/utils.ts
-var import_react47 = require("@tiptap/react");
-var headingShortcutKeys = {
-  1: "Ctrl-Alt-1",
-  2: "Ctrl-Alt-2",
-  3: "Ctrl-Alt-3",
-  4: "Ctrl-Alt-4",
-  5: "Ctrl-Alt-5",
-  6: "Ctrl-Alt-6"
-};
-function canToggleHeading(editor, level) {
-  if (!editor) return false;
+var import_state8 = require("@tiptap/pm/state");
+var React17 = __toESM(require("react"));
+var CODE_BLOCK_SHORTCUT_KEY = "mod+alt+c";
+function canToggle2(editor, turnInto = true) {
+  var _a;
+  if (!editor || !editor.isEditable) return false;
+  if (!(0, import_editor_utils22.isNodeInSchema)("codeBlock", editor) || (0, import_editor_utils22.isNodeTypeSelected)(editor, ["image"]))
+    return false;
+  if (!turnInto) {
+    return editor.can().toggleNode("codeBlock", "paragraph");
+  }
   try {
-    return editor.can().toggleNode("heading", "paragraph", { level });
+    const view = editor.view;
+    const state = view.state;
+    const selection = state.selection;
+    if (selection.empty || selection instanceof import_state8.TextSelection) {
+      const pos = (_a = (0, import_editor_utils22.findNodePosition)({
+        editor,
+        node: state.selection.$anchor.node(1)
+      })) == null ? void 0 : _a.pos;
+      if (!(0, import_editor_utils22.isValidPosition)(pos)) return false;
+    }
+    return true;
   } catch {
     return false;
   }
 }
-function isHeadingActive(editor, level) {
-  if (!editor) return false;
-  return editor.isActive("heading", { level });
-}
-function toggleHeading(editor, level) {
-  if (!editor) return;
-  if (editor.isActive("heading", { level })) {
-    editor.chain().focus().setNode("paragraph").run();
-  } else {
-    editor.chain().focus().toggleNode("heading", "paragraph", { level }).run();
-  }
-}
-function isHeadingButtonDisabled(editor, level, userDisabled = false) {
-  if (!editor) return true;
-  if (userDisabled) return true;
-  if (!canToggleHeading(editor, level)) return true;
-  return false;
-}
-function shouldShowHeadingButton(params) {
-  const { editor, hideWhenUnavailable, headingInSchema } = params;
-  if (!headingInSchema || !editor) {
+function toggleCodeBlock(editor) {
+  var _a, _b, _c;
+  if (!editor || !editor.isEditable) return false;
+  if (!canToggle2(editor)) return false;
+  try {
+    const view = editor.view;
+    let state = view.state;
+    let tr = state.tr;
+    if (state.selection.empty || state.selection instanceof import_state8.TextSelection) {
+      const pos = (_a = (0, import_editor_utils22.findNodePosition)({
+        editor,
+        node: state.selection.$anchor.node(1)
+      })) == null ? void 0 : _a.pos;
+      if (!(0, import_editor_utils22.isValidPosition)(pos)) return false;
+      tr = tr.setSelection(import_state8.NodeSelection.create(state.doc, pos));
+      view.dispatch(tr);
+      state = view.state;
+    }
+    const selection = state.selection;
+    let chain = editor.chain().focus();
+    if (selection instanceof import_state8.NodeSelection) {
+      const firstChild = (_b = selection.node.firstChild) == null ? void 0 : _b.firstChild;
+      const lastChild = (_c = selection.node.lastChild) == null ? void 0 : _c.lastChild;
+      const from = firstChild ? selection.from + firstChild.nodeSize : selection.from + 1;
+      const to = lastChild ? selection.to - lastChild.nodeSize : selection.to - 1;
+      chain = chain.setTextSelection({ from, to }).clearNodes();
+    }
+    const toggle = editor.isActive("codeBlock") ? chain.setNode("paragraph") : chain.toggleNode("codeBlock", "paragraph");
+    toggle.run();
+    editor.chain().focus().selectTextblockEnd().run();
+    return true;
+  } catch {
     return false;
   }
-  if (hideWhenUnavailable) {
-    if ((0, import_react47.isNodeSelection)(editor.state.selection)) {
-      return false;
-    }
+}
+function shouldShowButton5(props) {
+  const { editor, hideWhenUnavailable } = props;
+  if (!editor || !editor.isEditable) return false;
+  if (!(0, import_editor_utils22.isNodeInSchema)("codeBlock", editor)) return false;
+  if (hideWhenUnavailable && !editor.isActive("code")) {
+    return canToggle2(editor);
   }
   return true;
 }
-function getFormattedHeadingName(level) {
-  return `Heading ${level}`;
-}
-
-// src/ui/heading-button/index.tsx
-var import_jsx_runtime25 = require("react/jsx-runtime");
-var headingIcons = {
-  1: import_icons19.HeadingOneIcon,
-  2: import_icons19.HeadingTwoIcon,
-  3: import_icons19.HeadingThreeIcon,
-  4: import_icons19.HeadingFourIcon,
-  5: import_icons19.HeadingFiveIcon,
-  6: import_icons19.HeadingSixIcon
-};
-function useHeadingState(editor, level, disabled = false) {
-  const headingInSchema = (0, import_editor_utils11.isNodeInSchema)("heading", editor);
-  const isDisabled = isHeadingButtonDisabled(editor, level, disabled);
-  const isActive = isHeadingActive(editor, level);
-  const Icon = headingIcons[level];
-  const shortcutKey = headingShortcutKeys[level];
-  const formattedName = getFormattedHeadingName(level);
+function useCodeBlock(config) {
+  const {
+    editor: providedEditor,
+    hideWhenUnavailable = false,
+    onToggled
+  } = config || {};
+  const { editor } = (0, import_editor_utils22.useTiptapEditor)(providedEditor);
+  const [isVisible, setIsVisible] = React17.useState(true);
+  const canToggleState = canToggle2(editor);
+  const isActive = (editor == null ? void 0 : editor.isActive("codeBlock")) || false;
+  React17.useEffect(() => {
+    if (!editor) return;
+    const handleSelectionUpdate = () => {
+      setIsVisible(shouldShowButton5({ editor, hideWhenUnavailable }));
+    };
+    handleSelectionUpdate();
+    editor.on("selectionUpdate", handleSelectionUpdate);
+    return () => {
+      editor.off("selectionUpdate", handleSelectionUpdate);
+    };
+  }, [editor, hideWhenUnavailable]);
+  const handleToggle = React17.useCallback(() => {
+    if (!editor) return false;
+    const success = toggleCodeBlock(editor);
+    if (success) {
+      onToggled == null ? void 0 : onToggled();
+    }
+    return success;
+  }, [editor, onToggled]);
   return {
-    headingInSchema,
-    isDisabled,
+    isVisible,
     isActive,
-    Icon,
-    shortcutKey,
-    formattedName
+    handleToggle,
+    canToggle: canToggleState,
+    label: "Code Block",
+    shortcutKeys: CODE_BLOCK_SHORTCUT_KEY,
+    Icon: import_icons20.CodeblockIcon
   };
 }
-var HeadingButton = ({
+
+// src/ui/codeblock-button/code-block-button.tsx
+var import_jsx_runtime28 = require("react/jsx-runtime");
+var CodeBlockButton = ({
   editor: providedEditor,
-  level,
   text,
   hideWhenUnavailable = false,
-  className = "",
-  disabled,
+  onToggled,
+  showShortcut = false,
   onClick,
   children,
-  ref,
   ...buttonProps
 }) => {
-  const { editor } = useTiptapEditor(providedEditor);
-  const {
-    headingInSchema,
-    isDisabled,
-    isActive,
-    Icon,
-    shortcutKey,
-    formattedName
-  } = useHeadingState(editor, level, disabled);
-  const handleClick = React18.useCallback(
-    (e) => {
-      onClick == null ? void 0 : onClick(e);
-      if (!e.defaultPrevented && !isDisabled && editor) {
-        toggleHeading(editor, level);
-      }
+  const { editor } = (0, import_editor_utils23.useTiptapEditor)(providedEditor);
+  const { isVisible, canToggle: canToggle3, isActive, handleToggle, label, shortcutKeys } = useCodeBlock({
+    editor,
+    hideWhenUnavailable,
+    onToggled
+  });
+  const handleClick = (0, import_react51.useCallback)(
+    (event) => {
+      onClick == null ? void 0 : onClick(event);
+      if (event.defaultPrevented) return;
+      handleToggle();
     },
-    [onClick, isDisabled, editor, level]
+    [handleToggle, onClick]
   );
-  const show = React18.useMemo(() => {
-    return shouldShowHeadingButton({
-      editor,
-      level,
-      hideWhenUnavailable,
-      headingInSchema
-    });
-  }, [editor, level, hideWhenUnavailable, headingInSchema]);
-  if (!show || !editor || !editor.isEditable) {
+  if (!isVisible) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
-    import_button12.Button,
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+    import_toolbar8.ToolbarButton,
     {
       type: "button",
-      className: className.trim(),
-      disabled: isDisabled,
       variant: "ghost",
       color: "default",
+      disabled: !canToggle3,
+      "data-disabled": !canToggle3,
       "data-active-state": isActive ? "on" : "off",
-      "data-disabled": isDisabled,
       tabIndex: -1,
-      "aria-label": formattedName,
+      "aria-label": "codeBlock",
       "aria-pressed": isActive,
-      tooltip: formattedName,
-      shortcutKeys: shortcutKey,
+      title: label,
+      shortcutKeys,
       onClick: handleClick,
-      startContent: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Icon, {}),
+      isIconOnly: !text && !children,
       ...buttonProps,
-      ref,
-      children: children || text
+      children: children != null ? children : /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_jsx_runtime28.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_icons21.CodeblockIcon, {}),
+        text && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { children: text })
+      ] })
     }
   );
 };
 
-// src/ui/heading-dropdown-menu/index.tsx
-var import_jsx_runtime26 = require("react/jsx-runtime");
-function HeadingDropdownMenu({
-  editor: providedEditor,
-  levels = [1, 2, 3, 4, 5, 6],
-  hideWhenUnavailable = false,
-  onOpenChange,
-  ...props
-}) {
-  var _a;
-  const [isOpen, setIsOpen] = React19.useState(false);
-  const { editor } = useTiptapEditor(providedEditor);
-  const headingInSchema = (0, import_editor_utils12.isNodeInSchema)("heading", editor);
-  const handleOnOpenChange = React19.useCallback(
-    (open) => {
-      setIsOpen(open);
-      onOpenChange == null ? void 0 : onOpenChange(open);
-    },
-    [onOpenChange]
-  );
-  const getActiveIcon = React19.useCallback(() => {
-    if (!editor) return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_icons20.HeadingIcon, {});
-    const activeLevel = levels.find(
-      (level) => editor.isActive("heading", { level })
-    );
-    if (!activeLevel) return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_icons20.HeadingIcon, {});
-    const ActiveIcon = headingIcons[activeLevel];
-    return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(ActiveIcon, {});
-  }, [editor, levels]);
-  const canToggleAnyHeading = React19.useCallback(() => {
-    if (!editor) return false;
-    return levels.some(
-      (level) => editor.can().toggleNode("heading", "paragraph", { level })
-    );
-  }, [editor, levels]);
-  const isDisabled = !canToggleAnyHeading();
-  const isAnyHeadingActive = (_a = editor == null ? void 0 : editor.isActive("heading")) != null ? _a : false;
-  const show = React19.useMemo(() => {
-    if (!headingInSchema || !editor) {
-      return false;
-    }
-    if (hideWhenUnavailable) {
-      if ((0, import_react48.isNodeSelection)(editor.state.selection) || !canToggleAnyHeading()) {
-        return false;
-      }
-    }
-    return true;
-  }, [headingInSchema, editor, hideWhenUnavailable, canToggleAnyHeading]);
-  if (!show || !editor || !editor.isEditable) {
-    return null;
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_dropdown_menu.DropdownMenu.Root, { open: isOpen, onOpenChange: handleOnOpenChange, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_dropdown_menu.DropdownMenu.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
-      import_button13.Button,
-      {
-        type: "button",
-        disabled: isDisabled,
-        variant: "ghost",
-        color: "default",
-        "data-active-state": isAnyHeadingActive ? "on" : "off",
-        "data-disabled": isDisabled,
-        tabIndex: -1,
-        "aria-label": "Format text as heading",
-        "aria-pressed": isAnyHeadingActive,
-        tooltip: "Heading",
-        endContent: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_icons20.ChevronDownIcon, {}),
-        ...props,
-        children: getActiveIcon()
-      }
-    ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_dropdown_menu.DropdownMenu.Content, { children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_dropdown_menu.DropdownMenu.Group, { children: levels.map((level) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_dropdown_menu.DropdownMenu.Item, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
-      HeadingButton,
-      {
-        editor,
-        level,
-        text: getFormattedHeadingName(level),
-        tooltip: "",
-        fullWidth: true,
-        spacing: "start"
-      }
-    ) }, `heading-${level}`)) }) })
-  ] });
-}
-
-// src/ui/list-dropdown-menu/index.tsx
+// src/ui/heading-button/index.tsx
 var import_button15 = require("@kopexa/button");
-var import_dropdown_menu2 = require("@kopexa/dropdown-menu");
-var import_editor_utils14 = require("@kopexa/editor-utils");
+var import_editor_utils24 = require("@kopexa/editor-utils");
 var import_icons22 = require("@kopexa/icons");
-var import_react51 = require("@tiptap/react");
-var import_react52 = require("react");
+var React18 = __toESM(require("react"));
 
-// src/ui/list-button/index.tsx
-var import_button14 = require("@kopexa/button");
-var import_editor_utils13 = require("@kopexa/editor-utils");
-var import_icons21 = require("@kopexa/icons");
-var import_react49 = require("@tiptap/react");
-var import_react50 = require("react");
-var import_jsx_runtime27 = require("react/jsx-runtime");
-var listOptions = [
-  {
-    label: "Bullet List",
-    type: "bulletList",
-    icon: import_icons21.ListIcon
-  },
-  {
-    label: "Ordered List",
-    type: "orderedList",
-    icon: import_icons21.ListOrderedIcon
-  },
-  {
-    label: "Task List",
-    type: "taskList",
-    icon: import_icons21.ListTodoIcon
-  }
-];
-var listShortcutKeys = {
-  bulletList: "Ctrl-Shift-8",
-  orderedList: "Ctrl-Shift-7",
-  taskList: "Ctrl-Shift-9"
+// src/ui/heading-button/utils.ts
+var import_react52 = require("@tiptap/react");
+var headingShortcutKeys = {
+  1: "Ctrl-Alt-1",
+  2: "Ctrl-Alt-2",
+  3: "Ctrl-Alt-3",
+  4: "Ctrl-Alt-4",
+  5: "Ctrl-Alt-5",
+  6: "Ctrl-Alt-6"
 };
-function canToggleList(editor, type) {
-  if (!editor) {
+function canToggleHeading(editor, level) {
+  if (!editor) return false;
+  try {
+    return editor.can().toggleNode("heading", "paragraph", { level });
+  } catch {
     return false;
   }
-  switch (type) {
-    case "bulletList":
-      return editor.can().toggleBulletList();
-    case "orderedList":
-      return editor.can().toggleOrderedList();
-    case "taskList":
-      return editor.can().toggleList("taskList", "taskItem");
-    default:
-      return false;
-  }
 }
-function isListActive(editor, type) {
+function isHeadingActive(editor, level) {
   if (!editor) return false;
-  switch (type) {
-    case "bulletList":
-      return editor.isActive("bulletList");
-    case "orderedList":
-      return editor.isActive("orderedList");
-    case "taskList":
-      return editor.isActive("taskList");
-    default:
-      return false;
-  }
+  return editor.isActive("heading", { level });
 }
-function toggleList(editor, type) {
+function toggleHeading(editor, level) {
   if (!editor) return;
-  switch (type) {
-    case "bulletList":
-      editor.chain().focus().toggleBulletList().run();
-      break;
-    case "orderedList":
-      editor.chain().focus().toggleOrderedList().run();
-      break;
-    case "taskList":
-      editor.chain().focus().toggleList("taskList", "taskItem").run();
-      break;
+  if (editor.isActive("heading", { level })) {
+    editor.chain().focus().setNode("paragraph").run();
+  } else {
+    editor.chain().focus().toggleNode("heading", "paragraph", { level }).run();
   }
 }
-function getListOption(type) {
-  return listOptions.find((option) => option.type === type);
+function isHeadingButtonDisabled(editor, level, userDisabled = false) {
+  if (!editor) return true;
+  if (userDisabled) return true;
+  if (!canToggleHeading(editor, level)) return true;
+  return false;
 }
-function shouldShowListButton(params) {
-  const { editor, type, hideWhenUnavailable, listInSchema } = params;
-  if (!listInSchema || !editor) {
+function shouldShowHeadingButton(params) {
+  const { editor, hideWhenUnavailable, headingInSchema } = params;
+  if (!headingInSchema || !editor) {
     return false;
   }
   if (hideWhenUnavailable) {
-    if ((0, import_react49.isNodeSelection)(editor.state.selection) || !canToggleList(editor, type)) {
+    if ((0, import_react52.isNodeSelection)(editor.state.selection)) {
       return false;
     }
   }
   return true;
 }
-function useListState(editor, type) {
-  const listInSchema = (0, import_editor_utils13.isNodeInSchema)(type, editor);
-  const listOption = getListOption(type);
-  const isActive = isListActive(editor, type);
-  const shortcutKey = listShortcutKeys[type];
+function getFormattedHeadingName(level) {
+  return `Heading ${level}`;
+}
+
+// src/ui/heading-button/index.tsx
+var import_jsx_runtime29 = require("react/jsx-runtime");
+var headingIcons = {
+  1: import_icons22.HeadingOneIcon,
+  2: import_icons22.HeadingTwoIcon,
+  3: import_icons22.HeadingThreeIcon,
+  4: import_icons22.HeadingFourIcon,
+  5: import_icons22.HeadingFiveIcon,
+  6: import_icons22.HeadingSixIcon
+};
+function useHeadingState(editor, level, disabled = false) {
+  const headingInSchema = (0, import_editor_utils24.isNodeInSchema)("heading", editor);
+  const isDisabled = isHeadingButtonDisabled(editor, level, disabled);
+  const isActive = isHeadingActive(editor, level);
+  const Icon = headingIcons[level];
+  const shortcutKey = headingShortcutKeys[level];
+  const formattedName = getFormattedHeadingName(level);
   return {
-    listInSchema,
-    listOption,
+    headingInSchema,
+    isDisabled,
     isActive,
-    shortcutKey
+    Icon,
+    shortcutKey,
+    formattedName
   };
 }
-var ListButton = ({
+var HeadingButton = ({
   editor: providedEditor,
-  type,
+  level,
+  text,
   hideWhenUnavailable = false,
   className = "",
+  disabled,
   onClick,
-  text,
   children,
   ref,
   ...buttonProps
 }) => {
-  const { editor } = useTiptapEditor(providedEditor);
-  const { listInSchema, listOption, isActive, shortcutKey } = useListState(
-    editor,
-    type
-  );
-  const Icon = (listOption == null ? void 0 : listOption.icon) || import_icons21.ListIcon;
-  const handleClick = (0, import_react50.useCallback)(
+  const { editor } = (0, import_editor_utils24.useTiptapEditor)(providedEditor);
+  const {
+    headingInSchema,
+    isDisabled,
+    isActive,
+    Icon,
+    shortcutKey,
+    formattedName
+  } = useHeadingState(editor, level, disabled);
+  const handleClick = React18.useCallback(
     (e) => {
       onClick == null ? void 0 : onClick(e);
-      if (!e.defaultPrevented && editor) {
-        toggleList(editor, type);
+      if (!e.defaultPrevented && !isDisabled && editor) {
+        toggleHeading(editor, level);
       }
     },
-    [onClick, editor, type]
+    [onClick, isDisabled, editor, level]
   );
-  const show = (0, import_react50.useMemo)(() => {
-    return shouldShowListButton({
+  const show = React18.useMemo(() => {
+    return shouldShowHeadingButton({
       editor,
-      type,
+      level,
       hideWhenUnavailable,
-      listInSchema
+      headingInSchema
     });
-  }, [editor, type, hideWhenUnavailable, listInSchema]);
+  }, [editor, level, hideWhenUnavailable, headingInSchema]);
   if (!show || !editor || !editor.isEditable) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
-    import_button14.Button,
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+    import_button15.Button,
     {
       type: "button",
       className: className.trim(),
+      disabled: isDisabled,
       variant: "ghost",
       color: "default",
       "data-active-state": isActive ? "on" : "off",
+      "data-disabled": isDisabled,
       tabIndex: -1,
-      "aria-label": (listOption == null ? void 0 : listOption.label) || type,
+      "aria-label": formattedName,
       "aria-pressed": isActive,
-      tooltip: (listOption == null ? void 0 : listOption.label) || type,
+      tooltip: formattedName,
       shortcutKeys: shortcutKey,
       onClick: handleClick,
-      startContent: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Icon, {}),
+      startContent: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Icon, {}),
       ...buttonProps,
       ref,
       children: children || text
@@ -6821,161 +7347,189 @@ var ListButton = ({
   );
 };
 
-// src/ui/list-dropdown-menu/index.tsx
-var import_jsx_runtime28 = require("react/jsx-runtime");
-function canToggleAnyList(editor, listTypes) {
+// src/ui/text-button/text-button.tsx
+var import_button16 = require("@kopexa/button");
+var import_chip = require("@kopexa/chip");
+var import_editor_utils26 = require("@kopexa/editor-utils");
+var import_shared_utils = require("@kopexa/shared-utils");
+var import_react54 = require("react");
+
+// src/ui/text-button/use-text.ts
+var import_editor_utils25 = require("@kopexa/editor-utils");
+var import_icons23 = require("@kopexa/icons");
+var import_use_is_mobile2 = require("@kopexa/use-is-mobile");
+var import_state9 = require("@tiptap/pm/state");
+var import_react53 = require("react");
+var import_react_hotkeys_hook2 = require("react-hotkeys-hook");
+var TEXT_SHORTCUT_KEY = "mod+alt+0";
+function canToggleText(editor, turnInto = true) {
   if (!editor) return false;
-  return listTypes.some((type) => canToggleList(editor, type));
+  if (!editor.schema.nodes.paragraph) return false;
+  if (!turnInto) {
+    return editor.can().setNode("paragraph");
+  }
+  if (!(0, import_editor_utils25.selectionWithinConvertibleTypes)(editor, [
+    "paragraph",
+    "heading",
+    "bulletList",
+    "orderedList",
+    "taskList",
+    "blockquote",
+    "codeBlock"
+  ]))
+    return false;
+  return editor.can().setNode("paragraph") || editor.can().clearNodes();
 }
-function isAnyListActive(editor, listTypes) {
+function isParagraphActive(editor) {
   if (!editor) return false;
-  return listTypes.some((type) => isListActive(editor, type));
-}
-function getFilteredListOptions(availableTypes) {
-  return listOptions.filter(
-    (option) => !option.type || availableTypes.includes(option.type)
-  );
+  return editor.isActive("paragraph");
 }
-function shouldShowListDropdown(params) {
-  const { editor, hideWhenUnavailable, listInSchema, canToggleAny } = params;
-  if (!listInSchema || !editor) {
+function toggleParagraph(editor) {
+  var _a, _b, _c;
+  if (!editor || !editor.isEditable) return false;
+  if (!canToggleText(editor)) return false;
+  try {
+    const view = editor.view;
+    let state = view.state;
+    let tr = state.tr;
+    const blocks = (0, import_editor_utils25.getSelectedBlockNodes)(editor);
+    const isPossibleToTurnInto = (0, import_editor_utils25.selectionWithinConvertibleTypes)(editor, [
+      "paragraph",
+      "heading",
+      "bulletList",
+      "orderedList",
+      "taskList",
+      "blockquote",
+      "codeBlock"
+    ]) && blocks.length === 1;
+    if ((state.selection.empty || state.selection instanceof import_state9.TextSelection) && isPossibleToTurnInto) {
+      const pos = (_a = (0, import_editor_utils25.findNodePosition)({
+        editor,
+        node: state.selection.$anchor.node(1)
+      })) == null ? void 0 : _a.pos;
+      if (!(0, import_editor_utils25.isValidPosition)(pos)) return false;
+      tr = tr.setSelection(import_state9.NodeSelection.create(state.doc, pos));
+      view.dispatch(tr);
+      state = view.state;
+    }
+    const selection = state.selection;
+    let chain = editor.chain().focus();
+    if (selection instanceof import_state9.NodeSelection) {
+      const firstChild = (_b = selection.node.firstChild) == null ? void 0 : _b.firstChild;
+      const lastChild = (_c = selection.node.lastChild) == null ? void 0 : _c.lastChild;
+      const from = firstChild ? selection.from + firstChild.nodeSize : selection.from + 1;
+      const to = lastChild ? selection.to - lastChild.nodeSize : selection.to - 1;
+      const resolvedFrom = state.doc.resolve(from);
+      const resolvedTo = state.doc.resolve(to);
+      chain = chain.setTextSelection(import_state9.TextSelection.between(resolvedFrom, resolvedTo)).clearNodes();
+    }
+    if (!editor.isActive("paragraph")) {
+      chain.setNode("paragraph").run();
+    }
+    editor.chain().focus().selectTextblockEnd().run();
+    return true;
+  } catch {
     return false;
   }
-  if (hideWhenUnavailable) {
-    if ((0, import_react51.isNodeSelection)(editor.state.selection) || !canToggleAny) {
-      return false;
-    }
+}
+function shouldShowButton6(props) {
+  const { editor, hideWhenUnavailable } = props;
+  if (!editor || !editor.isEditable) return false;
+  if (!hideWhenUnavailable) {
+    return true;
+  }
+  if (!(0, import_editor_utils25.isNodeInSchema)("paragraph", editor)) return false;
+  if (!editor.isActive("code")) {
+    return canToggleText(editor);
   }
   return true;
 }
-function useListDropdownState(editor, availableTypes) {
-  const [isOpen, setIsOpen] = (0, import_react52.useState)(false);
-  const listInSchema = availableTypes.some(
-    (type) => (0, import_editor_utils14.isNodeInSchema)(type, editor)
-  );
-  const filteredLists = (0, import_react52.useMemo)(
-    () => getFilteredListOptions(availableTypes),
-    [availableTypes]
-  );
-  const canToggleAny = canToggleAnyList(editor, availableTypes);
-  const isAnyActive = isAnyListActive(editor, availableTypes);
-  const handleOpenChange = (0, import_react52.useCallback)(
-    (open, callback) => {
-      setIsOpen(open);
-      callback == null ? void 0 : callback(open);
-    },
-    []
-  );
-  return {
-    isOpen,
-    setIsOpen,
-    listInSchema,
-    filteredLists,
-    canToggleAny,
-    isAnyActive,
-    handleOpenChange
-  };
-}
-function useActiveListIcon(editor, filteredLists) {
-  return (0, import_react52.useCallback)(() => {
-    const activeOption = filteredLists.find(
-      (option) => isListActive(editor, option.type)
-    );
-    return activeOption ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(activeOption.icon, {}) : /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_icons22.ListIcon, {});
-  }, [editor, filteredLists]);
-}
-function ListDropdownMenu({
-  editor: providedEditor,
-  types = ["bulletList", "orderedList", "taskList"],
-  hideWhenUnavailable = false,
-  onOpenChange,
-  ...props
-}) {
-  const { editor } = useTiptapEditor(providedEditor);
+function useText(config) {
   const {
-    isOpen,
-    listInSchema,
-    filteredLists,
-    canToggleAny,
-    isAnyActive,
-    handleOpenChange
-  } = useListDropdownState(editor, types);
-  const getActiveIcon = useActiveListIcon(editor, filteredLists);
-  const show = (0, import_react52.useMemo)(() => {
-    return shouldShowListDropdown({
-      editor,
-      listTypes: types,
-      hideWhenUnavailable,
-      listInSchema,
-      canToggleAny
-    });
-  }, [editor, types, hideWhenUnavailable, listInSchema, canToggleAny]);
-  const handleOnOpenChange = (0, import_react52.useCallback)(
-    (open) => handleOpenChange(open, onOpenChange),
-    [handleOpenChange, onOpenChange]
-  );
-  if (!show || !editor || !editor.isEditable) {
-    return null;
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_dropdown_menu2.DropdownMenu.Root, { open: isOpen, onOpenChange: handleOnOpenChange, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_dropdown_menu2.DropdownMenu.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
-      import_button15.Button,
-      {
-        type: "button",
-        variant: "ghost",
-        color: "default",
-        "data-active-state": isAnyActive ? "on" : "off",
-        tabIndex: -1,
-        "aria-label": "List options",
-        tooltip: "List",
-        endContent: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_icons22.ChevronDownIcon, {}),
-        ...props,
-        children: getActiveIcon()
-      }
-    ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_dropdown_menu2.DropdownMenu.Content, { children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_dropdown_menu2.DropdownMenu.Group, { children: filteredLists.map((option) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_dropdown_menu2.DropdownMenu.Item, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
-      ListButton,
-      {
-        editor,
-        type: option.type,
-        text: option.label,
-        hideWhenUnavailable,
-        tooltip: "",
-        fullWidth: true,
-        spacing: "start"
-      }
-    ) }, option.type)) }) })
-  ] });
+    editor: providedEditor,
+    hideWhenUnavailable = false,
+    onToggled
+  } = config || {};
+  const { editor } = (0, import_editor_utils25.useTiptapEditor)(providedEditor);
+  const isMobile = (0, import_use_is_mobile2.useIsMobile)();
+  const [isVisible, setIsVisible] = (0, import_react53.useState)(true);
+  const canToggle3 = canToggleText(editor);
+  const isActive = isParagraphActive(editor);
+  (0, import_react53.useEffect)(() => {
+    if (!editor) return;
+    const handleSelectionUpdate = () => {
+      setIsVisible(shouldShowButton6({ editor, hideWhenUnavailable }));
+    };
+    handleSelectionUpdate();
+    editor.on("selectionUpdate", handleSelectionUpdate);
+    return () => {
+      editor.off("selectionUpdate", handleSelectionUpdate);
+    };
+  }, [editor, hideWhenUnavailable]);
+  const handleToggle = (0, import_react53.useCallback)(() => {
+    if (!editor) return false;
+    const success = toggleParagraph(editor);
+    if (success) {
+      onToggled == null ? void 0 : onToggled();
+    }
+    return success;
+  }, [editor, onToggled]);
+  (0, import_react_hotkeys_hook2.useHotkeys)(
+    TEXT_SHORTCUT_KEY,
+    (event) => {
+      event.preventDefault();
+      handleToggle();
+    },
+    {
+      enabled: isVisible && canToggle3,
+      enableOnContentEditable: !isMobile,
+      enableOnFormTags: true
+    }
+  );
+  return {
+    isVisible,
+    isActive,
+    handleToggle,
+    canToggle: canToggle3,
+    label: "Text",
+    shortcutKeys: TEXT_SHORTCUT_KEY,
+    Icon: import_icons23.TypeIcon
+  };
 }
 
-// src/ui/table-button/index.tsx
-var import_toolbar8 = require("@kopexa/toolbar");
-var import_react53 = require("react");
-var import_jsx_runtime29 = require("react/jsx-runtime");
-var TableButton = ({
+// src/ui/text-button/text-button.tsx
+var import_jsx_runtime30 = require("react/jsx-runtime");
+function TextShortcutBadge({
+  shortcutKeys = TEXT_SHORTCUT_KEY
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_chip.Chip, { children: (0, import_shared_utils.parseShortcutKeys)({ shortcutKeys }) });
+}
+var TextButton = ({
   editor: providedEditor,
   text,
   hideWhenUnavailable = false,
   onToggled,
+  showShortcut = false,
   onClick,
   children,
+  ref,
   ...buttonProps
 }) => {
-  const { editor } = useTiptapEditor(providedEditor);
+  const { editor } = (0, import_editor_utils26.useTiptapEditor)(providedEditor);
   const {
     isVisible,
     canToggle: canToggle3,
     isActive,
     handleToggle,
     label,
-    //     shortcutKeys,
+    shortcutKeys,
     Icon
-  } = useTableBlock({
+  } = useText({
     editor,
     hideWhenUnavailable,
     onToggled
   });
-  const handleClick = (0, import_react53.useCallback)(
+  const handleClick = (0, import_react54.useCallback)(
     (event) => {
       onClick == null ? void 0 : onClick(event);
       if (event.defaultPrevented) return;
@@ -6986,196 +7540,343 @@ var TableButton = ({
   if (!isVisible) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
-    import_toolbar8.ToolbarButton,
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+    import_button16.Button,
     {
       type: "button",
       variant: "ghost",
       color: "default",
       "data-active-state": isActive ? "on" : "off",
+      tabIndex: -1,
       disabled: !canToggle3,
       "data-disabled": !canToggle3,
-      tabIndex: -1,
       "aria-label": label,
       "aria-pressed": isActive,
-      title: label,
+      tooltip: "Text",
+      shortcutKeys,
       onClick: handleClick,
-      isIconOnly: !text && !children,
+      startContent: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Icon, {}),
       ...buttonProps,
-      children: children || /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_jsx_runtime29.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Icon, {}),
-        text && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { children: text })
+      ref,
+      children: children != null ? children : /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_jsx_runtime30.Fragment, { children: [
+        text,
+        showShortcut && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(TextShortcutBadge, { shortcutKeys })
       ] })
     }
   );
 };
 
-// src/ui/text-align-button/text-align-button.tsx
-var import_button16 = require("@kopexa/button");
+// src/ui/turn-into-dropdown/use-turn-into-dropdown.ts
+var import_editor_utils27 = require("@kopexa/editor-utils");
+var import_icons24 = require("@kopexa/icons");
+var import_state10 = require("@tiptap/pm/state");
 var import_react55 = require("react");
-
-// src/ui/text-align-button/use-text-align.ts
-var import_editor_utils15 = require("@kopexa/editor-utils");
-var import_icons23 = require("@kopexa/icons");
-var import_react54 = require("react");
-var TEXT_ALIGN_SHORTCUT_KEYS = {
-  left: "mod+shift+l",
-  center: "mod+shift+e",
-  right: "mod+shift+r",
-  justify: "mod+shift+j"
-};
-var textAlignIcons = {
-  left: import_icons23.AlignLeftIcon,
-  center: import_icons23.AlignCenterIcon,
-  right: import_icons23.AlignRightIcon,
-  justify: import_icons23.AlignJustifyIcon
-};
-var textAlignLabels = {
-  left: "Align left",
-  center: "Align center",
-  right: "Align right",
-  justify: "Align justify"
-};
-function canSetTextAlign(editor, align) {
+var TURN_INTO_BLOCKS = [
+  "paragraph",
+  "heading",
+  "bulletList",
+  "orderedList",
+  "taskList",
+  "blockquote",
+  "codeBlock"
+];
+var blockTypeOptions = [
+  {
+    type: "paragraph",
+    label: "Text",
+    isActive: (editor) => editor.isActive("paragraph") && !editor.isActive("heading") && !editor.isActive("bulletList") && !editor.isActive("orderedList") && !editor.isActive("taskList") && !editor.isActive("blockquote") && !editor.isActive("codeBlock")
+  },
+  {
+    type: "heading",
+    label: "Heading 1",
+    level: 1,
+    isActive: (editor) => editor.isActive("heading", { level: 1 })
+  },
+  {
+    type: "heading",
+    label: "Heading 2",
+    level: 2,
+    isActive: (editor) => editor.isActive("heading", { level: 2 })
+  },
+  {
+    type: "heading",
+    label: "Heading 3",
+    level: 3,
+    isActive: (editor) => editor.isActive("heading", { level: 3 })
+  },
+  {
+    type: "heading",
+    label: "Heading 4",
+    level: 4,
+    isActive: (editor) => editor.isActive("heading", { level: 4 })
+  },
+  {
+    type: "bulletList",
+    label: "Bulleted list",
+    isActive: (editor) => editor.isActive("bulletList")
+  },
+  {
+    type: "orderedList",
+    label: "Numbered list",
+    isActive: (editor) => editor.isActive("orderedList")
+  },
+  {
+    type: "taskList",
+    label: "To-do list",
+    isActive: (editor) => editor.isActive("taskList")
+  },
+  {
+    type: "blockquote",
+    label: "Blockquote",
+    isActive: (editor) => editor.isActive("blockquote")
+  },
+  {
+    type: "codeBlock",
+    label: "Code block",
+    isActive: (editor) => editor.isActive("codeBlock")
+  }
+];
+function canTurnInto(editor, allowedBlockTypes) {
   if (!editor || !editor.isEditable) return false;
-  if (!(0, import_editor_utils15.isExtensionAvailable)(editor, "textAlign") || (0, import_editor_utils15.isNodeTypeSelected)(editor, ["image"]))
-    return false;
-  return editor.can().setTextAlign(align);
-}
-function hasSetTextAlign(commands) {
-  return "setTextAlign" in commands;
+  const blockTypes = allowedBlockTypes || TURN_INTO_BLOCKS;
+  const { selection } = editor.state;
+  if (selection instanceof import_state10.NodeSelection) {
+    const nodeType2 = selection.node.type.name;
+    return blockTypes.includes(nodeType2);
+  }
+  const { $anchor } = selection;
+  const nodeType = $anchor.parent.type.name;
+  return blockTypes.includes(nodeType);
 }
-function isTextAlignActive(editor, align) {
-  if (!editor || !editor.isEditable) return false;
-  return editor.isActive({ textAlign: align });
+function getFilteredBlockTypeOptions(blockTypes) {
+  if (!blockTypes) return blockTypeOptions;
+  return blockTypeOptions.filter((option) => {
+    return blockTypes.includes(option.type);
+  });
 }
-function setTextAlign(editor, align) {
-  if (!editor || !editor.isEditable) return false;
-  if (!canSetTextAlign(editor, align)) return false;
-  const chain = editor.chain().focus();
-  if (hasSetTextAlign(chain)) {
-    return chain.setTextAlign(align).run();
-  }
-  return false;
+function getActiveBlockType(editor, blockTypes) {
+  if (!editor) return getFilteredBlockTypeOptions(blockTypes)[0];
+  const filteredOptions = getFilteredBlockTypeOptions(blockTypes);
+  const activeOption = filteredOptions.find(
+    (option) => option.isActive(editor)
+  );
+  return activeOption || filteredOptions[0];
 }
-function shouldShowButton5(props) {
-  const { editor, hideWhenUnavailable, align } = props;
+function shouldShowTurnInto(params) {
+  const { editor, hideWhenUnavailable, blockTypes } = params;
   if (!editor || !editor.isEditable) return false;
-  if (!(0, import_editor_utils15.isExtensionAvailable)(editor, "textAlign")) return false;
   if (hideWhenUnavailable && !editor.isActive("code")) {
-    return canSetTextAlign(editor, align);
+    return canTurnInto(editor, blockTypes);
   }
   return true;
 }
-function useTextAlign(config) {
+function useTurnIntoDropdown(config) {
   const {
     editor: providedEditor,
-    align,
     hideWhenUnavailable = false,
-    onAligned
-  } = config;
-  const { editor } = useTiptapEditor(providedEditor);
-  const [isVisible, setIsVisible] = (0, import_react54.useState)(true);
-  const canAlign = canSetTextAlign(editor, align);
-  const isActive = isTextAlignActive(editor, align);
-  (0, import_react54.useEffect)(() => {
+    blockTypes,
+    onOpenChange
+  } = config || {};
+  const { editor } = (0, import_editor_utils27.useTiptapEditor)(providedEditor);
+  const [isOpen, setIsOpen] = (0, import_react55.useState)(false);
+  const [isVisible, setIsVisible] = (0, import_react55.useState)(true);
+  const canToggle3 = canTurnInto(editor, blockTypes);
+  const activeBlockType = getActiveBlockType(editor, blockTypes);
+  const handleOpenChange = (0, import_react55.useCallback)(
+    (open) => {
+      if (!editor || !canToggle3) return;
+      setIsOpen(open);
+      onOpenChange == null ? void 0 : onOpenChange(open);
+    },
+    [canToggle3, editor, onOpenChange]
+  );
+  (0, import_react55.useEffect)(() => {
     if (!editor) return;
     const handleSelectionUpdate = () => {
-      setIsVisible(shouldShowButton5({ editor, align, hideWhenUnavailable }));
+      setIsVisible(
+        shouldShowTurnInto({
+          editor,
+          hideWhenUnavailable,
+          blockTypes
+        })
+      );
     };
     handleSelectionUpdate();
     editor.on("selectionUpdate", handleSelectionUpdate);
     return () => {
       editor.off("selectionUpdate", handleSelectionUpdate);
     };
-  }, [editor, hideWhenUnavailable, align]);
-  const handleTextAlign = (0, import_react54.useCallback)(() => {
-    if (!editor) return false;
-    const success = setTextAlign(editor, align);
-    if (success) {
-      onAligned == null ? void 0 : onAligned();
-    }
-    return success;
-  }, [editor, align, onAligned]);
+  }, [editor, hideWhenUnavailable, blockTypes]);
   return {
     isVisible,
-    isActive,
-    handleTextAlign,
-    canAlign,
-    label: textAlignLabels[align],
-    shortcutKeys: TEXT_ALIGN_SHORTCUT_KEYS[align],
-    Icon: textAlignIcons[align]
+    canToggle: canToggle3,
+    isOpen,
+    setIsOpen,
+    activeBlockType,
+    handleOpenChange,
+    filteredOptions: getFilteredBlockTypeOptions(blockTypes),
+    label: `Turn into (current: ${(activeBlockType == null ? void 0 : activeBlockType.label) || "Text"})`,
+    Icon: import_icons24.ChevronDownIcon
   };
 }
 
-// src/ui/text-align-button/text-align-button.tsx
-var import_jsx_runtime30 = require("react/jsx-runtime");
-var TextAlignButton = ({
-  editor: providedEditor,
-  align,
-  text,
-  hideWhenUnavailable = false,
-  onAligned,
-  showShortcut = false,
-  onClick,
-  children,
-  ...buttonProps
-}) => {
-  const { editor } = useTiptapEditor(providedEditor);
-  const {
-    isVisible,
-    handleTextAlign,
-    label,
-    canAlign,
-    isActive,
-    Icon,
-    shortcutKeys
-  } = useTextAlign({
-    editor,
-    align,
-    hideWhenUnavailable,
-    onAligned
-  });
-  const handleClick = (0, import_react55.useCallback)(
-    (e) => {
-      onClick == null ? void 0 : onClick(e);
-      if (e.defaultPrevented) return;
-      handleTextAlign();
-    },
-    [handleTextAlign, onClick]
-  );
-  if (!isVisible) {
-    return null;
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
-    import_button16.IconButton,
-    {
-      type: "button",
-      disabled: canAlign,
-      variant: "ghost",
-      color: "default",
-      "data-active-state": isActive ? "on" : "off",
-      "data-disabled": canAlign,
-      tabIndex: -1,
-      "aria-label": label,
-      "aria-pressed": isActive,
-      tooltip: label,
-      shortcutKeys,
-      onClick: handleClick,
-      ...buttonProps,
-      children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Icon, {})
+// src/ui/turn-into-dropdown/turn-into-dropdown.tsx
+var import_jsx_runtime31 = require("react/jsx-runtime");
+var TurnIntoDropdownContent = ({ blockTypes }) => {
+  const filteredOptions = getFilteredBlockTypeOptions(blockTypes);
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_dropdown_menu2.DropdownMenu.Group, { children: filteredOptions.map(
+    (option, index) => {
+      var _a;
+      return renderBlockTypeButton(
+        option,
+        `${option.type}-${(_a = option.level) != null ? _a : index}`
+      );
     }
-  );
+  ) });
 };
+function renderBlockTypeButton(option, key) {
+  switch (option.type) {
+    case "paragraph":
+      return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_dropdown_menu2.DropdownMenu.Item, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+        TextButton,
+        {
+          fullWidth: true,
+          spacing: "start",
+          tooltip: "",
+          text: option.label
+        }
+      ) }, key);
+    case "heading":
+      if (!option.level) {
+        return null;
+      }
+      return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_dropdown_menu2.DropdownMenu.Item, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+        HeadingButton,
+        {
+          level: option.level || 1,
+          fullWidth: true,
+          spacing: "start",
+          tooltip: "",
+          text: option.label
+        }
+      ) }, key);
+    case "bulletList":
+      return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_dropdown_menu2.DropdownMenu.Item, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+        ListButton,
+        {
+          type: "bulletList",
+          fullWidth: true,
+          spacing: "start",
+          tooltip: "",
+          text: option.label
+        }
+      ) }, key);
+    case "orderedList":
+      return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_dropdown_menu2.DropdownMenu.Item, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+        ListButton,
+        {
+          type: "orderedList",
+          fullWidth: true,
+          spacing: "start",
+          tooltip: "",
+          text: option.label
+        }
+      ) }, key);
+    case "taskList":
+      return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_dropdown_menu2.DropdownMenu.Item, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+        ListButton,
+        {
+          type: "taskList",
+          fullWidth: true,
+          spacing: "start",
+          tooltip: "",
+          text: option.label
+        }
+      ) }, key);
+    case "blockquote":
+      return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_dropdown_menu2.DropdownMenu.Item, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+        BlockquoteButton,
+        {
+          className: "w-full justify-start",
+          title: "",
+          tooltip: "",
+          text: option.label
+        }
+      ) }, key);
+    case "codeBlock":
+      return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_dropdown_menu2.DropdownMenu.Item, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+        CodeBlockButton,
+        {
+          className: "w-full justify-start",
+          title: "",
+          tooltip: "",
+          text: option.label
+        }
+      ) }, key);
+    default:
+      return null;
+  }
+}
+var TurnIntoDropdown = (0, import_react56.forwardRef)(
+  ({
+    editor: providedEditor,
+    hideWhenUnavailable = false,
+    blockTypes,
+    onOpenChange,
+    children,
+    ...buttonProps
+  }, ref) => {
+    const { editor } = (0, import_editor_utils28.useTiptapEditor)(providedEditor);
+    const {
+      isVisible,
+      canToggle: canToggle3,
+      isOpen,
+      activeBlockType,
+      handleOpenChange,
+      label,
+      Icon
+    } = useTurnIntoDropdown({
+      editor,
+      hideWhenUnavailable,
+      blockTypes,
+      onOpenChange
+    });
+    if (!isVisible) {
+      return null;
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_dropdown_menu2.DropdownMenu.Root, { open: isOpen, onOpenChange: handleOpenChange, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_dropdown_menu2.DropdownMenu.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+        import_button17.Button,
+        {
+          type: "button",
+          variant: "ghost",
+          color: "default",
+          disabled: !canToggle3,
+          "data-disabled": !canToggle3,
+          tabIndex: -1,
+          "aria-label": label,
+          tooltip: "Turn into",
+          endContent: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Icon, {}),
+          ...buttonProps,
+          ref,
+          children: children != null ? children : /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { children: (activeBlockType == null ? void 0 : activeBlockType.label) || "Text" })
+        }
+      ) }),
+      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_dropdown_menu2.DropdownMenu.Content, { align: "start", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(TurnIntoDropdownContent, { blockTypes }) })
+    ] });
+  }
+);
+TurnIntoDropdown.displayName = "TurnIntoDropdown";
 
 // src/ui/undo-redo-button/undo-redo-button.tsx
+var import_editor_utils30 = require("@kopexa/editor-utils");
 var import_toolbar9 = require("@kopexa/toolbar");
-var import_react57 = require("react");
+var import_react58 = require("react");
 
 // src/ui/undo-redo-button/use-undo-redo.ts
-var import_editor_utils16 = require("@kopexa/editor-utils");
-var import_icons24 = require("@kopexa/icons");
-var import_react56 = require("react");
+var import_editor_utils29 = require("@kopexa/editor-utils");
+var import_icons25 = require("@kopexa/icons");
+var import_react57 = require("react");
 var UNDO_REDO_SHORTCUT_KEYS = {
   undo: "mod+z",
   redo: "mod+shift+z"
@@ -7185,12 +7886,12 @@ var historyActionLabels = {
   redo: "Redo"
 };
 var historyIcons = {
-  undo: import_icons24.UndoIcon,
-  redo: import_icons24.RedoIcon
+  undo: import_icons25.UndoIcon,
+  redo: import_icons25.RedoIcon
 };
 function canExecuteUndoRedoAction(editor, action) {
   if (!editor || !editor.isEditable) return false;
-  if ((0, import_editor_utils16.isNodeTypeSelected)(editor, ["image"])) return false;
+  if ((0, import_editor_utils29.isNodeTypeSelected)(editor, ["image"])) return false;
   return action === "undo" ? editor.can().undo() : editor.can().redo();
 }
 function executeUndoRedoAction(editor, action) {
@@ -7199,7 +7900,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")) {
@@ -7214,13 +7915,13 @@ function useUndoRedo(config) {
     hideWhenUnavailable = false,
     onExecuted
   } = config;
-  const { editor } = useTiptapEditor(providedEditor);
-  const [isVisible, setIsVisible] = (0, import_react56.useState)(true);
+  const { editor } = (0, import_editor_utils29.useTiptapEditor)(providedEditor);
+  const [isVisible, setIsVisible] = (0, import_react57.useState)(true);
   const canExecute = canExecuteUndoRedoAction(editor, action);
-  (0, import_react56.useEffect)(() => {
+  (0, import_react57.useEffect)(() => {
     if (!editor) return;
     const handleUpdate = () => {
-      setIsVisible(shouldShowButton6({ editor, hideWhenUnavailable, action }));
+      setIsVisible(shouldShowButton7({ editor, hideWhenUnavailable, action }));
     };
     handleUpdate();
     editor.on("transaction", handleUpdate);
@@ -7228,7 +7929,7 @@ function useUndoRedo(config) {
       editor.off("transaction", handleUpdate);
     };
   }, [editor, hideWhenUnavailable, action]);
-  const handleAction = (0, import_react56.useCallback)(() => {
+  const handleAction = (0, import_react57.useCallback)(() => {
     if (!editor) return false;
     const success = executeUndoRedoAction(editor, action);
     if (success) {
@@ -7247,7 +7948,7 @@ function useUndoRedo(config) {
 }
 
 // src/ui/undo-redo-button/undo-redo-button.tsx
-var import_jsx_runtime31 = require("react/jsx-runtime");
+var import_jsx_runtime32 = require("react/jsx-runtime");
 var UndoRedoButton = ({
   editor: providedEditor,
   action,
@@ -7259,14 +7960,14 @@ var UndoRedoButton = ({
   children,
   ...buttonProps
 }) => {
-  const { editor } = useTiptapEditor(providedEditor);
+  const { editor } = (0, import_editor_utils30.useTiptapEditor)(providedEditor);
   const { isVisible, handleAction, label, canExecute, Icon, shortcutKeys } = useUndoRedo({
     editor,
     action,
     hideWhenUnavailable,
     onExecuted
   });
-  const handleClick = (0, import_react57.useCallback)(
+  const handleClick = (0, import_react58.useCallback)(
     (event) => {
       onClick == null ? void 0 : onClick(event);
       if (event.defaultPrevented) return;
@@ -7277,7 +7978,7 @@ var UndoRedoButton = ({
   if (!isVisible) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
     import_toolbar9.ToolbarButton,
     {
       type: "button",
@@ -7292,23 +7993,23 @@ var UndoRedoButton = ({
       onClick: handleClick,
       isIconOnly: true,
       ...buttonProps,
-      children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Icon, {})
+      children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Icon, {})
     }
   );
 };
 
 // src/presets/basic/editor-header.tsx
-var import_jsx_runtime32 = require("react/jsx-runtime");
+var import_jsx_runtime33 = require("react/jsx-runtime");
 var EditorHeader = ({
   editor: providedEditor,
   variant
 }) => {
   var _a, _b;
-  const { editor } = useTiptapEditor(providedEditor);
-  const isMobile = (0, import_use_is_mobile2.useIsMobile)();
+  const { editor } = (0, import_editor_utils31.useTiptapEditor)(providedEditor);
+  const isMobile = (0, import_use_is_mobile3.useIsMobile)();
   const windowSize = useWindowSize();
   const { styles } = useEditorUIContext();
-  const toolbarRef = (0, import_react58.useRef)(null);
+  const toolbarRef = (0, import_react59.useRef)(null);
   const bodyRect = useCursorVisibility({
     editor,
     overlayHeight: (_b = (_a = toolbarRef.current) == null ? void 0 : _a.getBoundingClientRect().height) != null ? _b : 0
@@ -7317,7 +8018,7 @@ var EditorHeader = ({
     return null;
   }
   const ToolbarContent = variant === "comment" ? CommentToolbarContent : variant === "field" ? FieldToolbarContent : MainToolbarContent;
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: styles.toolbarContainer(), "data-slot": "editor-toolbar", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: styles.toolbarContainer(), "data-slot": "editor-toolbar", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
     import_toolbar10.Toolbar,
     {
       sticky: true,
@@ -7327,63 +8028,58 @@ var EditorHeader = ({
         bottom: `calc(100% - ${windowSize.height - bodyRect.y}px)`
       } : {},
       className: styles.toolbar(),
-      children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ToolbarContent, {})
+      children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ToolbarContent, {})
     }
   ) });
 };
-var MainToolbarContent = () => /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_jsx_runtime32.Fragment, { children: [
-  /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_toolbar10.ToolbarGroup, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(UndoRedoButton, { action: "undo" }),
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(UndoRedoButton, { action: "redo" })
-  ] }),
-  /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_toolbar10.ToolbarSeparator, {}),
-  /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_toolbar10.ToolbarGroup, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(HeadingDropdownMenu, { levels: [1, 2, 3, 4] }),
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ListDropdownMenu, { types: ["bulletList", "orderedList", "taskList"] }),
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(BlockquoteButton, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(CodeBlockButton, {})
+var MainToolbarContent = () => /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_jsx_runtime33.Fragment, { children: [
+  /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_toolbar10.ToolbarGroup, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(UndoRedoButton, { action: "undo" }),
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(UndoRedoButton, { action: "redo" })
   ] }),
-  /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_toolbar10.ToolbarSeparator, {}),
-  /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_toolbar10.ToolbarGroup, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(MarkButton, { type: "bold" }),
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(MarkButton, { type: "italic" }),
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(MarkButton, { type: "strike" }),
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(MarkButton, { type: "code" }),
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(MarkButton, { type: "underline" }),
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ColorHighlightPopover, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(LinkPopover, {})
+  /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_toolbar10.ToolbarSeparator, {}),
+  /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_toolbar10.ToolbarGroup, { children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(TurnIntoDropdown, {}) }),
+  /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_toolbar10.ToolbarSeparator, {}),
+  /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_toolbar10.ToolbarGroup, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(MarkButton, { type: "bold" }),
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(MarkButton, { type: "italic" }),
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(MarkButton, { type: "strike" }),
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(MarkButton, { type: "code" }),
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(MarkButton, { type: "underline" }),
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ColorHighlightPopover, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(LinkPopover, {})
   ] }),
-  /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_toolbar10.ToolbarSeparator, {}),
-  /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_toolbar10.ToolbarGroup, { children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(TableButton, {}) }),
-  /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(MoreOptions, { hideWhenUnavailable: true })
+  /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_toolbar10.ToolbarSeparator, {}),
+  /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_toolbar10.ToolbarGroup, { children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(TableButton, {}) }),
+  /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(MoreOptions, { hideWhenUnavailable: true })
 ] });
-var CommentToolbarContent = () => /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_jsx_runtime32.Fragment, { children: [
-  /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_toolbar10.ToolbarGroup, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(MarkButton, { type: "bold" }),
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(MarkButton, { type: "italic" }),
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(MarkButton, { type: "strike" }),
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(MarkButton, { type: "code" })
+var CommentToolbarContent = () => /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_jsx_runtime33.Fragment, { children: [
+  /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_toolbar10.ToolbarGroup, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(MarkButton, { type: "bold" }),
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(MarkButton, { type: "italic" }),
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(MarkButton, { type: "strike" }),
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(MarkButton, { type: "code" })
   ] }),
-  /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_toolbar10.ToolbarSeparator, {}),
-  /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_toolbar10.ToolbarGroup, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(LinkPopover, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ListDropdownMenu, { types: ["bulletList", "orderedList"] })
+  /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_toolbar10.ToolbarSeparator, {}),
+  /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_toolbar10.ToolbarGroup, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(LinkPopover, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ListDropdownMenu, { types: ["bulletList", "orderedList"] })
   ] })
 ] });
-var FieldToolbarContent = () => /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_toolbar10.ToolbarGroup, { children: [
-  /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(MarkButton, { type: "bold" }),
-  /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(MarkButton, { type: "italic" }),
-  /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(MarkButton, { type: "strike" }),
-  /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(LinkPopover, {})
+var FieldToolbarContent = () => /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_toolbar10.ToolbarGroup, { children: [
+  /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(MarkButton, { type: "bold" }),
+  /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(MarkButton, { type: "italic" }),
+  /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(MarkButton, { type: "strike" }),
+  /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(LinkPopover, {})
 ] });
 function MoreOptions({
   editor: providedEditor,
   hideWhenUnavailable = false,
   ...props
 }) {
-  const { editor } = useTiptapEditor(providedEditor);
-  const [show, setShow] = (0, import_react58.useState)(false);
-  (0, import_react58.useEffect)(() => {
+  const { editor } = (0, import_editor_utils31.useTiptapEditor)(providedEditor);
+  const [show, setShow] = (0, import_react59.useState)(false);
+  (0, import_react59.useEffect)(() => {
     if (!editor) return;
     const handleSelectionUpdate = () => {
       setShow(
@@ -7402,13 +8098,13 @@ function MoreOptions({
   if (!show || !editor || !editor.isEditable) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_jsx_runtime32.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_toolbar10.ToolbarSeparator, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_toolbar10.ToolbarGroup, { children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_popover3.Popover.Root, { spacing: "dense", width: "auto", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_jsx_runtime33.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_toolbar10.ToolbarSeparator, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_toolbar10.ToolbarGroup, { children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_popover3.Popover.Root, { spacing: "dense", width: "auto", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
         import_popover3.Popover.Trigger,
         {
-          render: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+          render: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
             import_toolbar10.ToolbarButton,
             {
               type: "button",
@@ -7420,29 +8116,29 @@ function MoreOptions({
               title: "More options",
               isIconOnly: true,
               ...props,
-              children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_icons25.MoreVerticalIcon, {})
+              children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_icons26.MoreVerticalIcon, {})
             }
           )
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
         import_popover3.Popover.Content,
         {
           side: "top",
           align: "end",
           alignOffset: 4,
           sideOffset: 4,
-          children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_toolbar10.Toolbar, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_toolbar10.ToolbarGroup, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(MarkButton, { type: "superscript" }),
-              /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(MarkButton, { type: "subscript" })
+          children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_toolbar10.Toolbar, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_toolbar10.ToolbarGroup, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(MarkButton, { type: "superscript" }),
+              /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(MarkButton, { type: "subscript" })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_toolbar10.ToolbarSeparator, {}),
-            /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_toolbar10.ToolbarGroup, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(TextAlignButton, { align: "left" }),
-              /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(TextAlignButton, { align: "center" }),
-              /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(TextAlignButton, { align: "right" }),
-              /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(TextAlignButton, { align: "justify" })
+            /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_toolbar10.ToolbarSeparator, {}),
+            /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_toolbar10.ToolbarGroup, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(TextAlignButton, { align: "left" }),
+              /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(TextAlignButton, { align: "center" }),
+              /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(TextAlignButton, { align: "right" }),
+              /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(TextAlignButton, { align: "justify" })
             ] })
           ] })
         }
@@ -7474,7 +8170,7 @@ function shouldShowMoreOptions(params) {
 }
 
 // src/presets/basic/index.tsx
-var import_jsx_runtime33 = require("react/jsx-runtime");
+var import_jsx_runtime34 = require("react/jsx-runtime");
 var BasicEditor = ({
   variant,
   bordered,
@@ -7492,19 +8188,19 @@ var BasicEditor = ({
     ...options
   });
   const styles = (0, import_theme9.editorBasic)({ variant, bordered });
-  const resolveVariable = (0, import_react60.useCallback)(
+  const resolveVariable = (0, import_react61.useCallback)(
     (name) => variableValues == null ? void 0 : variableValues[name],
     [variableValues]
   );
   if (!editor) {
-    return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(LoadingSpinner, {});
+    return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(LoadingSpinner, {});
   }
   const isBottomToolbar = variant === "field";
   const hasVariables = variables && variables.length > 0;
   const hasPagination = !!pagesOptions;
-  const editorContent = /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(EditorUIProvider, { value: { styles }, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: styles.root(), "data-slot": "editor", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_react59.EditorContext.Provider, { value: { editor }, children: [
-    showToolbar && !isBottomToolbar && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(EditorHeader, { editor, variant }),
-    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+  const editorContent = /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(EditorUIProvider, { value: { styles }, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: styles.root(), "data-slot": "editor", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_react60.EditorContext.Provider, { value: { editor }, children: [
+    showToolbar && !isBottomToolbar && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(EditorHeader, { editor, variant }),
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
       EditorContentArea,
       {
         variant,
@@ -7512,10 +8208,10 @@ var BasicEditor = ({
         hasPagination
       }
     ),
-    showToolbar && isBottomToolbar && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(EditorHeader, { editor, variant })
+    showToolbar && isBottomToolbar && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(EditorHeader, { editor, variant })
   ] }) }) });
   if (hasVariables) {
-    return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(VariableProvider, { variables, resolveVariable, children: editorContent });
+    return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(VariableProvider, { variables, resolveVariable, children: editorContent });
   }
   return editorContent;
 };
@@ -7525,10 +8221,10 @@ var EditorContentArea = ({
   hasPagination
 }) => {
   const styles = (0, import_theme9.editorBasic)({ variant });
-  const { editor } = (0, import_react60.useContext)(import_react59.EditorContext);
+  const { editor } = (0, import_react61.useContext)(import_react60.EditorContext);
   const { isDragging } = useUiEditorState(editor);
   useScrollToHash();
-  const handleKeyDown = (0, import_react60.useCallback)(
+  const handleKeyDown = (0, import_react61.useCallback)(
     (e) => {
       if (!(editor == null ? void 0 : editor.isFocused)) return;
       const isMod = e.metaKey || e.ctrlKey;
@@ -7570,9 +8266,9 @@ var EditorContentArea = ({
   const contentClassName = hasPagination ? "w-full min-w-0 h-auto min-h-0" : styles.content();
   return (
     // biome-ignore lint/a11y/noStaticElementInteractions: Wrapper intercepts keyboard shortcuts to prevent propagation
-    /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: styles.wrapper(), onKeyDown: handleKeyDown, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
-        import_react59.EditorContent,
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: styles.wrapper(), onKeyDown: handleKeyDown, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+        import_react60.EditorContent,
         {
           editor,
           role: "presentation",
@@ -7581,20 +8277,36 @@ var EditorContentArea = ({
             cursor: isDragging ? "grabbing" : "auto"
           },
           children: [
-            isEditable && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(SlashDropdownMenu, {}),
-            isEditable && variables && variables.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(VariableSuggestion, { editor, variables })
+            isEditable && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(SlashDropdownMenu, {}),
+            isEditable && variables && variables.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(VariableSuggestion, { editor, variables })
           ]
         }
       ),
-      isEditable && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(BubbleMenu, { editor }),
-      isEditable && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(LinkBubble, { editor })
+      isEditable && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(BubbleMenu, { editor }),
+      isEditable && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(LinkBubble, { editor }),
+      isEditable && /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_jsx_runtime34.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_extension_table2.TableHandle, { editor }),
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+          import_extension_table2.TableSelectionOverlay,
+          {
+            showResizeHandles: true,
+            cellMenu: (props) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+              import_extension_table2.TableCellHandleMenu,
+              {
+                editor: props.editor,
+                onOpenChange: props.onOpenChange
+              }
+            )
+          }
+        )
+      ] })
     ] })
   );
 };
 function LoadingSpinner({ text = "Connecting..." }) {
   const styles = (0, import_theme9.editorSpinner)();
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: styles.root(), children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: styles.content(), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: styles.root(), children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: styles.content(), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
       "svg",
       {
         className: styles.svg(),
@@ -7602,9 +8314,9 @@ function LoadingSpinner({ text = "Connecting..." }) {
         fill: "none",
         viewBox: "0 0 24 24",
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("title", { children: "Loading Spinner" }),
-          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("circle", { className: styles.circle(), cx: "12", cy: "12", r: "10" }),
-          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("title", { children: "Loading Spinner" }),
+          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("circle", { className: styles.circle(), cx: "12", cy: "12", r: "10" }),
+          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
             "path",
             {
               className: styles.path(),
@@ -7614,7 +8326,7 @@ function LoadingSpinner({ text = "Connecting..." }) {
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: styles.text(), children: text })
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: styles.text(), children: text })
   ] }) });
 }
 // Annotate the CommonJS export names for ESM import in node: