低代码平台实践——代码编辑器

前端的代码编辑器选型主要有monaco-editorCodeMirror两种,我司低代码实践中的代码编辑场景主要是函数设置,因此选择了更为轻量的CodeMirror。

CodeMirror使用

CodeMirror用法比较简单,核心代码如下(这里CodeMirror的版本是5.65)

kotlin 复制代码
import codemirror from 'codemirror';
import 'codemirror/lib/codemirror.css';
import 'codemirror/mode/javascript/javascript.js';

class CodeEditor extends React.Component<Props> {
  private ref = React.createRef<HTMLDivElement>();

  private editor: codemirror.Editor | undefined;

  setReadOnlyCodes = () => {
    const { editor } = this;
    if (editor) {
      const firstLine = editor.firstLine();
      const firstLineHandle = editor.getLineHandle(firstLine);
      const lastLine = editor.lastLine();
      editor.markText(
        { line: firstLine, ch: 0 },
        { line: firstLine, ch: firstLineHandle.text.length },
        { className: 'readonly' },
      );
      editor.markText(
        { line: lastLine, ch: 0 },
        { line: lastLine + 1, ch: 0 },
        { className: 'readonly' },
      );
    }
  };
  componentDidMount() {
    const { value = '' } = this.props;

    if (this.ref.current) {
      const editor = codemirror(this.ref.current, {
        lineWrapping: true,
        indentWithTabs: true,
        lineNumbers: true,
        matchBrackets: true,
        autofocus: true,
        extraKeys: { Tab: 'autocomplete' },
        hintOptions: {
          completeSingle: false,
          additionalContext: this.props.additionalContext || {},
        },
        mode: 'javascript',
        value,
      });
      editor.on('change', this.changeDelay);
      editor.on('inputRead', this.handleInputRead);
      editor.on('beforeChange', this.handleBeforeChange);
      this.editor = editor;
      this.setReadOnlyCodes();
    }
  }
  render() {
    return <div className="code-editor" ref={this.ref}></div>;
  }

}

语法提示、校验和转换

语法提示

CodeEditor自带js原生的语法提示

ini 复制代码
<div>
    <CodeEditor
    additionalContext={{env:{app:'',pageCode:''}}}
     value={currentCodes}
     onChange={(data)=>{
        setCurrentCodes(data)
        }
    }
     errorInfo={codeErr}
    />
    <Button type="primary" onClick={()=>{
        console.log(transferCodes(currentCodes))    
    }}>语法校验和转换</Button>
</div>

但自定义的对象,需要通过additionalContext声明结构。

语法校验和转换

语法转换可以使用@babel/standalone,

typescript 复制代码
import { transform } from '@babel/standalone';

export default function transformCode(code: string): string | undefined | null {
  return transform(code, { presets: ['env'] }).code;
}

核心代码如下

scss 复制代码
const useCodeTransfer = () => {
  const [errorInfo, setErrorInfo] = useState('');

  const transferCode = useCallback(
    (code) => {
      try {
        if (errorInfo) {
          setErrorInfo('');
        }
        return transfer(code);
      } catch (e: any) {
        setErrorInfo(e.message);
        throw e;
      }
    },
    [errorInfo],
  );

  return [transferCode, errorInfo, setErrorInfo];
};

转换前:

kotlin 复制代码
(env) => {
  const {app} = env
  return null;
}

转换后:

javascript 复制代码
"use strict";

(function (env) {
  var app = env.app;
  return null;
});

如果语法有问题,transform会抛出异常:

相关推荐
canonical_entropy1 小时前
DDD本质论:从哲学到数学,再到工程实践的完整指南之理论篇
后端·低代码·领域驱动设计
canonical-entropy2 天前
NopGraphQL 的设计创新:从 API 协议到通用信息操作引擎
低代码·graphql·可逆计算·nop平台
canonical_entropy3 天前
NopGraphQL 的设计创新:从 API 协议到通用信息操作引擎
后端·低代码·graphql
canonical-entropy3 天前
集成NopReport动态生成Word表格
后端·低代码·函数式编程·可逆计算·nop平台
低代码布道师4 天前
少儿舞蹈小程序(21)我的页面搭建
低代码·小程序
低代码布道师6 天前
学习低代码,需要什么基础?
学习·低代码
Insight-n6 天前
低代码开发技术深度解析
低代码·ai
葡萄城技术团队6 天前
赋能制造新质生产力:制造业专用低代码平台选型指南(2025)
低代码·制造
初叶 crmeb6 天前
低代码相关预告
低代码
大翻哥哥6 天前
Python 2025:低代码开发与自动化编程新纪元
运维·低代码·自动化