How to use react-ace - 10 common examples

import React from 'react';
import PropTypes from 'prop-types';
import TextareaWidget from 'react-jsonschema-form/lib/components/widgets/TextareaWidget';

let CodeWidget; // eslint-disable-line import/no-mutable-exports

try {
	// eslint-disable-next-line import/no-extraneous-dependencies, global-require
	const AceEditor = require('react-ace').default;

	const SET_OPTIONS = {
		enableBasicAutocompletion: true,
		enableLiveAutocompletion: true,
		enableSnippets: true,
	};

	class AceCodeWidget extends React.Component {
		static displayName = 'AceCodeWidget';

		constructor(props) {
			super(props);
			this.onChange = this.onChange.bind(this);
			this.onLoad = this.onLoad.bind(this);
		}

_getComponent(feedback) {
    const { labelSpan, label, componentSpan, required, mode, height } = this.props;
    const {showModalEditor} = this.state;
    //
    const className = classNames('form-control');
    const labelClassName = classNames(labelSpan, 'control-label');
    let showAsterix = false;
    if (required && !this.state.value) {
      showAsterix = true;
    }

    // Workaround - Import for AceEditor must be here. When was on start, then not working tests (error is in AceEditor);
    let AceEditor;
    AceEditor = require('react-ace').default;
    require('brace/mode/groovy');
    require('brace/mode/json');
    require('brace/mode/sqlserver');
    require('brace/theme/github');
    require('brace/ext/language_tools');
    const AceEditorInstance = this._getAceEditor(AceEditor, mode, className, height, showModalEditor);
    return (
      <div>
        {
          !label
          ||
          <label>
            {label}
            { this.renderHelpIcon() }
          </label></div>

render() {
    const {isFullscreen} = this.state;

    if (typeof window !== "undefined") {
      const Ace = require("react-ace").default;
      require("brace/mode/javascript");

      const options = {
        fontSize: "14px"
        // enableBasicAutocompletion: true,
        // enableLiveAutocompletion: true
      };

      const editorProps = {
        $blockScrolling: Infinity
      };

      return (
        <div>
          </div>

checked={!this.state.contest.hidden}
          onChange={(_, data) => this.handleChange(this.state.contest, 'hidden', !data.checked)}
        />
         this.handleChange(this.state.contest, 'hidden', data.checked)}
        />
      
      
        <label>题目列表</label>
         v.toString()).reduce((accu, next) =&gt; `${accu}; ${next}`)} onChange={e =&gt; this.handleChange(this.state.contest, 'problems', e.target.value.split(';').filter(v =&gt; !!v.trim()).map(v =&gt; parseInt(v.trim())))} /&gt;
      
    ;

    const AceEditor = require('react-ace').default;
    if (typeof window !== 'undefined' &amp;&amp; window) {
      let windowAsAny = window as any;
      windowAsAny.ace.config.set('basePath', '/lib/ace');
    }

    const description = 
      
        
          <div style="{{">
             this.renderPreview()} value={this.state.contest.description}&gt;
          </div>
        
        
          <div style="{{">
            
          </div>

render() {
        return React.createElement(react_ace_1.default, { ref: (editor) => this.setupEditor(editor), onChange: (text) => this.props.onChange(text), width: "100%", theme: "eclipse", name: "the_editor", value: this.props.value, mode: languages_1.langs[this.props.language].aceMode });
    }
}

{
        this.state.problem.config.useStdIO ? null :
          
            
              <label>输入文件名</label>
               this.handleChange(this.state.problem.config, 'inputFileName', e.target.value)} /&gt;
            
            
              <label>输出文件名</label>
               this.handleChange(this.state.problem.config, 'outputFileName', e.target.value)} /&gt;
            
          
      }
    ;

    const AceEditor = require('react-ace').default;
    if (typeof window !== 'undefined' &amp;&amp; window) {
      let windowAsAny = window as any;
      windowAsAny.ace.config.set('basePath', '/lib/ace');
    }

    const description = 
      
        
          <div style="{{">
             this.renderPreview()}&gt;
          </div>
        
        
          <div style="{{">
            
          </div>

;
    if (!this.state.loaded) return placeHolder;

    this.languageOptions = this.state.problem.languages.map((v, i) => ({
      key: i,
      value: i,
      text: v.name,
      information: v.information,
      highlight: v.syntaxHighlight
    } as LanguageOptions));
    const { languageChoice } = this.state;

    const AceEditor = require('react-ace').default;
    if (typeof window !== 'undefined' && window) {
      let windowAsAny = window as any;
      windowAsAny.ace.config.set('basePath', '/lib/ace');
    }

    const panes = this.editors.map((v, i) => {
      let fileName = v.fileName.replace(/\${.*?}/g, '');
      return {
        menuItem: `${i + 1}. ${!!fileName ? fileName : 'default'}`,
        render: () => 
          <div style="{{">
             this.updateContent(i, this.editors[i].editor)} debounceChangePeriod={200} value={this.state.contents[i]} ref={this.editors[i].editor} mode={this.state.languageValue} theme="tomorrow"&gt;
          </div>
        
      }
    });

render() {
    require('brace');
    const AceEditor = require('react-ace').default;
    require('brace/mode/jsx');
    require('brace/mode/json');
    require('brace/ext/language_tools');
    require('brace/ext/searchbox');
    require('brace/keybinding/vim');
    require('./themes/ace');

    const { onValueChange, path, value, annotations, lineNumbers, theme } = this.props;

    return (
      <div>
        </div>

await Promise.all([
      this.loadBraceMode('javascript'),
      this.loadBraceMode('markdown'),
      this.loadBraceMode('css'),
      this.loadBraceMode('jsx'),
      this.loadBraceMode('sh'),
      this.loadBraceMode('html'),
      this.loadBraceTheme('vibrant_ink'),
      this.loadBraceTheme('dracula'),
      this.loadBraceTheme('tomorrow'),
      this.loadBraceTheme('solarized_light'),
      this.loadBraceTheme('solarized_dark'),
    ])

    const ReactAce = require('react-ace')
    return { ReactAce: ReactAce.default || ReactAce }
  }

require.ensure([], (require) => {
                    AceEditor = require('react-ace').default;
                    require('brace/theme/tomorrow');
                    require('brace/ext/language_tools');
                    this.setState({ editorReady: true });
                    loadFun.call(this);
                    langLoadEnd[lang] = true;
                }, 'react-ace');
                editorLoadEnd = true;