@underverse-ui/underverse 1.0.22 → 1.0.24

package/dist/index.cjs

@@ -166,6 +166,7 @@ __export(index_exports, {
   Tooltip: () => Tooltip,
   TranslationProvider: () => TranslationProvider,
   UEditor: () => UEditor_default,
+  UEditorPrepareContentForSaveError: () => UEditorPrepareContentForSaveError,
   UnderverseProvider: () => UnderverseProvider,
   VARIANT_STYLES_ALERT: () => VARIANT_STYLES_ALERT,
   VARIANT_STYLES_BTN: () => VARIANT_STYLES_BTN,
@@ -176,6 +177,7 @@ __export(index_exports, {
   getAnimationStyles: () => getAnimationStyles,
   getUnderverseMessages: () => getUnderverseMessages,
   injectAnimationStyles: () => injectAnimationStyles,
+  prepareUEditorContentForSave: () => prepareUEditorContentForSave,
   shadcnAnimationStyles: () => shadcnAnimationStyles2,
   underverseMessages: () => underverseMessages,
   useFormField: () => useFormField,
@@ -19430,6 +19432,14 @@ function useStickyColumns(columns, visibleKeys) {
     }
     return positions;
   }, [leafColumns]);
+  const { leftBoundaryKey, rightBoundaryKey } = import_react36.default.useMemo(() => {
+    const leftFixed = leafColumns.filter((c) => c.fixed === "left");
+    const rightFixed = leafColumns.filter((c) => c.fixed === "right");
+    return {
+      leftBoundaryKey: leftFixed.length > 0 ? leftFixed[leftFixed.length - 1].key : null,
+      rightBoundaryKey: rightFixed.length > 0 ? rightFixed[0].key : null
+    };
+  }, [leafColumns]);
   const getStickyColumnStyle = import_react36.default.useCallback(
     (col) => {
       if (!col.fixed) return {};
@@ -19441,24 +19451,38 @@ function useStickyColumns(columns, visibleKeys) {
     },
     [stickyPositions]
   );
-  const getStickyHeaderClass = import_react36.default.useCallback((col) => {
-    if (!col.fixed) return "";
-    return cn(
-      "sticky",
-      col.fixed === "left" && "left-0 shadow-[2px_0_6px_-3px_rgba(0,0,0,0.08)]",
-      col.fixed === "right" && "right-0 shadow-[-2px_0_6px_-3px_rgba(0,0,0,0.08)]",
-      "z-50 bg-muted!"
-    );
-  }, []);
-  const getStickyCellClass = import_react36.default.useCallback((col, isStripedRow) => {
-    if (!col.fixed) return "";
-    return cn(
-      "sticky z-10",
-      col.fixed === "left" && "left-0 shadow-[2px_0_6px_-3px_rgba(0,0,0,0.08)]",
-      col.fixed === "right" && "right-0 shadow-[-2px_0_6px_-3px_rgba(0,0,0,0.08)]",
-      isStripedRow ? "bg-(--surface-1)!" : "bg-(--surface-0)!"
-    );
-  }, []);
+  const getBoundaryShadowClass = import_react36.default.useCallback(
+    (col) => {
+      if (col.fixed === "left" && col.key === leftBoundaryKey) {
+        return "border-r border-border/80 shadow-[10px_0_16px_-10px_rgba(0,0,0,0.55)]";
+      }
+      if (col.fixed === "right" && col.key === rightBoundaryKey) {
+        return "border-l border-border/80 shadow-[-10px_0_16px_-10px_rgba(0,0,0,0.55)]";
+      }
+      return "";
+    },
+    [leftBoundaryKey, rightBoundaryKey]
+  );
+  const getStickyHeaderClass = import_react36.default.useCallback(
+    (col) => {
+      if (!col.fixed) return "";
+      return cn("sticky", col.fixed === "left" && "left-0", col.fixed === "right" && "right-0", getBoundaryShadowClass(col), "z-50 !bg-muted");
+    },
+    [getBoundaryShadowClass]
+  );
+  const getStickyCellClass = import_react36.default.useCallback(
+    (col, isStripedRow) => {
+      if (!col.fixed) return "";
+      return cn(
+        "sticky z-10",
+        col.fixed === "left" && "left-0",
+        col.fixed === "right" && "right-0",
+        getBoundaryShadowClass(col),
+        isStripedRow ? "!bg-surface-1" : "!bg-surface-0"
+      );
+    },
+    [getBoundaryShadowClass]
+  );
   const getStickyHeaderCellStyle = import_react36.default.useCallback(
     (headerCell) => {
       const col = headerCell.column;
@@ -21439,7 +21463,7 @@ function useSmartLocale() {
 }
 
 // ../../components/ui/UEditor/UEditor.tsx
-var import_react51 = require("react");
+var import_react51 = __toESM(require("react"), 1);
 var import_next_intl6 = require("next-intl");
 var import_react52 = require("@tiptap/react");
 
@@ -24333,14 +24357,207 @@ var CharacterCountDisplay = ({ editor, maxCharacters }) => {
   ] });
 };
 
+// ../../components/ui/UEditor/prepare-content-for-save.ts
+var MIME_EXTENSION_MAP = {
+  "image/png": "png",
+  "image/jpeg": "jpg",
+  "image/webp": "webp",
+  "image/gif": "gif",
+  "image/svg+xml": "svg",
+  "image/bmp": "bmp",
+  "image/x-icon": "ico",
+  "image/avif": "avif"
+};
+function isDataImageUrl(value) {
+  return /^data:image\//i.test(value.trim());
+}
+function parseDataImageUrl(dataUrl) {
+  const value = dataUrl.trim();
+  if (!isDataImageUrl(value)) return null;
+  const commaIndex = value.indexOf(",");
+  if (commaIndex < 0) return null;
+  const header = value.slice(5, commaIndex);
+  const base64Data = value.slice(commaIndex + 1).trim();
+  if (!/;base64/i.test(header)) return null;
+  const mime = header.split(";")[0]?.trim().toLowerCase();
+  if (!mime || !base64Data) return null;
+  return { mime, base64Data };
+}
+function decodeBase64ToBytes(base64Data) {
+  const normalized = base64Data.replace(/\s+/g, "");
+  const binary = atob(normalized);
+  const bytes = new Uint8Array(binary.length);
+  for (let i = 0; i < binary.length; i += 1) {
+    bytes[i] = binary.charCodeAt(i);
+  }
+  return bytes;
+}
+function inferFileExtension(mime) {
+  return MIME_EXTENSION_MAP[mime] ?? "bin";
+}
+function createFileFromDataImageUrl(dataUrl, index) {
+  const parsed = parseDataImageUrl(dataUrl);
+  if (!parsed) {
+    throw new Error("Invalid data image URL format.");
+  }
+  const bytes = decodeBase64ToBytes(parsed.base64Data);
+  const extension = inferFileExtension(parsed.mime);
+  const name = `ueditor-image-${index + 1}.${extension}`;
+  return new File([bytes], name, { type: parsed.mime });
+}
+function normalizeUploadResult(result) {
+  if (typeof result === "string") {
+    const url2 = result.trim();
+    if (!url2) throw new Error("Upload handler returned an empty URL.");
+    return { url: url2 };
+  }
+  if (!result || typeof result !== "object") {
+    throw new Error("Upload handler returned invalid result.");
+  }
+  const url = typeof result.url === "string" ? result.url.trim() : "";
+  if (!url) throw new Error("Upload handler object result is missing `url`.");
+  const { url: _ignoredUrl, ...rest } = result;
+  const meta = Object.keys(rest).length > 0 ? rest : void 0;
+  return { url, meta };
+}
+function getErrorReason(error) {
+  if (error instanceof Error && error.message) return error.message;
+  if (typeof error === "string" && error.trim()) return error;
+  return "Unknown upload error.";
+}
+function replaceSrcInTag(match, nextSrc) {
+  if (!match.srcAttr) return match.tag;
+  const { start, end, quote } = match.srcAttr;
+  const escaped = quote === '"' ? nextSrc.replace(/"/g, "&quot;") : quote === "'" ? nextSrc.replace(/'/g, "&#39;") : nextSrc;
+  const srcAttr = quote ? `src=${quote}${escaped}${quote}` : `src=${escaped}`;
+  return `${match.tag.slice(0, start)}${srcAttr}${match.tag.slice(end)}`;
+}
+function collectImgTagMatches(html) {
+  const matches = [];
+  const imgRegex = /<img\b[^>]*>/gi;
+  const srcAttrRegex = /\bsrc\s*=\s*(?:"([^"]*)"|'([^']*)'|([^\s"'=<>`]+))/i;
+  let tagMatch = imgRegex.exec(html);
+  while (tagMatch) {
+    const tag = tagMatch[0];
+    const start = tagMatch.index;
+    const end = start + tag.length;
+    const srcMatch = srcAttrRegex.exec(tag);
+    let srcAttr = null;
+    if (srcMatch) {
+      const value = srcMatch[1] ?? srcMatch[2] ?? srcMatch[3] ?? "";
+      const quote = srcMatch[1] !== void 0 ? '"' : srcMatch[2] !== void 0 ? "'" : "";
+      srcAttr = {
+        start: srcMatch.index,
+        end: srcMatch.index + srcMatch[0].length,
+        value,
+        quote
+      };
+    }
+    matches.push({ start, end, tag, srcAttr });
+    tagMatch = imgRegex.exec(html);
+  }
+  return matches;
+}
+var UEditorPrepareContentForSaveError = class extends Error {
+  constructor(result) {
+    super(
+      `Failed to upload ${result.errors.length} image(s): ${result.errors.map((item) => `#${item.index} ${item.reason}`).join("; ")}`
+    );
+    this.name = "UEditorPrepareContentForSaveError";
+    this.result = result;
+  }
+};
+async function prepareUEditorContentForSave({
+  html,
+  uploadImageForSave
+}) {
+  if (!html || !html.includes("<img")) {
+    return { html, uploaded: [], errors: [] };
+  }
+  const imgMatches = collectImgTagMatches(html);
+  if (imgMatches.length === 0) {
+    return { html, uploaded: [], errors: [] };
+  }
+  const base64Candidates = [];
+  for (const match of imgMatches) {
+    if (!match.srcAttr) continue;
+    const src = match.srcAttr.value.trim();
+    if (!isDataImageUrl(src)) continue;
+    base64Candidates.push({
+      id: `${match.start}:${match.end}`,
+      match,
+      index: base64Candidates.length,
+      src
+    });
+  }
+  if (base64Candidates.length === 0) {
+    return { html, uploaded: [], errors: [] };
+  }
+  if (!uploadImageForSave) {
+    return {
+      html,
+      uploaded: [],
+      errors: base64Candidates.map((item) => ({
+        index: item.index,
+        reason: "`uploadImageForSave` is required to transform base64 images before save."
+      }))
+    };
+  }
+  const uploaded = [];
+  const errors = [];
+  const replacements = /* @__PURE__ */ new Map();
+  const uploadResults = await Promise.all(
+    base64Candidates.map(async (candidate) => {
+      try {
+        const file = createFileFromDataImageUrl(candidate.src, candidate.index);
+        const uploadResult = await uploadImageForSave(file);
+        const normalized = normalizeUploadResult(uploadResult);
+        return { candidate, file, ...normalized };
+      } catch (error) {
+        return { candidate, error: getErrorReason(error) };
+      }
+    })
+  );
+  for (const item of uploadResults) {
+    if ("error" in item) {
+      errors.push({
+        index: item.candidate.index,
+        reason: item.error ?? "Unknown upload error."
+      });
+      continue;
+    }
+    replacements.set(item.candidate.id, item.url);
+    uploaded.push({
+      url: item.url,
+      file: item.file,
+      meta: item.meta
+    });
+  }
+  if (replacements.size === 0) {
+    return { html, uploaded, errors };
+  }
+  let transformed = "";
+  let cursor = 0;
+  for (const match of imgMatches) {
+    transformed += html.slice(cursor, match.start);
+    const replacementKey = `${match.start}:${match.end}`;
+    const replacementUrl = replacements.get(replacementKey);
+    transformed += replacementUrl ? replaceSrcInTag(match, replacementUrl) : match.tag;
+    cursor = match.end;
+  }
+  transformed += html.slice(cursor);
+  return { html: transformed, uploaded, errors };
+}
+
 // ../../components/ui/UEditor/UEditor.tsx
 var import_jsx_runtime86 = require("react/jsx-runtime");
-var UEditor = ({
+var UEditor = import_react51.default.forwardRef(({
   content = "",
   onChange,
   onHtmlChange,
   onJsonChange,
   uploadImage,
+  uploadImageForSave,
   imageInsertMode = "base64",
   placeholder,
   className,
@@ -24354,9 +24571,10 @@ var UEditor = ({
   minHeight = "200px",
   maxHeight = "auto",
   variant = "default"
-}) => {
+}, ref) => {
   const t = (0, import_next_intl6.useTranslations)("UEditor");
   const effectivePlaceholder = placeholder ?? t("placeholder");
+  const inFlightPrepareRef = (0, import_react51.useRef)(null);
   const extensions = (0, import_react51.useMemo)(
     () => buildUEditorExtensions({ placeholder: effectivePlaceholder, maxCharacters, uploadImage, imageInsertMode, editable }),
     [effectivePlaceholder, maxCharacters, uploadImage, imageInsertMode, editable]
@@ -24466,6 +24684,28 @@ var UEditor = ({
       onJsonChange?.(editor2.getJSON());
     }
   });
+  (0, import_react51.useImperativeHandle)(
+    ref,
+    () => ({
+      prepareContentForSave: async ({ throwOnError = false } = {}) => {
+        if (!inFlightPrepareRef.current) {
+          const htmlSnapshot = editor?.getHTML() ?? content ?? "";
+          inFlightPrepareRef.current = prepareUEditorContentForSave({
+            html: htmlSnapshot,
+            uploadImageForSave
+          }).finally(() => {
+            inFlightPrepareRef.current = null;
+          });
+        }
+        const result = await inFlightPrepareRef.current;
+        if (throwOnError && result.errors.length > 0) {
+          throw new UEditorPrepareContentForSaveError(result);
+        }
+        return result;
+      }
+    }),
+    [content, editor, uploadImageForSave]
+  );
   (0, import_react51.useEffect)(() => {
     if (editor && content !== editor.getHTML()) {
       if (editor.isEmpty && content) {
@@ -24513,7 +24753,8 @@ var UEditor = ({
       ]
     }
   );
-};
+});
+UEditor.displayName = "UEditor";
 var UEditor_default = UEditor;
 
 // src/index.ts
@@ -24659,6 +24900,7 @@ function getUnderverseMessages(locale = "en") {
   Tooltip,
   TranslationProvider,
   UEditor,
+  UEditorPrepareContentForSaveError,
   UnderverseProvider,
   VARIANT_STYLES_ALERT,
   VARIANT_STYLES_BTN,
@@ -24669,6 +24911,7 @@ function getUnderverseMessages(locale = "en") {
   getAnimationStyles,
   getUnderverseMessages,
   injectAnimationStyles,
+  prepareUEditorContentForSave,
   shadcnAnimationStyles,
   underverseMessages,
   useFormField,