reactjs-tiptap-editor-ivr2
Version:
A modern WYSIWYG rich text editor based on tiptap and shadcn ui for React
1,203 lines • 392 kB
JavaScript
var Xi = Object.defineProperty;
var Zi = (e, t, n) => t in e ? Xi(e, t, { enumerable: !0, configurable: !0, writable: !0, value: n }) : e[t] = n;
var ue = (e, t, n) => Zi(e, typeof t != "symbol" ? t + "" : t, n);
import { jsxs as u, jsx as r, Fragment as G } from "react/jsx-runtime";
import * as $ from "react";
import Fe, { useState as b, useRef as Y, useEffect as O, useCallback as L, useMemo as D, Fragment as Tt, forwardRef as en, useImperativeHandle as tn } from "react";
import "@radix-ui/react-toast";
import { ChevronRight as Yi, Check as nn, Circle as Ji, ChevronDown as ot, ChevronUp as Xn, HelpCircle as Zn, Pencil as Yn, Trash2 as Jn, X as Qi, Plus as Qn, FlipHorizontal as er, FlipVertical as tr, CropIcon as nr, Paperclip as ir, Eye as rr, Settings as ar, ZoomOut as or, ZoomIn as cr, BookMarked as sr, Sigma as lr, SmilePlusIcon as dr, Replace as kn, SmilePlus as hr, Frame as ur, Columns2 as Cn, PanelRight as mr, PanelLeft as fr, Clipboard as gr, Copy as ei, GripVertical as xr, Columns4 as pr, Columns3 as br, Heading6 as wr, Heading5 as _r, Heading4 as vr, Heading3 as yr, Heading2 as kr, Heading1 as Cr, ChevronsUpDown as Nr, Trash as Tr, TableCellsSplit as Ar, TableCellsMerge as Sr, BetweenVerticalEnd as Lr, BetweenVerticalStart as Mr, BetweenHorizonalStart as Ir, BetweenHorizonalEnd as zr, Unlink as Er, Sparkles as ti, Table as Hr, Minimize as Or, Maximize as Rr, Video as Pr, ImageUp as Dr, Link as Br, ListTodo as $r, ListOrdered as jr, List as Fr, IndentDecrease as Vr, IndentIncrease as Ur, Type as Wr, CodeXml as Gr, Code as qr, Superscript as Kr, Subscript as Xr, Undo2 as Zr, Redo2 as Yr, PaintRoller as Jr, Eraser as Qr, Minus as ea, Strikethrough as ta, Brain as ni, Quote as na, Underline as ia, Italic as ra, LoaderCircle as aa, SparklesIcon as oa, Bold as ca, Zap as sa, Edit3 as la, CopyCheck as da, Clock3 as ha, Laugh as ua, LucideTableProperties as ma, LucideSheet as fa, LucideImage as ga, LucideFile as xa, LucideVideo as pa, LucideAudioLines as ba } from "lucide-react";
import { B as se, N as ne, a as le, n as rn, R as fe, m as te, u as wa, F as _a, E as va, i as ya, b as ka, c as Ca, d as X, I as Na, U as Ta, S as Aa, C as Sa, f as it, e as La, g as Ma, h as Ia, H as za, T as Ea, j as Ha, k as Oa, l as Ra, O as Pa, o as Da, p as Ba, q as $a, L as ja, r as Fa, s as Va, t as Ua, D as Wa, v as yt, P as Ga, w as qa, x as Ka, G as Xa, y as Za, z as Ya, A as Ja, J as Qa, K as eo, M as to, Q as ii, V as ri, W as an, X as no, Y as io, Z as ro, _ as ao, $ as oo, a0 as ai, a1 as co, a2 as Nn } from "./tiptap-DJBMPlRb.js";
import { aj as so, ak as Q, al as on, am as cn, an as lo, ao as oi, ap as ho, aq as Te, H as At, T as Ae, A as ci, ar as uo, as as mo, at as sn, au as fo, P as be, b as Se, $ as $e, a0 as Ve, N as go, av as kt, aw as si, a4 as xo } from "./vendor-v5R1J4RD.js";
import { bundledThemes as li, bundledLanguages as di, createHighlighter as po } from "shiki";
import { u as F, C as bo, E as wo, l as Z, B as _o, I as Ct, V as Vt, M as vo, D as hi, a as yo, b as ko, c as Tn, d as ui, e as Co, f as Ue, g as ln, h as We, T as mt, i as ft, j as gt } from "./locales-BlrQah3_.js";
import * as K from "@radix-ui/react-select";
import { Slot as dn } from "@radix-ui/react-slot";
import { flushSync as Ge } from "react-dom";
import No from "react-image-crop";
import { proxy as St, useSnapshot as Lt } from "valtio";
import * as Ut from "@radix-ui/react-checkbox";
import hn from "scroll-into-view-if-needed";
import mi, { sticky as To } from "tippy.js";
import * as Le from "@radix-ui/react-tabs";
import { DocxSerializer as Ao, defaultNodes as ke, defaultMarks as So } from "prosemirror-docx";
import { Packer as Lo } from "docx";
import Nt from "mermaid";
import * as re from "@radix-ui/react-dialog";
import un from "katex";
import * as rt from "@radix-ui/react-popover";
import * as fi from "@radix-ui/react-label";
import { Resizable as gi } from "re-resizable";
import * as xi from "@radix-ui/react-separator";
import { HexColorPicker as Mo } from "react-colorful";
import { TextAlignRightIcon as Io, TextAlignLeftIcon as zo, TextAlignJustifyIcon as Eo, TextAlignCenterIcon as Ho } from "@radix-ui/react-icons";
import * as Wt from "@radix-ui/react-switch";
import * as j from "@radix-ui/react-dropdown-menu";
import * as ct from "@radix-ui/react-tooltip";
import * as pi from "@radix-ui/react-toggle";
let Ot;
function Rt() {
return Ot === void 0 && (Ot = navigator.platform.includes("Mac")), Ot;
}
function Mt(e) {
return `${e}`.toLowerCase() === "mod" ? Rt() ? "⌘" : "Ctrl" : `${e}`.toLowerCase() === "alt" ? Rt() ? "⌥" : "Alt" : `${e}`.toLowerCase() === "shift" ? Rt() ? "⇧" : "Shift" : e;
}
function It(e) {
return e.map(Mt).join(" ");
}
function P(...e) {
return so(Q(e));
}
const w = Fe.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: m = !1,
upload: f = !1,
...g
} = e, x = ut[n];
return /* @__PURE__ */ u(Ze, { children: [
/* @__PURE__ */ r(Ye, { asChild: !0, children: /* @__PURE__ */ u(
m ? dn : ht,
{
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(Ie, { ...s, children: /* @__PURE__ */ u("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: It(c) })
] }) })
] });
}
), mn = Fe.forwardRef(
({ asChild: e, ...t }, n) => {
var o;
const i = ut[t.icon];
return /* @__PURE__ */ u(Ze, { children: [
/* @__PURE__ */ r(Ye, { asChild: !0, children: /* @__PURE__ */ r(
e ? dn : U,
{
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__ */ u("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(Ie, { children: /* @__PURE__ */ u("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: It(t == null ? void 0 : t.shortcutKeys) }) })
] }) })
] });
}
);
function st(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 lt(e, t, n, i) {
const a = Oo, [o, c] = b(a(n)), s = Y(o);
return O(() => {
const d = () => {
const l = { ...n, ...e.getAttributes(t) };
Object.keys(l).forEach((m) => {
(l[m] === null || l[m] === void 0) && (l[m] = n ? n[m] : null);
});
const h = a(l);
on(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 dt = $.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
}
)
);
dt.displayName = "Textarea";
const Ro = cn(
"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"
}
}
), U = $.forwardRef(
({ className: e, variant: t, size: n, asChild: i = !1, ...a }, o) => /* @__PURE__ */ r(
i ? dn : "button",
{
className: P(Ro({ variant: t, size: n, className: e })),
ref: o,
...a
}
)
);
U.displayName = "Button";
const we = j.Root, _e = j.Trigger, An = j.Portal, Sn = j.Sub, Gt = $.forwardRef(({ className: e, inset: t, children: n, ...i }, a) => /* @__PURE__ */ u(
j.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(Yi, { className: "richtext-ml-auto richtext-h-4 richtext-w-4" })
]
}
));
Gt.displayName = j.SubTrigger.displayName;
const qt = $.forwardRef(({ className: e, ...t }, n) => /* @__PURE__ */ r(
j.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
}
));
qt.displayName = j.SubContent.displayName;
const xe = $.forwardRef(({ className: e, sideOffset: t = 4, ...n }, i) => /* @__PURE__ */ r(j.Portal, { children: /* @__PURE__ */ r(
j.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
}
) }));
xe.displayName = j.Content.displayName;
const oe = $.forwardRef(({ className: e, inset: t, ...n }, i) => /* @__PURE__ */ r(
j.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
}
));
oe.displayName = j.Item.displayName;
const Me = $.forwardRef(({ className: e, children: t, checked: n, ...i }, a) => /* @__PURE__ */ u(
j.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(j.ItemIndicator, { children: /* @__PURE__ */ r(nn, { className: "richtext-h-4 richtext-w-4" }) }) }),
t
]
}
));
Me.displayName = j.CheckboxItem.displayName;
const Po = $.forwardRef(({ className: e, children: t, ...n }, i) => /* @__PURE__ */ u(
j.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(j.ItemIndicator, { children: /* @__PURE__ */ r(Ji, { className: "richtext-h-2 richtext-w-2 richtext-fill-current" }) }) }),
t
]
}
));
Po.displayName = j.RadioItem.displayName;
const Do = $.forwardRef(({ className: e, inset: t, ...n }, i) => /* @__PURE__ */ r(
j.Label,
{
ref: i,
className: P(
"richtext-px-2 richtext-py-1.5 richtext-text-sm richtext-font-semibold",
t && "richtext-pl-8",
e
),
...n
}
));
Do.displayName = j.Label.displayName;
const zt = $.forwardRef(({ className: e, ...t }, n) => /* @__PURE__ */ r(
j.Separator,
{
ref: n,
className: P("richtext--mx-1 richtext-my-1 richtext-h-px richtext-bg-muted", e),
...t
}
));
zt.displayName = j.Separator.displayName;
function bi({
className: e,
...t
}) {
return /* @__PURE__ */ r(
"span",
{
className: P("richtext-ml-auto richtext-text-xs richtext-tracking-widest richtext-opacity-60", e),
...t
}
);
}
bi.displayName = "DropdownMenuShortcut";
const ee = $.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
}
)
);
ee.displayName = "Input";
const Bo = cn(
"richtext-text-sm richtext-font-medium richtext-leading-none peer-disabled:richtext-cursor-not-allowed peer-disabled:richtext-opacity-70"
), ie = $.forwardRef(({ className: e, ...t }, n) => /* @__PURE__ */ r(
fi.Root,
{
ref: n,
className: P(Bo(), e),
...t
}
));
ie.displayName = fi.Root.displayName;
const de = rt.Root, he = rt.Trigger, ae = $.forwardRef(({ className: e, align: t = "center", sideOffset: n = 4, ...i }, a) => /* @__PURE__ */ r(rt.Portal, { children: /* @__PURE__ */ r(
rt.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
}
) }));
ae.displayName = rt.Content.displayName;
const ce = $.forwardRef(
({ className: e, orientation: t = "horizontal", decorative: n = !0, ...i }, a) => /* @__PURE__ */ r(
xi.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
}
)
);
ce.displayName = xi.Root.displayName;
const fn = $.forwardRef(({ className: e, ...t }, n) => /* @__PURE__ */ r(
Wt.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(
Wt.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"
)
}
)
}
));
fn.displayName = Wt.Root.displayName;
const gn = Le.Root, Et = $.forwardRef(({ className: e, ...t }, n) => /* @__PURE__ */ r(
Le.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
}
));
Et.displayName = Le.List.displayName;
const qe = $.forwardRef(({ className: e, ...t }, n) => /* @__PURE__ */ r(
Le.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
}
));
qe.displayName = Le.Trigger.displayName;
const Ke = $.forwardRef(({ className: e, ...t }, n) => /* @__PURE__ */ r(
Le.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
}
));
Ke.displayName = Le.Content.displayName;
const $o = cn(
"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"
}
}
), ht = $.forwardRef(({ className: e, variant: t, size: n, ...i }, a) => /* @__PURE__ */ r(
pi.Root,
{
ref: a,
className: P($o({ variant: t, size: n, className: e })),
...i
}
));
ht.displayName = pi.Root.displayName;
const jo = ct.Provider, Ze = ct.Root, Ye = ct.Trigger, Ie = $.forwardRef(({ className: e, sideOffset: t = 4, ...n }, i) => /* @__PURE__ */ r(
ct.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
}
));
Ie.displayName = ct.Content.displayName;
const Fo = K.Root, Vo = K.Value, wi = $.forwardRef(({ className: e, children: t, ...n }, i) => /* @__PURE__ */ u(
K.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(K.Icon, { asChild: !0, children: /* @__PURE__ */ r(ot, { className: "richtext-h-4 richtext-w-4 richtext-opacity-50" }) })
]
}
));
wi.displayName = K.Trigger.displayName;
const _i = $.forwardRef(({ className: e, ...t }, n) => /* @__PURE__ */ r(
K.ScrollUpButton,
{
ref: n,
className: P(
"richtext-flex richtext-cursor-default richtext-items-center richtext-justify-center richtext-py-1",
e
),
...t,
children: /* @__PURE__ */ r(Xn, { className: "richtext-h-4 richtext-w-4" })
}
));
_i.displayName = K.ScrollUpButton.displayName;
const vi = $.forwardRef(({ className: e, ...t }, n) => /* @__PURE__ */ r(
K.ScrollDownButton,
{
ref: n,
className: P(
"richtext-flex richtext-cursor-default richtext-items-center richtext-justify-center richtext-py-1",
e
),
...t,
children: /* @__PURE__ */ r(ot, { className: "richtext-h-4 richtext-w-4" })
}
));
vi.displayName = K.ScrollDownButton.displayName;
const yi = $.forwardRef(({ className: e, children: t, position: n = "popper", ...i }, a) => /* @__PURE__ */ r(K.Portal, { children: /* @__PURE__ */ u(
K.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(_i, {}),
/* @__PURE__ */ r(
K.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(vi, {})
]
}
) }));
yi.displayName = K.Content.displayName;
const Uo = $.forwardRef(({ className: e, ...t }, n) => /* @__PURE__ */ r(
K.Label,
{
ref: n,
className: P("richtext-py-1.5 richtext-pl-8 richtext-pr-2 richtext-text-sm richtext-font-semibold", e),
...t
}
));
Uo.displayName = K.Label.displayName;
const Kt = $.forwardRef(({ className: e, children: t, ...n }, i) => /* @__PURE__ */ u(
K.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(K.ItemIndicator, { children: /* @__PURE__ */ r(nn, { className: "richtext-h-4 richtext-w-4" }) }) }),
/* @__PURE__ */ r(K.ItemText, { children: t })
]
}
));
Kt.displayName = K.Item.displayName;
const Wo = $.forwardRef(({ className: e, ...t }, n) => /* @__PURE__ */ r(
K.Separator,
{
ref: n,
className: P("richtext--mx-1 richtext-my-1 richtext-h-px richtext-bg-muted", e),
...t
}
));
Wo.displayName = K.Separator.displayName;
const ki = $.forwardRef(({ className: e, ...t }, n) => /* @__PURE__ */ r(
Ut.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(
Ut.Indicator,
{
className: P("!richtext-flex !richtext-p-0 !richtext-items-center !richtext-justify-center !richtext-text-current"),
children: /* @__PURE__ */ r(nn, { className: "!richtext-h-4 !richtext-w-4" })
}
)
}
));
ki.displayName = Ut.Root.displayName;
function Go({ editor: e, ...t }) {
const n = lt(e, Be.name, {
text: "",
defaultShowPicker: !1
}), { text: i, defaultShowPicker: a } = n, [o, c] = b(""), [s, d] = b(!1), l = L(() => e.isActive(Be.name), [e]), h = L(() => st(Be.name, e), [e]), m = L(() => {
e.chain().focus().setKatex({ text: o }).run(), d(!1);
}, [e, o]);
O(() => {
a && (d(!0), e.chain().updateAttributes(Be.name, { defaultShowPicker: !1 }).focus().run());
}, [e, a, d]), O(() => {
s && c(i || "");
}, [s]);
const f = D(() => {
try {
return un.renderToString(`${o}`);
} catch {
return o;
}
}, [o]), g = D(
() => `${o}`.trim() ? /* @__PURE__ */ r("span", { contentEditable: !1, dangerouslySetInnerHTML: { __html: f || "" } }) : null,
[o, f]
);
return /* @__PURE__ */ r(
se,
{
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(G, {}) : /* @__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__ */ u(G, { children: [
/* @__PURE__ */ r(
dt,
{
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__ */ u("div", { className: "richtext-flex richtext-items-center richtext-justify-between richtext-gap-[6px]", children: [
/* @__PURE__ */ r(U, { onClick: m, className: "richtext-flex-1", children: "Submit" }),
/* @__PURE__ */ r("a", { href: "https://katex.org/docs/supported", target: "_blank", rel: "noreferrer noopener", children: /* @__PURE__ */ r(Zn, { size: 16 }) })
] })
] }) : /* @__PURE__ */ u("div", { className: "richtext-flex richtext-items-center richtext-justify-center richtext-gap-[6px]", children: [
/* @__PURE__ */ r(w, { tooltip: "Edit", action: () => d(!s), children: /* @__PURE__ */ r(Yn, { size: 16 }) }),
/* @__PURE__ */ r(w, { tooltip: "Delete", action: h, children: /* @__PURE__ */ r(Jn, { size: 16 }) })
] }) })
}
);
}
function qo(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 Ko = { padding: "0 12px 12px" }, Ci = ({ width: e, maxWidth: t, height: n, onOk: i, children: a }) => {
const { t: o } = F(), [c, s] = b({
width: "",
height: "",
maxWidth: ""
});
O(() => {
s({
width: e,
height: n,
maxWidth: t
});
}, [n, t, e]);
function d(l) {
l.preventDefault(), l.stopPropagation(), i(c);
}
return /* @__PURE__ */ u(de, { modal: !0, children: [
/* @__PURE__ */ r(he, { asChild: !0, children: a }),
/* @__PURE__ */ r(ae, { children: /* @__PURE__ */ r("div", { style: Ko, children: /* @__PURE__ */ u("form", { className: "richtext-flex richtext-flex-col richtext-gap-2", onSubmit: d, children: [
/* @__PURE__ */ r(ie, { 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(
ee,
{
type: "number",
value: c.width,
required: !0,
onChange: (l) => s({ ...c, width: l.target.value })
}
) }) }),
/* @__PURE__ */ r(ie, { 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(
ee,
{
type: "number",
value: c.maxWidth,
required: !0,
onChange: (l) => s({ ...c, maxWidth: l.target.value })
}
) }) }),
/* @__PURE__ */ r(ie, { 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(
ee,
{
type: "number",
value: c.height,
required: !0,
onChange: (l) => s({ ...c, height: l.target.value })
}
) }) }),
/* @__PURE__ */ r(U, { type: "submit", className: "richtext-self-end richtext-mt-2", children: o("editor.link.dialog.button.apply") })
] }) }) })
] });
}, Xo = "_wrap_15k3c_1", Zo = "_renderWrap_15k3c_7", Yo = "_title_15k3c_14", Jo = "_handlerWrap_15k3c_30", Qe = {
wrap: Xo,
renderWrap: Zo,
title: Yo,
handlerWrap: Jo
};
function Ni(e, t, n) {
return e < t ? t : e > n ? n : e;
}
const Qo = (e) => typeof e == "number", ec = (e) => typeof e == "string", tc = (e) => typeof e == "function";
function nc(e, t = "px") {
if (!e)
return e;
const n = Qo(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 Ti(e, t) {
if (!e)
return !1;
const { extensions: n = [] } = (e == null ? void 0 : e.extensionManager) ?? {};
return !!n.find((a) => a.name === t);
}
function Xt(e) {
return e.map((t) => ec(t) ? { value: t, name: t } : t);
}
const ic = 10, rc = 200, Ln = 15, Mn = { width: "100%", height: "100%", maxWidth: "100%" };
function ac({ editor: e, node: t, updateAttributes: n }) {
const i = Y(null), a = e.isActive(Pe.name), { data: o, width: c, height: s } = t.attrs, [d, l] = b(null), [h, m] = b(!0), [f, g] = b(null), [x, p] = b(!1), [C, A] = b(100), I = L(
(v) => {
v && p(!0);
},
[p]
), k = L((v) => () => {
A(
(N) => Ni(v === "minus" ? N - Ln : N + Ln, ic, rc)
);
}, []);
O(() => {
let v = !1;
return import("@excalidraw/excalidraw").then((N) => {
v || (i.current = N.exportToSvg);
}).catch((N) => !v && g(N)).finally(() => !v && m(!1)), () => {
v = !0;
};
}, [m, o]), O(() => {
let v = !1;
return (async () => {
if (v || h || f || !x || !o)
return;
const z = await i.current(o);
v || (z.setAttribute("width", "100%"), z.setAttribute("height", "100%"), z.setAttribute("display", "block"), l(z));
})(), () => {
v = !0;
};
}, [o, h, f, x]);
const _ = (v) => {
n({ width: v.width, height: v.height });
};
return /* @__PURE__ */ r(ne, { className: Q(Qe.wrap, a && Qe.isActive), children: /* @__PURE__ */ r(lo, { onChange: I, children: /* @__PURE__ */ r(
gi,
{
size: { width: Number.parseInt(c), height: Number.parseInt(s) },
onResizeStop: (v, N, z, M) => {
_({
width: Number.parseInt(c) + M.width,
height: Number.parseInt(s) + M.height
});
},
children: /* @__PURE__ */ u(
"div",
{
className: Q(Qe.renderWrap, "render-wrapper"),
style: { ...Mn, overflow: "hidden" },
children: [
f && /* @__PURE__ */ r("div", { style: Mn, 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(${C / 100})`,
transition: "all ease-in-out .3s"
},
dangerouslySetInnerHTML: { __html: (d == null ? void 0 : d.outerHTML) ?? "" }
}
),
/* @__PURE__ */ r("div", { className: Qe.title }),
/* @__PURE__ */ u("div", { className: Qe.handlerWrap, children: [
/* @__PURE__ */ r(
w,
{
icon: "ZoomOut",
action: k("minus"),
tooltip: "Zoom Out"
}
),
/* @__PURE__ */ r(
w,
{
icon: "ZoomIn",
action: k("plus"),
tooltip: "Zoom In"
}
)
] })
]
}
)
}
) }) });
}
const oc = Fe.memo(ac, (e, t) => !!on(e.node.attrs, t.node.attrs));
function cc(e, t = "{}") {
try {
return JSON.stringify(e);
} catch {
return t;
}
}
function sc(e) {
try {
return JSON.stringify(e);
} catch {
return JSON.stringify({});
}
}
function J(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 m = h.indexOf("="), f = [h.slice(0, m), h.slice(m + 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 lc(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 = sc(a) : o = a, n[i] = o, n;
}, /* @__PURE__ */ Object.create(null));
}
const ze = re.Root, Ee = re.Trigger, dc = re.Portal, Ai = $.forwardRef(({ className: e, ...t }, n) => /* @__PURE__ */ r(
re.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
}
));
Ai.displayName = re.Overlay.displayName;
const ve = $.forwardRef(({ className: e, children: t, ...n }, i) => /* @__PURE__ */ u(dc, { children: [
/* @__PURE__ */ r(Ai, {}),
/* @__PURE__ */ u(
re.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__ */ u(re.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(Qi, { className: "richtext-h-4 richtext-w-4" }),
/* @__PURE__ */ r("span", { className: "richtext-sr-only", children: "Close" })
] })
]
}
)
] }));
ve.displayName = re.Content.displayName;
function Si({
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
}
);
}
Si.displayName = "DialogHeader";
function Je({
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
}
);
}
Je.displayName = "DialogFooter";
const ye = $.forwardRef(({ className: e, ...t }, n) => /* @__PURE__ */ r(
re.Title,
{
ref: n,
className: P(
"richtext-text-lg richtext-font-semibold richtext-leading-none richtext-tracking-tight",
e
),
...t
}
));
ye.displayName = re.Title.displayName;
const hc = $.forwardRef(({ className: e, ...t }, n) => /* @__PURE__ */ r(
re.Description,
{
ref: n,
className: P("richtext-text-sm richtext-text-muted-foreground", e),
...t
}
));
hc.displayName = re.Description.displayName;
let Pt;
function xn() {
try {
return Pt || (Pt = qo()), Pt;
} catch {
throw new Error("Error EventEmitter");
}
}
const Zt = "OPEN_EXCALIDRAW_SETTING_MODAL";
function uc(e, t) {
xn().on(e, t);
}
function mc(e, t) {
xn().off(e, t);
}
function fc(e) {
xn().emit(Zt, e);
}
const gc = ({ editor: e }) => {
const [t, n] = b(null), [i, a] = b({}), [o, c] = b({ elements: [], appState: { isLoading: !1 }, files: null }), [s, d] = b(!1), [l, h] = b(!0), [m, f] = b(null), g = L(
(A) => {
A && import("@excalidraw/excalidraw").then((I) => {
n(I.Excalidraw);
}).catch(f).finally(() => h(!1));
},
[h]
), x = L((A) => {
setTimeout(() => {
A.refresh();
});
}, []), p = L((A, I, k) => {
a({
elements: A,
appState: { isLoading: !1 },
files: k
});
}, []), C = L(() => {
if (!t) {
d(!1);
return;
}
e.chain().focus().setExcalidraw({ data: i }).run(), d(!1);
}, [t, e, i, d]);
return O(() => {
const A = (I) => {
d(!0), I && c(I.data);
};
return uc(Zt, A), () => {
mc(Zt, A);
};
}, [e, d]), /* @__PURE__ */ u(
ze,
{
open: s,
onOpenChange: d,
children: [
/* @__PURE__ */ r(Ee, { asChild: !0, children: /* @__PURE__ */ r(
w,
{
icon: "Excalidraw",
tooltip: "Excalidraw",
action: () => d(!0)
}
) }),
/* @__PURE__ */ u(ve, { className: "!richtext-max-w-[1300px] richtext-z-[99999]", children: [
/* @__PURE__ */ r(ye, { children: "Excalidraw" }),
/* @__PURE__ */ u("div", { style: { height: "100%", borderWidth: 1 }, children: [
l && /* @__PURE__ */ r("p", { children: "Loading..." }),
m && /* @__PURE__ */ r("p", { children: m && m.message || "Error" }),
/* @__PURE__ */ r("div", { style: { width: "100%", height: 600 }, ref: g, children: !l && !m && t ? /* @__PURE__ */ r(t, { ref: x, onChange: p, langCode: "en", initialData: o }) : null })
] }),
/* @__PURE__ */ r(Je, { children: /* @__PURE__ */ r(
U,
{
type: "button",
onClick: C,
children: "Save changes"
}
) })
] })
]
}
);
}, In = { elements: [] }, Pe = le.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: J("width")
},
height: {
default: 240,
parseHTML: J("height")
},
data: {
default: In,
parseHTML: J("data", !0)
}
};
},
addOptions() {
var e;
return {
...(e = this.parent) == null ? void 0 : e.call(this),
HTMLAttributes: {
class: "excalidraw"
},
button: ({ editor: t }) => ({
component: gc,
componentProps: {
editor: t
}
})
};
},
parseHTML() {
return [
{
tag: "div[class=excalidraw]"
}
];
},
renderHTML({ HTMLAttributes: e, node: t }) {
return ["div", te(this.options.HTMLAttributes, e, lc(t))];
},
addCommands() {
return {
setExcalidraw: (e) => ({ tr: t, commands: n, chain: i }) => {
var a, o, c;
return e = e || {}, e.data = e.data || In, ((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 fe(oc);
},
addInputRules() {
return [
rn({
find: /^\$excalidraw\$$/,
type: this.type,
getAttributes: () => ({ width: "100%" })
})
];
}
}), Ce = /* @__PURE__ */ new Map();
function xc(e) {
const t = e.options.element;
Ce.has("width") || Ce.set("width", t.clientWidth), Ce.has("width") && Ce.get("width") <= 0 && Ce.set("width", t.clientWidth);
const n = { attributes: !0, childList: !0, subtree: !0 }, i = function() {
Ce.set("width", t.clientWidth);
}, a = new MutationObserver(i);
return a.observe(t, n), e.on("destroy", () => {
a.disconnect();
}), { width: Ce.get("width") };
}
function pc({ editor: e }) {
const { t } = F(), { width: n } = xc(e), i = lt(e, Pe.name, {
defaultShowPicker: !1,
createUser: "",
width: 0,
height: 0
}), { defaultShowPicker: a, createUser: o, width: c, height: s } = i, d = L(
(f) => {
e.chain().updateAttributes(Pe.name