@lobehub/editor
Version:
A powerful and extensible rich text editor built on Meta's Lexical framework, providing a modern editing experience with React integration.
79 lines (78 loc) • 2.56 kB
JavaScript
'use client';
import { ActionIcon, Flexbox, InputNumber, Popover, Text } from '@lobehub/ui';
import { Switch } from 'antd';
import { MoreHorizontalIcon } from 'lucide-react';
import { useCallback } from 'react';
import { useTranslation } from "../../../../editor-kernel/react/useTranslation";
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
export var MoreOptions = function MoreOptions(_ref) {
var tabSize = _ref.tabSize,
onTabSizeChange = _ref.onTabSizeChange,
useTabs = _ref.useTabs,
onUseTabsChange = _ref.onUseTabsChange,
showLineNumbers = _ref.showLineNumbers,
onShowLineNumbersChange = _ref.onShowLineNumbersChange;
var t = useTranslation();
var handleTabSizeChange = useCallback(function () {
var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 2;
var v = value === null ? 2 : value;
onTabSizeChange(v);
}, [onTabSizeChange]);
return /*#__PURE__*/_jsx(Popover, {
arrow: false,
content: /*#__PURE__*/_jsxs(Flexbox, {
gap: 8,
style: {
minWidth: 240
},
children: [/*#__PURE__*/_jsxs(Flexbox, {
align: 'center',
gap: 8,
horizontal: true,
justify: 'space-between',
children: [/*#__PURE__*/_jsx(Text, {
children: t('codemirror.tabSize')
}), /*#__PURE__*/_jsx(InputNumber, {
max: 8,
min: 1,
onChange: handleTabSizeChange,
size: "small",
value: tabSize
})]
}), /*#__PURE__*/_jsxs(Flexbox, {
align: 'center',
gap: 8,
horizontal: true,
justify: 'space-between',
children: [/*#__PURE__*/_jsx(Text, {
children: t('codemirror.useTabs')
}), /*#__PURE__*/_jsx(Switch, {
checked: useTabs,
onChange: onUseTabsChange,
size: "small"
})]
}), /*#__PURE__*/_jsxs(Flexbox, {
align: 'center',
gap: 8,
horizontal: true,
justify: 'space-between',
children: [/*#__PURE__*/_jsx(Text, {
children: t('codemirror.showLineNumbers')
}), /*#__PURE__*/_jsx(Switch, {
checked: showLineNumbers,
onChange: onShowLineNumbersChange,
size: "small"
})]
})]
}),
placement: "bottomRight",
trigger: "click",
children: /*#__PURE__*/_jsx(ActionIcon, {
className: 'cm-hidden-actions',
icon: MoreHorizontalIcon,
size: "small"
})
});
};
MoreOptions.displayName = 'MoreOptions';