@yuntijs/ui
Version:
☁️ Yunti UI - an open-source UI component library for building Cloud Native web apps
120 lines • 3.32 kB
JavaScript
import { Icon } from '@lobehub/ui';
import { Dropdown, Flex } from 'antd';
import { useTheme } from 'antd-style';
import { ChevronDown, Heading1, Heading2, Heading3, Logs } from 'lucide-react';
import { useCallback, useMemo } from 'react';
import { BLOCK_TYPE, formatHeading, formatParagraph } from "./utils";
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
export var BlockFormatDropDown = function BlockFormatDropDown(_ref) {
var _items$find;
var editor = _ref.editor,
blockType = _ref.blockType,
_ref$disabled = _ref.disabled,
disabled = _ref$disabled === void 0 ? false : _ref$disabled;
var token = useTheme();
var onClick = useCallback(function (_ref2) {
var key = _ref2.key;
switch (key) {
case BLOCK_TYPE.PARAGRAPH:
{
formatParagraph(editor);
break;
}
case BLOCK_TYPE.H1:
{
formatHeading(editor, blockType, 'h1');
break;
}
case BLOCK_TYPE.H2:
{
formatHeading(editor, blockType, 'h2');
break;
}
case BLOCK_TYPE.H3:
{
formatHeading(editor, blockType, 'h3');
break;
}
default:
{
break;
}
}
}, [blockType, editor]);
var items = useMemo(function () {
return [{
label: /*#__PURE__*/_jsxs(Flex, {
align: "center",
gap: 10,
children: [/*#__PURE__*/_jsx(Icon, {
color: token.colorTextTertiary,
icon: Logs,
size: 16
}), /*#__PURE__*/_jsx("span", {
children: "Paragraph"
})]
}),
key: BLOCK_TYPE.PARAGRAPH
}, {
label: /*#__PURE__*/_jsxs(Flex, {
align: "center",
gap: 10,
children: [/*#__PURE__*/_jsx(Icon, {
color: token.colorTextTertiary,
icon: Heading1,
size: 16
}), /*#__PURE__*/_jsx("span", {
children: "Heading 1"
})]
}),
key: BLOCK_TYPE.H1
}, {
label: /*#__PURE__*/_jsxs(Flex, {
align: "center",
gap: 10,
children: [/*#__PURE__*/_jsx(Icon, {
color: token.colorTextTertiary,
icon: Heading2,
size: 16
}), /*#__PURE__*/_jsx("span", {
children: "Heading 2"
})]
}),
key: BLOCK_TYPE.H2
}, {
label: /*#__PURE__*/_jsxs(Flex, {
align: "center",
gap: 10,
children: [/*#__PURE__*/_jsx(Icon, {
color: token.colorTextTertiary,
icon: Heading3,
size: 16
}), /*#__PURE__*/_jsx("span", {
children: "Heading 3"
})]
}),
key: BLOCK_TYPE.H3
}];
}, [token]);
return /*#__PURE__*/_jsx(Dropdown, {
disabled: disabled,
menu: {
items: items,
onClick: onClick,
activeKey: blockType
},
trigger: ['click'],
children: /*#__PURE__*/_jsxs(Flex, {
align: "center",
gap: 16,
children: [((_items$find = items.find(function (d) {
return d.key === blockType;
})) === null || _items$find === void 0 ? void 0 : _items$find.label) || items[0].label, /*#__PURE__*/_jsx(Icon, {
color: token.colorTextQuaternary,
icon: ChevronDown,
size: 18
})]
})
});
};