@tntd/monaco-editor 1.0.1 → 1.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tntd/monaco-editor",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "scripts": {
     "start": "webpack-dev-server  --config webpack.config.js",
     "build": "rm -rf ./dist && webpack --config webpack.config.build.js",
@@ -65,6 +65,7 @@
   },
   "main": "dist/index.js",
   "files": [
+    "src",
     "/dist",
     "LICENSE",
     "README.md",

package/src/BaseMonacoEditor.js

@@ -0,0 +1,206 @@
+import { useEffect, useRef, useMemo, useImperativeHandle, forwardRef, useState } from 'react';
+import { noop, processSize } from './utils';
+import { BaseEditor } from './core/BaseEditor';
+import { SuggestionPlugin } from './plugins/suggestion';
+
+// 默认支持的语言
+const defaultLanguages = ['javascript', 'css', 'html', 'json', 'typescript', 'scss', 'less'];
+
+const BaseMonacoEditor = forwardRef((props, ref) => {
+    const {
+        isDiff,
+        original,
+        modified,
+        theme = 'tntd-vs-dark',
+        themeColor,
+        language,
+        defaultValue,
+
+        width = '100%',
+        height = '100%',
+        className,
+        options,
+        readOnly,
+
+        onChange = noop,
+        editorDidMount = noop,
+        editorWillMount = noop,
+        editorWillUnmount = noop,
+        methodList,
+        quickList,
+        keywords,
+
+        cb
+    } = props;
+
+    const { triggerCharacters, registerSuggestions } = options || {};
+
+    // Refs
+    const containerRef = useRef();
+    const editorRef = useRef();
+    const [isReady, setIsReady] = useState(false);
+    const isSilentUpdateRef = useRef(false);
+
+    // 处理宽高
+    const style = useMemo(
+        () => ({
+            width: processSize(width),
+            height: processSize(height)
+        }),
+        [width, height]
+    );
+
+    // 通过 ref 暴露编辑器实例和方法
+    useImperativeHandle(
+        ref,
+        () => {
+            // 只有在编辑器实例存在时才暴露方法
+            if (!editorRef.current || !isReady) {
+                return {};
+            }
+            cb?.();
+            return {
+                // 基础方法
+                getMonaco: () => editorRef.current?.monaco,
+                getEditor: () => editorRef.current?.editor,
+                getValue: () => editorRef.current?.getValue(),
+                setValue: (value) => editorRef.current?.setValue(value),
+                updateOptions: (options) => editorRef.current?.updateOptions(options),
+                getPosition: () => editorRef.current?.getPosition(),
+                setPosition: (position) => editorRef.current?.setPosition(position),
+
+                // Diff 相关方法
+                getOriginalEditor: () => (isDiff ? editorRef.current?.editor?.getOriginalEditor() : null),
+                getModifiedEditor: () => (isDiff ? editorRef.current?.editor?.getModifiedEditor() : null),
+
+                // 直接暴露实例
+                instance: editorRef.current,
+                editor: isDiff ? editorRef.current?.editor : editorRef.current?.editor,
+                monaco: editorRef.current?.monaco
+            };
+        },
+        [editorRef.current, isReady] // 依赖项增加 isReady
+    );
+
+    // 初始化编辑器
+    useEffect(() => {
+        const initEditor = async () => {
+            try {
+                const baseEditor = new BaseEditor(containerRef.current, {
+                    ...(options || {}),
+                    readOnly,
+                    editorWillMount,
+                    editorWillUnmount,
+                    className,
+                    language,
+                    theme,
+                    themeColor,
+                    value: defaultValue,
+                    original,
+                    modified,
+                    isDiff,
+                    keywords
+                });
+
+                const { monaco, editor } = await baseEditor.init();
+                editorRef.current = baseEditor;
+
+                // 默认的编辑器 都具备 自动提示插件
+                baseEditor.use(
+                    new SuggestionPlugin({
+                        defaultLanguages,
+                        language,
+                        triggerCharacters,
+                        registerSuggestions,
+                        methodList,
+                        quickList
+                    })
+                );
+
+                // 设置事件监听
+                baseEditor?.on?.('change', (value) => {
+                    if (isSilentUpdateRef.current) {
+                        return;
+                    }
+                    onChange?.(value, { value, editor, monaco });
+                });
+
+                // 标记编辑器已准备就绪
+                setIsReady(true);
+
+                // 回调 - 确保在所有初始化完成后才调用
+                if (editorDidMount) {
+                    await editorDidMount({ baseEditor, monaco, editor });
+                }
+            } catch (error) {
+                console.error('Editor initialization failed:', error);
+            }
+        };
+
+        initEditor();
+        return () => {
+            editorRef.current?.dispose?.();
+            setIsReady(false);
+        };
+    }, []);
+
+    // 监听语言变化
+    useEffect(() => {
+        if (!editorRef.current?.editor) return;
+        editorRef.current?.monaco.editor.setModelLanguage(editorRef.current.editor.getModel(), language);
+    }, [language]);
+
+    // 监听语言 字段 函数等变化
+    useEffect(() => {
+        if (!editorRef.current?.editor) return;
+        // 重新注册自动提示插件
+        editorRef.current.use(
+            new SuggestionPlugin({
+                defaultLanguages,
+                language,
+                triggerCharacters,
+                registerSuggestions,
+                methodList,
+                quickList
+            })
+        );
+    }, [language, triggerCharacters, methodList, quickList]);
+
+    // 监听主题变化
+    useEffect(() => {
+        if (!editorRef.current?.editor) return;
+        editorRef.current.editor.updateOptions({ theme, readOnly });
+    }, [theme, readOnly]);
+
+    // 监听初始值, 静默更新
+    useEffect(() => {
+        if (!editorRef.current?.editor) return;
+        if (!isDiff) {
+            if (defaultValue) {
+                isSilentUpdateRef.current = true;
+                editorRef.current.setValue(defaultValue);
+            }
+        } else {
+            if (original) {
+                isSilentUpdateRef.current = true;
+                editorRef.current.getModel().original.setValue(original);
+            }
+            if (modified) {
+                isSilentUpdateRef.current = true;
+                editorRef.current.getModel().modified.setValue(modified);
+            }
+        }
+        isSilentUpdateRef.current = false;
+    }, [defaultValue, modified, isDiff, original, editorRef.current?.editor]);
+
+    useEffect(() => {
+        if (editorRef.current) {
+            editorRef.current?.updateOptions(options);
+        }
+    }, [props.options, editorRef.current]);
+
+    
+    return <div ref={containerRef} className={`tnt-react-monaco-editor-container ${className || ''}`} style={style} />;
+});
+
+export default BaseMonacoEditor;

package/src/DiffEditor.js

@@ -0,0 +1,72 @@
+import BaseMonacoEditor from './BaseMonacoEditor';
+import FormulaEditor from './FormulaEditor';
+import { forwardRef, useRef, useImperativeHandle, useMemo } from 'react';
+
+// 默认差异编辑器配置
+const defaultDiffOptions = {
+    lineDecorationsWidth: 10,
+    // 是否渲染侧边修改指示器
+    renderSideBySide: true,
+    // 是否突出显示差异
+    highlightDifferences: true,
+    // 是否显示差异导航器
+    diffNavigator: true,
+    // 是否忽略空格差异
+    ignoreTrimWhitespace: false,
+    // 自动布局
+    automaticLayout: true,
+    smoothScrolling: true,
+    wordWrap: 'off', // 或 "on"
+    // enableSplitViewResizing: false,
+    minimap: { enabled: false },
+    renderOverviewRuler: false,
+    useInlineViewWhenSpaceIsLimited: false,
+    enableSplitViewResizing: false,
+};
+
+const DiffEditor = forwardRef((props, ref) => {
+    const editorRef = useRef();
+
+    // 暴露编辑器实例和方法
+    useImperativeHandle(
+        ref,
+        () => {
+            if (!editorRef.current) {
+                return {};
+            }
+
+            return {
+                // 继承基础编辑器或公式编辑器的方法
+                ...editorRef.current,
+
+                // Diff 特有方法
+                getDiffNavigator: () => editorRef.current?.editor?.getDiffNavigator(),
+                updateDiffOptions: (options) => editorRef.current?.editor?.updateOptions(options),
+
+                // 直接暴露实例
+                instance: editorRef.current,
+                editor: editorRef.current?.editor,
+                monaco: editorRef.current?.monaco
+            };
+        },
+        [editorRef.current]
+    );
+
+    const EditorComponent = useMemo(() => {
+        return props.isFormula ? FormulaEditor : BaseMonacoEditor;
+    }, [props.isFormula]);
+
+    return (
+        <EditorComponent
+            ref={editorRef}
+            isDiff={true}
+            {...props}
+            options={{
+                ...defaultDiffOptions,
+                ...props.options
+            }}
+        />
+    );
+});
+
+export default DiffEditor;

package/src/FormulaEditor.js

@@ -0,0 +1,229 @@
+import { useEffect, useRef, useCallback, forwardRef, useImperativeHandle, useState, useMemo } from 'react';
+import BaseMonacoEditor from './BaseMonacoEditor';
+import { ConverterPlugin } from './plugins/converter';
+import { CascaderPlugin } from './plugins/cascader';
+import { v1 as uuidv1 } from 'uuid';
+
+import './index.less';
+
+// 默认级联配置
+const defaultCascaderOptions = {
+    cascaderStyle: { width: '200px' },
+    fieldNames: { label: 'name', value: 'value', children: 'children' },
+    notSupportArrayData: false,
+    isEndMark: false,
+    typeMap: {},
+    isCascader: true,
+    changeOnSelect: true,
+    showSourceName: true
+};
+
+const FormulaEditor = forwardRef((props, ref) => {
+    const {
+        isDiff,
+        modified: preModified,
+        original: preOriginal,
+        defaultValue: preDefaultValue,
+
+        fieldList,
+        methodList,
+        normalList,
+        keyWords = ['int', 'double', 'string', 'list', 'boolean', 'if', 'else', 'and', 'or', 'return'],
+        cascaderOptions: cascaderOptionsOrigin,
+        regExpState = '@[^\\+\\*\\/#%\\(\\),;\\!\\<\\>\\-=@]*',
+        regExp = '',
+        searchCb,
+        cnCodeToEnExtraLogic,
+        enCodeToCnExtraLogic,
+        onChange,
+        readOnly,
+
+        editorEvent,
+        themeColor
+    } = props;
+
+    const { options, ...restProps } = props;
+
+    const cascaderOptions = useMemo(() => {
+        return {
+            ...defaultCascaderOptions,
+            ...(cascaderOptionsOrigin || {})
+        };
+    }, [cascaderOptionsOrigin]);
+
+    const editorRef = useRef();
+    const [editorReady, setEditorReady] = useState(false);
+    const converterPluginRef = useRef();
+    const [isReady, setIsReady] = useState(false);
+    const [defaultValueObj, setDefaultValueObj] = useState({ defaultValue: undefined, modified: undefined, original: undefined });
+    const { defaultValue, modified, original } = defaultValueObj;
+
+    useEffect(() => {
+        if (isReady) {
+            editorEvent?.(editorRef.current?.instance);
+        }
+    }, [isReady]);
+
+    useImperativeHandle(
+        ref,
+        () => {
+            if (!editorRef.current || !isReady) {
+                return {};
+            }
+
+            return {
+                // 继承 BaseMonacoEditor 的方法
+                ...editorRef.current,
+
+                // Formula 特有方法
+                CnCodeToEn: (value) => converterPluginRef.current?.CnCodeToEn(value),
+                EnCodeToCn: (value) => converterPluginRef.current?.EnCodeToCn(value),
+
+                // 获取插件实例
+                getConverterPlugin: () => converterPluginRef.current,
+                getCascaderPlugin: () => editorRef.current?.editor?.getContribution('cascader')
+            };
+        },
+        [isReady, editorRef.current]
+    );
+
+    // 初始化插件的方法
+    const initPlugins = useCallback(
+        (baseEditor) => {
+            if (baseEditor.plugins.get('suggestion')) {
+                baseEditor.plugins.get('suggestion').updateOptions({
+                    fieldList: fieldList || [],
+                    methodList: methodList || [],
+                    normalList: normalList || [],
+                    keyWords
+                });
+            }
+
+            const converterPlugin = new ConverterPlugin({
+                regExpState,
+                fieldList: fieldList || [],
+                methodList: methodList || [],
+                normalList: normalList || [],
+                keyWords,
+                regExp,
+                cnCodeToEnExtraLogic,
+                enCodeToCnExtraLogic,
+                fieldNames: cascaderOptions.fieldNames
+            });
+
+            converterPluginRef.current = converterPlugin;
+
+            // 初始化正则和模式字段
+            converterPlugin.initRegExps();
+            const modeField = converterPlugin.getModeField();
+
+            // 注册插件
+            baseEditor.use(converterPlugin);
+
+            // 注册级联
+            const { field, method, regExpState: regExp } = converterPlugin.getRegExps();
+            if (!readOnly) {
+                baseEditor.use(
+                    new CascaderPlugin({
+                        parentContainer: editorRef.current?.instance?.container,
+                        editor: editorRef.current?.editor,
+                        fieldList: fieldList || [],
+                        methodList: methodList || [],
+                        normalList: normalList || [],
+                        fieldRegExp: field,
+                        methodRegExp: method,
+                        regExpState: regExp,
+                        searchCb,
+                        isDiff,
+                        ...cascaderOptions,
+                        triggerSuggest: (methodInfo) => {
+                            baseEditor?.plugins?.get('suggestion')?.triggerSuggest?.(methodInfo);
+                        },
+                        clearSuggest: () => {
+                            baseEditor?.plugins?.get('suggestion')?.clearSuggest?.();
+                        }
+                    })
+                );
+            }
+
+            // 更新语言配置
+            baseEditor.updateLanguage(modeField);
+
+            // 标记编辑器已准备就绪
+            setIsReady(true);
+        },
+        [fieldList, methodList, editorRef.current?.instance]
+    );
+
+    // 格式化数据值
+    const formatDefaultValue = useCallback(() => {
+        if (converterPluginRef.current?.modeField) {
+            setDefaultValueObj({
+                defaultValue: preDefaultValue ? converterPluginRef.current.EnCodeToCn(preDefaultValue) : preDefaultValue,
+                modified: preModified ? converterPluginRef.current.EnCodeToCn(preModified) : preModified,
+                original: preOriginal ? converterPluginRef.current.EnCodeToCn(preOriginal) : preOriginal
+            });
+        }
+    }, [preDefaultValue, preModified, preOriginal, converterPluginRef.current]);
+
+    // 监听数据进行convert的upate
+    useEffect(() => {
+        if (!editorRef.current?.instance) return;
+
+        initPlugins(editorRef.current?.instance);
+
+        if (!converterPluginRef.current) return;
+
+        converterPluginRef.current.updateData({
+            fieldList: fieldList || [],
+            methodList: methodList || [],
+            normalList: normalList || [],
+            regExp,
+            cnCodeToEnExtraLogic,
+            enCodeToCnExtraLogic
+        });
+
+        const modeField = converterPluginRef.current.getModeField();
+
+        // 转换默认值
+        formatDefaultValue();
+
+        // 更新语言配置
+        editorRef.current?.instance.updateLanguage(modeField);
+    }, [editorReady, fieldList, methodList, normalList, regExp, preDefaultValue, preModified, preOriginal]);
+
+    // 监听数据变化
+    const handleChange = (value, obj) => {
+        const enCode = editorRef.current?.instance.CnCodeToEn(value);
+        onChange?.(enCode, { ...obj, enCode, cnCode: value });
+    };
+
+    const editorReadyCb = () => {
+        setEditorReady(true);
+    };
+
+    const uuid = useMemo(() => {
+        return uuidv1()?.replace(/-/g, '');
+    }, []);
+
+    return (
+        <BaseMonacoEditor
+            ref={editorRef}
+            {...restProps}
+            defaultValue={defaultValue}
+            modified={modified}
+            original={original}
+            language={'formulaLang_' + uuid}
+            theme="formulaTheme"
+            themeColor={themeColor}
+            options={{
+                ...options,
+                isFormula: true
+            }}
+            onChange={handleChange}
+            cb={editorReadyCb}
+        />
+    );
+});
+
+export default FormulaEditor;

package/src/I18N.js

@@ -0,0 +1,7 @@
+import Cookies from 'universal-cookie';
+const cookies = new Cookies();
+
+export const getLang = () => {
+    return cookies.get('lang') || 'cn';
+};
+