reactjs-tiptap-editor
Version:
A modern WYSIWYG rich text editor based on tiptap and shadcn ui for React
221 lines (220 loc) • 7.69 kB
JavaScript
import { h as D, j as x, N as H, k as M, m as B } from "./clsx-DaPvp9ji.js";
import { h as V, u as j, d as P, D as E, m as R, A as T, n as W, o as F, L as u, j as v, p as U, B as C } from "./index-RcSPeQHn.js";
import { jsx as o, jsxs as l, Fragment as Y } from "react/jsx-runtime";
import { useState as s } from "react";
import "./theme.js";
import { Info as _, Lightbulb as $, AlertCircle as z, TriangleAlert as K, OctagonAlert as q } from "lucide-react";
import { S as G, a as J, b as Q, c as X, d as Z } from "./select-CmV5uTXr.js";
import { u as tt } from "./index-C07N8gA1.js";
const y = [
{ value: "note", label: "Note", icon: _, color: "#1f6feb", background: "#1f6feb1f" },
{ value: "tip", label: "Tip", icon: $, color: "#238636", background: "#2386361f" },
{ value: "important", label: "Important", icon: z, color: "#ab7df8", background: "#ab7df81f" },
{ value: "warning", label: "Warning", icon: K, color: "#d29922", background: "#d299221f" },
{ value: "caution", label: "Caution", icon: q, color: "#f85149", background: "#f851491f" }
];
function et({ node: t }) {
const { type: e = "note", title: a = "", body: n = "" } = t.attrs, c = (y.find((d) => d.value === e) || y[0]).icon;
return /* @__PURE__ */ o(D, { children: /* @__PURE__ */ l(
"div",
{
className: x(
"richtext-relative richtext-my-4 richtext-rounded-lg richtext-border richtext-p-4",
{
"richtext-bg-[#1f6feb1f] richtext-border-[#1f6feb]": e === "note",
"richtext-bg-[#2386361f] richtext-border-[#238636]": e === "tip",
"richtext-bg-[#ab7df81f] richtext-border-[#ab7df8]": e === "important",
"richtext-bg-[#d299221f] richtext-border-[#d29922]": e === "warning",
"richtext-bg-[#f851491f] richtext-border-[#f85149]": e === "caution"
}
),
children: [
/* @__PURE__ */ l(
"div",
{
className: x("richtext-mb-2 richtext-flex richtext-items-center richtext-gap-2", {
"richtext-text-[#1f6feb]": e === "note",
"richtext-text-[#238636]": e === "tip",
"richtext-text-[#ab7df8]": e === "important",
"richtext-text-[#d29922]": e === "warning",
"richtext-text-[#f85149]": e === "caution"
}),
children: [
/* @__PURE__ */ o(c, { className: "richtext-size-5" }),
/* @__PURE__ */ o("span", { className: "richtext-font-semibold", children: a })
]
}
),
n && /* @__PURE__ */ o("p", { className: "richtext-pl-[28px]", children: n })
]
}
) });
}
const ot = [
{ 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 ht() {
const { t } = tt(), e = V(), a = j(lt.name), [n, i] = s(!1), [c, d] = s("note"), [p, b] = s(""), [g, f] = s(""), {
icon: A = void 0,
tooltip: N = void 0,
shortcutKeys: L = void 0,
tooltipOptions: S = {},
isActive: k = void 0
} = (a == null ? void 0 : a.componentProps) ?? {}, { dataState: I, disabled: m } = P(k), w = () => {
e && (e.chain().focus().setCallout({ type: c, title: p, body: g }).run(), i(!1), d("note"), b(""), f(""));
}, O = () => {
m || i(!0);
};
return a ? /* @__PURE__ */ l(
E,
{
onOpenChange: i,
open: n,
children: [
/* @__PURE__ */ o(R, { asChild: !0, children: /* @__PURE__ */ o(
T,
{
action: O,
dataState: I,
disabled: m,
icon: A,
shortcutKeys: L,
tooltip: N,
tooltipOptions: S
}
) }),
/* @__PURE__ */ l(W, { children: [
/* @__PURE__ */ o(F, { children: t("editor.callout.dialog.title") }),
/* @__PURE__ */ l("div", { className: "richtext-space-y-4 richtext-py-4", children: [
/* @__PURE__ */ l("div", { className: "richtext-space-y-2", children: [
/* @__PURE__ */ o(u, { children: t("editor.callout.dialog.type") }),
/* @__PURE__ */ l(
G,
{
onValueChange: d,
value: c,
children: [
/* @__PURE__ */ o(J, { children: /* @__PURE__ */ o(Q, { placeholder: t("editor.callout.dialog.type.placeholder") }) }),
/* @__PURE__ */ o(X, { children: ot.map((r) => /* @__PURE__ */ o(
Z,
{
value: r.value,
children: t(`editor.callout.type.${r.value}`)
},
r.value
)) })
]
}
)
] }),
/* @__PURE__ */ l("div", { className: "richtext-space-y-2", children: [
/* @__PURE__ */ o(u, { children: t("editor.callout.dialog.title.label") }),
/* @__PURE__ */ o(
v,
{
onChange: (r) => b(r.target.value),
placeholder: t("editor.callout.dialog.title.placeholder"),
value: p
}
)
] }),
/* @__PURE__ */ l("div", { className: "richtext-space-y-2", children: [
/* @__PURE__ */ o(u, { children: t("editor.callout.dialog.body.label") }),
/* @__PURE__ */ o(
v,
{
onChange: (r) => f(r.target.value),
placeholder: t("editor.callout.dialog.body.placeholder"),
value: g
}
)
] })
] }),
/* @__PURE__ */ l(U, { children: [
/* @__PURE__ */ o(
C,
{
onClick: () => i(!1),
variant: "outline",
children: t("editor.callout.dialog.button.cancel")
}
),
/* @__PURE__ */ o(C, { onClick: w, children: t("editor.callout.dialog.button.apply") })
] })
] })
]
}
) : /* @__PURE__ */ o(Y, {});
}
function h(t) {
return (e) => e.getAttribute(t);
}
const lt = /* @__PURE__ */ H.create({
name: "callout",
group: "block",
selectable: !0,
atom: !0,
draggable: !0,
inline: !1,
//@ts-expect-error
addOptions() {
var t;
return {
...(t = this.parent) == null ? void 0 : t.call(this),
HTMLAttributes: {
class: "callout"
},
button: ({ editor: e, t: a }) => ({
component: T,
componentProps: {
action: () => !0,
isActive: () => e.isActive("callout"),
disabled: !1,
icon: "Callout",
tooltip: a("editor.callout.tooltip")
}
})
};
},
parseHTML() {
return [{ tag: "div.callout" }];
},
renderHTML({ HTMLAttributes: t }) {
return ["div", B(this.options && this.options.HTMLAttributes || {}, t)];
},
addAttributes() {
return {
type: {
default: "",
parseHTML: h("type")
},
title: {
default: "",
parseHTML: h("title")
},
body: {
default: "",
parseHTML: h("body")
}
};
},
addCommands() {
return {
setCallout: (t) => ({ chain: e }) => e().insertContent({
type: this.name,
attrs: t
}).run()
};
},
addNodeView() {
return M(et);
}
});
export {
lt as Callout,
ht as RichTextCallout
};