@underverse-ui/underverse 1.0.202 → 1.0.204

package/dist/menu-bar-6U5S4PS7.js

@@ -0,0 +1,947 @@
+"use client";
+import {
+  Modal_default
+} from "./chunk-QVQTWZ24.js";
+import {
+  DEFAULT_TABLE_ROW_HEIGHT,
+  DEFAULT_UEDITOR_IMAGE_MAX_FILE_SIZE,
+  DEFAULT_UEDITOR_IMAGE_MIME_TYPES,
+  DropdownMenu,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuSub,
+  ImageInput,
+  LinkInput,
+  MIN_TABLE_ROW_HEIGHT,
+  TableInsertGrid,
+  UEDITOR_PROSEMIRROR_CLASS_NAME,
+  applyEditorLink,
+  fileToDataUrl,
+  getTableAnchorPos,
+  sanitizeUEditorUrl,
+  useDropdownMenuClose,
+  useSharedEditorUiRenderState
+} from "./chunk-KFTYWTJR.js";
+import {
+  cn,
+  useSmartTranslations
+} from "./chunk-GSBRTFP2.js";
+import "./chunk-NSBPE2FW.js";
+
+// src/components/UEditor/menu-bar.tsx
+import React, { useMemo, useRef, useState } from "react";
+import {
+  AlignCenter,
+  AlignJustify,
+  AlignLeft,
+  AlignRight,
+  Bold as BoldIcon,
+  Code as CodeIcon,
+  Eye,
+  FileCode,
+  Heading1 as Heading1Icon,
+  Heading2 as Heading2Icon,
+  Heading3 as Heading3Icon,
+  Image as ImageIcon,
+  Italic as ItalicIcon,
+  Link as LinkIcon,
+  ListTodo,
+  Maximize2,
+  Quote as QuoteIcon,
+  Redo as RedoIcon,
+  Scissors,
+  Strikethrough as StrikethroughIcon,
+  Subscript as SubscriptIcon,
+  Superscript as SuperscriptIcon,
+  Table as TableIcon,
+  Trash2,
+  Underline as UnderlineIcon,
+  Undo as UndoIcon,
+  Square,
+  CircleDot,
+  CircleCheckBig,
+  Upload
+} from "lucide-react";
+
+// src/components/UEditor/preview-html.ts
+var DEFAULT_TABLE_COLUMN_WIDTH = 100;
+var TIPTAP_TABLE_MIN_COLUMN_WIDTH = 25;
+function parsePixelWidth(value) {
+  if (!value) return null;
+  const match = String(value).match(/(?:^|[\s:])(\d+(?:\.\d+)?)px\b/i) ?? String(value).match(/^(\d+(?:\.\d+)?)$/);
+  if (!match) return null;
+  const parsed = Number.parseFloat(match[1] ?? match[0]);
+  return Number.isFinite(parsed) && parsed > 0 ? Math.round(parsed) : null;
+}
+function parseStyleWidth(style) {
+  return parsePixelWidth(style.width) ?? parsePixelWidth(style.minWidth);
+}
+function parseStyleHeight(style) {
+  return parsePixelWidth(style.height) ?? parsePixelWidth(style.minHeight);
+}
+function getCellColspan(cell) {
+  return Math.max(1, cell.colSpan || Number.parseInt(cell.getAttribute("colspan") || "1", 10) || 1);
+}
+function getCellWidths(cell) {
+  const dataColwidth = cell.getAttribute("data-colwidth") || cell.getAttribute("colwidth");
+  if (dataColwidth) {
+    const widths = dataColwidth.split(/[,\s]+/).map((part) => parsePixelWidth(part)).filter((width2) => typeof width2 === "number");
+    if (widths.length > 0) return widths;
+  }
+  const width = parsePixelWidth(cell.getAttribute("width")) ?? parseStyleWidth(cell.style);
+  if (!width) return null;
+  const colspan = getCellColspan(cell);
+  return Array.from({ length: colspan }, () => Math.max(DEFAULT_TABLE_COLUMN_WIDTH, Math.round(width / colspan)));
+}
+function getColumnCount(table) {
+  const colCount = table.querySelectorAll("colgroup > col").length;
+  if (colCount > 0) return colCount;
+  return Math.max(
+    0,
+    ...Array.from(table.rows).map(
+      (row) => Array.from(row.cells).reduce((count, cell) => count + getCellColspan(cell), 0)
+    )
+  );
+}
+function resolveColumnWidths(table) {
+  const columnCount = getColumnCount(table);
+  if (columnCount <= 0) return [];
+  const widths = Array.from({ length: columnCount }, () => DEFAULT_TABLE_COLUMN_WIDTH);
+  const cols = Array.from(table.querySelectorAll("colgroup > col"));
+  cols.slice(0, columnCount).forEach((col, index) => {
+    const width = parsePixelWidth(col.getAttribute("width")) ?? parseStyleWidth(col.style);
+    if (width && width > TIPTAP_TABLE_MIN_COLUMN_WIDTH) {
+      widths[index] = width;
+    }
+  });
+  Array.from(table.rows).forEach((row) => {
+    let columnIndex = 0;
+    Array.from(row.cells).forEach((cell) => {
+      const cellWidths = getCellWidths(cell);
+      if (cellWidths) {
+        cellWidths.slice(0, getCellColspan(cell)).forEach((width, offset) => {
+          if (width > TIPTAP_TABLE_MIN_COLUMN_WIDTH && columnIndex + offset < widths.length) {
+            widths[columnIndex + offset] = width;
+          }
+        });
+      }
+      columnIndex += getCellColspan(cell);
+    });
+  });
+  return widths;
+}
+function setStyleProperty(element, property, value) {
+  element.style.setProperty(property, value);
+}
+function resolveExplicitRowHeight(row) {
+  const explicitRowHeight = parsePixelWidth(row.getAttribute("data-row-height")) ?? parseStyleHeight(row.style);
+  if (explicitRowHeight) return Math.max(MIN_TABLE_ROW_HEIGHT, explicitRowHeight);
+  const cellHeight = Array.from(row.cells).reduce((maxHeight, cell) => {
+    const height = parsePixelWidth(cell.getAttribute("height")) ?? parseStyleHeight(cell.style);
+    return height ? Math.max(maxHeight, height) : maxHeight;
+  }, 0);
+  return cellHeight ? Math.max(MIN_TABLE_ROW_HEIGHT, cellHeight) : DEFAULT_TABLE_ROW_HEIGHT;
+}
+function normalizePreviewRowHeight(row) {
+  const rowHeight = resolveExplicitRowHeight(row);
+  row.style.height = `${rowHeight}px`;
+  row.style.minHeight = `${rowHeight}px`;
+  Array.from(row.cells).forEach((cell) => {
+    cell.style.height = `${rowHeight}px`;
+    cell.style.minHeight = `${rowHeight}px`;
+  });
+}
+function normalizePreviewTable(table) {
+  const widths = resolveColumnWidths(table);
+  if (widths.length === 0) return;
+  let colgroup = table.querySelector("colgroup");
+  if (!colgroup) {
+    colgroup = document.createElement("colgroup");
+    table.insertBefore(colgroup, table.firstChild);
+  }
+  while (colgroup.children.length < widths.length) {
+    colgroup.appendChild(document.createElement("col"));
+  }
+  Array.from(colgroup.children).forEach((child, index) => {
+    if (child.tagName.toLowerCase() !== "col") return;
+    const col = child;
+    if (index >= widths.length) {
+      child.remove();
+      return;
+    }
+    col.style.width = `${widths[index]}px`;
+    col.style.minWidth = `${widths[index]}px`;
+    col.setAttribute("width", String(widths[index]));
+  });
+  const tableWidth = widths.reduce((sum, width) => sum + width, 0);
+  setStyleProperty(table, "width", `${tableWidth}px`);
+  setStyleProperty(table, "min-width", `${tableWidth}px`);
+  setStyleProperty(table, "table-layout", "fixed");
+  Array.from(table.rows).forEach((row) => {
+    let columnIndex = 0;
+    normalizePreviewRowHeight(row);
+    Array.from(row.cells).forEach((cell) => {
+      const colspan = getCellColspan(cell);
+      const cellWidth = widths.slice(columnIndex, columnIndex + colspan).reduce((sum, width) => sum + width, 0);
+      if (cellWidth > 0) {
+        cell.style.width = `${cellWidth}px`;
+        cell.style.minWidth = `${cellWidth}px`;
+      }
+      columnIndex += colspan;
+    });
+  });
+}
+function prepareUEditorPreviewHtml(html) {
+  if (typeof document === "undefined" || !html) return html;
+  const container = document.createElement("div");
+  container.innerHTML = html;
+  container.querySelectorAll("table").forEach((table) => normalizePreviewTable(table));
+  return container.innerHTML;
+}
+
+// src/components/UEditor/menu-bar.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function MenuTableInsertGrid({
+  insertLabel,
+  previewTemplate,
+  onInsert
+}) {
+  const closeMenu = useDropdownMenuClose();
+  return /* @__PURE__ */ jsx(
+    TableInsertGrid,
+    {
+      insertLabel,
+      previewTemplate,
+      onInsert: (rows, cols) => {
+        onInsert(rows, cols);
+        closeMenu();
+      }
+    }
+  );
+}
+function renderMenuItems(items) {
+  return items.map((item, i) => {
+    switch (item.type) {
+      case "separator":
+        return /* @__PURE__ */ jsx(DropdownMenuSeparator, {}, i);
+      case "action":
+        return /* @__PURE__ */ jsx(
+          DropdownMenuItem,
+          {
+            label: item.label,
+            icon: item.icon,
+            shortcut: item.shortcut,
+            onClick: item.onClick,
+            disabled: item.disabled,
+            active: item.active,
+            destructive: item.destructive
+          },
+          i
+        );
+      case "sub":
+        return /* @__PURE__ */ jsx(DropdownMenuSub, { label: item.label, icon: item.icon, disabled: item.disabled, children: renderMenuItems(item.items) }, i);
+      case "custom":
+        return /* @__PURE__ */ jsx(React.Fragment, { children: item.render() }, item.key);
+    }
+  });
+}
+function buildFileMenuItems(t, editor, { onSave, onExport }) {
+  return [
+    {
+      type: "action",
+      label: t("menubar.save"),
+      shortcut: "Ctrl+S",
+      onClick: () => onSave?.(),
+      disabled: !onSave
+    },
+    {
+      type: "action",
+      label: t("menubar.exportHtml"),
+      onClick: () => {
+        if (onExport) {
+          onExport();
+        } else {
+          const html = editor.getHTML();
+          const blob = new Blob([`<!DOCTYPE html><html><body>${html}</body></html>`], { type: "text/html" });
+          const url = URL.createObjectURL(blob);
+          const a = document.createElement("a");
+          a.href = url;
+          a.download = "document.html";
+          a.click();
+          URL.revokeObjectURL(url);
+        }
+      }
+    }
+  ];
+}
+function buildEditMenuItems(t, editor) {
+  return [
+    {
+      type: "action",
+      label: t("menubar.undo"),
+      icon: UndoIcon,
+      shortcut: t("menubar.undoShortcut"),
+      onClick: () => editor.chain().focus().undo().run(),
+      disabled: !editor.can().undo()
+    },
+    {
+      type: "action",
+      label: t("menubar.redo"),
+      icon: RedoIcon,
+      shortcut: t("menubar.redoShortcut"),
+      onClick: () => editor.chain().focus().redo().run(),
+      disabled: !editor.can().redo()
+    },
+    { type: "separator" },
+    {
+      type: "action",
+      label: t("menubar.cut"),
+      icon: Scissors,
+      shortcut: t("menubar.cutShortcut"),
+      onClick: () => document.execCommand("cut")
+    },
+    {
+      type: "action",
+      label: t("menubar.copy"),
+      shortcut: t("menubar.copyShortcut"),
+      onClick: () => document.execCommand("copy")
+    },
+    {
+      type: "action",
+      label: t("menubar.paste"),
+      shortcut: t("menubar.pasteShortcut"),
+      onClick: () => document.execCommand("paste")
+    },
+    {
+      type: "action",
+      label: t("menubar.pasteAsText"),
+      onClick: async () => {
+        try {
+          const text = await navigator.clipboard.readText();
+          editor.chain().focus().insertContent(text).run();
+        } catch {
+          document.execCommand("paste");
+        }
+      }
+    },
+    { type: "separator" },
+    {
+      type: "action",
+      label: t("menubar.selectAll"),
+      shortcut: t("menubar.selectAllShortcut"),
+      onClick: () => editor.chain().focus().selectAll().run()
+    }
+  ];
+}
+function buildViewMenuItems(t, {
+  containerRef,
+  onSourceCode,
+  openSourceDialog,
+  onPreview,
+  openPreviewDialog
+}) {
+  return [
+    {
+      type: "action",
+      label: t("menubar.sourceCode"),
+      icon: FileCode,
+      onClick: () => onSourceCode ? onSourceCode() : openSourceDialog()
+    },
+    {
+      type: "action",
+      label: t("menubar.preview"),
+      onClick: () => onPreview ? onPreview() : openPreviewDialog()
+    },
+    { type: "separator" },
+    {
+      type: "action",
+      label: t("menubar.fullscreen"),
+      icon: Maximize2,
+      shortcut: t("menubar.fullscreenShortcut"),
+      onClick: () => {
+        const el = containerRef.current;
+        if (!el) return;
+        if (!document.fullscreenElement) {
+          el.requestFullscreen?.();
+        } else {
+          document.exitFullscreen?.();
+        }
+      }
+    }
+  ];
+}
+function buildFormatMenuItems(t, editor) {
+  return [
+    {
+      type: "action",
+      label: t("menubar.bold"),
+      icon: BoldIcon,
+      shortcut: t("menubar.boldShortcut"),
+      active: editor.isActive("bold"),
+      onClick: () => editor.chain().focus().toggleBold().run()
+    },
+    {
+      type: "action",
+      label: t("menubar.italic"),
+      icon: ItalicIcon,
+      shortcut: t("menubar.italicShortcut"),
+      active: editor.isActive("italic"),
+      onClick: () => editor.chain().focus().toggleItalic().run()
+    },
+    {
+      type: "action",
+      label: t("menubar.underline"),
+      icon: UnderlineIcon,
+      shortcut: t("menubar.underlineShortcut"),
+      active: editor.isActive("underline"),
+      onClick: () => editor.chain().focus().toggleUnderline().run()
+    },
+    {
+      type: "action",
+      label: t("menubar.strike"),
+      icon: StrikethroughIcon,
+      active: editor.isActive("strike"),
+      onClick: () => editor.chain().focus().toggleStrike().run()
+    },
+    {
+      type: "action",
+      label: t("menubar.superscript"),
+      icon: SuperscriptIcon,
+      active: editor.isActive("superscript"),
+      onClick: () => editor.chain().focus().toggleSuperscript().run()
+    },
+    {
+      type: "action",
+      label: t("menubar.subscript"),
+      icon: SubscriptIcon,
+      active: editor.isActive("subscript"),
+      onClick: () => editor.chain().focus().toggleSubscript().run()
+    },
+    {
+      type: "action",
+      label: t("menubar.code"),
+      icon: CodeIcon,
+      active: editor.isActive("code"),
+      onClick: () => editor.chain().focus().toggleCode().run()
+    },
+    { type: "separator" },
+    {
+      type: "sub",
+      label: t("menubar.wrap"),
+      items: [
+        {
+          type: "action",
+          label: t("menubar.paragraph"),
+          active: editor.isActive("paragraph"),
+          onClick: () => editor.chain().focus().setParagraph().run()
+        },
+        {
+          type: "action",
+          label: t("menubar.heading1"),
+          icon: Heading1Icon,
+          active: editor.isActive("heading", { level: 1 }),
+          onClick: () => editor.chain().focus().toggleHeading({ level: 1 }).run()
+        },
+        {
+          type: "action",
+          label: t("menubar.heading2"),
+          icon: Heading2Icon,
+          active: editor.isActive("heading", { level: 2 }),
+          onClick: () => editor.chain().focus().toggleHeading({ level: 2 }).run()
+        },
+        {
+          type: "action",
+          label: t("menubar.heading3"),
+          icon: Heading3Icon,
+          active: editor.isActive("heading", { level: 3 }),
+          onClick: () => editor.chain().focus().toggleHeading({ level: 3 }).run()
+        },
+        { type: "separator" },
+        {
+          type: "action",
+          label: t("menubar.blockquote"),
+          icon: QuoteIcon,
+          active: editor.isActive("blockquote"),
+          onClick: () => editor.chain().focus().toggleBlockquote().run()
+        },
+        {
+          type: "action",
+          label: t("menubar.codeBlock"),
+          icon: FileCode,
+          active: editor.isActive("codeBlock"),
+          onClick: () => editor.chain().focus().toggleCodeBlock().run()
+        },
+        {
+          type: "action",
+          label: t("menubar.taskList"),
+          icon: ListTodo,
+          active: editor.isActive("taskList"),
+          onClick: () => editor.chain().focus().toggleTaskList().run()
+        }
+      ]
+    },
+    {
+      type: "sub",
+      label: t("menubar.align"),
+      items: [
+        {
+          type: "action",
+          label: t("menubar.alignLeft"),
+          icon: AlignLeft,
+          active: editor.isActive({ textAlign: "left" }),
+          onClick: () => editor.chain().focus().setTextAlign("left").run()
+        },
+        {
+          type: "action",
+          label: t("menubar.alignCenter"),
+          icon: AlignCenter,
+          active: editor.isActive({ textAlign: "center" }),
+          onClick: () => editor.chain().focus().setTextAlign("center").run()
+        },
+        {
+          type: "action",
+          label: t("menubar.alignRight"),
+          icon: AlignRight,
+          active: editor.isActive({ textAlign: "right" }),
+          onClick: () => editor.chain().focus().setTextAlign("right").run()
+        },
+        {
+          type: "action",
+          label: t("menubar.alignJustify"),
+          icon: AlignJustify,
+          active: editor.isActive({ textAlign: "justify" }),
+          onClick: () => editor.chain().focus().setTextAlign("justify").run()
+        }
+      ]
+    },
+    { type: "separator" },
+    {
+      type: "action",
+      label: t("menubar.clearFormatting"),
+      onClick: () => editor.chain().focus().unsetAllMarks().clearNodes().run()
+    }
+  ];
+}
+function buildToolsMenuItems(t, { onSourceCode, openSourceDialog }) {
+  return [
+    {
+      type: "action",
+      label: t("menubar.sourceCode"),
+      icon: FileCode,
+      onClick: () => onSourceCode ? onSourceCode() : openSourceDialog()
+    }
+  ];
+}
+function buildTableMenuItems(t, editor, onInsertTable) {
+  const inTable = getTableAnchorPos(editor) !== null;
+  return [
+    {
+      type: "sub",
+      label: t("menubar.insertTable"),
+      icon: TableIcon,
+      items: [
+        {
+          type: "custom",
+          key: "table-insert-grid",
+          render: () => /* @__PURE__ */ jsx(
+            MenuTableInsertGrid,
+            {
+              insertLabel: t("tableMenu.insertTable"),
+              previewTemplate: t("tableMenu.gridPreview"),
+              onInsert: onInsertTable
+            }
+          )
+        }
+      ]
+    },
+    {
+      type: "action",
+      label: t("menubar.tableProperties"),
+      disabled: true,
+      onClick: () => {
+      }
+    },
+    {
+      type: "action",
+      label: t("menubar.deleteTable"),
+      icon: Trash2,
+      destructive: true,
+      disabled: !inTable,
+      onClick: () => editor.chain().focus().deleteTable().run()
+    },
+    { type: "separator" },
+    {
+      type: "sub",
+      label: t("menubar.row"),
+      disabled: !inTable,
+      items: [
+        {
+          type: "action",
+          label: t("menubar.deleteRow"),
+          destructive: true,
+          onClick: () => editor.chain().focus().deleteRow().run()
+        }
+      ]
+    },
+    {
+      type: "sub",
+      label: t("menubar.column"),
+      disabled: !inTable,
+      items: [
+        {
+          type: "action",
+          label: t("menubar.deleteColumn"),
+          destructive: true,
+          onClick: () => editor.chain().focus().deleteColumn().run()
+        }
+      ]
+    },
+    {
+      type: "sub",
+      label: t("menubar.cell"),
+      disabled: !inTable,
+      items: [
+        {
+          type: "action",
+          label: t("menubar.mergeCells"),
+          onClick: () => editor.chain().focus().mergeCells().run(),
+          disabled: !editor.can().mergeCells()
+        },
+        {
+          type: "action",
+          label: t("menubar.splitCell"),
+          onClick: () => editor.chain().focus().splitCell().run(),
+          disabled: !editor.can().splitCell()
+        }
+      ]
+    }
+  ];
+}
+var MenuBarTrigger = React.forwardRef(
+  ({ children, className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "button",
+    {
+      ref,
+      type: "button",
+      onMouseDown: (e) => e.preventDefault(),
+      className: cn(
+        "px-2 py-0.5 rounded text-sm transition-colors cursor-pointer",
+        "hover:bg-accent hover:text-accent-foreground",
+        "focus:outline-none focus:bg-accent focus:text-accent-foreground",
+        className
+      ),
+      ...props,
+      children
+    }
+  )
+);
+MenuBarTrigger.displayName = "MenuBarTrigger";
+var MenuBar = ({
+  editor,
+  containerRef,
+  uploadImage,
+  imageInsertMode = "base64",
+  maxImageFileSize = DEFAULT_UEDITOR_IMAGE_MAX_FILE_SIZE,
+  allowedImageMimeTypes = DEFAULT_UEDITOR_IMAGE_MIME_TYPES,
+  onSave,
+  onExport,
+  onSourceCode,
+  onPreview
+}) => {
+  const t = useSmartTranslations("UEditor");
+  useSharedEditorUiRenderState(editor);
+  const fileInputRef = useRef(null);
+  const [showImageInput, setShowImageInput] = useState(false);
+  const [showLinkInput, setShowLinkInput] = useState(false);
+  const [openMenuKey, setOpenMenuKey] = useState(null);
+  const [showSourceDialog, setShowSourceDialog] = useState(false);
+  const [sourceHtml, setSourceHtml] = useState("");
+  const [showPreviewDialog, setShowPreviewDialog] = useState(false);
+  const previewHtml = useMemo(
+    () => showPreviewDialog ? prepareUEditorPreviewHtml(editor.getHTML()) : "",
+    [editor, showPreviewDialog]
+  );
+  const openSourceDialog = () => {
+    setSourceHtml(editor.getHTML());
+    setShowSourceDialog(true);
+  };
+  const openPreviewDialog = () => {
+    setShowPreviewDialog(true);
+  };
+  const handlePreview = () => {
+    if (onPreview?.(editor.getHTML()) === false) return;
+    openPreviewDialog();
+  };
+  const applySourceHtml = () => {
+    editor.chain().focus().setContent(sourceHtml).run();
+    setShowSourceDialog(false);
+  };
+  const closeInsertMenu = () => {
+    setOpenMenuKey(null);
+    setShowImageInput(false);
+    setShowLinkInput(false);
+  };
+  const handleImageUrl = (url, alt) => {
+    const safe = sanitizeUEditorUrl(url, "image");
+    if (safe) {
+      editor.chain().focus().setImage({ src: safe, alt: alt ?? "" }).run();
+      editor.commands.createParagraphNear();
+    }
+    closeInsertMenu();
+  };
+  const handleImageFiles = async (files) => {
+    if (!files?.length) return;
+    for (const file of Array.from(files)) {
+      if (!file.type.startsWith("image/")) continue;
+      if (file.size > maxImageFileSize) continue;
+      if (allowedImageMimeTypes.length > 0 && !allowedImageMimeTypes.includes(file.type)) continue;
+      try {
+        const src = imageInsertMode === "upload" && uploadImage ? await uploadImage(file) : await fileToDataUrl(file);
+        const safe = sanitizeUEditorUrl(src, "image");
+        if (!safe) continue;
+        editor.chain().focus().setImage({ src: safe, alt: file.name }).run();
+        editor.commands.createParagraphNear();
+      } catch {
+      }
+    }
+    closeInsertMenu();
+  };
+  const handleInsertTable = (rows, cols) => {
+    editor.chain().focus().insertTable({ rows, cols, withHeaderRow: true }).run();
+    closeInsertMenu();
+  };
+  const handleLinkSubmit = (url) => {
+    applyEditorLink(editor, url);
+    closeInsertMenu();
+  };
+  const insertMenuItems = [
+    {
+      type: "custom",
+      key: "image",
+      render: () => showImageInput ? /* @__PURE__ */ jsx(ImageInput, { onSubmit: handleImageUrl, onCancel: () => setShowImageInput(false) }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(DropdownMenuItem, { label: t("menubar.image"), icon: ImageIcon, onClick: () => setShowImageInput(true), closeOnSelect: false }),
+        /* @__PURE__ */ jsx(
+          DropdownMenuItem,
+          {
+            label: t("menubar.imageUpload"),
+            icon: Upload,
+            onClick: () => fileInputRef.current?.click(),
+            closeOnSelect: false
+          }
+        )
+      ] })
+    },
+    { type: "separator" },
+    {
+      type: "custom",
+      key: "link",
+      render: () => showLinkInput ? /* @__PURE__ */ jsx(LinkInput, { onSubmit: handleLinkSubmit, onCancel: () => setShowLinkInput(false), initialUrl: editor.getAttributes("link").href ?? "" }) : /* @__PURE__ */ jsx(
+        DropdownMenuItem,
+        {
+          label: t("menubar.link"),
+          icon: LinkIcon,
+          shortcut: t("menubar.linkShortcut"),
+          onClick: () => setShowLinkInput(true),
+          closeOnSelect: false
+        }
+      )
+    },
+    { type: "separator" },
+    {
+      type: "sub",
+      label: t("menubar.insertTable"),
+      icon: TableIcon,
+      items: [
+        {
+          type: "custom",
+          key: "table-grid",
+          render: () => /* @__PURE__ */ jsx(
+            MenuTableInsertGrid,
+            {
+              insertLabel: t("tableMenu.insertTable"),
+              previewTemplate: t("tableMenu.gridPreview"),
+              onInsert: handleInsertTable
+            }
+          )
+        }
+      ]
+    },
+    { type: "separator" },
+    {
+      type: "sub",
+      label: t("menubar.formFields") || "Form Fields",
+      icon: ListTodo,
+      items: [
+        {
+          type: "action",
+          label: t("menubar.formCheckbox") || "Form Checkbox",
+          icon: Square,
+          onClick: () => editor.chain().focus().setFormCheckbox().run()
+        },
+        {
+          type: "action",
+          label: t("slashCommand.roundCheckbox") || "Round Checkbox",
+          icon: CircleCheckBig,
+          onClick: () => editor.chain().focus().setFormCheckbox({ variant: "circle" }).run()
+        },
+        {
+          type: "action",
+          label: t("menubar.formRadio") || "Form Radio Button",
+          icon: CircleDot,
+          onClick: () => editor.chain().focus().setFormRadio().run()
+        }
+      ]
+    },
+    { type: "separator" },
+    {
+      type: "action",
+      label: t("menubar.horizontalRule"),
+      onClick: () => editor.chain().focus().setHorizontalRule().run()
+    }
+  ];
+  const menus = [
+    {
+      key: "file",
+      label: t("menubar.file"),
+      items: buildFileMenuItems(t, editor, { onSave, onExport })
+    },
+    { key: "edit", label: t("menubar.edit"), items: buildEditMenuItems(t, editor) },
+    {
+      key: "view",
+      label: t("menubar.view"),
+      items: buildViewMenuItems(t, { containerRef, onSourceCode, openSourceDialog, onPreview: handlePreview, openPreviewDialog })
+    },
+    {
+      key: "insert",
+      label: t("menubar.insert"),
+      items: insertMenuItems
+    },
+    { key: "format", label: t("menubar.format"), items: buildFormatMenuItems(t, editor) },
+    {
+      key: "tools",
+      label: t("menubar.tools"),
+      items: buildToolsMenuItems(t, { onSourceCode, openSourceDialog })
+    },
+    { key: "table", label: t("menubar.table"), items: buildTableMenuItems(t, editor, handleInsertTable) }
+  ];
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref: fileInputRef,
+        type: "file",
+        accept: allowedImageMimeTypes.join(","),
+        multiple: true,
+        className: "hidden",
+        onChange: (e) => handleImageFiles(e.target.files)
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-0.5 border-b border-border/35 bg-muted/20 px-1.5 py-0.5", children: [
+      menus.map(({ key, label, items }) => /* @__PURE__ */ jsx(
+        DropdownMenu,
+        {
+          trigger: /* @__PURE__ */ jsx(MenuBarTrigger, { children: label }),
+          placement: "bottom-start",
+          isOpen: openMenuKey === key,
+          onOpenChange: (open) => {
+            setOpenMenuKey((current) => open ? key : current === key ? null : current);
+            if (key === "insert" && !open) {
+              setShowImageInput(false);
+              setShowLinkInput(false);
+            }
+          },
+          openOnHover: true,
+          children: renderMenuItems(items)
+        },
+        key
+      )),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: handlePreview,
+          "aria-label": t("menubar.preview"),
+          title: t("menubar.preview"),
+          className: cn(
+            "ml-auto inline-flex h-7 w-7 items-center justify-center rounded-md text-muted-foreground transition-colors",
+            "hover:bg-accent hover:text-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-1"
+          ),
+          children: /* @__PURE__ */ jsx(Eye, { className: "h-4 w-4", "aria-hidden": "true" })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(
+      Modal_default,
+      {
+        isOpen: showSourceDialog,
+        onClose: () => setShowSourceDialog(false),
+        title: t("menubar.sourceCode"),
+        size: "lg",
+        children: /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+          /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: t("menubar.sourceCodeHint") }),
+          /* @__PURE__ */ jsx(
+            "textarea",
+            {
+              "data-testid": "source-code-textarea",
+              className: "w-full h-64 font-mono text-xs p-3 bg-muted rounded-lg border border-border resize-y focus:outline-none focus:ring-2 focus:ring-primary/20",
+              value: sourceHtml,
+              onChange: (e) => setSourceHtml(e.target.value),
+              spellCheck: false
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "flex gap-2 justify-end", children: [
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: applySourceHtml,
+                className: "px-4 py-2 bg-primary text-primary-foreground rounded-lg text-sm hover:bg-primary/90 transition-colors",
+                children: t("menubar.applySource")
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: () => setShowSourceDialog(false),
+                className: "px-4 py-2 bg-muted rounded-lg text-sm hover:bg-accent transition-colors",
+                children: t("menubar.closeDialog")
+              }
+            )
+          ] })
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Modal_default,
+      {
+        isOpen: showPreviewDialog,
+        onClose: () => setShowPreviewDialog(false),
+        title: t("menubar.preview"),
+        size: "full",
+        width: "min(1180px, calc(100vw - 2rem))",
+        height: "min(860px, calc(100vh - 2rem))",
+        className: "flex flex-col overflow-hidden rounded-xl md:rounded-2xl",
+        contentClassName: "flex min-h-0 flex-1 overflow-hidden p-0",
+        children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            "data-testid": "preview-content",
+            className: "min-h-0 flex-1 overflow-y-auto overscroll-contain",
+            children: editor.isEmpty ? /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-sm", children: t("menubar.previewEmpty") }) : /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: UEDITOR_PROSEMIRROR_CLASS_NAME,
+                dangerouslySetInnerHTML: { __html: previewHtml }
+              }
+            )
+          }
+        )
+      }
+    )
+  ] });
+};
+export {
+  MenuBar
+};
+//# sourceMappingURL=menu-bar-6U5S4PS7.js.map