md-editor-rt
Version:
Markdown editor for react, developed in jsx and typescript, dark theme、beautify content by prettier、render articles directly、paste or clip the picture and upload it...
1,134 lines (1,133 loc) • 35.4 kB
JavaScript
import { useId as je, useMemo as de, useState as F, useRef as M, useCallback as se, useEffect as v, useImperativeHandle as Ne, useContext as G } from "react";
import { b, B as Y, c as ue, U as $e, E as me, a as pe, P as ve, F as ke, h as ye, i as we, H as Ce, j as Ee, R as he, f as Fe, g as fe, C as Oe, k as ae, l as Ie, T as De } from "./event-name.mjs";
import { p, d as j, g as H, f as xe, s as Te } from "./config.mjs";
import { a as N, u as Ge, S as ze, z as Se } from "./dom.mjs";
import { jsx as Q, jsxs as Ue, Fragment as Ve } from "react/jsx-runtime";
import { E as z } from "./context.mjs";
import qe from "medium-zoom";
import We from "@vavt/copy2clipboard";
import Ke from "markdown-it";
import Ze from "markdown-it-image-figures";
import Je from "markdown-it-sub";
import Xe from "markdown-it-sup";
import { randomId as ge } from "@vavt/util";
import { g as Be, c as Ye } from "./index3.mjs";
import { LRUCache as Qe } from "lru-cache";
const R = {
hljs: `${p}-hljs`,
hlcss: `${p}-hlCss`,
prettier: `${p}-prettier`,
prettierMD: `${p}-prettierMD`,
cropperjs: `${p}-cropper`,
croppercss: `${p}-cropperCss`,
screenfull: `${p}-screenfull`,
mermaidM: `${p}-mermaid-m`,
mermaid: `${p}-mermaid`,
katexjs: `${p}-katex`,
katexcss: `${p}-katexCss`
}, Wt = (t, e) => {
const { value: s, modelValue: n, onSave: r } = t, { editorId: d } = e, [o, u] = F({
// 是否已编译成html
buildFinished: !1,
// 存储当前最新的html
html: ""
});
v(() => {
const c = (m) => {
u(() => ({
buildFinished: !0,
html: m
}));
};
return b.on(d, {
name: Y,
callback: c
}), () => {
b.remove(d, Y, c);
};
}, [d]), v(() => {
const c = () => {
if (r) {
const m = new Promise((l) => {
if (o.buildFinished)
l(o.html);
else {
const i = (a) => {
l(a), b.remove(d, Y, i);
};
b.on(d, {
name: Y,
callback: i
});
}
});
r(s || n || "", m);
}
};
return b.on(d, {
name: ue,
callback: c
}), () => {
b.remove(d, ue, c);
};
}, [d, n, r, o.buildFinished, o.html, s]), v(() => {
u((c) => ({
...c,
buildFinished: !1
}));
}, [s, n]);
}, Kt = (t) => {
const { noPrettier: e, noUploadImg: s } = t;
v(() => {
const { editorExtensions: n, editorExtensionsAttrs: r } = H, d = e || !!n.prettier.prettierInstance, o = e || !!n.prettier.parserMarkdownInstance;
if (!(s || !!n.cropper.instance)) {
const { js: c = {}, css: m = {} } = r.cropper || {};
N("link", {
...m,
rel: "stylesheet",
href: n.cropper.css,
id: R.croppercss
}), N("script", {
...c,
src: n.cropper.js,
id: R.cropperjs
});
}
if (!d) {
const { standaloneJs: c = {} } = r.prettier || {};
N("script", {
...c,
src: n.prettier.standaloneJs,
id: R.prettier
});
}
if (!o) {
const { parserMarkdownJs: c = {} } = r.prettier || {};
N("script", {
...c,
src: n.prettier.parserMarkdownJs,
id: R.prettierMD
});
}
}, [e, s]);
}, Zt = (t, e) => {
v(() => (b.on(t, {
name: me,
callback: e
}), () => {
b.remove(t, me, e);
}), [t, e]);
}, Jt = (t, e) => {
const { editorId: s } = e, { onUploadImg: n } = t;
v(() => {
const r = (d, o) => {
const u = (c) => {
b.emit(s, he, "image", {
desc: "",
urls: c
}), o == null || o();
};
n == null || n(d, u);
};
return b.on(s, {
name: $e,
callback: r
}), () => {
b.remove(s, $e, r);
};
}, [s, n]);
}, Xt = (t, e) => {
const { editorId: s } = e, [n, r] = F(!1);
return v(() => {
const d = (o) => {
r(o === void 0 ? (u) => !u : o);
};
return b.on(s, {
name: pe,
callback: d
}), () => {
b.remove(s, pe, d);
};
}, [s]), n;
};
let Ae = "";
const Bt = (t) => {
const {
theme: e = j.theme,
preview: s = j.preview,
htmlPreview: n = j.htmlPreview,
pageFullscreen: r = j.pageFullscreen,
previewTheme: d = j.previewTheme,
codeTheme: o = j.codeTheme,
language: u = j.language,
codeStyleReverse: c = j.codeStyleReverse,
codeStyleReverseList: m = j.codeStyleReverseList
} = t, l = de(() => {
const g = H.editorExtensions.highlight, k = H.editorExtensionsAttrs.highlight, { js: y } = g, C = {
...xe,
...g.css
}, { js: w, css: E = {} } = k || {}, T = c && m.includes(d) ? "dark" : e, _ = C[o] ? C[o][T] : xe.atom[T], x = C[o] && E[o] ? E[o][T] : E.atom ? E.atom[T] : {};
return {
js: {
src: y,
...w
},
css: {
href: _,
...x
}
};
}, [c, m, d, e, o]), i = de(() => {
const g = {
...Te,
...H.editorConfig.languageUserDefined
};
return g[u] ? g[u] : Te["zh-CN"];
}, [u]), [a, h] = F({
pageFullscreen: r,
fullscreen: !1,
preview: s,
htmlPreview: s ? !1 : n,
previewOnly: !1
}), f = M(a), $ = se((g, k) => {
h((y) => {
const C = k === void 0 ? !y[g] : k, w = {
...y
};
switch (g) {
case "preview": {
w.htmlPreview = !1, w.previewOnly = !1;
break;
}
case "htmlPreview": {
w.preview = !1, w.previewOnly = !1;
break;
}
case "previewOnly": {
C ? !w.preview && !w.htmlPreview && (w.preview = !0) : (f.current.preview || (w.preview = !1), f.current.htmlPreview || (w.htmlPreview = !1));
break;
}
}
return f.current[g] = C, w[g] = C, w;
});
}, []);
return v(() => {
Ae = document.body.style.overflow;
}, []), v(() => {
a.pageFullscreen || a.fullscreen ? document.body.style.overflow = "hidden" : document.body.style.overflow = Ae;
}, [a.pageFullscreen, a.fullscreen]), [l, i, a, $];
}, Yt = (t, e, s, n, r, d) => {
const { editorId: o } = e;
v(() => {
b.emit(o, ve, n.pageFullscreen);
}, [o, n.pageFullscreen]), v(() => {
b.emit(o, ke, n.fullscreen);
}, [o, n.fullscreen]), v(() => {
b.emit(o, ye, n.preview);
}, [o, n.preview]), v(() => {
b.emit(o, we, n.previewOnly);
}, [o, n.previewOnly]), v(() => {
b.emit(o, Ce, n.htmlPreview);
}, [o, n.htmlPreview]), v(() => {
b.emit(o, Ee, s);
}, [s, o]), Ne(t, () => ({
on(c, m) {
switch (c) {
case "pageFullscreen": {
b.on(o, {
name: ve,
callback(l) {
m(l);
}
});
break;
}
case "fullscreen": {
b.on(o, {
name: ke,
callback(l) {
m(l);
}
});
break;
}
case "preview": {
b.on(o, {
name: ye,
callback(l) {
m(l);
}
});
break;
}
case "previewOnly": {
b.on(o, {
name: we,
callback(l) {
m(l);
}
});
break;
}
case "htmlPreview": {
b.on(o, {
name: Ce,
callback(l) {
m(l);
}
});
break;
}
case "catalog": {
b.on(o, {
name: Ee,
callback(l) {
m(l);
}
});
break;
}
}
},
togglePageFullscreen(c) {
r("pageFullscreen", c);
},
toggleFullscreen(c) {
b.emit(o, Oe, c);
},
togglePreview(c) {
r("preview", c);
},
togglePreviewOnly(c) {
r("previewOnly", c);
},
toggleHtmlPreview(c) {
r("htmlPreview", c);
},
toggleCatalog(c) {
b.emit(o, pe, c);
},
triggerSave() {
b.emit(o, ue);
},
insert(c) {
b.emit(o, he, "universal", { generate: c });
},
focus(c) {
var m;
(m = d.current) == null || m.focus(c);
},
rerender() {
b.emit(o, fe);
},
getSelectedText() {
var c;
return (c = d.current) == null ? void 0 : c.getSelectedText();
},
resetHistory() {
var c;
(c = d.current) == null || c.resetHistory();
},
domEventHandlers(c) {
b.emit(o, Fe, c);
},
execCommand(c) {
b.emit(o, he, c);
},
getEditorView() {
var c;
return (c = d.current) == null ? void 0 : c.getEditorView();
}
}), [d, o, r]);
}, Qt = (t) => {
const e = je();
return t.id || t.editorId || p + "-" + e.replaceAll(":", "");
}, et = (t, e) => {
const { editorId: s } = G(z);
v(() => t.noImgZoomIn ? void 0 : (() => {
const r = document.querySelectorAll(
`#${s}-preview img:not(.not-zoom):not(.medium-zoom-image)`
), d = qe(r, {
background: "#00000073"
});
return () => {
d.detach();
};
})(), [s, e, t.noImgZoomIn, t.setting]);
}, tt = (t, e, s) => {
const { editorId: n, usedLanguageText: r, customIcon: d, rootRef: o } = G(z), { formatCopiedText: u = (c) => c } = t;
v(() => {
var c;
t.setting.preview && ((c = o.current) == null || c.querySelectorAll(`#${n} .${p}-preview .${p}-code`).forEach((m) => {
let l = -1;
const i = m.querySelector(
`.${p}-copy-button`
);
i && (i.onclick = (a) => {
a.preventDefault(), clearTimeout(l);
const f = (m.querySelector("input:checked + pre code") || m.querySelector("pre code")).textContent, { text: $, successTips: g, failTips: k } = r.copyCode;
let y = g;
We(u(f)).catch(() => {
y = k;
}).finally(() => {
i.dataset.isIcon ? i.dataset.tips = y : i.innerHTML = y, l = window.setTimeout(() => {
i.dataset.isIcon ? i.dataset.tips = $ : i.innerHTML = $;
}, 1500);
});
});
}));
}, [
d,
n,
u,
e,
s,
t.setting.preview,
o,
r.copyCode
]);
}, rt = (t) => {
const { highlight: e } = G(z), s = M(H.editorExtensions.highlight.instance), [n, r] = F(!!s.current);
return v(() => {
t.noHighlight || H.editorExtensions.highlight.instance || Ge("link", {
...e.css,
rel: "stylesheet",
id: R.hlcss
});
}, [e.css, t.noHighlight]), v(() => {
t.noHighlight || s.current || N(
"script",
{
...e.js,
id: R.hljs,
onload() {
s.current = window.hljs, r(!0);
}
},
"hljs"
);
}, []), { hljsRef: s, hljsInited: n };
}, ne = new Qe({
max: 1e3,
// 缓存10分钟
ttl: 6e5
}), nt = (t) => {
const { editorId: e, theme: s, rootRef: n } = G(z), { noMermaid: r, sanitizeMermaid: d } = t, o = M(H.editorExtensions.mermaid.instance), [u, c] = F(-1), m = se(() => {
ne.clear();
const i = o.current;
!r && i && (i.initialize(
H.mermaidConfig({
startOnLoad: !1,
theme: s === "dark" ? "dark" : "default"
})
), c((a) => a + 1));
}, [r, s]);
v(m, [m]), v(() => {
var f, $;
const { editorExtensions: i, editorExtensionsAttrs: a } = H;
if (r || o.current)
return;
const h = i.mermaid.js;
/\.mjs/.test(h) ? (N("link", {
...(f = a.mermaid) == null ? void 0 : f.js,
rel: "modulepreload",
href: h,
id: R.mermaidM
}), import(
/* @vite-ignore */
/* webpackIgnore: true */
h
).then((g) => {
o.current = g.default, m();
})) : N(
"script",
{
...($ = a.mermaid) == null ? void 0 : $.js,
src: h,
id: R.mermaid,
onload() {
o.current = window.mermaid, m();
}
},
"mermaid"
);
}, [m, r]);
const l = se(async () => {
var i;
if (!r && o.current) {
const a = ((i = n.current) == null ? void 0 : i.querySelectorAll(`div.${p}-mermaid`)) || [], h = document.createElement("div"), f = document.body.offsetWidth > 1366 ? document.body.offsetWidth : 1366, $ = document.body.offsetHeight > 768 ? document.body.offsetHeight : 768;
h.style.width = f + "px", h.style.height = $ + "px", h.style.position = "fixed", h.style.zIndex = "-10000", h.style.top = "-10000";
let g = a.length;
g > 0 && document.body.appendChild(h), await Promise.allSettled(
Array.from(a).map((k) => (async (C) => {
var T;
const w = C.innerText;
let E = ne.get(w);
if (!E) {
const _ = ge();
let x = { svg: "" };
try {
x = await o.current.render(
_,
w,
h
), E = await d(x.svg);
const S = document.createElement("p");
S.className = `${p}-mermaid`, S.setAttribute("data-processed", ""), S.innerHTML = E, (T = S.children[0]) == null || T.removeAttribute("height"), ne.set(w, S.innerHTML), C.dataset.line !== void 0 && (S.dataset.line = C.dataset.line), C.replaceWith(S);
} catch (S) {
b.emit(e, me, {
name: "mermaid",
message: S.message,
error: S
});
}
--g === 0 && h.remove();
}
})(k))
);
}
}, [r, n, d]);
return { reRender: u, replaceMermaid: l };
}, st = (t) => {
const e = M(H.editorExtensions.katex.instance), [s, n] = F(!!e.current);
return v(() => {
if (t.noKatex || e.current)
return;
const { editorExtensions: r } = H;
N(
"script",
{
src: r.katex.js,
id: R.katexjs,
onload() {
e.current = window.katex, n(!0);
}
},
"katex"
), N("link", {
rel: "stylesheet",
href: r.katex.css,
id: R.katexcss
});
}, [t.noKatex]), { katexRef: e, katexInited: s };
}, ot = (t, e) => {
const s = t.renderer.rules.fence.bind(t.renderer.rules);
t.renderer.rules.fence = (n, r, d, o, u) => {
const c = n[r], m = c.content.trim();
if (c.info === "mermaid") {
let l;
n[r].map && n[r].level === 0 && (l = n[r].map[0], n[r].attrSet("data-line", String(l)));
const i = ne.get(m);
return i ? `<p class="${p}-mermaid" ${l !== void 0 ? "data-line=" + l : ""} data-processed>${i}</p>` : `<div class="${p}-mermaid" ${l !== void 0 ? "data-line=" + l : ""} data-mermaid-theme=${e.themeRef.current}>${t.utils.escapeHtml(m)}</div>`;
}
return s(n, r, d, o, u);
};
}, oe = (t, e) => {
const s = t.attrs ? t.attrs.slice() : [];
return e.forEach((n) => {
const r = t.attrIndex(n[0]);
r < 0 ? s.push(n) : (s[r] = s[r].slice(), s[r][1] += ` ${n[1]}`);
}), s;
}, He = {
block: [
{ open: "$$", close: "$$" },
{ open: "\\[", close: "\\]" }
],
inline: [
{ open: "$$", close: "$$" },
{ open: "$", close: "$" },
{ open: "\\[", close: "\\]" },
{ open: "\\(", close: "\\)" }
]
}, it = (t) => (e, s) => {
const n = t.delimiters;
let r, d, o;
for (const u of n)
if (e.src.startsWith(u.open, e.pos)) {
const c = e.pos + u.open.length;
for (r = c; (r = e.src.indexOf(u.close, r)) !== -1; ) {
for (o = r - 1; e.src[o] === "\\"; )
o -= 1;
if ((r - o) % 2 === 1)
break;
r += u.close.length;
}
if (r === -1)
return s || (e.pending += u.open), e.pos = c, !0;
if (r - c === 0)
return s || (e.pending += u.open + u.close), e.pos = c + u.close.length, !0;
if (!s) {
const m = e.src.slice(c, r);
d = e.push("math_inline", "math", 0), d.markup = u.open, d.content = m;
}
return e.pos = r + u.close.length, !0;
}
return !1;
}, ct = (t) => (e, s, n, r) => {
const d = t.delimiters;
let o, u, c, m, l = !1, i = e.bMarks[s] + e.tShift[s], a = e.eMarks[s];
for (const h of d)
if (e.src.slice(i, i + h.open.length) === h.open && e.src.slice(a - h.close.length, a) === h.close) {
if (i += h.open.length, o = e.src.slice(i, a), r)
return !0;
for (o.trim().slice(-h.close.length) === h.close && (o = o.trim().slice(0, -h.close.length), l = !0), c = s; !l && (c++, !(c >= n || (i = e.bMarks[c] + e.tShift[c], a = e.eMarks[c], i < a && e.tShift[c] < e.blkIndent))); )
e.src.slice(i, a).trim().slice(-h.close.length) === h.close && (m = e.src.slice(0, a).lastIndexOf(h.close), u = e.src.slice(i, m), l = !0);
e.line = c + 1;
const f = e.push("math_block", "math", 0);
return f.block = !0, f.content = (o && o.trim() ? o + `
` : "") + e.getLines(s + 1, c, e.tShift[s], !0) + (u && u.trim() ? u : ""), f.map = [s, e.line], f.markup = h.open, !0;
}
return !1;
}, lt = (t, { katexRef: e, inlineDelimiters: s, blockDelimiters: n }) => {
const r = (o, u, c, m, l) => {
const i = o[u], a = {
attrs: oe(i, [["class", `${p}-katex-inline`]])
};
if (e.current) {
const h = e.current.renderToString(
i.content,
H.katexConfig({
throwOnError: !1
})
);
return `<span ${l.renderAttrs(a)} data-processed>${h}</span>`;
} else
return `<span ${l.renderAttrs(a)}>${i.content}</span>`;
}, d = (o, u, c, m, l) => {
const i = o[u], a = {
attrs: oe(i, [["class", `${p}-katex-block`]])
};
if (e.current) {
const h = e.current.renderToString(
i.content,
H.katexConfig({
throwOnError: !1,
displayMode: !0
})
);
return `<p ${l.renderAttrs(a)} data-processed>${h}</p>`;
} else
return `<p ${l.renderAttrs(a)}>${i.content}</p>`;
};
t.inline.ruler.before(
"escape",
"math_inline",
it({
delimiters: s || He.inline
})
), t.block.ruler.after(
"blockquote",
"math_block",
ct({
delimiters: n || He.block
}),
{
alt: ["paragraph", "reference", "blockquote", "list"]
}
), t.renderer.rules.math_inline = r, t.renderer.rules.math_block = d;
}, at = (t, e) => {
e = e || {};
const s = 3, n = e.marker || "!", r = n.charCodeAt(0), d = n.length;
let o = "", u = "";
const c = (l, i, a, h, f) => {
const $ = l[i];
return $.type === "admonition_open" ? l[i].attrPush([
"class",
`${p}-admonition ${p}-admonition-${$.info}`
]) : $.type === "admonition_title_open" && l[i].attrPush(["class", `${p}-admonition-title`]), f.renderToken(l, i, a);
}, m = (l) => {
const i = l.trim().split(" ", 2);
u = "", o = i[0], i.length > 1 && (u = l.substring(o.length + 2));
};
t.block.ruler.before(
"code",
"admonition",
(l, i, a, h) => {
let f, $, g, k = !1, y = l.bMarks[i] + l.tShift[i], C = l.eMarks[i];
if (r !== l.src.charCodeAt(y))
return !1;
for (f = y + 1; f <= C && n[(f - y) % d] === l.src[f]; f++)
;
const w = Math.floor((f - y) / d);
if (w !== s)
return !1;
f -= (f - y) % d;
const E = l.src.slice(y, f), T = l.src.slice(f, C);
if (m(T), h)
return !0;
for ($ = i; $++, !($ >= a || (y = l.bMarks[$] + l.tShift[$], C = l.eMarks[$], y < C && l.sCount[$] < l.blkIndent)); )
if (r === l.src.charCodeAt(y) && !(l.sCount[$] - l.blkIndent >= 4)) {
for (f = y + 1; f <= C && n[(f - y) % d] === l.src[f]; f++)
;
if (!(Math.floor((f - y) / d) < w) && (f -= (f - y) % d, f = l.skipSpaces(f), !(f < C))) {
k = !0;
break;
}
}
const _ = l.parentType, x = l.lineMax;
return l.parentType = "root", l.lineMax = $, g = l.push("admonition_open", "div", 1), g.markup = E, g.block = !0, g.info = o, g.map = [i, $], u && (g = l.push("admonition_title_open", "p", 1), g.markup = E + " " + o, g.map = [i, $], g = l.push("inline", "", 0), g.content = u, g.map = [i, l.line - 1], g.children = [], g = l.push("admonition_title_close", "p", -1), g.markup = E + " " + o), l.md.block.tokenize(l, i + 1, $), g = l.push("admonition_close", "div", -1), g.markup = l.src.slice(y, f), g.block = !0, l.parentType = _, l.lineMax = x, l.line = $ + (k ? 1 : 0), !0;
},
{
alt: ["paragraph", "reference", "blockquote", "list"]
}
), t.renderer.rules.admonition_open = c, t.renderer.rules.admonition_title_open = c, t.renderer.rules.admonition_title_close = c, t.renderer.rules.admonition_close = c;
}, dt = (t, e) => {
t.renderer.rules.heading_open = (s, n) => {
var u;
const r = s[n], d = ((u = s[n + 1].children) == null ? void 0 : u.reduce((c, m) => c + (["text", "code_inline", "math_inline"].includes(m.type) && m.content || ""), "")) || "", o = r.markup.length;
return e.headsRef.current.push({
text: d,
level: o,
line: r.map[0]
}), r.map && r.level === 0 && r.attrSet(
"id",
e.mdHeadingId(d, o, e.headsRef.current.length)
), t.renderer.renderToken(s, n, e);
}, t.renderer.rules.heading_close = (s, n, r, d, o) => o.renderToken(s, n, r);
}, ut = (t, e) => {
const s = t.renderer.rules.fence, n = t.utils.unescapeAll, r = /\[(\w*)(?::([\w ]*))?\]/, d = /::(open|close)/, o = (i) => i.info ? n(i.info).trim() : "", u = (i) => {
const a = o(i), [h = null, f = ""] = (r.exec(a) || []).slice(1);
return [h, f];
}, c = (i) => {
const a = o(i);
return a ? a.split(/(\s+)/g)[0] : "";
}, m = (i) => {
const a = i.info.match(d) || [], h = a[1] === "open" || a[1] !== "close" && e.codeFoldable && i.content.trim().split(`
`).length < e.autoFoldThreshold, f = a[1] || e.codeFoldable ? "details" : "div", $ = a[1] || e.codeFoldable ? "summary" : "div";
return { open: h, tagContainer: f, tagHeader: $ };
}, l = (i, a, h, f, $) => {
if (i[a].hidden)
return "";
const g = e.usedLanguageTextRef.current.copyCode.text, k = e.customIconRef.current.copy || g, y = !!e.customIconRef.current.copy, C = `<span class="${p}-collapse-tips">${ze("collapse-tips", e.customIconRef.current)}</span>`, [w] = u(i[a]);
if (w === null) {
const { open: A, tagContainer: P, tagHeader: K } = m(i[a]), te = [["class", `${p}-code`]];
A && te.push(["open", ""]);
const V = {
attrs: oe(i[a], te)
};
i[a].info = i[a].info.replace(d, "");
const ce = s(i, a, h, f, $);
return `
<${P} ${$.renderAttrs(V)}>
<${K} class="${p}-code-head">
<div class="${p}-code-flag"><span></span><span></span><span></span></div>
<div class="${p}-code-action">
<span class="${p}-code-lang">${i[a].info.trim()}</span>
<span class="${p}-copy-button" data-tips="${g}"${y ? " data-is-icon=true" : ""}>${k}</span>
${e.extraTools instanceof Function ? e.extraTools({ lang: i[a].info.trim() }) : e.extraTools || ""}
${P === "details" ? C : ""}
</div>
</${K}>
${ce}
</${P}>
`;
}
let E, T, _, x, S = "", Z = "", U = "";
const { open: q, tagContainer: W, tagHeader: ee } = m(i[a]), J = [["class", `${p}-code`]];
q && J.push(["open", ""]);
const ie = {
attrs: oe(i[a], J)
};
for (let A = a; A < i.length && (E = i[A], [T, _] = u(E), T === w); A++) {
E.info = E.info.replace(r, "").replace(d, ""), E.hidden = !0;
const P = `${p}-codetab-${e.editorId}-${a}-${A - a}`;
x = A - a > 0 ? "" : "checked", S += `
<li>
<input
type="radio"
id="label-${p}-codetab-label-1-${e.editorId}-${a}-${A - a}"
name="${p}-codetab-label-${e.editorId}-${a}"
class="${P}"
${x}
>
<label
for="label-${p}-codetab-label-1-${e.editorId}-${a}-${A - a}"
onclick="this.getRootNode().querySelectorAll('.${P}').forEach(e => e.click())"
>
${_ || c(E)}
</label>
</li>`, Z += `
<div role="tabpanel">
<input
type="radio"
name="${p}-codetab-pre-${e.editorId}-${a}"
class="${P}"
${x}
role="presentation">
${s(i, A, h, f, $)}
</div>`, U += `
<input
type="radio"
name="${p}-codetab-lang-${e.editorId}-${a}"
class="${P}"
${x}
role="presentation">
<span class=${p}-code-lang role="note">${c(E)}</span>`;
}
return `
<${W} ${$.renderAttrs(ie)}>
<${ee} class="${p}-code-head">
<div class="${p}-code-flag">
<ul class="${p}-codetab-label" role="tablist">${S}</ul>
</div>
<div class="${p}-code-action">
<span class="${p}-codetab-lang">${U}</span>
<span class="${p}-copy-button" data-tips="${g}"${y ? " data-is-icon=true" : ""}>${k}</span>
${e.extraTools instanceof Function ? e.extraTools({ lang: i[a].info.trim() }) : e.extraTools || ""}
${W === "details" ? C : ""}
</div>
</${ee}>
${Z}
</${W}>
`;
};
t.renderer.rules.fence = l, t.renderer.rules.code_block = l;
}, _e = (t, e, s) => {
const n = t.attrIndex(e), r = [e, s];
n < 0 ? t.attrPush(r) : (t.attrs = t.attrs || [], t.attrs[n] = r);
}, mt = (t) => t.type === "inline", pt = (t) => t.type === "paragraph_open", ht = (t) => t.type === "list_item_open", ft = (t) => t.content.indexOf("[ ] ") === 0 || t.content.indexOf("[x] ") === 0 || t.content.indexOf("[X] ") === 0, gt = (t, e) => mt(t[e]) && pt(t[e - 1]) && ht(t[e - 2]) && ft(t[e]), bt = (t, e) => {
const s = t[e].level - 1;
for (let n = e - 1; n >= 0; n--)
if (t[n].level === s)
return n;
return -1;
}, $t = (t) => {
const e = new t("html_inline", "", 0);
return e.content = "<label>", e;
}, vt = (t) => {
const e = new t("html_inline", "", 0);
return e.content = "</label>", e;
}, kt = (t, e, s) => {
const n = new s("html_inline", "", 0);
return n.content = '<label class="task-list-item-label" for="' + e + '">' + t + "</label>", n.attrs = [{ for: e }], n;
}, yt = (t, e, s) => {
const n = new e("html_inline", "", 0), r = s.enabled ? " " : ' disabled="" ';
return t.content.indexOf("[ ] ") === 0 ? n.content = '<input class="task-list-item-checkbox"' + r + 'type="checkbox">' : (t.content.indexOf("[x] ") === 0 || t.content.indexOf("[X] ") === 0) && (n.content = '<input class="task-list-item-checkbox" checked=""' + r + 'type="checkbox">'), n;
}, wt = (t, e, s) => {
if (t.children = t.children || [], t.children.unshift(yt(t, e, s)), t.children[1].content = t.children[1].content.slice(3), t.content = t.content.slice(3), s.label)
if (s.labelAfter) {
t.children.pop();
const n = "task-item-" + Math.ceil(Math.random() * (1e4 * 1e3) - 1e3);
t.children[0].content = t.children[0].content.slice(0, -1) + ' id="' + n + '">', t.children.push(kt(t.content, n, e));
} else
t.children.unshift($t(e)), t.children.push(vt(e));
}, Ct = (t, e = {}) => {
t.core.ruler.after("inline", "github-task-lists", (s) => {
const n = s.tokens;
for (let r = 2; r < n.length; r++)
gt(n, r) && (wt(n[r], s.Token, e), _e(
n[r - 2],
"class",
"task-list-item" + (e.enabled ? " enabled" : " ")
), _e(n[bt(n, r - 2)], "class", "contains-task-list"));
});
}, Et = (t) => {
t.core.ruler.push("init-line-number", (e) => (e.tokens.forEach((s) => {
s.map && (s.attrs || (s.attrs = []), s.attrs.push(["data-line", s.map[0].toString()]));
}), !0));
}, It = (t, e) => {
const {
modelValue: s,
sanitize: n,
mdHeadingId: r,
codeFoldable: d,
autoFoldThreshold: o,
noKatex: u,
noMermaid: c,
noHighlight: m,
setting: l,
onHtmlChanged: i,
onGetCatalog: a
} = t, { editorConfig: h, markdownItConfig: f, markdownItPlugins: $, editorExtensions: g } = H, {
editorId: k,
language: y,
showCodeRowNumber: C,
theme: w,
usedLanguageText: E,
customIcon: T,
rootRef: _
} = G(z), x = M([]), S = M(w);
v(() => {
S.current = w;
}, [w]);
const Z = M(E);
v(() => {
Z.current = E;
}, [E]);
const U = M(T);
v(() => {
U.current = T;
}, [T]);
const { hljsRef: q, hljsInited: W } = rt(t), { katexRef: ee, katexInited: J } = st(t), { reRender: ie, replaceMermaid: A } = nt(t), [P] = F(() => {
const I = Ke({
html: !0,
breaks: !0,
linkify: !0
});
f(I, {
editorId: k
});
const L = [
{
type: "image",
plugin: Ze,
options: { figcaption: !0, classes: "md-zoom" }
},
{
type: "admonition",
plugin: at,
options: {}
},
{
type: "taskList",
plugin: Ct,
options: {}
},
{
type: "heading",
plugin: dt,
options: { mdHeadingId: r, headsRef: x }
},
{
type: "code",
plugin: ut,
options: {
editorId: k,
usedLanguageTextRef: Z,
// showCodeRowNumber,
codeFoldable: d,
autoFoldThreshold: o,
customIconRef: U
}
},
{
type: "sub",
plugin: Je,
options: {}
},
{
type: "sup",
plugin: Xe,
options: {}
}
];
u || L.push({
type: "katex",
plugin: lt,
options: { katexRef: ee }
}), c || L.push({
type: "mermaid",
plugin: ot,
options: { themeRef: S }
}), $(L, {
editorId: k
}).forEach((D) => {
I.use(D.plugin, D.options);
});
const O = I.options.highlight;
return I.set({
highlight: (D, X, Re) => {
if (O) {
const le = O(D, X, Re);
if (le)
return le;
}
let B;
!m && q.current ? q.current.getLanguage(X) ? B = q.current.highlight(D, {
language: X,
ignoreIllegals: !0
}).value : B = q.current.highlightAuto(D).value : B = P.utils.escapeHtml(D);
const Le = C ? Be(
B.replace(/^\n+|\n+$/g, ""),
D.replace(/^\n+|\n+$/g, "")
) : `<span class="${p}-code-block">${B.replace(/^\n+|\n+$/g, "")}</span>`;
return `<pre><code class="language-${X}" language=${X}>${Le}</code></pre>`;
}
}), Et(I), I;
}), [K, te] = F(`_article-key_${ge()}`), [V, ce] = F(() => (x.current = [], n(P.render(s)))), Me = de(() => (m || W) && (u || J), [W, J, m, u]), be = M(!0), re = se(() => {
x.current = [];
const I = n(P.render(s));
ce(I);
}, [P, s, n]);
return v(() => {
b.emit(k, Y, V), i == null || i(V), a == null || a(x.current), b.emit(k, ae, x.current);
}, [k, V, K, a, i]), v(() => {
let I = () => {
};
return l.preview && (A().then(() => {
var L, O;
(L = g.mermaid) != null && L.enableZoom && (I(), I = Se(
(O = _.current) == null ? void 0 : O.querySelectorAll(`#${k} .${p}-mermaid`),
{
customIcon: U.current
}
));
}), b.emit(k, ae, x.current)), () => {
I();
};
}, [k, A, _, l.preview]), v(() => {
if (be.current) {
be.current = !1;
return;
}
const I = setTimeout(
() => {
re();
},
e ? 0 : h.renderDelay
);
return () => {
clearTimeout(I);
};
}, [Me, w, re, y, e, h.renderDelay]), v(() => {
let I = () => {
};
return A().then(() => {
var L, O;
(L = g.mermaid) != null && L.enableZoom && (I(), I = Se(
(O = _.current) == null ? void 0 : O.querySelectorAll(`#${k} p.${p}-mermaid`),
{
customIcon: U.current
}
));
}), () => {
I();
};
}, [k, V, K, ie, A, _]), v(() => {
const I = () => {
b.emit(k, ae, x.current);
};
return b.on(k, {
name: Ie,
callback: I
}), () => {
b.remove(k, Ie, I);
};
}, [k]), v(() => {
const I = () => {
te(`_article-key_${ge()}`), re();
};
return b.on(k, {
name: fe,
callback: I
}), () => {
b.remove(k, fe, I);
};
}, [k, re]), { html: V, key: K };
}, Pe = {
checked: {
regexp: /- \[x\]/,
value: "- [ ]"
},
unChecked: {
regexp: /- \[\s\]/,
value: "- [x]"
}
}, xt = (t, e) => {
const { editorId: s, rootRef: n } = G(z);
v(() => {
var o;
const r = ((o = n.current) == null ? void 0 : o.querySelectorAll(".task-list-item.enabled")) || [], d = (u) => {
var h;
u.preventDefault();
const c = u.target.checked ? "unChecked" : "checked", m = (h = u.target.parentElement) == null ? void 0 : h.dataset.line;
if (!m)
return;
const l = Number(m), i = t.modelValue.split(`
`), a = i[Number(l)].replace(
Pe[c].regexp,
Pe[c].value
);
t.previewOnly ? (i[Number(l)] = a, t.onChange(i.join(`
`))) : b.emit(s, De, l + 1, a);
};
return r.forEach((u) => {
u.addEventListener("click", d);
}), () => {
r.forEach((u) => {
u.removeEventListener("click", d);
});
};
}, [s, e, t, n]);
}, Tt = (t, e, s) => {
const { setting: n, onRemount: r } = t;
v(() => {
r == null || r();
}, [e, s, r]), v(() => {
(n.preview || n.htmlPreview) && (r == null || r());
}, [n.preview, n.htmlPreview, r]);
}, St = (t) => {
const s = new DOMParser().parseFromString(t, "text/html");
return Array.from(s.body.childNodes);
}, At = (t, e) => {
const s = [], n = [];
if (t.forEach((r, d) => {
const o = e[d];
if (!o) {
s.push({ index: d, newNode: r });
return;
}
(r.nodeType !== o.nodeType || r.textContent !== o.textContent || r.nodeType === 1 && r.outerHTML !== o.outerHTML) && s.push({ index: d, newNode: r });
}), e.length > t.length)
for (let r = t.length; r < e.length; r++)
n.push(e[r]);
return { updates: s, deletes: n };
}, Ht = ({ html: t }) => {
const { editorId: e, previewTheme: s, showCodeRowNumber: n } = G(z), r = M({ __html: t }), d = M(null);
return v(() => {
if (!d.current) return;
const o = St(t), u = Array.from(d.current.childNodes || []), { updates: c, deletes: m } = At(o, u);
m.forEach((l) => {
l.remove();
}), c.forEach(({ index: l, newNode: i }) => {
const a = d.current.childNodes[l];
a ? d.current.replaceChild(i.cloneNode(!0), a) : d.current.appendChild(i.cloneNode(!0));
});
}, [t]), /* @__PURE__ */ Q(
"div",
{
id: `${e}-preview`,
className: Ye([
`${p}-preview`,
`${s}-theme`,
n && `${p}-scrn`
]),
dangerouslySetInnerHTML: r.current,
ref: d
}
);
}, er = (t) => {
const { previewOnly: e = !1 } = t, { editorId: s } = G(z), { html: n, key: r } = It(t, !!e);
return tt(t, n, r), et(t, n), xt(t, n), Tt(t, n, r), /* @__PURE__ */ Ue(Ve, { children: [
t.setting.preview && /* @__PURE__ */ Q(
"div",
{
id: `${s}-preview-wrapper`,
className: `${p}-preview-wrapper`,
children: /* @__PURE__ */ Q(Ht, { html: n }, r)
},
"content-preview-wrapper"
),
!e && t.setting.htmlPreview && /* @__PURE__ */ Q(
"div",
{
id: `${s}-html-wrapper`,
className: `${p}-preview-wrapper`,
children: /* @__PURE__ */ Q("div", { className: `${p}-html`, children: n })
},
"html-preview-wrapper"
)
] });
};
export {
R as C,
er as a,
Wt as b,
Kt as c,
Jt as d,
Zt as e,
Xt as f,
Bt as g,
Yt as h,
Qt as u
};