# MonacoEditor 代码编辑器

腾讯云控制台环境下可用的 Monaco Editor 组件。

## 注意

该组件适用于腾讯云控制台环境，其他环境下推荐直接使用 [monaco-editor](https://github.com/microsoft/monaco-editor) 或 [react-monaco-editor](https://github.com/react-monaco-editor/react-monaco-editor)。

## 开发 💡

- 当前 Monaco Editor 在 IE11 下已无法使用，建议使用 [React.lazy](https://reactjs.org/docs/code-splitting.html#reactlazy) 配合 ErrorBoundary 异步载入组件（见示例代码）以处理 IE 下异常场景。

- 升级 tea-scripts 至最新以支持新版本 Monaco Editor 构建。

## 安装

该组件依赖 [monaco-editor](https://github.com/microsoft/monaco-editor)，使用前需安装：

> 建议版本 >= 0.22 且 <= 0.30

```
npm i monaco-editor@0.30
```

同时，需要安装 [monaco-editor-webpack-plugin](https://github.com/Microsoft/monaco-editor-webpack-plugin)：

> 注意 monaco-editor-webpack-plugin 版本需要与 monaco-editor 版本匹配

```
npm i -D webpack@4 monaco-editor-webpack-plugin@6 @tencent/tea-scripts@latest
```

并在 `tea.config.js` 中修改 Webpack 配置：

```js
const MonacoWebpackPlugin = require("monaco-editor-webpack-plugin");

module.exports = {
  webpack: (config, instances) => {
    config.plugins.push(new MonacoWebpackPlugin({
      // 所需语言支持
      languages: ["javascript", "typescript"],
      // targetName 业务名
      filename: `${targetName}-[name].[contenthash:10].js`,
    }));
    return config;
  },
};
```

最后，在开发时你可能还需注意文件资源加载情况，适当调整代理配置以保证所需资源都被成功加载。

## 使用示例

### Editor

[Example: MonacoEditorExample](./_example/MonacoEditorExample.jsx)

[Code](./_example/MonacoEditorExample.jsx)

[Code](./_example/Editor.jsx)

### DiffEditor

[Example: MonacoDiffEditorExample](./_example/MonacoDiffEditorExample.jsx)

[Code](./_example/MonacoDiffEditorExample.jsx)

[Code](./_example/DiffEditor.jsx)

## 组件属性

[Interface: MonacoEditorProps](./MonacoEditor.tsx)

[Interface: MonacoDiffEditorProps](./MonacoDiffEditor.tsx)