@underverse-ui/underverse 1.0.23 → 1.0.25

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,
@@ -173,9 +174,12 @@ __export(index_exports, {
   Watermark: () => Watermark_default,
   cn: () => cn,
   cnLocal: () => cn2,
+  extractImageSrcsFromHtml: () => extractImageSrcsFromHtml,
   getAnimationStyles: () => getAnimationStyles,
   getUnderverseMessages: () => getUnderverseMessages,
   injectAnimationStyles: () => injectAnimationStyles,
+  normalizeImageUrl: () => normalizeImageUrl,
+  prepareUEditorContentForSave: () => prepareUEditorContentForSave,
   shadcnAnimationStyles: () => shadcnAnimationStyles2,
   underverseMessages: () => underverseMessages,
   useFormField: () => useFormField,
@@ -21461,7 +21465,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");
 
@@ -24355,14 +24359,261 @@ 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 decodeHtmlEntities(value) {
+  return value.replace(/&quot;/gi, '"').replace(/&#39;/gi, "'").replace(/&amp;/gi, "&").replace(/&lt;/gi, "<").replace(/&gt;/gi, ">").replace(/&nbsp;/gi, " ");
+}
+function normalizeImageUrl(url) {
+  const input = decodeHtmlEntities(url.trim());
+  if (!input) return "";
+  if (isDataImageUrl(input)) return input;
+  const isAbsolute = /^[a-zA-Z][a-zA-Z0-9+.-]*:/.test(input);
+  if (!isAbsolute) {
+    return input.split("#")[0] ?? input;
+  }
+  try {
+    const parsed = new URL(input);
+    parsed.hash = "";
+    if (parsed.protocol === "http:" || parsed.protocol === "https:") {
+      parsed.hostname = parsed.hostname.toLowerCase();
+      if (parsed.protocol === "http:" && parsed.port === "80" || parsed.protocol === "https:" && parsed.port === "443") {
+        parsed.port = "";
+      }
+      if (parsed.pathname.length > 1 && parsed.pathname.endsWith("/")) {
+        parsed.pathname = parsed.pathname.slice(0, -1);
+      }
+    }
+    return parsed.toString();
+  } catch {
+    return input.split("#")[0] ?? input;
+  }
+}
+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;
+}
+function extractImageSrcsFromHtml(html) {
+  if (!html || !html.includes("<img")) return [];
+  return collectImgTagMatches(html).map((match) => decodeHtmlEntities(match.srcAttr?.value.trim() ?? "")).filter(Boolean);
+}
+function createResult({
+  html,
+  uploaded,
+  inlineUploaded,
+  errors
+}) {
+  return {
+    html,
+    uploaded,
+    inlineImageUrls: extractImageSrcsFromHtml(html),
+    inlineUploaded,
+    errors
+  };
+}
+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 createResult({ html, uploaded: [], inlineUploaded: [], errors: [] });
+  }
+  const imgMatches = collectImgTagMatches(html);
+  if (imgMatches.length === 0) {
+    return createResult({ html, uploaded: [], inlineUploaded: [], 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 createResult({ html, uploaded: [], inlineUploaded: [], errors: [] });
+  }
+  if (!uploadImageForSave) {
+    return createResult({
+      html,
+      uploaded: [],
+      inlineUploaded: [],
+      errors: base64Candidates.map((item) => ({
+        index: item.index,
+        reason: "`uploadImageForSave` is required to transform base64 images before save."
+      }))
+    });
+  }
+  const uploaded = [];
+  const inlineUploaded = [];
+  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
+    });
+    inlineUploaded.push({
+      index: item.candidate.index,
+      url: item.url,
+      file: item.file,
+      meta: item.meta
+    });
+  }
+  if (replacements.size === 0) {
+    return createResult({ html, uploaded, inlineUploaded, 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 createResult({ html: transformed, uploaded, inlineUploaded, 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,
@@ -24376,9 +24627,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]
@@ -24488,6 +24740,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) {
@@ -24535,7 +24809,8 @@ var UEditor = ({
       ]
     }
   );
-};
+});
+UEditor.displayName = "UEditor";
 var UEditor_default = UEditor;
 
 // src/index.ts
@@ -24681,6 +24956,7 @@ function getUnderverseMessages(locale = "en") {
   Tooltip,
   TranslationProvider,
   UEditor,
+  UEditorPrepareContentForSaveError,
   UnderverseProvider,
   VARIANT_STYLES_ALERT,
   VARIANT_STYLES_BTN,
@@ -24688,9 +24964,12 @@ function getUnderverseMessages(locale = "en") {
   Watermark,
   cn,
   cnLocal,
+  extractImageSrcsFromHtml,
   getAnimationStyles,
   getUnderverseMessages,
   injectAnimationStyles,
+  normalizeImageUrl,
+  prepareUEditorContentForSave,
   shadcnAnimationStyles,
   underverseMessages,
   useFormField,