@tntd/monaco-editor 1.0.1 → 1.0.3

package/src/core/BaseEditor.js

@@ -0,0 +1,389 @@
+// - Monaco编辑器初始化 ：封装了Monaco编辑器的初始化逻辑 生命周期
+// - 主题定制 ：支持自定义tntd-vs-dark主题
+// - 语言支持 ：支持多种编程语言的语法高亮和智能提示
+import loader from '@monaco-editor/loader';
+import { getLang } from '../I18N';
+import { loadMyLanguage } from '../theme/defineScript';
+import { loadMyTheme } from '../theme/defineTheme';
+
+export function escapeRegExp(string) {
+    return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+}
+
+// 设置同盾tntd-vs-dark主题颜色
+const defaultThemeColor = ({ themeColor }) => ({
+    'editor.background': '#17233D',
+    'editor.foreground': '#BABDC5',
+    'editorGutter.background': '#212c45',
+    'editorLineNumber.foreground': '#BABDC5',
+    'editorCursor.foreground': '#ff9800', // 设置光标颜色
+    'editor.lineHighlightBackground': '#012d57', // 当前行高亮背景色
+    'editor.lineHighlightBorder': '#012d57', // 当前行高亮边框颜色
+    'editor.selectionBackground': '#264f78', // 选中文本背景色
+    'editor.selectionHighlightBackground': '#5f5f5f', // 选中高亮背景色
+    focusBorder: '#212c45',
+    ...(themeColor || {})
+});
+
+// 默认编辑器配置
+const defaultOptions = {
+    selectOnLineNumbers: true,
+    roundedSelection: false,
+    autoIndent: true,
+    fontSize: 14,
+    lineHeight: 24,
+    insertSpaces: true,
+    tabSize: 2,
+    lineDecorationsWidth: 7,
+    glyphMargin: true,
+    renderLineHighlight: 'line', //all
+    lineNumbers: (lineNumber) => String(lineNumber).padStart(2, '0'),
+    wordWrap: 'on', // 或 "on"
+    // 其他可选配置（如显示换行后的行号）
+    wrapLineNumbers: true, //
+    lineNumbersMinChars: 2,
+    contextmenu: false, // 禁用右键菜单
+    folding: true,
+    foldingStrategy: 'auto',
+    // wrappingIndent: 'indent',
+    formatOnPaste: true,
+    formatOnType: false,
+    dragAndDrop: true,
+    cursorStyle: 'line-thin',
+    cursorBlinking: 'blink',
+    suggestOnTriggerCharacters: true,
+    quickSuggestions: {
+        other: true,
+        comments: false,
+        strings: true
+    },
+    minimap: { enabled: false },
+    autoClosingQuotes: true,
+    autoClosingBrackets: true,
+    autoClosingOvertype: 'always',
+    autoClosingDelete: 'always',
+    automaticLayout: true,
+    comments: {
+        allowEmptyComment: true,
+        ignoreEmptyComments: true,
+        insertSpaces: true,
+        blockComment: ['/*', '*/'],
+        lineComment: ['//', '//']
+    },
+    scrollbar: {
+        vertical: 'hidden',
+        horizontal: 'auto',
+        verticalScrollbarSize: 8,
+        horizontalScrollbarSize: 8,
+        alwaysConsumeMouseWheel: false
+    },
+    scrollBeyondLastLine: false,
+    overviewRulerBorder: false,
+    renderValidationDecorations: 'off',
+    overviewRulerLanes: 0
+};
+
+export class BaseEditor {
+    constructor(container, options = {}) {
+        this.container = container;
+        this.options = options;
+        this.monaco = null;
+        this.editor = null;
+        this.disposables = new Set();
+        this.plugins = new Map();
+        this.modeField = options.modeField || null; // 从选项中获取初始 modeField
+        this.defaultJsLang = null;
+
+        //加载配置
+        loader.config({
+            paths: { vs: options.path || process.env.publicPath + '/vendor/vs' },
+            ...(getLang() === 'cn' ? { 'vs/nls': { availableLanguages: { '*': 'zh-cn' } } } : {})
+        });
+        this.monacoLoader = loader.init();
+    }
+
+    // 自定义同盾的vs-dark主题
+    async customTntdTheme() {
+        if (this.hasCustomTntdTheme) {
+            return;
+        }
+
+        // 如果有关键字 针对关键字做高亮处理
+        const { keywords = [], language, themeColor } = this.options || {};
+        if (keywords?.length) {
+            const { tokenizer, ...lang } = this.defaultJsLang || {};
+            const { root, ...rest } = tokenizer || {};
+
+            let keyPattern;
+            if (keywords?.length) {
+                const escapedKeyList = keywords.map((name) => escapeRegExp(name));
+                keyPattern = escapedKeyList.map((name) => `${name}`).join('|');
+            }
+            this.monaco.languages.setMonarchTokensProvider(language, {
+                tokenizer: {
+                    root: [[new RegExp(`\\b(${keyPattern})\\b`, 'gi'), { token: 'keyword-field' }], ...(root || [])],
+                    ...(rest || {})
+                },
+                ...lang
+            });
+        }
+
+        // 自定义同盾的vs-dark主题
+        this.monaco.editor.defineTheme('tntd-vs-dark', {
+            base: 'vs-dark',
+            inherit: true,
+            rules: [
+                {
+                    token: 'keyword-field',
+                    foreground: '#569cd6'
+                }
+            ],
+            colors: defaultThemeColor({ themeColor })
+        });
+        this.hasCustomTntdTheme = true;
+    }
+
+    // 初始化编辑器
+    async init() {
+        try {
+            // 初始化 Monaco
+            this.monaco = await this.monacoLoader.then((res) => {
+                return res;
+            });
+
+            // 执行 willMount 生命周期
+            let finalOptions = this.options;
+
+            if (this.options.editorWillMount && typeof this.options.editorWillMount === 'function') {
+                const willMountOptions = await this.options.editorWillMount(this.monaco);
+                finalOptions = { ...defaultOptions, ...this.options, ...willMountOptions };
+            }
+
+            if (finalOptions.readOnly) {
+                finalOptions.cursorStyle = 'hidden';
+            }
+
+            if (finalOptions?.isFormula) {
+                finalOptions.suggestOnTriggerCharacters = false;
+                finalOptions.quickSuggestions = {
+                    other: false,
+                    comments: false,
+                    strings: false
+                };
+            }
+
+            const languages = this.monaco.languages.getLanguages();
+            const { language, isFormula, themeColor } = finalOptions || {};
+            let defaultJsLang = languages.find((item) => item.id === language);
+            if (!defaultJsLang || isFormula) {
+                defaultJsLang = await languages.find((item) => item.id === 'javascript');
+            }
+            if (defaultJsLang) {
+                defaultJsLang = await defaultJsLang.loader();
+                this.defaultJsLang = defaultJsLang.language;
+            }
+
+            // 自定义同盾的vs-dark主题
+            await this.customTntdTheme();
+            // 配置编辑器
+            this.monaco.languages.typescript.javascriptDefaults.setEagerModelSync(true);
+
+            // 如果是公式 modeField，加载语言以及主题配置
+            if (isFormula) {
+                if (this.modeField) {
+                    await loadMyLanguage({
+                        monaco: this.monaco,
+                        modeField: this.modeField,
+                        defaultJsLang,
+                        languageId: this.options.language
+                    });
+                }
+                await loadMyTheme({ monaco: this.monaco, defaultThemeColor: defaultThemeColor({ themeColor }) });
+            }
+
+            // 创建编辑器实例
+            if (this.options.isDiff) {
+                this.editor = this.monaco.editor.createDiffEditor(this.container, finalOptions);
+                this.editor.setModel({
+                    original: this.monaco.editor.createModel(this.options.original, this.options.originalLanguage || this.options.language),
+                    modified: this.monaco.editor.createModel(this.options.modified, this.options.modifiedLanguage || this.options.language)
+                });
+            } else {
+                this.editor = this.monaco.editor.create(this.container, finalOptions);
+            }
+            this.codeEditor = this.editor;
+
+            // 执行 didMount 生命周期
+            if (finalOptions.editorDidMount) {
+                await finalOptions.editorDidMount({
+                    monaco: this.monaco,
+                    editor: this.editor
+                });
+            }
+
+            return {
+                monaco: this.monaco,
+                editor: this.editor
+            };
+        } catch (error) {
+            console.log('Monaco Editor initialization failed:');
+            throw error;
+        }
+    }
+
+    // 更新语言配置
+    async updateLanguage(modeField) {
+        if (!this.monaco || !modeField) return;
+
+        this.modeField = modeField;
+
+        // 加载语言和主题
+        if (this.options.isFormula) {
+            loadMyLanguage({
+                monaco: this.monaco,
+                modeField: this.modeField,
+                defaultJsLang: this.defaultJsLang,
+                languageId: this.options.language
+            });
+            // loadMyTheme({ monaco: this.monaco, defaultThemeColor });
+        }
+    }
+
+    // 插件系统
+    use(plugin) {
+        if (this.plugins.has(plugin.name)) {
+            this.plugins.get(plugin.name).dispose();
+        }
+        this.plugins.set(plugin.name, plugin);
+        plugin.apply(this);
+        return this;
+    }
+
+    // 事件系统
+    on(event, callback) {
+        let disposable;
+        switch (event) {
+            case 'change':
+                disposable = this.editor?.onDidChangeModelContent?.(() => {
+                    callback(this.getValue(), this.editor, this.monaco);
+                });
+                break;
+            case 'cursorChange': {
+                disposable = this.editor?.onDidChangeCursorPosition?.((event) => {
+                    callback(event, this.editor, this.monaco);
+                });
+                break;
+            }
+
+            default:
+                return null;
+        }
+        if (disposable) {
+            this.disposables.add(disposable);
+        }
+        return disposable;
+    }
+
+    clearAllLanguages(monaco) {
+        // 获取所有已注册的语言
+        const languages = monaco.languages.getLanguages();
+        // 为每个语言创建一个空配置
+        languages.forEach((lang) => {
+            if (lang.id === this.options.language && this.options.language?.startsWith('formulaLang_')) {
+                // 重置词法规则
+                monaco.languages.setMonarchTokensProvider(lang.id, {
+                    tokenizer: {
+                        root: [] // 空词法规则
+                    }
+                });
+
+                // 移除自动补全提供者
+                const disposable = monaco.languages.registerCompletionItemProvider(lang.id, {
+                    provideCompletionItems: () => ({ suggestions: [] })
+                });
+
+                // 立即释放
+                disposable.dispose();
+            }
+        });
+    }
+
+    // 销毁编辑器
+    dispose() {
+        // 执行 willUnmount 生命周期
+        if (this.options.editorWillUnmount) {
+            this.options.editorWillUnmount(this.editor);
+        }
+
+        // 清理插件
+        this.plugins.forEach((plugin) => plugin?.dispose?.());
+        this.plugins.clear();
+
+        this.clearAllLanguages(this.monaco);
+
+        // 清理事件监听
+        this.disposables.forEach((disposable) => disposable?.dispose?.());
+        this.disposables.clear();
+
+        // 销毁编辑器
+        this.editor?.dispose?.();
+        this.editor = null;
+    }
+
+    // 基础编辑器方法
+    getValue() {
+        return this.editor?.getModel()?.getValue() || '';
+    }
+
+    setValue(value) {
+        this.editor?.getModel()?.setValue(value || '');
+    }
+
+    getPosition() {
+        return this.editor?.getPosition();
+    }
+
+    setPosition(position) {
+        this.editor?.setPosition(position);
+    }
+
+    getModel() {
+        return this.editor?.getModel();
+    }
+
+    layout() {
+        this.editor?.layout();
+    }
+
+    focus() {
+        this.editor?.focus();
+    }
+
+    updateOptions(options) {
+        this.editor?.updateOptions(options);
+    }
+
+    // 设置编辑器语言
+    setModelLanguage(model, language) {
+        if (!this.monaco || !model) return;
+        this.monaco.editor.setModelLanguage(model, language);
+    }
+
+    getCursor = () => {
+        const position = this.editor.getPosition();
+        return position;
+    };
+
+    insertText = (content) => {
+        const selections = this.editor.getSelections();
+        if (selections) {
+            const edits = selections.map((selection) => ({
+                range: selection,
+                text: content,
+                forceMoveMarkers: true
+            }));
+            this.editor.executeEdits('edit-selection', edits);
+            this.focus();
+        }
+    };
+}

package/src/index.js

@@ -0,0 +1,7 @@
+import './index.less';
+import BaseMonacoEditor from './BaseMonacoEditor';
+import FormulaEditor from './FormulaEditor';
+import DiffEditor from './DiffEditor';
+// import BaseMonacoEditor, { FormulaEditor, DiffEditor } from '@tntd/monaco-editor';
+export default BaseMonacoEditor;
+export { FormulaEditor, DiffEditor };

package/src/index.less

@@ -0,0 +1,11 @@
+.tnt-react-monaco-editor-container {
+    background-color: #17233d;
+    .line-numbers{
+        word-wrap: normal !important;
+        font-family:  Helvetica, Arial, sans-serif, Microsoft YaHei, Menlo, Monaco, "Courier New", monospace ;
+    }
+}
+
+.tnt-codemirror{
+    border:none !important;
+}

package/src/plugins/cascader/Cascader.js

@@ -0,0 +1,148 @@
+import { useEffect, useState, useMemo } from 'react';
+import { TntdCascader, Tooltip } from 'tntd';
+import TdTag from '@tntd/cascader-tag';
+import './Cascader.less';
+
+export default (props) => {
+    const {
+        notSupportArrayData,
+        selectChange,
+        style = {},
+        tipShow,
+        dropList,
+        fieldInfo,
+        isCascader = true,
+        changeOnSelect = true,
+        showSourceName = true,
+        placement,
+        fieldNames,
+        dropdownClassName
+    } = props;
+    const [popupVisible, setPopupVisible] = useState(true); // 初始展开状态为true
+    const [options, setOptions] = useState([]);
+    const [differentKeys, setDifferentKeys] = useState(0); // 表示不只是字段。存在字段/指标等场景
+
+    useEffect(() => {
+        if (!tipShow) {
+            setPopupVisible(tipShow);
+        }
+    }, [tipShow]);
+
+    // 判断是否展示级联
+    const hasCascaderKey = useMemo(() => {
+        return isCascader && dropList?.[0]?.hasOwnProperty('sourceKey') && dropList?.[0]?.sourceKey;
+    }, [isCascader, dropList]);
+
+    useEffect(() => {
+        const [_filterOptions, optionType, _filterMapOption] = [[], {}, {}];
+        if (dropList?.length) {
+            let [differentKeys, differentSubKeys] = [0, 0];
+            let sourceSubMap = {};
+            // 如果列表数据有sourceKey 或者 指定isCascader 的则自动升级成
+            if (!fieldInfo && hasCascaderKey) {
+                dropList?.forEach((obj) => {
+                    const { sourceKey, sourceName, sourceKey_sub, sourceName_sub, name, isNotFirst } = obj;
+                    if (!isNotFirst) {
+                        _filterMapOption[obj.value] = obj;
+                        if (sourceKey && !optionType[sourceKey]) {
+                            differentKeys++;
+                            optionType[sourceKey] = { title: sourceName, value: sourceKey, name: sourceName, children: [] };
+                            _filterOptions.push(optionType[sourceKey]);
+                        }
+
+                        if (sourceKey_sub) {
+                            const subData = optionType[sourceKey].children.find((data) => data.value === sourceKey_sub);
+                            if (!sourceSubMap?.[sourceKey_sub]) {
+                                sourceSubMap[sourceKey_sub] = true;
+                                differentSubKeys++;
+                            }
+                            if (subData) {
+                                subData.children.push({ title: sourceName_sub, ...obj });
+                            } else {
+                                optionType[sourceKey].children.push({
+                                    title: sourceName_sub,
+                                    name: sourceName_sub,
+                                    value: sourceKey_sub,
+                                    children: [{ title: name, ...obj }]
+                                });
+                            }
+                        }
+                    }
+                });
+                if (Math.max(differentKeys, differentSubKeys) > 1) {
+                    setOptions(_filterOptions);
+                } else {
+                    setOptions(dropList);
+                }
+                setDifferentKeys(Math.max(differentKeys, differentSubKeys));
+            } else {
+                setOptions(dropList);
+            }
+        } else {
+            setOptions([]);
+        }
+    }, [dropList, hasCascaderKey]);
+
+    const renderItem = (data, i) => {
+        const nameKey = fieldNames?.label || 'name';
+        const dName = data?.[nameKey]?.replace(/【.*?】/g, '');
+        return (
+            <Tooltip placement="topLeft" title={dName}>
+                <span>
+                    {!!(data?.type || data?.datatype || data?.dataType) && (
+                        <TdTag
+                            showSourceName={differentKeys < 2 && showSourceName && i === 0 && !!data?.sourceName}
+                            data={{ ...data, showSub: differentKeys < 2 && showSourceName }}
+                        />
+                    )}
+                    <span title={dName}>{dName}</span>
+                </span>
+            </Tooltip>
+        );
+    };
+
+    return (
+        <div className="monaco-scroll-container" style={style}>
+            <TntdCascader
+                placement={placement || 'bottomLeft'}
+                dropdownClassName={`monaco-formula-drop-cascader ${dropdownClassName || ''} ${differentKeys < 2 ? '' : 'more-levels'}`}
+                expandTrigger={changeOnSelect && hasCascaderKey ? 'hover' : 'click'}
+                fieldNames={fieldNames}
+                // searchValue={content || undefined}
+                options={options}
+                open={popupVisible}
+                changeOnSelect={changeOnSelect}
+                renderItem={renderItem}
+                onDropdownVisibleChange={() => setPopupVisible(true)}
+                showCheckedStrategy={TntdCascader.SHOW_PARENT}
+                onChange={(val, selectedOptions) => {
+                    const [nameKey] = [fieldNames?.label || 'name'];
+                    // 不需要回显示sourceKey,sourceKey_sub
+                    if (!fieldInfo && hasCascaderKey && differentKeys > 1) {
+                        selectedOptions = selectedOptions?.slice?.(2);
+                    }
+                    if (selectedOptions?.length) {
+                        const name = [];
+                        selectedOptions.forEach((item, i) => {
+                            let quote = '';
+
+                            if (!notSupportArrayData && item && (item.type === 'ARRAY' || item.array)) {
+                                quote = '[]';
+                            }
+                            if (i > 0) {
+                                name.push('@' + item[nameKey] + quote);
+                            } else {
+                                name.push(item[nameKey] + quote);
+                            }
+                        });
+                        selectChange({
+                            ...(selectedOptions?.[0] || {}),
+                            ...(selectedOptions?.slice(-1)?.[0] || {}),
+                            name: name.join('.')
+                        });
+                    }
+                }}
+            />
+        </div>
+    );
+};

package/src/plugins/cascader/Cascader.less

@@ -0,0 +1,59 @@
+
+.monaco-scroll-container{
+    position: fixed;
+    left: 0;
+    top: 0;
+    height: 0 !important;
+    width: 0 !important;
+    // z-index: 1000;
+    >.tntd-cascader{
+        height: 0 ;
+        width:0;
+        opacity: 0;
+        *{
+            height: 0 !important;
+            width: 0 !important;
+            opacity: 0;
+        }
+    }
+}
+
+.monaco-formula-drop-cascader{
+    &.tntd-select-dropdown{
+        z-index: 1050 !important;
+    }
+    &.more-levels{
+        .tntd-cascader-menu{
+            &:nth-child(1),&:nth-child(2){
+                width: 120px;
+            }
+           .rc-virtual-list{
+                width: auto;
+           }
+        }
+    }
+    &.tntd-cascader-dropdown .tntd-cascader-menu .rc-virtual-list{
+        width: auto ;
+    }
+    &:not(.more-levels){
+        .tntd-cascader-menus{
+            .tntd-cascader-menu{
+                &:only-child{
+                    width: 280px !important;
+                }
+            }
+        }
+    }
+    .tntd-cascader-menus{
+        width:auto;
+        .tntd-cascader-menu{
+            width: 180px !important;
+            .td-tag{
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+                display: contents;
+            }
+        }
+    }
+}