@tntd/monaco-editor 1.0.1 → 1.0.3

package/src/plugins/suggestion/index.js

@@ -0,0 +1,157 @@
+export class SuggestionPlugin {
+    constructor(options = {}) {
+        this.name = 'suggestion';
+        this.options = options;
+        this.disposable = null;
+        this.suggestTime = null;
+        this.baseEditor = null;
+        this.methodInfo = null;
+    }
+
+    async apply(baseEditor) {
+        this.baseEditor = baseEditor;
+        const { monaco } = baseEditor;
+        const { language, triggerCharacters: originTriggerCharacters, registerSuggestions, defaultLanguages } = this.options;
+        this.dispose();
+
+        let triggerCharacters = originTriggerCharacters;
+        // 如果是函数库，默认增加# 输入#默认带出级联
+        if (language?.startsWith('formulaLang')) {
+            if (triggerCharacters?.length && !triggerCharacters.includes('#')) {
+                triggerCharacters.push('#');
+            }
+            if (!triggerCharacters?.length) {
+                triggerCharacters = ['#'];
+            }
+        }
+
+        if (!monaco) return;
+
+        try {
+            // 获取语言关键字
+            const typescriptKeywords = await monaco.languages
+                .getLanguages()
+                .find((lang) => lang.id === language)
+                ?.loader?.();
+
+            let keywords = [];
+            if (typescriptKeywords?.language?.keywords) {
+                keywords = typescriptKeywords.language.keywords;
+            }
+
+            // 注册自动完成提供程序
+            this.disposable = monaco.languages.registerCompletionItemProvider(language, {
+                ...(triggerCharacters && { triggerCharacters }),
+                provideCompletionItems: (model, position) => {
+                    const { lineNumber, column } = position;
+                    let suggestions = [];
+
+                    const textBeforePointer = model.getValueInRange({
+                        startLineNumber: lineNumber,
+                        startColumn: 0,
+                        endLineNumber: lineNumber,
+                        endColumn: column
+                    });
+
+                    const contents = textBeforePointer.trim().split(/\s+/);
+                    const lastContents = contents[contents?.length - 1]; // 获取最后一段非空字符串
+
+                    // 添加语言关键字建议
+                    if (lastContents && !defaultLanguages?.includes(language)) {
+                        keywords.forEach((key) => {
+                            suggestions.push({
+                                detail: 'keyword',
+                                label: key,
+                                insertText: key,
+                                kind: monaco.languages.CompletionItemKind.Keyword
+                            });
+                        });
+                    }
+
+                    if (registerSuggestions && typeof registerSuggestions === 'function') {
+                        const newSuggestions = registerSuggestions(model, position, suggestions, monaco);
+                        if (newSuggestions?.suggestions) {
+                            suggestions = newSuggestions.suggestions;
+                        }
+                    }
+
+                    // 如果是函数库 支持
+                    if (language?.startsWith('formulaLang')) {
+                        const formulaSuggestions = this.formulaRegisterSuggestions(model, position, suggestions, monaco);
+                        if (formulaSuggestions?.suggestions) {
+                            suggestions = formulaSuggestions.suggestions;
+                        }
+                    }
+
+                    return { suggestions };
+                }
+            });
+        } catch (error) {
+            console.error('Failed to register completion provider:', error);
+        }
+    }
+
+    // sql 定义注册
+    formulaRegisterSuggestions = (model, position, suggestions = [], monaco) => {
+        let methodList = this.options.methodList;
+        if (this.methodInfo) {
+            methodList = methodList?.filter((item) => item?.name?.startsWith(this.methodInfo));
+        }
+        suggestions = methodList?.map((item) => {
+            return {
+                detail: item?.description,
+                label: item?.name, // 显示的提示内容;默认情况下，这也是选择完成时插入的文本。
+                insertText: item.value?.startsWith('#') ? item.value?.slice(1) : item.value, // 选择此完成时应插入到文档中的字符串或片段
+                kind: monaco.languages.CompletionItemKind['Method'] // 此完成项的种类。编辑器根据图标的种类选择图标。
+            };
+        });
+
+        return {
+            suggestions
+        };
+    };
+
+    // 触发自动完成建议
+    triggerSuggest = (methodInfo) => {
+        if (!this.baseEditor?.editor) return;
+
+        if (this.suggestTime) {
+            clearTimeout(this.suggestTime);
+        }
+
+        this.suggestTime = setTimeout(() => {
+            this.methodInfo = methodInfo;
+            this.dispose = this.baseEditor.editor.trigger('', 'editor.action.triggerSuggest', {});
+        }, 0);
+    };
+
+    /**
+     * Cleans up resources by disposing the suggestion provider and clearing any pending suggestion timeouts.
+     * This method ensures proper cleanup of Monaco editor suggestion related resources.
+     */
+    dispose = () => {
+        if (this.disposable) {
+            this.disposable.dispose();
+            this.disposable = null;
+        }
+
+        if (this.suggestTime) {
+            clearTimeout(this.suggestTime);
+            this.suggestTime = null;
+        }
+        this.methodInfo = null;
+    };
+
+    clearSuggest = () => {
+        this.methodInfo = null;
+    };
+
+    updateOptions = (options) => {
+        if (options) {
+            this.options = {
+                ...(this.options || {}),
+                ...options
+            };
+        }
+    };
+}

package/src/theme/defineScript.js

@@ -0,0 +1,119 @@
+import { escapeRegExp } from '../core/BaseEditor';
+const markList = ['>=', '<=', '!=', '=', '>', '<', '+', '-', '*', '/', '(', ')', ';', ',', ':', '{', '}', '.', '[', ']', '&&', '||'];
+
+export const loadMyLanguage = ({ monaco, modeField = {}, defaultJsLang, languageId }) => {
+    const { tokenizer, ...lang } = defaultJsLang || {};
+    const { root, ...rest } = tokenizer || {};
+
+    const { codemirrorMethodList = [], codemirrorFieldList = [], codemirrorKeywordList = [], codemirrorNormalList = [] } = modeField || {};
+
+    // 对需要转义的特殊字符进行转义
+    const escapedMarkList = markList.map((name) => escapeRegExp(name));
+    const markPattern = escapedMarkList.map((name) => `(${name})`).join('|');
+
+    // 函数
+    const escapedFunctionList = codemirrorMethodList.map((name) => escapeRegExp(name));
+    const functionPattern = `(${escapedFunctionList.join('|')})`;
+
+    // 字段
+    const fieldEscapedMarkList = codemirrorFieldList?.map((name) => '@' + escapeRegExp(name));
+    const fieldRegexPattern = `(${fieldEscapedMarkList.join('|')})`;
+
+    // 关键字
+    const keyEscapedMarkList = codemirrorKeywordList?.map((name) => escapeRegExp(name));
+    const keyRegexPattern = `(${keyEscapedMarkList.join('|')})`;
+
+    // 关键字
+    const normalEscapedMarkList = codemirrorNormalList?.map((name) => escapeRegExp(name));
+    const normalRegexPattern = `(${normalEscapedMarkList.join('|')})`;
+
+    const modeFiledReg = [];
+
+    if (codemirrorKeywordList?.length) {
+        modeFiledReg.push([new RegExp(keyRegexPattern), 'keyword']);
+    }
+
+    if (codemirrorMethodList?.length) {
+        modeFiledReg.push([new RegExp(functionPattern), 'function-keyword']);
+    }
+
+    if (codemirrorNormalList?.length) {
+        modeFiledReg.push([new RegExp(normalRegexPattern), 'function-keyword']);
+    }
+
+    if (codemirrorFieldList?.length) {
+        modeFiledReg.push([new RegExp(`${fieldRegexPattern}`), 'field-keyword']);
+    }
+
+    function isLanguageRegistered(cLanguageId) {
+        const registeredLanguages = monaco.languages.getLanguages();
+        return registeredLanguages.some((language) => language.id === cLanguageId);
+    }
+
+    const isRegistered = isLanguageRegistered(languageId);
+    if (!isRegistered) {
+        monaco.languages.register({ id: languageId });
+
+        // 继承js的快捷方式等
+        monaco.languages.setLanguageConfiguration(languageId, {
+            comments: {
+                lineComment: '//',
+                blockComment: ['/*', '*/']
+            },
+            brackets: [
+                ['{', '}'],
+                ['[', ']'],
+                ['(', ')']
+            ],
+            autoClosingPairs: [
+                { open: '{', close: '}' },
+                { open: '[', close: ']' },
+                { open: '(', close: ')' },
+                { open: '"', close: '"' },
+                { open: '\'', close: '\'' }
+            ],
+            surroundingPairs: [
+                { open: '{', close: '}' },
+                { open: '[', close: ']' },
+                { open: '(', close: ')' },
+                { open: '"', close: '"' },
+                { open: '\'', close: '\'' }
+            ]
+        });
+    }
+    monaco.languages.setMonarchTokensProvider(languageId, {
+        // 继承 JavaScript 的大小写敏感性
+        // ignoreCase: true,
+        tokenizer: {
+            root: [
+                // 单行注释
+                { regex: /\/\/.*/, action: { token: 'comment' } },
+                { regex: /\/\*/, action: { token: 'comment', next: '@comment' } },
+                { regex: /\*\//, action: { token: 'comment', next: '@pop' } },
+                // 块注释
+                { regex: /\/\*([^*]|[\r\n]|(\*+([^*/]|[\r\n])))*\*+\//, action: { token: 'comment' } },
+
+                // 处理符号
+                [new RegExp(markPattern), { token: 'mark-keyword' }],
+                [/\b(true|false)\b/, { token: 'boolean-keyword' }],
+                // 添加你的自定义关键字
+                ...(modeFiledReg || []),
+                ...(root || []),
+
+                // 标识符规则（必须在错误规则之前）
+                { regex: /[a-zA-Z_]\w*/, action: { token: 'error-keyword' } },
+
+                // 错误关键字规则（放在最后，作为默认匹配）
+                { regex: /./, action: { token: 'error-keyword' } }
+            ],
+            // // 注释状态：处理多行注释 /* ... */
+            // comment: [
+            //     { regex: /\*\//, token: "comment", next: "@pop" }, // 匹配结束标记，退出 comment 状态
+            //     { regex: /[^*]+/, token: "comment" }, // 匹配非 * 内容
+            //     { regex: /\*/, token: "comment" } // 匹配单独的 *
+            // ],
+            ...(rest || {})
+        },
+        ...lang
+    });
+};

package/src/theme/defineTheme.js

@@ -0,0 +1,30 @@
+let hasDefinedTheme = false;
+export const loadMyTheme = ({ monaco, defaultThemeColor }) => {
+    if (hasDefinedTheme) return;
+    // 定义一个新的主题，或者修改现有主题
+    monaco.editor.defineTheme('formulaTheme', {
+        base: 'vs-dark', // 可以是 'vs', 'vs-dark', 或 'hc-black'
+        inherit: true, // 是否继承基础主题的其他设置
+        rules: [
+            {
+                token: 'function-keyword',
+                foreground: '#03a9f4' // 关键字颜色
+            },
+            {
+                token: 'field-keyword',
+                foreground: '#ff9800' // 关键字颜色
+            },
+            {
+                token: 'mark-keyword',
+                foreground: '#ffffff'
+            },
+            { token: 'error-keyword', foreground: '#f14c4c', fontStyle: 'underline' } // 红色加粗
+        ],
+        colors: {
+            ...defaultThemeColor
+        }
+    });
+
+    monaco.editor.setTheme('formulaTheme');
+    hasDefinedTheme = true;
+};

package/src/utils/format.js

@@ -0,0 +1,72 @@
+// 标记错误信息
+const markMistake = (range, type, message, editor, monaco) => {
+    const { startLineNumber, endLineNumber, startColumn, endColumn } = range;
+    monaco.editor.setModelMarkers(editor.getModel(), 'eslint', [
+        {
+            startLineNumber,
+            endLineNumber,
+            startColumn,
+            endColumn,
+            severity: monaco.MarkerSeverity[type], // type可以是Error,Warning,Info
+            message
+        }
+    ]);
+};
+
+// 清除错误信息
+const clearMistake = ({ monaco, editor }) => {
+    monaco.editor.setModelMarkers(editor.getModel(), 'eslint', []);
+};
+
+// 格式化代码
+export const formatCustom = ({ needValue, format, editor, monaco }) => {
+    clearMistake({ editor, monaco });
+    try {
+        editor.setValue(format(editor.getValue()));
+    } catch (e) {
+        const { message } = e;
+        const list = message.split(' ');
+        const line = list.indexOf('line');
+        const column = list.indexOf('column');
+        markMistake(
+            {
+                startLineNumber: Number(list[line + 1]),
+                endLineNumber: Number(list[line + 1]),
+                startColumn: Number(list[column + 1]),
+                endColumn: Number(list[column + 1])
+            },
+            'Error',
+            message,
+            editor,
+            monaco
+        );
+    }
+    if (needValue) {
+        return editor.getValue();
+    }
+};
+
+// Lint
+export const validateInfo = ({ format, editor, monaco }) => {
+    clearMistake({ editor, monaco });
+    try {
+        format(editor.getValue());
+    } catch (e) {
+        const { message } = e;
+        const list = message.split(' ');
+        const line = list.indexOf('line');
+        const column = list.indexOf('column');
+        markMistake(
+            {
+                startLineNumber: Number(list[line + 1]),
+                endLineNumber: Number(list[line + 1]),
+                startColumn: Number(list[column + 1]),
+                endColumn: Number(list[column + 1])
+            },
+            'Error',
+            message,
+            editor,
+            monaco
+        );
+    }
+};

package/src/utils/index.js

@@ -0,0 +1,91 @@
+export function processSize(size) {
+    return !/^\d+$/.test(size) ? size : `${size}px`;
+}
+
+// 查找最近的\[\]
+export const findNearestLeftParenthesisIndex = (str, rightParenthesisIndex) => {
+    let stack = [];
+    for (let i = 0; i < rightParenthesisIndex; i++) {
+        if (str[i] === '[') {
+            stack.push(i);
+        } else if (str[i] === ']') {
+            if (stack.length > 0) {
+                stack.pop();
+            }
+        }
+    }
+    if (stack.length > 0) {
+        return stack.pop();
+    }
+    return -1; // 如果没有匹配的左括号，返回 -1
+};
+
+export function noop() {}
+
+/**
+ * 辅助方法：处理最终非.结尾的路径片段，提取目标父节点
+ * @param {string} processedPath - 已处理（不以.结尾）的路径片段
+ * @returns {string} 提取并转换后的父节点
+ */
+export function getParentItem({ prevIsDotObj, fieldIndex, cursorBeforeOneChar }) {
+    let [prevParentItem, preNearItem] = [,];
+    let preIndex;
+    const getParentItemInner = ({ prevIsDotObj, fieldIndex, cursorBeforeOneChar }) => {
+        if (prevIsDotObj?.endsWith('.')) {
+            // 获取@xx[@xxx].@a strIndex 获取 @xxx的下标
+            const strIndex = cursorBeforeOneChar.substring(0, fieldIndex - 1).lastIndexOf('@', fieldIndex - 1) + 1;
+
+            if (prevIsDotObj.endsWith('].')) {
+                let leftQuoteIndex = findNearestLeftParenthesisIndex(cursorBeforeOneChar, fieldIndex - 2);
+                // @ 小于 [ ; @aa[@bb].
+                // preStr @aa[ 中[ 的下标
+                // lastIndex = @bb 的@
+                if (fieldIndex < leftQuoteIndex) {
+                    // @aa[@bb].
+                    // 获取@aa 从strIndex 到 匹配的[
+                    // prevParentItem = cursorBeforeOneChar.substring(strIndex, leftQuoteIndex);
+                } else {
+                    prevParentItem = cursorBeforeOneChar.substring(1, leftQuoteIndex);
+                    fieldIndex = prevParentItem.lastIndexOf('@') + 1;
+                    preIndex = fieldIndex;
+                    prevParentItem = prevParentItem.substring(fieldIndex);
+                }
+            } else {
+                prevParentItem = cursorBeforeOneChar.substring(strIndex, fieldIndex - 1);
+                preIndex = strIndex - 1;
+            }
+            if (!preNearItem) {
+                preNearItem = prevParentItem;
+            }
+
+            if (preIndex > -1) {
+                return getParentItemInner({
+                    prevIsDotObj: cursorBeforeOneChar.substring(0, preIndex),
+                    fieldIndex: preIndex,
+                    cursorBeforeOneChar
+                });
+            }
+        }
+    };
+
+    getParentItemInner({ prevIsDotObj, fieldIndex, cursorBeforeOneChar });
+    return { prevParentItem, preNearItem };
+}
+
+// 根据父节点递归拿到相应层级的数据
+export const getChildList = ({ prevParentItem, preNearItem, fieldList }) => {
+    let preParentInfo = fieldList.find((item) => item.name.includes(prevParentItem));
+
+    let childInfo = preParentInfo;
+    const getChildListInner = (pp) => {
+        pp?.children?.forEach((item) => {
+            if (item.name.includes(preNearItem)) {
+                childInfo = item;
+            } else {
+                getChildListInner(item);
+            }
+        });
+    };
+    getChildListInner(preParentInfo);
+    return childInfo || fieldList;
+};