@explita/editor
Version:
`@explita/editor` is a versatile, modern rich-text editor built on TipTap for seamless integration into React applications. It provides extensive customization options and advanced features to cater to diverse content creation needs.
34 lines (33 loc) • 1.93 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { DropdownMenu, DropdownMenuContent, DropdownMenuTrigger, } from "./ui/dropdown-menu";
import { useEditorStore } from "../store/useEditorState";
import { LuChevronDown } from "react-icons/lu";
import { headings } from "../lib/constants";
import { cn } from "../lib/utils";
export function Heading() {
const { editor } = useEditorStore();
function getCurrentHeading() {
for (let level = 1; level <= 5; level++) {
if (editor?.isActive("heading", { level })) {
return `Heading ${level}`;
}
}
return "Normal";
}
return (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs("button", { className: "dropdown-trigger-button", children: [_jsx("span", { className: "truncate", children: getCurrentHeading() }), _jsx(LuChevronDown, { size: 16 })] }) }), _jsx(DropdownMenuContent, { className: "editor-dropdown-content", align: "start", children: headings.map(({ label, value, fontSize }) => {
return (_jsx("button", { onClick: () => {
if (value === 0) {
editor?.chain().focus().setParagraph().run();
}
else {
editor
?.chain()
.focus()
.toggleHeading({ level: value })
.run();
}
}, className: cn("editor-dropdown-menu-button", (value === 0 && !editor?.isActive("heading")) ||
(editor?.isActive("heading", { level: value }) &&
"editor-item-active")), style: { fontSize }, children: label }, value));
}) })] }));
}