md-editor-v3
Version:
Markdown editor for vue3, developed in jsx and typescript, dark theme、beautify content by prettier、render articles directly、paste or clip the picture and upload it...
160 lines (159 loc) • 8.35 kB
JavaScript
import I from "@vavt/copy2clipboard";
import { p as i } from "./config.mjs";
const j = {
copy: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-copy ${i}-icon"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg>`,
"collapse-tips": `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-circle-chevron-left ${i}-icon"><circle cx="12" cy="12" r="10"/><path d="m14 16-4-4 4-4"/></svg>`,
pin: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-pin ${i}-icon"><path d="M12 17v5"/><path d="M9 10.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H8a2 2 0 0 0 0 4 1 1 0 0 1 1 1z"/></svg>`,
"pin-off": `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-pin-off ${i}-icon"><path d="M12 17v5"/><path d="M15 9.34V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H7.89"/><path d="m2 2 20 20"/><path d="M9 9v1.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h11"/></svg>`,
check: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check ${i}-icon"><path d="M20 6 9 17l-5-5"/></svg>`
}, p = (d, s) => typeof s[d] == "string" ? s[d] : j[d], z = (d, s) => {
const e = (c) => {
const t = d.parentElement || document.body, n = t.offsetWidth, r = t.offsetHeight, { clientWidth: l, clientHeight: u } = document.documentElement, a = c.offsetX, w = c.offsetY, g = (y) => {
let h = y.x + document.body.scrollLeft - document.body.clientLeft - a, m = y.y + document.body.scrollTop - document.body.clientTop - w;
h = h < 1 ? 1 : h < l - n - 1 ? h : l - n - 1, m = m < 1 ? 1 : m < u - r - 1 ? m : u - r - 1, s ? s(h, m) : (t.style.left = `${h}px`, t.style.top = `${m}px`);
};
document.addEventListener("mousemove", g);
const v = () => {
document.removeEventListener("mousemove", g), document.removeEventListener("mouseup", v);
};
document.addEventListener("mouseup", v);
};
return d.addEventListener("mousedown", e), () => {
d.removeEventListener("mousedown", e);
};
}, A = (d, s, e = "") => {
const c = document.getElementById(s.id);
if (c)
e !== "" && (Reflect.get(window, e) ? s.onload?.call(c, new Event("load")) : s.onload && c.addEventListener("load", s.onload));
else {
const t = { ...s };
t.onload = null;
const n = D(d, t);
s.onload && n.addEventListener("load", s.onload), document.head.appendChild(n);
}
}, b = (d, s) => {
document.getElementById(s.id)?.remove(), A(d, s);
}, D = (d, s) => {
const e = document.createElement(d);
return Object.keys(s).forEach((c) => {
s[c] !== void 0 && (e[c] = s[c]);
}), e;
}, V = (d, s) => {
const e = /* @__PURE__ */ new Map();
return d?.forEach((c) => {
let t = c.querySelector(`.${i}-mermaid-action`);
t ? t.querySelector(`.${i}-mermaid-copy`) || t.insertAdjacentHTML(
"beforeend",
`<span class="${i}-mermaid-copy">${p("copy", s.customIcon)}</span>`
) : (c.insertAdjacentHTML(
"beforeend",
`<div class="${i}-mermaid-action"><span class="${i}-mermaid-copy">${p("copy", s.customIcon)}</span></div>`
), t = c.querySelector(`.${i}-mermaid-action`));
const n = t.querySelector(`.${i}-mermaid-copy`);
let r = -1;
const l = () => {
clearTimeout(r), I(c.dataset.content || "").then(() => {
n.innerHTML = p("check", s.customIcon);
}).catch(() => {
n.innerHTML = p("copy", s.customIcon);
}).finally(() => {
r = window.setTimeout(() => {
n.innerHTML = p("copy", s.customIcon);
}, 1500);
});
};
n.addEventListener("click", l), e.set(c, {
removeClick: () => {
n.removeEventListener("click", l);
}
});
}), () => {
e.forEach(({ removeClick: c }) => {
c?.();
}), e.clear();
};
}, R = /* @__PURE__ */ (() => {
const d = (e) => {
if (!e)
return () => {
};
const c = e.firstChild;
let t = 1, n = 0, r = 0, l = !1, u, a, w, g = 1;
const v = () => {
c.style.transform = `translate(${n}px, ${r}px) scale(${t})`;
}, y = (o) => {
o.touches.length === 1 ? (l = !0, u = o.touches[0].clientX - n, a = o.touches[0].clientY - r) : o.touches.length === 2 && (w = Math.hypot(
o.touches[0].clientX - o.touches[1].clientX,
o.touches[0].clientY - o.touches[1].clientY
), g = t);
}, h = (o) => {
if (o.preventDefault(), l && o.touches.length === 1)
n = o.touches[0].clientX - u, r = o.touches[0].clientY - a, v();
else if (o.touches.length === 2) {
const E = Math.hypot(
o.touches[0].clientX - o.touches[1].clientX,
o.touches[0].clientY - o.touches[1].clientY
) / w, f = t;
t = g * (1 + (E - 1));
const M = (o.touches[0].clientX + o.touches[1].clientX) / 2, k = (o.touches[0].clientY + o.touches[1].clientY) / 2, H = c.getBoundingClientRect(), X = (M - H.left) / f, S = (k - H.top) / f;
n -= X * (t - f), r -= S * (t - f), v();
}
}, m = () => {
l = !1;
}, $ = (o) => {
o.preventDefault();
const L = 0.02, E = t;
o.deltaY < 0 ? t += L : t = Math.max(0.1, t - L);
const f = c.getBoundingClientRect(), M = o.clientX - f.left, k = o.clientY - f.top;
n -= M / E * (t - E), r -= k / E * (t - E), v();
}, x = (o) => {
l = !0, u = o.clientX - n, a = o.clientY - r;
}, C = (o) => {
l && (n = o.clientX - u, r = o.clientY - a, v());
}, T = () => {
l = !1;
}, Y = () => {
l = !1;
};
return e.addEventListener("touchstart", y, { passive: !1 }), e.addEventListener("touchmove", h, { passive: !1 }), e.addEventListener("touchend", m), e.addEventListener("wheel", $, { passive: !1 }), e.addEventListener("mousedown", x), e.addEventListener("mousemove", C), e.addEventListener("mouseup", T), e.addEventListener("mouseleave", Y), () => {
e.removeEventListener("touchstart", y), e.removeEventListener("touchmove", h), e.removeEventListener("touchend", m), e.removeEventListener("wheel", $), e.removeEventListener("mousedown", x), e.removeEventListener("mousemove", C), e.removeEventListener("mouseup", T), e.removeEventListener("mouseleave", Y);
};
};
return (e, c) => {
const t = /* @__PURE__ */ new Map();
return e?.forEach((n) => {
let r = n.querySelector(`.${i}-mermaid-action`);
r ? r.querySelector(`.${i}-mermaid-zoom`) || r.insertAdjacentHTML(
"beforeend",
`<span class="${i}-mermaid-zoom">${p("pin-off", c.customIcon)}</span>`
) : (n.insertAdjacentHTML(
"beforeend",
`<div class="${i}-mermaid-action"><span class="${i}-mermaid-zoom">${p("pin-off", c.customIcon)}</span></div>`
), r = n.querySelector(`.${i}-mermaid-action`));
const l = r.querySelector(`.${i}-mermaid-zoom`), u = () => {
const a = t.get(n);
if (a?.removeEvent)
a.removeEvent(), n.removeAttribute("data-grab"), t.set(n, { removeClick: a.removeClick }), l.innerHTML = p("pin-off", c.customIcon);
else {
const w = d(n);
n.setAttribute("data-grab", ""), t.set(n, { removeEvent: w, removeClick: a?.removeClick }), l.innerHTML = p("pin", c.customIcon);
}
};
l.addEventListener("click", u), t.set(n, {
removeClick: () => l.removeEventListener("click", u)
});
}), () => {
t.forEach(({ removeEvent: n, removeClick: r }) => {
n?.(), r?.();
}), t.clear();
};
};
})();
export {
p as S,
A as a,
V as c,
z as k,
b as u,
R as z
};