reactjs-tiptap-editor
Version:
A modern WYSIWYG rich text editor based on tiptap and shadcn ui for React
217 lines (216 loc) • 7.51 kB
JavaScript
import { M as f, e as p, f as m, m as C } from "./clsx-DaPvp9ji.js";
import { jsx as r, jsxs as h, Fragment as L } from "react/jsx-runtime";
import { useState as x } from "react";
import { u as H, e as M, A as v, I as A } from "./index-RcSPeQHn.js";
import { C as y } from "./separator-C7luvaG8.js";
import "./theme.js";
const k = /(?:^|\s)(==(?!\s+==)((?:[^=]+))==(?!\s+==))$/, b = /(?:^|\s)(==(?!\s+==)((?:[^=]+))==(?!\s+==))/g, R = f.create({
name: "highlight",
addOptions() {
return {
multicolor: !1,
HTMLAttributes: {}
};
},
addAttributes() {
return this.options.multicolor ? {
color: {
default: null,
parseHTML: (t) => t.getAttribute("data-color") || t.style.backgroundColor,
renderHTML: (t) => t.color ? {
"data-color": t.color,
style: `background-color: ${t.color}; color: inherit`
} : {}
}
} : {};
},
parseHTML() {
return [
{
tag: "mark"
}
];
},
renderHTML({ HTMLAttributes: t }) {
return ["mark", C(this.options.HTMLAttributes, t), 0];
},
addCommands() {
return {
setHighlight: (t) => ({ commands: e }) => e.setMark(this.name, t),
toggleHighlight: (t) => ({ commands: e }) => e.toggleMark(this.name, t),
unsetHighlight: () => ({ commands: t }) => t.unsetMark(this.name)
};
},
addKeyboardShortcuts() {
return {
"Mod-Shift-h": () => this.editor.commands.toggleHighlight()
};
},
addInputRules() {
return [
m({
find: k,
type: this.type
})
];
},
addPasteRules() {
return [
p({
find: b,
type: this.type
})
];
}
});
function w({ fill: t }) {
return /* @__PURE__ */ r(
"svg",
{
height: "18px",
version: "1.1",
viewBox: "0 0 256 256",
width: "18px",
xmlns: "http://www.w3.org/2000/svg",
children: /* @__PURE__ */ r(
"g",
{
fill: "none",
fillRule: "evenodd",
stroke: "none",
strokeWidth: 1,
children: /* @__PURE__ */ h("g", { id: "icon/背景颜色", children: [
/* @__PURE__ */ r("g", { fill: "currentColor", children: /* @__PURE__ */ h(
"g",
{
transform: "translate(119.502295, 137.878331) rotate(-135.000000) translate(-119.502295, -137.878331) translate(48.002295, 31.757731)",
children: [
/* @__PURE__ */ r(
"path",
{
d: "M100.946943,60.8084699 L43.7469427,60.8084699 C37.2852111,60.8084699 32.0469427,66.0467383 32.0469427,72.5084699 L32.0469427,118.70847 C32.0469427,125.170201 37.2852111,130.40847 43.7469427,130.40847 L100.946943,130.40847 C107.408674,130.40847 112.646943,125.170201 112.646943,118.70847 L112.646943,72.5084699 C112.646943,66.0467383 107.408674,60.8084699 100.946943,60.8084699 Z M93.646,79.808 L93.646,111.408 L51.046,111.408 L51.046,79.808 L93.646,79.808 Z",
fillRule: "nonzero"
}
),
/* @__PURE__ */ r(
"path",
{
d: "M87.9366521,16.90916 L87.9194966,68.2000001 C87.9183543,69.4147389 86.9334998,70.399264 85.7187607,70.4 L56.9423078,70.4 C55.7272813,70.4 54.7423078,69.4150264 54.7423078,68.2 L54.7423078,39.4621057 C54.7423078,37.2523513 55.5736632,35.1234748 57.0711706,33.4985176 L76.4832996,12.4342613 C78.9534987,9.75382857 83.1289108,9.5834005 85.8093436,12.0535996 C87.1658473,13.303709 87.9372691,15.0644715 87.9366521,16.90916 Z",
fillRule: "evenodd"
}
),
/* @__PURE__ */ r(
"path",
{
d: "M131.3,111.241199 L11.7,111.241199 C5.23826843,111.241199 0,116.479467 0,122.941199 L0,200.541199 C0,207.002931 5.23826843,212.241199 11.7,212.241199 L131.3,212.241199 C137.761732,212.241199 143,207.002931 143,200.541199 L143,122.941199 C143,116.479467 137.761732,111.241199 131.3,111.241199 Z M124,130.241 L124,193.241 L19,193.241 L19,130.241 L124,130.241 Z",
fillRule: "nonzero"
}
)
]
}
) }),
/* @__PURE__ */ r(
"path",
{
d: "M51,218 L205,218 C211.075132,218 216,222.924868 216,229 C216,235.075132 211.075132,240 205,240 L51,240 C44.9248678,240 40,235.075132 40,229 C40,222.924868 44.9248678,218 51,218 Z",
fill: typeof t == "string" ? t : "none",
id: "矩形"
}
)
] })
}
)
}
);
}
function z() {
const t = H(T.name), {
tooltip: e = void 0,
isActive: n = void 0,
defaultColor: i = void 0,
colors: o,
action: s,
shortcutKeys: c
} = (t == null ? void 0 : t.componentProps) ?? {}, { editorDisabled: l } = M(n), [a, d] = x(i);
function g(u) {
l || s && (s == null || s(u), d(u));
}
return t ? /* @__PURE__ */ r(
y,
{
colors: o,
disabled: l,
highlight: !0,
onChange: g,
value: a,
children: /* @__PURE__ */ r(
v,
{
disabled: l,
tooltip: e,
shortcutKeys: c,
children: /* @__PURE__ */ h("span", { className: "richtext-flex richtext-items-center richtext-justify-center richtext-gap-[4px] richtext-text-sm", children: [
/* @__PURE__ */ r(w, { fill: a }),
/* @__PURE__ */ r(
A,
{
className: "!richtext-h-3 !richtext-w-3 richtext-text-zinc-500",
name: "MenuDown"
}
)
] })
}
)
}
) : /* @__PURE__ */ r(L, {});
}
const T = /* @__PURE__ */ R.extend({
addStorage() {
return {
// Stores the currently selected highlight color; undefined indicates "No Fill".
currentColor: this.options.defaultColor || void 0
};
},
//@ts-expect-error
addOptions() {
var t;
return {
...(t = this.parent) == null ? void 0 : t.call(this),
multicolor: !0,
button: ({ editor: e, t: n, extension: i }) => ({
componentProps: {
action: (o) => {
if (typeof o == "string") {
e.storage.highlight.currentColor = o, e.chain().focus().setHighlight({ color: o }).run();
return;
}
e.chain().focus().unsetHighlight().run();
},
isActive: () => e.isActive("highlight") || !1,
disabled: !1,
shortcutKeys: i.options.shortcutKeys ?? ["⇧", "mod", "H"],
tooltip: n("editor.highlight.tooltip"),
defaultColor: i.options.defaultColor
}
})
};
},
addKeyboardShortcuts() {
var t;
return {
...(t = this.parent) == null ? void 0 : t.call(this),
"Mod-Shift-h": () => {
const e = this.storage.currentColor || this.options.defaultColor;
if (!e) {
const { color: i } = this.editor.getAttributes("highlight");
return i ? this.editor.chain().focus().unsetHighlight().run() : !1;
}
return this.editor.isActive("highlight", { color: e }) ? this.editor.chain().focus().unsetHighlight().run() : this.editor.chain().focus().setHighlight({ color: e }).run();
}
};
}
});
export {
T as Highlight,
z as RichTextHighlight
};