React中使用CodeMirror實現SQL編輯器基本功能

背景

最近有這樣一個需求,網頁中需要做一個SQL編輯器,要求有一些基本的SQL編輯器功能,最後選中基於比較完善的CodeMirror來開發相關功能。本片文章涵蓋的基本功能包括CodeMirror在React中的引入、輸入聯想、執行選中部分SQL等功能。因爲項目基於React來開發,所以此篇指南也使用React做爲示例。

引入

  1. 執行CodeMirror安裝命令(版本5.40.2)
npm install codemirror --save
  1. React組件中引入CodeMirror
import React from 'react';
import codemirror from 'codemirror';
require('codemirror/codemirror.css'); // CodeMirrory原生樣式
require('codemirror/mode/sql/sql');
require('codemirror/mode/shell/shell');
require('codemirror/addon/display/placeholder'); 
require('codemirror/addon/hint/show-hint.css'); // 用來做代碼提示
require('codemirror/addon/hint/show-hint.js'); // 用來做代碼提示
require('codemirror/addon/hint/sql-hint.js'); // 用來做代碼提示

將CodeMirror做爲組件開發

CodeMirror組件:

class CodeMirror extends React.Component {
  static defaultProps = {
    useFocus: true
  }

  componentDidMount() {
    this.paste = '';
    const {
      onChange, onBlur, options, value = '', onScroll,
      onCursorActivity, onInputRead,
    } = this.props;

    this.editor = codemirror(this.ref, {
      indentWithTabs: true,
      smartIndent: true,
      lineNumbers: true,
      matchBrackets: true,
      autofocus: true,
      extraKeys: { Tab: 'autocomplete' },
      hintOptions: { completeSingle: false }
      lineWrapping: true,
      value
    });
    const { editor, setCursor } = this;

    setCursor(editor, true);
    const changeDelay = debounce((e) => {
      setCursor(e);
      onChange && onChange(e.getValue());
    }, 300);
    editor.on('change', changeDelay);
    editor.on('blur', (e) => {
      setCursor(e);
      onBlur && onBlur(e.getValue());
    });
    editor.on('cursorActivity', onCursorActivity);
    editor.on('inputRead', (cm, change) => onInputRead(cm, change, editor));
    onScroll && editor.on('scroll', onScroll);
  }

  shouldComponentUpdate({ paste = '', value = '', }) {
    const { editor } = this;

    if (paste !== this.paste) {
      this.focus();
      editor.replaceSelection(` ${paste}`);
      this.paste = paste;
    } else if (value !== editor.getValue()) {
      editor.setOption('value', value);

      editor.setValue(value);
      this.fixBottom();
      this.focus();
    }
    return false;
  }

  setCursor = (editor, toEnd) => {
    const { line, ch } = editor.doc.getCursor();
    this.cursor = { ch, line: toEnd ? line + 1 : line };
  }

  focus() {
    const { editor } = this;
    const { options: { readOnly }, useFocus } = this.props;
    if (readOnly) return;
    if (!useFocus) return;
    editor.focus();
    editor.setCursor({ ...this.cursor }, readOnly);
  }

  fixBottom() {
    const { fixBottom } = this.props;
    if (!fixBottom) return;

    const { editor } = this;
    const { height } = editor.getScrollInfo();
    editor.scrollTo(0, height);
  }

  render() {
    const { className, options: { readOnly } } = this.props;
    return (
      <div
        className={`${className} ${readOnly && 'readOnly'}`}
        ref={(self) => { this.ref = self; }}
      />
    );
  }
}

子組件調用CodeMirror組件

class SqlConsole extends Component {
  static defaultProps = {
    value: '',
    sqlPaste: '',
    onChange: () => {},
  }

  state = {
    showModal: false,
    source: {},
  };

  uuid = '';

  onCursorActivity = (cm) => {
    if (!cm.getSelection()) {
      console.log(cm.getSelection()); // 獲取到選中部分內容,用來實現執行部分內容
    }
  }

  onInputRead = async (cm, change, editor) => {
    const { text } = change;
    const dechars = [
      '.',
    ];
    const autocomplete = dechars.includes(text[0]);
    if (autocomplete) {
      const data = getTableList(); // 獲取庫表列表
      editor.setOption('hintOptions', {
        tables: data,
        completeSingle: false
      });
      cm.execCommand('autocomplete');
    } else {
      const tableName = getTableList(); // 獲取表列表
      editor.setOption('hintOptions', {
        tables: tableName,
        completeSingle: false
      });
    }
    cm.execCommand('autocomplete');
  }

  render() {
    const { sqlPaste, onChange, } = this.props;
    return (
      <CodeMirror
        className="sql"
        value={pane.sql}
        paste={sqlPaste}
        onChange={sql => { onChange(sql); }} // sql變化事件
        onCursorActivity={(cm) => this.onCursorActivity(cm)} // 用來完善選中監聽
        onInputRead={// 自動補全
        (cm, change, editor) => this.onInputRead(cm, change, editor)
      }
      />
    );
  }
}

通過以上兩個父子模塊,可實現SQL編輯器基本功能,關鍵部分代碼已做註釋。接下來詳細解釋下其中的細節。

自動補全

自動補全主要是依靠設置CodeMirror中的hintOptions來實現的,當然首先需要將依賴的hint包都引入。

const data = { table1: [''], table2: [''], table3: [''] };
cm.on('inputRead', (cm, change) => {
  cm.setOption('hintOptions', {
    tables: data,
    completeSingle: false
  });
cm.execCommand('autocomplete');
});

其中cm是CodeMirror中inputRead事件的第一個參數,其實也是CodeMirror實例本身。
總結下自動補全實現的流程就是:

  1. 通過on方法綁定inputRead方法給CodeMirror
  2. inputRead中通過setOption方法設置hintOptions,從而實現修改自動補全內容
  3. inputRead最後執行 cm.execCommand(‘autocomplete’) 執行自動補全

執行選中部分

執行選中部分代碼關鍵是要監聽選中事件,獲取選中部分內容,這兩個方法分別是cursorActivity和getSelection。

cm.on('cursorActivity', (cm) => {
  cm.getSelection(); // 選中內容
});

cm爲CodeMirror實例,通過這兩個個簡單的方法,可以實現獲取選中部分內容。判斷選中內容不爲空時展示執行部分SQL即可。

總結

CodeMirror是一個功能較完善的代碼編輯框,其支持很多種編程語言,以上僅展示了SQL的,該框架文檔比較難啃,歡迎有依賴該框架做開發的小夥伴們一起交流。如果看了這篇文章對我總結的方法有任何問題,也歡迎留言,隨緣回覆。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章