Revert "Replace brace with ace-build and react-ace (apache#1331)"

This reverts commit 9fc82fb.

app/addons/components/components/codeeditor.js

@@ -11,20 +11,13 @@
 // the License.
 import React from "react";
 import FauxtonAPI from "../../../core/api";
-import AceEditor from "react-ace";
-import ace from 'ace-builds';
-import "ace-builds/src-min-noconflict/ext-searchbox";
+import ace from "brace";
+import "brace/ext/searchbox";
 import {StringEditModal} from './stringeditmodal';
-import 'ace-builds/css/theme/idle_fingers.css';
-import 'ace-builds/css/ace.css';
-// importing the webpack resolver enables dynamically loading modes, which is required for syntax checking
-import 'ace-builds/webpack-resolver';
 
-require('ace-builds/src-noconflict/mode-javascript');
-require('ace-builds/src-noconflict/mode-json');
-require('ace-builds/src-noconflict/theme-idle_fingers');
-
-ace.config.set("useStrictCSP", true);
+require('brace/mode/javascript');
+require('brace/mode/json');
+require('brace/theme/idle_fingers');
 
 export class CodeEditor extends React.Component {
   static defaultProps = {
@@ -95,12 +88,17 @@ export class CodeEditor extends React.Component {
       }
     );
 
+    // suppresses an Ace editor error
+    this.editor.$blockScrolling = Infinity;
+
     if (shouldUpdateCode) {
       this.setValue(props.defaultCode);
     }
 
+    this.editor.setShowPrintMargin(props.showPrintMargin);
     this.editor.autoScrollEditorIntoView = props.autoScrollEditorIntoView;
 
+    this.editor.setOption('highlightActiveLine', this.props.highlightActiveLine);
 
     if (this.props.setHeightToLineCount) {
       this.setHeightToLineCount();
@@ -111,6 +109,16 @@ export class CodeEditor extends React.Component {
     }
 
     this.addCommands();
+    this.editor.getSession().setMode('ace/mode/' + props.mode);
+    this.editor.setTheme('ace/theme/' + props.theme);
+    this.editor.setFontSize(props.fontSize);
+    this.editor.getSession().setTabSize(2);
+    this.editor.getSession().setUseSoftTabs(true);
+
+    if (this.props.autoFocus) {
+      this.editor.focus();
+    }
+    this.editor.setReadOnly(props.disabled);
   };
 
   addCommands = () => {
@@ -120,6 +128,8 @@ export class CodeEditor extends React.Component {
   };
 
   setupEvents = () => {
+    this.editor.on('blur', _.bind(this.onBlur, this));
+    this.editor.on('change', _.bind(this.onContentChange, this));
 
     if (this.props.stringEditModalEnabled) {
       this.editor.on('changeSelection', _.bind(this.showHideEditStringGutterIcon, this));
@@ -169,6 +179,10 @@ export class CodeEditor extends React.Component {
   componentDidMount() {
     this.setupAce(this.props, true);
     this.setupEvents();
+
+    if (this.props.autoFocus) {
+      this.editor.focus();
+    }
   }
 
   componentWillUnmount() {
@@ -343,35 +357,10 @@ export class CodeEditor extends React.Component {
     this.editor.getSelection().moveCursorUp();
   };
 
-  onAceLoad = (ace) => {
-    this.ace = ace;
-  };
-
   render() {
     return (
       <div>
-        <AceEditor
-          name={this.props.id}
-          className="js-editor"
-          mode={this.props.mode}
-          theme={this.props.theme}
-          onLoad={_.bind(this.onAceLoad, this)}
-          onBlur={_.bind(this.onBlur, this)}
-          onChange={_.bind(this.onContentChange, this)}
-          editorProps={{
-            $blockScrolling: Infinity,
-            useSoftTabs: true
-          }}
-          readOnly={this.disabled}
-          showPrintMargin={this.props.showPrintMargin}
-          highlightActiveLine={this.props.highlightActiveLine}
-          width="100%"
-          height="100%"
-          tabSize={2}
-          fontSize={this.props.fontSize}
-          focus={this.props.autoFocus}
-          setOptions={{
-          }}/>
+        <div ref={node => this.ace = node} className="js-editor" id={this.props.id}></div>
         <button ref={node => this.stringEditIcon = node}
           className="btn string-edit"
           title="Edit string"

app/addons/components/components/stringeditmodal.js

@@ -15,11 +15,11 @@ import PropTypes from 'prop-types';
 import React from "react";
 import ReactDOM from "react-dom";
 import {Modal} from "react-bootstrap";
-import ace from "ace-builds";
+import ace from "brace";
 import Helpers from "../../documents/helpers";
-require('ace-builds/src-min-noconflict/mode-javascript');
-require('ace-builds/src-min-noconflict/mode-json');
-require('ace-builds/src-noconflict/theme-idle_fingers');
+require('brace/mode/javascript');
+require('brace/mode/json');
+require('brace/theme/idle_fingers');
 
 // this appears when the cursor is over a string. It shows an icon in the gutter that opens the modal.
 export class StringEditModal extends React.Component {

app/addons/components/components/zenmodeoverlay.js

@@ -15,8 +15,7 @@ import app from "../../../app";
 import {CodeEditor} from './codeeditor';
 import {Tooltip, OverlayTrigger} from 'react-bootstrap';
 
-require('ace-builds/src-min-noconflict/theme-dawn');
-import 'ace-builds/css/theme/dawn.css';
+require('brace/theme/dawn');
 
 const themes = {
   dark: 'idle_fingers',

app/addons/documents/rev-browser/components/splitscreenarea.js

@@ -12,13 +12,16 @@
 
 import React from 'react';
 import ReactDOM from "react-dom";
+import ace from "brace";
 
-const highlight  = require('ace-builds/src-min-noconflict/ext-static_highlight');
+require('brace/ext/static_highlight');
+const highlight = ace.acequire('ace/ext/static_highlight');
 
-require('ace-builds/src-min-noconflict/mode-json');
-const JSONMode = require('ace-builds/src-min-noconflict/mode-json').Mode;
+require('brace/mode/json');
+const JavaScriptMode = ace.acequire('ace/mode/json').Mode;
 
-const theme = require('ace-builds/src-noconflict/theme-idle_fingers');
+require('brace/theme/idle_fingers');
+const theme = ace.acequire('ace/theme/idle_fingers');
 
 export default class SplitScreenArea extends React.Component {
 
@@ -37,13 +40,13 @@ export default class SplitScreenArea extends React.Component {
   hightlightAfterRender () {
     const format = (input) => { return JSON.stringify(input, null, '  '); };
 
-    const jsonMode = new JSONMode();
+    const jsmode = new JavaScriptMode();
     const left = this.revLeftOurs;
     const right = this.revRightTheirs;
 
-    const leftRes = highlight.render(format(this.props.ours), jsonMode, theme, 0, true);
+    const leftRes = highlight.render(format(this.props.ours), jsmode, theme, 0, true);
     left.innerHTML = leftRes.html;
-    const rightRes = highlight.render(format(this.props.theirs), jsonMode, theme, 0, true);
+    const rightRes = highlight.render(format(this.props.theirs), jsmode, theme, 0, true);
     right.innerHTML = rightRes.html;
   }
 

jest-config.json

@@ -7,7 +7,6 @@
 
   "moduleNameMapper": {
     "underscore": "lodash",
-    "ace-builds": "<rootDir>/node_modules/ace-builds",
 
     "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|swf|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
     "\\.(css|less)$": "<rootDir>/__mocks__/styleMock.js"

package.json

@@ -63,13 +63,13 @@
   },
   "dependencies": {
     "@webcomponents/url": "^0.7.8",
-    "ace-builds": "^1.4.13",
     "acorn": "^6.4.2",
     "ajv": "^6.12.6",
     "async": "~0.2.6",
     "backbone": "^1.4.0",
     "base-64": "^1.0.0",
     "bluebird": "^3.7.2",
+    "brace": "^0.11.0",
     "classnames": "^2.2.6",
     "clean-css": "^4.2.4",
     "clipboard": "^2.0.8",
@@ -88,7 +88,6 @@
     "prop-types": "^15.8.1",
     "rc-slider": "^9.7.5",
     "react": "^16.14.0",
-    "react-ace": "^9.5.0",
     "react-bootstrap": "^0.31.3",
     "react-dom": "^16.14.0",
     "react-motion": "^0.5.0",