reactjs-tiptap-editor
Version:
A modern WYSIWYG rich text editor based on tiptap and shadcn ui for React
1,402 lines • 301 kB
JavaScript
import { jsx as f, Fragment as I, jsxs as x } from "react/jsx-runtime";
import xs, { useRef as Vt, useEffect as rt, useState as B, useCallback as O, useMemo as yt, Fragment as ni } from "react";
import { a0 as Zr, d as ys, E as Ce, a1 as Qr, a2 as to, a3 as Ss, a4 as _e, a5 as eo, U as ii, Q as vs, x as Pe, F as Be, T as si, A as no, v as io, a6 as so, a7 as ro } from "./clsx-DaPvp9ji.js";
import { f as ks, s as Cs, o as _s, a as Ts, b as Es, d as Ds, h as As, e as Is, c as ri } from "./index-Qcl3BG94.js";
import { Plugin as Te, PluginKey as ie, NodeSelection as oo, TextSelection as lo, SelectionRange as co, Selection as ao } from "@tiptap/pm/state";
import { C as ho, T as uo } from "./Table-BC4Lbqzn.js";
import { createPortal as Os } from "react-dom";
import { G as J, h as W, D as Ee, m as De, A as y, n as Ae, o as Ie, L as Et, j as Gt, p as Oe, B as At, v as Ms, q as Rs, E as fo, z as po, Y as go, t as mo, Z as wo, I as tt } from "./index-RcSPeQHn.js";
import { S as bo, a as xo, b as yo, c as So, d as vo } from "./select-CmV5uTXr.js";
import { Callout as Ve } from "./Callout.js";
import { u as Wt, K as Un, s as ko } from "./Katex-tMh4bfBb.js";
import { u as Y, n as Ze, V as Di } from "./index-C07N8gA1.js";
import { d as se } from "./delete-node-IyVmiRbI.js";
import { MultipleColumnNode as Ai } from "./Column.js";
import "./theme.js";
import { C as Co, D as kn } from "./Drawer-DQ4CxBwG.js";
import { Editor as _o, makeDropdownToolbar as To } from "easydrawer";
import { s as Ns, i as Us } from "./shortId-WJVkrvml.js";
import { S as Dt } from "./separator-C7luvaG8.js";
import { P as Ls, a as Ps, b as Bs } from "./popover-CtinPbiy.js";
import { Excalidraw as ce } from "./Excalidraw.js";
import { I as ae, g as Eo } from "./Iframe-CTajPyzs.js";
import Do from "katex";
import { Pencil as Ao, Trash2 as Io, Check as Ii } from "lucide-react";
import { T as Ln } from "./textarea-CkVKMPqK.js";
import { L as Oi, a as Oo, R as Mo } from "./LinkEditBlock-CA5NhP-m.js";
import { ImageGif as Ro } from "./ImageGif.js";
import { Mermaid as Pn } from "./Mermaid.js";
import { RichTextBold as No } from "./Bold.js";
import { RichTextCode as Uo } from "./Code.js";
import "./index-BDYJ8Ph2.js";
import { RichTextColor as Lo } from "./Color.js";
import { RichTextHighlight as Po } from "./Highlight.js";
import { RichTextItalic as Bo } from "./Italic.js";
import { r as Vo } from "./SlashCommandNodeView-DLuqbX2o.js";
import { RichTextStrike as Ho } from "./Strike.js";
import { RichTextAlign as $o, TextAlign as Fo } from "./TextAlign.js";
import { RichTextUnderline as zo } from "./TextUnderline.js";
import { T as Mi, F as Wo } from "./Twitter-D8Cbgl7g.js";
import { DecorationSet as Ri, Decoration as Ko } from "@tiptap/pm/view";
import { NodeRange as jo } from "@tiptap/pm/model";
import { Clear as Yo } from "./Clear.js";
import { I as Go, a as Ni, s as Ui } from "./Indent-BGEHlRx_.js";
import { D as Jo, a as qo, b as Xo, f as mt, d as Zo, g as Li, h as Pi, i as Bi, j as Vi } from "./dropdown-menu-q6RL_fkA.js";
function Qo(e, t) {
const n = Math.min(e.top, t.top), i = Math.max(e.bottom, t.bottom), s = Math.min(e.left, t.left), o = Math.max(e.right, t.right) - s, l = i - n, c = s, a = n;
return new DOMRect(c, a, o, l);
}
var tl = class {
constructor({
editor: e,
element: t,
view: n,
updateDelay: i = 250,
resizeDelay: s = 60,
shouldShow: r,
appendTo: o,
getReferencedVirtualElement: l,
options: c
}) {
this.preventHide = !1, this.isVisible = !1, this.scrollTarget = window, this.floatingUIOptions = {
strategy: "absolute",
placement: "top",
offset: 8,
flip: {},
shift: {},
arrow: !1,
size: !1,
autoPlacement: !1,
hide: !1,
inline: !1,
onShow: void 0,
onHide: void 0,
onUpdate: void 0,
onDestroy: void 0
}, this.shouldShow = ({ view: h, state: d, from: u, to: p }) => {
const { doc: g, selection: m } = d, { empty: w } = m, b = !g.textBetween(u, p).length && Zr(d.selection), T = this.element.contains(document.activeElement);
return !(!(h.hasFocus() || T) || w || b || !this.editor.isEditable);
}, this.mousedownHandler = () => {
this.preventHide = !0;
}, this.dragstartHandler = () => {
this.hide();
}, this.resizeHandler = () => {
this.resizeDebounceTimer && clearTimeout(this.resizeDebounceTimer), this.resizeDebounceTimer = window.setTimeout(() => {
this.updatePosition();
}, this.resizeDelay);
}, this.focusHandler = () => {
setTimeout(() => this.update(this.editor.view));
}, this.blurHandler = ({ event: h }) => {
var d;
if (this.editor.isDestroyed) {
this.destroy();
return;
}
if (this.preventHide) {
this.preventHide = !1;
return;
}
h != null && h.relatedTarget && ((d = this.element.parentNode) != null && d.contains(h.relatedTarget)) || (h == null ? void 0 : h.relatedTarget) !== this.editor.view.dom && this.hide();
}, this.handleDebouncedUpdate = (h, d) => {
const u = !(d != null && d.selection.eq(h.state.selection)), p = !(d != null && d.doc.eq(h.state.doc));
!u && !p || (this.updateDebounceTimer && clearTimeout(this.updateDebounceTimer), this.updateDebounceTimer = window.setTimeout(() => {
this.updateHandler(h, u, p, d);
}, this.updateDelay));
}, this.updateHandler = (h, d, u, p) => {
const { composing: g } = h;
if (g || !d && !u)
return;
if (!this.getShouldShow(p)) {
this.hide();
return;
}
this.updatePosition(), this.show();
}, this.transactionHandler = ({ transaction: h }) => {
h.getMeta("bubbleMenu") === "updatePosition" && this.updatePosition();
};
var a;
this.editor = e, this.element = t, this.view = n, this.updateDelay = i, this.resizeDelay = s, this.appendTo = o, this.scrollTarget = (a = c == null ? void 0 : c.scrollTarget) != null ? a : window, this.getReferencedVirtualElement = l, this.floatingUIOptions = {
...this.floatingUIOptions,
...c
}, this.element.tabIndex = 0, r && (this.shouldShow = r), this.element.addEventListener("mousedown", this.mousedownHandler, { capture: !0 }), this.view.dom.addEventListener("dragstart", this.dragstartHandler), this.editor.on("focus", this.focusHandler), this.editor.on("blur", this.blurHandler), this.editor.on("transaction", this.transactionHandler), window.addEventListener("resize", this.resizeHandler), this.scrollTarget.addEventListener("scroll", this.resizeHandler), this.update(n, n.state), this.getShouldShow() && (this.show(), this.updatePosition());
}
get middlewares() {
const e = [];
return this.floatingUIOptions.flip && e.push(ks(typeof this.floatingUIOptions.flip != "boolean" ? this.floatingUIOptions.flip : void 0)), this.floatingUIOptions.shift && e.push(
Cs(typeof this.floatingUIOptions.shift != "boolean" ? this.floatingUIOptions.shift : void 0)
), this.floatingUIOptions.offset && e.push(
_s(typeof this.floatingUIOptions.offset != "boolean" ? this.floatingUIOptions.offset : void 0)
), this.floatingUIOptions.arrow && e.push(Ts(this.floatingUIOptions.arrow)), this.floatingUIOptions.size && e.push(Es(typeof this.floatingUIOptions.size != "boolean" ? this.floatingUIOptions.size : void 0)), this.floatingUIOptions.autoPlacement && e.push(
Ds(
typeof this.floatingUIOptions.autoPlacement != "boolean" ? this.floatingUIOptions.autoPlacement : void 0
)
), this.floatingUIOptions.hide && e.push(As(typeof this.floatingUIOptions.hide != "boolean" ? this.floatingUIOptions.hide : void 0)), this.floatingUIOptions.inline && e.push(
Is(typeof this.floatingUIOptions.inline != "boolean" ? this.floatingUIOptions.inline : void 0)
), e;
}
get virtualElement() {
var e;
const { selection: t } = this.editor.state, n = (e = this.getReferencedVirtualElement) == null ? void 0 : e.call(this);
if (n)
return n;
const i = ys(this.view, t.from, t.to);
let s = {
getBoundingClientRect: () => i,
getClientRects: () => [i]
};
if (t instanceof oo) {
let r = this.view.nodeDOM(t.from);
const o = r.dataset.nodeViewWrapper ? r : r.querySelector("[data-node-view-wrapper]");
o && (r = o), r && (s = {
getBoundingClientRect: () => r.getBoundingClientRect(),
getClientRects: () => [r.getBoundingClientRect()]
});
}
if (t instanceof ho) {
const { $anchorCell: r, $headCell: o } = t, l = r ? r.pos : o.pos, c = o ? o.pos : r.pos, a = this.view.nodeDOM(l), h = this.view.nodeDOM(c);
if (!a || !h)
return;
const d = a === h ? a.getBoundingClientRect() : Qo(
a.getBoundingClientRect(),
h.getBoundingClientRect()
);
s = {
getBoundingClientRect: () => d,
getClientRects: () => [d]
};
}
return s;
}
updatePosition() {
const e = this.virtualElement;
e && ri(e, this.element, {
placement: this.floatingUIOptions.placement,
strategy: this.floatingUIOptions.strategy,
middleware: this.middlewares
}).then(({ x: t, y: n, strategy: i }) => {
this.element.style.width = "max-content", this.element.style.position = i, this.element.style.left = `${t}px`, this.element.style.top = `${n}px`, this.isVisible && this.floatingUIOptions.onUpdate && this.floatingUIOptions.onUpdate();
});
}
update(e, t) {
const { state: n } = e, i = n.selection.from !== n.selection.to;
if (this.updateDelay > 0 && i) {
this.handleDebouncedUpdate(e, t);
return;
}
const s = !(t != null && t.selection.eq(e.state.selection)), r = !(t != null && t.doc.eq(e.state.doc));
this.updateHandler(e, s, r, t);
}
getShouldShow(e) {
var t;
const { state: n } = this.view, { selection: i } = n, { ranges: s } = i, r = Math.min(...s.map((c) => c.$from.pos)), o = Math.max(...s.map((c) => c.$to.pos));
return ((t = this.shouldShow) == null ? void 0 : t.call(this, {
editor: this.editor,
element: this.element,
view: this.view,
state: n,
oldState: e,
from: r,
to: o
})) || !1;
}
show() {
var e;
if (this.isVisible)
return;
this.element.style.visibility = "visible", this.element.style.opacity = "1";
const t = typeof this.appendTo == "function" ? this.appendTo() : this.appendTo;
(e = t ?? this.view.dom.parentElement) == null || e.appendChild(this.element), this.floatingUIOptions.onShow && this.floatingUIOptions.onShow(), this.isVisible = !0;
}
hide() {
this.isVisible && (this.element.style.visibility = "hidden", this.element.style.opacity = "0", this.element.remove(), this.floatingUIOptions.onHide && this.floatingUIOptions.onHide(), this.isVisible = !1);
}
destroy() {
this.hide(), this.element.removeEventListener("mousedown", this.mousedownHandler, { capture: !0 }), this.view.dom.removeEventListener("dragstart", this.dragstartHandler), window.removeEventListener("resize", this.resizeHandler), this.scrollTarget.removeEventListener("scroll", this.resizeHandler), this.editor.off("focus", this.focusHandler), this.editor.off("blur", this.blurHandler), this.editor.off("transaction", this.transactionHandler), this.floatingUIOptions.onDestroy && this.floatingUIOptions.onDestroy();
}
}, Vs = (e) => new Te({
key: typeof e.pluginKey == "string" ? new ie(e.pluginKey) : e.pluginKey,
view: (t) => new tl({ view: t, ...e })
});
Ce.create({
name: "bubbleMenu",
addOptions() {
return {
element: null,
pluginKey: "bubbleMenu",
updateDelay: void 0,
appendTo: void 0,
shouldShow: null
};
},
addProseMirrorPlugins() {
return this.options.element ? [
Vs({
pluginKey: this.options.pluginKey,
editor: this.editor,
element: this.options.element,
updateDelay: this.options.updateDelay,
options: this.options.options,
appendTo: this.options.appendTo,
getReferencedVirtualElement: this.options.getReferencedVirtualElement,
shouldShow: this.options.shouldShow
})
] : [];
}
});
var el = class {
constructor({ editor: e, element: t, view: n, options: i, appendTo: s, shouldShow: r }) {
this.preventHide = !1, this.isVisible = !1, this.shouldShow = ({ view: o, state: l }) => {
const { selection: c } = l, { $anchor: a, empty: h } = c, d = a.depth === 1, u = a.parent.isTextblock && !a.parent.type.spec.code && !a.parent.textContent && a.parent.childCount === 0 && !this.getTextContent(a.parent);
return !(!o.hasFocus() || !h || !d || !u || !this.editor.isEditable);
}, this.floatingUIOptions = {
strategy: "absolute",
placement: "right",
offset: 8,
flip: {},
shift: {},
arrow: !1,
size: !1,
autoPlacement: !1,
hide: !1,
inline: !1
}, this.updateHandler = (o, l, c, a) => {
const { composing: h } = o;
if (h || !l && !c)
return;
if (!this.getShouldShow(a)) {
this.hide();
return;
}
this.updatePosition(), this.show();
}, this.mousedownHandler = () => {
this.preventHide = !0;
}, this.focusHandler = () => {
setTimeout(() => this.update(this.editor.view));
}, this.blurHandler = ({ event: o }) => {
var l;
if (this.preventHide) {
this.preventHide = !1;
return;
}
o != null && o.relatedTarget && ((l = this.element.parentNode) != null && l.contains(o.relatedTarget)) || (o == null ? void 0 : o.relatedTarget) !== this.editor.view.dom && this.hide();
}, this.editor = e, this.element = t, this.view = n, this.appendTo = s, this.floatingUIOptions = {
...this.floatingUIOptions,
...i
}, this.element.tabIndex = 0, r && (this.shouldShow = r), this.element.addEventListener("mousedown", this.mousedownHandler, { capture: !0 }), this.editor.on("focus", this.focusHandler), this.editor.on("blur", this.blurHandler), this.update(n, n.state), this.getShouldShow() && (this.show(), this.updatePosition());
}
getTextContent(e) {
return Qr(e, { textSerializers: to(this.editor.schema) });
}
get middlewares() {
const e = [];
return this.floatingUIOptions.flip && e.push(ks(typeof this.floatingUIOptions.flip != "boolean" ? this.floatingUIOptions.flip : void 0)), this.floatingUIOptions.shift && e.push(
Cs(typeof this.floatingUIOptions.shift != "boolean" ? this.floatingUIOptions.shift : void 0)
), this.floatingUIOptions.offset && e.push(
_s(typeof this.floatingUIOptions.offset != "boolean" ? this.floatingUIOptions.offset : void 0)
), this.floatingUIOptions.arrow && e.push(Ts(this.floatingUIOptions.arrow)), this.floatingUIOptions.size && e.push(Es(typeof this.floatingUIOptions.size != "boolean" ? this.floatingUIOptions.size : void 0)), this.floatingUIOptions.autoPlacement && e.push(
Ds(
typeof this.floatingUIOptions.autoPlacement != "boolean" ? this.floatingUIOptions.autoPlacement : void 0
)
), this.floatingUIOptions.hide && e.push(As(typeof this.floatingUIOptions.hide != "boolean" ? this.floatingUIOptions.hide : void 0)), this.floatingUIOptions.inline && e.push(
Is(typeof this.floatingUIOptions.inline != "boolean" ? this.floatingUIOptions.inline : void 0)
), e;
}
getShouldShow(e) {
var t;
const { state: n } = this.view, { selection: i } = n, { ranges: s } = i, r = Math.min(...s.map((c) => c.$from.pos)), o = Math.max(...s.map((c) => c.$to.pos));
return (t = this.shouldShow) == null ? void 0 : t.call(this, {
editor: this.editor,
view: this.view,
state: n,
oldState: e,
from: r,
to: o
});
}
updatePosition() {
const { selection: e } = this.editor.state, t = ys(this.view, e.from, e.to);
ri({
getBoundingClientRect: () => t,
getClientRects: () => [t]
}, this.element, {
placement: this.floatingUIOptions.placement,
strategy: this.floatingUIOptions.strategy,
middleware: this.middlewares
}).then(({ x: i, y: s, strategy: r }) => {
this.element.style.width = "max-content", this.element.style.position = r, this.element.style.left = `${i}px`, this.element.style.top = `${s}px`, this.isVisible && this.floatingUIOptions.onUpdate && this.floatingUIOptions.onUpdate();
});
}
update(e, t) {
const n = !(t != null && t.selection.eq(e.state.selection)), i = !(t != null && t.doc.eq(e.state.doc));
this.updateHandler(e, n, i, t);
}
show() {
var e;
if (this.isVisible)
return;
this.element.style.visibility = "visible", this.element.style.opacity = "1";
const t = typeof this.appendTo == "function" ? this.appendTo() : this.appendTo;
(e = t ?? this.view.dom.parentElement) == null || e.appendChild(this.element), this.floatingUIOptions.onShow && this.floatingUIOptions.onShow(), this.isVisible = !0;
}
hide() {
this.isVisible && (this.element.style.visibility = "hidden", this.element.style.opacity = "0", this.element.remove(), this.floatingUIOptions.onHide && this.floatingUIOptions.onHide(), this.isVisible = !1);
}
destroy() {
this.hide(), this.element.removeEventListener("mousedown", this.mousedownHandler, { capture: !0 }), this.editor.off("focus", this.focusHandler), this.editor.off("blur", this.blurHandler), this.floatingUIOptions.onDestroy && this.floatingUIOptions.onDestroy();
}
}, Hs = (e) => new Te({
key: typeof e.pluginKey == "string" ? new ie(e.pluginKey) : e.pluginKey,
view: (t) => new el({ view: t, ...e })
});
Ce.create({
name: "floatingMenu",
addOptions() {
return {
element: null,
options: {},
pluginKey: "floatingMenu",
appendTo: void 0,
shouldShow: null
};
},
addProseMirrorPlugins() {
return this.options.element ? [
Hs({
pluginKey: this.options.pluginKey,
editor: this.editor,
element: this.options.element,
options: this.options.options,
appendTo: this.options.appendTo,
shouldShow: this.options.shouldShow
})
] : [];
}
});
var Q = xs.forwardRef(
({
pluginKey: e = "bubbleMenu",
editor: t,
updateDelay: n,
resizeDelay: i,
appendTo: s,
shouldShow: r = null,
getReferencedVirtualElement: o,
options: l,
children: c,
...a
}, h) => {
const d = Vt(document.createElement("div"));
typeof h == "function" ? h(d.current) : h && (h.current = d.current);
const { editor: u } = Ss(), p = t || u, g = {
updateDelay: n,
resizeDelay: i,
appendTo: s,
pluginKey: e,
shouldShow: r,
getReferencedVirtualElement: o,
options: l
}, m = Vt(g);
return m.current = g, rt(() => {
if (p != null && p.isDestroyed)
return;
if (!p) {
console.warn("BubbleMenu component is not rendered inside of an editor component or does not have editor prop.");
return;
}
const w = d.current;
w.style.visibility = "hidden", w.style.position = "absolute";
const b = Vs({
...m.current,
editor: p,
element: w
});
p.registerPlugin(b);
const T = m.current.pluginKey;
return () => {
p.unregisterPlugin(T), window.requestAnimationFrame(() => {
w.parentNode && w.parentNode.removeChild(w);
});
};
}, [p]), Os(/* @__PURE__ */ f("div", { ...a, children: c }), d.current);
}
);
xs.forwardRef(
({ pluginKey: e = "floatingMenu", editor: t, appendTo: n, shouldShow: i = null, options: s, children: r, ...o }, l) => {
const c = Vt(document.createElement("div"));
typeof l == "function" ? l(c.current) : l && (l.current = c.current);
const { editor: a } = Ss();
return rt(() => {
const h = c.current;
if (h.style.visibility = "hidden", h.style.position = "absolute", t != null && t.isDestroyed || a != null && a.isDestroyed)
return;
const d = t || a;
if (!d) {
console.warn(
"FloatingMenu component is not rendered inside of an editor component or does not have editor prop."
);
return;
}
const u = Hs({
editor: d,
element: h,
pluginKey: e,
appendTo: n,
shouldShow: i,
options: s
});
return d.registerPlugin(u), () => {
d.unregisterPlugin(e), window.requestAnimationFrame(() => {
h.parentNode && h.parentNode.removeChild(h);
});
};
}, [t, a, n, e, i, s]), Os(/* @__PURE__ */ f("div", { ...o, children: r }), c.current);
}
);
const nl = [
{ value: "note", label: "Note", icon: "Info" },
{ value: "tip", label: "Tip", icon: "Lightbulb" },
{ value: "important", label: "Important", icon: "AlertCircle" },
{ value: "warning", label: "Warning", icon: "TriangleAlert" },
{ value: "caution", label: "Caution", icon: "OctagonAlert" }
];
function qd() {
const e = J(), t = W(), { t: n } = Y(), { type: i, title: s, body: r } = Wt(t, Ve.name, {
type: "note",
title: "",
body: ""
}), [o, l] = B(!1), [c, a] = B("note"), [h, d] = B(""), [u, p] = B("");
rt(() => {
o && (a(i || "note"), d(s || ""), p(r || ""));
}, [o, i, s, r]);
const g = O(() => {
t && (t.chain().updateAttributes(Ve.name, {
type: c,
title: h,
body: u
}).focus().run(), l(!1));
}, [t, c, h, u]), m = O(() => {
l(!1);
}, []), w = O(() => {
se(Ve.name, t);
}, [t]), b = O(() => t.isActive(Ve.name), [t]);
return e ? /* @__PURE__ */ f(
Q,
{
editor: t,
options: { placement: "top", offset: 8, flip: !0 },
pluginKey: "RichTextBubbleCallout",
shouldShow: b,
children: /* @__PURE__ */ x("div", { className: "richtext-flex richtext-items-center richtext-gap-2 richtext-rounded-md !richtext-border !richtext-border-solid !richtext-border-border richtext-bg-popover richtext-p-1 richtext-text-popover-foreground richtext-shadow-md richtext-outline-none", children: [
/* @__PURE__ */ x(
Ee,
{
onOpenChange: l,
open: o,
children: [
/* @__PURE__ */ f(De, { asChild: !0, children: /* @__PURE__ */ f(
y,
{
icon: "Pencil",
tooltip: n("editor.callout.edit.title")
}
) }),
/* @__PURE__ */ x(Ae, { children: [
/* @__PURE__ */ f(Ie, { children: n("editor.callout.edit.title") }),
/* @__PURE__ */ x("div", { className: "richtext-space-y-4 richtext-py-4", children: [
/* @__PURE__ */ x("div", { className: "richtext-space-y-2", children: [
/* @__PURE__ */ f(Et, { children: n("editor.callout.dialog.type") }),
/* @__PURE__ */ x(
bo,
{
onValueChange: a,
value: c,
children: [
/* @__PURE__ */ f(xo, { children: /* @__PURE__ */ f(
yo,
{
className: "richtext-text-accent",
placeholder: n("editor.callout.dialog.type.placeholder")
}
) }),
/* @__PURE__ */ f(So, { children: nl.map((T) => /* @__PURE__ */ f(
vo,
{
value: T.value,
children: n(`editor.callout.type.${T.value}`)
},
T.value
)) })
]
}
)
] }),
/* @__PURE__ */ x("div", { className: "richtext-space-y-2", children: [
/* @__PURE__ */ f(Et, { children: n("editor.callout.dialog.title.label") }),
/* @__PURE__ */ f(
Gt,
{
onChange: (T) => d(T.target.value),
placeholder: n("editor.callout.dialog.title.placeholder"),
type: "text",
value: h
}
)
] }),
/* @__PURE__ */ x("div", { className: "richtext-space-y-2", children: [
/* @__PURE__ */ f(Et, { children: n("editor.callout.dialog.body.label") }),
/* @__PURE__ */ f(
Gt,
{
onChange: (T) => p(T.target.value),
placeholder: n("editor.callout.dialog.body.placeholder"),
type: "text",
value: u
}
)
] })
] }),
/* @__PURE__ */ x(Oe, { children: [
/* @__PURE__ */ f(
At,
{
onClick: m,
variant: "outline",
children: n("editor.callout.dialog.button.cancel")
}
),
/* @__PURE__ */ f(At, { onClick: g, children: n("editor.callout.dialog.button.apply") })
] })
] })
]
}
),
/* @__PURE__ */ f(
y,
{
action: w,
icon: "Trash2",
tooltip: n("editor.delete")
}
)
] })
}
) : /* @__PURE__ */ f(I, {});
}
function Xd() {
const e = J(), t = W(), { t: n } = Y(), i = O(() => t.isActive(Ai.name), [t]), s = O(() => se(Ai.name, t), [t]), r = O(() => t.chain().focus().addColBefore().run(), [t]), o = O(() => t.chain().focus().addColAfter().run(), [t]), l = O(() => t.chain().focus().deleteCol().run(), [t]);
return e ? /* @__PURE__ */ f(
Q,
{
editor: t,
options: { placement: "bottom", offset: 8, flip: !0 },
pluginKey: "RichTextBubbleColumns",
shouldShow: i,
children: /* @__PURE__ */ x("div", { className: "richtext-flex richtext-items-center richtext-gap-2 richtext-rounded-md !richtext-border !richtext-border-solid !richtext-border-border richtext-bg-popover richtext-p-1 richtext-text-popover-foreground richtext-shadow-md richtext-outline-none", children: [
/* @__PURE__ */ f(
y,
{
action: r,
icon: "ColumnAddLeft",
tooltip: n("editor.table.menu.insertColumnBefore")
}
),
/* @__PURE__ */ f(
y,
{
action: o,
icon: "ColumnAddRight",
tooltip: n("editor.table.menu.insertColumnAfter")
}
),
/* @__PURE__ */ f(
y,
{
action: l,
icon: "DeleteColumn",
tooltip: n("editor.table.menu.deleteColumn")
}
),
/* @__PURE__ */ f(
y,
{
action: s,
icon: "Trash2",
tooltip: n("editor.table.menu.delete_column")
}
)
] })
}
) : /* @__PURE__ */ f(I, {});
}
function il(e, t) {
const n = ["size-small", "size-medium", "size-large"], i = [
"SizeS",
"SizeM",
"SizeL"
];
return n.map((s, r) => ({
type: `image-${s}`,
component: y,
componentProps: {
tooltip: t(`editor.${s.replace("-", ".")}.tooltip`),
icon: i[r],
action: () => e.commands.updateImage({ width: Ze[s] }),
isActive: () => e.isActive("image", { width: Ze[s] })
}
}));
}
function sl(e, t) {
const n = ["size-small", "size-medium", "size-large"], i = [
"SizeS",
"SizeM",
"SizeL"
];
return n.map((s, r) => ({
type: `image-${s}`,
component: y,
componentProps: {
tooltip: t(`editor.${s.replace("-", ".")}.tooltip`),
icon: i[r],
action: () => e.commands.updateImageGif({ width: Ze[s] }),
isActive: () => e.isActive("image", { width: Ze[s] })
}
}));
}
function rl(e, t) {
const n = ["left", "center", "right"], i = {
left: "AlignLeft",
center: "AlignCenter",
right: "AlignRight"
};
return n.map((s) => ({
type: `image-${s}`,
component: y,
componentProps: {
tooltip: t(`editor.textalign.${s}.tooltip`),
icon: i[s],
action: () => {
var r, o;
return (o = (r = e.commands) == null ? void 0 : r.setAlignImage) == null ? void 0 : o.call(r, s);
},
isActive: () => e.isActive({ align: s }) || !1,
disabled: !1
}
}));
}
function ol(e, t) {
const n = ["left", "center", "right"], i = {
left: "AlignLeft",
center: "AlignCenter",
right: "AlignRight"
};
return n.map((s) => ({
type: `image-${s}`,
component: y,
componentProps: {
tooltip: t(`editor.textalign.${s}.tooltip`),
icon: i[s],
action: () => {
var r, o;
return (o = (r = e.commands) == null ? void 0 : r.setAlignImageGif) == null ? void 0 : o.call(r, s);
},
isActive: () => e.isActive({ align: s }) || !1,
disabled: !1
}
}));
}
function ll(e, t) {
const n = ["left", "center", "right"], i = {
left: "AlignLeft",
center: "AlignCenter",
right: "AlignRight"
};
return n.map((s) => ({
type: `image-${s}`,
component: y,
componentProps: {
tooltip: t(`editor.textalign.${s}.tooltip`),
icon: i[s],
action: () => {
var r, o;
return (o = (r = e.commands) == null ? void 0 : r.setAlignImageMermaid) == null ? void 0 : o.call(r, s);
},
isActive: () => e.isActive({ align: s }) || !1,
disabled: !1
}
}));
}
function cl(e, t) {
const n = ["left", "center", "right"], i = {
left: "AlignLeft",
center: "AlignCenter",
right: "AlignRight"
};
return n.map((s) => ({
type: `image-${s}`,
component: y,
componentProps: {
tooltip: t(`editor.textalign.${s}.tooltip`),
icon: i[s],
action: () => {
var r, o;
return (o = (r = e.commands) == null ? void 0 : r.setAlignImageDrawer) == null ? void 0 : o.call(r, s);
},
isActive: () => e.isActive({ align: s }) || !1,
disabled: !1
}
}));
}
function al(e) {
return [
{ type: "flex-start", icon: "AlignLeft", tooltip: "Align left" },
{ type: "center", icon: "AlignCenter", tooltip: "Align center" },
{ type: "flex-end", icon: "AlignRight", tooltip: "Align right" }
].map((n) => ({
type: `video-align-${n.type}`,
component: y,
componentProps: {
tooltip: n.tooltip,
icon: n.icon,
action: () => e.commands.updateVideo({ align: n.type }),
isActive: () => e.getAttributes("video").align === n.type
}
}));
}
function hl(e, t) {
const n = ["size-small", "size-medium", "size-large"], i = [
"SizeS",
"SizeM",
"SizeL"
];
return n.map((s, r) => ({
type: `video-${s}`,
component: y,
componentProps: {
tooltip: t(`editor.${s.replace("-", ".")}.tooltip`),
icon: i[r],
action: () => e.commands.updateVideo({ width: Di[s] }),
isActive: () => e.isActive("video", { width: Di[s] })
}
}));
}
function dl(e, t) {
return [
{
type: "flipX",
component: y,
componentProps: {
editor: e,
tooltip: t("editor.tooltip.flipX"),
icon: "FlipX",
action: () => {
const n = e.getAttributes("image"), { flipX: i } = n;
e.chain().focus(void 0, { scrollIntoView: !1 }).updateImage({
flipX: !i
}).run();
}
}
},
{
type: "flipY",
component: y,
componentProps: {
editor: e,
tooltip: t("editor.tooltip.flipY"),
icon: "FlipY",
action: () => {
const n = e.getAttributes("image"), { flipY: i } = n;
e.chain().focus(void 0, { scrollIntoView: !1 }).updateImage({
flipY: !i
}).run();
}
}
},
...il(e, t),
...rl(e, t),
{
type: "remove",
component: y,
componentProps: {
editor: e,
tooltip: t("editor.remove"),
icon: "Trash2",
action: () => {
const { state: n, dispatch: i } = e.view;
_e(n, i);
}
}
}
];
}
function ul(e, t) {
return [
...sl(e, t),
...ol(e, t),
{
type: "remove",
component: y,
componentProps: {
editor: e,
tooltip: t("editor.remove"),
icon: "Trash2",
action: () => {
const { state: n, dispatch: i } = e.view;
_e(n, i);
}
}
}
];
}
function fl(e, t) {
return [
...ll(e, t),
{
type: "edit",
component: y,
componentProps: {
editor: e,
tooltip: t("editor.edit"),
icon: "Pencil",
action: () => !0
}
},
{
type: "remove",
component: y,
componentProps: {
editor: e,
tooltip: t("editor.remove"),
icon: "Trash2",
action: () => {
const { state: n, dispatch: i } = e.view;
_e(n, i);
}
}
}
];
}
function pl(e, t) {
return [
...cl(e, t),
{
type: "edit",
component: y,
componentProps: {
editor: e,
tooltip: t("editor.edit"),
icon: "Pencil",
action: () => !0
}
},
{
type: "remove",
component: y,
componentProps: {
editor: e,
tooltip: t("editor.remove"),
icon: "Trash2",
action: () => {
const { state: n, dispatch: i } = e.view;
_e(n, i);
}
}
}
];
}
function gl(e, t) {
return [
...hl(e, t),
...al(e),
{
type: "remove",
component: y,
componentProps: {
editor: e,
tooltip: t("editor.remove"),
icon: "Trash2",
action: () => {
const { state: n, dispatch: i } = e.view;
_e(n, i);
}
}
}
];
}
let he = !1;
function ml({ editor: e, attrs: t, extension: n }) {
const [i, s] = B(!1), r = Vt(null), o = Vt(null), { alt: l, align: c } = t, a = n == null ? void 0 : n.options.upload, h = () => {
(async () => {
const S = document.querySelector("#easydrawer");
S && (r.current = new _o(S, {
wheelEventsEnabled: !1,
disableZoom: !0
}), o.current = To(r.current), o.current.addDefaultToolWidgets(), r.current.loadFromSVG(decodeURIComponent(l)));
})();
};
rt(() => {
i && setTimeout(() => {
h();
}, 200);
}, [i]);
const d = async () => {
if (r.current) {
const E = r.current.toSVG(), S = E.outerHTML, v = `drawer-${Ns()}.svg`;
let U = Us(E.outerHTML);
if (a) {
const $ = Ms(U, v);
U = await a($);
}
e == null || e.chain().focus().setDrawer(
{
type: "drawer",
src: U,
alt: encodeURIComponent(S),
width: 426,
height: 212
},
!!S
).run(), e == null || e.commands.setAlignImageDrawer(c);
}
s(!1);
}, u = (E) => {
const S = r.current.toolController.getPrimaryTools()[2], v = o.current.getWidgetById("pen-1");
S && v && (S.setColor(E), v.serializeState());
}, p = (E) => {
const S = r.current.toolController.getPrimaryTools()[2], v = o.current.getWidgetById("pen-1");
S && v && (S.setThickness(E), v.serializeState());
}, g = (E) => {
const S = r.current.toolController.getPrimaryTools()[3], v = o.current.getWidgetById("pen-2");
S && v && (S.setColor(E), v.serializeState());
}, m = (E) => {
const S = o.current.getWidgetById("shape");
S && S.setShapeType(E);
}, w = (E) => {
const S = r.current.toolController.getPrimaryTools()[5], v = o.current.getWidgetById("shape");
S && v && (S.setColor(E), v.serializeState());
}, b = (E) => {
const S = r.current.toolController.getPrimaryTools()[5], v = o.current.getWidgetById("shape");
S && v && (S.setThickness(E), v.serializeState());
}, T = (E) => {
const S = r.current.toolController.getPrimaryTools()[5], v = o.current.getWidgetById("shape");
S && v && (S.setBorderColor(E), v.serializeState());
}, M = () => {
if (he) {
for (; r.current.history.redoStackSize > 0; )
r.current.history.redo();
he = !1;
return;
}
r.current.history.undo();
};
return /* @__PURE__ */ x(
Ee,
{
onOpenChange: s,
open: i,
children: [
/* @__PURE__ */ f(De, { asChild: !0, children: /* @__PURE__ */ f(
y,
{
action: () => s(!0),
icon: "Pencil",
tooltip: "Edit Drawer"
}
) }),
/* @__PURE__ */ x(Ae, { className: "richtext-z-[99999] !richtext-max-w-[1300px]", children: [
/* @__PURE__ */ f(Ie, { children: "Edit Drawer" }),
/* @__PURE__ */ x("div", { style: { height: "100%", borderWidth: 1, background: "white", position: "relative" }, children: [
/* @__PURE__ */ f(
"div",
{
className: "richtext-size-full",
id: "easydrawer"
}
),
/* @__PURE__ */ f(
Co,
{
changeBorderColorShape: T,
changeColorShape: w,
changeShape: m,
onClear: () => {
if (!he) {
for (; r.current.history.undoStackSize > 0; )
M();
he = !0;
}
},
onRedo: () => {
he || r.current.history.redo();
},
onThicknessChange: b,
onUndo: M,
refEditor: r,
setColorHighlight: g,
setColorPen: u,
setThicknessPen: p
}
)
] }),
/* @__PURE__ */ f(Oe, { children: /* @__PURE__ */ f(
At,
{
onClick: d,
type: "button",
children: "Save changes"
}
) })
] })
]
}
);
}
function wl({ item: e, disabled: t, editor: n }) {
var s;
const i = e.component;
return i ? /* @__PURE__ */ f(ni, { children: e.type === "divider" ? /* @__PURE__ */ f(
Dt,
{
className: "!richtext-mx-1 !richtext-my-2 !richtext-h-[16px]",
orientation: "vertical"
}
) : /* @__PURE__ */ f(
i,
{
...e.componentProps,
disabled: t || ((s = e == null ? void 0 : e.componentProps) == null ? void 0 : s.disabled),
editor: n
}
) }) : /* @__PURE__ */ f(I, {});
}
function Zd() {
const { lang: e, t } = Y(), n = J(), i = W(), s = Wt(i, kn.name), r = Rs(kn.name), o = ({ editor: c }) => {
const { selection: a } = c.view.state, { $from: h, to: d } = a;
let u = !1;
return c.view.state.doc.nodesBetween(h.pos, d, (p) => {
if (p.type.name === kn.name)
return u = !0, !1;
}), u;
}, l = yt(() => pl(i, t), [i, e, t]);
return n ? /* @__PURE__ */ f(
Q,
{
editor: i,
options: { placement: "bottom", offset: 8, flip: !0 },
pluginKey: "RichTextBubbleDrawer",
shouldShow: o,
children: l != null && l.length ? /* @__PURE__ */ f("div", { className: "richtext-flex richtext-items-center richtext-gap-2 richtext-rounded-md !richtext-border !richtext-border-solid !richtext-border-border richtext-bg-popover richtext-p-1 richtext-text-popover-foreground richtext-shadow-md richtext-outline-none", children: l == null ? void 0 : l.map((c, a) => c.type === "edit" && (s != null && s.src) ? /* @__PURE__ */ f(
ml,
{
attrs: s,
editor: i,
extension: r
},
`bubbleMenu-drawer-${a}`
) : /* @__PURE__ */ f(
wl,
{
editor: i,
item: c
},
`bubbleMenu-drawer-${a}`
)) }) : /* @__PURE__ */ f(I, {})
}
) : /* @__PURE__ */ f(I, {});
}
const $s = ({ width: e, maxWidth: t, height: n, onOk: i, children: s }) => {
const { t: r } = Y(), [o, l] = B({
width: "",
height: "",
maxWidth: ""
});
rt(() => {
l({
width: e,
height: n,
maxWidth: t
});
}, [n, t, e]);
function c(a) {
a.preventDefault(), a.stopPropagation(), i(o);
}
return /* @__PURE__ */ x(Ls, { modal: !0, children: [
/* @__PURE__ */ f(Ps, { asChild: !0, children: s }),
/* @__PURE__ */ f(Bs, { children: /* @__PURE__ */ x(
"form",
{
className: "richtext-flex richtext-flex-col richtext-gap-2",
onSubmit: c,
children: [
/* @__PURE__ */ f(Et, { className: "mb-[6px]", children: "Width" }),
/* @__PURE__ */ f("div", { className: "richtext-flex richtext-w-full richtext-max-w-sm richtext-items-center richtext-gap-1.5", children: /* @__PURE__ */ f("div", { className: "richtext-relative richtext-w-full richtext-max-w-sm richtext-items-center", children: /* @__PURE__ */ f(
Gt,
{
onChange: (a) => l({ ...o, width: a.target.value }),
required: !0,
type: "number",
value: o.width
}
) }) }),
/* @__PURE__ */ f(Et, { className: "mb-[6px]", children: "Max Width" }),
/* @__PURE__ */ f("div", { className: "richtext-flex richtext-w-full richtext-max-w-sm richtext-items-center richtext-gap-1.5", children: /* @__PURE__ */ f("div", { className: "richtext-relative richtext-w-full richtext-max-w-sm richtext-items-center", children: /* @__PURE__ */ f(
Gt,
{
onChange: (a) => l({ ...o, maxWidth: a.target.value }),
required: !0,
type: "number",
value: o.maxWidth
}
) }) }),
/* @__PURE__ */ f(Et, { className: "mb-[6px]", children: "Height" }),
/* @__PURE__ */ f("div", { className: "richtext-flex richtext-w-full richtext-max-w-sm richtext-items-center richtext-gap-1.5", children: /* @__PURE__ */ f("div", { className: "richtext-relative richtext-w-full richtext-max-w-sm richtext-items-center", children: /* @__PURE__ */ f(
Gt,
{
onChange: (a) => l({ ...o, height: a.target.value }),
required: !0,
type: "number",
value: o.height
}
) }) }),
/* @__PURE__ */ f(
At,
{
className: "richtext-mt-2 richtext-self-end",
type: "submit",
children: r("editor.link.dialog.button.apply")
}
)
]
}
) })
] });
}, Lt = /* @__PURE__ */ new Map();
function bl(e) {
const t = e.options.element;
Lt.has("width") || Lt.set("width", t.clientWidth), Lt.has("width") && Lt.get("width") <= 0 && Lt.set("width", t.clientWidth);
const n = { attributes: !0, childList: !0, subtree: !0 }, i = function() {
Lt.set("width", t.clientWidth);
}, s = new MutationObserver(i);
return s.observe(t, n), e.on("destroy", () => {
s.disconnect();
}), { width: Lt.get("width") };
}
function Qd() {
const e = J(), t = W(), { t: n } = Y(), { width: i } = bl(t), s = Wt(t, ce.name, {
defaultShowPicker: !1,
createUser: "",
width: 0,
height: 0
}), { defaultShowPicker: r, createUser: o, width: l, height: c } = s, a = O(
(p) => {
t.chain().updateAttributes(ce.name, p).setNodeSelection(t.state.selection.from).focus().run();
},
[t]
), h = O(() => {
const p = fo.EXCALIDRAW(t.id);
po(p, s);
}, [t, s]), d = O(() => t.isActive(ce.name), [t]), u = O(() => se(ce.name, t), [t]);
return rt(() => {
r && (h(), t.chain().updateAttributes(ce.name, { defaultShowPicker: !1 }).focus().run());
}, [o, r, t, h]), e ? /* @__PURE__ */ f(
Q,
{
editor: t,
options: { placement: "bottom", offset: 8, flip: !0 },
pluginKey: "RichTextBubbleExcalidraw",
shouldShow: d,
children: /* @__PURE__ */ x("div", { className: "richtext-flex richtext-items-center richtext-gap-2 richtext-rounded-md !richtext-border !richtext-border-solid !richtext-border-border richtext-bg-popover richtext-p-1 richtext-text-popover-foreground richtext-shadow-md richtext-outline-none", children: [
/* @__PURE__ */ f(
y,
{
action: h,
icon: "Pencil",
tooltip: n("editor.edit")
}
),
/* @__PURE__ */ f(
$s,
{
height: c,
maxWidth: i,
onOk: a,
width: l,
children: /* @__PURE__ */ f(
y,
{
icon: "Settings",
tooltip: n("editor.settings")
}
)
}
),
/* @__PURE__ */ f(
y,
{
action: u,
icon: "Trash2",
tooltip: n("editor.delete")
}
)
] })
}
) : /* @__PURE__ */ f(I, {});
}
function tu() {
const e = J(), t = W(), { t: n } = Y(), { width: i, height: s, src: r } = Wt(t, ae.name, {
width: 0,
height: 0,
src: "",
defaultShowPicker: !1
}), [o, l] = B(!1), [c, a] = B(""), h = O((w) => {
var b;
(b = w == null ? void 0 : w.preventDefault) == null || b.call(w), l(!1);
}, [l]);
rt(() => {
o && a(r);
}, [o, r]);
const d = O((w) => {
var T;
(T = w == null ? void 0 : w.preventDefault) == null || T.call(w);
const b = Eo(c);
t.chain().updateAttributes(ae.name, {
src: (b == null ? void 0 : b.src) || c
}).setNodeSelection(t.state.selection.from).focus().run(), l(!1);
}, [t, c, l]), u = O(() => {
window.open(r, "_blank");
}, [r]), p = O(
(w) => {
t.chain().updateAttributes(ae.name, w).setNodeSelection(t.state.selection.from).focus().run();
},
[t]
), g = O(() => t.isActive(ae.name) && !r, [t, r]), m = O(() => se(ae.name, t), [t]);
return e ? /* @__PURE__ */ f(I, { children: /* @__PURE__ */ f(
Q,
{
editor: t,
options: { placement: "bottom", offset: 8, flip: !0 },
pluginKey: "RichTextBubbleIframe",
shouldShow: g,
children: /* @__PURE__ */ x("div", { className: "richtext-flex richtext-items-center richtext-gap-2 richtext-rounded-md !richtext-border !richtext-border-solid !richtext-border-border richtext-bg-popover richtext-p-1 richtext-text-popover-foreground richtext-shadow-md richtext-outline-none", children: [
/* @__PURE__ */ f(
y,
{
action: u,
icon: "Eye",
tooltip: "Visit Link"
}
),
/* @__PURE__ */ x(
Ee,
{
onOpenChange: l,
open: o,
children: [
/* @__PURE__ */ f(De, { asChild: !0, children: /* @__PURE__ */ f(
y,
{
icon: "Pencil",
tooltip: "Open Edit Link"
}
) }),
/* @__PURE__ */ x(Ae, { children: [
/* @__PURE__ */ f(go, { children: /* @__PURE__ */ f(Ie, { children: "Edit Link Iframe" }) }),
/* @__PURE__ */ f(
Gt,
{
autoFocus: !0,
onInput: (w) => a(w.target.value),
placeholder: "Enter link",
type: "url",
value: c
}
),
/* @__PURE__ */ x(Oe, { children: [
/* @__PURE__ */ f(
At,
{
onClick: h,
type: "button",
children: "Cancel"
}
),
/* @__PURE__ */ f(
At,
{
onClick: d,
type: "button",
children: "OK"
}
)
] })
] })
]
}
),
/* @__PURE__ */ f(
$s,
{
height: s,
onOk: p,
width: i,
children: /* @__PURE__ */ f(
y,
{
icon: "Settings",
tooltip: n("editor.settings")
}
)
}
),
/* @__PURE__ */ f(
y,
{
action: m,
icon: "Trash2",
tooltip: n("editor.delete")
}
)
] })
}
) }) : /* @__PURE__ */ f(I, {});
}
function xl({
children: e,
visible: t,
toggleVisible: n
}) {
const { t: i } = Y(), s = W(), r = Wt(s, Un.name, {
text: "",
macros: ""
}), { text: o, macros: l } = r, [c, a] = B(decodeURIComponent(o || "")), [h, d] = B(decodeURIComponent(l || ""));
rt(() => {
t && (a(decodeURIComponent(o || "")), d(decodeURIComponent(l || "")));
}, [t]);
const u = O(() => {
s.chain().focus().setKatex({ text: encodeURIComponent(c), macros: encodeURIComponent(h) }).run(), a(""), d(""), n(!1);
}, [s, c, h, n]), p = yt(() => {
try {
return Do.renderToString(c, {
macros: ko(h || "")
});
} catch {
return c;
}
}, [c, h]), g = yt(
() => `${c}`.trim() ? p : null,
[c, p]
);
return /* @__PURE__ */ x(
Ee,
{
onOpenChange: n,
open: t,
children: [
/* @__PURE__ */ f(
De,
{
asChild: !0,
children: e
}
),
/* @__PURE__ */ x(Ae, { className: "richtext-z-[99999] !richtext-max-w-[1300px]", children: [
/* @__PURE__ */