@heyramzi/ui 2.11.1 → 2.11.2

package/dist/editor/serializer.js

@@ -1,268 +1,272 @@
+// WHY our own slugify: the website's uses NFKD, which strips accents from French
+// headings. The vibe-kit utils one doesn't, so accented anchors would differ.
 function slugify(input, maxLength = 60) {
-    return input.normalize("NFKD").replace(/[̀-ͯ]/g, "").toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/(^-|-$)/g, "").slice(0, maxLength).replace(/-$/g, "");
+	return input.normalize("NFKD").replace(/[̀-ͯ]/g, "").toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/(^-|-$)/g, "").slice(0, maxLength).replace(/-$/g, "");
 }
 function newContext() {
-    return {
-        headingSlugs: new Map()
-    };
+	return { headingSlugs: new Map() };
 }
 function uniqueHeadingId(text, ctx) {
-    const base = slugify(text) || "section";
-    const seen = ctx.headingSlugs.get(base) ?? 0;
-    ctx.headingSlugs.set(base, seen + 1);
-    return seen === 0 ? base : `${base}-${seen + 1}`;
+	const base = slugify(text) || "section";
+	const seen = ctx.headingSlugs.get(base) ?? 0;
+	ctx.headingSlugs.set(base, seen + 1);
+	return seen === 0 ? base : `${base}-${seen + 1}`;
 }
 export function renderTiptapContent(content) {
-    if (!content || typeof content !== "object") return "";
-    return renderNode(content, newContext());
+	if (!content || typeof content !== "object") return "";
+	return renderNode(content, newContext());
 }
 export function extractHeadings(content, options = {}) {
-    if (!content || typeof content !== "object") return [];
-    const levels = options.levels ?? [
-        2,
-        3
-    ];
-    const ctx = newContext();
-    const headings = [];
-    walkHeadings(content, ctx, levels, headings);
-    return headings;
+	if (!content || typeof content !== "object") return [];
+	const levels = options.levels ?? [2, 3];
+	const ctx = newContext();
+	const headings = [];
+	walkHeadings(content, ctx, levels, headings);
+	return headings;
 }
 function walkHeadings(node, ctx, levels, out) {
-    if (node.type === "heading") {
-        const level = clampHeadingLevel(node.attrs?.level);
-        const text = extractText(node.content).trim();
-        const id = uniqueHeadingId(text, ctx);
-        if (text && levels.includes(level)) out.push({
-            id,
-            level,
-            text
-        });
-        return;
-    }
-    if (node.content?.length) {
-        for (const child of node.content)walkHeadings(child, ctx, levels, out);
-    }
-}
+	if (node.type === "heading") {
+		const level = clampHeadingLevel(node.attrs?.level);
+		const text = extractText(node.content).trim();
+		const id = uniqueHeadingId(text, ctx);
+		if (text && levels.includes(level)) out.push({
+			id,
+			level,
+			text
+		});
+		return;
+	}
+	if (node.content?.length) {
+		for (const child of node.content) walkHeadings(child, ctx, levels, out);
+	}
+}
+// WHY: a consumer like the website's VideoObject schema gets one entry per
+// `youtube` node without redoing the walk or the videoId check.
 export function extractYoutubeVideos(content) {
-    if (!content || typeof content !== "object") return [];
-    const videos = [];
-    walkYoutubeVideos(content, videos);
-    return videos;
+	if (!content || typeof content !== "object") return [];
+	const videos = [];
+	walkYoutubeVideos(content, videos);
+	return videos;
 }
 function walkYoutubeVideos(node, out) {
-    if (node.type === "youtube") {
-        const video = youtubeVideoOf(node);
-        if (video) out.push(video);
-        return;
-    }
-    for (const child of node.content ?? [])walkYoutubeVideos(child, out);
+	if (node.type === "youtube") {
+		const video = youtubeVideoOf(node);
+		if (video) out.push(video);
+		return;
+	}
+	for (const child of node.content ?? []) walkYoutubeVideos(child, out);
 }
 function youtubeVideoOf(node) {
-    const videoId = strAttr(node.attrs, "videoId") ?? "";
-    if (!YOUTUBE_VIDEO_ID_RE.test(videoId)) return null;
-    return {
-        videoId,
-        title: strAttr(node.attrs, "title") ?? "",
-        start: numAttr(node.attrs, "start") ?? 0
-    };
-}
+	const videoId = strAttr(node.attrs, "videoId") ?? "";
+	if (!YOUTUBE_VIDEO_ID_RE.test(videoId)) return null;
+	return {
+		videoId,
+		title: strAttr(node.attrs, "title") ?? "",
+		start: numAttr(node.attrs, "start") ?? 0
+	};
+}
+// A typed read of one attr: the value when it has the asked type, else undefined.
 function strAttr(attrs, key) {
-    const value = attrs?.[key];
-    return typeof value === "string" ? value : undefined;
+	const value = attrs?.[key];
+	return typeof value === "string" ? value : undefined;
 }
 function numAttr(attrs, key) {
-    const value = attrs?.[key];
-    return typeof value === "number" ? value : undefined;
+	const value = attrs?.[key];
+	return typeof value === "number" ? value : undefined;
 }
-const wrapIn = (tag)=>(node, ctx)=>`<${tag}>${renderChildren(node.content, ctx) || ""}</${tag}>`;
+// Wraps a node's rendered children in one tag.
+const wrapIn = (tag) => (node, ctx) => `<${tag}>${renderChildren(node.content, ctx) || ""}</${tag}>`;
 function renderHeading(node, ctx) {
-    const level = clampHeadingLevel(node.attrs?.level);
-    const text = extractText(node.content).trim();
-    const inner = renderChildren(node.content, ctx) || "";
-    if (!text) return `<h${level}>${inner}</h${level}>`;
-    const id = uniqueHeadingId(text, ctx);
-    return `<h${level} id="${escapeAttr(id)}">${inner}</h${level}>`;
+	const level = clampHeadingLevel(node.attrs?.level);
+	const text = extractText(node.content).trim();
+	const inner = renderChildren(node.content, ctx) || "";
+	if (!text) return `<h${level}>${inner}</h${level}>`;
+	const id = uniqueHeadingId(text, ctx);
+	return `<h${level} id="${escapeAttr(id)}">${inner}</h${level}>`;
 }
 function renderOrderedList(node, ctx) {
-    const start = numAttr(node.attrs, "start");
-    const attrs = renderAttributes({
-        start: start === undefined ? undefined : String(start)
-    });
-    return `<ol${attrs}>${renderChildren(node.content, ctx) || ""}</ol>`;
+	const start = numAttr(node.attrs, "start");
+	const attrs = renderAttributes({ start: start === undefined ? undefined : String(start) });
+	return `<ol${attrs}>${renderChildren(node.content, ctx) || ""}</ol>`;
 }
 function renderCodeBlock(node) {
-    const lang = strAttr(node.attrs, "language");
-    const language = lang ? ` class="language-${escapeAttr(lang)}"` : "";
-    return `<pre><code${language}>${escapeHtml(extractText(node.content))}</code></pre>`;
+	const lang = strAttr(node.attrs, "language");
+	const language = lang ? ` class="language-${escapeAttr(lang)}"` : "";
+	return `<pre><code${language}>${escapeHtml(extractText(node.content))}</code></pre>`;
 }
 function numString(attrs, key) {
-    const value = numAttr(attrs, key);
-    return value === undefined ? undefined : String(value);
+	const value = numAttr(attrs, key);
+	return value === undefined ? undefined : String(value);
 }
 function renderImage(node) {
-    const src = strAttr(node.attrs, "src");
-    if (!src) return "";
-    const attrs = renderAttributes({
-        alt: strAttr(node.attrs, "alt") ?? "",
-        title: strAttr(node.attrs, "title"),
-        width: numString(node.attrs, "width"),
-        height: numString(node.attrs, "height"),
-        "data-align": strAttr(node.attrs, "align")
-    });
-    return `<img src="${escapeAttr(src)}"${attrs} />`;
+	const src = strAttr(node.attrs, "src");
+	if (!src) return "";
+	const attrs = renderAttributes({
+		alt: strAttr(node.attrs, "alt") ?? "",
+		title: strAttr(node.attrs, "title"),
+		width: numString(node.attrs, "width"),
+		height: numString(node.attrs, "height"),
+		"data-align": strAttr(node.attrs, "align")
+	});
+	return `<img src="${escapeAttr(src)}"${attrs} />`;
 }
 function renderTable(node, ctx) {
-    const winnerColIndex = findWinnerColumnIndex(node);
-    const rows = node.content ?? [];
-    const body = rows.map((row, rowIdx)=>renderTableRow(row, ctx, {
-            winnerColIndex,
-            isFirstRow: rowIdx === 0
-        })).join("");
-    const tableClass = winnerColIndex !== -1 ? ' class="comparison-table"' : "";
-    return `<div class="tiptap-table-wrap"><table${tableClass}>${body}</table></div>`;
+	const winnerColIndex = findWinnerColumnIndex(node);
+	const rows = node.content ?? [];
+	const body = rows.map((row, rowIdx) => renderTableRow(row, ctx, {
+		winnerColIndex,
+		isFirstRow: rowIdx === 0
+	})).join("");
+	const tableClass = winnerColIndex !== -1 ? " class=\"comparison-table\"" : "";
+	return `<div class="tiptap-table-wrap"><table${tableClass}>${body}</table></div>`;
 }
 const RENDERERS = {
-    doc: (node, ctx)=>renderChildren(node.content, ctx),
-    paragraph: wrapIn("p"),
-    heading: renderHeading,
-    blockquote: wrapIn("blockquote"),
-    bulletList: wrapIn("ul"),
-    orderedList: renderOrderedList,
-    listItem: wrapIn("li"),
-    codeBlock: renderCodeBlock,
-    horizontalRule: ()=>"<hr />",
-    hardBreak: ()=>"<br />",
-    image: renderImage,
-    cmsBlock: ()=>"",
-    youtube: renderYoutube,
-    table: renderTable,
-    tableRow: (node, ctx)=>renderTableRow(node, ctx, {
-            winnerColIndex: -1,
-            isFirstRow: false
-        }),
-    tableCell: (node, ctx)=>renderTableCell(node, ctx, false),
-    tableHeader: (node, ctx)=>renderTableCell(node, ctx, false),
-    text: renderText
+	doc: (node, ctx) => renderChildren(node.content, ctx),
+	paragraph: wrapIn("p"),
+	heading: renderHeading,
+	blockquote: wrapIn("blockquote"),
+	bulletList: wrapIn("ul"),
+	orderedList: renderOrderedList,
+	listItem: wrapIn("li"),
+	codeBlock: renderCodeBlock,
+	horizontalRule: () => "<hr />",
+	hardBreak: () => "<br />",
+	image: renderImage,
+	cmsBlock: () => "",
+	youtube: renderYoutube,
+	table: renderTable,
+	tableRow: (node, ctx) => renderTableRow(node, ctx, {
+		winnerColIndex: -1,
+		isFirstRow: false
+	}),
+	tableCell: (node, ctx) => renderTableCell(node, ctx, false),
+	tableHeader: (node, ctx) => renderTableCell(node, ctx, false),
+	text: renderText
 };
+// Own keys only, so a node typed "toString" never reaches Object.prototype.
 function pick(table, key) {
-    return key !== undefined && Object.hasOwn(table, key) ? table[key] : undefined;
+	return key !== undefined && Object.hasOwn(table, key) ? table[key] : undefined;
 }
 function renderNode(node, ctx) {
-    const render = pick(RENDERERS, node.type);
-    return render ? render(node, ctx) : renderChildren(node.content, ctx);
+	const render = pick(RENDERERS, node.type);
+	return render ? render(node, ctx) : renderChildren(node.content, ctx);
 }
 function renderChildren(content, ctx) {
-    if (!content?.length) return "";
-    return content.map((child)=>renderNode(child, ctx)).join("");
+	if (!content?.length) return "";
+	return content.map((child) => renderNode(child, ctx)).join("");
 }
+// WHY a facade, never a bare <iframe> on first paint: it's roughly 700KB and wrecks
+// LCP. renderer.svelte's delegated click listener swaps in the iframe.
 const YOUTUBE_VIDEO_ID_RE = /^[A-Za-z0-9_-]{11}$/;
 function renderYoutube(node) {
-    const videoId = typeof node.attrs?.videoId === "string" ? node.attrs.videoId : "";
-    if (!YOUTUBE_VIDEO_ID_RE.test(videoId)) return "";
-    const title = typeof node.attrs?.title === "string" ? node.attrs.title : "";
-    const start = typeof node.attrs?.start === "number" ? node.attrs.start : 0;
-    const safeVideoId = escapeAttr(videoId);
-    const safeTitle = escapeAttr(title);
-    return `<div class="tiptap-youtube" data-video-id="${safeVideoId}" data-start="${start}">` + `<button type="button" class="tiptap-youtube-trigger" aria-label="Play video: ${safeTitle}">` + `<img class="tiptap-youtube-poster" src="https://i.ytimg.com/vi/${safeVideoId}/hqdefault.jpg" alt="" loading="lazy" width="480" height="360" />` + `<span class="tiptap-youtube-play" aria-hidden="true"></span>` + `<span class="tiptap-youtube-title">${escapeHtml(title)}</span>` + `</button></div>`;
+	const videoId = typeof node.attrs?.videoId === "string" ? node.attrs.videoId : "";
+	if (!YOUTUBE_VIDEO_ID_RE.test(videoId)) return "";
+	const title = typeof node.attrs?.title === "string" ? node.attrs.title : "";
+	const start = typeof node.attrs?.start === "number" ? node.attrs.start : 0;
+	const safeVideoId = escapeAttr(videoId);
+	const safeTitle = escapeAttr(title);
+	return `<div class="tiptap-youtube" data-video-id="${safeVideoId}" data-start="${start}">` + `<button type="button" class="tiptap-youtube-trigger" aria-label="Play video: ${safeTitle}">` + `<img class="tiptap-youtube-poster" src="https://i.ytimg.com/vi/${safeVideoId}/hqdefault.jpg" alt="" loading="lazy" width="480" height="360" />` + `<span class="tiptap-youtube-play" aria-hidden="true"></span>` + `<span class="tiptap-youtube-title">${escapeHtml(title)}</span>` + `</button></div>`;
 }
 function renderTableRow(row, ctx, { winnerColIndex, isFirstRow }) {
-    if (row.type !== "tableRow" || !row.content?.length) {
-        return `<tr>${renderChildren(row.content, ctx)}</tr>`;
-    }
-    const cellsHtml = row.content.map((cell, cellIdx)=>{
-        const isWinnerCell = !isFirstRow && winnerColIndex !== -1 && cellIdx === winnerColIndex;
-        return renderTableCell(cell, ctx, isWinnerCell);
-    }).join("");
-    return `<tr>${cellsHtml}</tr>`;
+	if (row.type !== "tableRow" || !row.content?.length) {
+		return `<tr>${renderChildren(row.content, ctx)}</tr>`;
+	}
+	const cellsHtml = row.content.map((cell, cellIdx) => {
+		const isWinnerCell = !isFirstRow && winnerColIndex !== -1 && cellIdx === winnerColIndex;
+		return renderTableCell(cell, ctx, isWinnerCell);
+	}).join("");
+	return `<tr>${cellsHtml}</tr>`;
 }
 function renderTableCell(cell, ctx, isWinnerCell) {
-    const tag = cell.type === "tableHeader" ? "th" : "td";
-    const colspan = typeof cell.attrs?.colspan === "number" && cell.attrs.colspan !== 1 ? String(cell.attrs.colspan) : undefined;
-    const rowspan = typeof cell.attrs?.rowspan === "number" && cell.attrs.rowspan !== 1 ? String(cell.attrs.rowspan) : undefined;
-    const inner = renderChildren(cell.content, ctx);
-    if (!isWinnerCell) {
-        const attrs = renderAttributes({
-            colspan,
-            rowspan
-        });
-        return `<${tag}${attrs}>${inner}</${tag}>`;
-    }
-    const winnerText = extractText(cell.content).trim();
-    const winner = normalizeWinner(winnerText);
-    const attrs = renderAttributes({
-        class: "winner-cell",
-        "data-winner": winner,
-        colspan,
-        rowspan
-    });
-    return `<${tag}${attrs}>${inner}</${tag}>`;
+	const tag = cell.type === "tableHeader" ? "th" : "td";
+	const colspan = typeof cell.attrs?.colspan === "number" && cell.attrs.colspan !== 1 ? String(cell.attrs.colspan) : undefined;
+	const rowspan = typeof cell.attrs?.rowspan === "number" && cell.attrs.rowspan !== 1 ? String(cell.attrs.rowspan) : undefined;
+	const inner = renderChildren(cell.content, ctx);
+	if (!isWinnerCell) {
+		const attrs = renderAttributes({
+			colspan,
+			rowspan
+		});
+		return `<${tag}${attrs}>${inner}</${tag}>`;
+	}
+	const winnerText = extractText(cell.content).trim();
+	const winner = normalizeWinner(winnerText);
+	const attrs = renderAttributes({
+		class: "winner-cell",
+		"data-winner": winner,
+		colspan,
+		rowspan
+	});
+	return `<${tag}${attrs}>${inner}</${tag}>`;
 }
 const WINNER_HEADERS = [
-    "winner",
-    "gagnant",
-    "vainqueur"
+	"winner",
+	"gagnant",
+	"vainqueur"
 ];
 function findWinnerColumnIndex(table) {
-    const firstRow = table.content?.[0];
-    if (!firstRow?.content) return -1;
-    for(let i = 0; i < firstRow.content.length; i++){
-        const headerText = extractText(firstRow.content[i]?.content).trim().toLowerCase();
-        if (WINNER_HEADERS.includes(headerText)) return i;
-    }
-    return -1;
-}
+	const firstRow = table.content?.[0];
+	if (!firstRow?.content) return -1;
+	for (let i = 0; i < firstRow.content.length; i++) {
+		const headerText = extractText(firstRow.content[i]?.content).trim().toLowerCase();
+		if (WINNER_HEADERS.includes(headerText)) return i;
+	}
+	return -1;
+}
+// WHY the first word: "Acme wins" and "Acme" are one winner. The host styles a
+// product with `[data-winner="acme"]`, so the serializer names no product.
 function normalizeWinner(text) {
-    const lower = text.toLowerCase().trim();
-    if (!lower) return "other";
-    if (lower.startsWith("tie") || lower.startsWith("égal") || lower.startsWith("egal")) {
-        return "tie";
-    }
-    return lower.match(/^[\p{L}\p{N}]+/u)?.[0] ?? "other";
+	const lower = text.toLowerCase().trim();
+	if (!lower) return "other";
+	if (lower.startsWith("tie") || lower.startsWith("égal") || lower.startsWith("egal")) {
+		return "tie";
+	}
+	return lower.match(/^[\p{L}\p{N}]+/u)?.[0] ?? "other";
 }
 function renderText(node) {
-    const text = escapeHtml(node.text ?? "");
-    if (!node.marks?.length) return text;
-    return node.marks.reduce((html, mark)=>wrapMark(html, mark), text);
+	const text = escapeHtml(node.text ?? "");
+	if (!node.marks?.length) return text;
+	return node.marks.reduce((html, mark) => wrapMark(html, mark), text);
 }
 const MARK_TAGS = {
-    bold: "strong",
-    italic: "em",
-    strike: "s",
-    underline: "u",
-    code: "code"
+	bold: "strong",
+	italic: "em",
+	strike: "s",
+	underline: "u",
+	code: "code"
 };
 function wrapMark(content, mark) {
-    if (mark.type === "link") {
-        const attrs = renderAttributes({
-            href: strAttr(mark.attrs, "href") ?? "",
-            target: strAttr(mark.attrs, "target"),
-            rel: strAttr(mark.attrs, "rel")
-        });
-        return `<a${attrs}>${content}</a>`;
-    }
-    const tag = pick(MARK_TAGS, mark.type);
-    return tag ? `<${tag}>${content}</${tag}>` : content;
+	if (mark.type === "link") {
+		const attrs = renderAttributes({
+			href: strAttr(mark.attrs, "href") ?? "",
+			target: strAttr(mark.attrs, "target"),
+			rel: strAttr(mark.attrs, "rel")
+		});
+		return `<a${attrs}>${content}</a>`;
+	}
+	const tag = pick(MARK_TAGS, mark.type);
+	return tag ? `<${tag}>${content}</${tag}>` : content;
 }
 function renderAttributes(attrs) {
-    const parts = Object.entries(attrs).filter(([, value])=>value !== undefined && value !== "").map(([key, value])=>` ${key}="${escapeAttr(value ?? "")}"`);
-    return parts.join("");
+	const parts = Object.entries(attrs).filter(([, value]) => value !== undefined && value !== "").map(([key, value]) => ` ${key}="${escapeAttr(value ?? "")}"`);
+	return parts.join("");
 }
 function extractText(content) {
-    if (!content?.length) return "";
-    return content.map((node)=>{
-        if (node.type === "text") return node.text ?? "";
-        return extractText(node.content);
-    }).join("");
+	if (!content?.length) return "";
+	return content.map((node) => {
+		if (node.type === "text") return node.text ?? "";
+		return extractText(node.content);
+	}).join("");
 }
 function clampHeadingLevel(level) {
-    if (level === 1 || level === 2 || level === 3 || level === 4 || level === 5 || level === 6) {
-        return level;
-    }
-    return 2;
+	if (level === 1 || level === 2 || level === 3 || level === 4 || level === 5 || level === 6) {
+		return level;
+	}
+	return 2;
 }
 function escapeHtml(value) {
-    return value.replaceAll("&", "&amp;").replaceAll("<", "&lt;").replaceAll(">", "&gt;").replaceAll('"', "&quot;").replaceAll("'", "&#39;");
+	return value.replaceAll("&", "&amp;").replaceAll("<", "&lt;").replaceAll(">", "&gt;").replaceAll("\"", "&quot;").replaceAll("'", "&#39;");
 }
 function escapeAttr(value) {
-    return escapeHtml(value).replaceAll("`", "&#96;");
+	return escapeHtml(value).replaceAll("`", "&#96;");
 }