@underverse-ui/underverse 2.0.28 → 2.0.30

package/dist/{menu-bar-CFIWMBAA.js → menu-bar-DPCNNUX5.js}

@@ -1,7 +1,7 @@
 "use client";
 import {
   Modal_default
-} from "./chunk-Y4X6CAZY.js";
+} from "./chunk-2P7TSXEE.js";
 import {
   DEFAULT_TABLE_ROW_HEIGHT,
   DEFAULT_UEDITOR_IMAGE_MAX_FILE_SIZE,
@@ -13,23 +13,33 @@ import {
   ImageInput,
   LinkInput,
   MIN_TABLE_ROW_HEIGHT,
+  TABLE_WIDTH_BASIS_POINTS,
   TableInsertGrid,
   UEDITOR_PROSEMIRROR_CLASS_NAME,
   applyEditorLink,
-  fileToDataUrl,
+  clampResponsiveTableWidthBp,
+  formatBasisPointsAsPercentage,
   getTableAnchorPos,
+  normalizeColumnRatios,
+  parseColumnRatios,
+  parsePercentageToBasisPoints,
+  resolveResponsiveTableOffsetBp,
+  resolveUEditorImageFiles,
   sanitizeUEditorUrl,
+  trackEditorInsertionPosition,
   useDropdownMenuClose,
   useSharedEditorUiRenderState
-} from "./chunk-KTOXCD6J.js";
+} from "./chunk-37MHVJMV.js";
 import {
   cn,
-  useSmartTranslations
-} from "./chunk-A4GUPKHM.js";
+  resolveUEditorPortalContainer,
+  useSmartTranslations,
+  useUEditorPortalContainerGetter
+} from "./chunk-ZP7F4ZD7.js";
 import "./chunk-NSBPE2FW.js";
 
 // src/components/UEditor/menu-bar.tsx
-import React, { useMemo, useRef, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import {
   AlignCenter,
   AlignJustify,
@@ -64,6 +74,68 @@ import {
 } from "lucide-react";
 
 // src/components/UEditor/preview-html.ts
+var BLOCKED_PREVIEW_ELEMENTS = /* @__PURE__ */ new Set(["SCRIPT", "IFRAME", "OBJECT", "EMBED", "LINK", "META", "BASE", "STYLE"]);
+var UNSAFE_INLINE_STYLE_RE = /(?:url\s*\(|expression\s*\(|@import|-moz-binding)/i;
+function isSafeUEditorSourceHtml(html, ownerDocument) {
+  const sourceDocument = ownerDocument ?? (typeof document !== "undefined" ? document : null);
+  if (!sourceDocument) return false;
+  const container = sourceDocument.createElement("div");
+  container.innerHTML = html;
+  for (const element of Array.from(container.querySelectorAll("*"))) {
+    if (BLOCKED_PREVIEW_ELEMENTS.has(element.tagName)) return false;
+    for (const attribute of Array.from(element.attributes)) {
+      const name = attribute.name.toLowerCase();
+      if (name.startsWith("on") || name === "srcdoc") return false;
+    }
+    const style = element.getAttribute("style");
+    if (style && UNSAFE_INLINE_STYLE_RE.test(style)) return false;
+    const isFileCard = element.getAttribute("data-type") === "file-card";
+    const urlAttributes = [
+      ["href", isFileCard ? "file" : "link"],
+      ["src", "image"],
+      ["data-src", isFileCard ? "file" : "image"],
+      ["data-url", "link"],
+      ["data-image", "image"]
+    ];
+    for (const [name, kind] of urlAttributes) {
+      if (element.hasAttribute(name) && !sanitizeUEditorUrl(element.getAttribute(name) ?? "", kind)) return false;
+    }
+  }
+  return true;
+}
+function sanitizePreviewContainer(container) {
+  for (const element of Array.from(container.querySelectorAll("*"))) {
+    if (BLOCKED_PREVIEW_ELEMENTS.has(element.tagName)) {
+      element.remove();
+      continue;
+    }
+    for (const attribute of Array.from(element.attributes)) {
+      const name = attribute.name.toLowerCase();
+      if (name.startsWith("on") || name === "srcdoc") {
+        element.removeAttribute(attribute.name);
+      }
+    }
+    const style = element.getAttribute("style");
+    if (style && UNSAFE_INLINE_STYLE_RE.test(style)) element.removeAttribute("style");
+    const isFileCard = element.getAttribute("data-type") === "file-card";
+    const urlAttributes = [
+      ["href", isFileCard ? "file" : "link"],
+      ["src", "image"],
+      ["data-src", isFileCard ? "file" : "image"],
+      ["data-url", "link"],
+      ["data-image", "image"]
+    ];
+    for (const [name, kind] of urlAttributes) {
+      if (!element.hasAttribute(name)) continue;
+      const safeUrl = sanitizeUEditorUrl(element.getAttribute(name) ?? "", kind);
+      if (safeUrl) element.setAttribute(name, safeUrl);
+      else element.removeAttribute(name);
+    }
+    if (element.tagName === "A" && element.getAttribute("target") === "_blank") {
+      element.setAttribute("rel", "noopener noreferrer");
+    }
+  }
+}
 var DEFAULT_TABLE_COLUMN_WIDTH = 100;
 var TIPTAP_TABLE_MIN_COLUMN_WIDTH = 25;
 function parsePixelWidth(value) {
@@ -154,6 +226,17 @@ function normalizePreviewRowHeight(row) {
 function normalizePreviewTable(table) {
   const widths = resolveColumnWidths(table);
   if (widths.length === 0) return;
+  const storedMode = table.getAttribute("data-table-width-mode");
+  const responsive = storedMode === "responsive" || storedMode === "full" || parsePercentageToBasisPoints(table.style.width) !== null;
+  const storedRatios = parseColumnRatios(table.getAttribute("data-table-column-ratios"));
+  const columnRatios = normalizeColumnRatios(
+    storedRatios?.length === widths.length ? storedRatios : widths,
+    widths.length
+  );
+  const widthBp = responsive ? Number(table.getAttribute("data-table-width-bp")) || parsePercentageToBasisPoints(table.getAttribute("data-table-width") ?? table.style.width) || TABLE_WIDTH_BASIS_POINTS : TABLE_WIDTH_BASIS_POINTS;
+  const safeWidthBp = clampResponsiveTableWidthBp(widthBp);
+  const offsetBp = responsive ? Number(table.getAttribute("data-table-offset-bp")) || parsePercentageToBasisPoints(table.getAttribute("data-table-offset") ?? table.style.marginLeft) || 0 : 0;
+  const safeOffsetBp = resolveResponsiveTableOffsetBp(safeWidthBp, null, offsetBp);
   let colgroup = table.querySelector("colgroup");
   if (!colgroup) {
     colgroup = document.createElement("colgroup");
@@ -162,6 +245,7 @@ function normalizePreviewTable(table) {
   while (colgroup.children.length < widths.length) {
     colgroup.appendChild(document.createElement("col"));
   }
+  const tableWidth = widths.reduce((sum, width) => sum + width, 0);
   Array.from(colgroup.children).forEach((child, index) => {
     if (child.tagName.toLowerCase() !== "col") return;
     const col = child;
@@ -169,32 +253,42 @@ function normalizePreviewTable(table) {
       child.remove();
       return;
     }
-    col.style.width = `${widths[index]}px`;
-    col.style.minWidth = `${widths[index]}px`;
+    col.style.width = responsive ? formatBasisPointsAsPercentage(columnRatios[index]) : `${widths[index]}px`;
+    col.style.minWidth = responsive ? "" : `${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, "width", responsive ? formatBasisPointsAsPercentage(safeWidthBp) : `${tableWidth}px`);
+  setStyleProperty(table, "min-width", responsive ? `${widths.length * TIPTAP_TABLE_MIN_COLUMN_WIDTH}px` : `${tableWidth}px`);
   setStyleProperty(table, "table-layout", "fixed");
+  if (responsive) {
+    table.setAttribute("data-table-width-mode", "responsive");
+    table.setAttribute("data-table-width-bp", String(safeWidthBp));
+    table.setAttribute("data-table-offset-bp", String(safeOffsetBp));
+    table.setAttribute("data-table-column-ratios", columnRatios.join(","));
+    setStyleProperty(table, "margin-left", formatBasisPointsAsPercentage(safeOffsetBp));
+    setStyleProperty(table, "margin-right", "auto");
+  }
   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);
+      const cellRatio = columnRatios.slice(columnIndex, columnIndex + colspan).reduce((sum, ratio) => sum + ratio, 0);
       if (cellWidth > 0) {
-        cell.style.width = `${cellWidth}px`;
-        cell.style.minWidth = `${cellWidth}px`;
+        cell.style.width = responsive ? formatBasisPointsAsPercentage(cellRatio) : `${cellWidth}px`;
+        cell.style.minWidth = responsive ? "" : `${cellWidth}px`;
       }
       columnIndex += colspan;
     });
   });
 }
-function prepareUEditorPreviewHtml(html) {
-  if (typeof document === "undefined" || !html) return html;
-  const container = document.createElement("div");
+function prepareUEditorPreviewHtml(html, ownerDocument) {
+  const previewDocument = ownerDocument ?? (typeof document !== "undefined" ? document : null);
+  if (!previewDocument || !html) return html;
+  const container = previewDocument.createElement("div");
   container.innerHTML = html;
+  sanitizePreviewContainer(container);
   container.querySelectorAll("table").forEach((table) => normalizePreviewTable(table));
   return container.innerHTML;
 }
@@ -262,13 +356,17 @@ function buildFileMenuItems(t, editor, { onSave, 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");
+          const editorDocument = editor.view.dom.ownerDocument;
+          const editorWindow = editorDocument.defaultView;
+          const BlobCtor = editorWindow?.Blob ?? Blob;
+          const URLApi = editorWindow?.URL ?? URL;
+          const blob = new BlobCtor([`<!DOCTYPE html><html><head><meta charset="utf-8"></head><body>${html}</body></html>`], { type: "text/html;charset=utf-8" });
+          const url = URLApi.createObjectURL(blob);
+          const a = editorDocument.createElement("a");
           a.href = url;
           a.download = "document.html";
           a.click();
-          URL.revokeObjectURL(url);
+          editorWindow?.setTimeout(() => URLApi.revokeObjectURL(url), 0);
         }
       }
     }
@@ -298,29 +396,31 @@ function buildEditMenuItems(t, editor) {
       label: t("menubar.cut"),
       icon: Scissors,
       shortcut: t("menubar.cutShortcut"),
-      onClick: () => document.execCommand("cut")
+      onClick: () => editor.view.dom.ownerDocument.execCommand("cut")
     },
     {
       type: "action",
       label: t("menubar.copy"),
       shortcut: t("menubar.copyShortcut"),
-      onClick: () => document.execCommand("copy")
+      onClick: () => editor.view.dom.ownerDocument.execCommand("copy")
     },
     {
       type: "action",
       label: t("menubar.paste"),
       shortcut: t("menubar.pasteShortcut"),
-      onClick: () => document.execCommand("paste")
+      onClick: () => editor.view.dom.ownerDocument.execCommand("paste")
     },
     {
       type: "action",
       label: t("menubar.pasteAsText"),
       onClick: async () => {
         try {
-          const text = await navigator.clipboard.readText();
+          const clipboard = editor.view.dom.ownerDocument.defaultView?.navigator.clipboard;
+          if (!clipboard) throw new Error("Clipboard API is unavailable");
+          const text = await clipboard.readText();
           editor.chain().focus().insertContent(text).run();
         } catch {
-          document.execCommand("paste");
+          editor.view.dom.ownerDocument.execCommand("paste");
         }
       }
     },
@@ -333,7 +433,7 @@ function buildEditMenuItems(t, editor) {
     }
   ];
 }
-function buildViewMenuItems(t, {
+function buildViewMenuItems(t, editor, {
   containerRef,
   onSourceCode,
   openSourceDialog,
@@ -361,10 +461,11 @@ function buildViewMenuItems(t, {
       onClick: () => {
         const el = containerRef.current;
         if (!el) return;
-        if (!document.fullscreenElement) {
+        const editorDocument = editor.view.dom.ownerDocument;
+        if (!editorDocument.fullscreenElement) {
           el.requestFullscreen?.();
         } else {
-          document.exitFullscreen?.();
+          editorDocument.exitFullscreen?.();
         }
       }
     }
@@ -643,6 +744,8 @@ var MenuBar = ({
   imageInsertMode = "base64",
   maxImageFileSize = DEFAULT_UEDITOR_IMAGE_MAX_FILE_SIZE,
   allowedImageMimeTypes = DEFAULT_UEDITOR_IMAGE_MIME_TYPES,
+  onImageUploadError,
+  fallbackToDataUrl = true,
   onSave,
   onExport,
   onSourceCode,
@@ -651,22 +754,45 @@ var MenuBar = ({
 }) => {
   const t = useSmartTranslations("UEditor");
   useSharedEditorUiRenderState(editor);
+  const getPortalContainer = useUEditorPortalContainerGetter();
   const fileInputRef = useRef(null);
+  const sourceTextareaRef = useRef(null);
   const [showImageInput, setShowImageInput] = useState(false);
   const [showLinkInput, setShowLinkInput] = useState(false);
+  const [isUploadingImage, setIsUploadingImage] = useState(false);
+  const [imageUploadError, setImageUploadError] = useState(null);
   const [openMenuKey, setOpenMenuKey] = useState(null);
   const [showSourceDialog, setShowSourceDialog] = useState(false);
   const [sourceHtml, setSourceHtml] = useState("");
+  const [sourceError, setSourceError] = useState("");
+  const sourceErrorId = React.useId();
   const [showPreviewDialog, setShowPreviewDialog] = useState(false);
-  const previewHtml = useMemo(
-    () => showPreviewDialog ? prepareUEditorPreviewHtml(editor.getHTML()) : "",
-    [editor, showPreviewDialog]
+  const [previewHtml, setPreviewHtml] = useState("");
+  const modalPortalContainer = resolveUEditorPortalContainer(
+    getPortalContainer,
+    void 0,
+    editor.view.dom.ownerDocument
   );
+  useEffect(() => {
+    if (!showPreviewDialog) return;
+    const updatePreview = () => {
+      if (!editor.isDestroyed) {
+        setPreviewHtml(prepareUEditorPreviewHtml(editor.getHTML(), editor.view.dom.ownerDocument));
+      }
+    };
+    updatePreview();
+    editor.on("update", updatePreview);
+    return () => {
+      editor.off("update", updatePreview);
+    };
+  }, [editor, showPreviewDialog]);
   const openSourceDialog = () => {
     setSourceHtml(editor.getHTML());
+    setSourceError("");
     setShowSourceDialog(true);
   };
   const openPreviewDialog = () => {
+    setPreviewHtml(prepareUEditorPreviewHtml(editor.getHTML(), editor.view.dom.ownerDocument));
     setShowPreviewDialog(true);
   };
   const handlePreview = () => {
@@ -674,13 +800,23 @@ var MenuBar = ({
     openPreviewDialog();
   };
   const applySourceHtml = () => {
-    editor.chain().focus().setContent(sourceHtml).run();
-    setShowSourceDialog(false);
+    const nextSourceHtml = sourceTextareaRef.current?.value ?? sourceHtml;
+    try {
+      if (!isSafeUEditorSourceHtml(nextSourceHtml, editor.view.dom.ownerDocument)) {
+        throw new Error("Unsafe source HTML");
+      }
+      editor.chain().focus().setContent(nextSourceHtml, { errorOnInvalidContent: true }).run();
+      setSourceError("");
+      setShowSourceDialog(false);
+    } catch {
+      setSourceError(t("menubar.invalidSource"));
+    }
   };
   const closeInsertMenu = () => {
     setOpenMenuKey(null);
     setShowImageInput(false);
     setShowLinkInput(false);
+    setImageUploadError(null);
   };
   const handleImageUrl = (url, alt) => {
     const safe = sanitizeUEditorUrl(url, "image");
@@ -691,21 +827,35 @@ var MenuBar = ({
     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 {
+    if (files.length === 0 || isUploadingImage) return;
+    setIsUploadingImage(true);
+    setImageUploadError(null);
+    const trackedPosition = trackEditorInsertionPosition(editor);
+    try {
+      const { images, hadError } = await resolveUEditorImageFiles(files, {
+        maxFileSize: maxImageFileSize,
+        allowedMimeTypes: allowedImageMimeTypes,
+        upload: uploadImage,
+        fallbackToDataUrl,
+        insertMode: imageInsertMode,
+        onError: onImageUploadError
+      });
+      if (!editor.isDestroyed && images.length > 0) {
+        const content = images.map((image) => ({
+          type: "image",
+          attrs: { src: image.src, alt: image.file.name }
+        }));
+        editor.commands.insertContentAt(trackedPosition.current, content, { updateSelection: false });
+      }
+      if (hadError) {
+        setImageUploadError(t("imageInput.uploadError"));
+      } else {
+        closeInsertMenu();
       }
+    } finally {
+      trackedPosition.stop();
+      setIsUploadingImage(false);
     }
-    closeInsertMenu();
   };
   const handleInsertTable = (rows, cols) => {
     editor.chain().focus().insertTable({ rows, cols, withHeaderRow: true }).run();
@@ -724,12 +874,14 @@ var MenuBar = ({
         /* @__PURE__ */ jsx(
           DropdownMenuItem,
           {
-            label: t("menubar.imageUpload"),
+            label: isUploadingImage ? t("imageInput.uploading") : t("menubar.imageUpload"),
             icon: Upload,
             onClick: () => fileInputRef.current?.click(),
-            closeOnSelect: false
+            closeOnSelect: false,
+            disabled: isUploadingImage
           }
-        )
+        ),
+        imageUploadError ? /* @__PURE__ */ jsx(DropdownMenuItem, { label: imageUploadError, disabled: true, destructive: true }) : null
       ] })
     },
     { type: "separator" },
@@ -810,7 +962,13 @@ var MenuBar = ({
     {
       key: "view",
       label: t("menubar.view"),
-      items: buildViewMenuItems(t, { containerRef, onSourceCode, openSourceDialog, onPreview: handlePreview, openPreviewDialog })
+      items: buildViewMenuItems(t, editor, {
+        containerRef,
+        onSourceCode,
+        openSourceDialog,
+        onPreview: handlePreview,
+        openPreviewDialog
+      })
     },
     {
       key: "insert",
@@ -834,10 +992,14 @@ var MenuBar = ({
         accept: allowedImageMimeTypes.join(","),
         multiple: true,
         className: "hidden",
-        onChange: (e) => handleImageFiles(e.target.files)
+        onChange: (e) => {
+          const files = Array.from(e.target.files ?? []);
+          e.target.value = "";
+          void handleImageFiles(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: [
+    /* @__PURE__ */ jsxs("nav", { "aria-label": t("toolbar.showMenuBar"), 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,
         {
@@ -878,18 +1040,28 @@ var MenuBar = ({
         onClose: () => setShowSourceDialog(false),
         title: t("menubar.sourceCode"),
         size: "lg",
+        portalContainer: modalPortalContainer,
         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",
             {
+              ref: sourceTextareaRef,
               "data-testid": "source-code-textarea",
+              "aria-label": t("menubar.sourceCode"),
+              name: "ueditor-source-html",
               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),
+              onChange: (e) => {
+                setSourceHtml(e.target.value);
+                if (sourceError) setSourceError("");
+              },
+              "aria-invalid": Boolean(sourceError),
+              "aria-describedby": sourceError ? sourceErrorId : void 0,
               spellCheck: false
             }
           ),
+          sourceError ? /* @__PURE__ */ jsx("p", { id: sourceErrorId, role: "alert", className: "text-xs text-destructive", children: sourceError }) : null,
           /* @__PURE__ */ jsxs("div", { className: "flex gap-2 justify-end", children: [
             /* @__PURE__ */ jsx(
               "button",
@@ -920,6 +1092,7 @@ var MenuBar = ({
         onClose: () => setShowPreviewDialog(false),
         title: t("menubar.preview"),
         size: "full",
+        portalContainer: modalPortalContainer,
         width: "min(1180px, calc(100vw - 2rem))",
         height: "min(860px, calc(100vh - 2rem))",
         className: "flex flex-col overflow-hidden rounded-xl md:rounded-2xl",
@@ -945,4 +1118,4 @@ var MenuBar = ({
 export {
   MenuBar
 };
-//# sourceMappingURL=menu-bar-CFIWMBAA.js.map
+//# sourceMappingURL=menu-bar-DPCNNUX5.js.map