@lobehub/editor
Version:
A powerful and extensible rich text editor built on Meta's Lexical framework, providing a modern editing experience with React integration.
77 lines (76 loc) • 3.05 kB
JavaScript
'use client';
import { Flexbox, MaterialFileTypeIcon, Select, Text } from '@lobehub/ui';
import { cx } from 'antd-style';
import { useMemo } from 'react';
import { useTranslation } from "../../../../editor-kernel/react/useTranslation";
import { MODES } from "../../lib/mode";
import { styles } from "./style";
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
export var LanguageSelect = function LanguageSelect(_ref) {
var selectedLang = _ref.selectedLang,
onLanguageChange = _ref.onLanguageChange;
var t = useTranslation();
// 语言选项，使用 useMemo 优化性能
var languageOptions = useMemo(function () {
return MODES.map(function (mode) {
var _mode$ext, _mode$ext2;
return {
aliases: mode.ext || [],
label: /*#__PURE__*/_jsxs(Flexbox, {
align: 'center',
gap: 4,
horizontal: true,
children: [/*#__PURE__*/_jsx(MaterialFileTypeIcon, {
fallbackUnknownType: false,
filename: (_mode$ext = mode.ext) !== null && _mode$ext !== void 0 && _mode$ext[0] ? "*.".concat(mode.ext[0]) : "*.".concat(mode.value),
size: 18,
type: 'file',
variant: 'raw'
}), /*#__PURE__*/_jsx(Text, {
ellipsis: true,
fontSize: 13,
children: mode.name
})]
}),
title: (_mode$ext2 = mode.ext) !== null && _mode$ext2 !== void 0 && _mode$ext2.length ? mode.ext.map(function (ext) {
return "*.".concat(ext);
}).join(',') : "*.".concat(mode.value),
value: mode.value
};
});
}, []);
return /*#__PURE__*/_jsx(Flexbox, {
align: 'center',
className: 'cm-language-select',
gap: 4,
horizontal: true,
onClick: function onClick(e) {
return e.stopPropagation();
},
children: /*#__PURE__*/_jsx(Select, {
className: cx(styles.container),
filterOption: function filterOption(input, option) {
var _option$value, _option$aliases;
var lang = input.toLowerCase();
// 支持按值匹配
if (option !== null && option !== void 0 && (_option$value = option.value) !== null && _option$value !== void 0 && _option$value.toLowerCase().startsWith(lang)) return true;
// 支持按名称匹配
if (String(option === null || option === void 0 ? void 0 : option.label).toLowerCase().includes(lang)) return true;
// 支持按扩展名匹配
if (option !== null && option !== void 0 && (_option$aliases = option.aliases) !== null && _option$aliases !== void 0 && _option$aliases.some(function (ext) {
return ext.toLowerCase().startsWith(lang);
})) return true;
return false;
},
onChange: onLanguageChange,
options: languageOptions,
placeholder: t('codemirror.selectLanguage'),
showSearch: true,
size: "small",
value: selectedLang,
variant: 'borderless'
})
});
};
LanguageSelect.displayName = 'LanguageSelect';