advanced-editor-react
Version:
A modern WYSIWYG rich text editor based on tiptap and shadcn ui for React
1,203 lines • 405 kB
JavaScript
var Ji = Object.defineProperty;
var Qi = (e, t, n) => t in e ? Ji(e, t, { enumerable: !0, configurable: !0, writable: !0, value: n }) : e[t] = n;
var me = (e, t, n) => Qi(e, typeof t != "symbol" ? t + "" : t, n);
import { jsxs as m, jsx as r, Fragment as K } from "react/jsx-runtime";
import * as $ from "react";
import St, { useState as _, useRef as J, useEffect as H, useCallback as M, useMemo as D, Fragment as st, forwardRef as Lt, useImperativeHandle as Mt } from "react";
import "@radix-ui/react-toast";
import { ChevronRight as er, Check as an, Circle as tr, ChevronDown as lt, ChevronUp as Qn, HelpCircle as ei, Pencil as ti, Trash2 as ni, X as nr, Plus as ii, FlipHorizontal as ir, FlipVertical as rr, CropIcon as ar, Paperclip as or, Eye as cr, Settings as sr, ZoomOut as lr, ZoomIn as dr, BookMarked as hr, Sigma as ur, SmilePlusIcon as mr, Replace as An, SmilePlus as fr, Frame as gr, Columns2 as Sn, PanelRight as xr, PanelLeft as pr, Clipboard as br, Copy as ri, GripVertical as wr, Columns4 as _r, Columns3 as vr, Heading6 as yr, Heading5 as kr, Heading4 as Cr, Heading3 as Nr, Heading2 as Tr, Heading1 as Ar, ChevronsUpDown as Sr, Trash as Lr, TableCellsSplit as Mr, TableCellsMerge as Ir, BetweenVerticalEnd as zr, BetweenVerticalStart as Er, BetweenHorizonalStart as Hr, BetweenHorizonalEnd as Rr, Unlink as Or, Sparkles as ai, Table as Pr, Minimize as Dr, Maximize as Br, Video as $r, ImageUp as jr, Link as Fr, ListTodo as Vr, ListOrdered as Ur, List as Wr, IndentDecrease as Gr, IndentIncrease as qr, Type as Kr, CodeXml as Xr, Code as Zr, Superscript as Yr, Subscript as Jr, Undo2 as Qr, Redo2 as ea, PaintRoller as ta, Eraser as na, Minus as ia, Strikethrough as ra, Brain as oi, Quote as aa, Underline as oa, Italic as ca, LoaderCircle as sa, SparklesIcon as la, Bold as da, Zap as ha, Edit3 as ua, CopyCheck as ma, Clock3 as fa, Laugh as ga, LucideTableProperties as xa, LucideSheet as pa, LucideImage as ba, LucideFile as wa, LucideVideo as _a, LucideAudioLines as va } from "lucide-react";
import { B as le, N as ie, a as de, n as on, R as ge, m as ne, u as ya, E as ka, i as Ca, b as Na, c as Ta, d as Y, I as Aa, U as Sa, S as La, C as Ma, f as at, e as Ia, g as za, F as Ea, H as Ha, T as Ra, h as Oa, j as Pa, k as Da, O as Ba, l as $a, o as ja, p as Fa, L as Va, q as Ua, r as Wa, s as Ga, D as qa, t as Ct, P as Ka, v as Xa, w as Za, G as Ya, x as Ja, y as Qa, z as eo, A as to, J as no, K as io, M as ci, Q as si, V as li, W as cn, X as sn, Y as ro, Z as ao, _ as oo, $ as co, a0 as so, a1 as Ln } from "./tiptap-88pCIW-2.js";
import { aj as lo, ak as ee, al as ln, am as dn, an as ho, ao as di, ap as uo, aq as Le, H as It, T as Me, A as hi, ar as mo, as as fo, at as hn, au as go, P as we, b as _e, $ as Ve, a0 as We, N as xo, av as Nt, aw as ui, a4 as po } from "./vendor-Bl3sK4kL.js";
import { bundledThemes as mi, bundledLanguages as fi, createHighlighter as bo } from "shiki";
import { u as j, C as wo, E as _o, l as F, B as vo, I as Tt, V as qt, M as yo, D as gi, a as ko, b as Co, c as Mn, d as xi, e as No, f as Ge, g as un, h as qe, T as xt, i as pt, j as bt } from "./locales-LgNERLfg.js";
import * as Z from "@radix-ui/react-select";
import { Slot as mn } from "@radix-ui/react-slot";
import fn, { sticky as To } from "tippy.js";
import { flushSync as Ke } from "react-dom";
import Ao from "react-image-crop";
import { proxy as zt, useSnapshot as Et } from "valtio";
import * as Kt from "@radix-ui/react-checkbox";
import gn from "scroll-into-view-if-needed";
import * as Ie from "@radix-ui/react-tabs";
import { DocxSerializer as So, defaultNodes as Ne, defaultMarks as Lo } from "prosemirror-docx";
import { Packer as Mo } from "docx";
import At from "mermaid";
import * as ae from "@radix-ui/react-dialog";
import xn from "katex";
import * as ot from "@radix-ui/react-popover";
import * as pi from "@radix-ui/react-label";
import { Resizable as bi } from "re-resizable";
import * as wi from "@radix-ui/react-separator";
import { HexColorPicker as Io } from "react-colorful";
import { TextAlignRightIcon as zo, TextAlignLeftIcon as Eo, TextAlignJustifyIcon as Ho, TextAlignCenterIcon as Ro } from "@radix-ui/react-icons";
import * as Xt from "@radix-ui/react-switch";
import * as U from "@radix-ui/react-dropdown-menu";
import * as dt from "@radix-ui/react-tooltip";
import * as _i from "@radix-ui/react-toggle";
let Bt;
function $t() {
return Bt === void 0 && (Bt = navigator.platform.includes("Mac")), Bt;
}
function Ht(e) {
return `${e}`.toLowerCase() === "mod" ? $t() ? "⌘" : "Ctrl" : `${e}`.toLowerCase() === "alt" ? $t() ? "⌥" : "Alt" : `${e}`.toLowerCase() === "shift" ? $t() ? "⇧" : "Shift" : e;
}
function Rt(e) {
return e.map(Ht).join(" ");
}
function P(...e) {
return lo(ee(e));
}
const v = St.forwardRef(
(e, t) => {
const {
icon: n = void 0,
// title = undefined,
tooltip: i = void 0,
disabled: a = !1,
customClass: o = "",
// color = undefined,
// loading = false,
shortcutKeys: c = void 0,
tooltipOptions: s = {},
action: d = void 0,
isActive: l = void 0,
children: h,
asChild: u = !1,
upload: f = !1,
...g
} = e, x = gt[n];
return /* @__PURE__ */ m(Je, { children: [
/* @__PURE__ */ r(Qe, { asChild: !0, children: /* @__PURE__ */ m(
u ? mn : ft,
{
ref: t,
size: "sm",
className: P("richtext-w-[32px] richtext-h-[32px]", o),
disabled: a,
onClick: d,
"data-state": l != null && l() ? "on" : "off",
...g,
children: [
x && /* @__PURE__ */ r(x, { className: "richtext-w-4 richtext-h-4" }),
h
]
}
) }),
i && /* @__PURE__ */ r(Ee, { ...s, children: /* @__PURE__ */ m("div", { className: "richtext-flex richtext-flex-col richtext-items-center richtext-text-center richtext-max-w-24", children: [
/* @__PURE__ */ r("div", { children: i }),
!!(c != null && c.length) && /* @__PURE__ */ r("span", { children: Rt(c) })
] }) })
] });
}
), pn = St.forwardRef(
({ asChild: e, ...t }, n) => {
var o;
const i = gt[t.icon];
return /* @__PURE__ */ m(Je, { children: [
/* @__PURE__ */ r(Qe, { asChild: !0, children: /* @__PURE__ */ r(
e ? mn : W,
{
ref: n,
className: "richtext-h-[32px] richtext-px-[5px] richtext-py-0 richtext-min-w-24 richtext-overflow-hidden",
variant: "ghost",
disabled: t == null ? void 0 : t.disabled,
...t,
children: /* @__PURE__ */ m("div", { className: "richtext-flex richtext-items-center richtext-h-full richtext-font-normal", children: [
(t == null ? void 0 : t.title) && /* @__PURE__ */ r("div", { className: "richtext-flex-grow richtext-text-sm richtext-text-left richtext-truncate", children: t == null ? void 0 : t.title }),
i && /* @__PURE__ */ r(i, { className: "richtext-flex-shrink-0 richtext-w-3 richtext-h-3 richtext-ml-1 richtext-text-zinc-500" })
] })
}
) }),
/* @__PURE__ */ r(Ee, { children: /* @__PURE__ */ m("div", { className: "richtext-flex richtext-flex-col richtext-items-center richtext-text-center richtext-max-w-24", children: [
(t == null ? void 0 : t.tooltip) && /* @__PURE__ */ r("div", { children: t == null ? void 0 : t.tooltip }),
/* @__PURE__ */ r("div", { className: "richtext-flex", children: !!((o = t == null ? void 0 : t.shortcutKeys) != null && o.length) && /* @__PURE__ */ r("span", { children: Rt(t == null ? void 0 : t.shortcutKeys) }) })
] }) })
] });
}
);
function ht(e, t) {
const { state: n } = t, i = n.selection.$anchor;
let a = !1;
if (i.depth)
for (let o = i.depth; o > 0; o--)
i.node(o).type.name === e && (t.dispatchTransaction && t.dispatchTransaction(n.tr.delete(i.before(o), i.after(o)).scrollIntoView()), a = !0);
else {
const o = n.selection.node;
o && o.type.name === e && (t.chain().deleteSelection().run(), a = !0);
}
if (!a) {
const o = i.pos;
if (o) {
const c = n.tr.doc.nodeAt(o);
c && c.type.name === e && (t.dispatchTransaction && t.dispatchTransaction(n.tr.delete(o, o + c.nodeSize)), a = !0);
}
}
return a;
}
function Oo(e) {
return e;
}
function ut(e, t, n, i) {
const a = Oo, [o, c] = _(a(n)), s = J(o);
return H(() => {
const d = () => {
const l = { ...n, ...e.getAttributes(t) };
Object.keys(l).forEach((u) => {
(l[u] === null || l[u] === void 0) && (l[u] = n ? n[u] : null);
});
const h = a(l);
ln(s.current, h) || (c(h), s.current = h);
};
return e.on("selectionUpdate", d), e.on("transaction", d), () => {
e.off("selectionUpdate", d), e.off("transaction", d);
};
}, [e, n, t, a]), o;
}
const mt = $.forwardRef(
({ className: e, ...t }, n) => /* @__PURE__ */ r(
"textarea",
{
className: P(
"richtext-flex richtext-min-h-[80px] richtext-w-full richtext-rounded-md !richtext-border richtext-border-input richtext-bg-background richtext-px-3 richtext-py-2 richtext-text-sm richtext-ring-offset-background placeholder:richtext-text-muted-foreground focus-visible:richtext-outline-none focus-visible:richtext-ring-2 focus-visible:richtext-ring-ring focus-visible:richtext-ring-offset-2 disabled:richtext-cursor-not-allowed disabled:richtext-opacity-50",
e
),
ref: n,
...t
}
)
);
mt.displayName = "Textarea";
const Po = dn(
"richtext-inline-flex richtext-items-center richtext-justify-center richtext-whitespace-nowrap richtext-rounded-md richtext-text-sm richtext-font-medium richtext-ring-offset-background richtext-transition-colors focus-visible:richtext-outline-none focus-visible:richtext-ring-2 focus-visible:richtext-ring-ring focus-visible:richtext-ring-offset-2 disabled:richtext-pointer-events-none disabled:richtext-opacity-50",
{
variants: {
variant: {
default: "!richtext-bg-primary !richtext-text-primary-foreground hover:!richtext-bg-primary/90",
destructive: "richtext-bg-destructive richtext-text-destructive-foreground hover:richtext-bg-destructive/90",
outline: "richtext-border richtext-border-input richtext-bg-background hover:richtext-bg-accent hover:richtext-text-accent-foreground",
secondary: "richtext-bg-secondary richtext-text-secondary-foreground hover:richtext-bg-secondary/80",
ghost: "hover:richtext-bg-accent hover:richtext-text-accent-foreground",
link: "richtext-text-primary richtext-underline-offset-4 hover:richtext-underline"
},
size: {
default: "richtext-h-10 richtext-px-4 richtext-py-2",
sm: "richtext-h-9 richtext-rounded-md richtext-px-3",
lg: "richtext-h-11 richtext-rounded-md richtext-px-8",
icon: "richtext-h-10 richtext-w-10"
}
},
defaultVariants: {
variant: "default",
size: "default"
}
}
), W = $.forwardRef(
({ className: e, variant: t, size: n, asChild: i = !1, ...a }, o) => /* @__PURE__ */ r(
i ? mn : "button",
{
className: P(Po({ variant: t, size: n, className: e })),
ref: o,
...a
}
)
);
W.displayName = "Button";
const ve = U.Root, ye = U.Trigger, In = U.Portal, zn = U.Sub, Zt = $.forwardRef(({ className: e, inset: t, children: n, ...i }, a) => /* @__PURE__ */ m(
U.SubTrigger,
{
ref: a,
className: P(
"richtext-flex richtext-cursor-default richtext-select-none richtext-items-center richtext-rounded-sm richtext-px-2 richtext-py-1.5 richtext-text-sm richtext-outline-none focus:richtext-bg-accent data-[state=open]:richtext-bg-accent",
t && "richtext-pl-8",
e
),
...i,
children: [
n,
/* @__PURE__ */ r(er, { className: "richtext-ml-auto richtext-h-4 richtext-w-4" })
]
}
));
Zt.displayName = U.SubTrigger.displayName;
const Yt = $.forwardRef(({ className: e, ...t }, n) => /* @__PURE__ */ r(
U.SubContent,
{
ref: n,
className: P(
"richtext-z-50 richtext-min-w-[8rem] richtext-overflow-hidden richtext-rounded-md !richtext-border richtext-bg-popover richtext-p-1 richtext-text-popover-foreground richtext-shadow-lg data-[state=open]:richtext-animate-in data-[state=closed]:richtext-animate-out data-[state=closed]:richtext-fade-out-0 data-[state=open]:richtext-fade-in-0 data-[state=closed]:richtext-zoom-out-95 data-[state=open]:richtext-zoom-in-95 data-[side=bottom]:richtext-slide-in-from-top-2 data-[side=left]:richtext-slide-in-from-right-2 data-[side=right]:richtext-slide-in-from-left-2 data-[side=top]:richtext-slide-in-from-bottom-2",
e
),
...t
}
));
Yt.displayName = U.SubContent.displayName;
const pe = $.forwardRef(({ className: e, sideOffset: t = 4, ...n }, i) => /* @__PURE__ */ r(U.Portal, { children: /* @__PURE__ */ r(
U.Content,
{
ref: i,
sideOffset: t,
className: P(
"richtext-z-50 richtext-min-w-[8rem] richtext-overflow-hidden richtext-rounded-md !richtext-border richtext-bg-popover richtext-p-1 richtext-text-popover-foreground richtext-shadow-md data-[state=open]:richtext-animate-in data-[state=closed]:richtext-animate-out data-[state=closed]:richtext-fade-out-0 data-[state=open]:richtext-fade-in-0 data-[state=closed]:richtext-zoom-out-95 data-[state=open]:richtext-zoom-in-95 data-[side=bottom]:richtext-slide-in-from-top-2 data-[side=left]:richtext-slide-in-from-right-2 data-[side=right]:richtext-slide-in-from-left-2 data-[side=top]:richtext-slide-in-from-bottom-2",
e
),
...n
}
) }));
pe.displayName = U.Content.displayName;
const ce = $.forwardRef(({ className: e, inset: t, ...n }, i) => /* @__PURE__ */ r(
U.Item,
{
ref: i,
className: P(
"richtext-relative richtext-flex richtext-cursor-default richtext-select-none richtext-items-center richtext-rounded-sm richtext-px-2 richtext-py-1.5 richtext-text-sm richtext-outline-none richtext-transition-colors focus:richtext-bg-accent focus:richtext-text-accent-foreground data-[disabled]:richtext-pointer-events-none data-[disabled]:richtext-opacity-50",
t && "richtext-pl-8",
e
),
...n
}
));
ce.displayName = U.Item.displayName;
const ze = $.forwardRef(({ className: e, children: t, checked: n, ...i }, a) => /* @__PURE__ */ m(
U.CheckboxItem,
{
ref: a,
className: P(
"richtext-relative richtext-flex richtext-cursor-default richtext-select-none richtext-items-center richtext-rounded-sm richtext-py-1.5 richtext-pl-8 richtext-pr-2 richtext-text-sm richtext-outline-none richtext-transition-colors focus:richtext-bg-accent focus:richtext-text-accent-foreground data-[disabled]:richtext-pointer-events-none data-[disabled]:richtext-opacity-50",
e
),
checked: n,
...i,
children: [
/* @__PURE__ */ r("span", { className: "richtext-absolute richtext-left-2 richtext-flex richtext-h-3.5 richtext-w-3.5 richtext-items-center richtext-justify-center", children: /* @__PURE__ */ r(U.ItemIndicator, { children: /* @__PURE__ */ r(an, { className: "richtext-h-4 richtext-w-4" }) }) }),
t
]
}
));
ze.displayName = U.CheckboxItem.displayName;
const Do = $.forwardRef(({ className: e, children: t, ...n }, i) => /* @__PURE__ */ m(
U.RadioItem,
{
ref: i,
className: P(
"richtext-relative richtext-flex richtext-cursor-default richtext-select-none richtext-items-center richtext-rounded-sm richtext-py-1.5 richtext-pl-8 richtext-pr-2 richtext-text-sm richtext-outline-none richtext-transition-colors focus:richtext-bg-accent focus:richtext-text-accent-foreground data-[disabled]:richtext-pointer-events-none data-[disabled]:richtext-opacity-50",
e
),
...n,
children: [
/* @__PURE__ */ r("span", { className: "richtext-absolute richtext-left-2 richtext-flex richtext-h-3.5 richtext-w-3.5 richtext-items-center richtext-justify-center", children: /* @__PURE__ */ r(U.ItemIndicator, { children: /* @__PURE__ */ r(tr, { className: "richtext-h-2 richtext-w-2 richtext-fill-current" }) }) }),
t
]
}
));
Do.displayName = U.RadioItem.displayName;
const Bo = $.forwardRef(({ className: e, inset: t, ...n }, i) => /* @__PURE__ */ r(
U.Label,
{
ref: i,
className: P(
"richtext-px-2 richtext-py-1.5 richtext-text-sm richtext-font-semibold",
t && "richtext-pl-8",
e
),
...n
}
));
Bo.displayName = U.Label.displayName;
const Ot = $.forwardRef(({ className: e, ...t }, n) => /* @__PURE__ */ r(
U.Separator,
{
ref: n,
className: P("richtext--mx-1 richtext-my-1 richtext-h-px richtext-bg-muted", e),
...t
}
));
Ot.displayName = U.Separator.displayName;
function vi({
className: e,
...t
}) {
return /* @__PURE__ */ r(
"span",
{
className: P("richtext-ml-auto richtext-text-xs richtext-tracking-widest richtext-opacity-60", e),
...t
}
);
}
vi.displayName = "DropdownMenuShortcut";
const te = $.forwardRef(
({ className: e, type: t, ...n }, i) => /* @__PURE__ */ r(
"input",
{
type: t,
className: P(
"richtext-flex richtext-h-10 richtext-w-full richtext-rounded-md !richtext-border richtext-border-input richtext-bg-background richtext-px-3 richtext-py-2 richtext-text-sm richtext-ring-offset-background file:richtext-border-0 file:richtext-bg-transparent file:richtext-text-sm file:richtext-font-medium placeholder:richtext-text-muted-foreground focus-visible:richtext-outline-none disabled:richtext-cursor-not-allowed disabled:richtext-opacity-50",
e
),
ref: i,
...n
}
)
);
te.displayName = "Input";
const $o = dn(
"richtext-text-sm richtext-font-medium richtext-leading-none peer-disabled:richtext-cursor-not-allowed peer-disabled:richtext-opacity-70"
), re = $.forwardRef(({ className: e, ...t }, n) => /* @__PURE__ */ r(
pi.Root,
{
ref: n,
className: P($o(), e),
...t
}
));
re.displayName = pi.Root.displayName;
const he = ot.Root, ue = ot.Trigger, oe = $.forwardRef(({ className: e, align: t = "center", sideOffset: n = 4, ...i }, a) => /* @__PURE__ */ r(ot.Portal, { children: /* @__PURE__ */ r(
ot.Content,
{
ref: a,
align: t,
sideOffset: n,
className: P(
"richtext-z-50 richtext-w-72 richtext-rounded-md !richtext-border richtext-bg-popover richtext-p-4 richtext-text-popover-foreground richtext-shadow-md richtext-outline-none data-[state=open]:richtext-animate-in data-[state=closed]:richtext-animate-out data-[state=closed]:richtext-fade-out-0 data-[state=open]:richtext-fade-in-0 data-[state=closed]:richtext-zoom-out-95 data-[state=open]:richtext-zoom-in-95 data-[side=bottom]:richtext-slide-in-from-top-2 data-[side=left]:richtext-slide-in-from-right-2 data-[side=right]:richtext-slide-in-from-left-2 data-[side=top]:richtext-slide-in-from-bottom-2",
e
),
...i
}
) }));
oe.displayName = ot.Content.displayName;
const se = $.forwardRef(
({ className: e, orientation: t = "horizontal", decorative: n = !0, ...i }, a) => /* @__PURE__ */ r(
wi.Root,
{
ref: a,
decorative: n,
orientation: t,
className: P(
"richtext-shrink-0 richtext-bg-border",
t === "horizontal" ? "richtext-h-[1px] richtext-w-full" : "richtext-h-full richtext-w-[1px]",
e
),
...i
}
)
);
se.displayName = wi.Root.displayName;
const bn = $.forwardRef(({ className: e, ...t }, n) => /* @__PURE__ */ r(
Xt.Root,
{
className: P(
"richtext-peer richtext-inline-flex richtext-h-6 richtext-w-11 richtext-shrink-0 richtext-cursor-pointer richtext-items-center richtext-rounded-full richtext-border-2 richtext-border-transparent richtext-transition-colors focus-visible:richtext-outline-none focus-visible:richtext-ring-2 focus-visible:richtext-ring-ring focus-visible:richtext-ring-offset-2 focus-visible:richtext-ring-offset-background disabled:richtext-cursor-not-allowed disabled:richtext-opacity-50 data-[state=checked]:richtext-bg-primary data-[state=unchecked]:richtext-bg-input",
e
),
...t,
ref: n,
children: /* @__PURE__ */ r(
Xt.Thumb,
{
className: P(
"richtext-pointer-events-none richtext-block richtext-h-5 richtext-w-5 richtext-rounded-full richtext-bg-background richtext-shadow-lg richtext-ring-0 richtext-transition-transform data-[state=checked]:richtext-translate-x-5 data-[state=unchecked]:richtext-translate-x-0"
)
}
)
}
));
bn.displayName = Xt.Root.displayName;
const wn = Ie.Root, Pt = $.forwardRef(({ className: e, ...t }, n) => /* @__PURE__ */ r(
Ie.List,
{
ref: n,
className: P(
"richtext-inline-flex richtext-h-10 richtext-items-center richtext-justify-center richtext-rounded-md richtext-bg-muted richtext-p-1 richtext-text-muted-foreground",
e
),
...t
}
));
Pt.displayName = Ie.List.displayName;
const Xe = $.forwardRef(({ className: e, ...t }, n) => /* @__PURE__ */ r(
Ie.Trigger,
{
ref: n,
className: P(
"richtext-inline-flex richtext-items-center richtext-justify-center richtext-whitespace-nowrap richtext-rounded-sm richtext-px-3 richtext-py-1.5 richtext-text-sm richtext-font-medium richtext-ring-offset-background richtext-transition-all focus-visible:richtext-outline-none focus-visible:richtext-ring-2 focus-visible:richtext-ring-ring focus-visible:richtext-ring-offset-2 disabled:richtext-pointer-events-none disabled:richtext-opacity-50 data-[state=active]:richtext-bg-background data-[state=active]:richtext-text-foreground data-[state=active]:richtext-shadow-sm",
e
),
...t
}
));
Xe.displayName = Ie.Trigger.displayName;
const Ze = $.forwardRef(({ className: e, ...t }, n) => /* @__PURE__ */ r(
Ie.Content,
{
ref: n,
className: P(
"richtext-mt-2 richtext-ring-offset-background focus-visible:richtext-outline-none focus-visible:richtext-ring-2 focus-visible:richtext-ring-ring focus-visible:richtext-ring-offset-2",
e
),
...t
}
));
Ze.displayName = Ie.Content.displayName;
const jo = dn(
"richtext-inline-flex richtext-items-center richtext-justify-center richtext-rounded-md richtext-text-sm richtext-font-medium richtext-ring-offset-background richtext-transition-colors hover:richtext-bg-muted hover:richtext-text-muted-foreground focus-visible:richtext-outline-none focus-visible:richtext-ring-2 focus-visible:richtext-ring-ring focus-visible:richtext-ring-offset-2 disabled:richtext-pointer-events-none disabled:richtext-opacity-50 data-[state=on]:richtext-bg-accent data-[state=on]:richtext-text-accent-foreground",
{
variants: {
variant: {
default: "richtext-bg-transparent",
outline: "richtext-border richtext-border-input richtext-bg-transparent hover:richtext-bg-accent hover:richtext-text-accent-foreground"
},
size: {
default: "richtext-h-10 richtext-px-3",
sm: "richtext-h-9 richtext-px-2",
lg: "richtext-h-11 richtext-px-5"
}
},
defaultVariants: {
variant: "default",
size: "default"
}
}
), ft = $.forwardRef(({ className: e, variant: t, size: n, ...i }, a) => /* @__PURE__ */ r(
_i.Root,
{
ref: a,
className: P(jo({ variant: t, size: n, className: e })),
...i
}
));
ft.displayName = _i.Root.displayName;
const Fo = dt.Provider, Je = dt.Root, Qe = dt.Trigger, Ee = $.forwardRef(({ className: e, sideOffset: t = 4, ...n }, i) => /* @__PURE__ */ r(
dt.Content,
{
ref: i,
sideOffset: t,
className: P(
"richtext-z-50 richtext-overflow-hidden richtext-rounded-md !richtext-border richtext-bg-popover richtext-px-3 richtext-py-1.5 richtext-text-sm richtext-text-popover-foreground richtext-shadow-md richtext-animate-in richtext-fade-in-0 richtext-zoom-in-95 data-[side=bottom]:richtext-slide-in-from-top-2 data-[side=left]:richtext-slide-in-from-right-2 data-[side=right]:richtext-slide-in-from-left-2 data-[side=top]:richtext-slide-in-from-bottom-2",
e
),
...n
}
));
Ee.displayName = dt.Content.displayName;
const Vo = Z.Root, Uo = Z.Value, yi = $.forwardRef(({ className: e, children: t, ...n }, i) => /* @__PURE__ */ m(
Z.Trigger,
{
ref: i,
className: P(
"richtext-flex richtext-h-10 richtext-w-full richtext-items-center richtext-justify-between richtext-rounded-md richtext-border richtext-border-input richtext-bg-background richtext-px-3 richtext-py-2 richtext-text-sm richtext-ring-offset-background placeholder:richtext-text-muted-foreground focus:richtext-outline-none focus:richtext-ring-2 focus:richtext-ring-ring focus:richtext-ring-offset-2 disabled:richtext-cursor-not-allowed disabled:richtext-opacity-50 [&>span]:richtext-line-clamp-1",
e
),
...n,
children: [
t,
/* @__PURE__ */ r(Z.Icon, { asChild: !0, children: /* @__PURE__ */ r(lt, { className: "richtext-h-4 richtext-w-4 richtext-opacity-50" }) })
]
}
));
yi.displayName = Z.Trigger.displayName;
const ki = $.forwardRef(({ className: e, ...t }, n) => /* @__PURE__ */ r(
Z.ScrollUpButton,
{
ref: n,
className: P(
"richtext-flex richtext-cursor-default richtext-items-center richtext-justify-center richtext-py-1",
e
),
...t,
children: /* @__PURE__ */ r(Qn, { className: "richtext-h-4 richtext-w-4" })
}
));
ki.displayName = Z.ScrollUpButton.displayName;
const Ci = $.forwardRef(({ className: e, ...t }, n) => /* @__PURE__ */ r(
Z.ScrollDownButton,
{
ref: n,
className: P(
"richtext-flex richtext-cursor-default richtext-items-center richtext-justify-center richtext-py-1",
e
),
...t,
children: /* @__PURE__ */ r(lt, { className: "richtext-h-4 richtext-w-4" })
}
));
Ci.displayName = Z.ScrollDownButton.displayName;
const Ni = $.forwardRef(({ className: e, children: t, position: n = "popper", ...i }, a) => /* @__PURE__ */ r(Z.Portal, { children: /* @__PURE__ */ m(
Z.Content,
{
ref: a,
className: P(
"richtext-relative richtext-z-50 richtext-max-h-60 richtext-overflow-y-auto richtext-min-w-[8rem] richtext-overflow-hidden richtext-rounded-md richtext-border richtext-bg-popover richtext-text-popover-foreground richtext-shadow-md data-[state=open]:richtext-animate-in data-[state=closed]:richtext-animate-out data-[state=closed]:richtext-fade-out-0 data-[state=open]:richtext-fade-in-0 data-[state=closed]:richtext-zoom-out-95 data-[state=open]:richtext-zoom-in-95 data-[side=bottom]:richtext-slide-in-from-top-2 data-[side=left]:richtext-slide-in-from-right-2 data-[side=right]:richtext-slide-in-from-left-2 data-[side=top]:richtext-slide-in-from-bottom-2",
n === "popper" && "data-[side=bottom]:richtext-translate-y-1 data-[side=left]:richtext--translate-x-1 data-[side=right]:richtext-translate-x-1 data-[side=top]:richtext--translate-y-1",
e
),
position: n,
...i,
children: [
/* @__PURE__ */ r(ki, {}),
/* @__PURE__ */ r(
Z.Viewport,
{
className: P(
"richtext-p-1",
n === "popper" && "richtext-h-[var(--radix-select-trigger-height)] richtext-w-full richtext-min-w-[var(--radix-select-trigger-width)]"
),
children: t
}
),
/* @__PURE__ */ r(Ci, {})
]
}
) }));
Ni.displayName = Z.Content.displayName;
const Wo = $.forwardRef(({ className: e, ...t }, n) => /* @__PURE__ */ r(
Z.Label,
{
ref: n,
className: P("richtext-py-1.5 richtext-pl-8 richtext-pr-2 richtext-text-sm richtext-font-semibold", e),
...t
}
));
Wo.displayName = Z.Label.displayName;
const Jt = $.forwardRef(({ className: e, children: t, ...n }, i) => /* @__PURE__ */ m(
Z.Item,
{
ref: i,
className: P(
"richtext-relative richtext-flex richtext-w-full richtext-cursor-default richtext-select-none richtext-items-center richtext-rounded-sm richtext-py-1.5 richtext-pl-8 richtext-pr-2 richtext-text-sm richtext-outline-none focus:richtext-bg-accent focus:richtext-text-accent-foreground data-[disabled]:richtext-pointer-events-none data-[disabled]:richtext-opacity-50",
e
),
...n,
children: [
/* @__PURE__ */ r("span", { className: "richtext-absolute richtext-left-2 richtext-flex richtext-h-3.5 richtext-w-3.5 richtext-items-center richtext-justify-center", children: /* @__PURE__ */ r(Z.ItemIndicator, { children: /* @__PURE__ */ r(an, { className: "richtext-h-4 richtext-w-4" }) }) }),
/* @__PURE__ */ r(Z.ItemText, { children: t })
]
}
));
Jt.displayName = Z.Item.displayName;
const Go = $.forwardRef(({ className: e, ...t }, n) => /* @__PURE__ */ r(
Z.Separator,
{
ref: n,
className: P("richtext--mx-1 richtext-my-1 richtext-h-px richtext-bg-muted", e),
...t
}
));
Go.displayName = Z.Separator.displayName;
const Ti = $.forwardRef(({ className: e, ...t }, n) => /* @__PURE__ */ r(
Kt.Root,
{
ref: n,
className: P(
"!richtext-peer !richtext-h-4 !richtext-w-4 !richtext-p-0 !richtext-shrink-0 !richtext-rounded-sm !richtext-border !richtext-border-primary !richtext-ring-offset-background focus-visible:!richtext-outline-none focus-visible:!richtext-ring-2 focus-visible:!richtext-ring-ring focus-visible:!richtext-ring-offset-2 disabled:!richtext-cursor-not-allowed disabled:!richtext-opacity-50 data-[state=checked]:!richtext-bg-primary data-[state=checked]:!richtext-text-primary-foreground",
e
),
...t,
children: /* @__PURE__ */ r(
Kt.Indicator,
{
className: P("!richtext-flex !richtext-p-0 !richtext-items-center !richtext-justify-center !richtext-text-current"),
children: /* @__PURE__ */ r(an, { className: "!richtext-h-4 !richtext-w-4" })
}
)
}
));
Ti.displayName = Kt.Root.displayName;
function qo({ editor: e, ...t }) {
const n = ut(e, Fe.name, {
text: "",
defaultShowPicker: !1
}), { text: i, defaultShowPicker: a } = n, [o, c] = _(""), [s, d] = _(!1), l = M(() => e.isActive(Fe.name), [e]), h = M(() => ht(Fe.name, e), [e]), u = M(() => {
e.chain().focus().setKatex({ text: o }).run(), d(!1);
}, [e, o]);
H(() => {
a && (d(!0), e.chain().updateAttributes(Fe.name, { defaultShowPicker: !1 }).focus().run());
}, [e, a, d]), H(() => {
s && c(i || "");
}, [s]);
const f = D(() => {
try {
return xn.renderToString(`${o}`);
} catch {
return o;
}
}, [o]), g = D(
() => `${o}`.trim() ? /* @__PURE__ */ r("span", { contentEditable: !1, dangerouslySetInnerHTML: { __html: f || "" } }) : null,
[o, f]
);
return /* @__PURE__ */ r(
le,
{
editor: e,
pluginKey: "Katex-bubble-menu",
shouldShow: l,
tippyOptions: {
popperOptions: {
modifiers: [{ name: "flip", enabled: !1 }]
},
placement: "bottom-start",
offset: [-2, 16],
zIndex: 9999,
onHidden: () => {
d(!1);
}
},
children: t != null && t.disabled ? /* @__PURE__ */ r(K, {}) : /* @__PURE__ */ r("div", { className: "richtext-p-2 richtext-bg-white !richtext-border richtext-rounded-lg richtext-shadow-sm dark:richtext-bg-black richtext-border-neutral-200 dark:richtext-border-neutral-800", children: s ? /* @__PURE__ */ m(K, { children: [
/* @__PURE__ */ r(
mt,
{
value: o,
onChange: (x) => c(x.target.value),
autoFocus: !0,
placeholder: "Formula text",
rows: 3,
defaultValue: i,
style: { marginBottom: 8 }
}
),
g && /* @__PURE__ */ r("div", { className: "richtext-my-[10px] richtext-p-[10px] richtext-rounded-[6px] !richtext-border-[1px] richtext-whitespace-nowrap richtext-overflow-auto", children: g }),
/* @__PURE__ */ m("div", { className: "richtext-flex richtext-items-center richtext-justify-between richtext-gap-[6px]", children: [
/* @__PURE__ */ r(W, { onClick: u, className: "richtext-flex-1", children: "Submit" }),
/* @__PURE__ */ r("a", { href: "https://katex.org/docs/supported", target: "_blank", rel: "noreferrer noopener", children: /* @__PURE__ */ r(ei, { size: 16 }) })
] })
] }) : /* @__PURE__ */ m("div", { className: "richtext-flex richtext-items-center richtext-justify-center richtext-gap-[6px]", children: [
/* @__PURE__ */ r(v, { tooltip: "Edit", action: () => d(!s), children: /* @__PURE__ */ r(ti, { size: 16 }) }),
/* @__PURE__ */ r(v, { tooltip: "Delete", action: h, children: /* @__PURE__ */ r(ni, { size: 16 }) })
] }) })
}
);
}
function Ko(e) {
return e = e || /* @__PURE__ */ new Map(), {
/**
* A Map of event names to registered handler functions.
*/
all: e,
/**
* Register an event handler for the given type.
* @param {string|symbol} type Type of event to listen for, or `'*'` for all events
* @param {Function} handler Function to call in response to given event
* @memberOf mitt
*/
on(t, n) {
const i = e.get(t);
i ? i.push(n) : e.set(t, [n]);
},
/**
* Remove an event handler for the given type.
* If `handler` is omitted, all handlers of the given type are removed.
* @param {string|symbol} type Type of event to unregister `handler` from (`'*'` to remove a wildcard handler)
* @param {Function} [handler] Handler function to remove
* @memberOf mitt
*/
off(t, n) {
const i = e.get(t);
i && (n ? i.splice(i.indexOf(n) >>> 0, 1) : e.set(t, []));
},
/**
* Invoke all handlers for the given type.
* If present, `'*'` handlers are invoked after type-matched handlers.
*
* Note: Manually firing '*' handlers is not supported.
*
* @param {string|symbol} type The event type to invoke
* @param {Any} [evt] Any value (object is recommended and powerful), passed to each handler
* @memberOf mitt
*/
emit(t, n) {
let i = e.get(t);
i && [...i].map((a) => {
a(n);
}), i = e.get("*"), i && [...i].map((a) => {
a(t, n);
});
}
};
}
const Xo = { padding: "0 12px 12px" }, Ai = ({ width: e, maxWidth: t, height: n, onOk: i, children: a }) => {
const { t: o } = j(), [c, s] = _({
width: "",
height: "",
maxWidth: ""
});
H(() => {
s({
width: e,
height: n,
maxWidth: t
});
}, [n, t, e]);
function d(l) {
l.preventDefault(), l.stopPropagation(), i(c);
}
return /* @__PURE__ */ m(he, { modal: !0, children: [
/* @__PURE__ */ r(ue, { asChild: !0, children: a }),
/* @__PURE__ */ r(oe, { children: /* @__PURE__ */ r("div", { style: Xo, children: /* @__PURE__ */ m("form", { className: "richtext-flex richtext-flex-col richtext-gap-2", onSubmit: d, children: [
/* @__PURE__ */ r(re, { className: "mb-[6px]", children: "Width" }),
/* @__PURE__ */ r("div", { className: "richtext-flex richtext-w-full richtext-max-w-sm richtext-items-center richtext-gap-1.5", children: /* @__PURE__ */ r("div", { className: "richtext-relative richtext-items-center richtext-w-full richtext-max-w-sm", children: /* @__PURE__ */ r(
te,
{
type: "number",
value: c.width,
required: !0,
onChange: (l) => s({ ...c, width: l.target.value })
}
) }) }),
/* @__PURE__ */ r(re, { className: "mb-[6px]", children: "Max Width" }),
/* @__PURE__ */ r("div", { className: "richtext-flex richtext-w-full richtext-max-w-sm richtext-items-center richtext-gap-1.5", children: /* @__PURE__ */ r("div", { className: "richtext-relative richtext-items-center richtext-w-full richtext-max-w-sm", children: /* @__PURE__ */ r(
te,
{
type: "number",
value: c.maxWidth,
required: !0,
onChange: (l) => s({ ...c, maxWidth: l.target.value })
}
) }) }),
/* @__PURE__ */ r(re, { className: "mb-[6px]", children: "Height" }),
/* @__PURE__ */ r("div", { className: "richtext-flex richtext-w-full richtext-max-w-sm richtext-items-center richtext-gap-1.5", children: /* @__PURE__ */ r("div", { className: "richtext-relative richtext-items-center richtext-w-full richtext-max-w-sm", children: /* @__PURE__ */ r(
te,
{
type: "number",
value: c.height,
required: !0,
onChange: (l) => s({ ...c, height: l.target.value })
}
) }) }),
/* @__PURE__ */ r(W, { type: "submit", className: "richtext-self-end richtext-mt-2", children: o("editor.link.dialog.button.apply") })
] }) }) })
] });
}, Zo = "_wrap_15k3c_1", Yo = "_renderWrap_15k3c_7", Jo = "_title_15k3c_14", Qo = "_handlerWrap_15k3c_30", tt = {
wrap: Zo,
renderWrap: Yo,
title: Jo,
handlerWrap: Qo
};
function Si(e, t, n) {
return e < t ? t : e > n ? n : e;
}
const ec = (e) => typeof e == "number", tc = (e) => typeof e == "string", nc = (e) => typeof e == "function";
function ic(e, t = "px") {
if (!e)
return e;
const n = ec(e) ? String(e) : e, i = Number.parseFloat(n), a = n.match(/[a-z%]+$/i), o = a ? a[0] : t;
return Number.isNaN(i) ? e : i + o;
}
function Li(e, t) {
if (!e)
return !1;
const { extensions: n = [] } = (e == null ? void 0 : e.extensionManager) ?? {};
return !!n.find((a) => a.name === t);
}
function Qt(e) {
return e.map((t) => tc(t) ? { value: t, name: t } : t);
}
const rc = 10, ac = 200, En = 15, Hn = { width: "100%", height: "100%", maxWidth: "100%" };
function oc({ editor: e, node: t, updateAttributes: n }) {
const i = J(null), a = e.isActive(Be.name), { data: o, width: c, height: s } = t.attrs, [d, l] = _(null), [h, u] = _(!0), [f, g] = _(null), [x, p] = _(!1), [N, T] = _(100), k = M(
(y) => {
y && p(!0);
},
[p]
), w = M((y) => () => {
T(
(A) => Si(y === "minus" ? A - En : A + En, rc, ac)
);
}, []);
H(() => {
let y = !1;
return import("@excalidraw/excalidraw").then((A) => {
y || (i.current = A.exportToSvg);
}).catch((A) => !y && g(A)).finally(() => !y && u(!1)), () => {
y = !0;
};
}, [u, o]), H(() => {
let y = !1;
return (async () => {
if (y || h || f || !x || !o)
return;
const z = await i.current(o);
y || (z.setAttribute("width", "100%"), z.setAttribute("height", "100%"), z.setAttribute("display", "block"), l(z));
})(), () => {
y = !0;
};
}, [o, h, f, x]);
const b = (y) => {
n({ width: y.width, height: y.height });
};
return /* @__PURE__ */ r(ie, { className: ee(tt.wrap, a && tt.isActive), children: /* @__PURE__ */ r(ho, { onChange: k, children: /* @__PURE__ */ r(
bi,
{
size: { width: Number.parseInt(c), height: Number.parseInt(s) },
onResizeStop: (y, A, z, I) => {
b({
width: Number.parseInt(c) + I.width,
height: Number.parseInt(s) + I.height
});
},
children: /* @__PURE__ */ m(
"div",
{
className: ee(tt.renderWrap, "render-wrapper"),
style: { ...Hn, overflow: "hidden" },
children: [
f && /* @__PURE__ */ r("div", { style: Hn, children: /* @__PURE__ */ r("p", { children: f.message || f }) }),
h && /* @__PURE__ */ r("p", { children: "Loading..." }),
!h && !f && x && /* @__PURE__ */ r(
"div",
{
style: {
height: "100%",
maxHeight: "100%",
padding: 24,
overflow: "hidden",
display: "flex",
justifyContent: "center",
alignItems: "center",
transform: `scale(${N / 100})`,
transition: "all ease-in-out .3s"
},
dangerouslySetInnerHTML: { __html: (d == null ? void 0 : d.outerHTML) ?? "" }
}
),
/* @__PURE__ */ r("div", { className: tt.title }),
/* @__PURE__ */ m("div", { className: tt.handlerWrap, children: [
/* @__PURE__ */ r(
v,
{
icon: "ZoomOut",
action: w("minus"),
tooltip: "Zoom Out"
}
),
/* @__PURE__ */ r(
v,
{
icon: "ZoomIn",
action: w("plus"),
tooltip: "Zoom In"
}
)
] })
]
}
)
}
) }) });
}
const cc = St.memo(oc, (e, t) => !!ln(e.node.attrs, t.node.attrs));
function sc(e, t = "{}") {
try {
return JSON.stringify(e);
} catch {
return t;
}
}
function lc(e) {
try {
return JSON.stringify(e);
} catch {
return JSON.stringify({});
}
}
function Q(e, t = !1) {
return (n) => {
const i = e.startsWith("data-") ? e : `data-${e}`;
let a = decodeURIComponent(n.getAttribute(i));
if (a == null || typeof a == "string" && a === "null")
try {
const s = n.outerHTML.match(/([\s\S])+?="([\s\S])+?"/g);
s && s.length && (a = (s.map((l) => l.trim()).reduce((l, h) => {
const u = h.indexOf("="), f = [h.slice(0, u), h.slice(u + 1).slice(1, -1)];
return l[f[0]] = f[1], l;
}, {})[e.toLowerCase()] || "").replaceAll(""", '"'));
} catch (c) {
console.error("Error getDatasetAttribute ", c.message, n);
}
if (t)
try {
return JSON.parse(a);
} catch {
return {};
}
if (a.includes("%") || a.includes("auto"))
return a;
const o = Number.parseInt(a);
return o !== o ? a : o;
};
}
function dc(e) {
const { attrs: t } = e;
return Object.keys(t).reduce((n, i) => {
const a = t[i];
if (a == null)
return n;
let o = "";
return typeof a == "object" ? o = lc(a) : o = a, n[i] = o, n;
}, /* @__PURE__ */ Object.create(null));
}
const He = ae.Root, Re = ae.Trigger, hc = ae.Portal, Mi = $.forwardRef(({ className: e, ...t }, n) => /* @__PURE__ */ r(
ae.Overlay,
{
ref: n,
className: P(
"richtext-fixed richtext-inset-0 richtext-z-50 richtext-bg-black/80 richtext- data-[state=open]:richtext-animate-in data-[state=closed]:richtext-animate-out data-[state=closed]:richtext-fade-out-0 data-[state=open]:richtext-fade-in-0",
e
),
...t
}
));
Mi.displayName = ae.Overlay.displayName;
const ke = $.forwardRef(({ className: e, children: t, ...n }, i) => /* @__PURE__ */ m(hc, { children: [
/* @__PURE__ */ r(Mi, {}),
/* @__PURE__ */ m(
ae.Content,
{
ref: i,
className: P(
"richtext-dialog-content richtext-fixed richtext-left-[50%] richtext-top-[50%] richtext-z-50 richtext-grid richtext-w-full richtext-max-w-lg richtext-translate-x-[-50%] richtext-translate-y-[-50%] richtext-gap-4 richtext-border richtext-bg-background richtext-p-6 richtext-shadow-lg richtext-duration-200 data-[state=open]:richtext-animate-in data-[state=closed]:richtext-animate-out data-[state=closed]:richtext-fade-out-0 data-[state=open]:richtext-fade-in-0 data-[state=closed]:richtext-zoom-out-95 data-[state=open]:richtext-zoom-in-95 data-[state=closed]:richtext-slide-out-to-left-1/2 data-[state=closed]:richtext-slide-out-to-top-[48%] data-[state=open]:richtext-slide-in-from-left-1/2 data-[state=open]:richtext-slide-in-from-top-[48%] sm:richtext-rounded-lg",
e
),
...n,
children: [
t,
/* @__PURE__ */ m(ae.Close, { className: "richtext-absolute richtext-right-4 richtext-top-4 richtext-rounded-sm richtext-opacity-70 richtext-ring-offset-background richtext-transition-opacity hover:richtext-opacity-100 focus:richtext-outline-none focus:richtext-ring-2 focus:richtext-ring-ring focus:richtext-ring-offset-2 disabled:richtext-pointer-events-none data-[state=open]:richtext-bg-accent data-[state=open]:richtext-text-muted-foreground", children: [
/* @__PURE__ */ r(nr, { className: "richtext-h-4 richtext-w-4" }),
/* @__PURE__ */ r("span", { className: "richtext-sr-only", children: "Close" })
] })
]
}
)
] }));
ke.displayName = ae.Content.displayName;
function Ii({
className: e,
...t
}) {
return /* @__PURE__ */ r(
"div",
{
className: P(
"richtext-flex richtext-flex-col richtext-space-y-1.5 richtext-text-center sm:richtext-text-left",
e
),
...t
}
);
}
Ii.displayName = "DialogHeader";
function et({
className: e,
...t
}) {
return /* @__PURE__ */ r(
"div",
{
className: P(
"richtext-flex richtext-flex-col-reverse sm:richtext-flex-row sm:richtext-justify-end sm:richtext-space-x-2",
e
),
...t
}
);
}
et.displayName = "DialogFooter";
const Ce = $.forwardRef(({ className: e, ...t }, n) => /* @__PURE__ */ r(
ae.Title,
{
ref: n,
className: P(
"richtext-text-lg richtext-font-semibold richtext-leading-none richtext-tracking-tight",
e
),
...t
}
));
Ce.displayName = ae.Title.displayName;
const uc = $.forwardRef(({ className: e, ...t }, n) => /* @__PURE__ */ r(
ae.Description,
{
ref: n,
className: P("richtext-text-sm richtext-text-muted-foreground", e),
...t
}
));
uc.displayName = ae.Description.displayName;
let jt;
function _n() {
try {
return jt || (jt = Ko()), jt;
} catch {
throw new Error("Error EventEmitter");
}
}
const en = "OPEN_EXCALIDRAW_SETTING_MODAL";
function mc(e, t) {
_n().on(e, t);
}
function fc(e, t) {
_n().off(e, t);
}
function gc(e) {
_n().emit(en, e);
}
const xc = ({ editor: e }) => {
const [t, n] = _(null), [i, a] = _({}), [o, c] = _({ elements: [], appState: { isLoading: !1 }, files: null }), [s, d] = _(!1), [l, h] = _(!0), [u, f] = _(null), g = M(
(T) => {
T && import("@excalidraw/excalidraw").then((k) => {
n(k.Excalidraw);
}).catch(f).finally(() => h(!1));
},
[h]
), x = M((T) => {
setTimeout(() => {
T.refresh();
});
}, []), p = M((T, k, w) => {
a({
elements: T,
appState: { isLoading: !1 },
files: w
});
}, []), N = M(() => {
if (!t) {
d(!1);
return;
}
e.chain().focus().setExcalidraw({ data: i }).run(), d(!1);
}, [t, e, i, d]);
return H(() => {
const T = (k) => {
d(!0), k && c(k.data);
};
return mc(en, T), () => {
fc(en, T);
};
}, [e, d]), /* @__PURE__ */ m(
He,
{
open: s,
onOpenChange: d,
children: [
/* @__PURE__ */ r(Re, { asChild: !0, children: /* @__PURE__ */ r(
v,
{
icon: "Excalidraw",
tooltip: "Excalidraw",
action: () => d(!0)
}
) }),
/* @__PURE__ */ m(ke, { className: "!richtext-max-w-[1300px] richtext-z-[99999]", children: [
/* @__PURE__ */ r(Ce, { children: "Excalidraw" }),
/* @__PURE__ */ m("div", { style: { height: "100%", borderWidth: 1 }, children: [
l && /* @__PURE__ */ r("p", { children: "Loading..." }),
u && /* @__PURE__ */ r("p", { children: u && u.message || "Error" }),
/* @__PURE__ */ r("div", { style: { width: "100%", height: 600 }, ref: g, children: !l && !u && t ? /* @__PURE__ */ r(t, { ref: x, onChange: p, langCode: "en", initialData: o }) : null })
] }),
/* @__PURE__ */ r(et, { children: /* @__PURE__ */ r(
W,
{
type: "button",
onClick: N,
children: "Save changes"
}
) })
] })
]
}
);
}, Rn = { elements: [] }, Be = de.create({
name: "excalidraw",
group: "block",
selectable: !0,
atom: !0,
draggable: !0,
inline: !1,
addAttributes() {
return {
defaultShowPicker: {
default: !1
},
createUser: {
default: null
},
width: {
default: "100%",
parseHTML: Q("width")
},
height: {
default: 240,
parseHTML: Q("height")
},
data: {
default: Rn,
parseHTML: Q("data", !0)
}
};
},
addOptions() {
var e;
return {
...(e = this.parent) == null ? void 0 : e.call(this),
HTMLAttributes: {
class: "excalidraw"
},
button: ({ editor: t }) => ({
component: xc,
componentProps: {
editor: t
}
})
};
},
parseHTML() {
return [
{
tag: "div[class=excalidraw]"
}
];
},
renderHTML({ HTMLAttributes: e, node: t }) {
return ["div", ne(this.options.HTMLAttributes, e, dc(t))];
},
addCommands() {
return {
setExcalidraw: (e) => ({ tr: t, commands: n, chain: i }) => {
var a, o, c;
return e = e || {}, e.data = e.data || Rn, ((c = (o = (a = t.selection) == null ? void 0 : a.node) == null ? void 0 : o.type) == null ? void 0 : c.name) == this.name ? n.updateAttributes(this.name, e) : i().insertContent({
type: this.name,
attrs: e
}).run();
}
};
},
addNodeView() {
return ge(cc);
},
addInputRules() {
return [
on({
find: /^\$excalidraw\$$/,
type: this.type,
getAttributes: () => ({ width: "100%" })
})
];
}
}), Te = /* @__PURE__ */ new Map();
function pc(e) {
const t = e.options.element;
Te.has("width") || Te.set("width", t.clientWidth), Te.has("width") && Te.get("width") <= 0 && Te.set("width", t.clientWidth);
const n = { attributes: !0, childList: !0, subtree: !0 }, i = function() {
Te.set("width", t.clientWidth);
}, a = new MutationObserver(i);
return a.observe(t, n), e.on("destroy", () => {
a.disconnect();
}), { width: Te.get("width") };
}
function bc({ editor: e }) {
const { t } = j(), { width: n } = pc(e), i = ut(e, Be.name, {
defaultShowPicker: !1,
createUser: "",
width: 0,
height: 0
}), { defaultShowPicker: a, createUser: o, width: c, height: s } = i, d = M(
(f) => {
e.chain().updateAttributes(Be.name, f).s