@kopexa/tiptap 17.6.18 → 17.7.0

package/dist/presets/basic/editor-header.js

@@ -1,2750 +0,0 @@
-"use client";
-"use strict";
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// src/presets/basic/editor-header.tsx
-var editor_header_exports = {};
-__export(editor_header_exports, {
-  EditorHeader: () => EditorHeader,
-  MoreOptions: () => MoreOptions
-});
-module.exports = __toCommonJS(editor_header_exports);
-var import_icons16 = require("@kopexa/icons");
-var import_popover3 = require("@kopexa/popover");
-var import_toolbar9 = require("@kopexa/toolbar");
-var import_use_is_mobile2 = require("@kopexa/use-is-mobile");
-var import_react22 = 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-cursor-visibility.ts
-var React2 = __toESM(require("react"));
-
-// src/hooks/use-window-size.ts
-var React = __toESM(require("react"));
-function useWindowSize() {
-  const [windowSize, setWindowSize] = React.useState({
-    width: 0,
-    height: 0,
-    offsetTop: 0
-  });
-  React.useEffect(() => {
-    handleResize();
-    function handleResize() {
-      if (typeof window === "undefined") return;
-      const vp = window.visualViewport;
-      if (!vp) return;
-      const { width = 0, height = 0, offsetTop = 0 } = vp;
-      setWindowSize((state) => {
-        if (width === state.width && height === state.height && offsetTop === state.offsetTop) {
-          return state;
-        }
-        return { width, height, offsetTop };
-      });
-    }
-    const visualViewport = window.visualViewport;
-    if (visualViewport) {
-      visualViewport.addEventListener("resize", handleResize);
-      visualViewport.addEventListener("scroll", handleResize);
-    }
-    return () => {
-      if (visualViewport) {
-        visualViewport.removeEventListener("resize", handleResize);
-        visualViewport.removeEventListener("scroll", handleResize);
-      }
-    };
-  }, []);
-  return windowSize;
-}
-
-// src/hooks/use-cursor-visibility.ts
-function useCursorVisibility({
-  editor,
-  overlayHeight = 0,
-  elementRef = null
-}) {
-  const { height: windowHeight } = useWindowSize();
-  const [rect, setRect] = React2.useState({
-    x: 0,
-    y: 0,
-    width: 0,
-    height: 0
-  });
-  const updateRect = React2.useCallback(() => {
-    var _a;
-    const element = (_a = elementRef == null ? void 0 : elementRef.current) != null ? _a : document.body;
-    const { x, y, width, height } = element.getBoundingClientRect();
-    setRect({ x, y, width, height });
-  }, [elementRef]);
-  React2.useEffect(() => {
-    var _a;
-    const element = (_a = elementRef == null ? void 0 : elementRef.current) != null ? _a : document.body;
-    updateRect();
-    const resizeObserver = new ResizeObserver(() => {
-      window.requestAnimationFrame(updateRect);
-    });
-    resizeObserver.observe(element);
-    window.addEventListener("scroll", updateRect, { passive: true });
-    return () => {
-      resizeObserver.disconnect();
-      window.removeEventListener("scroll", updateRect);
-    };
-  }, [elementRef, updateRect]);
-  React2.useEffect(() => {
-    const ensureCursorVisibility = () => {
-      if (!editor) return;
-      const { state, view } = editor;
-      if (!view.hasFocus()) return;
-      const { from } = state.selection;
-      const cursorCoords = view.coordsAtPos(from);
-      if (windowHeight < rect.height) {
-        if (cursorCoords) {
-          const availableSpace = windowHeight - cursorCoords.top - overlayHeight > 0;
-          if (!availableSpace) {
-            const targetScrollY = (
-              // TODO: Needed?
-              //   window.scrollY + (cursorCoords.top - windowHeight / 2)
-              cursorCoords.top - windowHeight / 2
-            );
-            window.scrollTo({
-              top: targetScrollY,
-              behavior: "smooth"
-            });
-          }
-        }
-      }
-    };
-    ensureCursorVisibility();
-  }, [editor, overlayHeight, windowHeight, rect.height]);
-  return rect;
-}
-
-// src/hooks/use-tiptap-editor.ts
-var import_react = require("@tiptap/react");
-var import_react2 = require("react");
-function useTiptapEditor(providedEditor) {
-  const { editor: coreEditor } = (0, import_react.useCurrentEditor)();
-  const mainEditor = (0, import_react2.useMemo)(
-    () => providedEditor || coreEditor,
-    [providedEditor, coreEditor]
-  );
-  const editorState = (0, import_react.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/blockquote-button/blockquote-button.tsx
-var import_toolbar = require("@kopexa/toolbar");
-var React4 = __toESM(require("react"));
-
-// src/ui/blockquote-button/use-blockquote.ts
-var import_editor_utils = require("@kopexa/editor-utils");
-var import_icons = require("@kopexa/icons");
-var import_state = require("@tiptap/pm/state");
-var React3 = __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_utils.isNodeInSchema)("blockquote", editor) || (0, import_editor_utils.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_state.TextSelection) {
-      const pos = (_a = (0, import_editor_utils.findNodePosition)({
-        editor,
-        node: state.selection.$anchor.node(1)
-      })) == null ? void 0 : _a.pos;
-      if (!(0, import_editor_utils.isValidPosition)(pos)) return false;
-    }
-    return true;
-  } catch {
-    return false;
-  }
-}
-function toggleBlockquote(editor) {
-  var _a, _b, _c;
-  if (!editor || !editor.isEditable) return false;
-  if (!canToggleBlockquote(editor)) return false;
-  try {
-    const view = editor.view;
-    let state = view.state;
-    let tr = state.tr;
-    if (state.selection.empty || state.selection instanceof import_state.TextSelection) {
-      const pos = (_a = (0, import_editor_utils.findNodePosition)({
-        editor,
-        node: state.selection.$anchor.node(1)
-      })) == null ? void 0 : _a.pos;
-      if (!(0, import_editor_utils.isValidPosition)(pos)) return false;
-      tr = tr.setSelection(import_state.NodeSelection.create(state.doc, pos));
-      view.dispatch(tr);
-      state = view.state;
-    }
-    const selection = state.selection;
-    let chain = editor.chain().focus();
-    if (selection instanceof import_state.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 shouldShowButton(props) {
-  const { editor, hideWhenUnavailable } = props;
-  if (!editor || !editor.isEditable) return false;
-  if (!(0, import_editor_utils.isNodeInSchema)("blockquote", editor)) return false;
-  if (hideWhenUnavailable && !editor.isActive("code")) {
-    return canToggleBlockquote(editor);
-  }
-  return true;
-}
-function useBlockquote(config) {
-  const {
-    editor: providedEditor,
-    hideWhenUnavailable = false,
-    onToggled
-  } = config || {};
-  const { editor } = useTiptapEditor(providedEditor);
-  const [isVisible, setIsVisible] = React3.useState(true);
-  const canToggle3 = canToggleBlockquote(editor);
-  const isActive = (editor == null ? void 0 : editor.isActive("blockquote")) || false;
-  React3.useEffect(() => {
-    if (!editor) return;
-    const handleSelectionUpdate = () => {
-      setIsVisible(shouldShowButton({ editor, hideWhenUnavailable }));
-    };
-    handleSelectionUpdate();
-    editor.on("selectionUpdate", handleSelectionUpdate);
-    return () => {
-      editor.off("selectionUpdate", handleSelectionUpdate);
-    };
-  }, [editor, hideWhenUnavailable]);
-  const handleToggle = React3.useCallback(() => {
-    if (!editor) return false;
-    const success = toggleBlockquote(editor);
-    if (success) {
-      onToggled == null ? void 0 : onToggled();
-    }
-    return success;
-  }, [editor, onToggled]);
-  return {
-    isVisible,
-    isActive,
-    handleToggle,
-    canToggle: canToggle3,
-    label: "Blockquote",
-    shortcutKeys: BLOCKQUOTE_SHORTCUT_KEY,
-    Icon: import_icons.BlockquoteIcon
-  };
-}
-
-// src/ui/blockquote-button/blockquote-button.tsx
-var import_jsx_runtime = require("react/jsx-runtime");
-var BlockquoteButton = ({
-  editor: providedEditor,
-  text,
-  hideWhenUnavailable = false,
-  onToggled,
-  showShortcut = false,
-  onClick,
-  children,
-  ...buttonProps
-}) => {
-  const { editor } = useTiptapEditor(providedEditor);
-  const {
-    isVisible,
-    canToggle: canToggle3,
-    isActive,
-    handleToggle,
-    label,
-    shortcutKeys,
-    Icon
-  } = useBlockquote({
-    editor,
-    hideWhenUnavailable,
-    onToggled
-  });
-  const handleClick = React4.useCallback(
-    (event) => {
-      onClick == null ? void 0 : onClick(event);
-      if (event.defaultPrevented) return;
-      handleToggle();
-    },
-    [handleToggle, onClick]
-  );
-  if (!isVisible) {
-    return null;
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    import_toolbar.ToolbarButton,
-    {
-      type: "button",
-      variant: "ghost",
-      color: "default",
-      disabled: !canToggle3,
-      "data-disabled": !canToggle3,
-      "data-active-state": isActive ? "on" : "off",
-      tabIndex: -1,
-      "aria-label": "blockquote",
-      "aria-pressed": isActive,
-      title: label,
-      shortcutKeys,
-      onClick: handleClick,
-      isIconOnly: !text && !children,
-      ...buttonProps,
-      children: children != null ? children : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Icon, {}),
-        text && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: text })
-      ] })
-    }
-  );
-};
-
-// src/ui/codeblock-button/code-block-button.tsx
-var import_icons3 = require("@kopexa/icons");
-var import_toolbar2 = require("@kopexa/toolbar");
-var import_react3 = require("react");
-
-// src/ui/codeblock-button/use-code-block.ts
-var import_editor_utils2 = require("@kopexa/editor-utils");
-var import_icons2 = require("@kopexa/icons");
-var import_state2 = require("@tiptap/pm/state");
-var React5 = __toESM(require("react"));
-var CODE_BLOCK_SHORTCUT_KEY = "mod+alt+c";
-function canToggle(editor, turnInto = true) {
-  var _a;
-  if (!editor || !editor.isEditable) return false;
-  if (!(0, import_editor_utils2.isNodeInSchema)("codeBlock", editor) || (0, import_editor_utils2.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_state2.TextSelection) {
-      const pos = (_a = (0, import_editor_utils2.findNodePosition)({
-        editor,
-        node: state.selection.$anchor.node(1)
-      })) == null ? void 0 : _a.pos;
-      if (!(0, import_editor_utils2.isValidPosition)(pos)) return false;
-    }
-    return true;
-  } catch {
-    return false;
-  }
-}
-function toggleCodeBlock(editor) {
-  var _a, _b, _c;
-  if (!editor || !editor.isEditable) return false;
-  if (!canToggle(editor)) return false;
-  try {
-    const view = editor.view;
-    let state = view.state;
-    let tr = state.tr;
-    if (state.selection.empty || state.selection instanceof import_state2.TextSelection) {
-      const pos = (_a = (0, import_editor_utils2.findNodePosition)({
-        editor,
-        node: state.selection.$anchor.node(1)
-      })) == null ? void 0 : _a.pos;
-      if (!(0, import_editor_utils2.isValidPosition)(pos)) return false;
-      tr = tr.setSelection(import_state2.NodeSelection.create(state.doc, pos));
-      view.dispatch(tr);
-      state = view.state;
-    }
-    const selection = state.selection;
-    let chain = editor.chain().focus();
-    if (selection instanceof import_state2.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 shouldShowButton2(props) {
-  const { editor, hideWhenUnavailable } = props;
-  if (!editor || !editor.isEditable) return false;
-  if (!(0, import_editor_utils2.isNodeInSchema)("codeBlock", editor)) return false;
-  if (hideWhenUnavailable && !editor.isActive("code")) {
-    return canToggle(editor);
-  }
-  return true;
-}
-function useCodeBlock(config) {
-  const {
-    editor: providedEditor,
-    hideWhenUnavailable = false,
-    onToggled
-  } = config || {};
-  const { editor } = useTiptapEditor(providedEditor);
-  const [isVisible, setIsVisible] = React5.useState(true);
-  const canToggleState = canToggle(editor);
-  const isActive = (editor == null ? void 0 : editor.isActive("codeBlock")) || false;
-  React5.useEffect(() => {
-    if (!editor) return;
-    const handleSelectionUpdate = () => {
-      setIsVisible(shouldShowButton2({ editor, hideWhenUnavailable }));
-    };
-    handleSelectionUpdate();
-    editor.on("selectionUpdate", handleSelectionUpdate);
-    return () => {
-      editor.off("selectionUpdate", handleSelectionUpdate);
-    };
-  }, [editor, hideWhenUnavailable]);
-  const handleToggle = React5.useCallback(() => {
-    if (!editor) return false;
-    const success = toggleCodeBlock(editor);
-    if (success) {
-      onToggled == null ? void 0 : onToggled();
-    }
-    return success;
-  }, [editor, onToggled]);
-  return {
-    isVisible,
-    isActive,
-    handleToggle,
-    canToggle: canToggleState,
-    label: "Code Block",
-    shortcutKeys: CODE_BLOCK_SHORTCUT_KEY,
-    Icon: import_icons2.CodeblockIcon
-  };
-}
-
-// src/ui/codeblock-button/code-block-button.tsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
-var CodeBlockButton = ({
-  editor: providedEditor,
-  text,
-  hideWhenUnavailable = false,
-  onToggled,
-  showShortcut = false,
-  onClick,
-  children,
-  ...buttonProps
-}) => {
-  const { editor } = useTiptapEditor(providedEditor);
-  const { isVisible, canToggle: canToggle3, isActive, handleToggle, label, shortcutKeys } = useCodeBlock({
-    editor,
-    hideWhenUnavailable,
-    onToggled
-  });
-  const handleClick = (0, import_react3.useCallback)(
-    (event) => {
-      onClick == null ? void 0 : onClick(event);
-      if (event.defaultPrevented) return;
-      handleToggle();
-    },
-    [handleToggle, onClick]
-  );
-  if (!isVisible) {
-    return null;
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-    import_toolbar2.ToolbarButton,
-    {
-      type: "button",
-      variant: "ghost",
-      color: "default",
-      disabled: !canToggle3,
-      "data-disabled": !canToggle3,
-      "data-active-state": isActive ? "on" : "off",
-      tabIndex: -1,
-      "aria-label": "codeBlock",
-      "aria-pressed": isActive,
-      title: label,
-      shortcutKeys,
-      onClick: handleClick,
-      isIconOnly: true,
-      ...buttonProps,
-      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons3.CodeblockIcon, {})
-    }
-  );
-};
-
-// src/ui/color-highlight-popover/color-highlight-popover.tsx
-var import_button = require("@kopexa/button");
-var import_icons5 = require("@kopexa/icons");
-var import_popover = require("@kopexa/popover");
-var import_toolbar4 = require("@kopexa/toolbar");
-var import_react5 = require("react");
-
-// src/hooks/use-menu-navigation.ts
-var React6 = __toESM(require("react"));
-function useMenuNavigation({
-  editor,
-  containerRef,
-  query,
-  items,
-  onSelect,
-  onClose,
-  orientation = "vertical",
-  autoSelectFirstItem = true
-}) {
-  const [selectedIndex, setSelectedIndex] = React6.useState(
-    autoSelectFirstItem ? 0 : -1
-  );
-  React6.useEffect(() => {
-    const handleKeyboardNavigation = (event) => {
-      if (!items.length) return false;
-      const moveNext = () => setSelectedIndex((currentIndex) => {
-        if (currentIndex === -1) return 0;
-        return (currentIndex + 1) % items.length;
-      });
-      const movePrev = () => setSelectedIndex((currentIndex) => {
-        if (currentIndex === -1) return items.length - 1;
-        return (currentIndex - 1 + items.length) % items.length;
-      });
-      switch (event.key) {
-        case "ArrowUp": {
-          if (orientation === "horizontal") return false;
-          event.preventDefault();
-          movePrev();
-          return true;
-        }
-        case "ArrowDown": {
-          if (orientation === "horizontal") return false;
-          event.preventDefault();
-          moveNext();
-          return true;
-        }
-        case "ArrowLeft": {
-          if (orientation === "vertical") return false;
-          event.preventDefault();
-          movePrev();
-          return true;
-        }
-        case "ArrowRight": {
-          if (orientation === "vertical") return false;
-          event.preventDefault();
-          moveNext();
-          return true;
-        }
-        case "Tab": {
-          event.preventDefault();
-          if (event.shiftKey) {
-            movePrev();
-          } else {
-            moveNext();
-          }
-          return true;
-        }
-        case "Home": {
-          event.preventDefault();
-          setSelectedIndex(0);
-          return true;
-        }
-        case "End": {
-          event.preventDefault();
-          setSelectedIndex(items.length - 1);
-          return true;
-        }
-        case "Enter": {
-          if (event.isComposing) return false;
-          event.preventDefault();
-          if (selectedIndex !== -1 && items[selectedIndex]) {
-            onSelect == null ? void 0 : onSelect(items[selectedIndex]);
-          }
-          return true;
-        }
-        case "Escape": {
-          event.preventDefault();
-          onClose == null ? void 0 : onClose();
-          return true;
-        }
-        default:
-          return false;
-      }
-    };
-    let targetElement = null;
-    if (editor) {
-      targetElement = editor.view.dom;
-    } else if (containerRef == null ? void 0 : containerRef.current) {
-      targetElement = containerRef.current;
-    }
-    if (targetElement) {
-      targetElement.addEventListener("keydown", handleKeyboardNavigation, true);
-      return () => {
-        targetElement == null ? void 0 : targetElement.removeEventListener(
-          "keydown",
-          handleKeyboardNavigation,
-          true
-        );
-      };
-    }
-    return void 0;
-  }, [
-    editor,
-    containerRef,
-    items,
-    selectedIndex,
-    onSelect,
-    onClose,
-    orientation
-  ]);
-  React6.useEffect(() => {
-    if (query) {
-      setSelectedIndex(autoSelectFirstItem ? 0 : -1);
-    }
-  }, [query, autoSelectFirstItem]);
-  return {
-    selectedIndex: items.length ? selectedIndex : void 0,
-    setSelectedIndex
-  };
-}
-
-// src/ui/color-highlight-button/color-highlight-button.tsx
-var import_theme = require("@kopexa/theme");
-var import_toolbar3 = require("@kopexa/toolbar");
-var import_react4 = require("react");
-
-// src/ui/color-highlight-button/use-color-highlight.ts
-var import_editor_utils3 = require("@kopexa/editor-utils");
-var import_icons4 = require("@kopexa/icons");
-var import_use_is_mobile = require("@kopexa/use-is-mobile");
-var React7 = __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) {
-  if (!editor || !editor.isEditable) return false;
-  if (!(0, import_editor_utils3.isMarkInSchema)("highlight", editor) || (0, import_editor_utils3.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 shouldShowButton3(props) {
-  const { editor, hideWhenUnavailable } = props;
-  if (!editor || !editor.isEditable) return false;
-  if (!(0, import_editor_utils3.isMarkInSchema)("highlight", editor)) return false;
-  if (hideWhenUnavailable && !editor.isActive("code")) {
-    return canColorHighlight(editor);
-  }
-  return true;
-}
-function useColorHighlight(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] = React7.useState(true);
-  const canColorHighlightState = canColorHighlight(editor);
-  const isActive = isColorHighlightActive(editor, highlightColor);
-  React7.useEffect(() => {
-    if (!editor) return;
-    const handleSelectionUpdate = () => {
-      setIsVisible(shouldShowButton3({ editor, hideWhenUnavailable }));
-    };
-    handleSelectionUpdate();
-    editor.on("selectionUpdate", handleSelectionUpdate);
-    return () => {
-      editor.off("selectionUpdate", handleSelectionUpdate);
-    };
-  }, [editor, hideWhenUnavailable]);
-  const handleColorHighlight = React7.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 = React7.useCallback(() => {
-    const success = removeHighlight(editor);
-    if (success) {
-      onApplied == null ? void 0 : onApplied({ color: "", label: "Remove highlight" });
-    }
-    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
-    }
-  );
-  return {
-    isVisible,
-    isActive,
-    handleColorHighlight,
-    handleRemoveHighlight,
-    canColorHighlight: canColorHighlightState,
-    label: label || `Highlight`,
-    shortcutKeys: COLOR_HIGHLIGHT_SHORTCUT_KEY,
-    Icon: import_icons4.HighlighterIcon
-  };
-}
-
-// src/ui/color-highlight-button/color-highlight-button.tsx
-var import_jsx_runtime3 = require("react/jsx-runtime");
-var ColorHighlightButton = ({
-  editor: providedEditor,
-  highlightColor,
-  text,
-  hideWhenUnavailable = false,
-  onApplied,
-  showShortcut = false,
-  onClick,
-  children,
-  style,
-  className,
-  ...buttonProps
-}) => {
-  const { editor } = useTiptapEditor(providedEditor);
-  const {
-    isVisible,
-    canColorHighlight: canColorHighlight2,
-    isActive,
-    handleColorHighlight,
-    label,
-    shortcutKeys
-  } = useColorHighlight({
-    editor,
-    highlightColor,
-    label: text || `Toggle highlight (${highlightColor})`,
-    hideWhenUnavailable,
-    onApplied
-  });
-  const handleClick = (0, import_react4.useCallback)(
-    (event) => {
-      onClick == null ? void 0 : onClick(event);
-      if (event.defaultPrevented) return;
-      handleColorHighlight();
-    },
-    [handleColorHighlight, onClick]
-  );
-  const buttonStyle = (0, import_react4.useMemo)(
-    () => ({
-      ...style,
-      "--highlight-color": highlightColor
-    }),
-    [highlightColor, style]
-  );
-  if (!isVisible) {
-    return null;
-  }
-  const styles = (0, import_theme.colorHighlightButton)();
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
-    import_toolbar3.ToolbarButton,
-    {
-      type: "button",
-      disabled: !canColorHighlight2,
-      "data-disabled": !canColorHighlight2,
-      variant: "ghost",
-      color: "default",
-      "data-active-state": isActive ? "on" : "off",
-      tabIndex: -1,
-      "aria-label": label,
-      shortcutKeys,
-      "aria-pressed": isActive,
-      onClick: handleClick,
-      style: buttonStyle,
-      className: styles.button({ className }),
-      isIconOnly: true,
-      ...buttonProps,
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-          "span",
-          {
-            "data-active-state": isActive ? "on" : "off",
-            className: styles.mark()
-          }
-        ),
-        children || /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-            "span",
-            {
-              style: { "--highlight-color": highlightColor }
-            }
-          ),
-          text
-        ] })
-      ]
-    }
-  );
-};
-
-// src/ui/color-highlight-popover/color-highlight-popover.tsx
-var import_jsx_runtime4 = require("react/jsx-runtime");
-var ColorHighlightPopoverButton = ({
-  className,
-  children,
-  ...props
-}) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-  import_button.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_runtime4.jsx)(import_icons5.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_react5.useRef)(null);
-  const menuItems = (0, import_react5.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_runtime4.jsxs)("div", { ref: containerRef, className: "flex gap-1 items-center", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-      "div",
-      {
-        className: "flex items-center gap-1 outline-none",
-        "data-orientation": "horizontal",
-        children: colors.map((color, index) => /* @__PURE__ */ (0, import_jsx_runtime4.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_runtime4.jsx)(import_toolbar4.ToolbarSeparator, { orientation: "vertical" }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "tiptap-button-group", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-      import_button.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_runtime4.jsx)(import_icons5.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_react5.useState)(false);
-  const { isVisible, canColorHighlight: canColorHighlight2, isActive, label } = useColorHighlight({
-    editor,
-    hideWhenUnavailable,
-    onApplied
-  });
-  if (!isVisible) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_popover.Popover.Root, { open: isOpen, onOpenChange: setIsOpen, spacing: "dense", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-      import_popover.Popover.Trigger,
-      {
-        render: /* @__PURE__ */ (0, import_jsx_runtime4.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_runtime4.jsx)(import_popover.Popover.Content, { "aria-label": "Highlight colors", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ColorHighlightPopoverContent, { editor, colors }) })
-  ] });
-}
-
-// src/ui/heading-dropdown-menu/index.tsx
-var import_button3 = require("@kopexa/button");
-var import_dropdown_menu = require("@kopexa/dropdown-menu");
-var import_editor_utils5 = require("@kopexa/editor-utils");
-var import_icons7 = require("@kopexa/icons");
-var import_react7 = require("@tiptap/react");
-var React9 = __toESM(require("react"));
-
-// src/ui/heading-button/index.tsx
-var import_button2 = require("@kopexa/button");
-var import_editor_utils4 = require("@kopexa/editor-utils");
-var import_icons6 = require("@kopexa/icons");
-var React8 = __toESM(require("react"));
-
-// src/ui/heading-button/utils.ts
-var import_react6 = 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;
-  try {
-    return editor.can().toggleNode("heading", "paragraph", { level });
-  } 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) {
-    return false;
-  }
-  if (hideWhenUnavailable) {
-    if ((0, import_react6.isNodeSelection)(editor.state.selection)) {
-      return false;
-    }
-  }
-  return true;
-}
-function getFormattedHeadingName(level) {
-  return `Heading ${level}`;
-}
-
-// src/ui/heading-button/index.tsx
-var import_jsx_runtime5 = require("react/jsx-runtime");
-var headingIcons = {
-  1: import_icons6.HeadingOneIcon,
-  2: import_icons6.HeadingTwoIcon,
-  3: import_icons6.HeadingThreeIcon,
-  4: import_icons6.HeadingFourIcon,
-  5: import_icons6.HeadingFiveIcon,
-  6: import_icons6.HeadingSixIcon
-};
-function useHeadingState(editor, level, disabled = false) {
-  const headingInSchema = (0, import_editor_utils4.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 {
-    headingInSchema,
-    isDisabled,
-    isActive,
-    Icon,
-    shortcutKey,
-    formattedName
-  };
-}
-var HeadingButton = ({
-  editor: providedEditor,
-  level,
-  text,
-  hideWhenUnavailable = false,
-  className = "",
-  disabled,
-  onClick,
-  children,
-  ref,
-  ...buttonProps
-}) => {
-  const { editor } = useTiptapEditor(providedEditor);
-  const {
-    headingInSchema,
-    isDisabled,
-    isActive,
-    Icon,
-    shortcutKey,
-    formattedName
-  } = useHeadingState(editor, level, disabled);
-  const handleClick = React8.useCallback(
-    (e) => {
-      onClick == null ? void 0 : onClick(e);
-      if (!e.defaultPrevented && !isDisabled && editor) {
-        toggleHeading(editor, level);
-      }
-    },
-    [onClick, isDisabled, editor, level]
-  );
-  const show = React8.useMemo(() => {
-    return shouldShowHeadingButton({
-      editor,
-      level,
-      hideWhenUnavailable,
-      headingInSchema
-    });
-  }, [editor, level, hideWhenUnavailable, headingInSchema]);
-  if (!show || !editor || !editor.isEditable) {
-    return null;
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-    import_button2.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": formattedName,
-      "aria-pressed": isActive,
-      tooltip: formattedName,
-      shortcutKeys: shortcutKey,
-      onClick: handleClick,
-      startContent: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Icon, {}),
-      ...buttonProps,
-      ref,
-      children: children || text
-    }
-  );
-};
-
-// src/ui/heading-dropdown-menu/index.tsx
-var import_jsx_runtime6 = require("react/jsx-runtime");
-function HeadingDropdownMenu({
-  editor: providedEditor,
-  levels = [1, 2, 3, 4, 5, 6],
-  hideWhenUnavailable = false,
-  onOpenChange,
-  ...props
-}) {
-  var _a;
-  const [isOpen, setIsOpen] = React9.useState(false);
-  const { editor } = useTiptapEditor(providedEditor);
-  const headingInSchema = (0, import_editor_utils5.isNodeInSchema)("heading", editor);
-  const handleOnOpenChange = React9.useCallback(
-    (open) => {
-      setIsOpen(open);
-      onOpenChange == null ? void 0 : onOpenChange(open);
-    },
-    [onOpenChange]
-  );
-  const getActiveIcon = React9.useCallback(() => {
-    if (!editor) return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_icons7.HeadingIcon, {});
-    const activeLevel = levels.find(
-      (level) => editor.isActive("heading", { level })
-    );
-    if (!activeLevel) return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_icons7.HeadingIcon, {});
-    const ActiveIcon = headingIcons[activeLevel];
-    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ActiveIcon, {});
-  }, [editor, levels]);
-  const canToggleAnyHeading = React9.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 = React9.useMemo(() => {
-    if (!headingInSchema || !editor) {
-      return false;
-    }
-    if (hideWhenUnavailable) {
-      if ((0, import_react7.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_runtime6.jsxs)(import_dropdown_menu.DropdownMenu.Root, { open: isOpen, onOpenChange: handleOnOpenChange, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_dropdown_menu.DropdownMenu.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-      import_button3.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_runtime6.jsx)(import_icons7.ChevronDownIcon, {}),
-        ...props,
-        children: getActiveIcon()
-      }
-    ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_dropdown_menu.DropdownMenu.Content, { children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_dropdown_menu.DropdownMenu.Group, { children: levels.map((level) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_dropdown_menu.DropdownMenu.Item, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-      HeadingButton,
-      {
-        editor,
-        level,
-        text: getFormattedHeadingName(level),
-        tooltip: "",
-        fullWidth: true,
-        spacing: "start"
-      }
-    ) }, `heading-${level}`)) }) })
-  ] });
-}
-
-// src/ui/link-popover/link-popover.tsx
-var import_button4 = require("@kopexa/button");
-var import_icons9 = require("@kopexa/icons");
-var import_input = require("@kopexa/input");
-var import_popover2 = require("@kopexa/popover");
-var import_toolbar5 = require("@kopexa/toolbar");
-var import_react8 = require("react");
-
-// src/ui/link-popover/use-link-popover.ts
-var import_editor_utils6 = require("@kopexa/editor-utils");
-var import_icons8 = require("@kopexa/icons");
-var React10 = __toESM(require("react"));
-
-// src/utils/index.ts
-var MAX_FILE_SIZE = 5 * 1024 * 1024;
-var ATTR_WHITESPACE = (
-  // eslint-disable-next-line no-control-regex
-  // biome-ignore lint/suspicious/noControlCharactersInRegex: we can do this yay
-  /[\u0000-\u0020\u00A0\u1680\u180E\u2000-\u2029\u205F\u3000]/g
-);
-function isAllowedUri(uri, protocols) {
-  const allowedProtocols = [
-    "http",
-    "https",
-    "ftp",
-    "ftps",
-    "mailto",
-    "tel",
-    "callto",
-    "sms",
-    "cid",
-    "xmpp"
-  ];
-  if (protocols) {
-    for (const protocol of protocols) {
-      const nextProtocol = typeof protocol === "string" ? protocol : protocol.scheme;
-      if (nextProtocol) {
-        allowedProtocols.push(nextProtocol);
-      }
-    }
-  }
-  return !uri || uri.replace(ATTR_WHITESPACE, "").match(
-    new RegExp(
-      // eslint-disable-next-line no-useless-escape
-      `^(?:(?:${allowedProtocols.join("|")}):|[^a-z]|[a-z0-9+.-]+(?:[^a-z+.-:]|$))`,
-      "i"
-    )
-  );
-}
-function sanitizeUrl(inputUrl, baseUrl, protocols) {
-  try {
-    const url = new URL(inputUrl, baseUrl);
-    if (isAllowedUri(url.href, protocols)) {
-      return url.href;
-    }
-  } catch {
-  }
-  return "#";
-}
-
-// src/ui/link-popover/use-link-popover.ts
-function canSetLink(editor) {
-  if (!editor || !editor.isEditable) return false;
-  return editor.can().setMark("link");
-}
-function isLinkActive(editor) {
-  if (!editor || !editor.isEditable) return false;
-  return editor.isActive("link");
-}
-function shouldShowLinkButton(props) {
-  const { editor, hideWhenUnavailable } = props;
-  const linkInSchema = (0, import_editor_utils6.isMarkInSchema)("link", editor);
-  if (!linkInSchema || !editor) {
-    return false;
-  }
-  if (hideWhenUnavailable && !editor.isActive("code")) {
-    return canSetLink(editor);
-  }
-  return true;
-}
-function useLinkHandler(props) {
-  const { editor, onSetLink } = props;
-  const [url, setUrl] = React10.useState(null);
-  React10.useEffect(() => {
-    if (!editor) return;
-    const { href } = editor.getAttributes("link");
-    if (isLinkActive(editor) && url === null) {
-      setUrl(href || "");
-    }
-  }, [editor, url]);
-  React10.useEffect(() => {
-    if (!editor) return;
-    const updateLinkState = () => {
-      const { href } = editor.getAttributes("link");
-      setUrl(href || "");
-    };
-    editor.on("selectionUpdate", updateLinkState);
-    return () => {
-      editor.off("selectionUpdate", updateLinkState);
-    };
-  }, [editor]);
-  const setLink = React10.useCallback(() => {
-    if (!url || !editor) return;
-    const { selection } = editor.state;
-    const isEmpty = selection.empty;
-    let chain = editor.chain().focus();
-    chain = chain.extendMarkRange("link").setLink({ href: url });
-    if (isEmpty) {
-      chain = chain.insertContent({ type: "text", text: url });
-    }
-    chain.run();
-    setUrl(null);
-    onSetLink == null ? void 0 : onSetLink();
-  }, [editor, onSetLink, url]);
-  const removeLink = React10.useCallback(() => {
-    if (!editor) return;
-    editor.chain().focus().extendMarkRange("link").unsetLink().setMeta("preventAutolink", true).run();
-    setUrl("");
-  }, [editor]);
-  const openLink = React10.useCallback(
-    (target = "_blank", features = "noopener,noreferrer") => {
-      if (!url) return;
-      const safeUrl = sanitizeUrl(url, window.location.href);
-      if (safeUrl !== "#") {
-        window.open(safeUrl, target, features);
-      }
-    },
-    [url]
-  );
-  return {
-    url: url || "",
-    setUrl,
-    setLink,
-    removeLink,
-    openLink
-  };
-}
-function useLinkState(props) {
-  const { editor, hideWhenUnavailable = false } = props;
-  const canSet = canSetLink(editor);
-  const isActive = isLinkActive(editor);
-  const [isVisible, setIsVisible] = React10.useState(false);
-  React10.useEffect(() => {
-    if (!editor) return;
-    const handleSelectionUpdate = () => {
-      setIsVisible(
-        shouldShowLinkButton({
-          editor,
-          hideWhenUnavailable
-        })
-      );
-    };
-    handleSelectionUpdate();
-    editor.on("selectionUpdate", handleSelectionUpdate);
-    return () => {
-      editor.off("selectionUpdate", handleSelectionUpdate);
-    };
-  }, [editor, hideWhenUnavailable]);
-  return {
-    isVisible,
-    canSet,
-    isActive
-  };
-}
-function useLinkPopover(config) {
-  const {
-    editor: providedEditor,
-    hideWhenUnavailable = false,
-    onSetLink
-  } = config || {};
-  const { editor } = useTiptapEditor(providedEditor);
-  const { isVisible, canSet, isActive } = useLinkState({
-    editor,
-    hideWhenUnavailable
-  });
-  const linkHandler = useLinkHandler({
-    editor,
-    onSetLink
-  });
-  return {
-    isVisible,
-    canSet,
-    isActive,
-    label: "Link",
-    Icon: import_icons8.LinkIcon,
-    ...linkHandler
-  };
-}
-
-// src/ui/link-popover/link-popover.tsx
-var import_jsx_runtime7 = require("react/jsx-runtime");
-var LinkButton = ({ className, children, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-    import_toolbar5.ToolbarButton,
-    {
-      type: "button",
-      className,
-      variant: "ghost",
-      color: "default",
-      tabIndex: -1,
-      "aria-label": "Link",
-      title: "Link",
-      isIconOnly: !children,
-      ...props,
-      children: children || /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_icons9.LinkIcon, {})
-    }
-  );
-};
-var LinkMain = ({
-  url,
-  setUrl,
-  setLink,
-  removeLink,
-  openLink,
-  isActive,
-  onSave
-}) => {
-  const [isEditing, setIsEditing] = (0, import_react8.useState)(!isActive || !url);
-  (0, import_react8.useEffect)(() => {
-    setIsEditing(!isActive || !url);
-  }, [isActive, url]);
-  const handleKeyDown = (event) => {
-    if (event.key === "Enter") {
-      event.preventDefault();
-      setLink();
-      setIsEditing(false);
-      onSave == null ? void 0 : onSave();
-    } else if (event.key === "Escape") {
-      event.preventDefault();
-      setIsEditing(false);
-    }
-  };
-  const handleSave = () => {
-    setLink();
-    setIsEditing(false);
-    onSave == null ? void 0 : onSave();
-  };
-  const handleEdit = () => {
-    setIsEditing(true);
-  };
-  if (isEditing) {
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex items-center gap-1 min-w-[280px]", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-        import_input.Input,
-        {
-          type: "url",
-          placeholder: "Enter URL...",
-          value: url,
-          onChange: (e) => setUrl(e.target.value),
-          onKeyDown: handleKeyDown,
-          autoComplete: "off",
-          autoCorrect: "off",
-          autoCapitalize: "off",
-          className: "flex-1 h-8 text-sm",
-          autoFocus: true
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-        import_button4.IconButton,
-        {
-          type: "button",
-          size: "sm",
-          variant: "ghost",
-          onClick: handleSave,
-          "aria-label": "Save link",
-          disabled: !url,
-          children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_icons9.CheckIcon, { className: "size-4" })
-        }
-      )
-    ] });
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex items-center gap-1 min-w-[280px]", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-      "a",
-      {
-        href: url,
-        target: "_blank",
-        rel: "noopener noreferrer",
-        className: "flex-1 text-sm text-primary truncate max-w-[200px] hover:underline px-2",
-        onClick: (e) => {
-          e.preventDefault();
-          openLink();
-        },
-        children: url
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex items-center gap-0.5 border-l pl-1 ml-1", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-        import_button4.IconButton,
-        {
-          type: "button",
-          size: "sm",
-          variant: "ghost",
-          onClick: openLink,
-          "aria-label": "Open link in new tab",
-          children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_icons9.ExternalLinkIcon, { className: "size-4" })
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-        import_button4.IconButton,
-        {
-          type: "button",
-          size: "sm",
-          variant: "ghost",
-          onClick: handleEdit,
-          "aria-label": "Edit link",
-          children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_icons9.EditIcon, { className: "size-4" })
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-        import_button4.IconButton,
-        {
-          type: "button",
-          size: "sm",
-          variant: "ghost",
-          onClick: removeLink,
-          "aria-label": "Remove link",
-          children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_icons9.TrashIcon, { className: "size-4" })
-        }
-      )
-    ] })
-  ] });
-};
-function LinkPopover({
-  editor: providedEditor,
-  hideWhenUnavailable = false,
-  onSetLink,
-  onOpenChange,
-  autoOpenOnLinkActive = true,
-  onClick,
-  children,
-  ...buttonProps
-}) {
-  const { editor } = useTiptapEditor(providedEditor);
-  const [isOpen, setIsOpen] = (0, import_react8.useState)(false);
-  const {
-    isVisible,
-    canSet,
-    isActive,
-    url,
-    setUrl,
-    setLink,
-    removeLink,
-    openLink,
-    label
-  } = useLinkPopover({
-    editor,
-    hideWhenUnavailable,
-    onSetLink
-  });
-  const handleOnOpenChange = (0, import_react8.useCallback)(
-    (nextIsOpen) => {
-      setIsOpen(nextIsOpen);
-      onOpenChange == null ? void 0 : onOpenChange(nextIsOpen);
-    },
-    [onOpenChange]
-  );
-  const handleSetLink = (0, import_react8.useCallback)(() => {
-    setLink();
-    setIsOpen(false);
-  }, [setLink]);
-  const handleClick = (0, import_react8.useCallback)(
-    (event) => {
-      onClick == null ? void 0 : onClick(event);
-      if (event.defaultPrevented) return;
-      setIsOpen(!isOpen);
-    },
-    [onClick, isOpen]
-  );
-  (0, import_react8.useEffect)(() => {
-    if (autoOpenOnLinkActive && isActive) {
-      setIsOpen(true);
-    }
-  }, [autoOpenOnLinkActive, isActive]);
-  if (!isVisible) {
-    return null;
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
-    import_popover2.Popover.Root,
-    {
-      open: isOpen,
-      onOpenChange: handleOnOpenChange,
-      spacing: "dense",
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-          import_popover2.Popover.Trigger,
-          {
-            render: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-              LinkButton,
-              {
-                "data-disabled": !canSet,
-                disabled: !canSet,
-                "data-active-state": isActive ? "on" : "off",
-                "aria-label": label,
-                "aria-pressed": isActive,
-                onClick: handleClick,
-                ...buttonProps
-              }
-            )
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_popover2.Popover.Content, { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-          LinkMain,
-          {
-            url,
-            setUrl,
-            setLink: handleSetLink,
-            removeLink,
-            openLink,
-            isActive,
-            onSave: () => setIsOpen(false)
-          }
-        ) })
-      ]
-    }
-  );
-}
-LinkButton.displayName = "LinkButton";
-
-// src/ui/list-dropdown-menu/index.tsx
-var import_button6 = require("@kopexa/button");
-var import_dropdown_menu2 = require("@kopexa/dropdown-menu");
-var import_editor_utils8 = require("@kopexa/editor-utils");
-var import_icons11 = require("@kopexa/icons");
-var import_react11 = require("@tiptap/react");
-var import_react12 = require("react");
-
-// src/ui/list-button/index.tsx
-var import_button5 = require("@kopexa/button");
-var import_editor_utils7 = require("@kopexa/editor-utils");
-var import_icons10 = require("@kopexa/icons");
-var import_react9 = require("@tiptap/react");
-var import_react10 = require("react");
-var import_jsx_runtime8 = require("react/jsx-runtime");
-var listOptions = [
-  {
-    label: "Bullet List",
-    type: "bulletList",
-    icon: import_icons10.ListIcon
-  },
-  {
-    label: "Ordered List",
-    type: "orderedList",
-    icon: import_icons10.ListOrderedIcon
-  },
-  {
-    label: "Task List",
-    type: "taskList",
-    icon: import_icons10.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_react9.isNodeSelection)(editor.state.selection) || !canToggleList(editor, type)) {
-      return false;
-    }
-  }
-  return true;
-}
-function useListState(editor, type) {
-  const listInSchema = (0, import_editor_utils7.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 } = useTiptapEditor(providedEditor);
-  const { listInSchema, listOption, isActive, shortcutKey } = useListState(
-    editor,
-    type
-  );
-  const Icon = (listOption == null ? void 0 : listOption.icon) || import_icons10.ListIcon;
-  const handleClick = (0, import_react10.useCallback)(
-    (e) => {
-      onClick == null ? void 0 : onClick(e);
-      if (!e.defaultPrevented && editor) {
-        toggleList(editor, type);
-      }
-    },
-    [onClick, editor, type]
-  );
-  const show = (0, import_react10.useMemo)(() => {
-    return shouldShowListButton({
-      editor,
-      type,
-      hideWhenUnavailable,
-      listInSchema
-    });
-  }, [editor, type, hideWhenUnavailable, listInSchema]);
-  if (!show || !editor || !editor.isEditable) {
-    return null;
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-    import_button5.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_runtime8.jsx)(Icon, {}),
-      ...buttonProps,
-      ref,
-      children: children || text
-    }
-  );
-};
-
-// src/ui/list-dropdown-menu/index.tsx
-var import_jsx_runtime9 = 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_react11.isNodeSelection)(editor.state.selection) || !canToggleAny) {
-      return false;
-    }
-  }
-  return true;
-}
-function useListDropdownState(editor, availableTypes) {
-  const [isOpen, setIsOpen] = (0, import_react12.useState)(false);
-  const listInSchema = availableTypes.some(
-    (type) => (0, import_editor_utils8.isNodeInSchema)(type, editor)
-  );
-  const filteredLists = (0, import_react12.useMemo)(
-    () => getFilteredListOptions(availableTypes),
-    [availableTypes]
-  );
-  const canToggleAny = canToggleAnyList(editor, availableTypes);
-  const isAnyActive = isAnyListActive(editor, availableTypes);
-  const handleOpenChange = (0, import_react12.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_react12.useCallback)(() => {
-    const activeOption = filteredLists.find(
-      (option) => isListActive(editor, option.type)
-    );
-    return activeOption ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(activeOption.icon, {}) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_icons11.ListIcon, {});
-  }, [editor, filteredLists]);
-}
-function ListDropdownMenu({
-  editor: providedEditor,
-  types = ["bulletList", "orderedList", "taskList"],
-  hideWhenUnavailable = false,
-  onOpenChange,
-  ...props
-}) {
-  const { editor } = useTiptapEditor(providedEditor);
-  const {
-    isOpen,
-    listInSchema,
-    filteredLists,
-    canToggleAny,
-    isAnyActive,
-    handleOpenChange
-  } = useListDropdownState(editor, types);
-  const getActiveIcon = useActiveListIcon(editor, filteredLists);
-  const show = (0, import_react12.useMemo)(() => {
-    return shouldShowListDropdown({
-      editor,
-      listTypes: types,
-      hideWhenUnavailable,
-      listInSchema,
-      canToggleAny
-    });
-  }, [editor, types, hideWhenUnavailable, listInSchema, canToggleAny]);
-  const handleOnOpenChange = (0, import_react12.useCallback)(
-    (open) => handleOpenChange(open, onOpenChange),
-    [handleOpenChange, onOpenChange]
-  );
-  if (!show || !editor || !editor.isEditable) {
-    return null;
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_dropdown_menu2.DropdownMenu.Root, { open: isOpen, onOpenChange: handleOnOpenChange, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_dropdown_menu2.DropdownMenu.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-      import_button6.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_runtime9.jsx)(import_icons11.ChevronDownIcon, {}),
-        ...props,
-        children: getActiveIcon()
-      }
-    ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_dropdown_menu2.DropdownMenu.Content, { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_dropdown_menu2.DropdownMenu.Group, { children: filteredLists.map((option) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_dropdown_menu2.DropdownMenu.Item, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-      ListButton,
-      {
-        editor,
-        type: option.type,
-        text: option.label,
-        hideWhenUnavailable,
-        tooltip: "",
-        fullWidth: true,
-        spacing: "start"
-      }
-    ) }, option.type)) }) })
-  ] });
-}
-
-// src/ui/mark-button/index.tsx
-var import_editor_utils9 = require("@kopexa/editor-utils");
-var import_icons12 = require("@kopexa/icons");
-var import_toolbar6 = require("@kopexa/toolbar");
-var import_react13 = require("@tiptap/react");
-var import_react14 = require("react");
-var import_jsx_runtime10 = require("react/jsx-runtime");
-var markIcons = {
-  bold: import_icons12.BoldIcon,
-  italic: import_icons12.ItalicIcon,
-  underline: import_icons12.UnderlineIcon,
-  strike: import_icons12.StrikeIcon,
-  code: import_icons12.CodeIcon,
-  superscript: import_icons12.SuperscriptIcon,
-  subscript: import_icons12.SubscriptIcon
-};
-var markShortcutKeys = {
-  bold: "mod+b",
-  italic: "mod+i",
-  underline: "mod+u",
-  strike: "mod+shift+s",
-  code: "mod+e",
-  superscript: "mod+.",
-  subscript: "mod+,"
-};
-function canToggleMark(editor, type) {
-  if (!editor || !editor.isEditable) return false;
-  if (!(0, import_editor_utils9.isMarkInSchema)(type, editor) || (0, import_editor_utils9.isNodeTypeSelected)(editor, ["image"]))
-    return false;
-  return editor.can().toggleMark(type);
-}
-function isMarkActive(editor, type) {
-  if (!editor) return false;
-  return editor.isActive(type);
-}
-function toggleMark(editor, type) {
-  if (!editor) return;
-  editor.chain().focus().toggleMark(type).run();
-}
-function isMarkButtonDisabled(editor, type, userDisabled = false) {
-  if (!editor) return true;
-  if (userDisabled) return true;
-  if (editor.isActive("codeBlock")) return true;
-  if (!canToggleMark(editor, type)) return true;
-  return false;
-}
-function shouldShowMarkButton(params) {
-  const { editor, type, hideWhenUnavailable, markInSchema } = params;
-  if (!markInSchema || !editor) {
-    return false;
-  }
-  if (hideWhenUnavailable) {
-    if ((0, import_react13.isNodeSelection)(editor.state.selection) || !canToggleMark(editor, type)) {
-      return false;
-    }
-  }
-  return true;
-}
-function getFormattedMarkName(type) {
-  return type.charAt(0).toUpperCase() + type.slice(1);
-}
-function useMarkState(editor, type, disabled = false) {
-  const markInSchema = (0, import_editor_utils9.isMarkInSchema)(type, editor);
-  const isDisabled = isMarkButtonDisabled(editor, type, disabled);
-  const isActive = isMarkActive(editor, type);
-  const Icon = markIcons[type];
-  const shortcutKey = markShortcutKeys[type];
-  const formattedName = getFormattedMarkName(type);
-  return {
-    markInSchema,
-    isDisabled,
-    isActive,
-    Icon,
-    shortcutKey,
-    formattedName
-  };
-}
-var MarkButton = ({
-  editor: providedEditor,
-  type,
-  text,
-  hideWhenUnavailable = false,
-  className = "",
-  disabled,
-  onClick,
-  children,
-  ...buttonProps
-}) => {
-  const { editor } = useTiptapEditor(providedEditor);
-  const {
-    markInSchema,
-    isDisabled,
-    isActive,
-    Icon,
-    shortcutKey,
-    formattedName
-  } = useMarkState(editor, type, disabled);
-  const handleClick = (0, import_react14.useCallback)(
-    (e) => {
-      onClick == null ? void 0 : onClick(e);
-      if (!e.defaultPrevented && !isDisabled && editor) {
-        toggleMark(editor, type);
-      }
-    },
-    [onClick, isDisabled, editor, type]
-  );
-  const show = (0, import_react14.useMemo)(() => {
-    return shouldShowMarkButton({
-      editor,
-      type,
-      hideWhenUnavailable,
-      markInSchema
-    });
-  }, [editor, type, hideWhenUnavailable, markInSchema]);
-  if (!show || !editor || !editor.isEditable) {
-    return null;
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-    import_toolbar6.ToolbarButton,
-    {
-      type: "button",
-      className: className.trim(),
-      disabled: isDisabled,
-      variant: "ghost",
-      color: "default",
-      "data-active-state": isActive ? "on" : "off",
-      "data-disabled": isDisabled,
-      tabIndex: -1,
-      "aria-label": type,
-      "aria-pressed": isActive,
-      title: formattedName,
-      shortcutKeys: shortcutKey,
-      onClick: handleClick,
-      isIconOnly: true,
-      ...buttonProps,
-      children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Icon, {})
-    }
-  );
-};
-
-// src/ui/table-button/index.tsx
-var import_toolbar7 = require("@kopexa/toolbar");
-var import_react17 = require("react");
-
-// src/ui/table-button/use-table.ts
-var import_editor_utils10 = require("@kopexa/editor-utils");
-var import_icons13 = require("@kopexa/icons");
-var import_react15 = require("@tiptap/react");
-var import_react16 = require("react");
-function canToggle2(editor) {
-  if (!editor || !editor.isEditable) return false;
-  if (!(0, import_editor_utils10.isNodeInSchema)("table", editor) || (0, import_editor_utils10.isNodeTypeSelected)(editor, ["image"])) {
-    return false;
-  }
-  try {
-    return editor.can().insertTable({ rows: 3, cols: 3, withHeaderRow: true });
-  } catch {
-    return false;
-  }
-}
-function toggleTable(editor, config) {
-  var _a;
-  if (!editor || !editor.isEditable) return false;
-  if (!canToggle2(editor)) return false;
-  try {
-    return editor.chain().focus().insertTable({
-      rows: (config == null ? void 0 : config.rows) || 3,
-      cols: (config == null ? void 0 : config.cols) || 3,
-      withHeaderRow: (_a = config == null ? void 0 : config.withHeaderRow) != null ? _a : true
-    }).run();
-  } catch {
-    return false;
-  }
-}
-function shouldShowButton4(props) {
-  const { editor, hideWhenUnavailable } = props;
-  if (!editor || !editor.isEditable) return false;
-  if (!(0, import_editor_utils10.isNodeInSchema)("table", editor)) return false;
-  if (hideWhenUnavailable) {
-    if ((0, import_react15.isNodeSelection)(editor.state.selection) || !canToggle2) {
-      return false;
-    }
-  }
-  return true;
-}
-function useTableBlock(config) {
-  const {
-    editor: providedEditor,
-    hideWhenUnavailable = false,
-    onToggled
-  } = config || {};
-  const { editor } = useTiptapEditor(providedEditor);
-  const [isVisible, setIsVisible] = (0, import_react16.useState)(true);
-  const canToggleState = canToggle2(editor);
-  const isActive = (editor == null ? void 0 : editor.isActive("table")) || false;
-  (0, import_react16.useEffect)(() => {
-    if (!editor) return;
-    const handleSelectionUpdate = () => {
-      setIsVisible(shouldShowButton4({ editor, hideWhenUnavailable }));
-    };
-    handleSelectionUpdate();
-    editor.on("selectionUpdate", handleSelectionUpdate);
-    return () => {
-      editor.off("selectionUpdate", handleSelectionUpdate);
-    };
-  }, [editor, hideWhenUnavailable]);
-  const handleToggle = (0, import_react16.useCallback)(() => {
-    if (!editor) return false;
-    const success = toggleTable(editor);
-    if (success) {
-      onToggled == null ? void 0 : onToggled();
-    }
-    return success;
-  }, [editor, onToggled]);
-  return {
-    isVisible,
-    isActive,
-    handleToggle,
-    canToggle: canToggleState,
-    label: "Table",
-    // shortcutKeys: CODE_BLOCK_SHORTCUT_KEY,
-    Icon: import_icons13.TableIcon
-  };
-}
-
-// src/ui/table-button/index.tsx
-var import_jsx_runtime11 = require("react/jsx-runtime");
-var TableButton = ({
-  editor: providedEditor,
-  text,
-  hideWhenUnavailable = false,
-  onToggled,
-  onClick,
-  children,
-  ...buttonProps
-}) => {
-  const { editor } = useTiptapEditor(providedEditor);
-  const {
-    isVisible,
-    canToggle: canToggle3,
-    isActive,
-    handleToggle,
-    label,
-    //     shortcutKeys,
-    Icon
-  } = useTableBlock({
-    editor,
-    hideWhenUnavailable,
-    onToggled
-  });
-  const handleClick = (0, import_react17.useCallback)(
-    (event) => {
-      onClick == null ? void 0 : onClick(event);
-      if (event.defaultPrevented) return;
-      handleToggle();
-    },
-    [handleToggle, onClick]
-  );
-  if (!isVisible) {
-    return null;
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-    import_toolbar7.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_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Icon, {}),
-        text && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { children: text })
-      ] })
-    }
-  );
-};
-
-// src/ui/text-align-button/text-align-button.tsx
-var import_button7 = require("@kopexa/button");
-var import_react19 = require("react");
-
-// src/ui/text-align-button/use-text-align.ts
-var import_editor_utils11 = require("@kopexa/editor-utils");
-var import_icons14 = require("@kopexa/icons");
-var import_react18 = 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_icons14.AlignLeftIcon,
-  center: import_icons14.AlignCenterIcon,
-  right: import_icons14.AlignRightIcon,
-  justify: import_icons14.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_utils11.isExtensionAvailable)(editor, "textAlign") || (0, import_editor_utils11.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 shouldShowButton5(props) {
-  const { editor, hideWhenUnavailable, align } = props;
-  if (!editor || !editor.isEditable) return false;
-  if (!(0, import_editor_utils11.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 } = useTiptapEditor(providedEditor);
-  const [isVisible, setIsVisible] = (0, import_react18.useState)(true);
-  const canAlign = canSetTextAlign(editor, align);
-  const isActive = isTextAlignActive(editor, align);
-  (0, import_react18.useEffect)(() => {
-    if (!editor) return;
-    const handleSelectionUpdate = () => {
-      setIsVisible(shouldShowButton5({ editor, align, hideWhenUnavailable }));
-    };
-    handleSelectionUpdate();
-    editor.on("selectionUpdate", handleSelectionUpdate);
-    return () => {
-      editor.off("selectionUpdate", handleSelectionUpdate);
-    };
-  }, [editor, hideWhenUnavailable, align]);
-  const handleTextAlign = (0, import_react18.useCallback)(() => {
-    if (!editor) return false;
-    const success = setTextAlign(editor, align);
-    if (success) {
-      onAligned == null ? void 0 : onAligned();
-    }
-    return success;
-  }, [editor, align, onAligned]);
-  return {
-    isVisible,
-    isActive,
-    handleTextAlign,
-    canAlign,
-    label: textAlignLabels[align],
-    shortcutKeys: TEXT_ALIGN_SHORTCUT_KEYS[align],
-    Icon: textAlignIcons[align]
-  };
-}
-
-// src/ui/text-align-button/text-align-button.tsx
-var import_jsx_runtime12 = 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_react19.useCallback)(
-    (e) => {
-      onClick == null ? void 0 : onClick(e);
-      if (e.defaultPrevented) return;
-      handleTextAlign();
-    },
-    [handleTextAlign, onClick]
-  );
-  if (!isVisible) {
-    return null;
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-    import_button7.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_runtime12.jsx)(Icon, {})
-    }
-  );
-};
-
-// src/ui/undo-redo-button/undo-redo-button.tsx
-var import_toolbar8 = require("@kopexa/toolbar");
-var import_react21 = require("react");
-
-// src/ui/undo-redo-button/use-undo-redo.ts
-var import_editor_utils12 = require("@kopexa/editor-utils");
-var import_icons15 = require("@kopexa/icons");
-var import_react20 = require("react");
-var UNDO_REDO_SHORTCUT_KEYS = {
-  undo: "mod+z",
-  redo: "mod+shift+z"
-};
-var historyActionLabels = {
-  undo: "Undo",
-  redo: "Redo"
-};
-var historyIcons = {
-  undo: import_icons15.UndoIcon,
-  redo: import_icons15.RedoIcon
-};
-function canExecuteUndoRedoAction(editor, action) {
-  if (!editor || !editor.isEditable) return false;
-  if ((0, import_editor_utils12.isNodeTypeSelected)(editor, ["image"])) return false;
-  return action === "undo" ? editor.can().undo() : editor.can().redo();
-}
-function executeUndoRedoAction(editor, action) {
-  if (!editor || !editor.isEditable) return false;
-  if (!canExecuteUndoRedoAction(editor, action)) return false;
-  const chain = editor.chain().focus();
-  return action === "undo" ? chain.undo().run() : chain.redo().run();
-}
-function shouldShowButton6(props) {
-  const { editor, hideWhenUnavailable, action } = props;
-  if (!editor || !editor.isEditable) return false;
-  if (hideWhenUnavailable && !editor.isActive("code")) {
-    return canExecuteUndoRedoAction(editor, action);
-  }
-  return true;
-}
-function useUndoRedo(config) {
-  const {
-    editor: providedEditor,
-    action,
-    hideWhenUnavailable = false,
-    onExecuted
-  } = config;
-  const { editor } = useTiptapEditor(providedEditor);
-  const [isVisible, setIsVisible] = (0, import_react20.useState)(true);
-  const canExecute = canExecuteUndoRedoAction(editor, action);
-  (0, import_react20.useEffect)(() => {
-    if (!editor) return;
-    const handleUpdate = () => {
-      setIsVisible(shouldShowButton6({ editor, hideWhenUnavailable, action }));
-    };
-    handleUpdate();
-    editor.on("transaction", handleUpdate);
-    return () => {
-      editor.off("transaction", handleUpdate);
-    };
-  }, [editor, hideWhenUnavailable, action]);
-  const handleAction = (0, import_react20.useCallback)(() => {
-    if (!editor) return false;
-    const success = executeUndoRedoAction(editor, action);
-    if (success) {
-      onExecuted == null ? void 0 : onExecuted();
-    }
-    return success;
-  }, [editor, action, onExecuted]);
-  return {
-    isVisible,
-    handleAction,
-    canExecute,
-    label: historyActionLabels[action],
-    shortcutKeys: UNDO_REDO_SHORTCUT_KEYS[action],
-    Icon: historyIcons[action]
-  };
-}
-
-// src/ui/undo-redo-button/undo-redo-button.tsx
-var import_jsx_runtime13 = require("react/jsx-runtime");
-var UndoRedoButton = ({
-  editor: providedEditor,
-  action,
-  text,
-  hideWhenUnavailable = false,
-  onExecuted,
-  showShortcut = false,
-  onClick,
-  children,
-  ...buttonProps
-}) => {
-  const { editor } = useTiptapEditor(providedEditor);
-  const { isVisible, handleAction, label, canExecute, Icon, shortcutKeys } = useUndoRedo({
-    editor,
-    action,
-    hideWhenUnavailable,
-    onExecuted
-  });
-  const handleClick = (0, import_react21.useCallback)(
-    (event) => {
-      onClick == null ? void 0 : onClick(event);
-      if (event.defaultPrevented) return;
-      handleAction();
-    },
-    [handleAction, onClick]
-  );
-  if (!isVisible) {
-    return null;
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-    import_toolbar8.ToolbarButton,
-    {
-      type: "button",
-      variant: "ghost",
-      color: "default",
-      disabled: !canExecute,
-      "data-disabled": !canExecute,
-      tabIndex: -1,
-      "aria-label": label,
-      title: label,
-      shortcutKeys,
-      onClick: handleClick,
-      isIconOnly: true,
-      ...buttonProps,
-      children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Icon, {})
-    }
-  );
-};
-
-// src/presets/basic/editor-header.tsx
-var import_jsx_runtime14 = 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 windowSize = useWindowSize();
-  const { styles } = useEditorUIContext();
-  const toolbarRef = (0, import_react22.useRef)(null);
-  const bodyRect = useCursorVisibility({
-    editor,
-    overlayHeight: (_b = (_a = toolbarRef.current) == null ? void 0 : _a.getBoundingClientRect().height) != null ? _b : 0
-  });
-  if (!(editor == null ? void 0 : editor.isEditable)) {
-    return null;
-  }
-  const ToolbarContent = variant === "comment" ? CommentToolbarContent : variant === "field" ? FieldToolbarContent : MainToolbarContent;
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: styles.toolbarContainer(), "data-slot": "editor-toolbar", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-    import_toolbar9.Toolbar,
-    {
-      sticky: true,
-      radius: "none",
-      border: "none",
-      style: isMobile ? {
-        bottom: `calc(100% - ${windowSize.height - bodyRect.y}px)`
-      } : {},
-      className: styles.toolbar(),
-      children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ToolbarContent, {})
-    }
-  ) });
-};
-var MainToolbarContent = () => /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
-  /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_toolbar9.ToolbarGroup, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(UndoRedoButton, { action: "undo" }),
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(UndoRedoButton, { action: "redo" })
-  ] }),
-  /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_toolbar9.ToolbarSeparator, {}),
-  /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_toolbar9.ToolbarGroup, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(HeadingDropdownMenu, { levels: [1, 2, 3, 4] }),
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ListDropdownMenu, { types: ["bulletList", "orderedList", "taskList"] }),
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(BlockquoteButton, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(CodeBlockButton, {})
-  ] }),
-  /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_toolbar9.ToolbarSeparator, {}),
-  /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_toolbar9.ToolbarGroup, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(MarkButton, { type: "bold" }),
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(MarkButton, { type: "italic" }),
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(MarkButton, { type: "strike" }),
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(MarkButton, { type: "code" }),
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(MarkButton, { type: "underline" }),
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ColorHighlightPopover, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(LinkPopover, {})
-  ] }),
-  /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_toolbar9.ToolbarSeparator, {}),
-  /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_toolbar9.ToolbarGroup, { children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(TableButton, {}) }),
-  /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(MoreOptions, { hideWhenUnavailable: true })
-] });
-var CommentToolbarContent = () => /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
-  /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_toolbar9.ToolbarGroup, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(MarkButton, { type: "bold" }),
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(MarkButton, { type: "italic" }),
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(MarkButton, { type: "strike" }),
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(MarkButton, { type: "code" })
-  ] }),
-  /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_toolbar9.ToolbarSeparator, {}),
-  /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_toolbar9.ToolbarGroup, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(LinkPopover, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ListDropdownMenu, { types: ["bulletList", "orderedList"] })
-  ] })
-] });
-var FieldToolbarContent = () => /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_toolbar9.ToolbarGroup, { children: [
-  /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(MarkButton, { type: "bold" }),
-  /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(MarkButton, { type: "italic" }),
-  /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(MarkButton, { type: "strike" }),
-  /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(LinkPopover, {})
-] });
-function MoreOptions({
-  editor: providedEditor,
-  hideWhenUnavailable = false,
-  ...props
-}) {
-  const { editor } = useTiptapEditor(providedEditor);
-  const [show, setShow] = (0, import_react22.useState)(false);
-  (0, import_react22.useEffect)(() => {
-    if (!editor) return;
-    const handleSelectionUpdate = () => {
-      setShow(
-        shouldShowMoreOptions({
-          editor,
-          hideWhenUnavailable
-        })
-      );
-    };
-    handleSelectionUpdate();
-    editor.on("selectionUpdate", handleSelectionUpdate);
-    return () => {
-      editor.off("selectionUpdate", handleSelectionUpdate);
-    };
-  }, [editor, hideWhenUnavailable]);
-  if (!show || !editor || !editor.isEditable) {
-    return null;
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_toolbar9.ToolbarSeparator, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_toolbar9.ToolbarGroup, { children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_popover3.Popover.Root, { spacing: "dense", width: "auto", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-        import_popover3.Popover.Trigger,
-        {
-          render: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-            import_toolbar9.ToolbarButton,
-            {
-              type: "button",
-              variant: "ghost",
-              color: "default",
-              tabIndex: -1,
-              size: "md",
-              "aria-label": "More options",
-              title: "More options",
-              isIconOnly: true,
-              ...props,
-              children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_icons16.MoreVerticalIcon, {})
-            }
-          )
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-        import_popover3.Popover.Content,
-        {
-          side: "top",
-          align: "end",
-          alignOffset: 4,
-          sideOffset: 4,
-          children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_toolbar9.Toolbar, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_toolbar9.ToolbarGroup, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(MarkButton, { type: "superscript" }),
-              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(MarkButton, { type: "subscript" })
-            ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_toolbar9.ToolbarSeparator, {}),
-            /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_toolbar9.ToolbarGroup, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(TextAlignButton, { align: "left" }),
-              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(TextAlignButton, { align: "center" }),
-              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(TextAlignButton, { align: "right" }),
-              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(TextAlignButton, { align: "justify" })
-            ] })
-          ] })
-        }
-      )
-    ] }) })
-  ] });
-}
-function canMoreOptions(editor) {
-  if (!editor) {
-    return false;
-  }
-  const canTextAlignAny = ["left", "center", "right", "justify"].some(
-    (align) => canSetTextAlign(editor, align)
-  );
-  const canMarkAny = ["superscript", "subscript"].some(
-    (type) => canToggleMark(editor, type)
-  );
-  return canMarkAny || canTextAlignAny;
-}
-function shouldShowMoreOptions(params) {
-  const { editor, hideWhenUnavailable } = params;
-  if (!editor) {
-    return false;
-  }
-  if (hideWhenUnavailable && !editor.isActive("code")) {
-    return canMoreOptions(editor);
-  }
-  return Boolean(editor == null ? void 0 : editor.isEditable);
-}
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  EditorHeader,
-  MoreOptions
-});