@underverse-ui/underverse 0.2.76 → 0.2.78

package/dist/index.js

@@ -3066,7 +3066,7 @@ var Tooltip = ({
   children,
   content,
   placement = "top",
-  delay = { open: 700, close: 300 },
+  delay = { open: 200, close: 300 },
   className,
   disabled = false,
   variant = "default"
@@ -15131,6 +15131,1577 @@ function useSmartLocale() {
   }
 }
 
+// ../../components/ui/UEditor/UEditor.tsx
+import { useEffect as useEffect27, useMemo as useMemo16 } from "react";
+import { useTranslations as useTranslations7 } from "next-intl";
+import { useEditor, EditorContent } from "@tiptap/react";
+
+// ../../components/ui/UEditor/extensions.ts
+import Document from "@tiptap/extension-document";
+import Paragraph from "@tiptap/extension-paragraph";
+import Text from "@tiptap/extension-text";
+import Bold from "@tiptap/extension-bold";
+import Italic from "@tiptap/extension-italic";
+import Strike from "@tiptap/extension-strike";
+import Underline from "@tiptap/extension-underline";
+import Heading from "@tiptap/extension-heading";
+import BulletList from "@tiptap/extension-bullet-list";
+import OrderedList from "@tiptap/extension-ordered-list";
+import ListItem2 from "@tiptap/extension-list-item";
+import TaskList from "@tiptap/extension-task-list";
+import TaskItem from "@tiptap/extension-task-item";
+import Blockquote from "@tiptap/extension-blockquote";
+import Code from "@tiptap/extension-code";
+import CodeBlockLowlight from "@tiptap/extension-code-block-lowlight";
+import History2 from "@tiptap/extension-history";
+import Placeholder from "@tiptap/extension-placeholder";
+import Link3 from "@tiptap/extension-link";
+import Image3 from "@tiptap/extension-image";
+import { TextStyle } from "@tiptap/extension-text-style";
+import Color from "@tiptap/extension-color";
+import Highlight from "@tiptap/extension-highlight";
+import TextAlign from "@tiptap/extension-text-align";
+import { Table as Table3 } from "@tiptap/extension-table";
+import TableRow2 from "@tiptap/extension-table-row";
+import TableCell2 from "@tiptap/extension-table-cell";
+import TableHeader2 from "@tiptap/extension-table-header";
+import CharacterCount from "@tiptap/extension-character-count";
+import Typography from "@tiptap/extension-typography";
+import Subscript from "@tiptap/extension-subscript";
+import Superscript from "@tiptap/extension-superscript";
+import HorizontalRule from "@tiptap/extension-horizontal-rule";
+import { common, createLowlight } from "lowlight";
+
+// ../../components/ui/UEditor/slash-command.tsx
+import { Extension } from "@tiptap/core";
+import Suggestion from "@tiptap/suggestion";
+import { ReactRenderer } from "@tiptap/react";
+import { forwardRef as forwardRef13, useEffect as useEffect24, useImperativeHandle, useRef as useRef21, useState as useState42 } from "react";
+import {
+  FileCode,
+  Heading1,
+  Heading2,
+  Heading3,
+  List as List2,
+  ListOrdered,
+  ListTodo,
+  Minus,
+  Quote,
+  Table as Table2,
+  Type
+} from "lucide-react";
+import tippy from "tippy.js";
+import { jsx as jsx68, jsxs as jsxs60 } from "react/jsx-runtime";
+var CommandList = forwardRef13((props, ref) => {
+  const [selectedIndex, setSelectedIndex] = useState42(0);
+  const listRef = useRef21(null);
+  useEffect24(() => {
+    setSelectedIndex(0);
+  }, [props.items]);
+  useEffect24(() => {
+    const selectedElement = listRef.current?.querySelector(`[data-index="${selectedIndex}"]`);
+    selectedElement?.scrollIntoView({ block: "nearest" });
+  }, [selectedIndex, props.items]);
+  useImperativeHandle(ref, () => ({
+    onKeyDown: ({ event }) => {
+      if (event.key === "ArrowUp") {
+        setSelectedIndex((prev) => (prev + props.items.length - 1) % props.items.length);
+        return true;
+      }
+      if (event.key === "ArrowDown") {
+        setSelectedIndex((prev) => (prev + 1) % props.items.length);
+        return true;
+      }
+      if (event.key === "Enter") {
+        const item = props.items[selectedIndex];
+        if (item) {
+          props.command(item);
+        }
+        return true;
+      }
+      return false;
+    }
+  }));
+  if (props.items.length === 0) {
+    return /* @__PURE__ */ jsx68("div", { className: "w-72 p-4 text-center text-sm text-muted-foreground", children: "No results" });
+  }
+  return /* @__PURE__ */ jsxs60("div", { ref: listRef, className: "w-72 max-h-80 overflow-y-auto bg-card border border-border rounded-2xl shadow-lg", children: [
+    /* @__PURE__ */ jsx68("div", { className: "px-3 py-2 border-b", children: /* @__PURE__ */ jsx68("span", { className: "text-xs font-semibold text-muted-foreground uppercase tracking-wider", children: "Basic Blocks" }) }),
+    /* @__PURE__ */ jsx68("div", { className: "p-1", children: props.items.map((item, index) => /* @__PURE__ */ jsxs60(
+      "button",
+      {
+        type: "button",
+        "data-index": index,
+        onClick: () => props.command(item),
+        className: cn(
+          "flex items-center w-full px-3 py-2.5 rounded-lg transition-colors group",
+          selectedIndex === index ? "bg-accent" : "hover:bg-accent/50"
+        ),
+        children: [
+          /* @__PURE__ */ jsx68(
+            "div",
+            {
+              className: cn(
+                "flex items-center justify-center w-10 h-10 rounded-lg mr-3 transition-colors",
+                selectedIndex === index ? "bg-primary/10" : "bg-muted/50 group-hover:bg-muted"
+              ),
+              children: /* @__PURE__ */ jsx68(item.icon, { className: cn("w-5 h-5", selectedIndex === index ? "text-primary" : "text-muted-foreground") })
+            }
+          ),
+          /* @__PURE__ */ jsxs60("div", { className: "text-left", children: [
+            /* @__PURE__ */ jsx68("div", { className: cn("text-sm font-medium", selectedIndex === index && "text-primary"), children: item.title }),
+            /* @__PURE__ */ jsx68("div", { className: "text-xs text-muted-foreground", children: item.description })
+          ] })
+        ]
+      },
+      item.title
+    )) })
+  ] });
+});
+CommandList.displayName = "CommandList";
+var getSuggestionItems = ({ query }) => {
+  return [
+    {
+      icon: Type,
+      title: "Text",
+      description: "Start writing with plain text",
+      command: ({ editor, range }) => {
+        editor.chain().focus().deleteRange(range).setParagraph().run();
+      }
+    },
+    {
+      icon: Heading1,
+      title: "Heading 1",
+      description: "Large section heading",
+      command: ({ editor, range }) => {
+        editor.chain().focus().deleteRange(range).setNode("heading", { level: 1 }).run();
+      }
+    },
+    {
+      icon: Heading2,
+      title: "Heading 2",
+      description: "Medium section heading",
+      command: ({ editor, range }) => {
+        editor.chain().focus().deleteRange(range).setNode("heading", { level: 2 }).run();
+      }
+    },
+    {
+      icon: Heading3,
+      title: "Heading 3",
+      description: "Small section heading",
+      command: ({ editor, range }) => {
+        editor.chain().focus().deleteRange(range).setNode("heading", { level: 3 }).run();
+      }
+    },
+    {
+      icon: List2,
+      title: "Bullet List",
+      description: "Create a simple bullet list",
+      command: ({ editor, range }) => {
+        editor.chain().focus().deleteRange(range).toggleBulletList().run();
+      }
+    },
+    {
+      icon: ListOrdered,
+      title: "Numbered List",
+      description: "Create a list with numbering",
+      command: ({ editor, range }) => {
+        editor.chain().focus().deleteRange(range).toggleOrderedList().run();
+      }
+    },
+    {
+      icon: ListTodo,
+      title: "Todo List",
+      description: "Track tasks with a todo list",
+      command: ({ editor, range }) => {
+        editor.chain().focus().deleteRange(range).toggleTaskList().run();
+      }
+    },
+    {
+      icon: Quote,
+      title: "Quote",
+      description: "Capture a quote",
+      command: ({ editor, range }) => {
+        editor.chain().focus().deleteRange(range).toggleBlockquote().run();
+      }
+    },
+    {
+      icon: FileCode,
+      title: "Code Block",
+      description: "Display code with syntax highlighting",
+      command: ({ editor, range }) => {
+        editor.chain().focus().deleteRange(range).toggleCodeBlock().run();
+      }
+    },
+    {
+      icon: Minus,
+      title: "Divider",
+      description: "Visually divide blocks",
+      command: ({ editor, range }) => {
+        editor.chain().focus().deleteRange(range).setHorizontalRule().run();
+      }
+    },
+    {
+      icon: Table2,
+      title: "Table",
+      description: "Insert a table",
+      command: ({ editor, range }) => {
+        editor.chain().focus().deleteRange(range).insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run();
+      }
+    }
+  ].filter((item) => item.title.toLowerCase().includes(query.toLowerCase()));
+};
+var SlashCommand = Extension.create({
+  name: "slashCommand",
+  addProseMirrorPlugins() {
+    return [
+      Suggestion({
+        editor: this.editor,
+        char: "/",
+        command: ({ editor, range, props }) => {
+          props.command({ editor, range });
+        },
+        items: getSuggestionItems,
+        render: () => {
+          let component;
+          let popup;
+          return {
+            onStart: (props) => {
+              component = new ReactRenderer(CommandList, {
+                props,
+                editor: props.editor
+              });
+              if (!props.clientRect) {
+                return;
+              }
+              popup = tippy("body", {
+                getReferenceClientRect: props.clientRect,
+                appendTo: () => document.body,
+                content: component.element,
+                showOnCreate: true,
+                interactive: true,
+                trigger: "manual",
+                placement: "bottom-start"
+              });
+            },
+            onUpdate(props) {
+              component?.updateProps(props);
+              if (!props.clientRect) {
+                return;
+              }
+              popup?.[0]?.setProps({
+                getReferenceClientRect: props.clientRect
+              });
+            },
+            onKeyDown(props) {
+              if (props.event.key === "Escape") {
+                popup?.[0]?.hide();
+                return true;
+              }
+              return component?.ref?.onKeyDown(props) ?? false;
+            },
+            onExit() {
+              popup?.[0]?.destroy();
+              component?.destroy();
+            }
+          };
+        }
+      })
+    ];
+  }
+});
+
+// ../../components/ui/UEditor/extensions.ts
+var lowlight = createLowlight(common);
+function buildUEditorExtensions({ placeholder, maxCharacters }) {
+  return [
+    Document,
+    Paragraph,
+    Text,
+    Bold,
+    Italic,
+    Strike,
+    Underline,
+    Subscript,
+    Superscript,
+    Heading.configure({
+      levels: [1, 2, 3]
+    }),
+    BulletList.configure({
+      HTMLAttributes: {
+        class: "list-disc pl-6 my-2 space-y-1"
+      }
+    }),
+    OrderedList.configure({
+      HTMLAttributes: {
+        class: "list-decimal pl-6 my-2 space-y-1"
+      }
+    }),
+    ListItem2.configure({
+      HTMLAttributes: {
+        class: "pl-1"
+      }
+    }),
+    TaskList,
+    TaskItem.configure({
+      nested: true
+    }),
+    Blockquote.configure({
+      HTMLAttributes: {
+        class: "border-l-4 border-primary pl-4 py-2 my-4 bg-muted/30 rounded-r-lg italic text-muted-foreground"
+      }
+    }),
+    Code.configure({
+      HTMLAttributes: {
+        class: "px-1.5 py-0.5 rounded bg-muted font-mono text-sm"
+      }
+    }),
+    CodeBlockLowlight.configure({
+      lowlight,
+      HTMLAttributes: {
+        class: "rounded-lg bg-[#1e1e1e] p-4 font-mono text-sm overflow-x-auto"
+      }
+    }),
+    HorizontalRule,
+    Link3.configure({
+      openOnClick: false,
+      HTMLAttributes: {
+        class: "text-primary underline underline-offset-2 hover:text-primary/80 cursor-pointer"
+      }
+    }),
+    Image3.configure({
+      HTMLAttributes: {
+        class: "rounded-lg max-w-full h-auto my-4"
+      }
+    }),
+    TextStyle,
+    Color,
+    Highlight.configure({
+      multicolor: true
+    }),
+    TextAlign.configure({
+      types: ["heading", "paragraph"]
+    }),
+    Table3.configure({
+      resizable: true,
+      HTMLAttributes: {
+        class: "border-collapse w-full my-4"
+      }
+    }),
+    TableRow2,
+    TableCell2.configure({
+      HTMLAttributes: {
+        class: "border border-border p-2 min-w-[100px]"
+      }
+    }),
+    TableHeader2.configure({
+      HTMLAttributes: {
+        class: "border border-border p-2 bg-muted font-semibold min-w-[100px]"
+      }
+    }),
+    CharacterCount.configure({
+      limit: maxCharacters
+    }),
+    Typography,
+    History2,
+    Placeholder.configure({
+      placeholder,
+      emptyEditorClass: "is-editor-empty",
+      emptyNodeClass: "is-empty"
+    }),
+    SlashCommand
+  ];
+}
+
+// ../../components/ui/UEditor/toolbar.tsx
+import React59, { useState as useState44 } from "react";
+import { useTranslations as useTranslations4 } from "next-intl";
+import {
+  AlignCenter,
+  AlignJustify,
+  AlignLeft,
+  AlignRight,
+  ArrowDown,
+  ArrowRight,
+  Bold as BoldIcon,
+  ChevronDown as ChevronDown5,
+  Code as CodeIcon,
+  FileCode as FileCode2,
+  Heading1 as Heading1Icon,
+  Heading2 as Heading2Icon,
+  Heading3 as Heading3Icon,
+  Highlighter,
+  Image as ImageIcon2,
+  Italic as ItalicIcon,
+  Link as LinkIcon,
+  List as ListIcon,
+  ListOrdered as ListOrderedIcon,
+  ListTodo as ListTodo2,
+  Palette as Palette2,
+  Quote as QuoteIcon,
+  Redo as RedoIcon,
+  Strikethrough as StrikethroughIcon,
+  Subscript as SubscriptIcon,
+  Superscript as SuperscriptIcon,
+  Table as TableIcon,
+  Trash2,
+  Type as Type2,
+  Underline as UnderlineIcon,
+  Undo as UndoIcon
+} from "lucide-react";
+
+// ../../components/ui/UEditor/colors.tsx
+import { useMemo as useMemo14 } from "react";
+import { useTranslations as useTranslations2 } from "next-intl";
+import { X as X14 } from "lucide-react";
+import { jsx as jsx69, jsxs as jsxs61 } from "react/jsx-runtime";
+var useEditorColors = () => {
+  const t = useTranslations2("UEditor");
+  const textColors = useMemo14(
+    () => [
+      { name: t("colors.default"), color: "inherit", cssClass: "text-foreground" },
+      { name: t("colors.muted"), color: "var(--muted-foreground)", cssClass: "text-muted-foreground" },
+      { name: t("colors.primary"), color: "var(--primary)", cssClass: "text-primary" },
+      { name: t("colors.secondary"), color: "var(--secondary)", cssClass: "text-secondary" },
+      { name: t("colors.success"), color: "var(--success)", cssClass: "text-success" },
+      { name: t("colors.warning"), color: "var(--warning)", cssClass: "text-warning" },
+      { name: t("colors.destructive"), color: "var(--destructive)", cssClass: "text-destructive" },
+      { name: t("colors.info"), color: "var(--info)", cssClass: "text-info" }
+    ],
+    [t]
+  );
+  const highlightColors = useMemo14(
+    () => [
+      { name: t("colors.default"), color: "", cssClass: "" },
+      { name: t("colors.muted"), color: "var(--muted)", cssClass: "bg-muted" },
+      { name: t("colors.primary"), color: "color-mix(in oklch, var(--primary) 20%, transparent)", cssClass: "bg-primary/20" },
+      { name: t("colors.secondary"), color: "color-mix(in oklch, var(--secondary) 20%, transparent)", cssClass: "bg-secondary/20" },
+      { name: t("colors.success"), color: "color-mix(in oklch, var(--success) 20%, transparent)", cssClass: "bg-success/20" },
+      { name: t("colors.warning"), color: "color-mix(in oklch, var(--warning) 20%, transparent)", cssClass: "bg-warning/20" },
+      { name: t("colors.destructive"), color: "color-mix(in oklch, var(--destructive) 20%, transparent)", cssClass: "bg-destructive/20" },
+      { name: t("colors.info"), color: "color-mix(in oklch, var(--info) 20%, transparent)", cssClass: "bg-info/20" },
+      { name: t("colors.accent"), color: "var(--accent)", cssClass: "bg-accent" }
+    ],
+    [t]
+  );
+  return { textColors, highlightColors };
+};
+var EditorColorPalette = ({
+  colors,
+  currentColor,
+  onSelect,
+  label
+}) => /* @__PURE__ */ jsxs61("div", { className: "p-2", children: [
+  /* @__PURE__ */ jsx69("span", { className: "text-xs font-medium text-muted-foreground uppercase tracking-wider px-2", children: label }),
+  /* @__PURE__ */ jsx69("div", { className: "grid grid-cols-4 gap-1.5 mt-2", children: colors.map((c) => /* @__PURE__ */ jsxs61(
+    "button",
+    {
+      type: "button",
+      onMouseDown: (e) => e.preventDefault(),
+      onClick: () => onSelect(c.color),
+      className: cn(
+        "flex items-center justify-center w-9 h-9 rounded-lg border-2 transition-all hover:scale-105",
+        currentColor === c.color ? "border-primary ring-2 ring-primary/20" : "border-border/50 hover:border-primary/50"
+      ),
+      style: { backgroundColor: c.color || "transparent" },
+      title: c.name,
+      children: [
+        c.color === "" && /* @__PURE__ */ jsx69(X14, { className: "w-4 h-4 text-muted-foreground" }),
+        c.color === "inherit" && /* @__PURE__ */ jsx69("span", { className: "text-xs font-medium", children: "A" })
+      ]
+    },
+    c.name
+  )) })
+] });
+
+// ../../components/ui/UEditor/inputs.tsx
+import { useEffect as useEffect25, useRef as useRef22, useState as useState43 } from "react";
+import { useTranslations as useTranslations3 } from "next-intl";
+import { Check as Check9, X as X15 } from "lucide-react";
+import { jsx as jsx70, jsxs as jsxs62 } from "react/jsx-runtime";
+var LinkInput = ({
+  onSubmit,
+  onCancel,
+  initialUrl = ""
+}) => {
+  const t = useTranslations3("UEditor");
+  const [url, setUrl] = useState43(initialUrl);
+  const inputRef = useRef22(null);
+  useEffect25(() => {
+    inputRef.current?.focus();
+    inputRef.current?.select();
+  }, []);
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    if (url) {
+      onSubmit(url.startsWith("http") ? url : `https://${url}`);
+    }
+  };
+  return /* @__PURE__ */ jsxs62("form", { onSubmit: handleSubmit, className: "flex items-center gap-2 p-2", children: [
+    /* @__PURE__ */ jsx70(
+      "input",
+      {
+        ref: inputRef,
+        type: "text",
+        value: url,
+        onChange: (e) => setUrl(e.target.value),
+        placeholder: t("linkInput.placeholder"),
+        className: "flex-1 px-3 py-2 text-sm bg-muted/50 border-0 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/20"
+      }
+    ),
+    /* @__PURE__ */ jsx70("button", { type: "submit", className: "p-2 rounded-lg bg-primary text-primary-foreground hover:bg-primary/90 transition-colors", children: /* @__PURE__ */ jsx70(Check9, { className: "w-4 h-4" }) }),
+    /* @__PURE__ */ jsx70("button", { type: "button", onClick: onCancel, className: "p-2 rounded-lg hover:bg-muted transition-colors text-muted-foreground", children: /* @__PURE__ */ jsx70(X15, { className: "w-4 h-4" }) })
+  ] });
+};
+var ImageInput = ({ onSubmit, onCancel }) => {
+  const t = useTranslations3("UEditor");
+  const [url, setUrl] = useState43("");
+  const [alt, setAlt] = useState43("");
+  const inputRef = useRef22(null);
+  useEffect25(() => {
+    inputRef.current?.focus();
+  }, []);
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    if (url) {
+      onSubmit(url, alt);
+    }
+  };
+  return /* @__PURE__ */ jsxs62("form", { onSubmit: handleSubmit, className: "p-3 space-y-3", children: [
+    /* @__PURE__ */ jsxs62("div", { children: [
+      /* @__PURE__ */ jsx70("label", { className: "text-xs font-medium text-muted-foreground", children: t("imageInput.urlLabel") }),
+      /* @__PURE__ */ jsx70(
+        "input",
+        {
+          ref: inputRef,
+          type: "text",
+          value: url,
+          onChange: (e) => setUrl(e.target.value),
+          placeholder: t("imageInput.urlPlaceholder"),
+          className: "w-full mt-1 px-3 py-2 text-sm bg-muted/50 border-0 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/20"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs62("div", { children: [
+      /* @__PURE__ */ jsx70("label", { className: "text-xs font-medium text-muted-foreground", children: t("imageInput.altLabel") }),
+      /* @__PURE__ */ jsx70(
+        "input",
+        {
+          type: "text",
+          value: alt,
+          onChange: (e) => setAlt(e.target.value),
+          placeholder: t("imageInput.altPlaceholder"),
+          className: "w-full mt-1 px-3 py-2 text-sm bg-muted/50 border-0 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/20"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs62("div", { className: "flex gap-2", children: [
+      /* @__PURE__ */ jsx70(
+        "button",
+        {
+          type: "submit",
+          disabled: !url,
+          className: "flex-1 py-2 rounded-lg bg-primary text-primary-foreground hover:bg-primary/90 transition-colors disabled:opacity-50",
+          children: t("imageInput.addBtn")
+        }
+      ),
+      /* @__PURE__ */ jsx70("button", { type: "button", onClick: onCancel, className: "px-4 py-2 rounded-lg hover:bg-muted transition-colors text-muted-foreground", children: t("imageInput.cancelBtn") })
+    ] })
+  ] });
+};
+
+// ../../components/ui/UEditor/toolbar.tsx
+import { jsx as jsx71, jsxs as jsxs63 } from "react/jsx-runtime";
+var ToolbarButton = React59.forwardRef(({ onClick, active, disabled, children, title, className }, ref) => {
+  const button = /* @__PURE__ */ jsx71(
+    "button",
+    {
+      ref,
+      type: "button",
+      onMouseDown: (e) => e.preventDefault(),
+      onClick,
+      disabled,
+      className: cn(
+        "flex items-center justify-center w-8 h-8 rounded-lg transition-all duration-200",
+        "hover:bg-accent hover:scale-105",
+        "focus:outline-none focus:ring-2 focus:ring-primary/20",
+        "disabled:opacity-40 disabled:cursor-not-allowed disabled:hover:scale-100",
+        active ? "bg-primary/10 text-primary shadow-sm" : "text-muted-foreground hover:text-foreground",
+        className
+      ),
+      children
+    }
+  );
+  if (title) {
+    return /* @__PURE__ */ jsx71(Tooltip, { content: title, placement: "top", delay: { open: 500, close: 0 }, children: button });
+  }
+  return button;
+});
+ToolbarButton.displayName = "ToolbarButton";
+var ToolbarDivider = () => /* @__PURE__ */ jsx71("div", { className: "w-px h-6 bg-border/50 mx-1" });
+var EditorToolbar = ({ editor, variant }) => {
+  const t = useTranslations4("UEditor");
+  const { textColors, highlightColors } = useEditorColors();
+  const [showImageInput, setShowImageInput] = useState44(false);
+  if (variant === "minimal") {
+    return /* @__PURE__ */ jsxs63("div", { className: "flex items-center gap-1 p-2 border-b bg-muted/30", children: [
+      /* @__PURE__ */ jsx71(ToolbarButton, { onClick: () => editor.chain().focus().toggleBold().run(), active: editor.isActive("bold"), title: t("toolbar.bold"), children: /* @__PURE__ */ jsx71(BoldIcon, { className: "w-4 h-4" }) }),
+      /* @__PURE__ */ jsx71(
+        ToolbarButton,
+        {
+          onClick: () => editor.chain().focus().toggleItalic().run(),
+          active: editor.isActive("italic"),
+          title: t("toolbar.italic"),
+          children: /* @__PURE__ */ jsx71(ItalicIcon, { className: "w-4 h-4" })
+        }
+      ),
+      /* @__PURE__ */ jsx71(
+        ToolbarButton,
+        {
+          onClick: () => editor.chain().focus().toggleBulletList().run(),
+          active: editor.isActive("bulletList"),
+          title: t("toolbar.bulletList"),
+          children: /* @__PURE__ */ jsx71(ListIcon, { className: "w-4 h-4" })
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ jsxs63("div", { className: "flex flex-wrap items-center gap-1 p-2 border-b bg-linear-to-r from-muted/30 to-transparent", children: [
+    /* @__PURE__ */ jsxs63(
+      DropdownMenu,
+      {
+        trigger: /* @__PURE__ */ jsxs63(ToolbarButton, { onClick: () => {
+        }, title: t("toolbar.textStyle"), className: "px-2 w-auto gap-1", children: [
+          /* @__PURE__ */ jsx71(Type2, { className: "w-4 h-4" }),
+          /* @__PURE__ */ jsx71(ChevronDown5, { className: "w-3 h-3" })
+        ] }),
+        children: [
+          /* @__PURE__ */ jsx71(DropdownMenuItem, { icon: Type2, label: t("toolbar.normal"), onClick: () => editor.chain().focus().setParagraph().run(), active: editor.isActive("paragraph") }),
+          /* @__PURE__ */ jsx71(
+            DropdownMenuItem,
+            {
+              icon: Heading1Icon,
+              label: t("toolbar.heading1"),
+              onClick: () => editor.chain().focus().toggleHeading({ level: 1 }).run(),
+              active: editor.isActive("heading", { level: 1 }),
+              shortcut: "Ctrl+Alt+1"
+            }
+          ),
+          /* @__PURE__ */ jsx71(
+            DropdownMenuItem,
+            {
+              icon: Heading2Icon,
+              label: t("toolbar.heading2"),
+              onClick: () => editor.chain().focus().toggleHeading({ level: 2 }).run(),
+              active: editor.isActive("heading", { level: 2 }),
+              shortcut: "Ctrl+Alt+2"
+            }
+          ),
+          /* @__PURE__ */ jsx71(
+            DropdownMenuItem,
+            {
+              icon: Heading3Icon,
+              label: t("toolbar.heading3"),
+              onClick: () => editor.chain().focus().toggleHeading({ level: 3 }).run(),
+              active: editor.isActive("heading", { level: 3 }),
+              shortcut: "Ctrl+Alt+3"
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx71(ToolbarDivider, {}),
+    /* @__PURE__ */ jsx71(ToolbarButton, { onClick: () => editor.chain().focus().toggleBold().run(), active: editor.isActive("bold"), title: t("toolbar.bold"), children: /* @__PURE__ */ jsx71(BoldIcon, { className: "w-4 h-4" }) }),
+    /* @__PURE__ */ jsx71(
+      ToolbarButton,
+      {
+        onClick: () => editor.chain().focus().toggleItalic().run(),
+        active: editor.isActive("italic"),
+        title: t("toolbar.italic"),
+        children: /* @__PURE__ */ jsx71(ItalicIcon, { className: "w-4 h-4" })
+      }
+    ),
+    /* @__PURE__ */ jsx71(
+      ToolbarButton,
+      {
+        onClick: () => editor.chain().focus().toggleUnderline().run(),
+        active: editor.isActive("underline"),
+        title: t("toolbar.underline"),
+        children: /* @__PURE__ */ jsx71(UnderlineIcon, { className: "w-4 h-4" })
+      }
+    ),
+    /* @__PURE__ */ jsx71(
+      ToolbarButton,
+      {
+        onClick: () => editor.chain().focus().toggleStrike().run(),
+        active: editor.isActive("strike"),
+        title: t("toolbar.strike"),
+        children: /* @__PURE__ */ jsx71(StrikethroughIcon, { className: "w-4 h-4" })
+      }
+    ),
+    /* @__PURE__ */ jsx71(ToolbarButton, { onClick: () => editor.chain().focus().toggleCode().run(), active: editor.isActive("code"), title: t("toolbar.code"), children: /* @__PURE__ */ jsx71(CodeIcon, { className: "w-4 h-4" }) }),
+    /* @__PURE__ */ jsx71(ToolbarDivider, {}),
+    /* @__PURE__ */ jsx71(
+      DropdownMenu,
+      {
+        trigger: /* @__PURE__ */ jsxs63(ToolbarButton, { onClick: () => {
+        }, title: t("colors.textColor"), children: [
+          /* @__PURE__ */ jsx71(Palette2, { className: "w-4 h-4" }),
+          /* @__PURE__ */ jsx71(ChevronDown5, { className: "w-3 h-3" })
+        ] }),
+        children: /* @__PURE__ */ jsx71(
+          EditorColorPalette,
+          {
+            colors: textColors,
+            currentColor: editor.getAttributes("textStyle").color || "inherit",
+            onSelect: (color) => {
+              if (color === "inherit") {
+                editor.chain().focus().unsetColor().run();
+              } else {
+                editor.chain().focus().setColor(color).run();
+              }
+            },
+            label: t("colors.textColor")
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx71(
+      DropdownMenu,
+      {
+        trigger: /* @__PURE__ */ jsxs63(ToolbarButton, { onClick: () => {
+        }, active: editor.isActive("highlight"), title: t("colors.highlight"), children: [
+          /* @__PURE__ */ jsx71(Highlighter, { className: "w-4 h-4" }),
+          /* @__PURE__ */ jsx71(ChevronDown5, { className: "w-3 h-3" })
+        ] }),
+        children: /* @__PURE__ */ jsx71(
+          EditorColorPalette,
+          {
+            colors: highlightColors,
+            currentColor: editor.getAttributes("highlight").color || "",
+            onSelect: (color) => {
+              if (color === "") {
+                editor.chain().focus().unsetHighlight().run();
+              } else {
+                editor.chain().focus().toggleHighlight({ color }).run();
+              }
+            },
+            label: t("colors.highlight")
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx71(ToolbarDivider, {}),
+    /* @__PURE__ */ jsxs63(
+      DropdownMenu,
+      {
+        trigger: /* @__PURE__ */ jsxs63(ToolbarButton, { onClick: () => {
+        }, title: t("toolbar.alignment"), children: [
+          /* @__PURE__ */ jsx71(AlignLeft, { className: "w-4 h-4" }),
+          /* @__PURE__ */ jsx71(ChevronDown5, { className: "w-3 h-3" })
+        ] }),
+        children: [
+          /* @__PURE__ */ jsx71(
+            DropdownMenuItem,
+            {
+              icon: AlignLeft,
+              label: t("toolbar.alignLeft"),
+              onClick: () => editor.chain().focus().setTextAlign("left").run(),
+              active: editor.isActive({ textAlign: "left" })
+            }
+          ),
+          /* @__PURE__ */ jsx71(
+            DropdownMenuItem,
+            {
+              icon: AlignCenter,
+              label: t("toolbar.alignCenter"),
+              onClick: () => editor.chain().focus().setTextAlign("center").run(),
+              active: editor.isActive({ textAlign: "center" })
+            }
+          ),
+          /* @__PURE__ */ jsx71(
+            DropdownMenuItem,
+            {
+              icon: AlignRight,
+              label: t("toolbar.alignRight"),
+              onClick: () => editor.chain().focus().setTextAlign("right").run(),
+              active: editor.isActive({ textAlign: "right" })
+            }
+          ),
+          /* @__PURE__ */ jsx71(
+            DropdownMenuItem,
+            {
+              icon: AlignJustify,
+              label: t("toolbar.justify"),
+              onClick: () => editor.chain().focus().setTextAlign("justify").run(),
+              active: editor.isActive({ textAlign: "justify" })
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx71(ToolbarDivider, {}),
+    /* @__PURE__ */ jsxs63(
+      DropdownMenu,
+      {
+        trigger: /* @__PURE__ */ jsxs63(ToolbarButton, { onClick: () => {
+        }, title: t("toolbar.bulletList"), children: [
+          /* @__PURE__ */ jsx71(ListIcon, { className: "w-4 h-4" }),
+          /* @__PURE__ */ jsx71(ChevronDown5, { className: "w-3 h-3" })
+        ] }),
+        children: [
+          /* @__PURE__ */ jsx71(
+            DropdownMenuItem,
+            {
+              icon: ListIcon,
+              label: t("toolbar.bulletList"),
+              onClick: () => editor.chain().focus().toggleBulletList().run(),
+              active: editor.isActive("bulletList"),
+              shortcut: "Ctrl+Shift+8"
+            }
+          ),
+          /* @__PURE__ */ jsx71(
+            DropdownMenuItem,
+            {
+              icon: ListOrderedIcon,
+              label: t("toolbar.orderedList"),
+              onClick: () => editor.chain().focus().toggleOrderedList().run(),
+              active: editor.isActive("orderedList"),
+              shortcut: "Ctrl+Shift+7"
+            }
+          ),
+          /* @__PURE__ */ jsx71(
+            DropdownMenuItem,
+            {
+              icon: ListTodo2,
+              label: t("toolbar.taskList"),
+              onClick: () => editor.chain().focus().toggleTaskList().run(),
+              active: editor.isActive("taskList"),
+              shortcut: "Ctrl+Shift+9"
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs63(
+      DropdownMenu,
+      {
+        trigger: /* @__PURE__ */ jsxs63(ToolbarButton, { onClick: () => {
+        }, title: t("toolbar.quote"), children: [
+          /* @__PURE__ */ jsx71(QuoteIcon, { className: "w-4 h-4" }),
+          /* @__PURE__ */ jsx71(ChevronDown5, { className: "w-3 h-3" })
+        ] }),
+        children: [
+          /* @__PURE__ */ jsx71(
+            DropdownMenuItem,
+            {
+              icon: QuoteIcon,
+              label: t("toolbar.quote"),
+              onClick: () => editor.chain().focus().toggleBlockquote().run(),
+              active: editor.isActive("blockquote"),
+              shortcut: "Ctrl+Shift+B"
+            }
+          ),
+          /* @__PURE__ */ jsx71(
+            DropdownMenuItem,
+            {
+              icon: FileCode2,
+              label: t("toolbar.codeBlock"),
+              onClick: () => editor.chain().focus().toggleCodeBlock().run(),
+              active: editor.isActive("codeBlock"),
+              shortcut: "Ctrl+Alt+C"
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx71(
+      DropdownMenu,
+      {
+        trigger: /* @__PURE__ */ jsxs63(ToolbarButton, { onClick: () => {
+        }, title: t("toolbar.image"), children: [
+          /* @__PURE__ */ jsx71(ImageIcon2, { className: "w-4 h-4" }),
+          /* @__PURE__ */ jsx71(ChevronDown5, { className: "w-3 h-3" })
+        ] }),
+        children: showImageInput ? /* @__PURE__ */ jsx71(
+          ImageInput,
+          {
+            onSubmit: (url, alt) => {
+              editor.chain().focus().setImage({ src: url, alt }).run();
+              setShowImageInput(false);
+            },
+            onCancel: () => setShowImageInput(false)
+          }
+        ) : /* @__PURE__ */ jsx71(DropdownMenuItem, { icon: LinkIcon, label: t("imageInput.addFromUrl"), onClick: () => setShowImageInput(true) })
+      }
+    ),
+    /* @__PURE__ */ jsxs63(
+      DropdownMenu,
+      {
+        trigger: /* @__PURE__ */ jsxs63(ToolbarButton, { onClick: () => {
+        }, title: t("toolbar.table"), children: [
+          /* @__PURE__ */ jsx71(TableIcon, { className: "w-4 h-4" }),
+          /* @__PURE__ */ jsx71(ChevronDown5, { className: "w-3 h-3" })
+        ] }),
+        children: [
+          /* @__PURE__ */ jsx71(DropdownMenuItem, { icon: TableIcon, label: t("tableMenu.insert3x3"), onClick: () => editor.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run() }),
+          /* @__PURE__ */ jsx71("div", { className: "my-1 border-t" }),
+          /* @__PURE__ */ jsx71(
+            DropdownMenuItem,
+            {
+              icon: ArrowDown,
+              label: t("tableMenu.addColumnBefore"),
+              onClick: () => editor.chain().focus().addColumnBefore().run(),
+              disabled: !editor.can().addColumnBefore()
+            }
+          ),
+          /* @__PURE__ */ jsx71(
+            DropdownMenuItem,
+            {
+              icon: ArrowDown,
+              label: t("tableMenu.addColumnAfter"),
+              onClick: () => editor.chain().focus().addColumnAfter().run(),
+              disabled: !editor.can().addColumnAfter()
+            }
+          ),
+          /* @__PURE__ */ jsx71(
+            DropdownMenuItem,
+            {
+              icon: ArrowRight,
+              label: t("tableMenu.addRowBefore"),
+              onClick: () => editor.chain().focus().addRowBefore().run(),
+              disabled: !editor.can().addRowBefore()
+            }
+          ),
+          /* @__PURE__ */ jsx71(
+            DropdownMenuItem,
+            {
+              icon: ArrowRight,
+              label: t("tableMenu.addRowAfter"),
+              onClick: () => editor.chain().focus().addRowAfter().run(),
+              disabled: !editor.can().addRowAfter()
+            }
+          ),
+          /* @__PURE__ */ jsx71("div", { className: "my-1 border-t" }),
+          /* @__PURE__ */ jsx71(
+            DropdownMenuItem,
+            {
+              icon: Trash2,
+              label: t("tableMenu.deleteColumn"),
+              onClick: () => editor.chain().focus().deleteColumn().run(),
+              disabled: !editor.can().deleteColumn()
+            }
+          ),
+          /* @__PURE__ */ jsx71(DropdownMenuItem, { icon: Trash2, label: t("tableMenu.deleteRow"), onClick: () => editor.chain().focus().deleteRow().run(), disabled: !editor.can().deleteRow() }),
+          /* @__PURE__ */ jsx71(
+            DropdownMenuItem,
+            {
+              icon: Trash2,
+              label: t("tableMenu.deleteTable"),
+              onClick: () => editor.chain().focus().deleteTable().run(),
+              disabled: !editor.can().deleteTable()
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx71(ToolbarDivider, {}),
+    /* @__PURE__ */ jsx71(ToolbarButton, { onClick: () => editor.chain().focus().toggleSubscript().run(), active: editor.isActive("subscript"), title: t("toolbar.subscript"), children: /* @__PURE__ */ jsx71(SubscriptIcon, { className: "w-4 h-4" }) }),
+    /* @__PURE__ */ jsx71(ToolbarButton, { onClick: () => editor.chain().focus().toggleSuperscript().run(), active: editor.isActive("superscript"), title: t("toolbar.superscript"), children: /* @__PURE__ */ jsx71(SuperscriptIcon, { className: "w-4 h-4" }) }),
+    /* @__PURE__ */ jsx71(ToolbarDivider, {}),
+    /* @__PURE__ */ jsx71(ToolbarButton, { onClick: () => editor.chain().focus().undo().run(), disabled: !editor.can().undo(), title: t("toolbar.undo"), children: /* @__PURE__ */ jsx71(UndoIcon, { className: "w-4 h-4" }) }),
+    /* @__PURE__ */ jsx71(ToolbarButton, { onClick: () => editor.chain().focus().redo().run(), disabled: !editor.can().redo(), title: t("toolbar.redo"), children: /* @__PURE__ */ jsx71(RedoIcon, { className: "w-4 h-4" }) })
+  ] });
+};
+
+// ../../components/ui/UEditor/menus.tsx
+import { useCallback as useCallback12, useEffect as useEffect26, useMemo as useMemo15, useRef as useRef23, useState as useState45 } from "react";
+import { createPortal as createPortal9 } from "react-dom";
+import { useTranslations as useTranslations5 } from "next-intl";
+import {
+  Bold as BoldIcon2,
+  Code as CodeIcon2,
+  FileCode as FileCode3,
+  Heading1 as Heading1Icon2,
+  Heading2 as Heading2Icon2,
+  Heading3 as Heading3Icon2,
+  Italic as ItalicIcon2,
+  Link as LinkIcon2,
+  List as ListIcon2,
+  ListOrdered as ListOrderedIcon2,
+  ListTodo as ListTodo3,
+  Minus as Minus2,
+  Palette as Palette3,
+  Plus,
+  Quote as QuoteIcon2,
+  Subscript as SubscriptIcon2,
+  Superscript as SuperscriptIcon2,
+  Table as TableIcon2,
+  Type as Type3,
+  Underline as UnderlineIcon2,
+  Strikethrough as StrikethroughIcon2
+} from "lucide-react";
+import { jsx as jsx72, jsxs as jsxs64 } from "react/jsx-runtime";
+var SlashCommandMenu = ({ editor, onClose, filterText = "" }) => {
+  const t = useTranslations5("UEditor");
+  const [selectedIndex, setSelectedIndex] = useState45(0);
+  const menuRef = useRef23(null);
+  const allCommands = useMemo15(
+    () => [
+      {
+        icon: Type3,
+        label: t("slashCommand.text"),
+        description: t("slashCommand.textDesc"),
+        action: () => editor.chain().focus().setParagraph().run()
+      },
+      {
+        icon: Heading1Icon2,
+        label: t("slashCommand.heading1"),
+        description: t("slashCommand.heading1Desc"),
+        action: () => editor.chain().focus().toggleHeading({ level: 1 }).run()
+      },
+      {
+        icon: Heading2Icon2,
+        label: t("slashCommand.heading2"),
+        description: t("slashCommand.heading2Desc"),
+        action: () => editor.chain().focus().toggleHeading({ level: 2 }).run()
+      },
+      {
+        icon: Heading3Icon2,
+        label: t("slashCommand.heading3"),
+        description: t("slashCommand.heading3Desc"),
+        action: () => editor.chain().focus().toggleHeading({ level: 3 }).run()
+      },
+      {
+        icon: ListIcon2,
+        label: t("slashCommand.bulletList"),
+        description: t("slashCommand.bulletListDesc"),
+        action: () => editor.chain().focus().toggleBulletList().run()
+      },
+      {
+        icon: ListOrderedIcon2,
+        label: t("slashCommand.orderedList"),
+        description: t("slashCommand.orderedListDesc"),
+        action: () => editor.chain().focus().toggleOrderedList().run()
+      },
+      {
+        icon: ListTodo3,
+        label: t("slashCommand.todoList"),
+        description: t("slashCommand.todoListDesc"),
+        action: () => editor.chain().focus().toggleTaskList().run()
+      },
+      {
+        icon: QuoteIcon2,
+        label: t("slashCommand.quote"),
+        description: t("slashCommand.quoteDesc"),
+        action: () => editor.chain().focus().toggleBlockquote().run()
+      },
+      {
+        icon: FileCode3,
+        label: t("slashCommand.codeBlock"),
+        description: t("slashCommand.codeBlockDesc"),
+        action: () => editor.chain().focus().toggleCodeBlock().run()
+      },
+      {
+        icon: Minus2,
+        label: t("slashCommand.divider"),
+        description: t("slashCommand.dividerDesc"),
+        action: () => editor.chain().focus().setHorizontalRule().run()
+      },
+      {
+        icon: TableIcon2,
+        label: t("slashCommand.table"),
+        description: t("slashCommand.tableDesc"),
+        action: () => editor.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run()
+      }
+    ],
+    [editor, t]
+  );
+  const commands = useMemo15(() => {
+    if (!filterText) return allCommands;
+    const lowerFilter = filterText.toLowerCase();
+    return allCommands.filter((cmd) => cmd.label.toLowerCase().includes(lowerFilter) || cmd.description.toLowerCase().includes(lowerFilter));
+  }, [allCommands, filterText]);
+  useEffect26(() => {
+    setSelectedIndex(0);
+  }, [filterText]);
+  useEffect26(() => {
+    const selectedElement = menuRef.current?.querySelector(`[data-index="${selectedIndex}"]`);
+    selectedElement?.scrollIntoView({ block: "nearest" });
+  }, [selectedIndex]);
+  const selectCommand = useCallback12(
+    (index) => {
+      const command = commands[index];
+      if (command) {
+        command.action();
+        onClose();
+      }
+    },
+    [commands, onClose]
+  );
+  useEffect26(() => {
+    const handleKeyDown = (e) => {
+      if (commands.length === 0) return;
+      if (e.key === "ArrowDown") {
+        e.preventDefault();
+        setSelectedIndex((prev) => (prev + 1) % commands.length);
+      } else if (e.key === "ArrowUp") {
+        e.preventDefault();
+        setSelectedIndex((prev) => (prev - 1 + commands.length) % commands.length);
+      } else if (e.key === "Enter") {
+        e.preventDefault();
+        selectCommand(selectedIndex);
+      } else if (e.key === "Escape") {
+        e.preventDefault();
+        onClose();
+      }
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [commands, selectedIndex, selectCommand, onClose]);
+  if (commands.length === 0) {
+    return /* @__PURE__ */ jsx72("div", { className: "w-72 p-4 text-center text-muted-foreground text-sm", children: t("slashCommand.noResults") });
+  }
+  return /* @__PURE__ */ jsxs64("div", { ref: menuRef, className: "w-72 max-h-80 overflow-y-auto", children: [
+    /* @__PURE__ */ jsx72("div", { className: "px-3 py-2 border-b", children: /* @__PURE__ */ jsx72("span", { className: "text-xs font-semibold text-muted-foreground uppercase tracking-wider", children: t("slashCommand.basicBlocks") }) }),
+    /* @__PURE__ */ jsx72("div", { className: "p-1", children: commands.map((cmd, index) => /* @__PURE__ */ jsxs64(
+      "button",
+      {
+        type: "button",
+        "data-index": index,
+        onMouseDown: (e) => e.preventDefault(),
+        onClick: () => selectCommand(index),
+        onMouseEnter: () => setSelectedIndex(index),
+        className: cn(
+          "flex items-center w-full px-3 py-2.5 rounded-lg transition-colors group",
+          selectedIndex === index ? "bg-accent" : "hover:bg-accent/50"
+        ),
+        children: [
+          /* @__PURE__ */ jsx72(
+            "div",
+            {
+              className: cn(
+                "flex items-center justify-center w-10 h-10 rounded-lg mr-3 transition-colors",
+                selectedIndex === index ? "bg-primary/10" : "bg-muted/50 group-hover:bg-muted"
+              ),
+              children: /* @__PURE__ */ jsx72(cmd.icon, { className: cn("w-5 h-5", selectedIndex === index ? "text-primary" : "text-muted-foreground") })
+            }
+          ),
+          /* @__PURE__ */ jsxs64("div", { className: "text-left", children: [
+            /* @__PURE__ */ jsx72("div", { className: cn("text-sm font-medium", selectedIndex === index && "text-primary"), children: cmd.label }),
+            /* @__PURE__ */ jsx72("div", { className: "text-xs text-muted-foreground", children: cmd.description })
+          ] })
+        ]
+      },
+      cmd.label
+    )) })
+  ] });
+};
+var FloatingMenuContent = ({ editor }) => {
+  const t = useTranslations5("UEditor");
+  const [showCommands, setShowCommands] = useState45(false);
+  if (showCommands) {
+    return /* @__PURE__ */ jsx72(SlashCommandMenu, { editor, onClose: () => setShowCommands(false) });
+  }
+  return /* @__PURE__ */ jsxs64(
+    "button",
+    {
+      type: "button",
+      onClick: () => setShowCommands(true),
+      className: "flex items-center gap-1 px-2 py-1.5 rounded-lg hover:bg-accent transition-all group",
+      children: [
+        /* @__PURE__ */ jsx72(Plus, { className: "w-4 h-4 text-muted-foreground group-hover:text-foreground" }),
+        /* @__PURE__ */ jsx72("span", { className: "text-sm text-muted-foreground group-hover:text-foreground", children: t("floatingMenu.addBlock") })
+      ]
+    }
+  );
+};
+var BubbleMenuContent = ({ editor }) => {
+  const t = useTranslations5("UEditor");
+  const { textColors, highlightColors } = useEditorColors();
+  const [showLinkInput, setShowLinkInput] = useState45(false);
+  const [showEditorColorPalette, setShowEditorColorPalette] = useState45(false);
+  if (showLinkInput) {
+    return /* @__PURE__ */ jsx72(
+      LinkInput,
+      {
+        initialUrl: editor.getAttributes("link").href || "",
+        onSubmit: (url) => {
+          editor.chain().focus().extendMarkRange("link").setLink({ href: url }).run();
+        },
+        onCancel: () => setShowLinkInput(false)
+      }
+    );
+  }
+  if (showEditorColorPalette) {
+    return /* @__PURE__ */ jsxs64("div", { className: "w-48", children: [
+      /* @__PURE__ */ jsx72(
+        EditorColorPalette,
+        {
+          colors: textColors,
+          currentColor: editor.getAttributes("textStyle").color || "inherit",
+          onSelect: (color) => {
+            if (color === "inherit") {
+              editor.chain().focus().unsetColor().run();
+            } else {
+              editor.chain().focus().setColor(color).run();
+            }
+          },
+          label: t("colors.textColor")
+        }
+      ),
+      /* @__PURE__ */ jsx72("div", { className: "border-t my-1" }),
+      /* @__PURE__ */ jsx72(
+        EditorColorPalette,
+        {
+          colors: highlightColors,
+          currentColor: editor.getAttributes("highlight").color || "",
+          onSelect: (color) => {
+            if (color === "") {
+              editor.chain().focus().unsetHighlight().run();
+            } else {
+              editor.chain().focus().toggleHighlight({ color }).run();
+            }
+          },
+          label: t("colors.highlight")
+        }
+      ),
+      /* @__PURE__ */ jsx72("div", { className: "p-2 border-t", children: /* @__PURE__ */ jsx72(
+        "button",
+        {
+          type: "button",
+          onClick: () => setShowEditorColorPalette(false),
+          className: "w-full py-1.5 text-sm rounded-lg hover:bg-muted transition-colors",
+          children: t("colors.done")
+        }
+      ) })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs64("div", { className: "flex items-center gap-0.5 p-1", children: [
+    /* @__PURE__ */ jsx72(ToolbarButton, { onClick: () => editor.chain().focus().toggleBold().run(), active: editor.isActive("bold"), title: t("toolbar.bold"), children: /* @__PURE__ */ jsx72(BoldIcon2, { className: "w-4 h-4" }) }),
+    /* @__PURE__ */ jsx72(ToolbarButton, { onClick: () => editor.chain().focus().toggleItalic().run(), active: editor.isActive("italic"), title: t("toolbar.italic"), children: /* @__PURE__ */ jsx72(ItalicIcon2, { className: "w-4 h-4" }) }),
+    /* @__PURE__ */ jsx72(
+      ToolbarButton,
+      {
+        onClick: () => editor.chain().focus().toggleUnderline().run(),
+        active: editor.isActive("underline"),
+        title: t("toolbar.underline"),
+        children: /* @__PURE__ */ jsx72(UnderlineIcon2, { className: "w-4 h-4" })
+      }
+    ),
+    /* @__PURE__ */ jsx72(ToolbarButton, { onClick: () => editor.chain().focus().toggleStrike().run(), active: editor.isActive("strike"), title: t("toolbar.strike"), children: /* @__PURE__ */ jsx72(StrikethroughIcon2, { className: "w-4 h-4" }) }),
+    /* @__PURE__ */ jsx72(ToolbarButton, { onClick: () => editor.chain().focus().toggleCode().run(), active: editor.isActive("code"), title: t("toolbar.code"), children: /* @__PURE__ */ jsx72(CodeIcon2, { className: "w-4 h-4" }) }),
+    /* @__PURE__ */ jsx72("div", { className: "w-px h-6 bg-border/50 mx-1" }),
+    /* @__PURE__ */ jsx72(ToolbarButton, { onClick: () => setShowLinkInput(true), active: editor.isActive("link"), title: t("toolbar.link"), children: /* @__PURE__ */ jsx72(LinkIcon2, { className: "w-4 h-4" }) }),
+    /* @__PURE__ */ jsx72(ToolbarButton, { onClick: () => setShowEditorColorPalette(true), title: t("colors.textColor"), children: /* @__PURE__ */ jsx72(Palette3, { className: "w-4 h-4" }) }),
+    /* @__PURE__ */ jsx72("div", { className: "w-px h-6 bg-border/50 mx-1" }),
+    /* @__PURE__ */ jsx72(
+      ToolbarButton,
+      {
+        onClick: () => editor.chain().focus().toggleSubscript().run(),
+        active: editor.isActive("subscript"),
+        title: t("toolbar.subscript"),
+        children: /* @__PURE__ */ jsx72(SubscriptIcon2, { className: "w-4 h-4" })
+      }
+    ),
+    /* @__PURE__ */ jsx72(
+      ToolbarButton,
+      {
+        onClick: () => editor.chain().focus().toggleSuperscript().run(),
+        active: editor.isActive("superscript"),
+        title: t("toolbar.superscript"),
+        children: /* @__PURE__ */ jsx72(SuperscriptIcon2, { className: "w-4 h-4" })
+      }
+    )
+  ] });
+};
+var CustomBubbleMenu = ({ editor }) => {
+  const [isVisible, setIsVisible] = useState45(false);
+  const [position, setPosition] = useState45({ top: 0, left: 0 });
+  const menuRef = useRef23(null);
+  useEffect26(() => {
+    const updatePosition = () => {
+      const { state, view } = editor;
+      const { from, to, empty } = state.selection;
+      if (empty || !view.hasFocus()) {
+        setIsVisible(false);
+        return;
+      }
+      const start = view.coordsAtPos(from);
+      const end = view.coordsAtPos(to);
+      const left = (start.left + end.left) / 2;
+      const top = start.top - 10;
+      setPosition({ top, left });
+      setIsVisible(true);
+    };
+    const handleBlur = () => setIsVisible(false);
+    editor.on("selectionUpdate", updatePosition);
+    editor.on("focus", updatePosition);
+    editor.on("blur", handleBlur);
+    return () => {
+      editor.off("selectionUpdate", updatePosition);
+      editor.off("focus", updatePosition);
+      editor.off("blur", handleBlur);
+    };
+  }, [editor]);
+  if (!isVisible) return null;
+  return createPortal9(
+    /* @__PURE__ */ jsx72(
+      "div",
+      {
+        ref: menuRef,
+        className: "fixed z-50 flex rounded-2xl border border-border bg-card text-card-foreground shadow-lg backdrop-blur-sm overflow-hidden animate-in fade-in-0 zoom-in-95",
+        style: {
+          top: `${position.top}px`,
+          left: `${position.left}px`,
+          transform: "translate(-50%, -100%)"
+        },
+        onMouseDown: (e) => e.preventDefault(),
+        children: /* @__PURE__ */ jsx72(BubbleMenuContent, { editor })
+      }
+    ),
+    document.body
+  );
+};
+var CustomFloatingMenu = ({ editor }) => {
+  const [isVisible, setIsVisible] = useState45(false);
+  const [position, setPosition] = useState45({ top: 0, left: 0 });
+  useEffect26(() => {
+    const updatePosition = () => {
+      const { state, view } = editor;
+      const { $from, empty } = state.selection;
+      const isEmptyTextBlock = $from.parent.isTextblock && $from.parent.type.name === "paragraph" && $from.parent.textContent === "" && empty;
+      if (!isEmptyTextBlock || !view.hasFocus()) {
+        setIsVisible(false);
+        return;
+      }
+      const coords = view.coordsAtPos($from.pos);
+      setPosition({ top: coords.top - 10, left: coords.left });
+      setIsVisible(true);
+    };
+    const handleBlur = () => setIsVisible(false);
+    editor.on("selectionUpdate", updatePosition);
+    editor.on("focus", updatePosition);
+    editor.on("blur", handleBlur);
+    editor.on("update", updatePosition);
+    return () => {
+      editor.off("selectionUpdate", updatePosition);
+      editor.off("focus", updatePosition);
+      editor.off("blur", handleBlur);
+      editor.off("update", updatePosition);
+    };
+  }, [editor]);
+  if (!isVisible) return null;
+  return createPortal9(
+    /* @__PURE__ */ jsx72(
+      "div",
+      {
+        className: "fixed z-50 rounded-2xl border border-border bg-card text-card-foreground shadow-lg backdrop-blur-sm overflow-hidden animate-in fade-in-0 slide-in-from-bottom-2",
+        style: {
+          top: `${position.top}px`,
+          left: `${position.left}px`,
+          transform: "translate(-50%, -100%)"
+        },
+        onMouseDown: (e) => e.preventDefault(),
+        children: /* @__PURE__ */ jsx72(FloatingMenuContent, { editor })
+      }
+    ),
+    document.body
+  );
+};
+
+// ../../components/ui/UEditor/CharacterCount.tsx
+import { useTranslations as useTranslations6 } from "next-intl";
+import { jsxs as jsxs65 } from "react/jsx-runtime";
+var CharacterCountDisplay = ({ editor, maxCharacters }) => {
+  const t = useTranslations6("UEditor");
+  const storage = editor.storage;
+  const characterCount = storage.characterCount?.characters?.() ?? 0;
+  const wordCount = storage.characterCount?.words?.() ?? 0;
+  const percentage = maxCharacters ? Math.round(characterCount / maxCharacters * 100) : 0;
+  return /* @__PURE__ */ jsxs65("div", { className: "flex items-center gap-3 px-3 py-2 text-xs text-muted-foreground border-t bg-muted/20", children: [
+    /* @__PURE__ */ jsxs65("span", { children: [
+      wordCount,
+      " ",
+      t("words")
+    ] }),
+    /* @__PURE__ */ jsxs65("span", { children: [
+      characterCount,
+      " ",
+      t("characters")
+    ] }),
+    maxCharacters && /* @__PURE__ */ jsxs65("span", { className: cn(percentage > 90 && "text-destructive", percentage > 100 && "font-bold"), children: [
+      characterCount,
+      "/",
+      maxCharacters
+    ] })
+  ] });
+};
+
+// ../../components/ui/UEditor/UEditor.tsx
+import { jsx as jsx73, jsxs as jsxs66 } from "react/jsx-runtime";
+var UEditor = ({
+  content = "",
+  onChange,
+  onHtmlChange,
+  onJsonChange,
+  placeholder,
+  className,
+  editable = true,
+  autofocus = false,
+  showToolbar = true,
+  showBubbleMenu = true,
+  showFloatingMenu = false,
+  showCharacterCount = true,
+  maxCharacters,
+  minHeight = "200px",
+  maxHeight = "auto",
+  variant = "default"
+}) => {
+  const t = useTranslations7("UEditor");
+  const effectivePlaceholder = placeholder ?? t("placeholder");
+  const extensions = useMemo16(
+    () => buildUEditorExtensions({ placeholder: effectivePlaceholder, maxCharacters }),
+    [effectivePlaceholder, maxCharacters]
+  );
+  const editor = useEditor({
+    immediatelyRender: false,
+    extensions,
+    content,
+    editable,
+    autofocus,
+    editorProps: {
+      handleDOMEvents: {
+        keydown: (_view, event) => {
+          if (!(event instanceof KeyboardEvent)) return false;
+          if (event.key === "ArrowLeft" || event.key === "ArrowRight" || event.key === "ArrowUp" || event.key === "ArrowDown") {
+            event.stopPropagation();
+          }
+          return false;
+        }
+      },
+      attributes: {
+        class: cn(
+          "prose prose-sm sm:prose dark:prose-invert max-w-none",
+          "focus:outline-none",
+          "px-4 py-4",
+          "[&_.is-editor-empty]:before:content-[attr(data-placeholder)]",
+          "[&_.is-editor-empty]:before:text-muted-foreground/50",
+          "[&_.is-editor-empty]:before:float-left",
+          "[&_.is-editor-empty]:before:pointer-events-none",
+          "[&_.is-editor-empty]:before:h-0",
+          "[&_ul[data-type='taskList']]:list-none",
+          "[&_ul[data-type='taskList']]:pl-0",
+          "[&_ul[data-type='taskList']_li]:flex",
+          "[&_ul[data-type='taskList']_li]:items-start",
+          "[&_ul[data-type='taskList']_li]:gap-2",
+          "[&_ul[data-type='taskList']_li>label]:mt-0.5",
+          "[&_ul[data-type='taskList']_li>label>input]:w-4",
+          "[&_ul[data-type='taskList']_li>label>input]:h-4",
+          "[&_ul[data-type='taskList']_li>label>input]:rounded",
+          "[&_ul[data-type='taskList']_li>label>input]:border-2",
+          "[&_ul[data-type='taskList']_li>label>input]:border-primary/50",
+          "[&_ul[data-type='taskList']_li>label>input]:accent-primary",
+          "[&_pre]:!bg-[#1e1e1e]",
+          "[&_pre]:!text-[#d4d4d4]",
+          "[&_pre_code]:!bg-transparent",
+          "[&_hr]:border-t-2",
+          "[&_hr]:border-primary/30",
+          "[&_hr]:my-8",
+          "[&_h1]:text-3xl",
+          "[&_h1]:font-bold",
+          "[&_h1]:mt-6",
+          "[&_h1]:mb-4",
+          "[&_h1]:text-foreground",
+          "[&_h2]:text-2xl",
+          "[&_h2]:font-semibold",
+          "[&_h2]:mt-5",
+          "[&_h2]:mb-3",
+          "[&_h2]:text-foreground",
+          "[&_h3]:text-xl",
+          "[&_h3]:font-semibold",
+          "[&_h3]:mt-4",
+          "[&_h3]:mb-2",
+          "[&_h3]:text-foreground",
+          "[&_ul:not([data-type='taskList'])]:list-disc",
+          "[&_ul:not([data-type='taskList'])]:pl-6",
+          "[&_ul:not([data-type='taskList'])]:my-3",
+          "[&_ol]:list-decimal",
+          "[&_ol]:pl-6",
+          "[&_ol]:my-3",
+          "[&_li]:my-1",
+          "[&_li]:pl-1",
+          "[&_li_p]:my-0",
+          "[&_blockquote]:border-l-4",
+          "[&_blockquote]:border-primary",
+          "[&_blockquote]:pl-4",
+          "[&_blockquote]:py-2",
+          "[&_blockquote]:my-4",
+          "[&_blockquote]:bg-muted/30",
+          "[&_blockquote]:rounded-r-lg",
+          "[&_blockquote]:italic",
+          "[&_blockquote]:text-muted-foreground",
+          "[&_blockquote_p]:my-0"
+        )
+      }
+    },
+    onUpdate: ({ editor: editor2 }) => {
+      const html = editor2.getHTML();
+      onChange?.(html);
+      onHtmlChange?.(html);
+      onJsonChange?.(editor2.getJSON());
+    }
+  });
+  useEffect27(() => {
+    if (editor && content !== editor.getHTML()) {
+      if (editor.isEmpty && content) {
+        editor.commands.setContent(content);
+      }
+    }
+  }, [content, editor]);
+  if (!editor) {
+    return /* @__PURE__ */ jsx73(
+      "div",
+      {
+        className: cn("w-full rounded-lg border bg-background flex items-center justify-center text-muted-foreground", className),
+        style: { minHeight },
+        children: t("loading")
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs66(
+    "div",
+    {
+      className: cn(
+        "group relative flex flex-col rounded-2xl md:rounded-3xl border border-border bg-card text-card-foreground overflow-hidden",
+        "transition-[transform,box-shadow,border-color,background-color] duration-300 ease-soft",
+        "shadow-sm focus-within:shadow-md focus-within:border-primary/15",
+        "backdrop-blur-sm",
+        variant === "notion" && "hover:shadow-md",
+        className
+      ),
+      children: [
+        editable && showToolbar && /* @__PURE__ */ jsx73(EditorToolbar, { editor, variant }),
+        editable && showBubbleMenu && /* @__PURE__ */ jsx73(CustomBubbleMenu, { editor }),
+        editable && showFloatingMenu && /* @__PURE__ */ jsx73(CustomFloatingMenu, { editor }),
+        /* @__PURE__ */ jsx73(
+          EditorContent,
+          {
+            editor,
+            className: "flex-1 overflow-y-auto",
+            style: {
+              minHeight,
+              maxHeight
+            }
+          }
+        ),
+        showCharacterCount && /* @__PURE__ */ jsx73(CharacterCountDisplay, { editor, maxCharacters })
+      ]
+    }
+  );
+};
+var UEditor_default = UEditor;
+
 // src/index.ts
 var underverseMessages = { en: en_default, vi: vi_default, ko: ko_default, ja: ja_default };
 function getUnderverseMessages(locale = "en") {
@@ -15266,6 +16837,7 @@ export {
   Toast_default as ToastProvider,
   Tooltip,
   TranslationProvider,
+  UEditor_default as UEditor,
   UnderverseProvider,
   VARIANT_STYLES_ALERT,
   VARIANT_STYLES_BTN,