@rtdui/editor
Version:
React rich text editor based on tiptap
66 lines (64 loc) • 2.21 kB
JavaScript
'use client';
const require_runtime = require('../../_virtual/_rolldown/runtime.cjs');
let react = require("react");
let clsx = require("clsx");
clsx = require_runtime.__toESM(clsx);
let _tabler_icons_react = require("@tabler/icons-react");
let react_jsx_runtime = require("react/jsx-runtime");
let _rtdui_core = require("@rtdui/core");
//#region packages/editor/src/RichTextEditor/toolbar/ColorPickerPopover.tsx
function ColorPickerPopover(props) {
const { disabled, onChangeEnd, className, ...other } = props;
const [dropdownOpened, setDropdownOpened] = (0, react.useState)(false);
return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_rtdui_core.Popover, {
opened: dropdownOpened,
onChange: setDropdownOpened,
position: "bottom-start",
offset: 5,
disabled,
children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rtdui_core.Popover.Target, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
...other,
type: "button",
title: "文本颜色",
className: (0, clsx.default)("join-item relative btn btn-xs w-4 p-0", className),
onClick: () => setDropdownOpened(true),
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_tabler_icons_react.IconChevronDown, {
stroke: 1,
size: 12
})
}) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rtdui_core.Popover.Dropdown, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
className: "bg-base-100 shadow-sm p-2 rounded-md",
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rtdui_core.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__ */ (0, react_jsx_runtime.jsx)("button", {
className: "btn btn-xs w-full",
onClick: () => onChangeEnd?.("auto"),
children: "自动"
})
})
}) })]
});
}
//#endregion
exports.ColorPickerPopover = ColorPickerPopover;