@heyramzi/ui 2.8.0 → 2.10.0

package/dist/editor/serializer.js

@@ -0,0 +1,268 @@
+function slugify(input, maxLength = 60) {
+    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()
+    };
+}
+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}`;
+}
+export function renderTiptapContent(content) {
+    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;
+}
+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);
+    }
+}
+export function extractYoutubeVideos(content) {
+    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);
+}
+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
+    };
+}
+function strAttr(attrs, key) {
+    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 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}>`;
+}
+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>`;
+}
+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>`;
+}
+function numString(attrs, key) {
+    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} />`;
+}
+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 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
+};
+function pick(table, key) {
+    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);
+}
+function renderChildren(content, ctx) {
+    if (!content?.length) return "";
+    return content.map((child)=>renderNode(child, ctx)).join("");
+}
+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>`;
+}
+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>`;
+}
+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 WINNER_HEADERS = [
+    "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;
+}
+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";
+}
+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 MARK_TAGS = {
+    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;
+}
+function renderAttributes(attrs) {
+    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("");
+}
+function clampHeadingLevel(level) {
+    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;");
+}
+function escapeAttr(value) {
+    return escapeHtml(value).replaceAll("`", "&#96;");
+}

package/dist/editor/slash-items.js

@@ -0,0 +1,104 @@
+import { TextB, TextHOne, TextHTwo, TextHThree, ListBullets, ListNumbers, Quotes, CodeBlock, Minus, ImageSquare, Paragraph, VideoCamera, ListChecks, Table } from "phosphor-svelte";
+export function buildSlashItems(editor, query, options) {
+    const run = ()=>editor.chain().focus();
+    const full = options.preset === "full";
+    const allItems = [
+        {
+            label: "Heading 1",
+            description: "Page title",
+            icon: TextHOne,
+            command: ()=>run().toggleHeading({
+                    level: 1
+                }).run()
+        },
+        {
+            label: "Heading 2",
+            description: "Section heading",
+            icon: TextHTwo,
+            command: ()=>run().toggleHeading({
+                    level: 2
+                }).run()
+        },
+        {
+            label: "Heading 3",
+            description: "Subsection heading",
+            icon: TextHThree,
+            command: ()=>run().toggleHeading({
+                    level: 3
+                }).run()
+        },
+        {
+            label: "Bullet List",
+            description: "Unordered list",
+            icon: ListBullets,
+            command: ()=>run().toggleBulletList().run()
+        },
+        {
+            label: "Ordered List",
+            description: "Numbered list",
+            icon: ListNumbers,
+            command: ()=>run().toggleOrderedList().run()
+        },
+        ...full ? [
+            {
+                label: "Checklist",
+                description: "Tasks with checkboxes",
+                icon: ListChecks,
+                command: ()=>run().toggleTaskList().run()
+            },
+            {
+                label: "Table",
+                description: "Rows and columns",
+                icon: Table,
+                command: ()=>run().insertTable({
+                        rows: 3,
+                        cols: 3,
+                        withHeaderRow: true
+                    }).run()
+            }
+        ] : [],
+        {
+            label: "Quote",
+            description: "Blockquote",
+            icon: Quotes,
+            command: ()=>run().toggleBlockquote().run()
+        },
+        {
+            label: "Code Block",
+            description: "Code snippet",
+            icon: CodeBlock,
+            command: ()=>run().toggleCodeBlock().run()
+        },
+        {
+            label: "Divider",
+            description: "Horizontal rule",
+            icon: Minus,
+            command: ()=>run().setHorizontalRule().run()
+        },
+        ...full ? [
+            {
+                label: "Image",
+                description: "Insert from URL",
+                icon: ImageSquare,
+                command: options.insertImage
+            }
+        ] : [],
+        ...full ? [
+            {
+                label: "YouTube",
+                description: "Insert a video by URL",
+                icon: VideoCamera,
+                command: options.insertYoutube
+            }
+        ] : [],
+        {
+            label: "Paragraph",
+            description: "Plain text block",
+            icon: Paragraph,
+            command: ()=>run().setParagraph().run()
+        }
+    ];
+    if (!query) return allItems;
+    const q = query.toLowerCase();
+    return allItems.filter((item)=>item.label.toLowerCase().includes(q) || item.description.toLowerCase().includes(q));
+}

package/dist/editor/youtube-url.js

@@ -0,0 +1,27 @@
+export const YOUTUBE_ID_RE = /^[A-Za-z0-9_-]{11}$/;
+function toUrl(url) {
+    try {
+        return new URL(url);
+    } catch  {
+        return null;
+    }
+}
+function videoIdOf(parsed) {
+    const host = parsed.hostname.replace(/^www\./, "");
+    if (host === "youtu.be") return parsed.pathname.slice(1);
+    if (host !== "youtube.com" && host !== "m.youtube.com") return null;
+    if (parsed.pathname === "/watch") return parsed.searchParams.get("v");
+    if (parsed.pathname.startsWith("/embed/")) return parsed.pathname.slice("/embed/".length);
+    return null;
+}
+export function parseYoutubeUrl(url) {
+    const parsed = toUrl(url);
+    if (!parsed) return null;
+    const videoId = videoIdOf(parsed);
+    if (!videoId || !YOUTUBE_ID_RE.test(videoId)) return null;
+    const t = parseInt(parsed.searchParams.get("t") ?? "", 10);
+    return {
+        videoId,
+        start: Number.isFinite(t) && t > 0 ? t : 0
+    };
+}

package/dist/effects/animated-beam/index.js

@@ -0,0 +1 @@
+export { default as AnimatedBeam } from "../../../src/effects/animated-beam/AnimatedBeam.svelte";

package/dist/effects/animated-beam/path-calculator.svelte.js

@@ -0,0 +1,42 @@
+function anchorX(rect, containerLeft, anchor, offset) {
+    const left = rect.left - containerLeft;
+    if (anchor === "left") return left + offset;
+    if (anchor === "right") return left + rect.width + offset;
+    return left + rect.width / 2 + offset;
+}
+export function usePathCalculator() {
+    let pathD = $state("");
+    let svgDimensions = $state({
+        width: 0,
+        height: 0
+    });
+    function calculatePath(containerRef, fromRef, toRef, curvature, startXOffset, startYOffset, endXOffset, endYOffset, fromAnchor = "center", toAnchor = "center") {
+        if (!containerRef || !fromRef || !toRef) return;
+        const containerRect = containerRef.getBoundingClientRect();
+        const rectA = fromRef.getBoundingClientRect();
+        const rectB = toRef.getBoundingClientRect();
+        svgDimensions = {
+            width: containerRect.width,
+            height: containerRect.height
+        };
+        const startX = anchorX(rectA, containerRect.left, fromAnchor, startXOffset);
+        const startY = rectA.top - containerRect.top + rectA.height / 2 + startYOffset;
+        const endX = anchorX(rectB, containerRect.left, toAnchor, endXOffset);
+        const endY = rectB.top - containerRect.top + rectB.height / 2 + endYOffset;
+        const span = Math.abs(endX - startX);
+        const handle = Math.max(span * 0.5, 24);
+        const direction = endX >= startX ? 1 : -1;
+        const c1x = startX + handle * direction;
+        const c2x = endX - handle * direction;
+        pathD = `M ${startX},${startY} C ${c1x},${startY - curvature} ${c2x},${endY - curvature} ${endX},${endY}`;
+    }
+    return {
+        get pathD () {
+            return pathD;
+        },
+        get svgDimensions () {
+            return svgDimensions;
+        },
+        calculatePath
+    };
+}