diff --git a/docs/assets/create-markdown-preview.js b/docs/assets/create-markdown-preview.js new file mode 100644 index 00000000000..3e82494815b --- /dev/null +++ b/docs/assets/create-markdown-preview.js @@ -0,0 +1,1287 @@ +/** + * @create-markdown/preview v0.1.0 + * Framework-agnostic HTML rendering for @create-markdown + * + * Author: Val Alexander + * License: MIT + * npm: https://www.npmjs.com/package/@create-markdown/preview + * GitHub: https://github.com/BunsDev/create-markdown/tree/main/packages/preview + * + * Vendored from esm.sh to avoid third-party CDN supply-chain risk. + */ +var I = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789", + H = 8; +function R(e = H) { + let n = "", + t = I.length; + for (let r = 0; r < e; r++) n += I.charAt(Math.floor(Math.random() * t)); + return n; +} +function z(e) { + return { text: e, styles: {} }; +} +function F(e) { + return [z(e)]; +} +var d = { + heading: /^(#{1,6})\s+(.*)$/, + setextH1: /^=+\s*$/, + setextH2: /^-+\s*$/, + bulletList: /^(\s*)([-*+])\s+(.*)$/, + numberedList: /^(\s*)(\d+)\.\s+(.*)$/, + checkList: /^(\s*)[-*+]\s+\[([ xX])\]\s+(.*)$/, + codeFence: /^(\s*)(`{3,}|~{3,})(\w*)?\s*$/, + blockquote: /^>\s?(.*)$/, + callout: /^>\s*\[!(\w+)\]\s*$/, + divider: /^(\s*)(-{3,}|\*{3,}|_{3,})\s*$/, + tableRow: /^\|(.+)\|$/, + tableSeparator: /^\|[\s\-:|]+\|$/, + image: /^!\[([^\]]*)\]\(([^)]+)\)$/, + blank: /^\s*$/, +}; +function U(e) { + let n = e.split(/\r?\n/), + t = [], + r = { inCodeBlock: !1, codeBlockFence: "", lineNumber: 0 }; + for (let i = 0; i < n.length; i++) { + r.lineNumber = i + 1; + let o = n[i], + s = V(o, r, n, i); + s && t.push(s); + } + return t; +} +function V(e, n, t, r) { + let i = n.lineNumber; + if (n.inCodeBlock) + return e.match(d.codeFence) && + e.trim().startsWith(n.codeBlockFence.charAt(0)) + ? ((n.inCodeBlock = !1), + (n.codeBlockFence = ""), + { type: "code_fence_end", raw: e, content: "", indent: 0, line: i }) + : { type: "code_content", raw: e, content: e, indent: 0, line: i }; + let o = e.match(d.codeFence); + if (o) { + (n.inCodeBlock = !0), (n.codeBlockFence = o[2]); + let f = o[3] || ""; + return { + type: "code_fence_start", + raw: e, + content: "", + indent: (o[1] || "").length, + line: i, + meta: { language: f }, + }; + } + if (d.blank.test(e)) + return { type: "blank", raw: e, content: "", indent: 0, line: i }; + let s = e.match(d.divider); + if (s) { + let f = r > 0 ? t[r - 1] : ""; + if (f.trim() && !d.blank.test(f)) d.setextH2.test(e); + else + return { + type: "divider", + raw: e, + content: "", + indent: (s[1] || "").length, + line: i, + }; + } + let c = e.match(d.heading); + if (c) + return { + type: "heading", + raw: e, + content: c[2].trim(), + indent: 0, + line: i, + meta: { level: c[1].length }, + }; + let l = e.match(d.callout); + if (l) + return { + type: "callout", + raw: e, + content: "", + indent: 0, + line: i, + meta: { calloutType: l[1].toLowerCase() }, + }; + let a = e.match(d.blockquote); + if (a) + return { type: "blockquote", raw: e, content: a[1], indent: 0, line: i }; + let u = e.match(d.checkList); + if (u) { + let f = u[2].toLowerCase() === "x"; + return { + type: "check_list_item", + raw: e, + content: u[3], + indent: u[1].length, + line: i, + meta: { checked: f }, + }; + } + let h = e.match(d.bulletList); + if (h) + return { + type: "bullet_list_item", + raw: e, + content: h[3], + indent: h[1].length, + line: i, + meta: { listMarker: h[2] }, + }; + let p = e.match(d.numberedList); + if (p) + return { + type: "numbered_list_item", + raw: e, + content: p[3], + indent: p[1].length, + line: i, + meta: { listIndex: parseInt(p[2], 10) }, + }; + if (d.tableSeparator.test(e)) + return { type: "table_separator", raw: e, content: e, indent: 0, line: i }; + let k = e.match(d.tableRow); + if (k) + return { type: "table_row", raw: e, content: k[1], indent: 0, line: i }; + let w = e.match(d.image); + if (w) + return { + type: "image", + raw: e, + content: w[2], + indent: 0, + line: i, + meta: { language: w[1] }, + }; + if (d.setextH1.test(e) || d.setextH2.test(e)) { + let f = r > 0 ? t[r - 1] : ""; + return f.trim() && !d.blank.test(f) + ? { + type: "heading", + raw: e, + content: f.trim(), + indent: 0, + line: i, + meta: { level: d.setextH1.test(e) ? 1 : 2 }, + } + : { type: "divider", raw: e, content: "", indent: 0, line: i }; + } + return { + type: "paragraph", + raw: e, + content: e.trim(), + indent: e.length - e.trimStart().length, + line: i, + }; +} +function $(e) { + if (!e) return []; + let n = W(e); + return G(n); +} +function W(e) { + let n = [], + t = e, + r = 0; + for (; r < t.length; ) { + let i = Y(t, r); + i + ? (i.startIndex > r && + n.push({ type: "text", content: t.slice(r, i.startIndex) }), + n.push(i.token), + (r = i.endIndex)) + : r++; + } + return b(e); +} +function b(e) { + let n = [], + t = 0, + r = "", + i = () => { + r && (n.push({ type: "text", content: r }), (r = "")); + }; + for (; t < e.length; ) { + if (e[t] === "\\" && t + 1 < e.length) { + (r += e[t + 1]), (t += 2); + continue; + } + if (e[t] === "`") { + let o = T(e, t); + if (o) { + i(), n.push(o.token), (t = o.end); + continue; + } + } + if (e[t] === "[" || (e[t] === "!" && e[t + 1] === "[")) { + let o = e[t] === "!", + s = J(e, o ? t + 1 : t, o); + if (s) { + i(), n.push(s.token), (t = s.end); + continue; + } + } + if (e[t] === "*" || e[t] === "_") { + let o = L(e, t); + if (o) { + i(), n.push(o.token), (t = o.end); + continue; + } + } + if (e[t] === "~" && e[t + 1] === "~") { + let o = E(e, t); + if (o) { + i(), n.push(o.token), (t = o.end); + continue; + } + } + if (e[t] === "=" && e[t + 1] === "=") { + let o = A(e, t); + if (o) { + i(), n.push(o.token), (t = o.end); + continue; + } + } + (r += e[t]), t++; + } + return i(), n; +} +function T(e, n) { + let t = 0, + r = n; + for (; r < e.length && e[r] === "`"; ) t++, r++; + if (t === 0) return null; + let i = "`".repeat(t), + o = e.indexOf(i, r); + return o === -1 || e[o + t] === "`" + ? null + : { token: { type: "code", content: e.slice(r, o).trim() }, end: o + t }; +} +function J(e, n, t = !1) { + if (e[n] !== "[") return null; + let r = 1, + i = n + 1; + for (; i < e.length && r > 0; ) + e[i] === "[" ? r++ : e[i] === "]" ? r-- : e[i] === "\\" && i++, i++; + if (r !== 0) return null; + let o = e.slice(n + 1, i - 1); + if (e[i] !== "(") return null; + let s = i + 1, + c = s, + l = 1; + for (; c < e.length && l > 0; ) + e[c] === "(" ? l++ : e[c] === ")" ? l-- : e[c] === "\\" && c++, c++; + if (l !== 0) return null; + let a = e.slice(s, c - 1).trim(), + u = a, + h, + p = a.match(/^(.+?)\s+["'](.+?)["']$/); + p && ((u = p[1]), (h = p[2])); + let k = b(o); + return { + token: t + ? { type: "image", content: o, url: u, title: h, children: k } + : { type: "link", content: o, url: u, title: h, children: k }, + end: t ? c + 1 : c, + }; +} +function L(e, n) { + let t = e[n]; + if (t !== "*" && t !== "_") return null; + let r = 0, + i = n; + for (; i < e.length && e[i] === t && r < 3; ) r++, i++; + if (r === 0) return null; + let o = t.repeat(r), + s = i; + for (; s < e.length; ) { + let c = e.indexOf(o, s); + if (c === -1) return null; + if (e[c + r] === t) { + s = c + 1; + continue; + } + if (e[c - 1] === " ") { + s = c + 1; + continue; + } + let l = e.slice(i, c); + if (!l.trim()) { + s = c + 1; + continue; + } + let a = b(l); + return r === 3 + ? { + token: { + type: "bold", + content: l, + children: [{ type: "italic", content: l, children: a }], + }, + end: c + r, + } + : r === 2 + ? { token: { type: "bold", content: l, children: a }, end: c + r } + : { token: { type: "italic", content: l, children: a }, end: c + r }; + } + return null; +} +function E(e, n) { + if (e[n] !== "~" || e[n + 1] !== "~") return null; + let t = e.indexOf("~~", n + 2); + if (t === -1) return null; + let r = e.slice(n + 2, t); + if (!r.trim()) return null; + let i = b(r); + return { + token: { type: "strikethrough", content: r, children: i }, + end: t + 2, + }; +} +function A(e, n) { + if (e[n] !== "=" || e[n + 1] !== "=") return null; + let t = e.indexOf("==", n + 2); + if (t === -1) return null; + let r = e.slice(n + 2, t); + if (!r.trim()) return null; + let i = b(r); + return { token: { type: "highlight", content: r, children: i }, end: t + 2 }; +} +function G(e) { + let n = []; + for (let t of e) { + let r = P(t, {}); + n.push(...r); + } + return K(n); +} +function P(e, n) { + switch (e.type) { + case "text": + return [{ text: e.content, styles: { ...n } }]; + case "bold": + return y(e, { ...n, bold: !0 }); + case "italic": + return y(e, { ...n, italic: !0 }); + case "code": + return [{ text: e.content, styles: { ...n, code: !0 } }]; + case "strikethrough": + return y(e, { ...n, strikethrough: !0 }); + case "highlight": + return y(e, { ...n, highlight: !0 }); + case "link": + return y(e, { ...n, link: { url: e.url || "", title: e.title } }); + case "image": + return [{ text: `[image: ${e.content}]`, styles: n }]; + default: + return [{ text: e.content, styles: n }]; + } +} +function y(e, n) { + if (e.children && e.children.length > 0) { + let t = []; + for (let r of e.children) t.push(...P(r, n)); + return t; + } + return [{ text: e.content, styles: n }]; +} +function K(e) { + if (e.length === 0) return []; + let n = [e[0]]; + for (let t = 1; t < e.length; t++) { + let r = e[t], + i = n[n.length - 1]; + X(r.styles, i.styles) ? (i.text += r.text) : n.push(r); + } + return n; +} +function X(e, n) { + return ( + e.bold === n.bold && + e.italic === n.italic && + e.underline === n.underline && + e.strikethrough === n.strikethrough && + e.code === n.code && + e.highlight === n.highlight && + Q(e.link, n.link) + ); +} +function Q(e, n) { + return !e && !n ? !0 : !e || !n ? !1 : e.url === n.url && e.title === n.title; +} +function Y(e, n) { + let t = [() => T(e, n), () => L(e, n), () => E(e, n), () => A(e, n)]; + for (let r of t) { + let i = r(); + if (i) return { token: i.token, startIndex: n, endIndex: i.end }; + } + return null; +} +var Z = { generateId: R, strict: !1 }; +function ee(e, n = {}) { + let t = { ...Z, ...n }, + r = U(e); + return ne(r, t); +} +function x(e, n) { + return ee(e, n); +} +function ne(e, n) { + let t = [], + r = { options: n, tokens: e, index: 0 }; + for (; r.index < e.length; ) { + if (e[r.index].type === "blank") { + r.index++; + continue; + } + let o = te(r); + o && t.push(o); + } + return t; +} +function te(e) { + switch (e.tokens[e.index].type) { + case "heading": + return re(e); + case "paragraph": + return ie(e); + case "bullet_list_item": + return oe(e); + case "numbered_list_item": + return ce(e); + case "check_list_item": + return se(e); + case "code_fence_start": + return le(e); + case "blockquote": + return ae(e); + case "callout": + return ue(e); + case "divider": + return de(e); + case "table_row": + return he(e); + case "image": + return fe(e); + default: + return e.index++, null; + } +} +function re(e) { + let n = e.tokens[e.index], + t = n.meta?.level ?? 1, + r = $(n.content); + return ( + e.index++, + { + id: e.options.generateId(), + type: "heading", + content: r, + children: [], + props: { level: t }, + } + ); +} +function ie(e) { + let n = []; + for (; e.index < e.tokens.length && e.tokens[e.index].type === "paragraph"; ) + n.push(e.tokens[e.index].content), e.index++; + let t = $(n.join(" ")); + return { + id: e.options.generateId(), + type: "paragraph", + content: t, + children: [], + props: {}, + }; +} +function oe(e) { + let n = [], + t = e.tokens[e.index].indent; + for ( + ; + e.index < e.tokens.length && + e.tokens[e.index].type === "bullet_list_item" && + e.tokens[e.index].indent >= t; + + ) { + let r = e.tokens[e.index]; + if (r.indent > t) { + e.index++; + continue; + } + let i = $(r.content); + n.push({ + id: e.options.generateId(), + type: "paragraph", + content: i, + children: [], + props: {}, + }), + e.index++; + } + return { + id: e.options.generateId(), + type: "bulletList", + content: [], + children: n, + props: {}, + }; +} +function ce(e) { + let n = [], + t = e.tokens[e.index].indent; + for ( + ; + e.index < e.tokens.length && + e.tokens[e.index].type === "numbered_list_item" && + e.tokens[e.index].indent >= t; + + ) { + let r = e.tokens[e.index]; + if (r.indent > t) { + e.index++; + continue; + } + let i = $(r.content); + n.push({ + id: e.options.generateId(), + type: "paragraph", + content: i, + children: [], + props: {}, + }), + e.index++; + } + return { + id: e.options.generateId(), + type: "numberedList", + content: [], + children: n, + props: {}, + }; +} +function se(e) { + let n = e.tokens[e.index], + t = n.meta?.checked ?? !1, + r = $(n.content); + return ( + e.index++, + { + id: e.options.generateId(), + type: "checkList", + content: r, + children: [], + props: { checked: t }, + } + ); +} +function le(e) { + let t = e.tokens[e.index].meta?.language ?? "", + r = []; + for ( + e.index++; + e.index < e.tokens.length && e.tokens[e.index].type === "code_content"; + + ) + r.push(e.tokens[e.index].content), e.index++; + return ( + e.index < e.tokens.length && + e.tokens[e.index].type === "code_fence_end" && + e.index++, + { + id: e.options.generateId(), + type: "codeBlock", + content: F( + r.join(` +`) + ), + children: [], + props: { language: t || void 0 }, + } + ); +} +function ae(e) { + let n = []; + for (; e.index < e.tokens.length && e.tokens[e.index].type === "blockquote"; ) + n.push(e.tokens[e.index].content), e.index++; + let t = $( + n.join(` +`) + ); + return { + id: e.options.generateId(), + type: "blockquote", + content: t, + children: [], + props: {}, + }; +} +function ue(e) { + let t = e.tokens[e.index].meta?.calloutType ?? "note"; + e.index++; + let r = []; + for (; e.index < e.tokens.length && e.tokens[e.index].type === "blockquote"; ) + r.push(e.tokens[e.index].content), e.index++; + let i = $( + r.join(` +`) + ); + return { + id: e.options.generateId(), + type: "callout", + content: i, + children: [], + props: { type: t }, + }; +} +function de(e) { + return ( + e.index++, + { + id: e.options.generateId(), + type: "divider", + content: [], + children: [], + props: {}, + } + ); +} +function he(e) { + let n = [], + t = [], + r = [], + i = !0, + o = !1; + for ( + ; + e.index < e.tokens.length && + (e.tokens[e.index].type === "table_row" || + e.tokens[e.index].type === "table_separator"); + + ) { + let s = e.tokens[e.index]; + if (s.type === "table_separator") { + (r = pe(s.content)), (o = !0), e.index++; + continue; + } + let c = s.content + .split("|") + .map((l) => l.trim()) + .filter((l) => l !== ""); + i && !o ? ((t = c), (i = !1)) : o && n.push(c), e.index++; + } + return ( + !o && t.length > 0 && (n.unshift(t), (t = [])), + { + id: e.options.generateId(), + type: "table", + content: [], + children: [], + props: { headers: t, rows: n, alignments: r.length > 0 ? r : void 0 }, + } + ); +} +function pe(e) { + return e + .split("|") + .map((n) => n.trim()) + .filter((n) => n !== "") + .map((n) => { + let t = n.startsWith(":"), + r = n.endsWith(":"); + return t && r ? "center" : t ? "left" : r ? "right" : null; + }); +} +function fe(e) { + let n = e.tokens[e.index], + t = n.content, + r = n.meta?.language ?? ""; + return ( + e.index++, + { + id: e.options.generateId(), + type: "image", + content: [], + children: [], + props: { url: t, alt: r || void 0 }, + } + ); +} +var ge = { + classPrefix: "cm-", + theme: "github", + linkTarget: "_blank", + sanitize: !1, + plugins: [], + customRenderers: {}, +}; +function N(e) { + return { + ...ge, + ...e, + plugins: e?.plugins ?? [], + customRenderers: e?.customRenderers ?? {}, + }; +} +function C(e, n) { + let t = N(n), + r = t.classPrefix, + i = e; + for (let c of t.plugins) c.transformBlock && (i = i.map(c.transformBlock)); + let o = i.map((c) => { + for (let a of t.plugins) + if (a.renderBlock) { + let u = a.renderBlock(c, () => S(c, t)); + if (u !== null) return u; + } + let l = t.customRenderers[c.type]; + return l ? l(c) : S(c, t); + }); + return `
${o.join(` +`)}
`; +} +function qe(e, n) { + let t = x(e); + return C(t, n); +} +async function me(e, n) { + let t = N(n); + for (let i of t.plugins) i.init && (await i.init()); + let r = C(e, n); + for (let i of t.plugins) i.postProcess && (r = await i.postProcess(r)); + return r; +} +function S(e, n) { + let t = n.classPrefix; + switch (e.type) { + case "paragraph": + return `

${m(e.content, n)}

`; + case "heading": + return ke(e, n); + case "bulletList": + return $e(e, n); + case "numberedList": + return ye(e, n); + case "checkList": + return be(e, n); + case "codeBlock": + return we(e, n); + case "blockquote": + return `
${m( + e.content, + n + )}
`; + case "table": + return xe(e, n); + case "image": + return ve(e, n); + case "divider": + return `
`; + case "callout": + return Be(e, n); + default: + return `
${m(e.content, n)}
`; + } +} +function ke(e, n) { + let t = n.classPrefix, + r = e.props.level, + i = `h${r}`, + o = m(e.content, n); + return `<${i} class="${t}heading ${t}h${r}">${o}`; +} +function $e(e, n) { + let t = n.classPrefix, + r = e.children.map((i) => `
  • ${m(i.content, n)}
    • `).join(` +`); + return ``; +} +function ye(e, n) { + let t = n.classPrefix, + r = e.children.map((i) => `
  • ${m(i.content, n)}
    • `).join(` +`); + return `
      +${r} +
    `; +} +function be(e, n) { + let t = n.classPrefix, + r = e.props.checked, + i = r ? "checked disabled" : "disabled", + o = r ? `${t}checked` : ""; + return ` +
    + + ${m(e.content, n)} +
    `.trim(); +} +function we(e, n) { + let t = n.classPrefix, + r = e.content.map((l) => l.text).join(""), + i = e.props.language || "", + o = g(r), + s = i ? ` language-${i}` : "", + c = i ? ` data-language="${i}"` : ""; + return `
    ${o}
    `; +} +function xe(e, n) { + let t = n.classPrefix, + { headers: r, rows: i, alignments: o } = e.props, + s = (a) => { + let u = o?.[a]; + return u ? ` style="text-align: ${u}"` : ""; + }, + c = + r.length > 0 + ? `${r + .map((a, u) => `${g(a)}`) + .join("")}` + : "", + l = i.map( + (a) => `${a.map((u, h) => `${g(u)}`).join("")}` + ).join(` +`); + return ` +${c} + +${l} + +
    `; +} +function ve(e, n) { + let t = n.classPrefix, + { url: r, alt: i, title: o, width: s, height: c } = e.props, + l = i ? ` alt="${g(i)}"` : ' alt=""', + a = o ? ` title="${g(o)}"` : "", + u = s ? ` width="${s}"` : "", + h = c ? ` height="${c}"` : "", + p = ``, + k = i ? `
    ${g(i)}
    ` : ""; + return `
    ${p}${k}
    `; +} +function Be(e, n) { + let t = n.classPrefix, + r = e.props.type, + i = m(e.content, n); + return ` +`.trim(); +} +function m(e, n) { + return e.map((t) => _e(t, n)).join(""); +} +function _e(e, n) { + let t = g(e.text), + r = e.styles; + if ( + (r.code && (t = `${t}`), + r.highlight && (t = `${t}`), + r.strikethrough && (t = `${t}`), + r.underline && (t = `${t}`), + r.italic && (t = `${t}`), + r.bold && (t = `${t}`), + r.link) + ) { + let i = + n.linkTarget === "_blank" + ? ' target="_blank" rel="noopener noreferrer"' + : "", + o = r.link.title ? ` title="${g(r.link.title)}"` : ""; + t = `${t}`; + } + return t; +} +function g(e) { + return e + .replace(/&/g, "&") + .replace(//g, ">") + .replace(/"/g, """) + .replace(/'/g, "'"); +} +var Ce = { github: "github", githubDark: "github-dark", minimal: "minimal" }; +function Ne(e) { + return `@create-markdown/preview/themes/${Ce[e]}.css`; +} +var Ie = { + theme: "github-light", + darkTheme: "github-dark", + langs: [], + lineNumbers: !1, + classPrefix: "cm-", + }, + M = null, + v = null; +function Te(e) { + let n = { ...Ie, ...e }; + return { + name: "shiki", + async init() { + if (!v) + try { + let r = (await import("/shiki@>=1.0.0?target=es2022")) + .createHighlighter; + if (!r) { + console.warn( + "@create-markdown/preview: Shiki module loaded but createHighlighter not found" + ); + return; + } + (M = r({ + themes: [n.theme, n.darkTheme].filter(Boolean), + langs: [ + "javascript", + "typescript", + "jsx", + "tsx", + "json", + "html", + "css", + "markdown", + "python", + "rust", + "go", + "bash", + "shell", + ...n.langs, + ], + })), + (v = await M); + } catch { + console.warn( + "@create-markdown/preview: Shiki not available. Install with: npm install shiki" + ); + } + }, + renderBlock(t, r) { + if (t.type !== "codeBlock") return null; + let i = t, + o = i.content.map((c) => c.text).join(""), + s = i.props.language || "text"; + if (!v) return null; + try { + let l = v.codeToHtml(o, { lang: s, theme: n.theme }), + a = n.classPrefix; + return `
    ${l}
    `; + } catch { + return null; + } + }, + getCSS() { + let t = n.classPrefix; + return ` +.${t}shiki pre { + padding: 16px; + border-radius: 6px; + overflow-x: auto; + margin: 0; +} + +.${t}shiki code { + font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace; + font-size: 0.875em; + background: transparent; + padding: 0; +} + +.${t}shiki .line { + display: inline-block; + width: 100%; +} + +${ + n.lineNumbers + ? ` +.${t}shiki pre { + counter-reset: line; +} + +.${t}shiki .line::before { + counter-increment: line; + content: counter(line); + display: inline-block; + width: 2em; + margin-right: 1em; + text-align: right; + color: #6e7781; + user-select: none; +} +` + : "" +} +`.trim(); + }, + }; +} +var He = Te, + Le = { theme: "default", config: {}, classPrefix: "cm-", useUniqueIds: !0 }, + B = null, + j = !1, + D = 0; +function Ee(e) { + let n = { ...Le, ...e }; + return { + name: "mermaid", + async init() { + if (!j) + try { + let t = await import("/mermaid@>=10.0.0?target=es2022"); + (B = t.default || t), + B.initialize({ + startOnLoad: !1, + theme: n.theme, + securityLevel: "loose", + ...n.config, + }), + (j = !0); + } catch { + console.warn( + "@create-markdown/preview: Mermaid not available. Install with: npm install mermaid" + ); + } + }, + renderBlock(t, r) { + if (t.type !== "codeBlock") return null; + let i = t; + if (i.props.language?.toLowerCase() !== "mermaid") return null; + let s = i.content.map((a) => a.text).join(""), + c = n.classPrefix, + l = n.useUniqueIds ? `mermaid-${Date.now()}-${++D}` : `mermaid-${++D}`; + return ` +
    + 
    ${Ae(s)}
    +
    `.trim(); + }, + async postProcess(t) { + if (!B) return t; + try { + let r = B, + i = n.classPrefix, + o = new RegExp( + `
    ([\\s\\S]*?)
    `, + "g" + ), + s = [...t.matchAll(o)]; + for (let c of s) { + let [l, a, u] = c, + h = Pe(u); + try { + let { svg: p } = await r.render(a, h); + t = t.replace(l, `
    ${p}
    `); + } catch (p) { + console.warn(`Failed to render Mermaid diagram: ${p}`); + } + } + } catch (r) { + console.warn("Mermaid post-processing failed:", r); + } + return t; + }, + getCSS() { + let t = n.classPrefix; + return ` +.${t}mermaid-container { + margin-bottom: 16px; + overflow-x: auto; +} + +.${t}mermaid { + background-color: transparent; + text-align: center; +} + +.${t}mermaid-diagram { + display: flex; + justify-content: center; + padding: 16px; + background-color: #f6f8fa; + border-radius: 6px; +} + +.${t}mermaid-diagram svg { + max-width: 100%; + height: auto; +} + +/* Dark theme adjustments */ +@media (prefers-color-scheme: dark) { + .${t}mermaid-diagram { + background-color: #161b22; + } +} +`.trim(); + }, + }; +} +var Re = Ee; +function Ae(e) { + return e + .replace(/&/g, "&") + .replace(//g, ">") + .replace(/"/g, """) + .replace(/'/g, "'"); +} +function Pe(e) { + return e + .replace(/&/g, "&") + .replace(/</g, "<") + .replace(/>/g, ">") + .replace(/"/g, '"') + .replace(/'/g, "'"); +} +var _ = class extends HTMLElement { + shadow; + plugins; + defaultTheme; + styleElement; + contentElement; + static get observedAttributes() { + return ["theme", "link-target", "async"]; + } + constructor() { + super(), + (this.shadow = this.attachShadow({ mode: "open" })), + (this.plugins = []), + (this.defaultTheme = "github"), + (this.styleElement = document.createElement("style")), + this.shadow.appendChild(this.styleElement), + (this.contentElement = document.createElement("div")), + (this.contentElement.className = "markdown-preview-content"), + this.shadow.appendChild(this.contentElement), + this.updateStyles(); + } + connectedCallback() { + this.render(); + } + attributeChangedCallback(n, t, r) { + this.render(); + } + setPlugins(n) { + (this.plugins = n), this.render(); + } + setDefaultTheme(n) { + (this.defaultTheme = n), this.render(); + } + getMarkdown() { + let n = this.getAttribute("blocks"); + if (n) + try { + return JSON.parse(n).map((r) => r.content.map((i) => i.text).join("")) + .join(` + +`); + } catch { + return ""; + } + return this.textContent || ""; + } + setMarkdown(n) { + (this.textContent = n), this.render(); + } + setBlocks(n) { + this.setAttribute("blocks", JSON.stringify(n)), this.render(); + } + getOptions() { + let n = this.getAttribute("theme") || this.defaultTheme, + t = this.getAttribute("link-target") || "_blank"; + return { theme: n, linkTarget: t, plugins: this.plugins }; + } + getBlocks() { + let n = this.getAttribute("blocks"); + if (n) + try { + return JSON.parse(n); + } catch { + return ( + console.warn("Invalid blocks JSON in markdown-preview element"), [] + ); + } + let t = this.textContent || ""; + return x(t); + } + async render() { + let n = this.getBlocks(), + t = this.getOptions(), + r = this.hasAttribute("async") || this.plugins.length > 0; + try { + let i; + r ? (i = await me(n, t)) : (i = C(n, t)), + (this.contentElement.innerHTML = i); + } catch (i) { + console.error("Error rendering markdown preview:", i), + (this.contentElement.innerHTML = + '
    Error rendering content
    '); + } + } + updateStyles() { + let n = this.plugins.filter((t) => t.getCSS).map((t) => t.getCSS()).join(` + +`); + this.styleElement.textContent = ` +:host { + display: block; +} + +.markdown-preview-content { + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif; + font-size: 16px; + line-height: 1.6; +} + +.error { + color: #cf222e; + padding: 1rem; + background: #ffebe9; + border-radius: 6px; +} + +${n} + `.trim(); + } + }, + O = [], + q = "github"; +function Se(e) { + let n = e?.tagName || "markdown-preview", + t = e?.plugins || [], + r = e?.defaultTheme || "github"; + if (((O = t), (q = r), !customElements.get(n))) { + class i extends _ { + constructor() { + super(), this.setPlugins(O), this.setDefaultTheme(q); + } + } + customElements.define(n, i); + } +} +function Fe() { + typeof window < "u" && typeof customElements < "u" && Se(); +} +var Ue = "0.1.0"; +export { + _ as MarkdownPreviewElement, + Ue as VERSION, + Fe as autoRegister, + C as blocksToHTML, + Re as createMermaidPlugin, + He as createShikiPlugin, + Ne as getThemePath, + qe as markdownToHTML, + Ee as mermaidPlugin, + Se as registerPreviewElement, + me as renderAsync, + Te as shikiPlugin, + Ce as themes, +}; +//# sourceMappingURL=preview.bundle.mjs.map diff --git a/docs/assets/docs-chat-widget.js b/docs/assets/docs-chat-widget.js index 2a3544984d1..eb13c1ce8ce 100644 --- a/docs/assets/docs-chat-widget.js +++ b/docs/assets/docs-chat-widget.js @@ -3,9 +3,9 @@ const apiBase = window.DOCS_CHAT_API_URL || "http://localhost:3001"; - // Load @create-markdown/preview for markdown rendering + // Load vendored @create-markdown/preview@0.1.0 for markdown rendering let markdownToHTML = null; - import("https://esm.sh/@create-markdown/preview@0.1.0") + import("/assets/create-markdown-preview.js") .then((mod) => { markdownToHTML = mod.markdownToHTML; })