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