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...
259 lines (258 loc) • 7.06 kB
JavaScript
import { createVNode as t, defineComponent as k, h as I, inject as S, ref as r, shallowRef as O, reactive as E, computed as p, watch as x, nextTick as b, onMounted as W, Teleport as q } from "vue";
import { p as i, g as C } from "./config.mjs";
import { c as w } from "./index5.mjs";
import { k as z } from "./dom.mjs";
import { g as M } from "./vue-tsx.mjs";
import { Upload as N, Trash2 as D, X as U, SquareSigma as X, ChartArea as G, ListTree as Q, CodeXml as V, Eye as Z, View as J, Expand as K, Shrink as Y, Maximize2 as _, Minimize2 as ee, SquareCode as P, Save as te, Forward as oe, Reply as le, Table as ne, Image as ie, Link as se, Code as ae, ListTodo as ue, ListOrdered as de, List as re, Quote as ce, Superscript as me, Subscript as fe, Heading as he, Strikethrough as ve, Italic as ye, Underline as pe, Bold as ge } from "lucide-vue-next";
const Se = () => t("svg", {
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 24 24",
fill: "none",
stroke: "currentColor",
"stroke-width": "2",
"stroke-linecap": "round",
"stroke-linejoin": "round",
class: "lucide lucide-github-icon"
}, [t("path", {
d: "M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4"
}, null), t("path", {
d: "M9 18c-4.51 2-5-2-7-2"
}, null)]), ke = {
bold: ge,
underline: pe,
italic: ye,
"strike-through": ve,
title: he,
sub: fe,
sup: me,
quote: ce,
"unordered-list": re,
"ordered-list": de,
task: ue,
"code-row": ae,
code: P,
link: se,
image: ie,
table: ne,
revoke: le,
next: oe,
save: te,
prettier: P,
minimize: ee,
maximize: _,
"fullscreen-exit": Y,
fullscreen: K,
"preview-only": J,
preview: Z,
"preview-html": V,
catalog: Q,
github: Se,
mermaid: G,
formula: X,
close: U,
delete: D,
upload: N
}, xe = /* @__PURE__ */ k({
name: `${i}-icon-set`,
props: {
name: {
type: String,
default: ""
}
},
setup(e) {
return () => I(ke[e.name], {
class: `${i}-icon`
});
}
}), j = /* @__PURE__ */ k({
name: `${i}-icon`,
props: {
name: {
type: String,
default: ""
}
},
setup(e) {
const d = S("customIcon");
return () => {
const a = d.value[e.name];
return typeof a == "object" ? typeof a.component == "object" ? I(a.component, a.props) : t("span", {
innerHTML: a.component
}, null) : t(xe, {
name: e.name
}, null);
};
}
}), be = {
title: {
type: [String, Object],
default: ""
},
visible: {
type: Boolean,
default: !1
},
width: {
type: String,
default: "auto"
},
height: {
type: String,
default: "auto"
},
onClose: {
type: Function
},
showAdjust: {
type: Boolean,
default: !1
},
isFullscreen: {
type: Boolean,
default: !1
},
onAdjust: {
type: Function,
default: () => {
}
},
class: {
type: String,
default: void 0
},
style: {
type: [Object, String],
default: () => ({})
},
showMask: {
type: Boolean,
default: !0
}
}, g = /* @__PURE__ */ k({
name: "MdModal",
props: be,
emits: ["onClose"],
setup(e, d) {
const a = S("theme"), $ = S("rootRef"), m = r(e.visible), u = r([`${i}-modal`]), f = r(), h = r(), v = r(), F = O();
let c = () => {
};
const o = E({
maskStyle: {
zIndex: -1
},
modalStyle: {
zIndex: -1
},
initPos: {
left: "0px",
top: "0px"
},
historyPos: {
left: "0px",
top: "0px"
}
}), R = p(() => e.isFullscreen ? {
width: "100%",
height: "100%"
} : {
width: e.width,
height: e.height
});
x(() => e.isFullscreen, (l) => {
l ? c() : b(() => {
c = z(h.value, (n, s) => {
o.initPos.left = n + "px", o.initPos.top = s + "px";
});
});
}), x(() => e.visible, (l) => {
l ? (o.maskStyle.zIndex = C.editorConfig.zIndex + w(), o.modalStyle.zIndex = C.editorConfig.zIndex + w(), u.value.push("zoom-in"), m.value = l, b(() => {
const n = f.value.offsetWidth / 2, s = f.value.offsetHeight / 2, H = document.documentElement.clientWidth / 2, A = document.documentElement.clientHeight / 2;
o.initPos.left = H - n + "px", o.initPos.top = A - s + "px", e.isFullscreen || (c = z(h.value, (B, L) => {
o.initPos.left = B + "px", o.initPos.top = L + "px";
}));
}), setTimeout(() => {
u.value = u.value.filter((n) => n !== "zoom-in");
}, 140)) : (u.value.push("zoom-out"), c(), setTimeout(() => {
u.value = u.value.filter((n) => n !== "zoom-out"), m.value = l;
}, 130));
});
const y = p(() => ({
display: m.value ? "block" : "none"
})), T = p(() => {
if (typeof e.style == "string") {
const l = Object.entries(y.value).map(([n, s]) => `${n}: ${s}`).join("; ");
return [e.style, l].join("; ");
} else return e.style instanceof Object ? {
...y.value,
...e.style
} : y.value;
});
return W(() => {
const l = $.value?.getRootNode();
v.value = l instanceof Document ? document.body : l;
}), () => {
const l = M({
ctx: d
}), n = M({
props: e,
ctx: d
}, "title");
return v.value ? t(q, {
to: v.value
}, {
default: () => [t("div", {
ref: F,
class: `${i}-modal-container`,
"data-theme": a.value
}, [t("div", {
class: e.class,
style: T.value
}, [e.showMask && t("div", {
class: `${i}-modal-mask`,
style: o.maskStyle,
onClick: () => {
e.onClose?.(), d.emit("onClose");
}
}, null), t("div", {
class: u.value,
style: {
...o.modalStyle,
...o.initPos,
...R.value
},
ref: f
}, [t("div", {
class: `${i}-modal-header`,
ref: h
}, [n || ""]), t("div", {
class: `${i}-modal-body`
}, [l]), t("div", {
class: `${i}-modal-func`
}, [e.showAdjust && t("div", {
class: `${i}-modal-adjust`,
onClick: (s) => {
s.stopPropagation(), e.isFullscreen ? o.initPos = o.historyPos : (o.historyPos = o.initPos, o.initPos = {
left: "0",
top: "0"
}), e.onAdjust(!e.isFullscreen);
}
}, [t(j, {
name: e.isFullscreen ? "minimize" : "maximize"
}, null)]), t("div", {
class: `${i}-modal-close`,
onClick: (s) => {
s.stopPropagation(), e.onClose?.(), d.emit("onClose");
}
}, [t(j, {
name: "close"
}, null)])])])])])]
}) : "";
};
}
});
g.install = (e) => (e.component(g.name, g), e);
export {
j as I,
g as M
};