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

前端的代码编辑器选型主要有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_entropy6 小时前
AI时代,我们还需要低代码吗?—— 一场关于模型、演化与软件未来的深度问答
后端·低代码·aigc
得帆云低代码2 天前
不确定时代,低代码是CIO的安全感来源
低代码
驰骋工作流2 天前
驰骋低代码BPM开发平台的组成部分
低代码
大翻哥哥2 天前
Python 2025:低代码开发与自动化运维的新纪元
运维·python·低代码
FlowGram2 天前
低代码设计态变量挑战与设计 — 前端变量引擎介绍
前端·低代码
Light603 天前
领码SPARK融合平台 · TS × Java 双向契约 —— 性能与治理篇|缓存分段与版本秩序
低代码·缓存·spark
xiaozhazha_3 天前
低代码与AI技术在企业ERP系统构建中的实践应用——以快鹭云平台为例
人工智能·低代码
明天再做行么3 天前
AI 时代,我们是否应该重温极限编程?
人工智能·低代码·极限编程
Codebee3 天前
ood 框架深度解析:OneCode-RAD 跨平台移动开发套件的技术演进之路
人工智能·低代码
低代码布道师4 天前
少儿舞蹈小程序(12)作品列表查询搭建
低代码·小程序