@tohuhono/puck-rich-text
Version:
A puck component for rich text editing made for OberonCMS
121 lines (120 loc) • 5.42 kB
JavaScript
import { jsxs, jsx } from "react/jsx-runtime";
import { INSERT_UNORDERED_LIST_COMMAND, INSERT_ORDERED_LIST_COMMAND } from "@lexical/list";
import { $createHeadingNode, $createQuoteNode } from "@lexical/rich-text";
import { $setBlocksType } from "@lexical/selection";
import { DropdownMenu } from "@radix-ui/react-dropdown-menu";
import { $getSelection, $createParagraphNode } from "lexical";
import { Pilcrow, Heading1, Heading2, Heading3, Heading4, Heading5, Heading6, List, ListOrdered, TextQuote, Code } from "lucide-react";
import { DropdownTrigger, DropdownContent, DropdownItem } from "../../ui/dropdown-menu/index.js";
const blockFormats = {
paragraph: { label: "Paragaph", Icon: Pilcrow },
h1: { label: "Heading 1", Icon: Heading1 },
h2: { label: "Heading 2", Icon: Heading2 },
h3: { label: "Heading 3", Icon: Heading3 },
h4: { label: "Heading 4", Icon: Heading4 },
h5: { label: "Heading 5", Icon: Heading5 },
h6: { label: "Heading 6", Icon: Heading6 },
bullet: { label: "Bulleted List", Icon: List },
number: { label: "Numbered List", Icon: ListOrdered },
quote: { label: "Quote", Icon: TextQuote },
code: { label: "Code Block", Icon: Code }
};
function BlockFormatDropDown({
editor,
blockType,
disabled = false
}) {
const formatParagraph = () => {
editor.update(() => {
const selection = $getSelection();
$setBlocksType(selection, () => $createParagraphNode());
});
};
const formatHeading = (headingSize) => {
if (blockType !== headingSize) {
editor.update(() => {
const selection = $getSelection();
$setBlocksType(selection, () => $createHeadingNode(headingSize));
});
}
};
const formatBulletList = () => {
if (blockType !== "bullet") {
editor.dispatchCommand(INSERT_UNORDERED_LIST_COMMAND, void 0);
} else {
formatParagraph();
}
};
const formatNumberedList = () => {
if (blockType !== "number") {
editor.dispatchCommand(INSERT_ORDERED_LIST_COMMAND, void 0);
} else {
formatParagraph();
}
};
const formatQuote = () => {
if (blockType !== "quote") {
editor.update(() => {
const selection = $getSelection();
$setBlocksType(selection, () => $createQuoteNode());
});
}
};
const TriggerIcon = blockFormats[blockType].Icon;
return /* @__PURE__ */ jsxs(DropdownMenu, { children: [
/* @__PURE__ */ jsx(
DropdownTrigger,
{
disabled,
"aria-label": "Formatting options for text style",
children: /* @__PURE__ */ jsx(TriggerIcon, { size: 16 })
}
),
/* @__PURE__ */ jsxs(DropdownContent, { children: [
/* @__PURE__ */ jsxs(DropdownItem, { onClick: formatParagraph, children: [
/* @__PURE__ */ jsx(blockFormats.paragraph.Icon, { size: 16 }),
/* @__PURE__ */ jsx("span", { style: { marginLeft: "4px" }, children: blockFormats.paragraph.label })
] }),
/* @__PURE__ */ jsxs(DropdownItem, { onClick: () => formatHeading("h1"), children: [
/* @__PURE__ */ jsx(blockFormats.h1.Icon, { size: 16 }),
/* @__PURE__ */ jsx("span", { style: { marginLeft: "4px" }, children: blockFormats.h1.label })
] }),
/* @__PURE__ */ jsxs(DropdownItem, { onClick: () => formatHeading("h2"), children: [
/* @__PURE__ */ jsx(blockFormats.h2.Icon, { size: 16 }),
/* @__PURE__ */ jsx("span", { style: { marginLeft: "4px" }, children: blockFormats.h2.label })
] }),
/* @__PURE__ */ jsxs(DropdownItem, { onClick: () => formatHeading("h3"), children: [
/* @__PURE__ */ jsx(blockFormats.h3.Icon, { size: 16 }),
/* @__PURE__ */ jsx("span", { style: { marginLeft: "4px" }, children: blockFormats.h3.label })
] }),
/* @__PURE__ */ jsxs(DropdownItem, { onClick: () => formatHeading("h4"), children: [
/* @__PURE__ */ jsx(blockFormats.h4.Icon, { size: 16 }),
/* @__PURE__ */ jsx("span", { style: { marginLeft: "4px" }, children: blockFormats.h4.label })
] }),
/* @__PURE__ */ jsxs(DropdownItem, { onClick: () => formatHeading("h5"), children: [
/* @__PURE__ */ jsx(blockFormats.h5.Icon, { size: 16 }),
/* @__PURE__ */ jsx("span", { style: { marginLeft: "4px" }, children: blockFormats.h5.label })
] }),
/* @__PURE__ */ jsxs(DropdownItem, { onClick: () => formatHeading("h6"), children: [
/* @__PURE__ */ jsx(blockFormats.h6.Icon, { size: 16 }),
/* @__PURE__ */ jsx("span", { style: { marginLeft: "4px" }, children: blockFormats.h6.label })
] }),
/* @__PURE__ */ jsxs(DropdownItem, { onClick: formatBulletList, children: [
/* @__PURE__ */ jsx(blockFormats.bullet.Icon, { size: 16 }),
/* @__PURE__ */ jsx("span", { style: { marginLeft: "4px" }, children: blockFormats.bullet.label })
] }),
/* @__PURE__ */ jsxs(DropdownItem, { onClick: formatNumberedList, children: [
/* @__PURE__ */ jsx(blockFormats.number.Icon, { size: 16 }),
/* @__PURE__ */ jsx("span", { style: { marginLeft: "4px" }, children: blockFormats.number.label })
] }),
/* @__PURE__ */ jsxs(DropdownItem, { onClick: formatQuote, children: [
/* @__PURE__ */ jsx(blockFormats.quote.Icon, { size: 16 }),
/* @__PURE__ */ jsx("span", { style: { marginLeft: "4px" }, children: blockFormats.quote.label })
] })
] })
] });
}
export {
BlockFormatDropDown,
blockFormats
};