@tntd/monaco-editor

基于 Monaco Editor 0.47 封装的代码编辑器组件，提供了丰富的编辑功能和自定义主题支持。

安装

npm install @tntd/monaco-editor --save

特性

• 🎨 支持自定义主题
• 🌍 支持国际化（中文/英文）
• 🔍 支持关键字高亮
• 📝 支持公式编辑模式
• 🔄 支持 Diff 对比模式
• 🔌 插件化架构

基础使用

import MonacoEditor from '@tntd/monaco-editor';

const App = () => {
  return (
    <MonacoEditor
      language="javascript"
      defaultValue={code}
      onChange={(value) => console.log(value)}
    />
  );
};

API

基础配置项

| 参数 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | | language | 编辑器语言 | string | 'javascript' | | value | 编辑器内容 | string | - | | onChange | 内容变化回调函数 | (value: string) => void | - | | path | Monaco Editor 资源文件路径 | string | '/vs' | | theme | 主题 | 'vs-dark' | 'tntd-vs-dark' | string | 'vs-dark' | | options | 编辑器配置项 | object | defaultOptions | | isDiff | 是否启用对比模式 | boolean | false | | isFormula | 是否启用公式编辑模式 | boolean | false | | keywords | 需要高亮的关键字列表 | string[] | [] |

编辑器事件

| 事件名 | 说明 | 参数 | | --- | --- | --- | | editorWillMount | 编辑器挂载前的回调 | (monaco: any) => object | | editorDidMount | 编辑器挂载后的回调 | ({ monaco, editor }) => void | | editorWillUnmount | 编辑器卸载前的回调 | (editor: any) => void |

默认编辑器配置

const defaultOptions = {
  selectOnLineNumbers: true,
  fontSize: 14,
  lineHeight: 24,
  tabSize: 2,
  minimap: { enabled: false },
  automaticLayout: true,
  scrollBeyondLastLine: false,
  // ... 更多配置项见代码
}

主题配置

组件内置了 tntd-vs-dark 主题，提供了以下默认颜色配置：

const defaultThemeColor = {
  'editor.background': '#17233D',
  'editor.foreground': '#BABDC5',
  'editorGutter.background': '#212c45',
  'editorLineNumber.foreground': '#BABDC5',
  'editorCursor.foreground': '#ff9800',
  'editor.lineHighlightBackground': '#002240',
  // ... 更多颜色配置见代码
}

实例方法

| 方法名 | 说明 | 参数 | | --- | --- | --- | | getValue | 获取编辑器内容 | () => string | | setValue | 设置编辑器内容 | (value: string) => void | | getPosition | 获取光标位置 | () => Position | | setPosition | 设置光标位置 | (position: Position) => void | | focus | 使编辑器获得焦点 | () => void | | layout | 重新布局编辑器 | () => void | | updateOptions | 更新编辑器配置 | (options: object) => void | | insertText | 在光标位置插入文本 | (content: string) => void |

插件系统

组件支持通过插件扩展功能：

editor.use({
  name: 'myPlugin',
  apply: (editor) => {
    // 插件逻辑
    return {
      dispose: () => {
        // 清理逻辑
      }
    }
  }
});

注意事项

1. 确保 Monaco Editor 资源文件路径配置正确
2. 在生产环境中，建议使用 CopyWebpackPlugin 复制 Monaco Editor 资源文件
3. 使用 Diff 模式时，需要同时提供 original 和 modified 属性
4. 自定义主题时，建议继承 vs-dark 主题进行扩展

示例

基础编辑器

import MonacoEditor from '@tntd/monaco-editor';

const App = () => {
  const handleEditorDidMount = ({ monaco, editor }) => {
    // 编辑器初始化完成后的操作
  };

  return (
    <MonacoEditor
      language="javascript"
      value={code}
      onChange={handleChange}
      editorDidMount={handleEditorDidMount}
      options={{
        fontSize: 16,
        minimap: { enabled: true }
      }}
    />
  );
};

对比模式

import {DiffEditor} from '@tntd/monaco-editor';

const App = () => {
  return (
    <DiffEditor
      isDiff={true}
      original={originalCode}
      modified={modifiedCode}
      language="javascript"
    />
  );
};

公式编辑模式

import {FormulaEditor} from '@tntd/monaco-editor';

const App = () => {
  return (
    <FormulaEditor
      fieldList={fieldList || []} // @唤起
      methodList={methodList || []} // #唤起
      readOnly={readOnly}
      cnCodeToEnExtraLogic={(item) => {
          if (item.type) {
              return `α${item.type}`;
          }
      }}
      enCodeToCnExtraLogic={()=>{}}
      cnCodeToEnUniqueLogic={({ group2, group1, list, turnStr }) => {}}
    />
  );
};