Source Mode

• The wiki page on Source Mode can be referred to here. The source mode provides customized support to the cadet-frontend Ace Editor. This wiki will describe how the Source Mode integrates with the Ace Editor.

Usage

• To use source mode, we need to import it from the js-slang library and call it inside the AceEditor call-back method. The following code can be found inside Editor.jsx.

  import { HighlightRulesSelector, ModeSelector } from 'js-slang/dist/editors/ace/modes/source';
  
  // For react-ace, we need to import AceEditor from its library
  import AceEditor from 'react-ace';
  
  
  // using react-ace to call AceEditor and supply the source mode as a parameter to it
  render() {
    return (
      <AceEditor
      className="react-ace"
      mode={this.chapterNo()} // select according to props.sourceChapter
      />
  	)
  }

  
  
  

  The chapterNo() is a method to return the source mode of the corresponding source chapter.

    // chapter selector used to choose the correct source mode
    public chapterNo = () => {
      let chapter = this.props.sourceChapter;
      if (chapter === undefined) {
        chapter = 1;
      }
      HighlightRulesSelector(chapter);
      ModeSelector(chapter);
      return 'source' + chapter.toString();
    };

  
  
  

• The source mode is a subset of Ace modes. So we can use all the built-in functions provided by the ace library. For more information, check out ace and react-ace.

• js-slang provides customized theme for the editor as well. We can import it from js-slang as well. The importing method is demonstrated in the following code:

  import 'js-slang/dist/editors/ace/theme/source';
  
  // using react-ace to call AceEditor and supply the source mode as a parameter to it
  render() {
    return (
      <AceEditor
      className="react-ace"
      mode={this.chapterNo()} // select according to props.sourceChapter
  		theme="source" // call source theme here
      />
  	)
  }

Authors

Zhou Zijian
Hopefully more can join.