dt-react-monaco-editor

🏠 简述

基于开源 monaco-editor，根据业务使用场景进行二次封装，极大的降低了使用成本，使编辑器部分代码可控性更高。

功能

• 除了 monaco-editor 自带的 language 外，还支持多种自定义的 language，如下表

language	描述	关键字自动补全	语法错误提示	语法高亮
dtsql	通用的 sql language	yes ✅	yes ✅	yes ✅
dtflink	flink sql language	yes ✅	yes ✅	yes ✅
dtPython2	python2 language	yes ✅	yes ✅	yes ✅
dtPython3	python3 language	yes ✅	yes ✅	yes ✅
dtGreenplum	greenplum sql language	yes ✅	no ❌	yes ✅

• 支持通过 props 传递的方式自定义自动补全项和需要高亮的关键字

👀 在线预览

https://DTStack.github.io/dt-react-monaco-editor/

⚡ 安装

使用 npm

npm i dt-react-monaco-editor --save

使用 yarn

yarn dt-react-monaco-editor --save

使用 pnpm

pnpm install dt-react-monaco-editor --save

📖 如何使用

安装 monaco-editor-webpack-plugin

pnpm install monaco-editor-webpack-plugin

如果使用 monaco-editor-webpack-plugin 打包，那么还需要安装

pnpm install monaco-editor

webpack 配置部分

const monacoEditorWebpackPlugin = require('monaco-editor-webpack-plugin')
module.exports = {
    module: {
        rules: [
            // 打包 dt-react-monaco-editor 自定义语言的 worker 文件
            {
                test: /\.worker.[jt]s$/,
                include: (input: string) => {
                    return input.includes('dt-react-monaco-editor/lib/languages')
                }
                loader: 'worker-loader',
            },
        ]
    },
    plugins: [
        // 打包 monaco-editor 自带的 worker 文件并且自动注入 monaco 所需的环境变量
        new monacoEditorWebpackPlugin({
            features: [...],
            languages: [...],
        }),
    ]
}

monaco-editor-webpack-plugin 详细配置请看官方文档 monaco-editor-webpack-plugin

使用示例

    import { Editor } from 'dt-react-monaco-editor'
    <Editor
        value='select * from table_name'
        language="dtsql"
        options={{ readOnly: false }}
    />

依赖版本对照表

dt-react-monaco-editor	monaco-editor	monaco-editor-webpack-plugin	webpack
<=0.1.4	0.13.1	1.4.0	<=4.x
>=0.3.0	0.30.1	6.0.0	5.x

🔧 本地开发

clone & install dependencies

git clone 
pnpm install

启动本地服务器

pnpm storybook

静态服务部署构建

pnpm build-storybook

📘 相关资料

• Monaco Editor
• Storybook