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...
216 lines (215 loc) • 6.81 kB
JavaScript
import { jsxs as m, jsx as n, Fragment as p } from "react/jsx-runtime";
import { createElement as H, useContext as M, useState as y, useRef as c, useMemo as T, useEffect as d } from "react";
import { createPortal as W } from "react-dom";
import { p as o, g as w } from "./config.mjs";
import { E as P } from "./context.mjs";
import { d as I } from "./index2.mjs";
import { k as A } from "./dom.mjs";
import { Upload as V, Trash2 as q, X as B, SquareSigma as U, ChartArea as X, ListTree as D, CodeXml as G, Eye as O, View as Q, Expand as Z, Shrink as J, Maximize2 as K, Minimize2 as Y, SquareCode as z, Save as _, Forward as ee, Reply as te, Table as ne, Image as oe, Link as ie, Code as le, ListTodo as se, ListOrdered as ae, List as re, Quote as ce, Superscript as de, Subscript as me, Heading as ue, Strikethrough as he, Italic as fe, Underline as ge, Bold as xe } from "lucide-react";
const ve = (e) => /* @__PURE__ */ m(
"svg",
{
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 24 24",
fill: "none",
stroke: "currentColor",
strokeWidth: "2",
strokeLinecap: "round",
strokeLinejoin: "round",
className: `lucide lucide-github-icon ${e.className}`,
children: [
/* @__PURE__ */ n("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" }),
/* @__PURE__ */ n("path", { d: "M9 18c-4.51 2-5-2-7-2" })
]
}
), ye = {
bold: xe,
underline: ge,
italic: fe,
"strike-through": he,
title: ue,
sub: me,
sup: de,
quote: ce,
"unordered-list": re,
"ordered-list": ae,
task: se,
"code-row": le,
code: z,
link: ie,
image: oe,
table: ne,
revoke: te,
next: ee,
save: _,
prettier: z,
minimize: Y,
maximize: K,
"fullscreen-exit": J,
fullscreen: Z,
"preview-only": Q,
preview: O,
"preview-html": G,
catalog: D,
github: ve,
mermaid: X,
formula: U,
close: B,
delete: q,
upload: V
}, Ce = (e) => H(ye[e.name], {
className: `${o}-icon`
}), N = (e) => {
const { customIcon: u } = M(P), l = u[e.name];
if (typeof l == "object") {
const s = l.component;
return typeof s == "function" ? /* @__PURE__ */ n(s, { ...l.props }) : /* @__PURE__ */ n(
"span",
{
dangerouslySetInnerHTML: {
__html: l.component
}
}
);
}
return /* @__PURE__ */ n(Ce, { name: e.name });
}, ke = `${o}-modal-container`, $e = (e) => {
const { theme: u, rootRef: l } = M(P), { onClose: s = () => {
}, onAdjust: C = () => {
}, style: $ = {}, showMask: F = !0 } = e, [h, k] = y(e.visible), [j, b] = y([`${o}-modal`]), f = c(null), S = c(null), a = c(null), E = c(null), [g, r] = y({
maskStyle: {
zIndex: -1
},
modalStyle: {
zIndex: -1
},
initPos: {
left: "0px",
top: "0px"
},
historyPos: {
left: "0px",
top: "0px"
}
}), L = T(() => e.isFullscreen ? {
width: "100%",
height: "100%"
} : {
width: e.width,
height: e.height
}, [e.height, e.isFullscreen, e.width]);
return d(() => {
const t = l?.current?.getRootNode();
return a.current = t instanceof Document ? document.body : t, () => {
a.current = null;
};
}, [l]), d(() => {
let t = () => {
};
return !e.isFullscreen && e.visible && (t = A(
S.current,
(i, x) => {
r((v) => ({
...v,
initPos: {
left: i + "px",
top: x + "px"
}
}));
}
)), t;
}, [e.isFullscreen, e.visible]), d(() => {
if (h) {
const t = f.current.offsetWidth / 2, i = f.current.offsetHeight / 2, x = document.documentElement.clientWidth / 2, v = document.documentElement.clientHeight / 2;
r((R) => ({
...R,
maskStyle: {
zIndex: w.editorConfig.zIndex + I()
},
modalStyle: {
zIndex: w.editorConfig.zIndex + I()
},
initPos: {
left: x - t + "px",
top: v - i + "px"
}
}));
}
}, [h]), d(() => {
const t = e.visible;
t ? (b(() => [`${o}-modal`, "zoom-in"]), k(t)) : (b(() => [`${o}-modal`, "zoom-out"]), setTimeout(() => {
k(t);
}, 150));
}, [e.visible]), /* @__PURE__ */ n(p, { children: a.current && W(
/* @__PURE__ */ n("div", { ref: E, className: ke, "data-theme": u, children: /* @__PURE__ */ m(
"div",
{
className: e.className,
style: { ...$, display: h ? "block" : "none" },
children: [
F && /* @__PURE__ */ n(
"div",
{
className: `${o}-modal-mask`,
style: g.maskStyle,
onClick: s
}
),
/* @__PURE__ */ m(
"div",
{
className: j.join(" "),
style: {
...g.modalStyle,
...g.initPos,
...L
},
ref: f,
children: [
/* @__PURE__ */ n("div", { className: `${o}-modal-header`, ref: S, children: e.title || "" }),
/* @__PURE__ */ m("div", { className: `${o}-modal-func`, children: [
e.showAdjust && /* @__PURE__ */ n(
"div",
{
className: `${o}-modal-adjust`,
onClick: (t) => {
t.stopPropagation(), e.isFullscreen ? r((i) => ({
...i,
initPos: i.historyPos
})) : r((i) => ({
...i,
historyPos: i.initPos,
initPos: {
left: "0",
top: "0"
}
})), C instanceof Function && C(!e.isFullscreen);
},
children: /* @__PURE__ */ n(N, { name: e.isFullscreen ? "minimize" : "maximize" })
}
),
/* @__PURE__ */ n(
"div",
{
className: `${o}-modal-close`,
onClick: (t) => {
t.stopPropagation(), e.onClose && e.onClose();
},
children: /* @__PURE__ */ n(N, { name: "close" })
}
)
] }),
/* @__PURE__ */ n("div", { className: `${o}-modal-body`, children: e.children })
]
}
)
]
}
) }),
a.current
) });
};
export {
N as I,
$e as M
};