stitch-ui/src/core/components/RichJSONEditor.js

// TODO proptypes
/* eslint-disable react/prop-types */
/* eslint-disable react/no-string-refs */
import React from "react";
import AceEditor from "react-ace";
import "brace/mode/json";
import "brace/theme/tomorrow";
import "brace/ext/language_tools";
import classNames from "classnames";

export default class RichJSONEditor extends React.Component {
  componentDidMount() {
    const { completer } = this.props;
    if (completer) {
      this.refs.aceeditor.editor.completers.push(completer);
    }
    this.refs.aceeditor.editor.commands.removeCommands(["gotoline", "find"]);
  }
  render() {
    const outprops = {
      ...this.props,
      ref: "aceeditor",
      className: classNames(this.props.className, "rich-json"),
      theme: "tomorrow",
      mode: "json",
      name: this.props.id,
      enableBasicAutocompletion: true,
      enableLiveAutocompletion: true,
      editorProps: { $blockScrolling: Infinity }
    };
    return <AceEditor {...outprops} />;
  }
}