@kopexa/tiptap 17.11.4 → 17.12.0

package/dist/index.js

@@ -4441,481 +4441,22 @@ function useUiEditorState(editor) {
 }
 
 // src/ui/bubble-menu/index.tsx
-var import_toolbar3 = require("@kopexa/toolbar");
+var import_toolbar5 = require("@kopexa/toolbar");
 var import_menus = require("@tiptap/react/menus");
 
-// src/ui/link-popover/link-popover.tsx
-var import_button8 = require("@kopexa/button");
+// src/ui/color-highlight-button/color-highlight-button.tsx
 var import_editor_utils6 = require("@kopexa/editor-utils");
-var import_icons9 = require("@kopexa/icons");
-var import_input3 = require("@kopexa/input");
-var import_popover = require("@kopexa/popover");
+var import_theme7 = require("@kopexa/theme");
 var import_toolbar = require("@kopexa/toolbar");
 var import_react37 = require("react");
 
-// src/ui/link-popover/use-link-popover.ts
+// src/ui/color-highlight-button/use-color-highlight.ts
 var import_editor_utils5 = require("@kopexa/editor-utils");
 var import_icons8 = require("@kopexa/icons");
+var import_use_is_mobile = require("@kopexa/use-is-mobile");
 var React7 = __toESM(require("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 = (0, import_editor_utils5.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 } = (0, import_editor_utils5.useTiptapEditor)(providedEditor);
-  const { isVisible, canSet, isActive } = useLinkState({
-    editor,
-    hideWhenUnavailable
-  });
-  const linkHandler = useLinkHandler({
-    editor,
-    onSetLink
-  });
-  return {
-    isVisible,
-    canSet,
-    isActive,
-    label: "Link",
-    Icon: import_icons8.LinkIcon,
-    ...linkHandler
-  };
-}
-
-// src/ui/link-popover/link-popover.tsx
-var import_jsx_runtime16 = require("react/jsx-runtime");
-var LinkButton = ({ className, children, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-    import_toolbar.ToolbarButton,
-    {
-      type: "button",
-      className,
-      variant: "ghost",
-      color: "default",
-      tabIndex: -1,
-      "aria-label": "Link",
-      title: "Link",
-      isIconOnly: !children,
-      ...props,
-      children: children || /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_icons9.LinkIcon, {})
-    }
-  );
-};
-var LinkMain = ({
-  url,
-  setUrl,
-  setLink,
-  removeLink,
-  openLink,
-  isActive,
-  onSave
-}) => {
-  const [isEditing, setIsEditing] = (0, import_react37.useState)(!isActive || !url);
-  (0, import_react37.useEffect)(() => {
-    setIsEditing(!isActive || !url);
-  }, [isActive, url]);
-  const handleKeyDown = (event) => {
-    if (event.key === "Enter") {
-      event.preventDefault();
-      setLink();
-      setIsEditing(false);
-      onSave == null ? void 0 : onSave();
-    } else if (event.key === "Escape") {
-      event.preventDefault();
-      setIsEditing(false);
-    }
-  };
-  const handleSave = () => {
-    setLink();
-    setIsEditing(false);
-    onSave == null ? void 0 : onSave();
-  };
-  const handleEdit = () => {
-    setIsEditing(true);
-  };
-  if (isEditing) {
-    return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "flex items-center gap-1 min-w-[280px]", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-        import_input3.Input,
-        {
-          type: "url",
-          placeholder: "Enter URL...",
-          value: url,
-          onChange: (e) => setUrl(e.target.value),
-          onKeyDown: handleKeyDown,
-          autoComplete: "off",
-          autoCorrect: "off",
-          autoCapitalize: "off",
-          className: "flex-1 h-8 text-sm",
-          autoFocus: true
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-        import_button8.IconButton,
-        {
-          type: "button",
-          size: "sm",
-          variant: "ghost",
-          onClick: handleSave,
-          "aria-label": "Save link",
-          disabled: !url,
-          children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_icons9.CheckIcon, { className: "size-4" })
-        }
-      )
-    ] });
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "flex items-center gap-1 min-w-[280px]", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-      "a",
-      {
-        href: url,
-        target: "_blank",
-        rel: "noopener noreferrer",
-        className: "flex-1 text-sm text-primary truncate max-w-[200px] hover:underline px-2",
-        onClick: (e) => {
-          e.preventDefault();
-          openLink();
-        },
-        children: url
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "flex items-center gap-0.5 border-l pl-1 ml-1", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-        import_button8.IconButton,
-        {
-          type: "button",
-          size: "sm",
-          variant: "ghost",
-          onClick: openLink,
-          "aria-label": "Open link in new tab",
-          children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_icons9.ExternalLinkIcon, { className: "size-4" })
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-        import_button8.IconButton,
-        {
-          type: "button",
-          size: "sm",
-          variant: "ghost",
-          onClick: handleEdit,
-          "aria-label": "Edit link",
-          children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_icons9.EditIcon, { className: "size-4" })
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-        import_button8.IconButton,
-        {
-          type: "button",
-          size: "sm",
-          variant: "ghost",
-          onClick: removeLink,
-          "aria-label": "Remove link",
-          children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_icons9.TrashIcon, { className: "size-4" })
-        }
-      )
-    ] })
-  ] });
-};
-function LinkPopover({
-  editor: providedEditor,
-  hideWhenUnavailable = false,
-  onSetLink,
-  onOpenChange,
-  autoOpenOnLinkActive = true,
-  onClick,
-  children,
-  ...buttonProps
-}) {
-  const { editor } = (0, import_editor_utils6.useTiptapEditor)(providedEditor);
-  const [isOpen, setIsOpen] = (0, import_react37.useState)(false);
-  const {
-    isVisible,
-    canSet,
-    isActive,
-    url,
-    setUrl,
-    setLink,
-    removeLink,
-    openLink,
-    label
-  } = useLinkPopover({
-    editor,
-    hideWhenUnavailable,
-    onSetLink
-  });
-  const handleOnOpenChange = (0, import_react37.useCallback)(
-    (nextIsOpen) => {
-      setIsOpen(nextIsOpen);
-      onOpenChange == null ? void 0 : onOpenChange(nextIsOpen);
-    },
-    [onOpenChange]
-  );
-  const handleSetLink = (0, import_react37.useCallback)(() => {
-    setLink();
-    setIsOpen(false);
-  }, [setLink]);
-  const handleClick = (0, import_react37.useCallback)(
-    (event) => {
-      onClick == null ? void 0 : onClick(event);
-      if (event.defaultPrevented) return;
-      setIsOpen(!isOpen);
-    },
-    [onClick, isOpen]
-  );
-  (0, import_react37.useEffect)(() => {
-    if (autoOpenOnLinkActive && isActive) {
-      setIsOpen(true);
-    }
-  }, [autoOpenOnLinkActive, isActive]);
-  if (!isVisible) {
-    return null;
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
-    import_popover.Popover.Root,
-    {
-      open: isOpen,
-      onOpenChange: handleOnOpenChange,
-      spacing: "dense",
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-          import_popover.Popover.Trigger,
-          {
-            render: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-              LinkButton,
-              {
-                "data-disabled": !canSet,
-                disabled: !canSet,
-                "data-active-state": isActive ? "on" : "off",
-                "aria-label": label,
-                "aria-pressed": isActive,
-                onClick: handleClick,
-                ...buttonProps
-              }
-            )
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_popover.Popover.Content, { children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-          LinkMain,
-          {
-            url,
-            setUrl,
-            setLink: handleSetLink,
-            removeLink,
-            openLink,
-            isActive,
-            onSave: () => setIsOpen(false)
-          }
-        ) })
-      ]
-    }
-  );
-}
-LinkButton.displayName = "LinkButton";
-
-// src/ui/mark-button/index.tsx
-var import_editor_utils7 = require("@kopexa/editor-utils");
-var import_icons10 = require("@kopexa/icons");
-var import_toolbar2 = require("@kopexa/toolbar");
-var import_react38 = require("@tiptap/react");
-var import_react39 = require("react");
-var import_react_intl16 = require("react-intl");
+var import_react_hotkeys_hook = require("react-hotkeys-hook");
+var import_react_intl16 = require("react-intl");
 
 // src/ui/messages.ts
 var import_react_intl15 = require("react-intl");
@@ -5333,1588 +4874,2070 @@ var messages7 = (0, import_react_intl15.defineMessages)({
   }
 });
 
-// src/ui/mark-button/index.tsx
-var import_jsx_runtime17 = require("react/jsx-runtime");
-var markIcons = {
-  bold: import_icons10.BoldIcon,
-  italic: import_icons10.ItalicIcon,
-  underline: import_icons10.UnderlineIcon,
-  strike: import_icons10.StrikeIcon,
-  code: import_icons10.CodeIcon,
-  superscript: import_icons10.SuperscriptIcon,
-  subscript: import_icons10.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) {
+// 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 canColorHighlight(editor) {
   if (!editor || !editor.isEditable) return false;
-  if (!(0, import_editor_utils7.isMarkInSchema)(type, editor) || (0, import_editor_utils7.isNodeTypeSelected)(editor, ["image"]))
+  if (!(0, import_editor_utils5.isMarkInSchema)("highlight", editor) || (0, import_editor_utils5.isNodeTypeSelected)(editor, ["image"]))
     return false;
-  return editor.can().toggleMark(type);
-}
-function isMarkActive(editor, type) {
-  if (!editor) return false;
-  return editor.isActive(type);
+  return editor.can().setMark("highlight");
 }
-function toggleMark(editor, type) {
-  if (!editor) return;
-  editor.chain().focus().toggleMark(type).run();
+function isColorHighlightActive(editor, highlightColor) {
+  if (!editor || !editor.isEditable) return false;
+  return highlightColor ? editor.isActive("highlight", { color: highlightColor }) : editor.isActive("highlight");
 }
-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 removeHighlight(editor) {
+  if (!editor || !editor.isEditable) return false;
+  if (!canColorHighlight(editor)) return false;
+  return editor.chain().focus().unsetMark("highlight").run();
 }
-function shouldShowMarkButton(params) {
-  const { editor, type, hideWhenUnavailable, markInSchema } = params;
-  if (!markInSchema || !editor) {
-    return false;
-  }
-  if (hideWhenUnavailable) {
-    if ((0, import_react38.isNodeSelection)(editor.state.selection) || !canToggleMark(editor, type)) {
-      return false;
-    }
+function shouldShowButton(props) {
+  const { editor, hideWhenUnavailable } = props;
+  if (!editor || !editor.isEditable) return false;
+  if (!(0, import_editor_utils5.isMarkInSchema)("highlight", editor)) return false;
+  if (hideWhenUnavailable && !editor.isActive("code")) {
+    return canColorHighlight(editor);
   }
   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) {
+function useColorHighlight(config) {
+  const {
+    editor: providedEditor,
+    label,
+    highlightColor,
+    hideWhenUnavailable = false,
+    onApplied
+  } = config;
   const intl = (0, import_react_intl16.useIntl)();
-  const markInSchema = (0, import_editor_utils7.isMarkInSchema)(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 } = (0, import_editor_utils5.useTiptapEditor)(providedEditor);
+  const isMobile = (0, import_use_is_mobile.useIsMobile)();
+  const [isVisible, setIsVisible] = React7.useState(true);
+  const canColorHighlightState = canColorHighlight(editor);
+  const isActive = isColorHighlightActive(editor, highlightColor);
+  React7.useEffect(() => {
+    if (!editor) return;
+    const handleSelectionUpdate = () => {
+      setIsVisible(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]);
+  (0, import_react_hotkeys_hook.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: import_icons8.HighlighterIcon
   };
 }
-var MarkButton = ({
+
+// src/ui/color-highlight-button/color-highlight-button.tsx
+var import_jsx_runtime16 = require("react/jsx-runtime");
+var ColorHighlightButton = ({
   editor: providedEditor,
-  type,
+  highlightColor,
   text,
   hideWhenUnavailable = false,
-  className = "",
-  disabled,
+  onApplied,
+  showShortcut = false,
   onClick,
   children,
+  style,
+  className,
   ...buttonProps
 }) => {
-  const { editor } = (0, import_editor_utils7.useTiptapEditor)(providedEditor);
+  const { editor } = (0, import_editor_utils6.useTiptapEditor)(providedEditor);
   const {
-    markInSchema,
-    isDisabled,
+    isVisible,
+    canColorHighlight: canColorHighlight2,
     isActive,
-    Icon,
-    shortcutKey,
-    formattedName
-  } = useMarkState(editor, type, disabled);
-  const handleClick = (0, import_react39.useCallback)(
-    (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 = (0, import_react37.useCallback)(
+    (event) => {
+      onClick == null ? void 0 : onClick(event);
+      if (event.defaultPrevented) return;
+      handleColorHighlight();
     },
-    [onClick, isDisabled, editor, type]
+    [handleColorHighlight, onClick]
   );
-  const show = (0, import_react39.useMemo)(() => {
-    return shouldShowMarkButton({
-      editor,
-      type,
-      hideWhenUnavailable,
-      markInSchema
-    });
-  }, [editor, type, hideWhenUnavailable, markInSchema]);
-  if (!show || !editor || !editor.isEditable) {
+  const buttonStyle = (0, import_react37.useMemo)(
+    () => ({
+      ...style,
+      "--highlight-color": highlightColor
+    }),
+    [highlightColor, style]
+  );
+  if (!isVisible) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-    import_toolbar2.ToolbarButton,
+  const styles = (0, import_theme7.colorHighlightButton)();
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+    import_toolbar.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__ */ (0, import_jsx_runtime17.jsx)(Icon, {})
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+          "span",
+          {
+            "data-active-state": isActive ? "on" : "off",
+            className: styles.mark()
+          }
+        ),
+        children || /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+            "span",
+            {
+              style: { "--highlight-color": highlightColor }
+            }
+          ),
+          text
+        ] })
+      ]
     }
   );
 };
 
-// src/ui/bubble-menu/index.tsx
-var import_jsx_runtime18 = require("react/jsx-runtime");
-function BubbleMenu({ editor }) {
-  if (!editor) {
-    return null;
+// src/ui/color-highlight-popover/color-highlight-popover.tsx
+var import_button8 = require("@kopexa/button");
+var import_editor_utils7 = require("@kopexa/editor-utils");
+var import_icons9 = require("@kopexa/icons");
+var import_popover = require("@kopexa/popover");
+var import_toolbar2 = require("@kopexa/toolbar");
+var import_react38 = require("react");
+var import_jsx_runtime17 = require("react/jsx-runtime");
+var ColorHighlightPopoverButton = ({
+  className,
+  children,
+  ...props
+}) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+  import_button8.IconButton,
+  {
+    type: "button",
+    className,
+    variant: "ghost",
+    color: "default",
+    tabIndex: -1,
+    "aria-label": "Highlight text",
+    tooltip: "Highlight",
+    isIconOnly: !children,
+    ...props,
+    children: children != null ? children : /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_icons9.HighlighterIcon, {})
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-    import_menus.BubbleMenu,
-    {
-      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__ */ (0, import_jsx_runtime18.jsxs)(import_toolbar3.Toolbar, { radius: "md", border: "none", className: "p-1", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_toolbar3.ToolbarGroup, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(MarkButton, { type: "bold" }),
-          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(MarkButton, { type: "italic" }),
-          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(MarkButton, { type: "strike" }),
-          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(MarkButton, { type: "code" })
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_toolbar3.ToolbarSeparator, {}),
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_toolbar3.ToolbarGroup, { children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(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 = (0, import_react38.useRef)(null);
+  const menuItems = (0, import_react38.useMemo)(
+    () => [...colors, { label: "Remove highlight", value: "none" }],
+    [colors]
   );
+  const { selectedIndex } = useMenuNavigation({
+    containerRef,
+    items: menuItems,
+    orientation: "both",
+    onSelect: (item) => {
+      if (!containerRef.current) return false;
+      const highlightedElement = containerRef.current.querySelector(
+        '[data-highlighted="true"]'
+      );
+      if (highlightedElement) highlightedElement.click();
+      if (item.value === "none") handleRemoveHighlight();
+    },
+    autoSelectFirstItem: false
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { ref: containerRef, className: "flex gap-1 items-center", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+      "div",
+      {
+        className: "flex items-center gap-1 outline-none",
+        "data-orientation": "horizontal",
+        children: colors.map((color, index) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+          ColorHighlightButton,
+          {
+            editor,
+            highlightColor: color.value,
+            "aria-label": `${color.label} highlight color`,
+            tabIndex: index === selectedIndex ? 0 : -1,
+            "data-highlighted": selectedIndex === index
+          },
+          color.value
+        ))
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_toolbar2.ToolbarSeparator, { orientation: "vertical" }),
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "tiptap-button-group", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+      import_button8.IconButton,
+      {
+        onClick: handleRemoveHighlight,
+        "aria-label": "Remove highlight",
+        tabIndex: selectedIndex === colors.length ? 0 : -1,
+        type: "button",
+        role: "menuitem",
+        variant: "ghost",
+        color: "default",
+        "data-highlighted": selectedIndex === colors.length,
+        children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_icons9.BanIcon, {})
+      }
+    ) })
+  ] });
+}
+function ColorHighlightPopover({
+  editor: providedEditor,
+  colors = pickHighlightColorsByValue([
+    "var(--tt-color-highlight-green)",
+    "var(--tt-color-highlight-blue)",
+    "var(--tt-color-highlight-red)",
+    "var(--tt-color-highlight-purple)",
+    "var(--tt-color-highlight-yellow)"
+  ]),
+  hideWhenUnavailable = false,
+  onApplied,
+  ...props
+}) {
+  const { editor } = (0, import_editor_utils7.useTiptapEditor)(providedEditor);
+  const [isOpen, setIsOpen] = (0, import_react38.useState)(false);
+  const { isVisible, canColorHighlight: canColorHighlight2, isActive, label } = useColorHighlight({
+    editor,
+    hideWhenUnavailable,
+    onApplied
+  });
+  if (!isVisible) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_popover.Popover.Root, { open: isOpen, onOpenChange: setIsOpen, spacing: "dense", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+      import_popover.Popover.Trigger,
+      {
+        render: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+          ColorHighlightPopoverButton,
+          {
+            disabled: !canColorHighlight2,
+            "data-disabled": !canColorHighlight2,
+            "data-active-state": isActive ? "on" : "off",
+            "aria-pressed": isActive,
+            "aria-label": label,
+            title: label,
+            ...props
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_popover.Popover.Content, { "aria-label": "Highlight colors", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ColorHighlightPopoverContent, { editor, colors }) })
+  ] });
 }
 
-// src/ui/copy-anchor-link-button/use-scroll-to-hash.ts
-var import_editor_utils8 = require("@kopexa/editor-utils");
-var React9 = __toESM(require("react"));
+// src/ui/link-popover/link-popover.tsx
+var import_button9 = require("@kopexa/button");
+var import_editor_utils9 = require("@kopexa/editor-utils");
+var import_icons11 = require("@kopexa/icons");
+var import_input3 = require("@kopexa/input");
+var import_popover2 = require("@kopexa/popover");
+var import_toolbar3 = require("@kopexa/toolbar");
+var import_react39 = require("react");
 
-// src/hooks/use-floating-toolbar-visibility.ts
-var import_state6 = require("@tiptap/pm/state");
-var import_react40 = require("@tiptap/react");
+// src/ui/link-popover/use-link-popover.ts
+var import_editor_utils8 = require("@kopexa/editor-utils");
+var import_icons10 = require("@kopexa/icons");
 var React8 = __toESM(require("react"));
-var HIDE_FLOATING_META = "hideFloatingToolbar";
-var selectNodeAndHideFloating = (editor, pos) => {
-  if (!editor) return;
-  const { state, view } = editor;
-  view.dispatch(
-    state.tr.setSelection(import_state6.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 } = (0, import_editor_utils8.useTiptapEditor)(providedEditor);
-  const scrollToNode = React9.useCallback(
-    (id) => {
-      var _a, _b, _c;
-      if (!editor) return false;
-      const attributeName = (_c = (_b = (_a = (0, import_editor_utils8.getEditorExtension)(editor, "uniqueID")) == null ? void 0 : _a.options) == null ? void 0 : _b.attributeName) != null ? _c : "data-id";
-      let position = null;
-      editor.state.doc.descendants((node, pos) => {
-        var _a2;
-        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);
+    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"));
     };
-  }, [handleScroll]);
-  return { scrollToHash: scrollToNode };
-}
-
-// src/ui/link-bubble/index.tsx
-var import_button9 = require("@kopexa/button");
-var import_icons11 = require("@kopexa/icons");
-var import_input4 = require("@kopexa/input");
-var import_menus2 = require("@tiptap/react/menus");
-var import_react41 = require("react");
-var import_react_intl17 = require("react-intl");
-var import_jsx_runtime19 = require("react/jsx-runtime");
-function LinkBubble({ editor }) {
-  const intl = (0, import_react_intl17.useIntl)();
-  const [isEditing, setIsEditing] = (0, import_react41.useState)(false);
-  const [url, setUrl] = (0, import_react41.useState)("");
-  const getCurrentUrl = (0, import_react41.useCallback)(() => {
-    if (!editor) return "";
-    const attrs = editor.getAttributes("link");
-    return attrs.href || "";
-  }, [editor]);
-  (0, import_react41.useEffect)(() => {
-    const isLinkActive2 = editor == null ? void 0 : editor.isActive("link");
-    if (isLinkActive2) {
-      setUrl(getCurrentUrl());
-      setIsEditing(false);
-    }
-  }, [editor, getCurrentUrl]);
-  const handleOpenLink = (0, import_react41.useCallback)(() => {
-    const href = getCurrentUrl();
-    if (href) {
-      window.open(href, "_blank", "noopener,noreferrer");
+    if (abortSignal) {
+      abortSignal.addEventListener("abort", abortHandler);
     }
-  }, [getCurrentUrl]);
-  const handleRemoveLink = (0, import_react41.useCallback)(() => {
-    editor == null ? void 0 : editor.chain().focus().unsetLink().run();
-  }, [editor]);
-  const handleEdit = (0, import_react41.useCallback)(() => {
-    setUrl(getCurrentUrl());
-    setIsEditing(true);
-  }, [getCurrentUrl]);
-  const handleSave = (0, import_react41.useCallback)(() => {
-    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 = (0, import_react41.useCallback)(
-    (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__ */ (0, import_jsx_runtime19.jsx)(
-    import_menus2.BubbleMenu,
-    {
-      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__ */ (0, import_jsx_runtime19.jsx)("div", { className: "flex items-center gap-1 p-1.5 min-w-[280px]", children: isEditing ? /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_jsx_runtime19.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-          import_input4.Input,
-          {
-            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__ */ (0, import_jsx_runtime19.jsx)(
-          import_button9.IconButton,
-          {
-            type: "button",
-            size: "sm",
-            variant: "ghost",
-            onClick: handleSave,
-            "aria-label": intl.formatMessage(messages7.link_save),
-            children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_icons11.EditIcon, { className: "size-4" })
-          }
-        )
-      ] }) : /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_jsx_runtime19.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-          "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__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex items-center gap-0.5 border-l pl-1 ml-1", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-            import_button9.IconButton,
-            {
-              type: "button",
-              size: "sm",
-              variant: "ghost",
-              onClick: handleOpenLink,
-              "aria-label": intl.formatMessage(messages7.link_open),
-              children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_icons11.ExternalLinkIcon, { className: "size-4" })
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-            import_button9.IconButton,
-            {
-              type: "button",
-              size: "sm",
-              variant: "ghost",
-              onClick: handleEdit,
-              "aria-label": intl.formatMessage(messages7.link_edit),
-              children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_icons11.EditIcon, { className: "size-4" })
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-            import_button9.IconButton,
-            {
-              type: "button",
-              size: "sm",
-              variant: "ghost",
-              onClick: handleRemoveLink,
-              "aria-label": intl.formatMessage(messages7.link_remove),
-              children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_icons11.TrashIcon, { 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
-var import_button10 = require("@kopexa/button");
-var import_editor_utils11 = require("@kopexa/editor-utils");
-var import_separator = require("@kopexa/separator");
-var import_theme7 = require("@kopexa/theme");
-var React11 = __toESM(require("react"));
-
-// src/ui/slash-dropdown-menu/use-slash-dropdown-menu.ts
-var import_editor_utils10 = require("@kopexa/editor-utils");
-var import_icons13 = require("@kopexa/icons");
-var React10 = __toESM(require("react"));
-var import_react_intl19 = require("react-intl");
-
-// src/ui/table-button/use-table.ts
-var import_editor_utils9 = require("@kopexa/editor-utils");
-var import_icons12 = require("@kopexa/icons");
-var import_react42 = require("@tiptap/react");
-var import_react43 = require("react");
-var import_react_intl18 = require("react-intl");
-function canToggle(editor) {
-  if (!editor || !editor.isEditable) return false;
-  if (!(0, import_editor_utils9.isNodeInSchema)("table", editor) || (0, import_editor_utils9.isNodeTypeSelected)(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 (!(0, import_editor_utils9.isNodeInSchema)("table", editor)) return false;
-  if (hideWhenUnavailable) {
-    if ((0, import_react42.isNodeSelection)(editor.state.selection) || !canToggle) {
-      return false;
-    }
+  return editor.isActive("link");
+}
+function shouldShowLinkButton(props) {
+  const { editor, hideWhenUnavailable } = props;
+  const linkInSchema = (0, import_editor_utils8.isMarkInSchema)("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 = (0, import_react_intl18.useIntl)();
-  const { editor } = (0, import_editor_utils9.useTiptapEditor)(providedEditor);
-  const [isVisible, setIsVisible] = (0, import_react43.useState)(true);
-  const canToggleState = canToggle(editor);
-  const isActive = (editor == null ? void 0 : editor.isActive("table")) || false;
-  (0, import_react43.useEffect)(() => {
+function useLinkHandler(props) {
+  const { editor, onSetLink } = props;
+  const [url, setUrl] = React8.useState(null);
+  React8.useEffect(() => {
     if (!editor) return;
-    const handleSelectionUpdate = () => {
-      setIsVisible(shouldShowButton({ editor, hideWhenUnavailable }));
+    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 || "");
     };
-    handleSelectionUpdate();
-    editor.on("selectionUpdate", handleSelectionUpdate);
+    editor.on("selectionUpdate", updateLinkState);
     return () => {
-      editor.off("selectionUpdate", handleSelectionUpdate);
+      editor.off("selectionUpdate", updateLinkState);
     };
-  }, [editor, hideWhenUnavailable]);
-  const handleToggle = (0, import_react43.useCallback)(() => {
-    if (!editor) return false;
-    const success = toggleTable(editor);
-    if (success) {
-      onToggled == null ? void 0 : onToggled();
+  }, [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 });
     }
-    return success;
-  }, [editor, onToggled]);
-  return {
-    isVisible,
-    isActive,
-    handleToggle,
-    canToggle: canToggleState,
-    label: intl.formatMessage(messages7.table_insert),
-    // shortcutKeys: CODE_BLOCK_SHORTCUT_KEY,
-    Icon: import_icons12.TableIcon
+    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
   };
 }
-
-// src/ui/slash-dropdown-menu/use-slash-dropdown-menu.ts
-function createSlashMenuTexts(formatMessage) {
+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(
+        shouldShowLinkButton({
+          editor,
+          hideWhenUnavailable
+        })
+      );
+    };
+    handleSelectionUpdate();
+    editor.on("selectionUpdate", handleSelectionUpdate);
+    return () => {
+      editor.off("selectionUpdate", handleSelectionUpdate);
+    };
+  }, [editor, hideWhenUnavailable]);
   return {
-    // AI
-    continue_writing: {
-      title: formatMessage(messages7.slash_continue_writing),
-      subtext: formatMessage(messages7.slash_continue_writing_subtext),
-      keywords: ["continue", "write", "continue writing", "ai"],
-      badge: import_icons13.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: import_icons13.AiSparklesIcon,
-      group: formatMessage(messages7.group_ai)
-    },
-    // Style
-    text: {
-      title: formatMessage(messages7.slash_text),
-      subtext: formatMessage(messages7.slash_text_subtext),
-      keywords: ["p", "paragraph", "text"],
-      badge: import_icons13.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: import_icons13.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: import_icons13.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: import_icons13.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: import_icons13.ListIcon,
-      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: import_icons13.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: import_icons13.ListTodoIcon,
-      group: formatMessage(messages7.group_style)
-    },
-    quote: {
-      title: formatMessage(messages7.slash_blockquote),
-      subtext: formatMessage(messages7.slash_blockquote_subtext),
-      keywords: ["quote", "blockquote"],
-      badge: import_icons13.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: import_icons13.CodeBlockIcon,
-      group: formatMessage(messages7.group_style)
-    },
-    // Insert
-    control: {
-      title: formatMessage(messages7.slash_control),
-      subtext: formatMessage(messages7.slash_control_subtext),
-      keywords: ["control"],
-      badge: import_icons13.ControlsIcon,
-      group: formatMessage(messages7.group_insert)
-    },
-    divider: {
-      title: formatMessage(messages7.slash_separator),
-      subtext: formatMessage(messages7.slash_separator_subtext),
-      keywords: ["hr", "horizontalRule", "line", "separator"],
-      badge: import_icons13.MinusIcon,
-      group: formatMessage(messages7.group_insert)
-    },
-    table: {
-      title: formatMessage(messages7.slash_table),
-      subtext: formatMessage(messages7.slash_table_subtext),
-      keywords: ["table", "grid", "spreadsheet"],
-      badge: import_icons13.TableIcon,
-      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: import_icons13.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: import_icons13.InfoIcon,
-      group: formatMessage(messages7.group_insert)
-    },
-    callout_warning: {
-      title: formatMessage(messages7.slash_warning),
-      subtext: formatMessage(messages7.slash_warning_subtext),
-      keywords: ["warning", "caution", "attention"],
-      badge: import_icons13.AlertIcon,
-      group: formatMessage(messages7.group_insert)
-    },
-    math: {
-      title: formatMessage(messages7.slash_formula),
-      subtext: formatMessage(messages7.slash_formula_subtext),
-      keywords: ["math", "latex", "formula", "equation", "katex"],
-      badge: import_icons13.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: import_icons13.ImageIcon,
-      group: formatMessage(messages7.group_upload)
-    }
+    isVisible,
+    canSet,
+    isActive
   };
 }
-var getItemImplementations = () => {
+function useLinkPopover(config) {
+  const {
+    editor: providedEditor,
+    hideWhenUnavailable = false,
+    onSetLink
+  } = config || {};
+  const { editor } = (0, import_editor_utils8.useTiptapEditor)(providedEditor);
+  const { isVisible, canSet, isActive } = useLinkState({
+    editor,
+    hideWhenUnavailable
+  });
+  const linkHandler = useLinkHandler({
+    editor,
+    onSetLink
+  });
   return {
-    // AI
-    continue_writing: {
-      check: (editor) => {
-        const { hasContent } = (0, import_editor_utils10.hasContentAbove)(editor);
-        const extensionsReady = (0, import_editor_utils10.isExtensionAvailable)(editor, [
-          "ai",
-          "aiAdvanced"
-        ]);
-        return extensionsReady && hasContent;
-      },
-      action: ({ editor }) => {
-        const editorChain = editor.chain().focus();
-        const nodeSelectionPosition = (0, import_editor_utils10.findSelectionPosition)({ editor });
-        if (nodeSelectionPosition !== null) {
-          editorChain.setNodeSelection(nodeSelectionPosition);
-        }
-        editorChain.run();
-        editor.chain().focus().aiGenerationShow().run();
-        requestAnimationFrame(() => {
-          const { hasContent, content } = (0, import_editor_utils10.hasContentAbove)(editor);
-          const snippet = content.length > 500 ? `...${content.slice(-500)}` : content;
-          const prompt = hasContent ? `Context: ${snippet}
+    isVisible,
+    canSet,
+    isActive,
+    label: "Link",
+    Icon: import_icons10.LinkIcon,
+    ...linkHandler
+  };
+}
 
-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) => (0, import_editor_utils10.isExtensionAvailable)(editor, ["ai", "aiAdvanced"]),
-      action: ({ editor }) => {
-        const editorChain = editor.chain().focus();
-        const nodeSelectionPosition = (0, import_editor_utils10.findSelectionPosition)({ editor });
-        if (nodeSelectionPosition !== null) {
-          editorChain.setNodeSelection(nodeSelectionPosition);
-        }
-        editorChain.run();
-        editor.chain().focus().aiGenerationShow().run();
-      }
-    },
-    // Style
-    text: {
-      check: (editor) => (0, import_editor_utils10.isNodeInSchema)("paragraph", editor),
-      action: ({ editor }) => {
-        editor.chain().focus().setParagraph().run();
-      }
-    },
-    heading_1: {
-      check: (editor) => (0, import_editor_utils10.isNodeInSchema)("heading", editor),
-      action: ({ editor }) => {
-        editor.chain().focus().toggleHeading({ level: 1 }).run();
-      }
-    },
-    heading_2: {
-      check: (editor) => (0, import_editor_utils10.isNodeInSchema)("heading", editor),
-      action: ({ editor }) => {
-        editor.chain().focus().toggleHeading({ level: 2 }).run();
-      }
-    },
-    heading_3: {
-      check: (editor) => (0, import_editor_utils10.isNodeInSchema)("heading", editor),
-      action: ({ editor }) => {
-        editor.chain().focus().toggleHeading({ level: 3 }).run();
-      }
-    },
-    bullet_list: {
-      check: (editor) => (0, import_editor_utils10.isNodeInSchema)("bulletList", editor),
-      action: ({ editor }) => {
-        editor.chain().focus().toggleBulletList().run();
-      }
-    },
-    ordered_list: {
-      check: (editor) => (0, import_editor_utils10.isNodeInSchema)("orderedList", editor),
-      action: ({ editor }) => {
-        editor.chain().focus().toggleOrderedList().run();
-      }
-    },
-    task_list: {
-      check: (editor) => (0, import_editor_utils10.isNodeInSchema)("taskList", editor),
-      action: ({ editor }) => {
-        editor.chain().focus().toggleTaskList().run();
-      }
-    },
-    quote: {
-      check: (editor) => (0, import_editor_utils10.isNodeInSchema)("blockquote", editor),
-      action: ({ editor }) => {
-        editor.chain().focus().toggleBlockquote().run();
-      }
-    },
-    code_block: {
-      check: (editor) => (0, import_editor_utils10.isNodeInSchema)("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) => (0, import_editor_utils10.isNodeInSchema)("horizontalRule", editor),
-      action: ({ editor }) => {
-        editor.chain().focus().setHorizontalRule().run();
-      }
-    },
-    table: {
-      check: (editor) => (0, import_editor_utils10.isNodeInSchema)("table", editor),
-      action: ({ editor }) => toggleTable(editor, { rows: 3, cols: 3, withHeaderRow: true })
-    },
-    control: {
-      check: (editor) => (0, import_editor_utils10.isNodeInSchema)("controlBlock", editor),
-      action: ({ editor }) => {
-        try {
-          return editor.chain().focus().insertControlBlock().run();
-        } catch (e) {
-          console.error(e);
-        }
-      }
-    },
-    table_of_contents: {
-      check: (editor) => (0, import_editor_utils10.isNodeInSchema)("tableOfContentsNode", editor),
-      action: ({ editor }) => {
-        editor.chain().focus().insertTableOfContents().run();
-      }
-    },
-    callout: {
-      check: (editor) => (0, import_editor_utils10.isNodeInSchema)("calloutNode", editor),
-      action: ({ editor }) => {
-        editor.chain().focus().insertCallout("info").run();
-      }
-    },
-    callout_warning: {
-      check: (editor) => (0, import_editor_utils10.isNodeInSchema)("calloutNode", editor),
-      action: ({ editor }) => {
-        editor.chain().focus().insertCallout("warning").run();
-      }
-    },
-    math: {
-      check: (editor) => (0, import_editor_utils10.isNodeInSchema)("mathBlock", editor),
-      action: ({ editor }) => {
-        editor.chain().focus().insertMathBlock().run();
-      }
-    },
-    // Upload
-    image: {
-      check: (editor) => (0, import_editor_utils10.isNodeInSchema)("imageUpload", editor),
-      action: ({ editor }) => {
-        editor.chain().focus().setImageUpload().run();
-      }
-    }
-  };
-};
-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] = [];
-    }
-    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 = (0, import_react_intl19.useIntl)();
-  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 = "";
-          }
-          items.push(item);
-        }
-      });
-      if (config == null ? void 0 : config.customItems) {
-        items.push(...config.customItems);
-      }
-      return organizeItemsByGroups(items, showGroups);
-    },
-    [config, intl]
-  );
-  return {
-    getSlashMenuItems,
-    config
-  };
-}
-
-// src/ui/slash-dropdown-menu/slash-dropdown-menu.tsx
-var import_jsx_runtime20 = require("react/jsx-runtime");
-var SlashDropdownMenu = (props) => {
-  const { config, ...restProps } = props;
-  const { getSlashMenuItems } = useSlashDropdownMenu(config);
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-    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__ */ (0, import_jsx_runtime20.jsx)(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 = (0, import_editor_utils11.getElementOverflowPosition)(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__ */ (0, import_jsx_runtime20.jsx)(
-    import_button10.Button,
+// src/ui/link-popover/link-popover.tsx
+var import_jsx_runtime18 = require("react/jsx-runtime");
+var LinkButton = ({ className, children, ...props }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+    import_toolbar3.ToolbarButton,
     {
-      ref: itemRef,
+      type: "button",
+      className,
       variant: "ghost",
       color: "default",
-      startContent: BadgeIcon && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(BadgeIcon, {}),
-      "data-active-state": isSelected ? "on" : "off",
-      onClick: onSelect,
-      fullWidth: true,
-      spacing: "start",
-      children: item.title
+      tabIndex: -1,
+      "aria-label": "Link",
+      title: "Link",
+      isIconOnly: !children,
+      ...props,
+      children: children || /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_icons11.LinkIcon, {})
     }
   );
 };
-var List = ({
-  items,
-  selectedIndex,
-  onSelect,
-  config
+var LinkMain = ({
+  url,
+  setUrl,
+  setLink,
+  removeLink,
+  openLink,
+  isActive,
+  onSave
 }) => {
-  const styles = (0, import_theme7.slashDropdownMenu)();
-  const renderedItems = React11.useMemo(() => {
-    const rendered = [];
-    const showGroups = (config == null ? void 0 : config.showGroups) !== false;
-    if (!showGroups) {
-      items.forEach((item, index) => {
-        rendered.push(
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-            Item,
-            {
-              item,
-              isSelected: index === selectedIndex,
-              onSelect: () => onSelect(item)
-            },
-            `item-${index}-${item.title}`
-          )
-        );
-      });
-      return rendered;
+  const [isEditing, setIsEditing] = (0, import_react39.useState)(!isActive || !url);
+  (0, import_react39.useEffect)(() => {
+    setIsEditing(!isActive || !url);
+  }, [isActive, url]);
+  const handleKeyDown = (event) => {
+    if (event.key === "Enter") {
+      event.preventDefault();
+      setLink();
+      setIsEditing(false);
+      onSave == null ? void 0 : onSave();
+    } else if (event.key === "Escape") {
+      event.preventDefault();
+      setIsEditing(false);
     }
-    const 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__ */ (0, import_jsx_runtime20.jsx)(
-            import_separator.Separator,
-            {
-              orientation: "horizontal"
-            },
-            `separator-${groupIndex.toString()}`
-          )
-        );
-      }
-      const groupItems = groupData.items.map((item, itemIndex) => {
-        const originalIndex = groupData.indices[itemIndex];
-        return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-          Item,
-          {
-            item,
-            isSelected: originalIndex === selectedIndex,
-            onSelect: () => onSelect(item)
-          },
-          `item-${originalIndex}-${item.title}`
-        );
-      });
-      if (groupLabel) {
-        rendered.push(
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
-            "div",
-            {
-              className: styles.cardItemGroup(),
-              children: [
-                /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: styles.cardGroupLabel(), children: groupLabel }),
-                /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: styles.cardGroup(), children: groupItems })
-              ]
-            },
-            `group-${groupIndex}-${groupLabel}`
-          )
-        );
-      } else {
-        rendered.push(...groupItems);
+  };
+  const handleSave = () => {
+    setLink();
+    setIsEditing(false);
+    onSave == null ? void 0 : onSave();
+  };
+  const handleEdit = () => {
+    setIsEditing(true);
+  };
+  if (isEditing) {
+    return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex items-center gap-1 min-w-[280px]", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+        import_input3.Input,
+        {
+          type: "url",
+          placeholder: "Enter URL...",
+          value: url,
+          onChange: (e) => setUrl(e.target.value),
+          onKeyDown: handleKeyDown,
+          autoComplete: "off",
+          autoCorrect: "off",
+          autoCapitalize: "off",
+          className: "flex-1 h-8 text-sm",
+          autoFocus: true
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+        import_button9.IconButton,
+        {
+          type: "button",
+          size: "sm",
+          variant: "ghost",
+          onClick: handleSave,
+          "aria-label": "Save link",
+          disabled: !url,
+          children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_icons11.CheckIcon, { className: "size-4" })
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex items-center gap-1 min-w-[280px]", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+      "a",
+      {
+        href: url,
+        target: "_blank",
+        rel: "noopener noreferrer",
+        className: "flex-1 text-sm text-primary truncate max-w-[200px] hover:underline px-2",
+        onClick: (e) => {
+          e.preventDefault();
+          openLink();
+        },
+        children: url
       }
-    });
-    return rendered;
-  }, [items, selectedIndex, onSelect, config == null ? void 0 : config.showGroups, styles]);
-  if (!renderedItems.length) {
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex items-center gap-0.5 border-l pl-1 ml-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+        import_button9.IconButton,
+        {
+          type: "button",
+          size: "sm",
+          variant: "ghost",
+          onClick: openLink,
+          "aria-label": "Open link in new tab",
+          children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_icons11.ExternalLinkIcon, { className: "size-4" })
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+        import_button9.IconButton,
+        {
+          type: "button",
+          size: "sm",
+          variant: "ghost",
+          onClick: handleEdit,
+          "aria-label": "Edit link",
+          children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_icons11.EditIcon, { className: "size-4" })
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+        import_button9.IconButton,
+        {
+          type: "button",
+          size: "sm",
+          variant: "ghost",
+          onClick: removeLink,
+          "aria-label": "Remove link",
+          children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_icons11.TrashIcon, { className: "size-4" })
+        }
+      )
+    ] })
+  ] });
+};
+function LinkPopover({
+  editor: providedEditor,
+  hideWhenUnavailable = false,
+  onSetLink,
+  onOpenChange,
+  autoOpenOnLinkActive = true,
+  onClick,
+  children,
+  ...buttonProps
+}) {
+  const { editor } = (0, import_editor_utils9.useTiptapEditor)(providedEditor);
+  const [isOpen, setIsOpen] = (0, import_react39.useState)(false);
+  const {
+    isVisible,
+    canSet,
+    isActive,
+    url,
+    setUrl,
+    setLink,
+    removeLink,
+    openLink,
+    label
+  } = useLinkPopover({
+    editor,
+    hideWhenUnavailable,
+    onSetLink
+  });
+  const handleOnOpenChange = (0, import_react39.useCallback)(
+    (nextIsOpen) => {
+      setIsOpen(nextIsOpen);
+      onOpenChange == null ? void 0 : onOpenChange(nextIsOpen);
+    },
+    [onOpenChange]
+  );
+  const handleSetLink = (0, import_react39.useCallback)(() => {
+    setLink();
+    setIsOpen(false);
+  }, [setLink]);
+  const handleClick = (0, import_react39.useCallback)(
+    (event) => {
+      onClick == null ? void 0 : onClick(event);
+      if (event.defaultPrevented) return;
+      setIsOpen(!isOpen);
+    },
+    [onClick, isOpen]
+  );
+  (0, import_react39.useEffect)(() => {
+    if (autoOpenOnLinkActive && isActive) {
+      setIsOpen(true);
+    }
+  }, [autoOpenOnLinkActive, isActive]);
+  if (!isVisible) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-    "div",
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+    import_popover2.Popover.Root,
     {
-      className: styles.card(),
-      style: {
-        maxHeight: "var(--suggestion-menu-max-height)"
-      },
-      children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: styles.body(), children: renderedItems })
+      open: isOpen,
+      onOpenChange: handleOnOpenChange,
+      spacing: "dense",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+          import_popover2.Popover.Trigger,
+          {
+            render: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+              LinkButton,
+              {
+                "data-disabled": !canSet,
+                disabled: !canSet,
+                "data-active-state": isActive ? "on" : "off",
+                "aria-label": label,
+                "aria-pressed": isActive,
+                onClick: handleClick,
+                ...buttonProps
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_popover2.Popover.Content, { children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+          LinkMain,
+          {
+            url,
+            setUrl,
+            setLink: handleSetLink,
+            removeLink,
+            openLink,
+            isActive,
+            onSave: () => setIsOpen(false)
+          }
+        ) })
+      ]
     }
   );
-};
-
-// src/presets/basic/editor-header.tsx
-var import_editor_utils31 = require("@kopexa/editor-utils");
-var import_icons26 = require("@kopexa/icons");
-var import_popover3 = require("@kopexa/popover");
-var import_toolbar10 = require("@kopexa/toolbar");
-var import_use_is_mobile3 = require("@kopexa/use-is-mobile");
-var import_react61 = require("react");
-var import_react_intl25 = require("react-intl");
-
-// src/hooks/use-cursor-visibility.ts
-var React13 = __toESM(require("react"));
-
-// src/hooks/use-window-size.ts
-var React12 = __toESM(require("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);
-    }
-    return () => {
-      if (visualViewport) {
-        visualViewport.removeEventListener("resize", handleResize);
-        visualViewport.removeEventListener("scroll", handleResize);
-      }
-    };
-  }, []);
-  return windowSize;
 }
+LinkButton.displayName = "LinkButton";
 
-// 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;
-}
-
-// src/ui/color-highlight-popover/color-highlight-popover.tsx
-var import_button11 = require("@kopexa/button");
-var import_editor_utils14 = require("@kopexa/editor-utils");
-var import_icons15 = require("@kopexa/icons");
-var import_popover2 = require("@kopexa/popover");
-var import_toolbar5 = require("@kopexa/toolbar");
-var import_react45 = require("react");
-
-// src/ui/color-highlight-button/color-highlight-button.tsx
-var import_editor_utils13 = require("@kopexa/editor-utils");
-var import_theme8 = require("@kopexa/theme");
+// src/ui/mark-button/index.tsx
+var import_editor_utils10 = require("@kopexa/editor-utils");
+var import_icons12 = require("@kopexa/icons");
 var import_toolbar4 = require("@kopexa/toolbar");
-var import_react44 = require("react");
-
-// src/ui/color-highlight-button/use-color-highlight.ts
-var import_editor_utils12 = require("@kopexa/editor-utils");
-var import_icons14 = require("@kopexa/icons");
-var import_use_is_mobile = require("@kopexa/use-is-mobile");
-var React14 = __toESM(require("react"));
-var import_react_hotkeys_hook = require("react-hotkeys-hook");
-var import_react_intl20 = require("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])
-  );
-  return values.map((value) => colorMap.get(value)).filter((color) => !!color);
-}
-function canColorHighlight(editor) {
+var import_react40 = require("@tiptap/react");
+var import_react41 = require("react");
+var import_react_intl17 = require("react-intl");
+var import_jsx_runtime19 = require("react/jsx-runtime");
+var markIcons = {
+  bold: import_icons12.BoldIcon,
+  italic: import_icons12.ItalicIcon,
+  underline: import_icons12.UnderlineIcon,
+  strike: import_icons12.StrikeIcon,
+  code: import_icons12.CodeIcon,
+  superscript: import_icons12.SuperscriptIcon,
+  subscript: import_icons12.SubscriptIcon
+};
+var markShortcutKeys = {
+  bold: "mod+b",
+  italic: "mod+i",
+  underline: "mod+u",
+  strike: "mod+shift+s",
+  code: "mod+e",
+  superscript: "mod+.",
+  subscript: "mod+,"
+};
+function canToggleMark(editor, type) {
   if (!editor || !editor.isEditable) return false;
-  if (!(0, import_editor_utils12.isMarkInSchema)("highlight", editor) || (0, import_editor_utils12.isNodeTypeSelected)(editor, ["image"]))
+  if (!(0, import_editor_utils10.isMarkInSchema)(type, editor) || (0, import_editor_utils10.isNodeTypeSelected)(editor, ["image"]))
     return false;
-  return editor.can().setMark("highlight");
+  return editor.can().toggleMark(type);
 }
-function isColorHighlightActive(editor, highlightColor) {
-  if (!editor || !editor.isEditable) return false;
-  return highlightColor ? editor.isActive("highlight", { color: highlightColor }) : editor.isActive("highlight");
+function isMarkActive(editor, type) {
+  if (!editor) return false;
+  return editor.isActive(type);
 }
-function removeHighlight(editor) {
-  if (!editor || !editor.isEditable) return false;
-  if (!canColorHighlight(editor)) return false;
-  return editor.chain().focus().unsetMark("highlight").run();
+function toggleMark(editor, type) {
+  if (!editor) return;
+  editor.chain().focus().toggleMark(type).run();
 }
-function shouldShowButton2(props) {
-  const { editor, hideWhenUnavailable } = props;
-  if (!editor || !editor.isEditable) return false;
-  if (!(0, import_editor_utils12.isMarkInSchema)("highlight", editor)) return false;
-  if (hideWhenUnavailable && !editor.isActive("code")) {
-    return canColorHighlight(editor);
+function isMarkButtonDisabled(editor, type, userDisabled = false) {
+  if (!editor) return true;
+  if (userDisabled) return true;
+  if (editor.isActive("codeBlock")) return true;
+  if (!canToggleMark(editor, type)) return true;
+  return false;
+}
+function shouldShowMarkButton(params) {
+  const { editor, type, hideWhenUnavailable, markInSchema } = params;
+  if (!markInSchema || !editor) {
+    return false;
+  }
+  if (hideWhenUnavailable) {
+    if ((0, import_react40.isNodeSelection)(editor.state.selection) || !canToggleMark(editor, type)) {
+      return false;
+    }
   }
   return true;
 }
-function useColorHighlight(config) {
+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 = (0, import_react_intl17.useIntl)();
+  const markInSchema = (0, import_editor_utils10.isMarkInSchema)(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 } = (0, import_editor_utils10.useTiptapEditor)(providedEditor);
   const {
-    editor: providedEditor,
-    label,
-    highlightColor,
-    hideWhenUnavailable = false,
-    onApplied
-  } = config;
-  const intl = (0, import_react_intl20.useIntl)();
-  const { editor } = (0, import_editor_utils12.useTiptapEditor)(providedEditor);
-  const isMobile = (0, import_use_is_mobile.useIsMobile)();
-  const [isVisible, setIsVisible] = React14.useState(true);
-  const canColorHighlightState = canColorHighlight(editor);
-  const isActive = isColorHighlightActive(editor, highlightColor);
-  React14.useEffect(() => {
-    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)
-        );
+    markInSchema,
+    isDisabled,
+    isActive,
+    Icon,
+    shortcutKey,
+    formattedName
+  } = useMarkState(editor, type, disabled);
+  const handleClick = (0, import_react41.useCallback)(
+    (e) => {
+      onClick == null ? void 0 : onClick(e);
+      if (!e.defaultPrevented && !isDisabled && editor) {
+        toggleMark(editor, type);
+      }
+    },
+    [onClick, isDisabled, editor, type]
+  );
+  const show = (0, import_react41.useMemo)(() => {
+    return shouldShowMarkButton({
+      editor,
+      type,
+      hideWhenUnavailable,
+      markInSchema
+    });
+  }, [editor, type, hideWhenUnavailable, markInSchema]);
+  if (!show || !editor || !editor.isEditable) {
+    return null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+    import_toolbar4.ToolbarButton,
+    {
+      type: "button",
+      className: className.trim(),
+      disabled: isDisabled,
+      variant: "ghost",
+      color: "default",
+      "data-active-state": isActive ? "on" : "off",
+      "data-disabled": isDisabled,
+      tabIndex: -1,
+      "aria-label": formattedName,
+      "aria-pressed": isActive,
+      title: formattedName,
+      shortcutKeys: shortcutKey,
+      onClick: handleClick,
+      isIconOnly: true,
+      ...buttonProps,
+      children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Icon, {})
+    }
+  );
+};
+
+// src/ui/bubble-menu/index.tsx
+var import_jsx_runtime20 = require("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)
+      };
+    }
+  );
+}
+function BubbleMenu({ editor }) {
+  const resolvedColors = useResolvedHighlightColors(editor);
+  if (!editor) {
+    return null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+    import_menus.BubbleMenu,
+    {
+      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__ */ (0, import_jsx_runtime20.jsxs)(import_toolbar5.Toolbar, { radius: "md", border: "none", className: "p-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_toolbar5.ToolbarGroup, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(MarkButton, { type: "bold" }),
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(MarkButton, { type: "italic" }),
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(MarkButton, { type: "underline" }),
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(MarkButton, { type: "strike" }),
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(MarkButton, { type: "code" })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_toolbar5.ToolbarSeparator, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_toolbar5.ToolbarGroup, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ColorHighlightPopover, { colors: resolvedColors }),
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(LinkPopover, { autoOpenOnLinkActive: false })
+        ] })
+      ] })
+    }
+  );
+}
+
+// src/ui/copy-anchor-link-button/use-scroll-to-hash.ts
+var import_editor_utils11 = require("@kopexa/editor-utils");
+var React10 = __toESM(require("react"));
+
+// src/hooks/use-floating-toolbar-visibility.ts
+var import_state6 = require("@tiptap/pm/state");
+var import_react42 = require("@tiptap/react");
+var React9 = __toESM(require("react"));
+var HIDE_FLOATING_META = "hideFloatingToolbar";
+var selectNodeAndHideFloating = (editor, pos) => {
+  if (!editor) return;
+  const { state, view } = editor;
+  view.dispatch(
+    state.tr.setSelection(import_state6.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 } = (0, import_editor_utils11.useTiptapEditor)(providedEditor);
+  const scrollToNode = React10.useCallback(
+    (id) => {
+      var _a, _b, _c;
+      if (!editor) return false;
+      const attributeName = (_c = (_b = (_a = (0, import_editor_utils11.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 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
+var import_button10 = require("@kopexa/button");
+var import_icons13 = require("@kopexa/icons");
+var import_input4 = require("@kopexa/input");
+var import_menus2 = require("@tiptap/react/menus");
+var import_react43 = require("react");
+var import_react_intl18 = require("react-intl");
+var import_jsx_runtime21 = require("react/jsx-runtime");
+function LinkBubble({ editor }) {
+  const intl = (0, import_react_intl18.useIntl)();
+  const [isEditing, setIsEditing] = (0, import_react43.useState)(false);
+  const [url, setUrl] = (0, import_react43.useState)("");
+  const getCurrentUrl = (0, import_react43.useCallback)(() => {
+    if (!editor) return "";
+    const attrs = editor.getAttributes("link");
+    return attrs.href || "";
+  }, [editor]);
+  (0, import_react43.useEffect)(() => {
+    const isLinkActive2 = editor == null ? void 0 : editor.isActive("link");
+    if (isLinkActive2) {
+      setUrl(getCurrentUrl());
+      setIsEditing(false);
+    }
+  }, [editor, getCurrentUrl]);
+  const handleOpenLink = (0, import_react43.useCallback)(() => {
+    const href = getCurrentUrl();
+    if (href) {
+      window.open(href, "_blank", "noopener,noreferrer");
+    }
+  }, [getCurrentUrl]);
+  const handleRemoveLink = (0, import_react43.useCallback)(() => {
+    editor == null ? void 0 : editor.chain().focus().unsetLink().run();
+  }, [editor]);
+  const handleEdit = (0, import_react43.useCallback)(() => {
+    setUrl(getCurrentUrl());
+    setIsEditing(true);
+  }, [getCurrentUrl]);
+  const handleSave = (0, import_react43.useCallback)(() => {
+    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 = (0, import_react43.useCallback)(
+    (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__ */ (0, import_jsx_runtime21.jsx)(
+    import_menus2.BubbleMenu,
+    {
+      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__ */ (0, import_jsx_runtime21.jsx)("div", { className: "flex items-center gap-1 p-1.5 min-w-[280px]", children: isEditing ? /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+          import_input4.Input,
+          {
+            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__ */ (0, import_jsx_runtime21.jsx)(
+          import_button10.IconButton,
+          {
+            type: "button",
+            size: "sm",
+            variant: "ghost",
+            onClick: handleSave,
+            "aria-label": intl.formatMessage(messages7.link_save),
+            children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_icons13.EditIcon, { className: "size-4" })
+          }
+        )
+      ] }) : /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+          "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__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex items-center gap-0.5 border-l pl-1 ml-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+            import_button10.IconButton,
+            {
+              type: "button",
+              size: "sm",
+              variant: "ghost",
+              onClick: handleOpenLink,
+              "aria-label": intl.formatMessage(messages7.link_open),
+              children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_icons13.ExternalLinkIcon, { className: "size-4" })
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+            import_button10.IconButton,
+            {
+              type: "button",
+              size: "sm",
+              variant: "ghost",
+              onClick: handleEdit,
+              "aria-label": intl.formatMessage(messages7.link_edit),
+              children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_icons13.EditIcon, { className: "size-4" })
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+            import_button10.IconButton,
+            {
+              type: "button",
+              size: "sm",
+              variant: "ghost",
+              onClick: handleRemoveLink,
+              "aria-label": intl.formatMessage(messages7.link_remove),
+              children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_icons13.TrashIcon, { className: "size-4" })
+            }
+          )
+        ] })
+      ] }) })
+    }
+  );
+}
+
+// src/ui/slash-dropdown-menu/slash-dropdown-menu.tsx
+var import_button11 = require("@kopexa/button");
+var import_editor_utils14 = require("@kopexa/editor-utils");
+var import_separator = require("@kopexa/separator");
+var import_theme8 = require("@kopexa/theme");
+var React12 = __toESM(require("react"));
+
+// src/ui/slash-dropdown-menu/use-slash-dropdown-menu.ts
+var import_editor_utils13 = require("@kopexa/editor-utils");
+var import_icons15 = require("@kopexa/icons");
+var React11 = __toESM(require("react"));
+var import_react_intl20 = require("react-intl");
+
+// src/ui/table-button/use-table.ts
+var import_editor_utils12 = require("@kopexa/editor-utils");
+var import_icons14 = require("@kopexa/icons");
+var import_react44 = require("@tiptap/react");
+var import_react45 = require("react");
+var import_react_intl19 = require("react-intl");
+function canToggle(editor) {
+  if (!editor || !editor.isEditable) return false;
+  if (!(0, import_editor_utils12.isNodeInSchema)("table", editor) || (0, import_editor_utils12.isNodeTypeSelected)(editor, ["image"])) {
+    return false;
+  }
+  try {
+    return editor.can().insertTable({ rows: 3, cols: 3, withHeaderRow: true });
+  } catch {
+    return false;
+  }
+}
+function toggleTable(editor, config) {
+  var _a;
+  if (!editor || !editor.isEditable) return false;
+  if (!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 (!(0, import_editor_utils12.isNodeInSchema)("table", editor)) return false;
+  if (hideWhenUnavailable) {
+    if ((0, import_react44.isNodeSelection)(editor.state.selection) || !canToggle) {
+      return false;
+    }
+  }
+  return true;
+}
+function useTableBlock(config) {
+  const {
+    editor: providedEditor,
+    hideWhenUnavailable = false,
+    onToggled
+  } = config || {};
+  const intl = (0, import_react_intl19.useIntl)();
+  const { editor } = (0, import_editor_utils12.useTiptapEditor)(providedEditor);
+  const [isVisible, setIsVisible] = (0, import_react45.useState)(true);
+  const canToggleState = canToggle(editor);
+  const isActive = (editor == null ? void 0 : editor.isActive("table")) || false;
+  (0, import_react45.useEffect)(() => {
+    if (!editor) return;
+    const handleSelectionUpdate = () => {
+      setIsVisible(shouldShowButton2({ editor, hideWhenUnavailable }));
+    };
+    handleSelectionUpdate();
+    editor.on("selectionUpdate", handleSelectionUpdate);
+    return () => {
+      editor.off("selectionUpdate", handleSelectionUpdate);
+    };
+  }, [editor, hideWhenUnavailable]);
+  const handleToggle = (0, import_react45.useCallback)(() => {
+    if (!editor) return false;
+    const success = toggleTable(editor);
+    if (success) {
+      onToggled == null ? void 0 : onToggled();
+    }
+    return success;
+  }, [editor, onToggled]);
+  return {
+    isVisible,
+    isActive,
+    handleToggle,
+    canToggle: canToggleState,
+    label: intl.formatMessage(messages7.table_insert),
+    // shortcutKeys: CODE_BLOCK_SHORTCUT_KEY,
+    Icon: import_icons14.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: import_icons15.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: import_icons15.AiSparklesIcon,
+      group: formatMessage(messages7.group_ai)
+    },
+    // Style
+    text: {
+      title: formatMessage(messages7.slash_text),
+      subtext: formatMessage(messages7.slash_text_subtext),
+      keywords: ["p", "paragraph", "text"],
+      badge: import_icons15.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: import_icons15.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: import_icons15.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: import_icons15.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: import_icons15.ListIcon,
+      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: import_icons15.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: import_icons15.ListTodoIcon,
+      group: formatMessage(messages7.group_style)
+    },
+    quote: {
+      title: formatMessage(messages7.slash_blockquote),
+      subtext: formatMessage(messages7.slash_blockquote_subtext),
+      keywords: ["quote", "blockquote"],
+      badge: import_icons15.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: import_icons15.CodeBlockIcon,
+      group: formatMessage(messages7.group_style)
+    },
+    // Insert
+    control: {
+      title: formatMessage(messages7.slash_control),
+      subtext: formatMessage(messages7.slash_control_subtext),
+      keywords: ["control"],
+      badge: import_icons15.ControlsIcon,
+      group: formatMessage(messages7.group_insert)
+    },
+    divider: {
+      title: formatMessage(messages7.slash_separator),
+      subtext: formatMessage(messages7.slash_separator_subtext),
+      keywords: ["hr", "horizontalRule", "line", "separator"],
+      badge: import_icons15.MinusIcon,
+      group: formatMessage(messages7.group_insert)
+    },
+    table: {
+      title: formatMessage(messages7.slash_table),
+      subtext: formatMessage(messages7.slash_table_subtext),
+      keywords: ["table", "grid", "spreadsheet"],
+      badge: import_icons15.TableIcon,
+      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: import_icons15.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: import_icons15.InfoIcon,
+      group: formatMessage(messages7.group_insert)
+    },
+    callout_warning: {
+      title: formatMessage(messages7.slash_warning),
+      subtext: formatMessage(messages7.slash_warning_subtext),
+      keywords: ["warning", "caution", "attention"],
+      badge: import_icons15.AlertIcon,
+      group: formatMessage(messages7.group_insert)
+    },
+    math: {
+      title: formatMessage(messages7.slash_formula),
+      subtext: formatMessage(messages7.slash_formula_subtext),
+      keywords: ["math", "latex", "formula", "equation", "katex"],
+      badge: import_icons15.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: import_icons15.ImageIcon,
+      group: formatMessage(messages7.group_upload)
+    }
+  };
+}
+var getItemImplementations = () => {
+  return {
+    // AI
+    continue_writing: {
+      check: (editor) => {
+        const { hasContent } = (0, import_editor_utils13.hasContentAbove)(editor);
+        const extensionsReady = (0, import_editor_utils13.isExtensionAvailable)(editor, [
+          "ai",
+          "aiAdvanced"
+        ]);
+        return extensionsReady && hasContent;
+      },
+      action: ({ editor }) => {
+        const editorChain = editor.chain().focus();
+        const nodeSelectionPosition = (0, import_editor_utils13.findSelectionPosition)({ editor });
+        if (nodeSelectionPosition !== null) {
+          editorChain.setNodeSelection(nodeSelectionPosition);
+        }
+        editorChain.run();
+        editor.chain().focus().aiGenerationShow().run();
+        requestAnimationFrame(() => {
+          const { hasContent, content } = (0, import_editor_utils13.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) => (0, import_editor_utils13.isExtensionAvailable)(editor, ["ai", "aiAdvanced"]),
+      action: ({ editor }) => {
+        const editorChain = editor.chain().focus();
+        const nodeSelectionPosition = (0, import_editor_utils13.findSelectionPosition)({ editor });
+        if (nodeSelectionPosition !== null) {
+          editorChain.setNodeSelection(nodeSelectionPosition);
+        }
+        editorChain.run();
+        editor.chain().focus().aiGenerationShow().run();
+      }
+    },
+    // Style
+    text: {
+      check: (editor) => (0, import_editor_utils13.isNodeInSchema)("paragraph", editor),
+      action: ({ editor }) => {
+        editor.chain().focus().setParagraph().run();
+      }
+    },
+    heading_1: {
+      check: (editor) => (0, import_editor_utils13.isNodeInSchema)("heading", editor),
+      action: ({ editor }) => {
+        editor.chain().focus().toggleHeading({ level: 1 }).run();
+      }
+    },
+    heading_2: {
+      check: (editor) => (0, import_editor_utils13.isNodeInSchema)("heading", editor),
+      action: ({ editor }) => {
+        editor.chain().focus().toggleHeading({ level: 2 }).run();
+      }
+    },
+    heading_3: {
+      check: (editor) => (0, import_editor_utils13.isNodeInSchema)("heading", editor),
+      action: ({ editor }) => {
+        editor.chain().focus().toggleHeading({ level: 3 }).run();
+      }
+    },
+    bullet_list: {
+      check: (editor) => (0, import_editor_utils13.isNodeInSchema)("bulletList", editor),
+      action: ({ editor }) => {
+        editor.chain().focus().toggleBulletList().run();
+      }
+    },
+    ordered_list: {
+      check: (editor) => (0, import_editor_utils13.isNodeInSchema)("orderedList", editor),
+      action: ({ editor }) => {
+        editor.chain().focus().toggleOrderedList().run();
+      }
+    },
+    task_list: {
+      check: (editor) => (0, import_editor_utils13.isNodeInSchema)("taskList", editor),
+      action: ({ editor }) => {
+        editor.chain().focus().toggleTaskList().run();
+      }
+    },
+    quote: {
+      check: (editor) => (0, import_editor_utils13.isNodeInSchema)("blockquote", editor),
+      action: ({ editor }) => {
+        editor.chain().focus().toggleBlockquote().run();
+      }
+    },
+    code_block: {
+      check: (editor) => (0, import_editor_utils13.isNodeInSchema)("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) => (0, import_editor_utils13.isNodeInSchema)("horizontalRule", editor),
+      action: ({ editor }) => {
+        editor.chain().focus().setHorizontalRule().run();
+      }
+    },
+    table: {
+      check: (editor) => (0, import_editor_utils13.isNodeInSchema)("table", editor),
+      action: ({ editor }) => toggleTable(editor, { rows: 3, cols: 3, withHeaderRow: true })
+    },
+    control: {
+      check: (editor) => (0, import_editor_utils13.isNodeInSchema)("controlBlock", editor),
+      action: ({ editor }) => {
+        try {
+          return editor.chain().focus().insertControlBlock().run();
+        } catch (e) {
+          console.error(e);
+        }
+      }
+    },
+    table_of_contents: {
+      check: (editor) => (0, import_editor_utils13.isNodeInSchema)("tableOfContentsNode", editor),
+      action: ({ editor }) => {
+        editor.chain().focus().insertTableOfContents().run();
+      }
+    },
+    callout: {
+      check: (editor) => (0, import_editor_utils13.isNodeInSchema)("calloutNode", editor),
+      action: ({ editor }) => {
+        editor.chain().focus().insertCallout("info").run();
       }
-    }
-    setTimeout(() => {
-      const success = editor.chain().focus().toggleMark("highlight", { color: highlightColor }).run();
-      if (success) {
-        onApplied == null ? void 0 : onApplied({ color: highlightColor, label });
+    },
+    callout_warning: {
+      check: (editor) => (0, import_editor_utils13.isNodeInSchema)("calloutNode", editor),
+      action: ({ editor }) => {
+        editor.chain().focus().insertCallout("warning").run();
       }
-      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" });
-    }
-    return success;
-  }, [editor, onApplied]);
-  (0, import_react_hotkeys_hook.useHotkeys)(
-    COLOR_HIGHLIGHT_SHORTCUT_KEY,
-    (event) => {
-      event.preventDefault();
-      handleColorHighlight();
     },
-    {
-      enabled: isVisible && canColorHighlightState,
-      enableOnContentEditable: !isMobile,
-      enableOnFormTags: true
+    math: {
+      check: (editor) => (0, import_editor_utils13.isNodeInSchema)("mathBlock", editor),
+      action: ({ editor }) => {
+        editor.chain().focus().insertMathBlock().run();
+      }
+    },
+    // Upload
+    image: {
+      check: (editor) => (0, import_editor_utils13.isNodeInSchema)("imageUpload", editor),
+      action: ({ editor }) => {
+        editor.chain().focus().setImageUpload().run();
+      }
+    }
+  };
+};
+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] = [];
     }
+    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 = (0, import_react_intl20.useIntl)();
+  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);
+    },
+    [config, intl]
   );
   return {
-    isVisible,
-    isActive,
-    handleColorHighlight,
-    handleRemoveHighlight,
-    canColorHighlight: canColorHighlightState,
-    label: label || intl.formatMessage(messages7.highlight_color),
-    shortcutKeys: COLOR_HIGHLIGHT_SHORTCUT_KEY,
-    Icon: import_icons14.HighlighterIcon
+    getSlashMenuItems,
+    config
   };
 }
 
-// src/ui/color-highlight-button/color-highlight-button.tsx
-var import_jsx_runtime21 = require("react/jsx-runtime");
-var ColorHighlightButton = ({
-  editor: providedEditor,
-  highlightColor,
-  text,
-  hideWhenUnavailable = false,
-  onApplied,
-  showShortcut = false,
-  onClick,
-  children,
-  style,
-  className,
-  ...buttonProps
-}) => {
-  const { editor } = (0, import_editor_utils13.useTiptapEditor)(providedEditor);
-  const {
-    isVisible,
-    canColorHighlight: canColorHighlight2,
-    isActive,
-    handleColorHighlight,
-    label,
-    shortcutKeys
-  } = useColorHighlight({
-    editor,
-    highlightColor,
-    label: text || `Toggle highlight (${highlightColor})`,
-    hideWhenUnavailable,
-    onApplied
-  });
-  const handleClick = (0, import_react44.useCallback)(
-    (event) => {
-      onClick == null ? void 0 : onClick(event);
-      if (event.defaultPrevented) return;
-      handleColorHighlight();
-    },
-    [handleColorHighlight, onClick]
+// src/ui/slash-dropdown-menu/slash-dropdown-menu.tsx
+var import_jsx_runtime22 = require("react/jsx-runtime");
+var SlashDropdownMenu = (props) => {
+  const { config, ...restProps } = props;
+  const { getSlashMenuItems } = useSlashDropdownMenu(config);
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+    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__ */ (0, import_jsx_runtime22.jsx)(List, { ...props2, config })
+    }
   );
-  const buttonStyle = (0, import_react44.useMemo)(
-    () => ({
-      ...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 = (0, import_editor_utils14.getElementOverflowPosition)(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__ */ (0, import_jsx_runtime22.jsx)(
+    import_button11.Button,
+    {
+      ref: itemRef,
+      variant: "ghost",
+      color: "default",
+      startContent: BadgeIcon && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(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 = (0, import_theme8.slashDropdownMenu)();
+  const renderedItems = React12.useMemo(() => {
+    const rendered = [];
+    const showGroups = (config == null ? void 0 : config.showGroups) !== false;
+    if (!showGroups) {
+      items.forEach((item, index) => {
+        rendered.push(
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+            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__ */ (0, import_jsx_runtime22.jsx)(
+            import_separator.Separator,
+            {
+              orientation: "horizontal"
+            },
+            `separator-${groupIndex.toString()}`
+          )
+        );
+      }
+      const groupItems = groupData.items.map((item, itemIndex) => {
+        const originalIndex = groupData.indices[itemIndex];
+        return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+          Item,
+          {
+            item,
+            isSelected: originalIndex === selectedIndex,
+            onSelect: () => onSelect(item)
+          },
+          `item-${originalIndex}-${item.title}`
+        );
+      });
+      if (groupLabel) {
+        rendered.push(
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+            "div",
+            {
+              className: styles.cardItemGroup(),
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: styles.cardGroupLabel(), children: groupLabel }),
+                /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("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 = (0, import_theme8.colorHighlightButton)();
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
-    import_toolbar4.ToolbarButton,
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+    "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__ */ (0, import_jsx_runtime21.jsx)(
-          "span",
-          {
-            "data-active-state": isActive ? "on" : "off",
-            className: styles.mark()
-          }
-        ),
-        children || /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-            "span",
-            {
-              style: { "--highlight-color": highlightColor }
-            }
-          ),
-          text
-        ] })
-      ]
+      className: styles.card(),
+      style: {
+        maxHeight: "var(--suggestion-menu-max-height)"
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: styles.body(), children: renderedItems })
     }
   );
 };
 
-// src/ui/color-highlight-popover/color-highlight-popover.tsx
-var import_jsx_runtime22 = require("react/jsx-runtime");
-var ColorHighlightPopoverButton = ({
-  className,
-  children,
-  ...props
-}) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
-  import_button11.IconButton,
-  {
-    type: "button",
-    className,
-    variant: "ghost",
-    color: "default",
-    tabIndex: -1,
-    "aria-label": "Highlight text",
-    tooltip: "Highlight",
-    isIconOnly: !children,
-    ...props,
-    children: children != null ? children : /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_icons15.HighlighterIcon, {})
-  }
-);
-function ColorHighlightPopoverContent({
-  editor,
-  colors = pickHighlightColorsByValue([
-    "var(--tt-color-highlight-green)",
-    "var(--tt-color-highlight-blue)",
-    "var(--tt-color-highlight-red)",
-    "var(--tt-color-highlight-purple)",
-    "var(--tt-color-highlight-yellow)"
-  ])
-}) {
-  const { handleRemoveHighlight } = useColorHighlight({ editor });
-  const containerRef = (0, import_react45.useRef)(null);
-  const menuItems = (0, import_react45.useMemo)(
-    () => [...colors, { label: "Remove highlight", value: "none" }],
-    [colors]
-  );
-  const { selectedIndex } = useMenuNavigation({
-    containerRef,
-    items: menuItems,
-    orientation: "both",
-    onSelect: (item) => {
-      if (!containerRef.current) return false;
-      const highlightedElement = containerRef.current.querySelector(
-        '[data-highlighted="true"]'
-      );
-      if (highlightedElement) highlightedElement.click();
-      if (item.value === "none") handleRemoveHighlight();
-    },
-    autoSelectFirstItem: false
+// src/presets/basic/editor-header.tsx
+var import_editor_utils31 = require("@kopexa/editor-utils");
+var import_icons26 = require("@kopexa/icons");
+var import_popover3 = require("@kopexa/popover");
+var import_toolbar10 = require("@kopexa/toolbar");
+var import_use_is_mobile3 = require("@kopexa/use-is-mobile");
+var import_react61 = require("react");
+var import_react_intl25 = require("react-intl");
+
+// src/hooks/use-cursor-visibility.ts
+var React14 = __toESM(require("react"));
+
+// src/hooks/use-window-size.ts
+var React13 = __toESM(require("react"));
+function useWindowSize() {
+  const [windowSize, setWindowSize] = React13.useState({
+    width: 0,
+    height: 0,
+    offsetTop: 0
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { ref: containerRef, className: "flex gap-1 items-center", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
-      "div",
-      {
-        className: "flex items-center gap-1 outline-none",
-        "data-orientation": "horizontal",
-        children: colors.map((color, index) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
-          ColorHighlightButton,
-          {
-            editor,
-            highlightColor: color.value,
-            "aria-label": `${color.label} highlight color`,
-            tabIndex: index === selectedIndex ? 0 : -1,
-            "data-highlighted": selectedIndex === index
-          },
-          color.value
-        ))
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_toolbar5.ToolbarSeparator, { orientation: "vertical" }),
-    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "tiptap-button-group", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
-      import_button11.IconButton,
-      {
-        onClick: handleRemoveHighlight,
-        "aria-label": "Remove highlight",
-        tabIndex: selectedIndex === colors.length ? 0 : -1,
-        type: "button",
-        role: "menuitem",
-        variant: "ghost",
-        color: "default",
-        "data-highlighted": selectedIndex === colors.length,
-        children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_icons15.BanIcon, {})
+  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 } = (0, import_editor_utils14.useTiptapEditor)(providedEditor);
-  const [isOpen, setIsOpen] = (0, import_react45.useState)(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__ */ (0, import_jsx_runtime22.jsxs)(import_popover2.Popover.Root, { open: isOpen, onOpenChange: setIsOpen, spacing: "dense", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
-      import_popover2.Popover.Trigger,
-      {
-        render: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
-          ColorHighlightPopoverButton,
-          {
-            disabled: !canColorHighlight2,
-            "data-disabled": !canColorHighlight2,
-            "data-active-state": isActive ? "on" : "off",
-            "aria-pressed": isActive,
-            "aria-label": label,
-            title: label,
-            ...props
+  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__ */ (0, import_jsx_runtime22.jsx)(import_popover2.Popover.Content, { "aria-label": "Highlight colors", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ColorHighlightPopoverContent, { editor, colors }) })
-  ] });
+    };
+    ensureCursorVisibility();
+  }, [editor, overlayHeight, windowHeight, rect.height]);
+  return rect;
 }
 
 // src/ui/list-dropdown-menu/index.tsx