@rtdui/editor
Version:
React rich text editor based on tiptap
64 lines (62 loc) • 1.81 kB
JavaScript
'use client';
import { useState } from "react";
import clsx from "clsx";
import { IconChevronDown } from "@tabler/icons-react";
import { jsx, jsxs } from "react/jsx-runtime";
import { ColorPicker, Popover } from "@rtdui/core";
//#region packages/editor/src/RichTextEditor/toolbar/ColorPickerPopover.tsx
function ColorPickerPopover(props) {
const { disabled, onChangeEnd, className, ...other } = props;
const [dropdownOpened, setDropdownOpened] = useState(false);
return /* @__PURE__ */ jsxs(Popover, {
opened: dropdownOpened,
onChange: setDropdownOpened,
position: "bottom-start",
offset: 5,
disabled,
children: [/* @__PURE__ */ jsx(Popover.Target, { children: /* @__PURE__ */ jsx("button", {
...other,
type: "button",
title: "文本颜色",
className: clsx("join-item relative btn btn-xs w-4 p-0", className),
onClick: () => setDropdownOpened(true),
children: /* @__PURE__ */ jsx(IconChevronDown, {
stroke: 1,
size: 12
})
}) }), /* @__PURE__ */ jsx(Popover.Dropdown, { children: /* @__PURE__ */ jsx("div", {
className: "bg-base-100 shadow-sm p-2 rounded-md",
children: /* @__PURE__ */ jsx(ColorPicker, {
onChangeEnd: (val) => onChangeEnd?.(val),
format: "hex",
swatches: [
"#000",
"#fff",
"#fa5252",
"#e64980",
"#be4bdb",
"#7950f2",
"#4c6ef5",
"#228be6",
"#15aabf",
"#12b886",
"#40c057",
"#82c91e",
"#fab005",
"#fd7e14"
],
swatchesPerRow: 7,
withPicker: true,
focusable: false,
onColorSwatchClick: () => setDropdownOpened(false),
children: /* @__PURE__ */ jsx("button", {
className: "btn btn-xs w-full",
onClick: () => onChangeEnd?.("auto"),
children: "自动"
})
})
}) })]
});
}
//#endregion
export { ColorPickerPopover };