How to use the brace.edit function in brace

ready: function() {
    this.sessions = [];

    this.$on('open-file', this.openFile);
    this.$on('close-file', this.closeFile);
    this.$on('save-project-as', this.saveProjectAs);
    this.$on('reformat', this.reformat);
    this.$on('settings-changed', this.updateSettings);

    this.ace = window.ace = ace.edit('editor');
    //this.ace.setTheme('ace/theme/tomorrow');
    this.ace.setReadOnly(true);
    // this.ace.$worker.send("changeOptions", [{asi: false}]);

    this.customizeCommands();
  },

ngAfterViewInit() {
    const config = (ace as any).config;
    config.set('basePath', '/ace/');
    this.editor = ace.edit(this.id);
    this.deferredEditor.resolve(this._editor);
    this.editor.setTheme(`ace/theme/chrome`);
    this.editor.session.setMode(`ace/mode/${this.mode}`);
    this.editor.$blockScrolling = Infinity;
    this.editor.setValue("");
    this.editor.getSession().on('change', e => this.hasInitialised ? this.change.next(e): noop());
    this.editor.getSession().on('blur', e => this.onTouched());
    this.change.subscribe(_ => this.onChange(this.editor.getValue()));
    if(this.valueToWrite) {
      this.writeValue(this.valueToWrite);
    }
  }

var setupEditor = function(id, json) {
    var text = "";
    if (json) { text = prettyJSON(json); }

    var editor = ace.edit(id);
    editor.setTheme("ace/theme/textmate");
    editor.getSession().setMode("ace/mode/javascript");
    editor.renderer.setHScrollBarAlwaysVisible(false);
    editor.setShowPrintMargin(false);
    editor.setValue(text, -1);

    return editor;
  };

componentDidMount() {
    const {
      name,
      options,
      value
    } = this.props;
    const editor = brace.edit(name);
    editor.setValue(value);
    editor.getSession().setMode('ace/mode/json');
    editor.setTheme(options.theme || DEFAULT_THEME);
    editor.$blockScrolling = Infinity;
    editor.setShowPrintMargin(false);
    editor.setOptions({
      ...options
    });
  }

mounted: function () {
    const vm = this;
    var lang = vm.lang;
    var theme = vm.theme;
    var editor = vm.editor = ace.edit(vm.$el);
    editor.$blockScrolling = Infinity;
    editor.getSession().setMode('ace/mode/' + lang);
    editor.setTheme('ace/theme/' + theme);
    editor.setValue(vm.content, 1);
    editor.on('change', function () {
      vm.$parent.$emit('change-content', editor.getValue());
    });
  },

componentDidMount() {
		this.editor = ace.edit('editor');
		this.editor.$blockScrolling = Infinity;
		this.editor.setOption('fontSize', '14px');
		this.editor.setOption('showLineNumbers', false);
		this.editor.setOption('showPrintMargin', false);
		Preferences.get('editorTheme').then(theme => {
			this.editor.setTheme('ace/theme/' + theme);
		});
		this.updateContent();

		window.addEventListener('beforeunload', this.handleUnload);
		window.addEventListener('copy', this.handleCopy);
	}

componentDidMount: function () {
        this.editor = ace.edit('data-editor');
        this.editor.getSession().setMode('ace/mode/json');
        this.editor.setTheme('ace/theme/monokai');
        this.editor.setShowPrintMargin(false);
        this.editor.getSession().setUseSoftTabs(true);
        this.editor.getSession().setUseWrapMode(true);
        this.handleMethodChange();
    },
    componentWillReceiveProps: function(nextProps) {

_mountEditor(domNode) {
    if (!domNode) return

    this.editor = ace.edit(domNode)
    this.editor.getSession().setMode('ace/mode/javascript')
    this.editor.getSession().setUseWrapMode(true)
    this.editor.setShowPrintMargin(false)
    this.editor.$blockScrolling = Infinity
    this.editor.setValue(this.props.content, 1)

    if (this.props.onChange) {
      this.editor.on('blur', (event) => {
        this.props.onChange(event, this.editor.getValue())
      })
    }
  },

componentDidMount: function () {
        this.editor = ace.edit(this.getDOMNode());
        this.editSession = this.editor.getSession();

        this.editor.getSession().setMode('ace/mode/' + this.props.mode);
        this.editor.setTheme('ace/theme/solarized_light');

        this.editor.focus();
        this.editor.setValue(this.props.initialValue, -1);

        this.editor.on('blur', function () {
            this.props.onCodeChange(this.editor.getValue().split('\n'));
            this.props.onBlur();
        }.bind(this));
    },

componentDidMount: function(){
        this.editor = ace.edit(React.findDOMNode(this.refs.codeEditor));
        this.changeMode(this.state.mode);
        this.editor.setTheme('ace/theme/chrome');
        this.editor.$blockScrolling = Infinity;
        this.editor.setOptions({ maxLines: 100 });
        this.editor.setValue(this.props.data.content);
    },
    getJSON: function(){