How to use brace - 10 common examples

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();
  },

searchReferencesFromIdentifier
} = require("ebnf2railroad");

const styleElem = document.createElement("style");
styleElem.setAttribute("type", "text/css");
styleElem.innerHTML = documentStyle();
const headSection = document.getElementsByTagName("head")[0];
headSection.appendChild(styleElem);

const ace = require("brace");
require("brace/ext/language_tools");
require("brace/mode/plain_text");
require("./ace-ebnf-mode");

const EditSession = ace.EditSession;
const Range = ace.acequire("ace/range").Range;
require("brace/theme/iplastic");

// Toggle collapse/expand

// 1 = middle, 2 = doc, 3 = middle, 0 = expand
let position = 1;
const updatePosition = newPosition => {
  position = newPosition % 4;
  if (position === 1 || position === 3) {
    document.body.classList.add("split");
  } else {
    document.body.classList.remove("split");
  }
  if (position !== 0) {
    document.body.classList.remove("expanded");
  } else {

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const React = require("react");
const react_ace_1 = require("react-ace");
const ace = require("brace");
const languages_1 = require("./languages");
require('brace/mode/ocaml');
require('brace/mode/c_cpp');
require('brace/mode/clojure');
require('brace/mode/scala');
require('brace/mode/javascript');
require('brace/mode/dart');
require('brace/theme/eclipse');
const Range = ace.acequire('ace/range').Range;
/**
 * Encapsulates an AceEditor that supports setting breakpoints by
 * clicking in the gutter.
 */
class StopifyAce extends React.Component {
    constructor(props) {
        super(props);
        this.breakpoints = [];
        /// Ace Marker object that is kept in sync with props.line.
        this.lastLineMarker = null;
    }
    componentWillReceiveProps(props) {
        if (this.lastLineMarker !== null) {
            this.editor.session.removeMarker(this.lastLineMarker);
        }
        if (props.line) {

var ace = require('brace'),
  Mock = require('mockjs');
require('brace/mode/javascript');
require('brace/mode/json');
require('brace/mode/xml');
require('brace/mode/html')
require('brace/theme/xcode');
require("brace/ext/language_tools.js");
var json5 = require('json5');
const MockExtra = require('common/mock-extra.js')

var langTools = ace.acequire("ace/ext/language_tools"),
  wordList = [
    // { name: '字符串', mock: '@string' },
    // { name: '自然数', mock: '@natural' },
    // { name: '浮点数', mock: '@float' },
    // { name: '字符', mock: '@character' },
    // { name: '布尔', mock: '@boolean' },
    // { name: 'url', mock: '@url' },
    // { name: '域名', mock: '@domain' },
    // { name: 'ip地址', mock: '@ip' },
    // { name: 'id', mock: '@id' },
    // { name: 'guid', mock: '@guid' },
    // { name: '当前时间', mock: '@now' },
    // { name: '时间戳', mock: '@timestamp'},
    // { name: '日期', mock: '@date' },
    // { name: '时间', mock: '@time' },
    // { name: '日期时间', mock: '@datetime' },

import PropTypes from 'prop-types'
import * as React from 'react'
import AceEditor, { AceEditorProps } from 'react-ace'
import * as ace from 'brace'
import 'brace/ext/language_tools'
import 'brace/mode/html'
import 'brace/mode/jsx'
import 'brace/mode/sh'
import 'brace/theme/tomorrow_night'
import { eventStack, doesNodeContainClick } from 'src/lib'

const parentComponents = []

// Set up custom completers by using a ace extension
// https://github.com/thlorenz/brace/issues/19
const languageTools = ace.acequire('ace/ext/language_tools')

type Completion = {
  caption: string
  value: string
  meta: string
}

const semanticUIReactCompleter = {
  getCompletions(editor, session, pos, prefix, callback) {
    const completions: Completion[] = []

    _.each(parentComponents, component => {
      const { name } = component._meta
      // Component
      completions.push({ caption: name, value: name, meta: 'Component' })

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);
    }
  }

setErrors(errors) {
    if (!errors) {
      return false;
    }
    const session = this.editor.getSession();
    session.setAnnotations(errors);
    Object.keys(session.$backMarkers).forEach(r => session.removeMarker(r))
    //console.log(this.editor.getSession().$backMarkers);
    var Range =  ace.acequire("ace/range").Range
    errors.forEach(error => {
      session.addMarker(
        new Range(error.row, error.column, error.row, error.columnEnd + 1), 'ace_highlight-marker', 'background'
      );
    })
  },

var ace           = require('brace'),
    _             = require('lodash'),
    Placeholder   = ace.acequire('ace/placeholder').PlaceHolder,
    Range         = ace.acequire('ace/range').Range,
    EventEmitter  = require('events').EventEmitter,
    slice         = Array.prototype.slice;

require('./lib/jquery.event.drag-2.2');
require('brace/theme/monokai');
require('brace/mode/sql');

var placeholderRE = /\[\[placeholder:[\w-]+\]\]/i,
    defaultPlaceholder = '[[placeholder:PLACEHOLDER_NAME]]',
    placeHolderNameOffset = defaultPlaceholder.indexOf(':') + 1;

function containsPlaceHolder(text) {
  return placeholderRE.test(text);
}

function TemplateCreator(editor) {

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
    });
  }