@yimingliao/cms 0.0.251 → 0.0.252

package/dist/src/client/interfaces/components/ui/display/html-display.js

@@ -5,18 +5,27 @@ import 'mime-types';
 import { cn } from '../../../../applications/cms/shadcn/utils.js';
 import 'next/navigation';
 
+const FIGURE_OEMBED_PATTERN = /<figure\b[^>]*\bclass=(["'])[^"']*\bmedia\b[^"']*\1[^>]*>\s*<oembed\b[^>]*\burl=(["'])(.*?)\2[^>]*>\s*<\/oembed>\s*<\/figure>/gi;
+const YOUTUBE_VIDEO_ID_PATTERN = /^[\w-]{11}$/;
+const HTML_ESCAPE_MAP = {
+  '"': "&quot;",
+  "&": "&amp;",
+  "<": "&lt;",
+  ">": "&gt;"
+};
 function HtmlDisplay({
   html = "",
-  textOnly,
+  textOnly = false,
   className = "",
   ...props
 }) {
-  const content = textOnly ? normalizeHtmlText(html) : html ?? "";
+  const content = textOnly ? toPlainText(html) : normalizeHtml(html ?? "");
   return /* @__PURE__ */ jsx(
     "div",
     {
       className: cn(
         className,
+        "w-full",
         "ck ck-content"
         // CKEditor styles prefix: .ck (ckeditor.css)
       ),
@@ -25,9 +34,94 @@ function HtmlDisplay({
     }
   );
 }
-function normalizeHtmlText(html) {
+function toPlainText(html) {
   if (!html) return "";
-  return html.replace(/<\/(p|div|li|h[1-6]|tr|td)>/gi, " ").replace(/<br\s*\/?>/gi, " ").replace(/<[^>]+>/g, " ").replace(/\r?\n|\r/g, " ").replace(/\s{2,}/g, " ").trim();
+  return removeMediaContent(html).replace(/<\/(p|div|li|h[1-6]|tr|td)>/gi, " ").replace(/<br\s*\/?>/gi, " ").replace(/<[^>]+>/g, " ").replace(/\r?\n|\r/g, " ").replace(/\s{2,}/g, " ").replace(/\s+([，。！？；：、])/g, "$1").trim();
+}
+function normalizeHtml(html) {
+  if (!html) return "";
+  return html.replace(
+    FIGURE_OEMBED_PATTERN,
+    (figureHtml, _classQuote, _urlQuote, rawUrl) => {
+      const embedHtml = createEmbedHtml(rawUrl);
+      return embedHtml ?? createEmbedFallbackHtml(rawUrl, figureHtml);
+    }
+  );
+}
+function removeMediaContent(html) {
+  return html.replace(FIGURE_OEMBED_PATTERN, " ").replace(/<iframe\b[^>]*>[\s\S]*?<\/iframe>/gi, " ").replace(/<video\b[^>]*>[\s\S]*?<\/video>/gi, " ").replace(/<picture\b[^>]*>[\s\S]*?<\/picture>/gi, " ").replace(/<img\b[^>]*>/gi, " ").replace(/<source\b[^>]*>/gi, " ");
+}
+function createEmbedHtml(rawUrl) {
+  const embedUrl = getYouTubeEmbedUrl(rawUrl);
+  if (!embedUrl) return null;
+  return `<iframe
+      src="${escapeHtmlAttribute(embedUrl)}"
+      title="Embedded media"
+      frameborder="0"
+      loading="lazy"
+      referrerpolicy="strict-origin-when-cross-origin"
+      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+      allowfullscreen
+      class="media"
+      style="display: block; width: 100%; aspect-ratio: 16 / 9; border: 0;"
+    ></iframe>`.trim();
+}
+function createEmbedFallbackHtml(rawUrl, fallbackHtml) {
+  const safeUrl = getSafeExternalUrl(rawUrl);
+  if (!safeUrl) return fallbackHtml;
+  return `<figure class="media">
+    <a
+      href="${escapeHtmlAttribute(safeUrl)}"
+      target="_blank"
+      rel="noreferrer noopener"
+    >
+      ${escapeHtmlText(safeUrl)}
+    </a>
+  </figure>`.trim();
+}
+function getYouTubeEmbedUrl(rawUrl) {
+  const url = safeParseUrl(rawUrl);
+  if (!url) return null;
+  const hostname = url.hostname.toLowerCase().replace(/^www\./, "");
+  let videoId = "";
+  if (hostname === "youtu.be") {
+    videoId = url.pathname.split("/").filter(Boolean)[0] ?? "";
+  } else if (hostname === "youtube.com" || hostname === "m.youtube.com") {
+    if (url.pathname === "/watch") {
+      videoId = url.searchParams.get("v") ?? "";
+    } else if (url.pathname.startsWith("/embed/")) {
+      videoId = url.pathname.split("/")[2] ?? "";
+    } else if (url.pathname.startsWith("/shorts/")) {
+      videoId = url.pathname.split("/")[2] ?? "";
+    }
+  }
+  if (!YOUTUBE_VIDEO_ID_PATTERN.test(videoId)) return null;
+  return `https://www.youtube-nocookie.com/embed/${videoId}`;
+}
+function getSafeExternalUrl(rawUrl) {
+  const url = safeParseUrl(rawUrl);
+  if (!url) return null;
+  if (url.protocol !== "http:" && url.protocol !== "https:") return null;
+  return url.toString();
+}
+function safeParseUrl(rawUrl) {
+  try {
+    return new URL(rawUrl);
+  } catch {
+    return null;
+  }
+}
+function escapeHtmlAttribute(value) {
+  return value.replaceAll(
+    /["&<>]/g,
+    (character) => HTML_ESCAPE_MAP[character] ?? character
+  );
+}
+function escapeHtmlText(value) {
+  return value.replaceAll(
+    /[&<>]/g,
+    (character) => HTML_ESCAPE_MAP[character] ?? character
+  );
 }
 
 export { HtmlDisplay };

package/dist/types/src/client/interfaces/components/ui/display/html-display.d.ts

@@ -3,6 +3,9 @@ interface HtmlDisplayProps extends HTMLAttributes<HTMLDivElement> {
     html?: string | null;
     textOnly?: boolean;
 }
+/**
+ * Render CMS HTML content with CKEditor-compatible media transforms.
+ */
 export declare function HtmlDisplay({ html, textOnly, className, ...props }: HtmlDisplayProps): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=html-display.d.ts.map

package/dist/types/src/client/interfaces/components/ui/display/html-display.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"html-display.d.ts","sourceRoot":"","sources":["../../../../../../../../src/client/interfaces/components/ui/display/html-display.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAG5C,UAAU,gBAAiB,SAAQ,cAAc,CAAC,cAAc,CAAC;IAC/D,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,wBAAgB,WAAW,CAAC,EAC1B,IAAS,EACT,QAAQ,EACR,SAAc,EACd,GAAG,KAAK,EACT,EAAE,gBAAgB,2CAalB"}
+{"version":3,"file":"html-display.d.ts","sourceRoot":"","sources":["../../../../../../../../src/client/interfaces/components/ui/display/html-display.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAa5C,UAAU,gBAAiB,SAAQ,cAAc,CAAC,cAAc,CAAC;IAC/D,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;GAEG;AACH,wBAAgB,WAAW,CAAC,EAC1B,IAAS,EACT,QAAgB,EAChB,SAAc,EACd,GAAG,KAAK,EACT,EAAE,gBAAgB,2CAclB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yimingliao/cms",
-  "version": "0.0.251",
+  "version": "0.0.252",
   "author": "Yiming Liao",
   "license": "MIT",
   "type": "module",