@tohuhono/puck-rich-text
Version:
A puck component for rich text editing made for OberonCMS
73 lines (72 loc) • 2.02 kB
JavaScript
import { jsxs, jsx } from "react/jsx-runtime";
import { FORMAT_ELEMENT_COMMAND } from "lexical";
import { AlignLeft, AlignCenter, AlignJustify, AlignRight } from "lucide-react";
import { DropdownMenu, DropdownTrigger, DropdownContent, DropdownItem } from "../../ui/dropdown-menu/index.js";
const ELEMENT_FORMAT_OPTIONS = {
left: {
Icon: AlignLeft,
IconRTL: AlignLeft,
name: "Left Align",
command: "left"
},
center: {
Icon: AlignCenter,
IconRTL: AlignCenter,
name: "Center Align",
command: "center"
},
justify: {
Icon: AlignJustify,
IconRTL: AlignJustify,
name: "Justify Align",
command: "justify"
},
right: {
Icon: AlignRight,
IconRTL: AlignRight,
name: "Right Align",
command: "right"
},
start: {
Icon: AlignLeft,
IconRTL: AlignRight,
name: "Start Align",
command: "start"
},
end: {
Icon: AlignRight,
IconRTL: AlignLeft,
name: "End Align",
command: "end"
}
};
function ElementFormatDropdown({
editor,
value,
isRTL
}) {
const formatOption = ELEMENT_FORMAT_OPTIONS[value || "left"];
const TriggerIcon = isRTL ? formatOption.IconRTL : formatOption.Icon;
return /* @__PURE__ */ jsxs(DropdownMenu, { children: [
/* @__PURE__ */ jsx(DropdownTrigger, { children: /* @__PURE__ */ jsx(TriggerIcon, { size: 16 }) }),
/* @__PURE__ */ jsx(DropdownContent, { children: Object.keys(ELEMENT_FORMAT_OPTIONS).map((key) => {
const { Icon, IconRTL, name, command } = ELEMENT_FORMAT_OPTIONS[key];
return /* @__PURE__ */ jsxs(
DropdownItem,
{
onClick: () => {
editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, command);
},
children: [
isRTL ? /* @__PURE__ */ jsx(IconRTL, { size: 16 }) : /* @__PURE__ */ jsx(Icon, { size: 16 }),
/* @__PURE__ */ jsx("span", { style: { marginLeft: "4px" }, children: name })
]
},
key
);
}) })
] });
}
export {
ElementFormatDropdown
};