UNPKG

tiptap-editor-react

Version:

A modern WYSIWYG rich text editor based on tiptap and shadcn ui for React

1,404 lines 242 kB
var sn = Object.defineProperty; var cn = (e, t, n) => t in e ? sn(e, t, { enumerable: !0, configurable: !0, writable: !0, value: n }) : e[t] = n; var G = (e, t, n) => cn(e, typeof t != "symbol" ? t + "" : t, n); import { g as ln, h as dn, U as un, S as hn, C as mn, j as Te, a as he, k as fn, l as gn, R as $e, F as _n, H as bn, T as pn, o as H, p as xn, q as wn, r as yn, N as Le, O as vn, s as kn, t as Cn, v as Nn, L as An, w as Tn, m as Se, x as Ln, y as Sn, z as Mn, P as In, A as Hn, G as zn, J as En, K as Rn, M as On, Q as Dn, V as Pn, W as Bn, X as $n, Y as Rt, Z as Ot, _ as Dt, $ as et, I as Fn, a0 as jn, a1 as Un, a2 as Vn, a3 as qn, a4 as Kn } from "./tiptap-DXj1s_xP.js"; import { P as Q, b as ee, $ as me, a0 as ge, aq as U, at as Wn, T as Pt, A as Gn, ar as Bt, ao as $t, aw as xt, ax as wt, ay as Xn, a4 as Yn, au as Zn, aD as Jn } from "./vendor-DIvoV5tx.js"; import { jsxs as f, jsx as o, Fragment as _e } from "react/jsx-runtime"; import * as V from "react"; import De, { useMemo as E, useState as v, useRef as Y, useCallback as D, Fragment as tt, forwardRef as nt, useImperativeHandle as it, useEffect as R } from "react"; import { ChevronDown as at, Check as Ft, ChevronUp as Qn, Copy as ei, CopyCheck as ti, Clock3 as ni, Laugh as ii, LucideTableProperties as ai, LucideSheet as oi, LucideImage as ri, LucideFile as si, LucideVideo as ci, LucideAudioLines as li } from "lucide-react"; import { i as ot, T as Fe, a as je, B as P, b as Ue, g as rt, A as y, D as oe, c as re, d as se, e as di, f as B, u as st, h as ui, I as O, j as we, k as jt, l as Ye, m as hi, n as ct, P as ye, o as ve, p as ke, q as lt, C as mi, H as fi, L as gi, r as _i, M as bi, s as pi, t as yt, v as Me, w as dt, x as ut, y as ht, z as mt, E as xi, F as wi, G as yi, J as Pe, K as Be, N as vi, S as ki, O as Ci, Q as Ni, U as Z, V as Ai, W as Ti, X as Li, Y as Si, Z as Mi, _ as Ut } from "./RichTextEditor-Did4BTyI.js"; import { a1 as ms, $ as fs, a2 as gs, a0 as _s, a3 as bs, a4 as ps } from "./RichTextEditor-Did4BTyI.js"; import { M as Ii, D as Vt, u as $, j as Hi, k as zi, n as vt, h as z, o as qt, p as Ei, I as kt, g as Ri, f as Ct, V as Oi, T as Ie, q as He, r as ze } from "./index-BUxFK1y_.js"; import * as ce from "@radix-ui/react-tabs"; import { bundledThemes as Kt, bundledLanguages as Wt, createHighlighter as Di } from "shiki"; import * as I from "@radix-ui/react-select"; import { Slot as Pi } from "@radix-ui/react-slot"; import ft from "tippy.js"; import Bi from "react-image-crop"; import * as Ze from "@radix-ui/react-checkbox"; import gt from "scroll-into-view-if-needed"; import { Packer as $i } from "docx"; import { DocxSerializer as Fi, defaultNodes as ie, defaultMarks as ji } from "prosemirror-docx"; const _t = De.forwardRef( ({ asChild: e, ...t }, n) => { var r; const i = ot[t.icon]; return /* @__PURE__ */ f(Fe, { children: [ /* @__PURE__ */ o(je, { asChild: !0, children: /* @__PURE__ */ o( e ? Pi : P, { className: "richtext-h-[32px] richtext-min-w-24 richtext-overflow-hidden richtext-px-[5px] richtext-py-0", disabled: t == null ? void 0 : t.disabled, ref: n, variant: "ghost", ...t, children: /* @__PURE__ */ f("div", { className: "richtext-flex richtext-h-full richtext-items-center richtext-font-normal", children: [ (t == null ? void 0 : t.title) && /* @__PURE__ */ o("div", { className: "richtext-grow richtext-truncate richtext-text-left richtext-text-sm", children: t == null ? void 0 : t.title }), i && /* @__PURE__ */ o(i, { className: "richtext-ml-1 richtext-size-3 richtext-shrink-0 richtext-text-zinc-500" }) ] }) } ) }), /* @__PURE__ */ o(Ue, { children: /* @__PURE__ */ f("div", { className: "richtext-flex richtext-max-w-24 richtext-flex-col richtext-items-center richtext-text-center", children: [ (t == null ? void 0 : t.tooltip) && /* @__PURE__ */ o("div", { children: t == null ? void 0 : t.tooltip }), /* @__PURE__ */ o("div", { className: "richtext-flex", children: !!((r = t == null ? void 0 : t.shortcutKeys) != null && r.length) && /* @__PURE__ */ o("span", { children: rt(t == null ? void 0 : t.shortcutKeys) }) }) ] }) }) ] }); } ), Mr = ln.extend({ addOptions() { var e; return { ...(e = this.parent) == null ? void 0 : e.call(this), button: ({ editor: t, t: n }) => ({ component: y, componentProps: { action: () => t.commands.toggleBold(), isActive: () => t.isActive("bold") || !1, disabled: !t.can().toggleBold(), icon: "Bold", shortcutKeys: ["mod", "B"], tooltip: n("editor.bold.tooltip") } }) }; } }), Ir = dn.extend({ addOptions() { var e; return { ...(e = this.parent) == null ? void 0 : e.call(this), button({ editor: t, t: n }) { return { component: y, componentProps: { action: () => t.commands.toggleItalic(), isActive: () => t.isActive("italic") || !1, disabled: !t.can().toggleItalic(), shortcutKeys: ["mod", "I"], icon: "Italic", tooltip: n("editor.italic.tooltip") } }; } }; } }), Hr = un.extend({ addOptions() { var e; return { ...(e = this.parent) == null ? void 0 : e.call(this), button({ editor: t, t: n }) { return { component: y, componentProps: { action: () => t.commands.toggleUnderline(), isActive: () => t.isActive("underline") || !1, disabled: !t.can().toggleUnderline(), icon: "Underline", shortcutKeys: ["mod", "U"], tooltip: n("editor.underline.tooltip") } }; } }; } }), zr = hn.extend({ addOptions() { var e; return { ...(e = this.parent) == null ? void 0 : e.call(this), button: ({ editor: t, t: n }) => ({ component: y, componentProps: { action: () => t.commands.toggleStrike(), isActive: () => t.isActive("strike") || !1, disabled: !t.can().toggleStrike(), icon: "Strikethrough", shortcutKeys: ["shift", "mod", "S"], tooltip: n("editor.strike.tooltip") } }) }; } }), Er = mn.extend({ addOptions() { var e; return { ...(e = this.parent) == null ? void 0 : e.call(this), button: ({ editor: t, t: n }) => ({ component: y, componentProps: { action: () => t.commands.toggleCode(), isActive: () => t.isActive("code") || !1, disabled: !t.can().toggleCode(), icon: "Code", shortcutKeys: ["mod", "E"], tooltip: n("editor.code.tooltip") } }) }; } }); let X, Ce; const Ke = /* @__PURE__ */ new Set(), We = /* @__PURE__ */ new Set(); function Ui() { return X; } function Vi(e) { if (!X && !Ce) { const t = e.themes.filter( (i) => !!i && i in Kt ), n = e.languages.filter( (i) => !!i && i in Wt ); return Ce = Di({ themes: t, langs: n }).then((i) => { X = i; }), Ce; } if (Ce) return Ce; } async function Gt(e) { return X && !X.getLoadedThemes().includes(e) && !We.has(e) && e in Kt ? (We.add(e), await X.loadTheme(e), We.delete(e), !0) : !1; } async function Xt(e) { return X && !X.getLoadedLanguages().includes(e) && !Ke.has(e) && e in Wt ? (Ke.add(e), await X.loadLanguage(e), Ke.delete(e), !0) : !1; } async function qi({ doc: e, name: t, defaultTheme: n, defaultLanguage: i }) { const a = Te(e, (c) => c.type.name === t), r = [ ...a.map((c) => c.node.attrs.theme), n ], s = [ ...a.map((c) => c.node.attrs.language), i ]; X ? await Promise.all([ ...r.flatMap((c) => Gt(c)), ...s.flatMap((c) => !!c && Xt(c)) ]) : await Vi({ languages: s, themes: r }); } function Nt({ doc: e, name: t, defaultTheme: n, defaultLanguage: i }) { const a = []; return Te(e, (s) => s.type.name === t).forEach((s) => { let c = s.pos + 1, l = s.node.attrs.language || i; const u = s.node.attrs.theme || n, d = Ui(); if (!d) return; d.getLoadedLanguages().includes(l) || (l = "plaintext"); const m = d.getLoadedThemes().includes(u) ? u : d.getLoadedThemes()[0], h = d.codeToTokensBase(s.node.textContent, { lang: l, theme: m }); for (const g of h) { for (const b of g) { const p = c + b.content.length, N = ge.inline(c, p, { style: `color: ${b.color}` }); a.push(N), c = p; } c += 1; } }), me.create(e, a); } function Ki({ name: e, defaultLanguage: t, defaultTheme: n }) { const i = new Q({ key: new ee("shiki"), view(a) { class r { constructor() { this.initDecorations(); } update() { this.checkUndecoratedBlocks(); } destroy() { } // Initialize shiki async, and then highlight initial document async initDecorations() { const c = a.state.doc; await qi({ doc: c, name: e, defaultLanguage: t, defaultTheme: n }); const l = a.state.tr.setMeta("shikiPluginForceDecoration", !0); a.dispatch(l); } // When new codeblocks were added and they have missing themes or // languages, load those and then add code decorations once again. async checkUndecoratedBlocks() { const c = Te( a.state.doc, (d) => d.type.name === e ); if ((await Promise.all( c.flatMap((d) => [ Gt(d.node.attrs.theme), Xt(d.node.attrs.language) ]) )).includes(!0)) { const d = a.state.tr.setMeta("shikiPluginForceDecoration", !0); a.dispatch(d); } } } return new r(); }, state: { init: (a, { doc: r }) => Nt({ doc: r, name: e, defaultLanguage: t, defaultTheme: n }), apply: (a, r, s, c) => { const l = s.selection.$head.parent.type.name, u = c.selection.$head.parent.type.name, d = Te( s.doc, (g) => g.type.name === e ), m = Te( c.doc, (g) => g.type.name === e ), h = a.docChanged && ([l, u].includes(e) || m.length !== d.length || a.steps.some((g) => g.from !== void 0 && g.to !== void 0 && d.some((b) => b.pos >= g.from && b.pos + b.node.nodeSize <= g.to))); return a.getMeta("shikiPluginForceDecoration") || h ? Nt({ doc: a.doc, name: e, defaultLanguage: t, defaultTheme: n }) : r.map(a.mapping, a.doc); } }, props: { //@ts-expect-error decorations(a) { return i.getState(a); } } }); return i; } function Wi({ action: e, languages: t, ...n }) { const i = (r) => { e(r); }, a = E(() => t == null ? void 0 : t.map((r) => ({ title: Ii[r] || r, // icon: language.icon, language: r })), [t]); return /* @__PURE__ */ f(oe, { children: [ /* @__PURE__ */ o(re, { disabled: n == null ? void 0 : n.disabled, asChild: !0, children: /* @__PURE__ */ o( y, { tooltip: n == null ? void 0 : n.tooltip, disabled: n == null ? void 0 : n.disabled, icon: n == null ? void 0 : n.icon } ) }), /* @__PURE__ */ o(se, { className: "richtext-w-full !richtext-max-h-[180px] !richtext-overflow-y-scroll", children: a == null ? void 0 : a.map((r) => /* @__PURE__ */ o(di, { onClick: () => i(r.language), children: /* @__PURE__ */ o("div", { className: "richtext-h-full richtext-ml-1", children: r.title }) }, `codeblock-${r.title}`)) }) ] }); } const Gi = I.Root, Xi = I.Value, Yt = V.forwardRef(({ className: e, children: t, ...n }, i) => /* @__PURE__ */ f( I.Trigger, { ref: i, className: B( "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__ */ o(I.Icon, { asChild: !0, children: /* @__PURE__ */ o(at, { className: "richtext-h-4 richtext-w-4 richtext-opacity-50" }) }) ] } )); Yt.displayName = I.Trigger.displayName; const Zt = V.forwardRef(({ className: e, ...t }, n) => /* @__PURE__ */ o( I.ScrollUpButton, { ref: n, className: B( "richtext-flex richtext-cursor-default richtext-items-center richtext-justify-center richtext-py-1", e ), ...t, children: /* @__PURE__ */ o(Qn, { className: "richtext-h-4 richtext-w-4" }) } )); Zt.displayName = I.ScrollUpButton.displayName; const Jt = V.forwardRef(({ className: e, ...t }, n) => /* @__PURE__ */ o( I.ScrollDownButton, { ref: n, className: B( "richtext-flex richtext-cursor-default richtext-items-center richtext-justify-center richtext-py-1", e ), ...t, children: /* @__PURE__ */ o(at, { className: "richtext-h-4 richtext-w-4" }) } )); Jt.displayName = I.ScrollDownButton.displayName; const Qt = V.forwardRef(({ className: e, children: t, position: n = "popper", ...i }, a) => /* @__PURE__ */ o(I.Portal, { children: /* @__PURE__ */ f( I.Content, { ref: a, className: B( "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__ */ o(Zt, {}), /* @__PURE__ */ o( I.Viewport, { className: B( "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__ */ o(Jt, {}) ] } ) })); Qt.displayName = I.Content.displayName; const Yi = V.forwardRef(({ className: e, ...t }, n) => /* @__PURE__ */ o( I.Label, { ref: n, className: B("richtext-py-1.5 richtext-pl-8 richtext-pr-2 richtext-text-sm richtext-font-semibold", e), ...t } )); Yi.displayName = I.Label.displayName; const Je = V.forwardRef(({ className: e, children: t, ...n }, i) => /* @__PURE__ */ f( I.Item, { ref: i, className: B( "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__ */ o("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__ */ o(I.ItemIndicator, { children: /* @__PURE__ */ o(Ft, { className: "richtext-h-4 richtext-w-4" }) }) }), /* @__PURE__ */ o(I.ItemText, { children: t }) ] } )); Je.displayName = I.Item.displayName; const Zi = V.forwardRef(({ className: e, ...t }, n) => /* @__PURE__ */ o( I.Separator, { ref: n, className: B("richtext--mx-1 richtext-my-1 richtext-h-px richtext-bg-muted", e), ...t } )); Zi.displayName = I.Separator.displayName; function Ji() { const [e, t] = v(!1); return { isCopied: e, copyToClipboard: async (i) => { try { await navigator.clipboard.writeText(i), t(!0), setTimeout(() => t(!1), 2e3); } catch (a) { console.error("Failed to copy text: ", a), t(!1); } } }; } const Qi = "_wrap_134f4_1", ea = "_maxHeight_134f4_10", ta = "_btnCopy_134f4_13", na = "_btnDelete_134f4_14", ia = "_blockInfo_134f4_18", aa = "_blockInfoEditable_134f4_28", oa = "_selectLang_134f4_32", ra = "_copied_134f4_58", J = { wrap: Qi, maxHeight: ea, btnCopy: ta, btnDelete: na, blockInfo: ia, blockInfoEditable: aa, selectLang: oa, copied: ra }; function sa({ editor: e, node: { attrs: t }, updateAttributes: n, extension: i }) { var h, g; const { isCopied: a, copyToClipboard: r } = Ji(), s = E(() => { var b; return (b = i.options.languages) != null && b.length ? i.options.languages : Vt; }, [i.options.languages]), c = st(), l = (g = (h = e == null ? void 0 : e.options) == null ? void 0 : h.editorProps) == null ? void 0 : g.print, { language: u } = t, d = Y(null), m = D(() => ui(ca.name, e), [e]); return /* @__PURE__ */ f(he, { className: U(J.wrap, !l && J.maxHeight, "render-wrapper"), children: [ /* @__PURE__ */ f( "div", { className: U(J.blockInfo, { [J.blockInfoEditable]: !c }), children: [ /* @__PURE__ */ o( "span", { className: U(J.btnCopy, a && J.copied), onClick: () => r(d.current.innerText), children: a ? /* @__PURE__ */ o(ti, { size: 16 }) : /* @__PURE__ */ o(ei, { size: 16 }) } ), /* @__PURE__ */ o( "span", { className: J.btnDelete, onClick: m, children: /* @__PURE__ */ o( O, { name: "Trash2" } ) } ), /* @__PURE__ */ o("div", { className: J.selectLang, children: /* @__PURE__ */ f( Gi, { defaultValue: u || "auto", disabled: !c, onValueChange: (b) => n({ language: b }), children: [ /* @__PURE__ */ o(Yt, { children: /* @__PURE__ */ o(Xi, { placeholder: "Language" }) }), /* @__PURE__ */ f(Qt, { className: "richtext-max-h-60 richtext-overflow-y-auto", children: [ /* @__PURE__ */ o(Je, { value: "auto", children: "Auto" }), s.map((b, p) => /* @__PURE__ */ o( Je, { value: b, children: b.charAt(0).toUpperCase() + b.slice(1) }, `code-lang-${p}` )) ] }) ] } ) }) ] } ), /* @__PURE__ */ o("pre", { ref: d, children: /* @__PURE__ */ o(fn, { as: "code" }) }) ] }); } const ca = gn.extend({ addOptions() { var e; return { ...(e = this.parent) == null ? void 0 : e.call(this), languages: [], button: ({ editor: t, t: n, extension: i }) => { var r, s, c; const a = (s = (r = i == null ? void 0 : i.options) == null ? void 0 : r.languages) != null && s.length ? (c = i == null ? void 0 : i.options) == null ? void 0 : c.languages : Vt; return { component: Wi, componentProps: { action: (l = "js") => t.commands.setCodeBlock({ language: l }), isActive: () => t.isActive("codeBlock") || !1, disabled: !t.can().toggleCodeBlock(), icon: "Code2", tooltip: n("editor.codeblock.tooltip"), languages: a } }; } }; }, addNodeView() { return $e(sa); }, addProseMirrorPlugins() { var e; return [ ...((e = this.parent) == null ? void 0 : e.call(this)) || [], Ki({ name: this.name, defaultLanguage: null, defaultTheme: this.options.defaultTheme }) ]; } }); function la(e) { var a, r, s; const { t, lang: n } = $(), i = E(() => { var u; const c = (u = e == null ? void 0 : e.items) == null ? void 0 : u.find((d) => d.isActive()); return c && !c.default ? { ...c } : { title: e.tooltip, font: t("editor.fontFamily.default.tooltip"), isActive: () => !1, disabled: !1, action: () => e.editor.chain().focus().unsetFontFamily().run() }; }, [t, n, e]); return /* @__PURE__ */ f(oe, { children: [ /* @__PURE__ */ o( re, { asChild: !0, disabled: e == null ? void 0 : e.disabled, children: /* @__PURE__ */ o( _t, { disabled: e == null ? void 0 : e.disabled, icon: "MenuDown", title: ((a = i == null ? void 0 : i.font) == null ? void 0 : a.length) > 7 ? `${(r = i == null ? void 0 : i.font) == null ? void 0 : r.slice(0, 6)}...` : i == null ? void 0 : i.font, tooltip: e == null ? void 0 : e.tooltip } ) } ), /* @__PURE__ */ o(se, { className: "richtext-w-full", children: (s = e == null ? void 0 : e.items) == null ? void 0 : s.map((c, l) => { const u = c.font === t("editor.fontFamily.default.tooltip") ? {} : { fontFamily: c.font }; return /* @__PURE__ */ f(tt, { children: [ /* @__PURE__ */ o( we, { checked: (i == null ? void 0 : i.font) === c.font, onClick: c.action, children: /* @__PURE__ */ o( "div", { className: "richtext-ml-1 richtext-h-full", style: u, children: c.font } ) } ), c.font === t("editor.fontFamily.default.tooltip") && /* @__PURE__ */ o(jt, {}) ] }, `font-family-${l}`); }) }) ] }); } const Rr = _n.extend({ addOptions() { var e; return { ...(e = this.parent) == null ? void 0 : e.call(this), fontFamilyList: Hi, button({ editor: t, extension: n, t: i }) { var u; const { extensions: a = [] } = t.extensionManager ?? [], r = Ye(((u = n == null ? void 0 : n.options) == null ? void 0 : u.fontFamilyList) || []), s = a.find( (d) => d.name === "base-kit" ), c = r.map((d) => ({ action: () => { t.chain().focus().setFontFamily(d.value).run(); }, isActive: () => t.isActive("textStyle", { fontFamily: d.value }) || !1, disabled: !t.can().setFontFamily(d.value), title: d.name, font: d.value })); s && s.options.textStyle !== !1 && c.unshift({ action: () => t.chain().focus().unsetFontFamily().run(), isActive: () => !1, disabled: !1, font: i("editor.fontFamily.default.tooltip"), title: i("editor.fontFamily.tooltip") }); const l = c.filter((d) => d.disabled).length === c.length; return { component: la, componentProps: { tooltip: i("editor.fontFamily.tooltip"), disabled: l, items: c, editor: t } }; } }; } }); function da(e) { var n; const t = E(() => { var r; const i = (r = e == null ? void 0 : e.items) == null ? void 0 : r.find((s) => s.isActive()); return i && !i.default ? { ...i } : { title: e.tooltip, level: 0, isActive: () => !1 }; }, [e]); return /* @__PURE__ */ f(oe, { children: [ /* @__PURE__ */ o( re, { asChild: !0, disabled: e == null ? void 0 : e.disabled, children: /* @__PURE__ */ o( _t, { disabled: e == null ? void 0 : e.disabled, icon: "MenuDown", title: t == null ? void 0 : t.title, tooltip: e == null ? void 0 : e.tooltip } ) } ), /* @__PURE__ */ o(se, { className: "richtext-w-full", children: (n = e == null ? void 0 : e.items) == null ? void 0 : n.map((i, a) => { var r, s; return /* @__PURE__ */ f(tt, { children: [ /* @__PURE__ */ f( we, { checked: (t == null ? void 0 : t.title) === i.title, onClick: i.action, children: [ /* @__PURE__ */ o("div", { className: `heading- richtext-ml-1 richtext-h-full${i.level}`, children: i.title }), !!((r = i == null ? void 0 : i.shortcutKeys) != null && r.length) && /* @__PURE__ */ o(hi, { className: "richtext-pl-4", children: (s = i == null ? void 0 : i.shortcutKeys) == null ? void 0 : s.map((c) => ct(c)).join(" ") }) ] } ), i.level === 0 && /* @__PURE__ */ o(jt, {}) ] }, `heading-k-${a}`); }) }) ] }); } const Or = bn.extend({ addOptions() { var e; return { ...(e = this.parent) == null ? void 0 : e.call(this), levels: [1, 2, 3, 4, 5, 6], button({ editor: t, extension: n, t: i }) { var u; const { extensions: a = [] } = t.extensionManager ?? [], r = ((u = n.options) == null ? void 0 : u.levels) || [], s = a.find( (d) => d.name === "base-kit" ), c = r.map((d) => ({ action: () => t.commands.toggleHeading({ level: d }), isActive: () => t.isActive("heading", { level: d }) || !1, disabled: !t.can().toggleHeading({ level: d }), title: i(`editor.heading.h${d}.tooltip`), level: d, shortcutKeys: ["alt", "mod", `${d}`] })); s && s.options.paragraph !== !1 && c.unshift({ action: () => t.commands.setParagraph(), isActive: () => t.isActive("paragraph") || !1, disabled: !t.can().setParagraph(), level: 0, title: i("editor.paragraph.tooltip"), shortcutKeys: ["alt", "mod", "0"] }); const l = c.filter((d) => d.disabled).length === c.length; return { component: da, componentProps: { tooltip: i("editor.heading.tooltip"), disabled: l, items: c, editor: t } }; } }; } }), bt = ce.Root, Ve = V.forwardRef(({ className: e, ...t }, n) => /* @__PURE__ */ o( ce.List, { ref: n, className: B( "richtext-inline-flex richtext-h-10 richtext-items-center richtext-justify-center richtext-rounded-md richtext-bg-muted richtext-text-muted-foreground", e ), ...t } )); Ve.displayName = ce.List.displayName; const be = V.forwardRef(({ className: e, ...t }, n) => /* @__PURE__ */ o( ce.Trigger, { ref: n, className: B( "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 } )); be.displayName = ce.Trigger.displayName; const pe = V.forwardRef(({ className: e, ...t }, n) => /* @__PURE__ */ o( ce.Content, { ref: n, className: B( "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 } )); pe.displayName = ce.Content.displayName; const en = V.forwardRef(({ className: e, ...t }, n) => /* @__PURE__ */ o( Ze.Root, { ref: n, className: B( "!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__ */ o( Ze.Indicator, { className: B("!richtext-flex !richtext-p-0 !richtext-items-center !richtext-justify-center !richtext-text-current"), children: /* @__PURE__ */ o(Ft, { className: "!richtext-h-4 !richtext-w-4" }) } ) } )); en.displayName = Ze.Root.displayName; function ua(e) { var n; const t = E(() => { var r; const i = (r = e == null ? void 0 : e.items) == null ? void 0 : r.find((s) => s.isActive()); return i && !i.default ? { ...i, icon: i.icon ? i.icon : e.icon } : { title: e == null ? void 0 : e.tooltip, icon: e.icon, isActive: () => !1 }; }, [e]); return /* @__PURE__ */ f(ye, { modal: !0, children: [ /* @__PURE__ */ o( ve, { asChild: !0, disabled: e == null ? void 0 : e.disabled, children: /* @__PURE__ */ o( y, { customClass: "!richtext-w-12 richtext-h-12", disabled: e == null ? void 0 : e.disabled, icon: e == null ? void 0 : e.icon, tooltip: e == null ? void 0 : e.tooltip, children: /* @__PURE__ */ o( O, { className: "richtext-ml-1 richtext-size-3 richtext-text-zinc-500", name: "MenuDown" } ) } ) } ), /* @__PURE__ */ o( ke, { align: "start", className: "richtext-flex richtext-w-full richtext-min-w-4 richtext-flex-row richtext-gap-1 !richtext-p-[4px]", side: "bottom", children: (n = e == null ? void 0 : e.items) == null ? void 0 : n.map((i, a) => { var r, s; return /* @__PURE__ */ f(Fe, { children: [ /* @__PURE__ */ o(je, { asChild: !0, children: /* @__PURE__ */ o( lt, { className: "richtext-size-7 richtext-p-1", "data-state": t.title === i.title ? "on" : "off", onClick: i == null ? void 0 : i.action, pressed: t.title === i.title, size: "sm", children: (i == null ? void 0 : i.icon) && /* @__PURE__ */ o(O, { name: i.icon }) } ) }), /* @__PURE__ */ f(Ue, { className: "richtext-flex richtext-flex-col richtext-items-center", children: [ /* @__PURE__ */ o("span", { children: i.title }), !!((r = i.shortcutKeys) != null && r.length) && /* @__PURE__ */ o("span", { children: (s = i.shortcutKeys) == null ? void 0 : s.map((c) => ct(c)).join(" ") }) ] }) ] }, `text-align-${a}`); }) } ) ] }); } const Dr = pn.extend({ addOptions() { var e; return { ...(e = this.parent) == null ? void 0 : e.call(this), types: ["heading", "paragraph", "list_item", "title"], button({ editor: t, extension: n, t: i }) { var u; const a = ((u = n.options) == null ? void 0 : u.alignments) || [], r = { left: ["mod", "Shift", "L"], center: ["mod", "Shift", "E"], right: ["mod", "Shift", "R"], justify: ["mod", "Shift", "J"] }, s = { left: "AlignLeft", center: "AlignCenter", right: "AlignRight", justify: "AlignJustify" }, c = a.map((d) => { var m, h, g; return { title: i(`editor.textalign.${d}.tooltip`), icon: s[d], shortcutKeys: r[d], isActive: () => t.isActive({ textAlign: d }) || !1, action: () => { var b, p; return (p = (b = t.commands) == null ? void 0 : b.setTextAlign) == null ? void 0 : p.call(b, d); }, disabled: !((g = (h = (m = t == null ? void 0 : t.can) == null ? void 0 : m.call(t)) == null ? void 0 : h.setTextAlign) != null && g.call(h, d)) }; }), l = c.filter((d) => d.disabled).length === c.length; return { component: ua, componentProps: { icon: "AlignJustify", tooltip: i("editor.textalign.tooltip"), disabled: l, items: c } }; } }; } }); function ha(e) { var i; const { t } = $(), n = E(() => { const a = (e.items || []).find((s) => s.isActive()); return a || { title: t("editor.fontSize.default.tooltip"), isActive: () => !1 }; }, [e]); return /* @__PURE__ */ f(oe, { children: [ /* @__PURE__ */ o( re, { asChild: !0, disabled: e == null ? void 0 : e.disabled, children: /* @__PURE__ */ o( _t, { disabled: e == null ? void 0 : e.disabled, icon: "MenuDown", title: n == null ? void 0 : n.title, tooltip: `${e == null ? void 0 : e.tooltip}` } ) } ), /* @__PURE__ */ o(se, { className: "richtext-max-h-96 richtext-w-32 richtext-overflow-y-auto", children: (i = e == null ? void 0 : e.items) == null ? void 0 : i.map((a, r) => /* @__PURE__ */ o( we, { checked: n.title === a.title, onClick: a.action, children: /* @__PURE__ */ o("div", { className: "richtext-ml-1 richtext-h-full", children: a.title }) }, `font-size-${r}` )) }) ] }); } const Pr = H.create({ name: "fontSize", addOptions() { var e; return { ...(e = this.parent) == null ? void 0 : e.call(this), types: ["textStyle"], fontSizes: [...zi], button({ editor: t, extension: n, t: i }) { var l; const a = Ye(((l = n.options) == null ? void 0 : l.fontSizes) || vt), r = Ye([vt])[0], s = a.map((u) => ({ title: u.value === r.value ? i("editor.fontSize.default.tooltip") : String(u.name), isActive: () => { const { fontSize: d } = t.getAttributes("textStyle"); return u.value === r.value && d === void 0 ? !0 : t.isActive({ fontSize: String(u.value) }) || !1; }, action: () => { if (u.value === r.value) { t.commands.unsetFontSize(); return; } t.commands.setFontSize(String(u.value)); }, disabled: !t.can().setFontSize(String(u.value)), divider: u.value === r.value || !1, default: u.value === r.value || !1 })), c = s.filter((u) => u.disabled).length === s.length; return { component: ha, componentProps: { editor: t, tooltip: i("editor.fontSize.tooltip"), disabled: c, items: s, maxHeight: 280 } }; } }; }, addGlobalAttributes() { return [ { types: this.options.types, attributes: { fontSize: { default: null, parseHTML: (e) => e.style.fontSize.replaceAll(/["']+/g, ""), renderHTML: (e) => e.fontSize ? { style: `font-size: ${e.fontSize}` } : {} } } } ]; }, addCommands() { return { setFontSize: (e) => ({ chain: t }) => t().setMark("textStyle", { fontSize: e }).run(), unsetFontSize: () => ({ chain: e }) => e().setMark("textStyle", { fontSize: null }).removeEmptyTextStyle().run() }; } }); function ma({ fill: e }) { return /* @__PURE__ */ o( "svg", { width: "18px", height: "18px", viewBox: "0 0 240 240", version: "1.1", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ o("g", { stroke: "none", strokeWidth: 1, fill: "none", fillRule: "evenodd", children: /* @__PURE__ */ o("g", { transform: "translate(0.000000, 0.500000)", children: /* @__PURE__ */ f("g", { transform: "translate(39.000000, 17.353553)", children: [ /* @__PURE__ */ o( "path", { d: "M11,201.146447 L167,201.146447 C173.075132,201.146447 178,206.071314 178,212.146447 C178,218.221579 173.075132,223.146447 167,223.146447 L11,223.146447 C4.92486775,223.146447 7.43989126e-16,218.221579 0,212.146447 C-7.43989126e-16,206.071314 4.92486775,201.146447 11,201.146447 Z", id: "矩形", fill: e || "#DF2A3F", fillRule: "evenodd" } ), /* @__PURE__ */ o( "path", { d: "M72.3425855,16.8295583 C75.799482,7.50883712 86.1577877,2.75526801 95.4785089,6.21216449 C100.284516,7.99463061 104.096358,11.7387855 105.968745,16.4968188 L106.112518,16.8745422 L159.385152,161.694068 C161.291848,166.877345 158.635655,172.624903 153.452378,174.531599 C148.358469,176.405421 142.719567,173.872338 140.716873,168.864661 L140.614848,168.598825 L89.211,28.86 L37.3759214,168.623816 C35.4885354,173.712715 29.8981043,176.351047 24.7909589,174.617647 L24.5226307,174.522368 C19.4337312,172.634982 16.7953993,167.044551 18.5287999,161.937406 L18.6240786,161.669077 L72.3425855,16.8295583 Z", id: "路径-21", fill: "currentColor", fillRule: "nonzero" } ), /* @__PURE__ */ o( "path", { d: "M121,103.146447 C126.522847,103.146447 131,107.623599 131,113.146447 C131,118.575687 126.673329,122.994378 121.279905,123.142605 L121,123.146447 L55,123.146447 C49.4771525,123.146447 45,118.669294 45,113.146447 C45,107.717207 49.3266708,103.298515 54.7200952,103.150288 L55,103.146447 L121,103.146447 Z", id: "路径-22", fill: "currentColor", fillRule: "nonzero" } ) ] }) }) }) } ); } function fa(e) { const [t, n] = v(void 0); function i(s) { var c; (c = e.action) == null || c.call(e, s); } function a() { var s; (s = e.action) == null || s.call(e, t); } const r = D( Wn((s) => { n(s); }, 350), [] ); return /* @__PURE__ */ f("div", { className: "richtext-flex richtext-items-center richtext-h-[32px]", children: [ /* @__PURE__ */ o(y, { tooltip: e == null ? void 0 : e.tooltip, disabled: e == null ? void 0 : e.disabled, action: a, children: /* @__PURE__ */ o("span", { className: "richtext-flex richtext-items-center richtext-justify-center richtext-text-sm", children: /* @__PURE__ */ o(ma, { fill: t }) }) }), /* @__PURE__ */ o( mi, { selectedColor: t, setSelectedColor: r, onChange: i, disabled: e == null ? void 0 : e.disabled, colors: e == null ? void 0 : e.colors, defaultColor: e == null ? void 0 : e.defaultColor, children: /* @__PURE__ */ o(P, { variant: "ghost", size: "icon", className: "r!ichtext-h-[32px] !richtext-w-3", disabled: e == null ? void 0 : e.disabled, children: /* @__PURE__ */ o(O, { className: "!richtext-w-3 !richtext-h-3 richtext-text-zinc-500", name: "MenuDown" }) }) } ) ] }); } const Br = xn.extend({ addOptions() { var e; return { ...(e = this.parent) == null ? void 0 : e.call(this), button({ editor: t, t: n, extension: i }) { return { component: fa, componentProps: { colors: i.options.colors, defaultColor: i.options.defaultColor, action: (a) => { a === void 0 && t.chain().focus().unsetColor().run(), typeof a == "string" && t.chain().focus().setColor(a).run(); }, isActive: () => { const { color: a } = t.getAttributes("textStyle"); return a && t.isActive({ color: a }) || !1; }, editor: t, disabled: !t.can().setColor(""), tooltip: n("editor.color.tooltip") } }; } }; } }), $r = wn.extend({ addOptions() { var e; return { ...(e = this.parent) == null ? void 0 : e.call(this), multicolor: !0, button: ({ editor: t, t: n }) => ({ component: fi, componentProps: { action: (i) => { typeof i == "string" && t.chain().focus().setHighlight({ color: i }).run(), i === void 0 && t.chain().focus().unsetHighlight().run(); }, editor: t, isActive: () => t.isActive("highlight") || !1, disabled: !t.can().setHighlight(), shortcutKeys: ["⇧", "mod", "H"], tooltip: n("editor.highlight.tooltip") } }) }; } }), Fr = yn.extend({ addOptions() { var e; return { ...(e = this.parent) == null ? void 0 : e.call(this), button: ({ editor: t, t: n }) => ({ component: y, componentProps: { action: () => t.commands.toggleBulletList(), isActive: () => t.isActive("bulletList") || !1, disabled: !1, shortcutKeys: ["shift", "mod", "8"], icon: "List", tooltip: n("editor.bulletlist.tooltip") } }) }; } }), jr = Le.create({ name: "clear", addOptions() { var e; return { ...(e = this.parent) == null ? void 0 : e.call(this), button: ({ editor: t, t: n }) => ({ component: y, componentProps: { action: () => t.chain().focus().clearNodes().unsetAllMarks().run(), disabled: !t.can().chain().focus().clearNodes().unsetAllMarks().run(), icon: "Eraser", tooltip: n("editor.clear.tooltip") } }) }; } }), Ur = vn.extend({ addOptions() { var e; return { ...(e = this.parent) == null ? void 0 : e.call(this), button: ({ editor: t, t: n }) => ({ component: y, componentProps: { action: () => t.commands.toggleOrderedList(), isActive: () => t.isActive("orderedList") || !1, disabled: !1, icon: "ListOrdered", shortcutKeys: ["mod", "shift", "7"], tooltip: n("editor.orderedlist.tooltip") } }) }; } }), Vr = kn.extend({ addOptions() { var e; return { ...(e = this.parent) == null ? void 0 : e.call(this), HTMLAttributes: { class: "task-list" }, taskItem: { HTMLAttributes: { class: "task-list-item" } }, button: ({ editor: t, t: n }) => ({ component: y, componentProps: { action: () => t.commands.toggleTaskList(), isActive: () => t.isActive("taskList") || !1, disabled: !1, icon: "ListTodo", shortcutKeys: ["shift", "mod", "9"], tooltip: n("editor.tasklist.tooltip") } }) }; }, addExtensions() { return [Cn.configure(this.options.taskItem)]; } }), qr = Nn.extend({ addOptions() { var e; return { ...(e = this.parent) == null ? void 0 : e.call(this), HTMLAttributes: { class: "blockquote" }, button: ({ editor: t, t: n }) => ({ component: y, componentProps: { action: () => t.commands.toggleBlockquote(), isActive: () => t.isActive("blockquote") || !1, disabled: !t.can().toggleBlockquote(), icon: "TextQuote", shortcutKeys: ["shift", "mod", "B"], tooltip: n("editor.blockquote.tooltip") } }) }; } }); function ga(e) { const [t, n] = v(!1); function i(a, r, s) { e.action && (e.action({ link: a, text: r, openInNewTab: s }), n(!1)); } return /* @__PURE__ */ f(ye, { modal: !0, open: t, onOpenChange: n, children: [ /* @__PURE__ */ o(ve, { disabled: e == null ? void 0 : e.disabled, asChild: !0, children: /* @__PURE__ */ o( y, { tooltip: e == null ? void 0 : e.tooltip, isActive: e == null ? void 0 : e.isActive, disabled: e == null ? void 0 : e.disabled, children: /* @__PURE__ */ o(O, { name: e == null ? void 0 : e.icon }) } ) }), /* @__PURE__ */ o(ke, { hideWhenDetached: !0, className: "richtext-w-full", align: "start", side: "bottom", children: /* @__PURE__ */ o(gi, { editor: e.editor, onSetLink: i }) }) ] }); } const Kr = An.extend({ inclusive: !1, parseHTML() { return [ { tag: 'a[href]:not([data-type="button"]):not([href *= "javascript:" i])' } ]; }, renderHTML({ HTMLAttributes: e }) { return [ "a", Se(this.options.HTMLAttributes, e, { class: "link" }), 0 ]; }, addOptions() { var e; return { ...(e = this.parent) == null ? void 0 : e.call(this), openOnClick: !0, button: ({ editor: t, t: n }) => ({ component: ga, componentProps: { editor: t, action: (i) => { const { link: a, text: r, openInNewTab: s } = i; t.chain().extendMarkRange("link").insertContent({ type: "text", text: r, marks: [ { type: "link", attrs: { href: a, target: s ? "_blank" : "" } } ] }).setLink({ href: a }).focus().run(); }, id: "linkk", isActive: () => t.isActive("link") || !1, disabled: !t.can().setLink({ href: "" }), icon: "Link", tooltip: n("editor.link.tooltip") } }) }; }, addProseMirrorPlugins() { return [ new Q({ props: { handleClick: (e, t) => { const { schema: n, doc: i, tr: a } = e.state, r = Tn(i.resolve(t), n.marks.link); if (!r) return !1; const s = i.resolve(r.from), c = i.resolve(r.to), l = a.setSelection(new Pt(s, c)); e.dispatch(l); } } }) ]; } }), Wr = Ln.extend({ renderHTML() { return [ "div", Se(this.options.HTMLAttributes, { "data-type": this.name }), ["hr"] ]; }, addOptions() { var e; return { ...(e = this.parent) == null ? void 0 : e.call(this), button: ({ editor: t, t: n }) => ({ component: y, componentProps: { action: () => t.commands.setHorizontalRule(), disabled: !t.can().setHorizontalRule(), icon: "Minus", shortcutKeys: ["mod", "alt", "S"], tooltip: n("editor.horizontalrule.tooltip") } }) }; }, addKeyboardShortcuts() { return { "Mod-Alt-s": () => this.editor.commands.setHorizontalRule() }; } }); function _a(e) { var u; const { icon: t = void 0, // title = undefined, tooltip: n = void 0, // disabled = false, customClass: i = "", // color = undefined, // loading = false, // shortcutKeys = undefined, tooltipOptions: a = {}, action: r = void 0, isActive: s = void 0, children: c } = e, l = ot[t]; return /* @__PURE__ */ f(Fe, { children: [ /* @__PURE__ */ o(je, { asChild: !0, children: /* @__PURE__ */ f( lt, { size: "sm", className: `richtext-w-[32px] richtext-h-[32px] ${i}`, disabled: s == null ? void 0 : s(), onClick: r, children: [ l && /* @__PURE__ */ o(l, { className: "richtext-w-4 richtext-h-4" }), c && /* @__PURE__ */ o(_e, { children: c }) ] } ) }), n && /* @__PURE__ */ o(Ue, { ...a, children: /* @__PURE__ */ f("div", { className: "richtext-flex richtext-flex-col richtext-items-center richtext-text-center richtext-max-w-24", children: [ /* @__PURE__ */ o("div", { children: n }), !!((u = e == null ? void 0 : e.shortcutKeys) != null && u.length) && /* @__PURE__ */ o("span", { children: rt(e == null ? void 0 : e.shortcutKeys) }) ] }) }) ] }); } const ba = ["undo", "redo"], Gr = Sn.extend({ addOptions() { var e; return { ...(e = this.parent) == null ? void 0 : e.call(this), depth: 100, newGroupDelay: 500, button: ({ editor: t, t: n }) => ba.map((i) => ({ component: _a, componentProps: { action: () => { i === "undo" && t.chain().focus().undo().run(), i === "redo" && t.chain().focus().redo().run(); }, shortcutKeys: i === "undo" ? ["mod", "Z"] : ["shift", "mod", "Z"], disabled: i === "undo" ? !t.can().undo() : !t.can().redo(), isActive: () => i === "undo" ? !t.can().undo() : !t.can().redo(), icon: i === "undo" ? "Undo2" : "Redo2", tooltip: n(`editor.${i}.tooltip`) } })) }; } }), pa = Mn.extend({ content: "(block|columns)+" // echo editor is a block editor }), Xr = H.create({ name: "columnActionButton", addOptions() { var e; return { ...(e = this.parent) == null ? void 0 : e.call(this), button: ({ editor: t, t: n }) => ({ component: y, componentProps: { action: () => { t.chain().focus().insertColumns({ cols: 2 })