@kopexa/tiptap 17.11.4 → 17.12.0

package/dist/index.mjs

@@ -4435,499 +4435,26 @@ function useUiEditorState(editor) {
 }
 
 // src/ui/bubble-menu/index.tsx
-import { Toolbar, ToolbarGroup, ToolbarSeparator } from "@kopexa/toolbar";
+import { Toolbar, ToolbarGroup, ToolbarSeparator as ToolbarSeparator2 } from "@kopexa/toolbar";
 import { BubbleMenu as TiptapBubbleMenu } from "@tiptap/react/menus";
 
-// src/ui/link-popover/link-popover.tsx
-import { IconButton as IconButton6 } from "@kopexa/button";
+// src/ui/color-highlight-button/color-highlight-button.tsx
 import { useTiptapEditor as useTiptapEditor3 } from "@kopexa/editor-utils";
-import {
-  CheckIcon,
-  EditIcon as EditIcon2,
-  ExternalLinkIcon,
-  LinkIcon as LinkIcon2,
-  TrashIcon as TrashIcon3
-} from "@kopexa/icons";
-import { Input as Input3 } from "@kopexa/input";
-import { Popover } from "@kopexa/popover";
+import { colorHighlightButton } from "@kopexa/theme";
 import { ToolbarButton } from "@kopexa/toolbar";
-import { useCallback as useCallback15, useEffect as useEffect16, useState as useState15 } from "react";
+import { useCallback as useCallback15, useMemo as useMemo13 } from "react";
 
-// src/ui/link-popover/use-link-popover.ts
-import { isMarkInSchema, useTiptapEditor as useTiptapEditor2 } from "@kopexa/editor-utils";
-import { LinkIcon } from "@kopexa/icons";
+// src/ui/color-highlight-button/use-color-highlight.ts
+import {
+  isMarkInSchema,
+  isNodeTypeSelected,
+  useTiptapEditor as useTiptapEditor2
+} from "@kopexa/editor-utils";
+import { HighlighterIcon } from "@kopexa/icons";
+import { useIsMobile } from "@kopexa/use-is-mobile";
 import * as React7 from "react";
-
-// src/utils/index.ts
-var MAX_FILE_SIZE = 5 * 1024 * 1024;
-var handleImageUpload = async (file, onProgress, abortSignal) => {
-  if (!file) {
-    throw new Error("No file provided");
-  }
-  if (file.size > MAX_FILE_SIZE) {
-    throw new Error(
-      `File size exceeds maximum allowed (${MAX_FILE_SIZE / (1024 * 1024)}MB)`
-    );
-  }
-  for (let progress = 0; progress <= 100; progress += 10) {
-    if (abortSignal == null ? void 0 : abortSignal.aborted) {
-      throw new Error("Upload cancelled");
-    }
-    await new Promise((resolve) => setTimeout(resolve, 500));
-    onProgress == null ? void 0 : onProgress({ progress });
-  }
-  return "/images/placeholder-image.png";
-};
-var convertFileToBase64 = (file, abortSignal) => {
-  if (!file) {
-    return Promise.reject(new Error("No file provided"));
-  }
-  return new Promise((resolve, reject) => {
-    const reader = new FileReader();
-    const abortHandler = () => {
-      reader.abort();
-      reject(new Error("Upload cancelled"));
-    };
-    if (abortSignal) {
-      abortSignal.addEventListener("abort", abortHandler);
-    }
-    reader.onloadend = () => {
-      if (abortSignal) {
-        abortSignal.removeEventListener("abort", abortHandler);
-      }
-      if (typeof reader.result === "string") {
-        resolve(reader.result);
-      } else {
-        reject(new Error("Failed to convert File to base64"));
-      }
-    };
-    reader.onerror = (error) => reject(new Error(`File reading error: ${error}`));
-    reader.readAsDataURL(file);
-  });
-};
-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 = 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] = React7.useState(null);
-  React7.useEffect(() => {
-    if (!editor) return;
-    const { href } = editor.getAttributes("link");
-    if (isLinkActive(editor) && url === null) {
-      setUrl(href || "");
-    }
-  }, [editor, url]);
-  React7.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 = React7.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 = React7.useCallback(() => {
-    if (!editor) return;
-    editor.chain().focus().extendMarkRange("link").unsetLink().setMeta("preventAutolink", true).run();
-    setUrl("");
-  }, [editor]);
-  const openLink = React7.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] = React7.useState(false);
-  React7.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 } = useTiptapEditor2(providedEditor);
-  const { isVisible, canSet, isActive } = useLinkState({
-    editor,
-    hideWhenUnavailable
-  });
-  const linkHandler = useLinkHandler({
-    editor,
-    onSetLink
-  });
-  return {
-    isVisible,
-    canSet,
-    isActive,
-    label: "Link",
-    Icon: LinkIcon,
-    ...linkHandler
-  };
-}
-
-// src/ui/link-popover/link-popover.tsx
-import { jsx as jsx16, jsxs as jsxs12 } from "react/jsx-runtime";
-var LinkButton = ({ className, children, ...props }) => {
-  return /* @__PURE__ */ jsx16(
-    ToolbarButton,
-    {
-      type: "button",
-      className,
-      variant: "ghost",
-      color: "default",
-      tabIndex: -1,
-      "aria-label": "Link",
-      title: "Link",
-      isIconOnly: !children,
-      ...props,
-      children: children || /* @__PURE__ */ jsx16(LinkIcon2, {})
-    }
-  );
-};
-var LinkMain = ({
-  url,
-  setUrl,
-  setLink,
-  removeLink,
-  openLink,
-  isActive,
-  onSave
-}) => {
-  const [isEditing, setIsEditing] = useState15(!isActive || !url);
-  useEffect16(() => {
-    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__ */ jsxs12("div", { className: "flex items-center gap-1 min-w-[280px]", children: [
-      /* @__PURE__ */ jsx16(
-        Input3,
-        {
-          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__ */ jsx16(
-        IconButton6,
-        {
-          type: "button",
-          size: "sm",
-          variant: "ghost",
-          onClick: handleSave,
-          "aria-label": "Save link",
-          disabled: !url,
-          children: /* @__PURE__ */ jsx16(CheckIcon, { className: "size-4" })
-        }
-      )
-    ] });
-  }
-  return /* @__PURE__ */ jsxs12("div", { className: "flex items-center gap-1 min-w-[280px]", children: [
-    /* @__PURE__ */ jsx16(
-      "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__ */ jsxs12("div", { className: "flex items-center gap-0.5 border-l pl-1 ml-1", children: [
-      /* @__PURE__ */ jsx16(
-        IconButton6,
-        {
-          type: "button",
-          size: "sm",
-          variant: "ghost",
-          onClick: openLink,
-          "aria-label": "Open link in new tab",
-          children: /* @__PURE__ */ jsx16(ExternalLinkIcon, { className: "size-4" })
-        }
-      ),
-      /* @__PURE__ */ jsx16(
-        IconButton6,
-        {
-          type: "button",
-          size: "sm",
-          variant: "ghost",
-          onClick: handleEdit,
-          "aria-label": "Edit link",
-          children: /* @__PURE__ */ jsx16(EditIcon2, { className: "size-4" })
-        }
-      ),
-      /* @__PURE__ */ jsx16(
-        IconButton6,
-        {
-          type: "button",
-          size: "sm",
-          variant: "ghost",
-          onClick: removeLink,
-          "aria-label": "Remove link",
-          children: /* @__PURE__ */ jsx16(TrashIcon3, { className: "size-4" })
-        }
-      )
-    ] })
-  ] });
-};
-function LinkPopover({
-  editor: providedEditor,
-  hideWhenUnavailable = false,
-  onSetLink,
-  onOpenChange,
-  autoOpenOnLinkActive = true,
-  onClick,
-  children,
-  ...buttonProps
-}) {
-  const { editor } = useTiptapEditor3(providedEditor);
-  const [isOpen, setIsOpen] = useState15(false);
-  const {
-    isVisible,
-    canSet,
-    isActive,
-    url,
-    setUrl,
-    setLink,
-    removeLink,
-    openLink,
-    label
-  } = useLinkPopover({
-    editor,
-    hideWhenUnavailable,
-    onSetLink
-  });
-  const handleOnOpenChange = useCallback15(
-    (nextIsOpen) => {
-      setIsOpen(nextIsOpen);
-      onOpenChange == null ? void 0 : onOpenChange(nextIsOpen);
-    },
-    [onOpenChange]
-  );
-  const handleSetLink = useCallback15(() => {
-    setLink();
-    setIsOpen(false);
-  }, [setLink]);
-  const handleClick = useCallback15(
-    (event) => {
-      onClick == null ? void 0 : onClick(event);
-      if (event.defaultPrevented) return;
-      setIsOpen(!isOpen);
-    },
-    [onClick, isOpen]
-  );
-  useEffect16(() => {
-    if (autoOpenOnLinkActive && isActive) {
-      setIsOpen(true);
-    }
-  }, [autoOpenOnLinkActive, isActive]);
-  if (!isVisible) {
-    return null;
-  }
-  return /* @__PURE__ */ jsxs12(
-    Popover.Root,
-    {
-      open: isOpen,
-      onOpenChange: handleOnOpenChange,
-      spacing: "dense",
-      children: [
-        /* @__PURE__ */ jsx16(
-          Popover.Trigger,
-          {
-            render: /* @__PURE__ */ jsx16(
-              LinkButton,
-              {
-                "data-disabled": !canSet,
-                disabled: !canSet,
-                "data-active-state": isActive ? "on" : "off",
-                "aria-label": label,
-                "aria-pressed": isActive,
-                onClick: handleClick,
-                ...buttonProps
-              }
-            )
-          }
-        ),
-        /* @__PURE__ */ jsx16(Popover.Content, { children: /* @__PURE__ */ jsx16(
-          LinkMain,
-          {
-            url,
-            setUrl,
-            setLink: handleSetLink,
-            removeLink,
-            openLink,
-            isActive,
-            onSave: () => setIsOpen(false)
-          }
-        ) })
-      ]
-    }
-  );
-}
-LinkButton.displayName = "LinkButton";
-
-// src/ui/mark-button/index.tsx
-import {
-  isMarkInSchema as isMarkInSchema2,
-  isNodeTypeSelected,
-  useTiptapEditor as useTiptapEditor4
-} from "@kopexa/editor-utils";
-import {
-  BoldIcon,
-  CodeIcon,
-  ItalicIcon,
-  StrikeIcon,
-  SubscriptIcon,
-  SuperscriptIcon,
-  UnderlineIcon
-} from "@kopexa/icons";
-import { ToolbarButton as ToolbarButton2 } from "@kopexa/toolbar";
-import { isNodeSelection as isNodeSelection2 } from "@tiptap/react";
-import { useCallback as useCallback16, useMemo as useMemo13 } from "react";
-import { useIntl as useIntl9 } from "react-intl";
+import { useHotkeys } from "react-hotkeys-hook";
+import { useIntl as useIntl9 } from "react-intl";
 
 // src/ui/messages.ts
 import { defineMessages as defineMessages7 } from "react-intl";
@@ -5345,545 +4872,593 @@ var messages7 = defineMessages7({
   }
 });
 
-// src/ui/mark-button/index.tsx
-import { jsx as jsx17 } from "react/jsx-runtime";
-var markIcons = {
-  bold: BoldIcon,
-  italic: ItalicIcon,
-  underline: UnderlineIcon,
-  strike: StrikeIcon,
-  code: CodeIcon,
-  superscript: SuperscriptIcon,
-  subscript: 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 (!isMarkInSchema2(type, editor) || 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 (isNodeSelection2(editor.state.selection) || !canToggleMark(editor, type)) {
-      return false;
-    }
-  }
-  return true;
-}
-var markMessages = {
-  bold: messages7.bold,
-  italic: messages7.italic,
-  underline: messages7.underline,
-  strike: messages7.strikethrough,
-  code: messages7.code,
-  superscript: messages7.superscript,
-  subscript: messages7.subscript
-};
-function getTranslatedMarkName(type, intl) {
-  return intl.formatMessage(markMessages[type]);
+// src/ui/color-highlight-button/use-color-highlight.ts
+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 useMarkState(editor, type, disabled = false) {
+function canColorHighlight(editor) {
+  if (!editor || !editor.isEditable) return false;
+  if (!isMarkInSchema("highlight", editor) || 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 shouldShowButton(props) {
+  const { editor, hideWhenUnavailable } = props;
+  if (!editor || !editor.isEditable) return false;
+  if (!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 intl = useIntl9();
-  const markInSchema = isMarkInSchema2(type, editor);
-  const isDisabled = isMarkButtonDisabled(editor, type, disabled);
-  const isActive = isMarkActive(editor, type);
-  const Icon = markIcons[type];
-  const shortcutKey = markShortcutKeys[type];
-  const formattedName = getTranslatedMarkName(type, intl);
+  const { editor } = useTiptapEditor2(providedEditor);
+  const isMobile = useIsMobile();
+  const [isVisible, setIsVisible] = React7.useState(true);
+  const canColorHighlightState = canColorHighlight(editor);
+  const isActive = isColorHighlightActive(editor, highlightColor);
+  React7.useEffect(() => {
+    if (!editor) return;
+    const handleSelectionUpdate = () => {
+      setIsVisible(shouldShowButton({ 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]);
+  useHotkeys(
+    COLOR_HIGHLIGHT_SHORTCUT_KEY,
+    (event) => {
+      event.preventDefault();
+      handleColorHighlight();
+    },
+    {
+      enabled: isVisible && canColorHighlightState,
+      enableOnContentEditable: !isMobile,
+      enableOnFormTags: true
+    }
+  );
   return {
-    markInSchema,
-    isDisabled,
+    isVisible,
     isActive,
-    Icon,
-    shortcutKey,
-    formattedName
+    handleColorHighlight,
+    handleRemoveHighlight,
+    canColorHighlight: canColorHighlightState,
+    label: label || intl.formatMessage(messages7.highlight_color),
+    shortcutKeys: COLOR_HIGHLIGHT_SHORTCUT_KEY,
+    Icon: HighlighterIcon
   };
 }
-var MarkButton = ({
+
+// src/ui/color-highlight-button/color-highlight-button.tsx
+import { Fragment as Fragment3, jsx as jsx16, jsxs as jsxs12 } from "react/jsx-runtime";
+var ColorHighlightButton = ({
   editor: providedEditor,
-  type,
+  highlightColor,
   text,
   hideWhenUnavailable = false,
-  className = "",
-  disabled,
+  onApplied,
+  showShortcut = false,
   onClick,
   children,
+  style,
+  className,
   ...buttonProps
 }) => {
-  const { editor } = useTiptapEditor4(providedEditor);
+  const { editor } = useTiptapEditor3(providedEditor);
   const {
-    markInSchema,
-    isDisabled,
+    isVisible,
+    canColorHighlight: canColorHighlight2,
     isActive,
-    Icon,
-    shortcutKey,
-    formattedName
-  } = useMarkState(editor, type, disabled);
-  const handleClick = useCallback16(
-    (e) => {
-      onClick == null ? void 0 : onClick(e);
-      if (!e.defaultPrevented && !isDisabled && editor) {
-        toggleMark(editor, type);
-      }
+    handleColorHighlight,
+    label,
+    shortcutKeys
+  } = useColorHighlight({
+    editor,
+    highlightColor,
+    label: text || `Toggle highlight (${highlightColor})`,
+    hideWhenUnavailable,
+    onApplied
+  });
+  const handleClick = useCallback15(
+    (event) => {
+      onClick == null ? void 0 : onClick(event);
+      if (event.defaultPrevented) return;
+      handleColorHighlight();
     },
-    [onClick, isDisabled, editor, type]
+    [handleColorHighlight, onClick]
   );
-  const show = useMemo13(() => {
-    return shouldShowMarkButton({
-      editor,
-      type,
-      hideWhenUnavailable,
-      markInSchema
-    });
-  }, [editor, type, hideWhenUnavailable, markInSchema]);
-  if (!show || !editor || !editor.isEditable) {
+  const buttonStyle = useMemo13(
+    () => ({
+      ...style,
+      "--highlight-color": highlightColor
+    }),
+    [highlightColor, style]
+  );
+  if (!isVisible) {
     return null;
   }
-  return /* @__PURE__ */ jsx17(
-    ToolbarButton2,
+  const styles = colorHighlightButton();
+  return /* @__PURE__ */ jsxs12(
+    ToolbarButton,
     {
       type: "button",
-      className: className.trim(),
-      disabled: isDisabled,
+      disabled: !canColorHighlight2,
+      "data-disabled": !canColorHighlight2,
       variant: "ghost",
       color: "default",
       "data-active-state": isActive ? "on" : "off",
-      "data-disabled": isDisabled,
       tabIndex: -1,
-      "aria-label": formattedName,
+      "aria-label": label,
+      shortcutKeys,
       "aria-pressed": isActive,
-      title: formattedName,
-      shortcutKeys: shortcutKey,
       onClick: handleClick,
+      style: buttonStyle,
+      className: styles.button({ className }),
       isIconOnly: true,
       ...buttonProps,
-      children: /* @__PURE__ */ jsx17(Icon, {})
+      children: [
+        /* @__PURE__ */ jsx16(
+          "span",
+          {
+            "data-active-state": isActive ? "on" : "off",
+            className: styles.mark()
+          }
+        ),
+        children || /* @__PURE__ */ jsxs12(Fragment3, { children: [
+          /* @__PURE__ */ jsx16(
+            "span",
+            {
+              style: { "--highlight-color": highlightColor }
+            }
+          ),
+          text
+        ] })
+      ]
     }
   );
 };
 
-// src/ui/bubble-menu/index.tsx
-import { jsx as jsx18, jsxs as jsxs13 } from "react/jsx-runtime";
-function BubbleMenu({ editor }) {
-  if (!editor) {
-    return null;
+// src/ui/color-highlight-popover/color-highlight-popover.tsx
+import { IconButton as IconButton6 } from "@kopexa/button";
+import { useTiptapEditor as useTiptapEditor4 } from "@kopexa/editor-utils";
+import { BanIcon, HighlighterIcon as HighlighterIcon2 } from "@kopexa/icons";
+import { Popover } from "@kopexa/popover";
+import { ToolbarSeparator } from "@kopexa/toolbar";
+import { useMemo as useMemo14, useRef as useRef9, useState as useState15 } from "react";
+import { jsx as jsx17, jsxs as jsxs13 } from "react/jsx-runtime";
+var ColorHighlightPopoverButton = ({
+  className,
+  children,
+  ...props
+}) => /* @__PURE__ */ jsx17(
+  IconButton6,
+  {
+    type: "button",
+    className,
+    variant: "ghost",
+    color: "default",
+    tabIndex: -1,
+    "aria-label": "Highlight text",
+    tooltip: "Highlight",
+    isIconOnly: !children,
+    ...props,
+    children: children != null ? children : /* @__PURE__ */ jsx17(HighlighterIcon2, {})
   }
-  return /* @__PURE__ */ jsx18(
-    TiptapBubbleMenu,
-    {
-      editor,
-      shouldShow: ({ editor: e, state, view }) => {
-        const { selection } = state;
-        const { empty } = selection;
-        if (!view.hasFocus()) return false;
-        if (empty) return false;
-        if (e.isActive("codeBlock")) return false;
-        if (e.isActive("link")) return false;
-        if (e.isActive("variable")) return false;
-        if (!e.isEditable) return false;
-        return true;
-      },
-      options: {
-        placement: "top",
-        offset: 8
-      },
-      className: "rounded-lg border bg-background shadow-md",
-      children: /* @__PURE__ */ jsxs13(Toolbar, { radius: "md", border: "none", className: "p-1", children: [
-        /* @__PURE__ */ jsxs13(ToolbarGroup, { children: [
-          /* @__PURE__ */ jsx18(MarkButton, { type: "bold" }),
-          /* @__PURE__ */ jsx18(MarkButton, { type: "italic" }),
-          /* @__PURE__ */ jsx18(MarkButton, { type: "strike" }),
-          /* @__PURE__ */ jsx18(MarkButton, { type: "code" })
-        ] }),
-        /* @__PURE__ */ jsx18(ToolbarSeparator, {}),
-        /* @__PURE__ */ jsx18(ToolbarGroup, { children: /* @__PURE__ */ jsx18(LinkPopover, { autoOpenOnLinkActive: 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 = useRef9(null);
+  const menuItems = useMemo14(
+    () => [...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__ */ jsxs13("div", { ref: containerRef, className: "flex gap-1 items-center", children: [
+    /* @__PURE__ */ jsx17(
+      "div",
+      {
+        className: "flex items-center gap-1 outline-none",
+        "data-orientation": "horizontal",
+        children: colors.map((color, index) => /* @__PURE__ */ jsx17(
+          ColorHighlightButton,
+          {
+            editor,
+            highlightColor: color.value,
+            "aria-label": `${color.label} highlight color`,
+            tabIndex: index === selectedIndex ? 0 : -1,
+            "data-highlighted": selectedIndex === index
+          },
+          color.value
+        ))
+      }
+    ),
+    /* @__PURE__ */ jsx17(ToolbarSeparator, { orientation: "vertical" }),
+    /* @__PURE__ */ jsx17("div", { className: "tiptap-button-group", children: /* @__PURE__ */ jsx17(
+      IconButton6,
+      {
+        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__ */ jsx17(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 } = useTiptapEditor4(providedEditor);
+  const [isOpen, setIsOpen] = useState15(false);
+  const { isVisible, canColorHighlight: canColorHighlight2, isActive, label } = useColorHighlight({
+    editor,
+    hideWhenUnavailable,
+    onApplied
+  });
+  if (!isVisible) return null;
+  return /* @__PURE__ */ jsxs13(Popover.Root, { open: isOpen, onOpenChange: setIsOpen, spacing: "dense", children: [
+    /* @__PURE__ */ jsx17(
+      Popover.Trigger,
+      {
+        render: /* @__PURE__ */ jsx17(
+          ColorHighlightPopoverButton,
+          {
+            disabled: !canColorHighlight2,
+            "data-disabled": !canColorHighlight2,
+            "data-active-state": isActive ? "on" : "off",
+            "aria-pressed": isActive,
+            "aria-label": label,
+            title: label,
+            ...props
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx17(Popover.Content, { "aria-label": "Highlight colors", children: /* @__PURE__ */ jsx17(ColorHighlightPopoverContent, { editor, colors }) })
+  ] });
 }
 
-// src/ui/copy-anchor-link-button/use-scroll-to-hash.ts
-import { getEditorExtension, useTiptapEditor as useTiptapEditor5 } from "@kopexa/editor-utils";
-import * as React9 from "react";
+// src/ui/link-popover/link-popover.tsx
+import { IconButton as IconButton7 } from "@kopexa/button";
+import { useTiptapEditor as useTiptapEditor6 } from "@kopexa/editor-utils";
+import {
+  CheckIcon,
+  EditIcon as EditIcon2,
+  ExternalLinkIcon,
+  LinkIcon as LinkIcon2,
+  TrashIcon as TrashIcon3
+} from "@kopexa/icons";
+import { Input as Input3 } from "@kopexa/input";
+import { Popover as Popover2 } from "@kopexa/popover";
+import { ToolbarButton as ToolbarButton2 } from "@kopexa/toolbar";
+import { useCallback as useCallback17, useEffect as useEffect17, useState as useState17 } from "react";
 
-// src/hooks/use-floating-toolbar-visibility.ts
-import { NodeSelection } from "@tiptap/pm/state";
-import { isNodeSelection as isNodeSelection3 } from "@tiptap/react";
+// src/ui/link-popover/use-link-popover.ts
+import { isMarkInSchema as isMarkInSchema2, useTiptapEditor as useTiptapEditor5 } from "@kopexa/editor-utils";
+import { LinkIcon } from "@kopexa/icons";
 import * as React8 from "react";
-var HIDE_FLOATING_META = "hideFloatingToolbar";
-var selectNodeAndHideFloating = (editor, pos) => {
-  if (!editor) return;
-  const { state, view } = editor;
-  view.dispatch(
-    state.tr.setSelection(NodeSelection.create(state.doc, pos)).setMeta(HIDE_FLOATING_META, true)
-  );
-};
 
-// src/ui/copy-anchor-link-button/use-scroll-to-hash.ts
-function useScrollToHash(config = {}) {
-  const {
-    editor: providedEditor,
-    onTargetFound = () => {
-    },
-    onTargetNotFound = () => {
-    }
-  } = config;
-  const { editor } = useTiptapEditor5(providedEditor);
-  const scrollToNode = React9.useCallback(
-    (id) => {
-      var _a, _b, _c;
-      if (!editor) return false;
-      const attributeName = (_c = (_b = (_a = 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;
-        if (((_a2 = node.attrs) == null ? void 0 : _a2[attributeName]) === id) {
-          position = pos;
-          return false;
-        }
-        return true;
-      });
-      if (position === null) return false;
-      selectNodeAndHideFloating(editor, position);
-      setTimeout(() => {
-        let dom = null;
-        if (typeof position === "number") {
-          dom = editor.view.nodeDOM(position);
-        }
-        if (dom) {
-          dom.scrollIntoView({ behavior: "smooth", block: "center" });
-        }
-      }, 0);
-      return true;
-    },
-    [editor]
-  );
-  const handleScroll = React9.useCallback(
-    (delay = 0) => {
-      var _a;
-      const hash = (_a = window.location.hash) == null ? void 0 : _a.substring(1);
-      if (!hash) return;
-      setTimeout(() => {
-        if (scrollToNode(hash)) {
-          onTargetFound(hash);
-        } else {
-          onTargetNotFound(hash);
-        }
-      }, delay);
-    },
-    [scrollToNode, onTargetFound, onTargetNotFound]
-  );
-  React9.useEffect(() => {
-    var _a, _b;
-    if (!editor) return;
-    const provider = (_b = (_a = editor.extensionManager.extensions.find(
-      (ext) => ext.name === "collaborationCaret"
-    )) == null ? void 0 : _a.options) == null ? void 0 : _b.provider;
-    if (provider == null ? void 0 : provider.on) {
-      const syncHandler = () => handleScroll(500);
-      provider.on("synced", syncHandler);
-      return () => {
-        var _a2;
-        (_a2 = provider.off) == null ? void 0 : _a2.call(provider, "synced", syncHandler);
-      };
-    } else {
-      handleScroll(500);
+// src/utils/index.ts
+var MAX_FILE_SIZE = 5 * 1024 * 1024;
+var handleImageUpload = async (file, onProgress, abortSignal) => {
+  if (!file) {
+    throw new Error("No file provided");
+  }
+  if (file.size > MAX_FILE_SIZE) {
+    throw new Error(
+      `File size exceeds maximum allowed (${MAX_FILE_SIZE / (1024 * 1024)}MB)`
+    );
+  }
+  for (let progress = 0; progress <= 100; progress += 10) {
+    if (abortSignal == null ? void 0 : abortSignal.aborted) {
+      throw new Error("Upload cancelled");
     }
-  }, [editor, handleScroll]);
-  React9.useEffect(() => {
-    const immediateScroll = () => handleScroll();
-    const delayedScroll = () => handleScroll(500);
-    window.addEventListener("hashchange", immediateScroll);
-    window.addEventListener("pageshow", delayedScroll);
-    window.addEventListener("popstate", immediateScroll);
-    return () => {
-      window.removeEventListener("hashchange", immediateScroll);
-      window.removeEventListener("pageshow", delayedScroll);
-      window.removeEventListener("popstate", immediateScroll);
-    };
-  }, [handleScroll]);
-  return { scrollToHash: scrollToNode };
-}
-
-// src/ui/link-bubble/index.tsx
-import { IconButton as IconButton7 } from "@kopexa/button";
-import { EditIcon as EditIcon3, ExternalLinkIcon as ExternalLinkIcon2, TrashIcon as TrashIcon4 } from "@kopexa/icons";
-import { Input as Input4 } from "@kopexa/input";
-import { BubbleMenu as TiptapBubbleMenu2 } from "@tiptap/react/menus";
-import { useCallback as useCallback18, useEffect as useEffect19, useState as useState17 } from "react";
-import { useIntl as useIntl10 } from "react-intl";
-import { Fragment as Fragment3, jsx as jsx19, jsxs as jsxs14 } from "react/jsx-runtime";
-function LinkBubble({ editor }) {
-  const intl = useIntl10();
-  const [isEditing, setIsEditing] = useState17(false);
-  const [url, setUrl] = useState17("");
-  const getCurrentUrl = useCallback18(() => {
-    if (!editor) return "";
-    const attrs = editor.getAttributes("link");
-    return attrs.href || "";
-  }, [editor]);
-  useEffect19(() => {
-    const isLinkActive2 = editor == null ? void 0 : editor.isActive("link");
-    if (isLinkActive2) {
-      setUrl(getCurrentUrl());
-      setIsEditing(false);
-    }
-  }, [editor, getCurrentUrl]);
-  const handleOpenLink = useCallback18(() => {
-    const href = getCurrentUrl();
-    if (href) {
-      window.open(href, "_blank", "noopener,noreferrer");
-    }
-  }, [getCurrentUrl]);
-  const handleRemoveLink = useCallback18(() => {
-    editor == null ? void 0 : editor.chain().focus().unsetLink().run();
-  }, [editor]);
-  const handleEdit = useCallback18(() => {
-    setUrl(getCurrentUrl());
-    setIsEditing(true);
-  }, [getCurrentUrl]);
-  const handleSave = useCallback18(() => {
-    if (url) {
-      editor == null ? void 0 : editor.chain().focus().extendMarkRange("link").setLink({ href: url }).run();
-    } else {
-      editor == null ? void 0 : editor.chain().focus().unsetLink().run();
+    await new Promise((resolve) => setTimeout(resolve, 500));
+    onProgress == null ? void 0 : onProgress({ progress });
+  }
+  return "/images/placeholder-image.png";
+};
+var convertFileToBase64 = (file, abortSignal) => {
+  if (!file) {
+    return Promise.reject(new Error("No file provided"));
+  }
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    const abortHandler = () => {
+      reader.abort();
+      reject(new Error("Upload cancelled"));
+    };
+    if (abortSignal) {
+      abortSignal.addEventListener("abort", abortHandler);
     }
-    setIsEditing(false);
-  }, [editor, url]);
-  const handleKeyDown = useCallback18(
-    (e) => {
-      if (e.key === "Enter") {
-        e.preventDefault();
-        handleSave();
-      } else if (e.key === "Escape") {
-        e.preventDefault();
-        setIsEditing(false);
-        setUrl(getCurrentUrl());
+    reader.onloadend = () => {
+      if (abortSignal) {
+        abortSignal.removeEventListener("abort", abortHandler);
+      }
+      if (typeof reader.result === "string") {
+        resolve(reader.result);
+      } else {
+        reject(new Error("Failed to convert File to base64"));
+      }
+    };
+    reader.onerror = (error) => reject(new Error(`File reading error: ${error}`));
+    reader.readAsDataURL(file);
+  });
+};
+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);
       }
-    },
-    [handleSave, getCurrentUrl]
-  );
-  if (!editor) {
-    return null;
-  }
-  return /* @__PURE__ */ jsx19(
-    TiptapBubbleMenu2,
-    {
-      editor,
-      pluginKey: "linkBubbleMenu",
-      shouldShow: ({ editor: e, view }) => {
-        if (!view.hasFocus()) return false;
-        return e.isActive("link") && e.isEditable;
-      },
-      options: {
-        placement: "bottom-start",
-        offset: 8
-      },
-      className: "rounded-lg border bg-background shadow-md",
-      children: /* @__PURE__ */ jsx19("div", { className: "flex items-center gap-1 p-1.5 min-w-[280px]", children: isEditing ? /* @__PURE__ */ jsxs14(Fragment3, { children: [
-        /* @__PURE__ */ jsx19(
-          Input4,
-          {
-            type: "url",
-            value: url,
-            onChange: (e) => setUrl(e.target.value),
-            onKeyDown: handleKeyDown,
-            placeholder: intl.formatMessage(messages7.link_placeholder),
-            className: "flex-1 h-8 text-sm",
-            autoFocus: true
-          }
-        ),
-        /* @__PURE__ */ jsx19(
-          IconButton7,
-          {
-            type: "button",
-            size: "sm",
-            variant: "ghost",
-            onClick: handleSave,
-            "aria-label": intl.formatMessage(messages7.link_save),
-            children: /* @__PURE__ */ jsx19(EditIcon3, { className: "size-4" })
-          }
-        )
-      ] }) : /* @__PURE__ */ jsxs14(Fragment3, { children: [
-        /* @__PURE__ */ jsx19(
-          "a",
-          {
-            href: getCurrentUrl(),
-            target: "_blank",
-            rel: "noopener noreferrer",
-            className: "flex-1 text-sm text-primary truncate max-w-[200px] hover:underline px-2",
-            onClick: (e) => {
-              e.preventDefault();
-              handleOpenLink();
-            },
-            children: getCurrentUrl()
-          }
-        ),
-        /* @__PURE__ */ jsxs14("div", { className: "flex items-center gap-0.5 border-l pl-1 ml-1", children: [
-          /* @__PURE__ */ jsx19(
-            IconButton7,
-            {
-              type: "button",
-              size: "sm",
-              variant: "ghost",
-              onClick: handleOpenLink,
-              "aria-label": intl.formatMessage(messages7.link_open),
-              children: /* @__PURE__ */ jsx19(ExternalLinkIcon2, { className: "size-4" })
-            }
-          ),
-          /* @__PURE__ */ jsx19(
-            IconButton7,
-            {
-              type: "button",
-              size: "sm",
-              variant: "ghost",
-              onClick: handleEdit,
-              "aria-label": intl.formatMessage(messages7.link_edit),
-              children: /* @__PURE__ */ jsx19(EditIcon3, { className: "size-4" })
-            }
-          ),
-          /* @__PURE__ */ jsx19(
-            IconButton7,
-            {
-              type: "button",
-              size: "sm",
-              variant: "ghost",
-              onClick: handleRemoveLink,
-              "aria-label": intl.formatMessage(messages7.link_remove),
-              children: /* @__PURE__ */ jsx19(TrashIcon4, { className: "size-4" })
-            }
-          )
-        ] })
-      ] }) })
     }
+  }
+  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"
+    )
   );
 }
-
-// src/ui/slash-dropdown-menu/slash-dropdown-menu.tsx
-import { Button as Button6 } from "@kopexa/button";
-import { getElementOverflowPosition as getElementOverflowPosition2 } from "@kopexa/editor-utils";
-import { Separator } from "@kopexa/separator";
-import { slashDropdownMenu as slashDropdownMenu2 } from "@kopexa/theme";
-import * as React11 from "react";
-
-// src/ui/slash-dropdown-menu/use-slash-dropdown-menu.ts
-import {
-  findSelectionPosition,
-  hasContentAbove,
-  isExtensionAvailable,
-  isNodeInSchema as isNodeInSchema2
-} from "@kopexa/editor-utils";
-import {
-  AiSparklesIcon,
-  AlertIcon as AlertIcon2,
-  BlockquoteIcon,
-  CodeBlockIcon,
-  ControlsIcon,
-  HeadingOneIcon,
-  HeadingThreeIcon,
-  HeadingTwoIcon,
-  ImageIcon as ImageIcon2,
-  InfoIcon as InfoIcon2,
-  ListIcon as ListIcon2,
-  ListOrderedIcon,
-  ListTodoIcon,
-  MinusIcon,
-  TableIcon as TableIcon2,
-  TableOfContentsIcon,
-  TypeIcon
-} from "@kopexa/icons";
-import * as React10 from "react";
-import { useIntl as useIntl12 } from "react-intl";
-
-// src/ui/table-button/use-table.ts
-import {
-  isNodeInSchema,
-  isNodeTypeSelected as isNodeTypeSelected2,
-  useTiptapEditor as useTiptapEditor6
-} from "@kopexa/editor-utils";
-import { TableIcon } from "@kopexa/icons";
-import { isNodeSelection as isNodeSelection4 } from "@tiptap/react";
-import { useCallback as useCallback19, useEffect as useEffect20, useState as useState18 } from "react";
-import { useIntl as useIntl11 } from "react-intl";
-function canToggle(editor) {
-  if (!editor || !editor.isEditable) return false;
-  if (!isNodeInSchema("table", editor) || isNodeTypeSelected2(editor, ["image"])) {
-    return false;
-  }
+function sanitizeUrl(inputUrl, baseUrl, protocols) {
   try {
-    return editor.can().insertTable({ rows: 3, cols: 3, withHeaderRow: true });
+    const url = new URL(inputUrl, baseUrl);
+    if (isAllowedUri(url.href, protocols)) {
+      return url.href;
+    }
   } catch {
-    return false;
   }
+  return "#";
 }
-function toggleTable(editor, config) {
-  var _a;
+
+// src/ui/link-popover/use-link-popover.ts
+function canSetLink(editor) {
   if (!editor || !editor.isEditable) return false;
-  if (!canToggle(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;
-  }
+  return editor.can().setMark("link");
 }
-function shouldShowButton(props) {
-  const { editor, hideWhenUnavailable } = props;
+function isLinkActive(editor) {
   if (!editor || !editor.isEditable) return false;
-  if (!isNodeInSchema("table", editor)) return false;
-  if (hideWhenUnavailable) {
-    if (isNodeSelection4(editor.state.selection) || !canToggle) {
-      return false;
-    }
+  return editor.isActive("link");
+}
+function shouldShowLinkButton(props) {
+  const { editor, hideWhenUnavailable } = props;
+  const linkInSchema = isMarkInSchema2("link", editor);
+  if (!linkInSchema || !editor) {
+    return false;
+  }
+  if (hideWhenUnavailable && !editor.isActive("code")) {
+    return canSetLink(editor);
   }
   return true;
 }
-function useTableBlock(config) {
-  const {
-    editor: providedEditor,
-    hideWhenUnavailable = false,
-    onToggled
-  } = config || {};
-  const intl = useIntl11();
-  const { editor } = useTiptapEditor6(providedEditor);
-  const [isVisible, setIsVisible] = useState18(true);
-  const canToggleState = canToggle(editor);
-  const isActive = (editor == null ? void 0 : editor.isActive("table")) || false;
-  useEffect20(() => {
+function useLinkHandler(props) {
+  const { editor, onSetLink } = props;
+  const [url, setUrl] = React8.useState(null);
+  React8.useEffect(() => {
+    if (!editor) return;
+    const { href } = editor.getAttributes("link");
+    if (isLinkActive(editor) && url === null) {
+      setUrl(href || "");
+    }
+  }, [editor, url]);
+  React8.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 = React8.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 = React8.useCallback(() => {
+    if (!editor) return;
+    editor.chain().focus().extendMarkRange("link").unsetLink().setMeta("preventAutolink", true).run();
+    setUrl("");
+  }, [editor]);
+  const openLink = React8.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] = React8.useState(false);
+  React8.useEffect(() => {
     if (!editor) return;
     const handleSelectionUpdate = () => {
-      setIsVisible(shouldShowButton({ editor, hideWhenUnavailable }));
+      setIsVisible(
+        shouldShowLinkButton({
+          editor,
+          hideWhenUnavailable
+        })
+      );
     };
     handleSelectionUpdate();
     editor.on("selectionUpdate", handleSelectionUpdate);
@@ -5891,1078 +5466,1526 @@ function useTableBlock(config) {
       editor.off("selectionUpdate", handleSelectionUpdate);
     };
   }, [editor, hideWhenUnavailable]);
-  const handleToggle = useCallback19(() => {
-    if (!editor) return false;
-    const success = toggleTable(editor);
-    if (success) {
-      onToggled == null ? void 0 : onToggled();
-    }
-    return success;
-  }, [editor, onToggled]);
   return {
     isVisible,
+    canSet,
+    isActive
+  };
+}
+function useLinkPopover(config) {
+  const {
+    editor: providedEditor,
+    hideWhenUnavailable = false,
+    onSetLink
+  } = config || {};
+  const { editor } = useTiptapEditor5(providedEditor);
+  const { isVisible, canSet, isActive } = useLinkState({
+    editor,
+    hideWhenUnavailable
+  });
+  const linkHandler = useLinkHandler({
+    editor,
+    onSetLink
+  });
+  return {
+    isVisible,
+    canSet,
     isActive,
-    handleToggle,
-    canToggle: canToggleState,
-    label: intl.formatMessage(messages7.table_insert),
-    // shortcutKeys: CODE_BLOCK_SHORTCUT_KEY,
-    Icon: TableIcon
+    label: "Link",
+    Icon: LinkIcon,
+    ...linkHandler
   };
 }
 
-// src/ui/slash-dropdown-menu/use-slash-dropdown-menu.ts
-function createSlashMenuTexts(formatMessage) {
-  return {
-    // AI
-    continue_writing: {
-      title: formatMessage(messages7.slash_continue_writing),
-      subtext: formatMessage(messages7.slash_continue_writing_subtext),
-      keywords: ["continue", "write", "continue writing", "ai"],
-      badge: AiSparklesIcon,
-      group: formatMessage(messages7.group_ai)
-    },
-    ai_ask_button: {
-      title: formatMessage(messages7.slash_ask_ai),
-      subtext: formatMessage(messages7.slash_ask_ai_subtext),
-      keywords: ["ai", "ask", "generate"],
-      badge: AiSparklesIcon,
-      group: formatMessage(messages7.group_ai)
-    },
-    // Style
-    text: {
-      title: formatMessage(messages7.slash_text),
-      subtext: formatMessage(messages7.slash_text_subtext),
-      keywords: ["p", "paragraph", "text"],
-      badge: TypeIcon,
-      group: formatMessage(messages7.group_style)
-    },
-    heading_1: {
-      title: formatMessage(messages7.slash_heading_1),
-      subtext: formatMessage(messages7.slash_heading_1_subtext),
-      keywords: ["h", "heading1", "h1"],
-      badge: HeadingOneIcon,
-      group: formatMessage(messages7.group_style)
-    },
-    heading_2: {
-      title: formatMessage(messages7.slash_heading_2),
-      subtext: formatMessage(messages7.slash_heading_2_subtext),
-      keywords: ["h2", "heading2", "subheading"],
-      badge: HeadingTwoIcon,
-      group: formatMessage(messages7.group_style)
-    },
-    heading_3: {
-      title: formatMessage(messages7.slash_heading_3),
-      subtext: formatMessage(messages7.slash_heading_3_subtext),
-      keywords: ["h3", "heading3", "subheading"],
-      badge: HeadingThreeIcon,
-      group: formatMessage(messages7.group_style)
-    },
-    bullet_list: {
-      title: formatMessage(messages7.slash_bullet_list),
-      subtext: formatMessage(messages7.slash_bullet_list_subtext),
-      keywords: ["ul", "li", "list", "bulletlist", "bullet list"],
-      badge: ListIcon2,
-      group: formatMessage(messages7.group_style)
-    },
-    ordered_list: {
-      title: formatMessage(messages7.slash_ordered_list),
-      subtext: formatMessage(messages7.slash_ordered_list_subtext),
-      keywords: ["ol", "li", "list", "numberedlist", "numbered list"],
-      badge: ListOrderedIcon,
-      group: formatMessage(messages7.group_style)
-    },
-    task_list: {
-      title: formatMessage(messages7.slash_task_list),
-      subtext: formatMessage(messages7.slash_task_list_subtext),
-      keywords: ["tasklist", "task list", "todo", "checklist"],
-      badge: ListTodoIcon,
-      group: formatMessage(messages7.group_style)
-    },
-    quote: {
-      title: formatMessage(messages7.slash_blockquote),
-      subtext: formatMessage(messages7.slash_blockquote_subtext),
-      keywords: ["quote", "blockquote"],
-      badge: BlockquoteIcon,
-      group: formatMessage(messages7.group_style)
-    },
-    code_block: {
-      title: formatMessage(messages7.slash_code_block),
-      subtext: formatMessage(messages7.slash_code_block_subtext),
-      keywords: ["code", "pre"],
-      badge: CodeBlockIcon,
-      group: formatMessage(messages7.group_style)
-    },
-    // Insert
-    control: {
-      title: formatMessage(messages7.slash_control),
-      subtext: formatMessage(messages7.slash_control_subtext),
-      keywords: ["control"],
-      badge: ControlsIcon,
-      group: formatMessage(messages7.group_insert)
-    },
-    divider: {
-      title: formatMessage(messages7.slash_separator),
-      subtext: formatMessage(messages7.slash_separator_subtext),
-      keywords: ["hr", "horizontalRule", "line", "separator"],
-      badge: MinusIcon,
-      group: formatMessage(messages7.group_insert)
-    },
-    table: {
-      title: formatMessage(messages7.slash_table),
-      subtext: formatMessage(messages7.slash_table_subtext),
-      keywords: ["table", "grid", "spreadsheet"],
-      badge: TableIcon2,
-      group: formatMessage(messages7.group_insert)
-    },
-    table_of_contents: {
-      title: formatMessage(messages7.slash_toc),
-      subtext: formatMessage(messages7.slash_toc_subtext),
-      keywords: ["toc", "table of contents", "index", "navigation", "headings"],
-      badge: TableOfContentsIcon,
-      group: formatMessage(messages7.group_insert)
-    },
-    callout: {
-      title: formatMessage(messages7.slash_callout),
-      subtext: formatMessage(messages7.slash_callout_subtext),
-      keywords: ["callout", "info", "warning", "alert", "note", "tip"],
-      badge: InfoIcon2,
-      group: formatMessage(messages7.group_insert)
-    },
-    callout_warning: {
-      title: formatMessage(messages7.slash_warning),
-      subtext: formatMessage(messages7.slash_warning_subtext),
-      keywords: ["warning", "caution", "attention"],
-      badge: AlertIcon2,
-      group: formatMessage(messages7.group_insert)
-    },
-    math: {
-      title: formatMessage(messages7.slash_formula),
-      subtext: formatMessage(messages7.slash_formula_subtext),
-      keywords: ["math", "latex", "formula", "equation", "katex"],
-      badge: TypeIcon,
-      group: formatMessage(messages7.group_insert)
-    },
-    // Upload
-    image: {
-      title: formatMessage(messages7.slash_image),
-      subtext: formatMessage(messages7.slash_image_subtext),
-      keywords: [
-        "image",
-        "imageUpload",
-        "upload",
-        "img",
-        "picture",
-        "media",
-        "url"
-      ],
-      badge: ImageIcon2,
-      group: formatMessage(messages7.group_upload)
+// src/ui/link-popover/link-popover.tsx
+import { jsx as jsx18, jsxs as jsxs14 } from "react/jsx-runtime";
+var LinkButton = ({ className, children, ...props }) => {
+  return /* @__PURE__ */ jsx18(
+    ToolbarButton2,
+    {
+      type: "button",
+      className,
+      variant: "ghost",
+      color: "default",
+      tabIndex: -1,
+      "aria-label": "Link",
+      title: "Link",
+      isIconOnly: !children,
+      ...props,
+      children: children || /* @__PURE__ */ jsx18(LinkIcon2, {})
+    }
+  );
+};
+var LinkMain = ({
+  url,
+  setUrl,
+  setLink,
+  removeLink,
+  openLink,
+  isActive,
+  onSave
+}) => {
+  const [isEditing, setIsEditing] = useState17(!isActive || !url);
+  useEffect17(() => {
+    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);
     }
   };
-}
-var getItemImplementations = () => {
-  return {
-    // AI
-    continue_writing: {
-      check: (editor) => {
-        const { hasContent } = hasContentAbove(editor);
-        const extensionsReady = isExtensionAvailable(editor, [
-          "ai",
-          "aiAdvanced"
-        ]);
-        return extensionsReady && hasContent;
-      },
-      action: ({ editor }) => {
-        const editorChain = editor.chain().focus();
-        const nodeSelectionPosition = findSelectionPosition({ editor });
-        if (nodeSelectionPosition !== null) {
-          editorChain.setNodeSelection(nodeSelectionPosition);
+  const handleSave = () => {
+    setLink();
+    setIsEditing(false);
+    onSave == null ? void 0 : onSave();
+  };
+  const handleEdit = () => {
+    setIsEditing(true);
+  };
+  if (isEditing) {
+    return /* @__PURE__ */ jsxs14("div", { className: "flex items-center gap-1 min-w-[280px]", children: [
+      /* @__PURE__ */ jsx18(
+        Input3,
+        {
+          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
         }
-        editorChain.run();
-        editor.chain().focus().aiGenerationShow().run();
-        requestAnimationFrame(() => {
-          const { hasContent, content } = hasContentAbove(editor);
-          const snippet = content.length > 500 ? `...${content.slice(-500)}` : content;
-          const prompt = hasContent ? `Context: ${snippet}
-
-Continue writing from where the text above ends. Write ONLY ONE SENTENCE. DONT REPEAT THE TEXT.` : "Start writing a new paragraph. Write ONLY ONE SENTENCE.";
-          editor.chain().focus().aiTextPrompt({
-            stream: true,
-            format: "rich-text",
-            text: prompt
-          }).run();
-        });
-      }
-    },
-    ai_ask_button: {
-      check: (editor) => isExtensionAvailable(editor, ["ai", "aiAdvanced"]),
-      action: ({ editor }) => {
-        const editorChain = editor.chain().focus();
-        const nodeSelectionPosition = findSelectionPosition({ editor });
-        if (nodeSelectionPosition !== null) {
-          editorChain.setNodeSelection(nodeSelectionPosition);
+      ),
+      /* @__PURE__ */ jsx18(
+        IconButton7,
+        {
+          type: "button",
+          size: "sm",
+          variant: "ghost",
+          onClick: handleSave,
+          "aria-label": "Save link",
+          disabled: !url,
+          children: /* @__PURE__ */ jsx18(CheckIcon, { className: "size-4" })
         }
-        editorChain.run();
-        editor.chain().focus().aiGenerationShow().run();
-      }
-    },
-    // Style
-    text: {
-      check: (editor) => isNodeInSchema2("paragraph", editor),
-      action: ({ editor }) => {
-        editor.chain().focus().setParagraph().run();
-      }
-    },
-    heading_1: {
-      check: (editor) => isNodeInSchema2("heading", editor),
-      action: ({ editor }) => {
-        editor.chain().focus().toggleHeading({ level: 1 }).run();
-      }
-    },
-    heading_2: {
-      check: (editor) => isNodeInSchema2("heading", editor),
-      action: ({ editor }) => {
-        editor.chain().focus().toggleHeading({ level: 2 }).run();
-      }
-    },
-    heading_3: {
-      check: (editor) => isNodeInSchema2("heading", editor),
-      action: ({ editor }) => {
-        editor.chain().focus().toggleHeading({ level: 3 }).run();
-      }
-    },
-    bullet_list: {
-      check: (editor) => isNodeInSchema2("bulletList", editor),
-      action: ({ editor }) => {
-        editor.chain().focus().toggleBulletList().run();
-      }
-    },
-    ordered_list: {
-      check: (editor) => isNodeInSchema2("orderedList", editor),
-      action: ({ editor }) => {
-        editor.chain().focus().toggleOrderedList().run();
-      }
-    },
-    task_list: {
-      check: (editor) => isNodeInSchema2("taskList", editor),
-      action: ({ editor }) => {
-        editor.chain().focus().toggleTaskList().run();
+      )
+    ] });
+  }
+  return /* @__PURE__ */ jsxs14("div", { className: "flex items-center gap-1 min-w-[280px]", children: [
+    /* @__PURE__ */ jsx18(
+      "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__ */ jsxs14("div", { className: "flex items-center gap-0.5 border-l pl-1 ml-1", children: [
+      /* @__PURE__ */ jsx18(
+        IconButton7,
+        {
+          type: "button",
+          size: "sm",
+          variant: "ghost",
+          onClick: openLink,
+          "aria-label": "Open link in new tab",
+          children: /* @__PURE__ */ jsx18(ExternalLinkIcon, { className: "size-4" })
+        }
+      ),
+      /* @__PURE__ */ jsx18(
+        IconButton7,
+        {
+          type: "button",
+          size: "sm",
+          variant: "ghost",
+          onClick: handleEdit,
+          "aria-label": "Edit link",
+          children: /* @__PURE__ */ jsx18(EditIcon2, { className: "size-4" })
+        }
+      ),
+      /* @__PURE__ */ jsx18(
+        IconButton7,
+        {
+          type: "button",
+          size: "sm",
+          variant: "ghost",
+          onClick: removeLink,
+          "aria-label": "Remove link",
+          children: /* @__PURE__ */ jsx18(TrashIcon3, { className: "size-4" })
+        }
+      )
+    ] })
+  ] });
+};
+function LinkPopover({
+  editor: providedEditor,
+  hideWhenUnavailable = false,
+  onSetLink,
+  onOpenChange,
+  autoOpenOnLinkActive = true,
+  onClick,
+  children,
+  ...buttonProps
+}) {
+  const { editor } = useTiptapEditor6(providedEditor);
+  const [isOpen, setIsOpen] = useState17(false);
+  const {
+    isVisible,
+    canSet,
+    isActive,
+    url,
+    setUrl,
+    setLink,
+    removeLink,
+    openLink,
+    label
+  } = useLinkPopover({
+    editor,
+    hideWhenUnavailable,
+    onSetLink
+  });
+  const handleOnOpenChange = useCallback17(
+    (nextIsOpen) => {
+      setIsOpen(nextIsOpen);
+      onOpenChange == null ? void 0 : onOpenChange(nextIsOpen);
     },
-    quote: {
-      check: (editor) => isNodeInSchema2("blockquote", editor),
-      action: ({ editor }) => {
-        editor.chain().focus().toggleBlockquote().run();
-      }
+    [onOpenChange]
+  );
+  const handleSetLink = useCallback17(() => {
+    setLink();
+    setIsOpen(false);
+  }, [setLink]);
+  const handleClick = useCallback17(
+    (event) => {
+      onClick == null ? void 0 : onClick(event);
+      if (event.defaultPrevented) return;
+      setIsOpen(!isOpen);
     },
-    code_block: {
-      check: (editor) => isNodeInSchema2("codeBlock", editor),
-      action: ({ editor }) => {
-        editor.chain().focus().toggleNode("codeBlock", "paragraph").run();
-      }
-    },
-    // Insert
-    // mention: {
-    //   check: (editor: Editor) =>
-    //     isExtensionAvailable(editor, ["mention", "mentionAdvanced"]),
-    //   action: ({ editor }: { editor: Editor }) => addMentionTrigger(editor),
-    // },
-    // emoji: {
-    //   check: (editor: Editor) =>
-    //     isExtensionAvailable(editor, ["emoji", "emojiPicker"]),
-    //   action: ({ editor }: { editor: Editor }) => addEmojiTrigger(editor),
-    // },
-    divider: {
-      check: (editor) => isNodeInSchema2("horizontalRule", editor),
-      action: ({ editor }) => {
-        editor.chain().focus().setHorizontalRule().run();
-      }
-    },
-    table: {
-      check: (editor) => isNodeInSchema2("table", editor),
-      action: ({ editor }) => toggleTable(editor, { rows: 3, cols: 3, withHeaderRow: true })
-    },
-    control: {
-      check: (editor) => isNodeInSchema2("controlBlock", editor),
-      action: ({ editor }) => {
-        try {
-          return editor.chain().focus().insertControlBlock().run();
-        } catch (e) {
-          console.error(e);
-        }
-      }
-    },
-    table_of_contents: {
-      check: (editor) => isNodeInSchema2("tableOfContentsNode", editor),
-      action: ({ editor }) => {
-        editor.chain().focus().insertTableOfContents().run();
-      }
-    },
-    callout: {
-      check: (editor) => isNodeInSchema2("calloutNode", editor),
-      action: ({ editor }) => {
-        editor.chain().focus().insertCallout("info").run();
-      }
-    },
-    callout_warning: {
-      check: (editor) => isNodeInSchema2("calloutNode", editor),
-      action: ({ editor }) => {
-        editor.chain().focus().insertCallout("warning").run();
-      }
-    },
-    math: {
-      check: (editor) => isNodeInSchema2("mathBlock", editor),
-      action: ({ editor }) => {
-        editor.chain().focus().insertMathBlock().run();
-      }
-    },
-    // Upload
-    image: {
-      check: (editor) => isNodeInSchema2("imageUpload", editor),
-      action: ({ editor }) => {
-        editor.chain().focus().setImageUpload().run();
-      }
+    [onClick, isOpen]
+  );
+  useEffect17(() => {
+    if (autoOpenOnLinkActive && isActive) {
+      setIsOpen(true);
     }
-  };
-};
-function organizeItemsByGroups(items, showGroups) {
-  if (!showGroups) {
-    return items.map((item) => ({ ...item, group: "" }));
+  }, [autoOpenOnLinkActive, isActive]);
+  if (!isVisible) {
+    return null;
   }
-  const groups = {};
-  items.forEach((item) => {
-    const groupLabel = item.group || "";
-    if (!groups[groupLabel]) {
-      groups[groupLabel] = [];
-    }
-    groups[groupLabel].push(item);
-  });
-  const organizedItems = [];
-  Object.entries(groups).forEach(([, groupItems]) => {
-    organizedItems.push(...groupItems);
-  });
-  return organizedItems;
-}
-var ALL_SLASH_MENU_ITEMS = [
-  "continue_writing",
-  "ai_ask_button",
-  "text",
-  "heading_1",
-  "heading_2",
-  "heading_3",
-  "bullet_list",
-  "ordered_list",
-  "task_list",
-  "quote",
-  "code_block",
-  "control",
-  "divider",
-  "table",
-  "table_of_contents",
-  "callout",
-  "callout_warning",
-  "math",
-  "image"
-];
-function useSlashDropdownMenu(config) {
-  const intl = useIntl12();
-  const getSlashMenuItems = React10.useCallback(
-    (editor) => {
-      const items = [];
-      const texts = createSlashMenuTexts(intl.formatMessage);
-      const enabledItems = (config == null ? void 0 : config.enabledItems) || ALL_SLASH_MENU_ITEMS;
-      const showGroups = (config == null ? void 0 : config.showGroups) !== false;
-      const itemImplementations = getItemImplementations();
-      enabledItems.forEach((itemType) => {
-        var _a;
-        const itemImpl = itemImplementations[itemType];
-        const itemText = texts[itemType];
-        if (itemImpl && itemText && itemImpl.check(editor)) {
-          const item = {
-            onSelect: ({ editor: editor2 }) => itemImpl.action({ editor: editor2 }),
-            ...itemText
-          };
-          if ((_a = config == null ? void 0 : config.itemGroups) == null ? void 0 : _a[itemType]) {
-            item.group = config.itemGroups[itemType];
-          } else if (!showGroups) {
-            item.group = "";
+  return /* @__PURE__ */ jsxs14(
+    Popover2.Root,
+    {
+      open: isOpen,
+      onOpenChange: handleOnOpenChange,
+      spacing: "dense",
+      children: [
+        /* @__PURE__ */ jsx18(
+          Popover2.Trigger,
+          {
+            render: /* @__PURE__ */ jsx18(
+              LinkButton,
+              {
+                "data-disabled": !canSet,
+                disabled: !canSet,
+                "data-active-state": isActive ? "on" : "off",
+                "aria-label": label,
+                "aria-pressed": isActive,
+                onClick: handleClick,
+                ...buttonProps
+              }
+            )
           }
-          items.push(item);
-        }
-      });
-      if (config == null ? void 0 : config.customItems) {
-        items.push(...config.customItems);
-      }
-      return organizeItemsByGroups(items, showGroups);
-    },
-    [config, intl]
+        ),
+        /* @__PURE__ */ jsx18(Popover2.Content, { children: /* @__PURE__ */ jsx18(
+          LinkMain,
+          {
+            url,
+            setUrl,
+            setLink: handleSetLink,
+            removeLink,
+            openLink,
+            isActive,
+            onSave: () => setIsOpen(false)
+          }
+        ) })
+      ]
+    }
   );
-  return {
-    getSlashMenuItems,
-    config
-  };
 }
+LinkButton.displayName = "LinkButton";
 
-// src/ui/slash-dropdown-menu/slash-dropdown-menu.tsx
-import { jsx as jsx20, jsxs as jsxs15 } from "react/jsx-runtime";
-var SlashDropdownMenu = (props) => {
-  const { config, ...restProps } = props;
-  const { getSlashMenuItems } = useSlashDropdownMenu(config);
-  return /* @__PURE__ */ jsx20(
-    SuggestionMenu,
-    {
-      char: "/",
-      pluginKey: "slashDropdownMenu",
-      decorationClass: "tiptap-slash-decoration",
-      decorationContent: "Filter...",
-      selector: "tiptap-slash-dropdown-menu",
-      items: ({ query, editor }) => filterSuggestionItems(getSlashMenuItems(editor), query),
-      ...restProps,
-      children: (props2) => /* @__PURE__ */ jsx20(List, { ...props2, config })
-    }
-  );
-};
-var Item = (props) => {
-  const { item, isSelected, onSelect } = props;
-  const itemRef = React11.useRef(null);
-  React11.useEffect(() => {
-    const selector = document.querySelector(
-      '[data-selector="tiptap-slash-dropdown-menu"]'
-    );
-    if (!itemRef.current || !isSelected || !selector) return;
-    const overflow = getElementOverflowPosition2(itemRef.current, selector);
-    if (overflow === "top") {
-      itemRef.current.scrollIntoView(true);
-    } else if (overflow === "bottom") {
-      itemRef.current.scrollIntoView(false);
-    }
-  }, [isSelected]);
-  const BadgeIcon = item.badge;
-  return /* @__PURE__ */ jsx20(
-    Button6,
-    {
-      ref: itemRef,
-      variant: "ghost",
-      color: "default",
-      startContent: BadgeIcon && /* @__PURE__ */ jsx20(BadgeIcon, {}),
-      "data-active-state": isSelected ? "on" : "off",
-      onClick: onSelect,
-      fullWidth: true,
-      spacing: "start",
-      children: item.title
-    }
-  );
+// src/ui/mark-button/index.tsx
+import {
+  isMarkInSchema as isMarkInSchema3,
+  isNodeTypeSelected as isNodeTypeSelected2,
+  useTiptapEditor as useTiptapEditor7
+} from "@kopexa/editor-utils";
+import {
+  BoldIcon,
+  CodeIcon,
+  ItalicIcon,
+  StrikeIcon,
+  SubscriptIcon,
+  SuperscriptIcon,
+  UnderlineIcon
+} from "@kopexa/icons";
+import { ToolbarButton as ToolbarButton3 } from "@kopexa/toolbar";
+import { isNodeSelection as isNodeSelection2 } from "@tiptap/react";
+import { useCallback as useCallback18, useMemo as useMemo15 } from "react";
+import { useIntl as useIntl10 } from "react-intl";
+import { jsx as jsx19 } from "react/jsx-runtime";
+var markIcons = {
+  bold: BoldIcon,
+  italic: ItalicIcon,
+  underline: UnderlineIcon,
+  strike: StrikeIcon,
+  code: CodeIcon,
+  superscript: SuperscriptIcon,
+  subscript: SubscriptIcon
 };
-var List = ({
-  items,
-  selectedIndex,
-  onSelect,
-  config
-}) => {
-  const styles = slashDropdownMenu2();
-  const renderedItems = React11.useMemo(() => {
-    const rendered = [];
-    const showGroups = (config == null ? void 0 : config.showGroups) !== false;
-    if (!showGroups) {
-      items.forEach((item, index) => {
-        rendered.push(
-          /* @__PURE__ */ jsx20(
-            Item,
-            {
-              item,
-              isSelected: index === selectedIndex,
-              onSelect: () => onSelect(item)
-            },
-            `item-${index}-${item.title}`
-          )
-        );
-      });
-      return rendered;
+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 (!isMarkInSchema3(type, editor) || isNodeTypeSelected2(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 (isNodeSelection2(editor.state.selection) || !canToggleMark(editor, type)) {
+      return false;
     }
-    const groups = {};
-    items.forEach((item, index) => {
-      const groupLabel = item.group || "";
-      if (!groups[groupLabel]) {
-        groups[groupLabel] = { items: [], indices: [] };
-      }
-      groups[groupLabel].items.push(item);
-      groups[groupLabel].indices.push(index);
-    });
-    Object.entries(groups).forEach(([groupLabel, groupData], groupIndex) => {
-      if (groupIndex > 0) {
-        rendered.push(
-          /* @__PURE__ */ jsx20(
-            Separator,
-            {
-              orientation: "horizontal"
-            },
-            `separator-${groupIndex.toString()}`
-          )
-        );
-      }
-      const groupItems = groupData.items.map((item, itemIndex) => {
-        const originalIndex = groupData.indices[itemIndex];
-        return /* @__PURE__ */ jsx20(
-          Item,
-          {
-            item,
-            isSelected: originalIndex === selectedIndex,
-            onSelect: () => onSelect(item)
-          },
-          `item-${originalIndex}-${item.title}`
-        );
-      });
-      if (groupLabel) {
-        rendered.push(
-          /* @__PURE__ */ jsxs15(
-            "div",
-            {
-              className: styles.cardItemGroup(),
-              children: [
-                /* @__PURE__ */ jsx20("div", { className: styles.cardGroupLabel(), children: groupLabel }),
-                /* @__PURE__ */ jsx20("div", { className: styles.cardGroup(), children: groupItems })
-              ]
-            },
-            `group-${groupIndex}-${groupLabel}`
-          )
-        );
-      } else {
-        rendered.push(...groupItems);
+  }
+  return true;
+}
+var markMessages = {
+  bold: messages7.bold,
+  italic: messages7.italic,
+  underline: messages7.underline,
+  strike: messages7.strikethrough,
+  code: messages7.code,
+  superscript: messages7.superscript,
+  subscript: messages7.subscript
+};
+function getTranslatedMarkName(type, intl) {
+  return intl.formatMessage(markMessages[type]);
+}
+function useMarkState(editor, type, disabled = false) {
+  const intl = useIntl10();
+  const markInSchema = isMarkInSchema3(type, editor);
+  const isDisabled = isMarkButtonDisabled(editor, type, disabled);
+  const isActive = isMarkActive(editor, type);
+  const Icon = markIcons[type];
+  const shortcutKey = markShortcutKeys[type];
+  const formattedName = getTranslatedMarkName(type, intl);
+  return {
+    markInSchema,
+    isDisabled,
+    isActive,
+    Icon,
+    shortcutKey,
+    formattedName
+  };
+}
+var MarkButton = ({
+  editor: providedEditor,
+  type,
+  text,
+  hideWhenUnavailable = false,
+  className = "",
+  disabled,
+  onClick,
+  children,
+  ...buttonProps
+}) => {
+  const { editor } = useTiptapEditor7(providedEditor);
+  const {
+    markInSchema,
+    isDisabled,
+    isActive,
+    Icon,
+    shortcutKey,
+    formattedName
+  } = useMarkState(editor, type, disabled);
+  const handleClick = useCallback18(
+    (e) => {
+      onClick == null ? void 0 : onClick(e);
+      if (!e.defaultPrevented && !isDisabled && editor) {
+        toggleMark(editor, type);
       }
+    },
+    [onClick, isDisabled, editor, type]
+  );
+  const show = useMemo15(() => {
+    return shouldShowMarkButton({
+      editor,
+      type,
+      hideWhenUnavailable,
+      markInSchema
     });
-    return rendered;
-  }, [items, selectedIndex, onSelect, config == null ? void 0 : config.showGroups, styles]);
-  if (!renderedItems.length) {
+  }, [editor, type, hideWhenUnavailable, markInSchema]);
+  if (!show || !editor || !editor.isEditable) {
     return null;
   }
-  return /* @__PURE__ */ jsx20(
-    "div",
+  return /* @__PURE__ */ jsx19(
+    ToolbarButton3,
     {
-      className: styles.card(),
-      style: {
-        maxHeight: "var(--suggestion-menu-max-height)"
-      },
-      children: /* @__PURE__ */ jsx20("div", { className: styles.body(), children: renderedItems })
+      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,
+      title: formattedName,
+      shortcutKeys: shortcutKey,
+      onClick: handleClick,
+      isIconOnly: true,
+      ...buttonProps,
+      children: /* @__PURE__ */ jsx19(Icon, {})
     }
   );
 };
 
-// src/presets/basic/editor-header.tsx
-import { useTiptapEditor as useTiptapEditor26 } from "@kopexa/editor-utils";
-import { MoreVerticalIcon } from "@kopexa/icons";
-import { Popover as Popover3 } from "@kopexa/popover";
-import {
-  Toolbar as Toolbar2,
-  ToolbarButton as ToolbarButton8,
-  ToolbarGroup as ToolbarGroup2,
-  ToolbarSeparator as ToolbarSeparator3
-} from "@kopexa/toolbar";
-import { useIsMobile as useIsMobile3 } from "@kopexa/use-is-mobile";
-import { useEffect as useEffect31, useRef as useRef12, useState as useState30 } from "react";
-import { useIntl as useIntl18 } from "react-intl";
-
-// src/hooks/use-cursor-visibility.ts
-import * as React13 from "react";
-
-// src/hooks/use-window-size.ts
-import * as React12 from "react";
-function useWindowSize() {
-  const [windowSize, setWindowSize] = React12.useState({
-    width: 0,
-    height: 0,
-    offsetTop: 0
-  });
-  React12.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);
+// src/ui/bubble-menu/index.tsx
+import { jsx as jsx20, jsxs as jsxs15 } from "react/jsx-runtime";
+function useResolvedHighlightColors(editor) {
+  var _a;
+  if (!((_a = editor == null ? void 0 : editor.view) == null ? void 0 : _a.dom)) return void 0;
+  const editorEl = editor.view.dom;
+  const computed = getComputedStyle(editorEl);
+  return HIGHLIGHT_COLORS.filter((c) => c.value !== "var(--tt-bg-color)").map(
+    (color) => {
+      const resolveVar = (v) => {
+        const match = v.match(/^var\((.+)\)$/);
+        if (!match) return v;
+        return computed.getPropertyValue(match[1]).trim() || v;
+      };
+      return {
+        ...color,
+        value: resolveVar(color.value),
+        border: resolveVar(color.border)
+      };
     }
-    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] = React13.useState({
-    x: 0,
-    y: 0,
-    width: 0,
-    height: 0
-  });
-  const updateRect = React13.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]);
-  React13.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]);
-  React13.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;
+function BubbleMenu({ editor }) {
+  const resolvedColors = useResolvedHighlightColors(editor);
+  if (!editor) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx20(
+    TiptapBubbleMenu,
+    {
+      editor,
+      shouldShow: ({ editor: e, state, view }) => {
+        const { selection } = state;
+        const { empty } = selection;
+        if (!view.hasFocus()) return false;
+        if (empty) return false;
+        if (e.isActive("codeBlock")) return false;
+        if (e.isActive("link")) return false;
+        if (e.isActive("variable")) return false;
+        if (!e.isEditable) return false;
+        return true;
+      },
+      options: {
+        placement: "top",
+        offset: 8
+      },
+      className: "rounded-lg border bg-background shadow-md",
+      children: /* @__PURE__ */ jsxs15(Toolbar, { radius: "md", border: "none", className: "p-1", children: [
+        /* @__PURE__ */ jsxs15(ToolbarGroup, { children: [
+          /* @__PURE__ */ jsx20(MarkButton, { type: "bold" }),
+          /* @__PURE__ */ jsx20(MarkButton, { type: "italic" }),
+          /* @__PURE__ */ jsx20(MarkButton, { type: "underline" }),
+          /* @__PURE__ */ jsx20(MarkButton, { type: "strike" }),
+          /* @__PURE__ */ jsx20(MarkButton, { type: "code" })
+        ] }),
+        /* @__PURE__ */ jsx20(ToolbarSeparator2, {}),
+        /* @__PURE__ */ jsxs15(ToolbarGroup, { children: [
+          /* @__PURE__ */ jsx20(ColorHighlightPopover, { colors: resolvedColors }),
+          /* @__PURE__ */ jsx20(LinkPopover, { autoOpenOnLinkActive: false })
+        ] })
+      ] })
+    }
+  );
 }
 
-// src/ui/color-highlight-popover/color-highlight-popover.tsx
-import { IconButton as IconButton8 } from "@kopexa/button";
-import { useTiptapEditor as useTiptapEditor9 } from "@kopexa/editor-utils";
-import { BanIcon, HighlighterIcon as HighlighterIcon2 } from "@kopexa/icons";
-import { Popover as Popover2 } from "@kopexa/popover";
-import { ToolbarSeparator as ToolbarSeparator2 } from "@kopexa/toolbar";
-import { useMemo as useMemo16, useRef as useRef11, useState as useState22 } from "react";
-
-// src/ui/color-highlight-button/color-highlight-button.tsx
-import { useTiptapEditor as useTiptapEditor8 } from "@kopexa/editor-utils";
-import { colorHighlightButton } from "@kopexa/theme";
-import { ToolbarButton as ToolbarButton3 } from "@kopexa/toolbar";
-import { useCallback as useCallback23, useMemo as useMemo15 } from "react";
+// src/ui/copy-anchor-link-button/use-scroll-to-hash.ts
+import { getEditorExtension, useTiptapEditor as useTiptapEditor8 } from "@kopexa/editor-utils";
+import * as React10 from "react";
 
-// src/ui/color-highlight-button/use-color-highlight.ts
-import {
-  isMarkInSchema as isMarkInSchema3,
-  isNodeTypeSelected as isNodeTypeSelected3,
-  useTiptapEditor as useTiptapEditor7
-} from "@kopexa/editor-utils";
-import { HighlighterIcon } from "@kopexa/icons";
-import { useIsMobile } from "@kopexa/use-is-mobile";
-import * as React14 from "react";
-import { useHotkeys } from "react-hotkeys-hook";
-import { useIntl as useIntl13 } from "react-intl";
-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])
+// src/hooks/use-floating-toolbar-visibility.ts
+import { NodeSelection } from "@tiptap/pm/state";
+import { isNodeSelection as isNodeSelection3 } from "@tiptap/react";
+import * as React9 from "react";
+var HIDE_FLOATING_META = "hideFloatingToolbar";
+var selectNodeAndHideFloating = (editor, pos) => {
+  if (!editor) return;
+  const { state, view } = editor;
+  view.dispatch(
+    state.tr.setSelection(NodeSelection.create(state.doc, pos)).setMeta(HIDE_FLOATING_META, true)
   );
-  return values.map((value) => colorMap.get(value)).filter((color) => !!color);
-}
-function canColorHighlight(editor) {
-  if (!editor || !editor.isEditable) return false;
-  if (!isMarkInSchema3("highlight", editor) || isNodeTypeSelected3(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 (!isMarkInSchema3("highlight", editor)) return false;
-  if (hideWhenUnavailable && !editor.isActive("code")) {
-    return canColorHighlight(editor);
-  }
-  return true;
-}
-function useColorHighlight(config) {
+};
+
+// src/ui/copy-anchor-link-button/use-scroll-to-hash.ts
+function useScrollToHash(config = {}) {
   const {
     editor: providedEditor,
-    label,
-    highlightColor,
-    hideWhenUnavailable = false,
-    onApplied
+    onTargetFound = () => {
+    },
+    onTargetNotFound = () => {
+    }
   } = config;
-  const intl = useIntl13();
-  const { editor } = useTiptapEditor7(providedEditor);
-  const isMobile = useIsMobile();
-  const [isVisible, setIsVisible] = React14.useState(true);
-  const canColorHighlightState = canColorHighlight(editor);
-  const isActive = isColorHighlightActive(editor, highlightColor);
-  React14.useEffect(() => {
+  const { editor } = useTiptapEditor8(providedEditor);
+  const scrollToNode = React10.useCallback(
+    (id) => {
+      var _a, _b, _c;
+      if (!editor) return false;
+      const attributeName = (_c = (_b = (_a = 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;
+        if (((_a2 = node.attrs) == null ? void 0 : _a2[attributeName]) === id) {
+          position = pos;
+          return false;
+        }
+        return true;
+      });
+      if (position === null) return false;
+      selectNodeAndHideFloating(editor, position);
+      setTimeout(() => {
+        let dom = null;
+        if (typeof position === "number") {
+          dom = editor.view.nodeDOM(position);
+        }
+        if (dom) {
+          dom.scrollIntoView({ behavior: "smooth", block: "center" });
+        }
+      }, 0);
+      return true;
+    },
+    [editor]
+  );
+  const handleScroll = React10.useCallback(
+    (delay = 0) => {
+      var _a;
+      const hash = (_a = window.location.hash) == null ? void 0 : _a.substring(1);
+      if (!hash) return;
+      setTimeout(() => {
+        if (scrollToNode(hash)) {
+          onTargetFound(hash);
+        } else {
+          onTargetNotFound(hash);
+        }
+      }, delay);
+    },
+    [scrollToNode, onTargetFound, onTargetNotFound]
+  );
+  React10.useEffect(() => {
+    var _a, _b;
     if (!editor) return;
-    const handleSelectionUpdate = () => {
-      setIsVisible(shouldShowButton2({ editor, hideWhenUnavailable }));
-    };
+    const provider = (_b = (_a = editor.extensionManager.extensions.find(
+      (ext) => ext.name === "collaborationCaret"
+    )) == null ? void 0 : _a.options) == null ? void 0 : _b.provider;
+    if (provider == null ? void 0 : provider.on) {
+      const syncHandler = () => handleScroll(500);
+      provider.on("synced", syncHandler);
+      return () => {
+        var _a2;
+        (_a2 = provider.off) == null ? void 0 : _a2.call(provider, "synced", syncHandler);
+      };
+    } else {
+      handleScroll(500);
+    }
+  }, [editor, handleScroll]);
+  React10.useEffect(() => {
+    const immediateScroll = () => handleScroll();
+    const delayedScroll = () => handleScroll(500);
+    window.addEventListener("hashchange", immediateScroll);
+    window.addEventListener("pageshow", delayedScroll);
+    window.addEventListener("popstate", immediateScroll);
+    return () => {
+      window.removeEventListener("hashchange", immediateScroll);
+      window.removeEventListener("pageshow", delayedScroll);
+      window.removeEventListener("popstate", immediateScroll);
+    };
+  }, [handleScroll]);
+  return { scrollToHash: scrollToNode };
+}
+
+// src/ui/link-bubble/index.tsx
+import { IconButton as IconButton8 } from "@kopexa/button";
+import { EditIcon as EditIcon3, ExternalLinkIcon as ExternalLinkIcon2, TrashIcon as TrashIcon4 } from "@kopexa/icons";
+import { Input as Input4 } from "@kopexa/input";
+import { BubbleMenu as TiptapBubbleMenu2 } from "@tiptap/react/menus";
+import { useCallback as useCallback20, useEffect as useEffect20, useState as useState19 } from "react";
+import { useIntl as useIntl11 } from "react-intl";
+import { Fragment as Fragment4, jsx as jsx21, jsxs as jsxs16 } from "react/jsx-runtime";
+function LinkBubble({ editor }) {
+  const intl = useIntl11();
+  const [isEditing, setIsEditing] = useState19(false);
+  const [url, setUrl] = useState19("");
+  const getCurrentUrl = useCallback20(() => {
+    if (!editor) return "";
+    const attrs = editor.getAttributes("link");
+    return attrs.href || "";
+  }, [editor]);
+  useEffect20(() => {
+    const isLinkActive2 = editor == null ? void 0 : editor.isActive("link");
+    if (isLinkActive2) {
+      setUrl(getCurrentUrl());
+      setIsEditing(false);
+    }
+  }, [editor, getCurrentUrl]);
+  const handleOpenLink = useCallback20(() => {
+    const href = getCurrentUrl();
+    if (href) {
+      window.open(href, "_blank", "noopener,noreferrer");
+    }
+  }, [getCurrentUrl]);
+  const handleRemoveLink = useCallback20(() => {
+    editor == null ? void 0 : editor.chain().focus().unsetLink().run();
+  }, [editor]);
+  const handleEdit = useCallback20(() => {
+    setUrl(getCurrentUrl());
+    setIsEditing(true);
+  }, [getCurrentUrl]);
+  const handleSave = useCallback20(() => {
+    if (url) {
+      editor == null ? void 0 : editor.chain().focus().extendMarkRange("link").setLink({ href: url }).run();
+    } else {
+      editor == null ? void 0 : editor.chain().focus().unsetLink().run();
+    }
+    setIsEditing(false);
+  }, [editor, url]);
+  const handleKeyDown = useCallback20(
+    (e) => {
+      if (e.key === "Enter") {
+        e.preventDefault();
+        handleSave();
+      } else if (e.key === "Escape") {
+        e.preventDefault();
+        setIsEditing(false);
+        setUrl(getCurrentUrl());
+      }
+    },
+    [handleSave, getCurrentUrl]
+  );
+  if (!editor) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx21(
+    TiptapBubbleMenu2,
+    {
+      editor,
+      pluginKey: "linkBubbleMenu",
+      shouldShow: ({ editor: e, view }) => {
+        if (!view.hasFocus()) return false;
+        return e.isActive("link") && e.isEditable;
+      },
+      options: {
+        placement: "bottom-start",
+        offset: 8
+      },
+      className: "rounded-lg border bg-background shadow-md",
+      children: /* @__PURE__ */ jsx21("div", { className: "flex items-center gap-1 p-1.5 min-w-[280px]", children: isEditing ? /* @__PURE__ */ jsxs16(Fragment4, { children: [
+        /* @__PURE__ */ jsx21(
+          Input4,
+          {
+            type: "url",
+            value: url,
+            onChange: (e) => setUrl(e.target.value),
+            onKeyDown: handleKeyDown,
+            placeholder: intl.formatMessage(messages7.link_placeholder),
+            className: "flex-1 h-8 text-sm",
+            autoFocus: true
+          }
+        ),
+        /* @__PURE__ */ jsx21(
+          IconButton8,
+          {
+            type: "button",
+            size: "sm",
+            variant: "ghost",
+            onClick: handleSave,
+            "aria-label": intl.formatMessage(messages7.link_save),
+            children: /* @__PURE__ */ jsx21(EditIcon3, { className: "size-4" })
+          }
+        )
+      ] }) : /* @__PURE__ */ jsxs16(Fragment4, { children: [
+        /* @__PURE__ */ jsx21(
+          "a",
+          {
+            href: getCurrentUrl(),
+            target: "_blank",
+            rel: "noopener noreferrer",
+            className: "flex-1 text-sm text-primary truncate max-w-[200px] hover:underline px-2",
+            onClick: (e) => {
+              e.preventDefault();
+              handleOpenLink();
+            },
+            children: getCurrentUrl()
+          }
+        ),
+        /* @__PURE__ */ jsxs16("div", { className: "flex items-center gap-0.5 border-l pl-1 ml-1", children: [
+          /* @__PURE__ */ jsx21(
+            IconButton8,
+            {
+              type: "button",
+              size: "sm",
+              variant: "ghost",
+              onClick: handleOpenLink,
+              "aria-label": intl.formatMessage(messages7.link_open),
+              children: /* @__PURE__ */ jsx21(ExternalLinkIcon2, { className: "size-4" })
+            }
+          ),
+          /* @__PURE__ */ jsx21(
+            IconButton8,
+            {
+              type: "button",
+              size: "sm",
+              variant: "ghost",
+              onClick: handleEdit,
+              "aria-label": intl.formatMessage(messages7.link_edit),
+              children: /* @__PURE__ */ jsx21(EditIcon3, { className: "size-4" })
+            }
+          ),
+          /* @__PURE__ */ jsx21(
+            IconButton8,
+            {
+              type: "button",
+              size: "sm",
+              variant: "ghost",
+              onClick: handleRemoveLink,
+              "aria-label": intl.formatMessage(messages7.link_remove),
+              children: /* @__PURE__ */ jsx21(TrashIcon4, { className: "size-4" })
+            }
+          )
+        ] })
+      ] }) })
+    }
+  );
+}
+
+// src/ui/slash-dropdown-menu/slash-dropdown-menu.tsx
+import { Button as Button6 } from "@kopexa/button";
+import { getElementOverflowPosition as getElementOverflowPosition2 } from "@kopexa/editor-utils";
+import { Separator } from "@kopexa/separator";
+import { slashDropdownMenu as slashDropdownMenu2 } from "@kopexa/theme";
+import * as React12 from "react";
+
+// src/ui/slash-dropdown-menu/use-slash-dropdown-menu.ts
+import {
+  findSelectionPosition,
+  hasContentAbove,
+  isExtensionAvailable,
+  isNodeInSchema as isNodeInSchema2
+} from "@kopexa/editor-utils";
+import {
+  AiSparklesIcon,
+  AlertIcon as AlertIcon2,
+  BlockquoteIcon,
+  CodeBlockIcon,
+  ControlsIcon,
+  HeadingOneIcon,
+  HeadingThreeIcon,
+  HeadingTwoIcon,
+  ImageIcon as ImageIcon2,
+  InfoIcon as InfoIcon2,
+  ListIcon as ListIcon2,
+  ListOrderedIcon,
+  ListTodoIcon,
+  MinusIcon,
+  TableIcon as TableIcon2,
+  TableOfContentsIcon,
+  TypeIcon
+} from "@kopexa/icons";
+import * as React11 from "react";
+import { useIntl as useIntl13 } from "react-intl";
+
+// src/ui/table-button/use-table.ts
+import {
+  isNodeInSchema,
+  isNodeTypeSelected as isNodeTypeSelected3,
+  useTiptapEditor as useTiptapEditor9
+} from "@kopexa/editor-utils";
+import { TableIcon } from "@kopexa/icons";
+import { isNodeSelection as isNodeSelection4 } from "@tiptap/react";
+import { useCallback as useCallback21, useEffect as useEffect21, useState as useState20 } from "react";
+import { useIntl as useIntl12 } from "react-intl";
+function canToggle(editor) {
+  if (!editor || !editor.isEditable) return false;
+  if (!isNodeInSchema("table", editor) || isNodeTypeSelected3(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 (!canToggle(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 shouldShowButton2(props) {
+  const { editor, hideWhenUnavailable } = props;
+  if (!editor || !editor.isEditable) return false;
+  if (!isNodeInSchema("table", editor)) return false;
+  if (hideWhenUnavailable) {
+    if (isNodeSelection4(editor.state.selection) || !canToggle) {
+      return false;
+    }
+  }
+  return true;
+}
+function useTableBlock(config) {
+  const {
+    editor: providedEditor,
+    hideWhenUnavailable = false,
+    onToggled
+  } = config || {};
+  const intl = useIntl12();
+  const { editor } = useTiptapEditor9(providedEditor);
+  const [isVisible, setIsVisible] = useState20(true);
+  const canToggleState = canToggle(editor);
+  const isActive = (editor == null ? void 0 : editor.isActive("table")) || false;
+  useEffect21(() => {
+    if (!editor) return;
+    const handleSelectionUpdate = () => {
+      setIsVisible(shouldShowButton2({ editor, hideWhenUnavailable }));
+    };
     handleSelectionUpdate();
     editor.on("selectionUpdate", handleSelectionUpdate);
     return () => {
       editor.off("selectionUpdate", handleSelectionUpdate);
     };
   }, [editor, hideWhenUnavailable]);
-  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)
-        );
+  const handleToggle = useCallback21(() => {
+    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: intl.formatMessage(messages7.table_insert),
+    // shortcutKeys: CODE_BLOCK_SHORTCUT_KEY,
+    Icon: TableIcon
+  };
+}
+
+// src/ui/slash-dropdown-menu/use-slash-dropdown-menu.ts
+function createSlashMenuTexts(formatMessage) {
+  return {
+    // AI
+    continue_writing: {
+      title: formatMessage(messages7.slash_continue_writing),
+      subtext: formatMessage(messages7.slash_continue_writing_subtext),
+      keywords: ["continue", "write", "continue writing", "ai"],
+      badge: AiSparklesIcon,
+      group: formatMessage(messages7.group_ai)
+    },
+    ai_ask_button: {
+      title: formatMessage(messages7.slash_ask_ai),
+      subtext: formatMessage(messages7.slash_ask_ai_subtext),
+      keywords: ["ai", "ask", "generate"],
+      badge: AiSparklesIcon,
+      group: formatMessage(messages7.group_ai)
+    },
+    // Style
+    text: {
+      title: formatMessage(messages7.slash_text),
+      subtext: formatMessage(messages7.slash_text_subtext),
+      keywords: ["p", "paragraph", "text"],
+      badge: TypeIcon,
+      group: formatMessage(messages7.group_style)
+    },
+    heading_1: {
+      title: formatMessage(messages7.slash_heading_1),
+      subtext: formatMessage(messages7.slash_heading_1_subtext),
+      keywords: ["h", "heading1", "h1"],
+      badge: HeadingOneIcon,
+      group: formatMessage(messages7.group_style)
+    },
+    heading_2: {
+      title: formatMessage(messages7.slash_heading_2),
+      subtext: formatMessage(messages7.slash_heading_2_subtext),
+      keywords: ["h2", "heading2", "subheading"],
+      badge: HeadingTwoIcon,
+      group: formatMessage(messages7.group_style)
+    },
+    heading_3: {
+      title: formatMessage(messages7.slash_heading_3),
+      subtext: formatMessage(messages7.slash_heading_3_subtext),
+      keywords: ["h3", "heading3", "subheading"],
+      badge: HeadingThreeIcon,
+      group: formatMessage(messages7.group_style)
+    },
+    bullet_list: {
+      title: formatMessage(messages7.slash_bullet_list),
+      subtext: formatMessage(messages7.slash_bullet_list_subtext),
+      keywords: ["ul", "li", "list", "bulletlist", "bullet list"],
+      badge: ListIcon2,
+      group: formatMessage(messages7.group_style)
+    },
+    ordered_list: {
+      title: formatMessage(messages7.slash_ordered_list),
+      subtext: formatMessage(messages7.slash_ordered_list_subtext),
+      keywords: ["ol", "li", "list", "numberedlist", "numbered list"],
+      badge: ListOrderedIcon,
+      group: formatMessage(messages7.group_style)
+    },
+    task_list: {
+      title: formatMessage(messages7.slash_task_list),
+      subtext: formatMessage(messages7.slash_task_list_subtext),
+      keywords: ["tasklist", "task list", "todo", "checklist"],
+      badge: ListTodoIcon,
+      group: formatMessage(messages7.group_style)
+    },
+    quote: {
+      title: formatMessage(messages7.slash_blockquote),
+      subtext: formatMessage(messages7.slash_blockquote_subtext),
+      keywords: ["quote", "blockquote"],
+      badge: BlockquoteIcon,
+      group: formatMessage(messages7.group_style)
+    },
+    code_block: {
+      title: formatMessage(messages7.slash_code_block),
+      subtext: formatMessage(messages7.slash_code_block_subtext),
+      keywords: ["code", "pre"],
+      badge: CodeBlockIcon,
+      group: formatMessage(messages7.group_style)
+    },
+    // Insert
+    control: {
+      title: formatMessage(messages7.slash_control),
+      subtext: formatMessage(messages7.slash_control_subtext),
+      keywords: ["control"],
+      badge: ControlsIcon,
+      group: formatMessage(messages7.group_insert)
+    },
+    divider: {
+      title: formatMessage(messages7.slash_separator),
+      subtext: formatMessage(messages7.slash_separator_subtext),
+      keywords: ["hr", "horizontalRule", "line", "separator"],
+      badge: MinusIcon,
+      group: formatMessage(messages7.group_insert)
+    },
+    table: {
+      title: formatMessage(messages7.slash_table),
+      subtext: formatMessage(messages7.slash_table_subtext),
+      keywords: ["table", "grid", "spreadsheet"],
+      badge: TableIcon2,
+      group: formatMessage(messages7.group_insert)
+    },
+    table_of_contents: {
+      title: formatMessage(messages7.slash_toc),
+      subtext: formatMessage(messages7.slash_toc_subtext),
+      keywords: ["toc", "table of contents", "index", "navigation", "headings"],
+      badge: TableOfContentsIcon,
+      group: formatMessage(messages7.group_insert)
+    },
+    callout: {
+      title: formatMessage(messages7.slash_callout),
+      subtext: formatMessage(messages7.slash_callout_subtext),
+      keywords: ["callout", "info", "warning", "alert", "note", "tip"],
+      badge: InfoIcon2,
+      group: formatMessage(messages7.group_insert)
+    },
+    callout_warning: {
+      title: formatMessage(messages7.slash_warning),
+      subtext: formatMessage(messages7.slash_warning_subtext),
+      keywords: ["warning", "caution", "attention"],
+      badge: AlertIcon2,
+      group: formatMessage(messages7.group_insert)
+    },
+    math: {
+      title: formatMessage(messages7.slash_formula),
+      subtext: formatMessage(messages7.slash_formula_subtext),
+      keywords: ["math", "latex", "formula", "equation", "katex"],
+      badge: TypeIcon,
+      group: formatMessage(messages7.group_insert)
+    },
+    // Upload
+    image: {
+      title: formatMessage(messages7.slash_image),
+      subtext: formatMessage(messages7.slash_image_subtext),
+      keywords: [
+        "image",
+        "imageUpload",
+        "upload",
+        "img",
+        "picture",
+        "media",
+        "url"
+      ],
+      badge: ImageIcon2,
+      group: formatMessage(messages7.group_upload)
+    }
+  };
+}
+var getItemImplementations = () => {
+  return {
+    // AI
+    continue_writing: {
+      check: (editor) => {
+        const { hasContent } = hasContentAbove(editor);
+        const extensionsReady = isExtensionAvailable(editor, [
+          "ai",
+          "aiAdvanced"
+        ]);
+        return extensionsReady && hasContent;
+      },
+      action: ({ editor }) => {
+        const editorChain = editor.chain().focus();
+        const nodeSelectionPosition = findSelectionPosition({ editor });
+        if (nodeSelectionPosition !== null) {
+          editorChain.setNodeSelection(nodeSelectionPosition);
+        }
+        editorChain.run();
+        editor.chain().focus().aiGenerationShow().run();
+        requestAnimationFrame(() => {
+          const { hasContent, content } = hasContentAbove(editor);
+          const snippet = content.length > 500 ? `...${content.slice(-500)}` : content;
+          const prompt = hasContent ? `Context: ${snippet}
+
+Continue writing from where the text above ends. Write ONLY ONE SENTENCE. DONT REPEAT THE TEXT.` : "Start writing a new paragraph. Write ONLY ONE SENTENCE.";
+          editor.chain().focus().aiTextPrompt({
+            stream: true,
+            format: "rich-text",
+            text: prompt
+          }).run();
+        });
+      }
+    },
+    ai_ask_button: {
+      check: (editor) => isExtensionAvailable(editor, ["ai", "aiAdvanced"]),
+      action: ({ editor }) => {
+        const editorChain = editor.chain().focus();
+        const nodeSelectionPosition = findSelectionPosition({ editor });
+        if (nodeSelectionPosition !== null) {
+          editorChain.setNodeSelection(nodeSelectionPosition);
+        }
+        editorChain.run();
+        editor.chain().focus().aiGenerationShow().run();
+      }
+    },
+    // Style
+    text: {
+      check: (editor) => isNodeInSchema2("paragraph", editor),
+      action: ({ editor }) => {
+        editor.chain().focus().setParagraph().run();
+      }
+    },
+    heading_1: {
+      check: (editor) => isNodeInSchema2("heading", editor),
+      action: ({ editor }) => {
+        editor.chain().focus().toggleHeading({ level: 1 }).run();
+      }
+    },
+    heading_2: {
+      check: (editor) => isNodeInSchema2("heading", editor),
+      action: ({ editor }) => {
+        editor.chain().focus().toggleHeading({ level: 2 }).run();
+      }
+    },
+    heading_3: {
+      check: (editor) => isNodeInSchema2("heading", editor),
+      action: ({ editor }) => {
+        editor.chain().focus().toggleHeading({ level: 3 }).run();
+      }
+    },
+    bullet_list: {
+      check: (editor) => isNodeInSchema2("bulletList", editor),
+      action: ({ editor }) => {
+        editor.chain().focus().toggleBulletList().run();
+      }
+    },
+    ordered_list: {
+      check: (editor) => isNodeInSchema2("orderedList", editor),
+      action: ({ editor }) => {
+        editor.chain().focus().toggleOrderedList().run();
+      }
+    },
+    task_list: {
+      check: (editor) => isNodeInSchema2("taskList", editor),
+      action: ({ editor }) => {
+        editor.chain().focus().toggleTaskList().run();
+      }
+    },
+    quote: {
+      check: (editor) => isNodeInSchema2("blockquote", editor),
+      action: ({ editor }) => {
+        editor.chain().focus().toggleBlockquote().run();
+      }
+    },
+    code_block: {
+      check: (editor) => isNodeInSchema2("codeBlock", editor),
+      action: ({ editor }) => {
+        editor.chain().focus().toggleNode("codeBlock", "paragraph").run();
+      }
+    },
+    // Insert
+    // mention: {
+    //   check: (editor: Editor) =>
+    //     isExtensionAvailable(editor, ["mention", "mentionAdvanced"]),
+    //   action: ({ editor }: { editor: Editor }) => addMentionTrigger(editor),
+    // },
+    // emoji: {
+    //   check: (editor: Editor) =>
+    //     isExtensionAvailable(editor, ["emoji", "emojiPicker"]),
+    //   action: ({ editor }: { editor: Editor }) => addEmojiTrigger(editor),
+    // },
+    divider: {
+      check: (editor) => isNodeInSchema2("horizontalRule", editor),
+      action: ({ editor }) => {
+        editor.chain().focus().setHorizontalRule().run();
+      }
+    },
+    table: {
+      check: (editor) => isNodeInSchema2("table", editor),
+      action: ({ editor }) => toggleTable(editor, { rows: 3, cols: 3, withHeaderRow: true })
+    },
+    control: {
+      check: (editor) => isNodeInSchema2("controlBlock", editor),
+      action: ({ editor }) => {
+        try {
+          return editor.chain().focus().insertControlBlock().run();
+        } catch (e) {
+          console.error(e);
+        }
+      }
+    },
+    table_of_contents: {
+      check: (editor) => isNodeInSchema2("tableOfContentsNode", editor),
+      action: ({ editor }) => {
+        editor.chain().focus().insertTableOfContents().run();
+      }
+    },
+    callout: {
+      check: (editor) => isNodeInSchema2("calloutNode", editor),
+      action: ({ editor }) => {
+        editor.chain().focus().insertCallout("info").run();
+      }
+    },
+    callout_warning: {
+      check: (editor) => isNodeInSchema2("calloutNode", editor),
+      action: ({ editor }) => {
+        editor.chain().focus().insertCallout("warning").run();
+      }
+    },
+    math: {
+      check: (editor) => isNodeInSchema2("mathBlock", editor),
+      action: ({ editor }) => {
+        editor.chain().focus().insertMathBlock().run();
+      }
+    },
+    // Upload
+    image: {
+      check: (editor) => isNodeInSchema2("imageUpload", editor),
+      action: ({ editor }) => {
+        editor.chain().focus().setImageUpload().run();
       }
     }
-    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) {
-      onApplied == null ? void 0 : onApplied({ color: "", label: "Remove highlight" });
+  };
+};
+function organizeItemsByGroups(items, showGroups) {
+  if (!showGroups) {
+    return items.map((item) => ({ ...item, group: "" }));
+  }
+  const groups = {};
+  items.forEach((item) => {
+    const groupLabel = item.group || "";
+    if (!groups[groupLabel]) {
+      groups[groupLabel] = [];
     }
-    return success;
-  }, [editor, onApplied]);
-  useHotkeys(
-    COLOR_HIGHLIGHT_SHORTCUT_KEY,
-    (event) => {
-      event.preventDefault();
-      handleColorHighlight();
+    groups[groupLabel].push(item);
+  });
+  const organizedItems = [];
+  Object.entries(groups).forEach(([, groupItems]) => {
+    organizedItems.push(...groupItems);
+  });
+  return organizedItems;
+}
+var ALL_SLASH_MENU_ITEMS = [
+  "continue_writing",
+  "ai_ask_button",
+  "text",
+  "heading_1",
+  "heading_2",
+  "heading_3",
+  "bullet_list",
+  "ordered_list",
+  "task_list",
+  "quote",
+  "code_block",
+  "control",
+  "divider",
+  "table",
+  "table_of_contents",
+  "callout",
+  "callout_warning",
+  "math",
+  "image"
+];
+function useSlashDropdownMenu(config) {
+  const intl = useIntl13();
+  const getSlashMenuItems = React11.useCallback(
+    (editor) => {
+      const items = [];
+      const texts = createSlashMenuTexts(intl.formatMessage);
+      const enabledItems = (config == null ? void 0 : config.enabledItems) || ALL_SLASH_MENU_ITEMS;
+      const showGroups = (config == null ? void 0 : config.showGroups) !== false;
+      const itemImplementations = getItemImplementations();
+      enabledItems.forEach((itemType) => {
+        var _a;
+        const itemImpl = itemImplementations[itemType];
+        const itemText = texts[itemType];
+        if (itemImpl && itemText && itemImpl.check(editor)) {
+          const item = {
+            onSelect: ({ editor: editor2 }) => itemImpl.action({ editor: editor2 }),
+            ...itemText
+          };
+          if ((_a = config == null ? void 0 : config.itemGroups) == null ? void 0 : _a[itemType]) {
+            item.group = config.itemGroups[itemType];
+          } else if (!showGroups) {
+            item.group = "";
+          }
+          items.push(item);
+        }
+      });
+      if (config == null ? void 0 : config.customItems) {
+        items.push(...config.customItems);
+      }
+      return organizeItemsByGroups(items, showGroups);
     },
-    {
-      enabled: isVisible && canColorHighlightState,
-      enableOnContentEditable: !isMobile,
-      enableOnFormTags: true
-    }
+    [config, intl]
   );
   return {
-    isVisible,
-    isActive,
-    handleColorHighlight,
-    handleRemoveHighlight,
-    canColorHighlight: canColorHighlightState,
-    label: label || intl.formatMessage(messages7.highlight_color),
-    shortcutKeys: COLOR_HIGHLIGHT_SHORTCUT_KEY,
-    Icon: HighlighterIcon
+    getSlashMenuItems,
+    config
   };
 }
 
-// src/ui/color-highlight-button/color-highlight-button.tsx
-import { Fragment as Fragment4, jsx as jsx21, jsxs as jsxs16 } from "react/jsx-runtime";
-var ColorHighlightButton = ({
-  editor: providedEditor,
-  highlightColor,
-  text,
-  hideWhenUnavailable = false,
-  onApplied,
-  showShortcut = false,
-  onClick,
-  children,
-  style,
-  className,
-  ...buttonProps
-}) => {
-  const { editor } = useTiptapEditor8(providedEditor);
-  const {
-    isVisible,
-    canColorHighlight: canColorHighlight2,
-    isActive,
-    handleColorHighlight,
-    label,
-    shortcutKeys
-  } = useColorHighlight({
-    editor,
-    highlightColor,
-    label: text || `Toggle highlight (${highlightColor})`,
-    hideWhenUnavailable,
-    onApplied
-  });
-  const handleClick = useCallback23(
-    (event) => {
-      onClick == null ? void 0 : onClick(event);
-      if (event.defaultPrevented) return;
-      handleColorHighlight();
-    },
-    [handleColorHighlight, onClick]
+// src/ui/slash-dropdown-menu/slash-dropdown-menu.tsx
+import { jsx as jsx22, jsxs as jsxs17 } from "react/jsx-runtime";
+var SlashDropdownMenu = (props) => {
+  const { config, ...restProps } = props;
+  const { getSlashMenuItems } = useSlashDropdownMenu(config);
+  return /* @__PURE__ */ jsx22(
+    SuggestionMenu,
+    {
+      char: "/",
+      pluginKey: "slashDropdownMenu",
+      decorationClass: "tiptap-slash-decoration",
+      decorationContent: "Filter...",
+      selector: "tiptap-slash-dropdown-menu",
+      items: ({ query, editor }) => filterSuggestionItems(getSlashMenuItems(editor), query),
+      ...restProps,
+      children: (props2) => /* @__PURE__ */ jsx22(List, { ...props2, config })
+    }
   );
-  const buttonStyle = useMemo15(
-    () => ({
-      ...style,
-      "--highlight-color": highlightColor
-    }),
-    [highlightColor, style]
+};
+var Item = (props) => {
+  const { item, isSelected, onSelect } = props;
+  const itemRef = React12.useRef(null);
+  React12.useEffect(() => {
+    const selector = document.querySelector(
+      '[data-selector="tiptap-slash-dropdown-menu"]'
+    );
+    if (!itemRef.current || !isSelected || !selector) return;
+    const overflow = getElementOverflowPosition2(itemRef.current, selector);
+    if (overflow === "top") {
+      itemRef.current.scrollIntoView(true);
+    } else if (overflow === "bottom") {
+      itemRef.current.scrollIntoView(false);
+    }
+  }, [isSelected]);
+  const BadgeIcon = item.badge;
+  return /* @__PURE__ */ jsx22(
+    Button6,
+    {
+      ref: itemRef,
+      variant: "ghost",
+      color: "default",
+      startContent: BadgeIcon && /* @__PURE__ */ jsx22(BadgeIcon, {}),
+      "data-active-state": isSelected ? "on" : "off",
+      onClick: onSelect,
+      fullWidth: true,
+      spacing: "start",
+      children: item.title
+    }
   );
-  if (!isVisible) {
+};
+var List = ({
+  items,
+  selectedIndex,
+  onSelect,
+  config
+}) => {
+  const styles = slashDropdownMenu2();
+  const renderedItems = React12.useMemo(() => {
+    const rendered = [];
+    const showGroups = (config == null ? void 0 : config.showGroups) !== false;
+    if (!showGroups) {
+      items.forEach((item, index) => {
+        rendered.push(
+          /* @__PURE__ */ jsx22(
+            Item,
+            {
+              item,
+              isSelected: index === selectedIndex,
+              onSelect: () => onSelect(item)
+            },
+            `item-${index}-${item.title}`
+          )
+        );
+      });
+      return rendered;
+    }
+    const groups = {};
+    items.forEach((item, index) => {
+      const groupLabel = item.group || "";
+      if (!groups[groupLabel]) {
+        groups[groupLabel] = { items: [], indices: [] };
+      }
+      groups[groupLabel].items.push(item);
+      groups[groupLabel].indices.push(index);
+    });
+    Object.entries(groups).forEach(([groupLabel, groupData], groupIndex) => {
+      if (groupIndex > 0) {
+        rendered.push(
+          /* @__PURE__ */ jsx22(
+            Separator,
+            {
+              orientation: "horizontal"
+            },
+            `separator-${groupIndex.toString()}`
+          )
+        );
+      }
+      const groupItems = groupData.items.map((item, itemIndex) => {
+        const originalIndex = groupData.indices[itemIndex];
+        return /* @__PURE__ */ jsx22(
+          Item,
+          {
+            item,
+            isSelected: originalIndex === selectedIndex,
+            onSelect: () => onSelect(item)
+          },
+          `item-${originalIndex}-${item.title}`
+        );
+      });
+      if (groupLabel) {
+        rendered.push(
+          /* @__PURE__ */ jsxs17(
+            "div",
+            {
+              className: styles.cardItemGroup(),
+              children: [
+                /* @__PURE__ */ jsx22("div", { className: styles.cardGroupLabel(), children: groupLabel }),
+                /* @__PURE__ */ jsx22("div", { className: styles.cardGroup(), children: groupItems })
+              ]
+            },
+            `group-${groupIndex}-${groupLabel}`
+          )
+        );
+      } else {
+        rendered.push(...groupItems);
+      }
+    });
+    return rendered;
+  }, [items, selectedIndex, onSelect, config == null ? void 0 : config.showGroups, styles]);
+  if (!renderedItems.length) {
     return null;
   }
-  const styles = colorHighlightButton();
-  return /* @__PURE__ */ jsxs16(
-    ToolbarButton3,
+  return /* @__PURE__ */ jsx22(
+    "div",
     {
-      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__ */ jsx21(
-          "span",
-          {
-            "data-active-state": isActive ? "on" : "off",
-            className: styles.mark()
-          }
-        ),
-        children || /* @__PURE__ */ jsxs16(Fragment4, { children: [
-          /* @__PURE__ */ jsx21(
-            "span",
-            {
-              style: { "--highlight-color": highlightColor }
-            }
-          ),
-          text
-        ] })
-      ]
+      className: styles.card(),
+      style: {
+        maxHeight: "var(--suggestion-menu-max-height)"
+      },
+      children: /* @__PURE__ */ jsx22("div", { className: styles.body(), children: renderedItems })
     }
   );
 };
 
-// src/ui/color-highlight-popover/color-highlight-popover.tsx
-import { jsx as jsx22, jsxs as jsxs17 } from "react/jsx-runtime";
-var ColorHighlightPopoverButton = ({
-  className,
-  children,
-  ...props
-}) => /* @__PURE__ */ jsx22(
-  IconButton8,
-  {
-    type: "button",
-    className,
-    variant: "ghost",
-    color: "default",
-    tabIndex: -1,
-    "aria-label": "Highlight text",
-    tooltip: "Highlight",
-    isIconOnly: !children,
-    ...props,
-    children: children != null ? children : /* @__PURE__ */ jsx22(HighlighterIcon2, {})
-  }
-);
-function ColorHighlightPopoverContent({
-  editor,
-  colors = pickHighlightColorsByValue([
-    "var(--tt-color-highlight-green)",
-    "var(--tt-color-highlight-blue)",
-    "var(--tt-color-highlight-red)",
-    "var(--tt-color-highlight-purple)",
-    "var(--tt-color-highlight-yellow)"
-  ])
-}) {
-  const { handleRemoveHighlight } = useColorHighlight({ editor });
-  const containerRef = useRef11(null);
-  const menuItems = useMemo16(
-    () => [...colors, { label: "Remove highlight", value: "none" }],
-    [colors]
-  );
-  const { selectedIndex } = useMenuNavigation({
-    containerRef,
-    items: menuItems,
-    orientation: "both",
-    onSelect: (item) => {
-      if (!containerRef.current) return false;
-      const highlightedElement = containerRef.current.querySelector(
-        '[data-highlighted="true"]'
-      );
-      if (highlightedElement) highlightedElement.click();
-      if (item.value === "none") handleRemoveHighlight();
-    },
-    autoSelectFirstItem: false
+// src/presets/basic/editor-header.tsx
+import { useTiptapEditor as useTiptapEditor26 } from "@kopexa/editor-utils";
+import { MoreVerticalIcon } from "@kopexa/icons";
+import { Popover as Popover3 } from "@kopexa/popover";
+import {
+  Toolbar as Toolbar2,
+  ToolbarButton as ToolbarButton8,
+  ToolbarGroup as ToolbarGroup2,
+  ToolbarSeparator as ToolbarSeparator3
+} from "@kopexa/toolbar";
+import { useIsMobile as useIsMobile3 } from "@kopexa/use-is-mobile";
+import { useEffect as useEffect31, useRef as useRef12, useState as useState30 } from "react";
+import { useIntl as useIntl18 } from "react-intl";
+
+// src/hooks/use-cursor-visibility.ts
+import * as React14 from "react";
+
+// src/hooks/use-window-size.ts
+import * as React13 from "react";
+function useWindowSize() {
+  const [windowSize, setWindowSize] = React13.useState({
+    width: 0,
+    height: 0,
+    offsetTop: 0
   });
-  return /* @__PURE__ */ jsxs17("div", { ref: containerRef, className: "flex gap-1 items-center", children: [
-    /* @__PURE__ */ jsx22(
-      "div",
-      {
-        className: "flex items-center gap-1 outline-none",
-        "data-orientation": "horizontal",
-        children: colors.map((color, index) => /* @__PURE__ */ jsx22(
-          ColorHighlightButton,
-          {
-            editor,
-            highlightColor: color.value,
-            "aria-label": `${color.label} highlight color`,
-            tabIndex: index === selectedIndex ? 0 : -1,
-            "data-highlighted": selectedIndex === index
-          },
-          color.value
-        ))
-      }
-    ),
-    /* @__PURE__ */ jsx22(ToolbarSeparator2, { orientation: "vertical" }),
-    /* @__PURE__ */ jsx22("div", { className: "tiptap-button-group", children: /* @__PURE__ */ jsx22(
-      IconButton8,
-      {
-        onClick: handleRemoveHighlight,
-        "aria-label": "Remove highlight",
-        tabIndex: selectedIndex === colors.length ? 0 : -1,
-        type: "button",
-        role: "menuitem",
-        variant: "ghost",
-        color: "default",
-        "data-highlighted": selectedIndex === colors.length,
-        children: /* @__PURE__ */ jsx22(BanIcon, {})
+  React13.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;
 }
-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
+
+// src/hooks/use-cursor-visibility.ts
+function useCursorVisibility({
+  editor,
+  overlayHeight = 0,
+  elementRef = null
 }) {
-  const { editor } = useTiptapEditor9(providedEditor);
-  const [isOpen, setIsOpen] = useState22(false);
-  const { isVisible, canColorHighlight: canColorHighlight2, isActive, label } = useColorHighlight({
-    editor,
-    hideWhenUnavailable,
-    onApplied
+  const { height: windowHeight } = useWindowSize();
+  const [rect, setRect] = React14.useState({
+    x: 0,
+    y: 0,
+    width: 0,
+    height: 0
   });
-  if (!isVisible) return null;
-  return /* @__PURE__ */ jsxs17(Popover2.Root, { open: isOpen, onOpenChange: setIsOpen, spacing: "dense", children: [
-    /* @__PURE__ */ jsx22(
-      Popover2.Trigger,
-      {
-        render: /* @__PURE__ */ jsx22(
-          ColorHighlightPopoverButton,
-          {
-            disabled: !canColorHighlight2,
-            "data-disabled": !canColorHighlight2,
-            "data-active-state": isActive ? "on" : "off",
-            "aria-pressed": isActive,
-            "aria-label": label,
-            title: label,
-            ...props
+  const updateRect = React14.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]);
+  React14.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]);
+  React14.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"
+            });
           }
-        )
+        }
       }
-    ),
-    /* @__PURE__ */ jsx22(Popover2.Content, { "aria-label": "Highlight colors", children: /* @__PURE__ */ jsx22(ColorHighlightPopoverContent, { editor, colors }) })
-  ] });
+    };
+    ensureCursorVisibility();
+  }, [editor, overlayHeight, windowHeight, rect.height]);
+  return rect;
 }
 
 // src/ui/list-dropdown-menu/index.tsx