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

前端的代码编辑器选型主要有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会抛出异常:

相关推荐
2501_915918414 小时前
Web 前端可视化开发工具对比 低代码平台、可视化搭建工具、前端可视化编辑器与在线可视化开发环境的实战分析
前端·低代码·ios·小程序·uni-app·编辑器·iphone
yinmaisoft12 小时前
当低代码遇上AI,有趣,实在有趣
android·人工智能·低代码·开发工具·rxjava
醉方休12 小时前
低代码核心原理总结
低代码
葡萄城技术团队14 小时前
低代码+MCP实战三大案例,企业如何通过MCP构建专属AI智能体?
低代码·mcp
chat2tomorrow15 小时前
数据采集平台的起源与演进:从ETL到数据复制
大数据·数据库·数据仓库·mysql·低代码·postgresql·etl
GitCode官方1 天前
直播预告 | 开源低代码框架 Erupt 全生态讲解
低代码·开源
NocoBase1 天前
6 个最佳无代码 IT 资产管理工具推荐
低代码·开源·github
alsmile2 天前
什么是组态?不会代码也能搭出工业大屏和数字可视化
低代码·数据可视化
NocoBase2 天前
6 个替代 Jira 的开源项目管理工具推荐
低代码·开源·github
有颜有货2 天前
织信低代码:用更聪明的方式,把想法变成现实!
低代码