reactjs-tiptap-editor
Version:
A modern WYSIWYG rich text editor based on tiptap and shadcn ui for React
175 lines (174 loc) • 6.51 kB
JavaScript
import { E as C } from "./clsx-DaPvp9ji.js";
import { jsx as o, Fragment as K, jsxs as m } from "react/jsx-runtime";
import M, { useMemo as v } from "react";
import { u as S, e as j, A as P, I as b, T as w, a as N, k as z, b as L, l as O } from "./index-RcSPeQHn.js";
import "./theme.js";
import { P as R, a as _, b as $ } from "./popover-CtinPbiy.js";
var E = C.create({
name: "textAlign",
addOptions() {
return {
types: [],
alignments: ["left", "center", "right", "justify"],
defaultAlignment: null
};
},
addGlobalAttributes() {
return [
{
types: this.options.types,
attributes: {
textAlign: {
default: this.options.defaultAlignment,
parseHTML: (e) => {
const t = e.style.textAlign;
return this.options.alignments.includes(t) ? t : this.options.defaultAlignment;
},
renderHTML: (e) => e.textAlign ? { style: `text-align: ${e.textAlign}` } : {}
}
}
}
];
},
addCommands() {
return {
setTextAlign: (e) => ({ commands: t }) => this.options.alignments.includes(e) ? this.options.types.map((n) => t.updateAttributes(n, { textAlign: e })).some((n) => n) : !1,
unsetTextAlign: () => ({ commands: e }) => this.options.types.map((t) => e.resetAttributes(t, "textAlign")).some((t) => t),
toggleTextAlign: (e) => ({ editor: t, commands: n }) => this.options.alignments.includes(e) ? t.isActive({ textAlign: e }) ? n.unsetTextAlign() : n.setTextAlign(e) : !1
};
},
addKeyboardShortcuts() {
return {
"Mod-Shift-l": () => this.editor.commands.setTextAlign("left"),
"Mod-Shift-e": () => this.editor.commands.setTextAlign("center"),
"Mod-Shift-r": () => this.editor.commands.setTextAlign("right"),
"Mod-Shift-j": () => this.editor.commands.setTextAlign("justify")
};
}
}), J = E;
function Q() {
const [e, t] = M.useState(!1), n = S(B.name), {
icon: g = void 0,
tooltip: x = void 0,
items: r = [],
isActive: A = void 0
} = (n == null ? void 0 : n.componentProps) ?? {}, { disabled: l, dataState: a } = j(A), h = v(() => (a == null ? void 0 : a.title) || "", [a]), p = v(() => r == null ? void 0 : r.some((i) => i.title === h), [r, h]);
return n ? /* @__PURE__ */ m(
R,
{
modal: !0,
onOpenChange: t,
open: e,
children: [
/* @__PURE__ */ o(
_,
{
asChild: !0,
className: "hover:richtext-bg-accent data-[state=on]:richtext-bg-accent",
"data-state": p ? "on" : "off",
disabled: l,
children: /* @__PURE__ */ o(
P,
{
customClass: "!richtext-w-12 richtext-h-12",
disabled: l,
icon: g,
tooltip: x,
children: /* @__PURE__ */ o(
b,
{
className: "richtext-ml-1 richtext-size-3 richtext-text-zinc-500",
name: "MenuDown"
}
)
}
)
}
),
/* @__PURE__ */ o(
$,
{
align: "start",
className: "richtext-flex richtext-w-full richtext-min-w-4 richtext-flex-row richtext-gap-1 !richtext-p-[4px]",
side: "bottom",
children: r == null ? void 0 : r.map((i, d) => {
var s, c;
return /* @__PURE__ */ m(w, { children: [
/* @__PURE__ */ o(N, { asChild: !0, children: /* @__PURE__ */ o(
z,
{
className: "richtext-size-7 richtext-p-1",
"data-state": h === i.title ? "on" : "off",
size: "sm",
onClick: () => {
i == null || i.action(), t(!1);
},
children: (i == null ? void 0 : i.icon) && /* @__PURE__ */ o(b, { name: i.icon })
}
) }),
/* @__PURE__ */ m(L, { className: "richtext-flex richtext-flex-col richtext-items-center", children: [
/* @__PURE__ */ o("span", { children: i.title }),
!!((s = i.shortcutKeys) != null && s.length) && /* @__PURE__ */ o("span", { children: (c = i.shortcutKeys) == null ? void 0 : c.map((u) => O(u)).join(" ") })
] })
] }, `text-align-${d}`);
})
}
)
]
}
) : /* @__PURE__ */ o(K, {});
}
const B = /* @__PURE__ */ J.extend({
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
//@ts-expect-error
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: g
}) {
var a, h, p, i, d;
const x = ((a = n.options) == null ? void 0 : a.alignments) || [], r = {
left: ((h = n.options.shortcutKeys) == null ? void 0 : h[0]) ?? ["mod", "Shift", "L"],
center: ((p = n.options.shortcutKeys) == null ? void 0 : p[1]) ?? ["mod", "Shift", "E"],
right: ((i = n.options.shortcutKeys) == null ? void 0 : i[2]) ?? ["mod", "Shift", "R"],
justify: ((d = n.options.shortcutKeys) == null ? void 0 : d[3]) ?? ["mod", "Shift", "J"]
}, A = {
left: "AlignLeft",
center: "AlignCenter",
right: "AlignRight",
justify: "AlignJustify"
}, l = x.map((s) => {
var c, u, y;
return {
title: g(`editor.textalign.${s}.tooltip`),
icon: A[s],
shortcutKeys: r[s],
isActive: () => t.isActive({ textAlign: s }) || !1,
action: () => {
var f, T;
return (T = (f = t.commands) == null ? void 0 : f.setTextAlign) == null ? void 0 : T.call(f, s);
},
disabled: !((y = (u = (c = t == null ? void 0 : t.can) == null ? void 0 : c.call(t)) == null ? void 0 : u.setTextAlign) != null && y.call(u, s))
};
});
return {
componentProps: {
icon: "AlignJustify",
tooltip: g("editor.textalign.tooltip"),
items: l,
isActive: () => l == null ? void 0 : l.find((c) => c.isActive())
}
};
}
};
}
});
export {
Q as RichTextAlign,
B as TextAlign
};