@tntd/monaco-editor 1.0.1 → 1.0.3

package/src/plugins/cascader/index.js

@@ -0,0 +1,503 @@
+import { findNearestLeftParenthesisIndex, getParentItem, getChildList } from '../../utils';
+import React from 'react';
+import ReactDOM from 'react-dom';
+import Cascader from './Cascader';
+
+export class CascaderPlugin {
+    constructor(options = {}) {
+        this.name = 'cascader';
+        this.options = options;
+        this.state = {
+            visible: false,
+            position: { left: 0, top: 0 },
+            items: [],
+            type: null
+        };
+        this.disposables = new Set();
+        this.baseEditor = null;
+        this.currentEditor = null;
+        this.monaco = null;
+
+        // 从 options 中获取必要的数据
+        const { fieldList = [], methodList = [], fieldRegExp, methodRegExp, regExpState } = options;
+        this.fieldList = fieldList;
+        this.methodList = methodList;
+        this.fieldRegExp = fieldRegExp;
+        this.methodRegExp = methodRegExp;
+        this.regExpState = regExpState;
+
+        this.parentContainer = options.parentContainer;
+        document.addEventListener('click', this.hideCascaderByDocumentClick.bind(this));
+    }
+
+    apply(baseEditor) {
+        this.baseEditor = baseEditor;
+        this.monaco = baseEditor.monaco;
+
+        // 处理 DiffEditor 的情况
+        if (this.options.isDiff) {
+            // 监听原始编辑器的光标变化
+            const originalEditor = baseEditor.editor.getOriginalEditor();
+            this.disposables.add(
+                originalEditor.onDidChangeCursorPosition((e) => {
+                    this.currentEditor = originalEditor;
+                    if (e?.source !== 'api') {
+                        this.handleCursorChange(e);
+                    }
+                })
+            );
+
+            // 监听修改后编辑器的光标变化
+            const modifiedEditor = baseEditor.editor.getModifiedEditor();
+            this.disposables.add(
+                modifiedEditor.onDidChangeCursorPosition((e) => {
+                    this.currentEditor = modifiedEditor;
+                    if (e?.source !== 'api') {
+                        this.handleCursorChange(e);
+                    }
+                })
+            );
+
+            // 初始设置为 modified editor
+            this.currentEditor = modifiedEditor;
+        } else {
+            // 普通编辑器的情况
+            this.currentEditor = baseEditor.editor;
+            this.disposables.add(
+                baseEditor.editor.onDidChangeCursorPosition((e) => {
+                    if (e?.source !== 'api') {
+                        this.handleCursorChange(e);
+                    }
+                })
+            );
+        }
+    }
+
+    hideCascaderByDocumentClick = (e) => {
+        const targetDropdown =
+            e.target.closest('.tntd-monaco-editor-cascader') ||
+            (this.parentContainer && this.parentContainer.parentNode.contains(e.target));
+        if (!targetDropdown) {
+            if (this.state.visible) {
+                this.options.editor.setPosition({
+                    lineNumber: 1,
+                    column: 1
+                });
+            }
+            this.hideCascader();
+        }
+    };
+
+    //输入字段&函数排序先匹配最长的
+    sortBy = (a, b) => {
+        if (a.length > b.length) {
+            return -1;
+        }
+        if (a.length < b.length) {
+            return 1;
+        }
+        return 0;
+    };
+
+    // 匹配[]
+    transformContent = (content) => {
+        if (content) {
+            const regex = /^([^[]+\【[^】]+\】)/;
+            const match = content.match(regex);
+            content = match ? match[1] : content;
+        }
+        return content;
+    };
+
+    // 如果当前匹配对象后面跟随一个. 则需要匹配后面的
+    getEndIndex = ({ originStr, str, regExpRef, endIndex }) => {
+        const match = str.match(regExpRef);
+        if (match && match.index === 0) {
+            const firstMatchLen = match[0].length;
+            endIndex = endIndex + firstMatchLen;
+            if (originStr.substring(endIndex, endIndex + 1) === '.') {
+                endIndex = endIndex + 1;
+                endIndex = this.getEndIndex({
+                    originStr,
+                    str: originStr.substring(endIndex),
+                    regExpRef,
+                    endIndex
+                });
+            }
+        }
+
+        return endIndex;
+    };
+
+    // 点击自定义级联数据
+    handleClick = (item, type) => {
+        const { isEndMark } = this.options || {};
+        const position = this.currentEditor.getPosition();
+        const model = this.currentEditor.getModel();
+        if (!position || !model) return;
+
+        const lineContent = model.getLineContent(position.lineNumber);
+        const adjustedColumn = Math.max(1, Math.min(position.column, lineContent.length + 1)) - 1;
+
+        const cursorBeforeOneChar = lineContent.substring(0, adjustedColumn); // 起始到当前焦点数据
+        const lastIndex = cursorBeforeOneChar.lastIndexOf(type, adjustedColumn); // 最后一个标记位置
+        const cursorAfterOneChar = lineContent.substring(lastIndex, lineContent.length); // 最后一个标记到结尾数据
+        let endIndex = adjustedColumn;
+        if (type === '@' || type === '#' || type === '.') {
+            const regExpRef = type === '@' || type === '.' ? this.fieldRegExp : this.methodRegExp;
+            const match = cursorAfterOneChar.match(regExpRef);
+            if (match && match.index === 0) {
+                endIndex = this.getEndIndex({ originStr: cursorAfterOneChar, str: cursorAfterOneChar, regExpRef, endIndex: 0 });
+                endIndex = lastIndex + endIndex;
+            }
+            if (type === '@' || type === '.') {
+                let lastCursorAfterOneChar = cursorAfterOneChar.slice(1);
+                if (lastCursorAfterOneChar?.startsWith('.')) {
+                    lastCursorAfterOneChar = lastCursorAfterOneChar?.slice(1);
+                }
+                let restDot = lastCursorAfterOneChar.match(/^((@?)[^-+*=,;&|/\s\)]+(?:\.[@][^-+*=,;&|/\s\)]+)*)/);
+                if (restDot?.index === 0) {
+                    restDot = restDot?.[0];
+                    if (restDot?.length) {
+                        endIndex = restDot?.length + lastIndex + 1;
+                    }
+                }
+            }
+
+            // 使用保存的 monaco 引用创建 Selection
+            const curSelection = new this.monaco.Selection(position.lineNumber, lastIndex + 2, position.lineNumber, endIndex + 1);
+            this.currentEditor.setSelection(curSelection);
+        }
+
+        let content = '';
+        if (type === '@') {
+            const valueKey = this.options?.fieldNames?.value || 'value';
+            const curField = this.fieldList.find((_item) => _item?.[valueKey] === item?.[valueKey]);
+            if (item?.value?.startsWith('customfunction_')) {
+                // 判断是否是自定义函数字段
+                if (curField && curField.data.length > 0) {
+                    let str = '';
+                    for (const fieldItem of curField.data) {
+                        str = str + `,'${fieldItem.dName}'`;
+                    }
+                    content = `${item.name}${str}`;
+                } else {
+                    content = item.name + (isEndMark ? '@' : '');
+                }
+            } else {
+                content = item.name + (isEndMark ? '@' : '');
+            }
+            // if (!notSupportArrayData && curField && (curField.type === 'ARRAY' || curField.array)) {
+            //     content = content + '[]';
+            // }
+        } else if (type === '#' && lineContent.length > endIndex) {
+            content = item.name;
+        } else if (type === '.') {
+            // TODO 增加.的判断
+            // const curField = this.fieldList.find((_item) => _item.value === item.value);
+            content = '@' + item.name;
+            // if (!notSupportArrayData && curField && (curField.type === 'ARRAY' || curField.array)) {
+            //     content += '[]';
+            // }
+        } else {
+            content = item.value;
+        }
+
+        const selections = this.currentEditor.getSelections();
+        if (selections) {
+            const edits = selections.map((selection) => ({
+                range: selection,
+                text: content,
+                forceMoveMarkers: true
+            }));
+
+            this.currentEditor.executeEdits('edit-selection', edits);
+        }
+
+        this.currentEditor.focus();
+        this.hideCascader();
+    };
+
+    // 搜索方法
+    search = (val, type, methodParamsInfo, filterList, prevParentItem) => {
+        let searchList = type === '@' ? this.fieldList : this.methodList;
+
+        if (Array.isArray(filterList) && filterList?.length) {
+            searchList = filterList;
+        }
+        // 如果有自定义搜索回调，使用它
+        if (this.options.searchCb) {
+            searchList = this.options.searchCb({
+                field: val,
+                type,
+                methodParamsInfo,
+                fieldList: this.fieldList,
+                methodList: this.methodList,
+                searchList,
+                prevParentItem
+            });
+        }
+
+        // 更新状态中的 items
+        this.updateCascaderState({
+            ...this.state,
+            items: searchList
+        });
+    };
+
+    setupCascader() {
+        // 创建容器
+        if (!this.container) {
+            this.container = document.createElement('div');
+            document.body.appendChild(this.container);
+        }
+    }
+
+    handleCursorChange() {
+        // 如果是只读的原始编辑器，不显示级联
+        if (this.options.isDiff && this.isOriginalEditor() && !this.options.originalEditable) {
+            this.hideCascader();
+            return;
+        }
+
+        this.hideCascader();
+        const position = this.currentEditor.getPosition();
+        const model = this.currentEditor.getModel();
+        const lineContent = model.getLineContent(position.lineNumber);
+
+        // 获取光标前的所有字符（注意：column是从1开始计数）
+        const adjustedColumn = Math.max(1, Math.min(position.column, lineContent.length + 1)) - 1;
+
+        const cursorBeforeOneChar = lineContent.substring(0, adjustedColumn);
+        const fieldIndex = cursorBeforeOneChar.lastIndexOf('@', adjustedColumn);
+        const methodIndex = cursorBeforeOneChar.lastIndexOf('#', adjustedColumn);
+
+        let methodParamsInfo = '';
+        if (methodIndex > -1) {
+            methodParamsInfo = lineContent.substring(methodIndex, adjustedColumn);
+        }
+
+        const pos = this.currentEditor.getScrolledVisiblePosition(position);
+
+        // 计算相对于视口的坐标
+        const rect = this.currentEditor.getDomNode().getBoundingClientRect();
+        const viewportX = rect.left + pos.left;
+        const viewportY = rect.top + pos.top;
+        let popupPlacement = 'bottomLeft';
+        if (rect?.height - pos.top < 244) {
+            popupPlacement = 'topLeft';
+        }
+
+        if (this.fieldList && this.fieldList.length > 0 && fieldIndex !== -1 && fieldIndex > methodIndex) {
+            // 监测@
+            // .@xx 场景
+            // 判断当前是否存在.
+            const prevIsDotObj = cursorBeforeOneChar.substring(0, fieldIndex);
+            // 已知@a.@ 这里默认获取前面 a 父元素
+            let { prevParentItem, preNearItem } = getParentItem({ prevIsDotObj, fieldIndex, cursorBeforeOneChar }) || {};
+            let content = cursorBeforeOneChar.substring(fieldIndex + 1, adjustedColumn);
+            let originContent = content;
+            // 特殊场景 直接.
+            let lastDot;
+            if (adjustedColumn > 1) {
+                lastDot = cursorBeforeOneChar.substring(adjustedColumn - 1, adjustedColumn) === '.';
+            }
+            if (lastDot) {
+                if (cursorBeforeOneChar.endsWith('].')) {
+                    let leftQuoteIndex = findNearestLeftParenthesisIndex(cursorBeforeOneChar, adjustedColumn - 2);
+                    if (fieldIndex < leftQuoteIndex) {
+                        content = cursorBeforeOneChar.substring(fieldIndex + 1, leftQuoteIndex);
+                    } else {
+                        content = cursorBeforeOneChar.substring(1, leftQuoteIndex);
+                        content = content.substring(content.lastIndexOf('@') + 1);
+                    }
+                }
+                ({ prevParentItem, preNearItem } =
+                    getParentItem({ prevIsDotObj: originContent, fieldIndex: adjustedColumn, cursorBeforeOneChar }) || {});
+            }
+
+            if (prevParentItem) {
+                prevParentItem = this.transformContent(prevParentItem);
+            }
+            let filterList = this.fieldList;
+            if (prevParentItem) {
+                filterList = getChildList({ prevParentItem, preNearItem, fieldList: filterList, lastDot })?.children;
+            }
+            if (content && !lastDot && filterList?.length) {
+                filterList = filterList.filter((item) => item.name.includes(content));
+            }
+            // 前提条件是复杂对象被拍平
+            if (filterList?.length) {
+                this.updateCascaderState({
+                    visible: true,
+                    position: {
+                        popupPlacement,
+                        left: viewportX,
+                        top: viewportY + 8
+                    },
+                    type: lastDot ? '.' : '@'
+                });
+                this.search(lastDot ? '' : content, '@', methodParamsInfo, filterList, prevParentItem);
+            } else {
+                this.hideCascader();
+            }
+        }
+        if (this.methodList?.length && methodIndex !== -1 && methodIndex > fieldIndex) {
+            // 监测#
+            const content = cursorBeforeOneChar.substring(methodIndex + 1, adjustedColumn);
+            const findObj = this.methodList.find((item) => item.name.includes(content));
+            if (findObj) {
+                this.options?.triggerSuggest?.(content ? content : undefined);
+            }
+        }
+        if (!cursorBeforeOneChar.includes('@') && !cursorBeforeOneChar.includes('#')) {
+            this.hideCascader();
+        }
+    }
+
+    getItemsForWord(word) {
+        const { fieldList, methodList } = this.options;
+        const wordStr = word.word;
+
+        if (wordStr.startsWith('@')) {
+            return fieldList || [];
+        }
+        if (wordStr.startsWith('#')) {
+            return methodList || [];
+        }
+        return [];
+    }
+
+    getTypeForWord(word) {
+        return word.word.startsWith('@') ? 'field' : 'method';
+    }
+
+    updateCascaderState(newState) {
+        this.state = { ...this.state, ...newState };
+        this.renderCascader();
+    }
+
+    hideCascader() {
+        this.options?.clearSuggest?.();
+        this.updateCascaderState({
+            visible: false,
+            type: null,
+            items: []
+        });
+    }
+
+    handleSelect = (item, type) => {
+        const position = this.currentEditor.getPosition();
+        const model = this.currentEditor.getModel();
+        const word = model.getWordAtPosition(position);
+
+        if (!word) return;
+
+        // 替换文本
+        const range = {
+            startLineNumber: position.lineNumber,
+            endLineNumber: position.lineNumber,
+            startColumn: word.startColumn,
+            endColumn: word.endColumn
+        };
+
+        const prefix = type === 'field' ? '@' : '#';
+        this.currentEditor.executeEdits('cascader', [
+            {
+                range,
+                text: `${prefix}${item.name}`
+            }
+        ]);
+
+        this.hideCascader();
+    };
+
+    renderCascader() {
+        const { fieldNames } = this.options;
+        const { visible, position, items, type } = this.state;
+
+        if (!this.container) {
+            this.setupCascader();
+        }
+
+        if (!visible && this.container) {
+            ReactDOM.unmountComponentAtNode(this.container);
+            return;
+        }
+
+        // 调整位置，考虑 diff 编辑器的布局
+        let adjustedPosition = { ...position };
+        if (this.options.isDiff) {
+            const editorType = this.getCurrentEditorType();
+            if (editorType === 'original') {
+                // 原始编辑器在左侧，不需要调整
+            } else if (editorType === 'modified') {
+                // 修改后的编辑器在右侧，需要考虑 renderSideBySide 选项
+                if (this.options.renderSideBySide) {
+                    // 如果是并排显示，需要考虑原始编辑器的宽度
+                    const originalEditor = this.baseEditor.editor.getOriginalEditor();
+                    const originalWidth = originalEditor.getLayoutInfo().contentWidth;
+                    adjustedPosition.left += originalWidth;
+                }
+            }
+        }
+
+        ReactDOM.render(
+            <Cascader
+                {...this.options}
+                dropdownClassName={`${this.options?.dropdownClassName || ''} tntd-monaco-editor-cascader`}
+                selectChange={(item) => this.handleClick(item, this.state.type)}
+                visible={visible}
+                dropList={items}
+                fieldNames={fieldNames}
+                placement={adjustedPosition.popupPlacement}
+                style={{
+                    position: 'fixed',
+                    left: adjustedPosition.left,
+                    top: adjustedPosition.top - (adjustedPosition.popupPlacement === 'topLeft' ? 24 : 0),
+                    zIndex: 1000
+                }}
+                onSelect={(item) => this.handleSelect(item, type)}
+            />,
+            this.container
+        );
+    }
+
+    dispose() {
+        if (this.triggerSuugestTime) {
+            clearTimeout(this.triggerSuugestTime);
+            this.triggerSuugestTime = null;
+        }
+
+        document.removeEventListener('click', this.hideCascaderByDocumentClick);
+        // 清理事件监听
+        this.disposables.forEach((disposable) => disposable.dispose());
+        this.disposables.clear();
+
+        // 移除 DOM
+        if (this.container) {
+            ReactDOM.unmountComponentAtNode(this.container);
+            this.container.remove();
+            this.container = null;
+        }
+
+        this.dom = null;
+    }
+
+    // 添加辅助方法来判断当前编辑器类型
+    isOriginalEditor() {
+        if (!this.options.isDiff) return false;
+        return this.currentEditor === this.baseEditor.editor.getOriginalEditor();
+    }
+
+    isModifiedEditor() {
+        if (!this.options.isDiff) return false;
+        return this.currentEditor === this.baseEditor.editor.getModifiedEditor();
+    }
+
+    // 添加获取当前编辑器类型的方法
+    getCurrentEditorType() {
+        if (!this.options.isDiff) return 'single';
+        return this.isOriginalEditor() ? 'original' : 'modified';
+    }
+}