Replace CodeMirror with AceEditor

AceEditor is much more functional that CodeMirror as well as there are
bunch of extensions/styles for the AceEditor in the Internet. For
instance it provides an API to annotate lines or highlight them, which
CodeMirror lacks of.

This commit replaces CodeMirror with AceEditor, though some style
enhacenements are required before going live.

Author: ikalnytskyi

package-lock.json

@@ -27,12 +27,12 @@
     }
   },
   "dependencies": {
-    "codemirror": "^5.33.0",
+    "brace": "^0.11.0",
     "immutable": "^3.8.2",
     "parse-link-header": "^1.0.1",
     "prop-types": "^15.6.0",
     "react": "^16.0.0",
-    "react-codemirror2": "^3.0.7",
+    "react-ace": "^5.9.0",
     "react-custom-scrollbars": "^4.2.1",
     "react-dom": "^16.0.0",
     "react-redux": "^5.0.6",

package.json

@@ -1,9 +1,10 @@
 import React from 'react';
 import { connect } from 'react-redux';
-import { Controlled as CodeMirror } from 'react-codemirror2';
+import AceEditor from 'react-ace';
 import Tags from 'react-tagging-input';
 
-import 'codemirror/lib/codemirror.css';
+import brace from 'brace';
+import 'brace/ext/modelist';
 
 import Title from './common/Title';
 import ListBoxWithSearch from './ListBoxWithSearch';
@@ -21,9 +22,11 @@ class NewSnippet extends React.Component {
       syntax: '', // eslint-disable-line react/no-unused-state
     };
     this.onKeyPress = (e) => {
-      if (e.which === 13) { // keyCode for Enter button
+      // e.target.nodeName !=== 'TEXTAREA' is an ugly hack to allow enter
+      // to insert "newline" into code editor. We need to figure out
+      // a better way to handle this.
+      if (e.which === 13 && e.target.nodeName !== 'TEXTAREA') { // keyCode for Enter button
         e.preventDefault();
-        e.stopPropagation();
       }
     };
     this.postSnippet = this.postSnippet.bind(this);
@@ -63,6 +66,13 @@ class NewSnippet extends React.Component {
   }
 
   render() {
+    const { modesByName } = brace.acequire('ace/ext/modelist');
+    const mode = modesByName[this.state.syntax] || modesByName.text;
+    const syntaxes = this.props.syntaxes.map(item => ({
+      name: modesByName[item].caption,
+      value: item,
+    }));
+
     return (
       [
         <Title title="New snippet" key="New Snippet Title" />,
@@ -92,19 +102,29 @@ class NewSnippet extends React.Component {
               />
             </div>
             <div className="new-snippet-code">
-              <CodeMirror
+              <AceEditor
+                mode={mode.name}
+                width="100%"
+                height="100%"
+                focus
+                setOptions={{
+                  showFoldWidgets: false,
+                  useWorker: false,
+                  maxLines: Infinity,
+                  showPrintMargin: false,
+                }}
                 value={this.state.content}
-                options={{ lineNumbers: true }}
-                onBeforeChange={(editor, data, content) => { this.setState({ content }); }}
+                onChange={(content) => { this.setState({ content }); }}
               />
+
               <div className="new-snippet-code-bottom-bar">
                 <input type="submit" value="POST" />
               </div>
             </div>
           </div>
           <div className="new-snippet-lang-wrapper">
             <ListBoxWithSearch
-              items={this.props.syntaxes}
+              items={syntaxes}
               onClick={this.onSyntaxClick}
             />
           </div>

src/components/NewSnippet.jsx

@@ -1,9 +1,6 @@
 import React from 'react';
 import { connect } from 'react-redux';
-import { Controlled as CodeMirror } from 'react-codemirror2';
-
-import codemirror from 'codemirror';
-import 'codemirror/lib/codemirror.css';
+import AceEditor from 'react-ace';
 
 import Title from './common/Title';
 import Spinner from './common/Spinner';
@@ -41,7 +38,6 @@ class Snippet extends React.Component {
     if (!snippet) return <Spinner />;
 
     const snippetTitle = snippet.get('title') || `#${snippet.get('id')}, Untitled`;
-    const modeInfo = codemirror.findModeByName(snippet.get('syntax'));
 
     return (
       [
@@ -76,9 +72,20 @@ class Snippet extends React.Component {
             />
           </div>
           <div className="snippet-code">
-            <CodeMirror
+            <AceEditor
+              mode={snippet.get('syntax')}
+              width="100%"
+              height="100%"
+              setOptions={{
+                readOnly: true,
+                highlightActiveLine: false,
+                highlightGutterLine: false,
+                showFoldWidgets: false,
+                useWorker: false,
+                maxLines: Infinity,
+                showPrintMargin: false,
+              }}
               value={`${snippet.get('content')}`}
-              options={{ lineNumbers: true, readOnly: true, mode: modeInfo.mime }}
             />
             <div className="snippet-code-bottom-bar">
               <button className="snippet-button light">Raw</button>

src/components/Snippet.jsx

@@ -1,4 +1,5 @@
-import codemirror from 'codemirror';
+import brace from 'brace';
+import 'brace/ext/modelist';
 
 const regExpEscape = string => string.replace(/[-[\]{}()*+?.,\\^$|]/g, '\\$&');
 
@@ -19,17 +20,20 @@ function download(text, name, mime) {
 }
 
 function downloadSnippet(snippet) {
-  // Despite using CodeMirror's modes as syntaxes on XSnippet API, we might
-  // imagine other setup when more syntaxes can be used on server. Hence, we
-  // must be prepared and fallback on "Plain Text" mode if we can't figure out
-  // what's extension and/or MIME type.
-  const modeInfo = codemirror.findModeByName(snippet.get('syntax'))
-              || codemirror.findModeByName('Plain Text');
+  const { modesByName } = brace.acequire('ace/ext/modelist');
 
+  // Despite using AceEditor's modes as syntaxes, we can imagine other setup
+  // when more or even other syntaxes can be used on API side. Hence, we better
+  // be prepared and fallback to "Text" mode if unknown syntaxes it is.
+  const mode = modesByName[snippet.get('syntax')] || modesByName.text;
+  const ext = mode.extensions.split('|')[0] || 'txt';
   const content = snippet.get('content');
-  const name = `${snippet.get('id')}.${modeInfo.ext[0]}`;
+  const name = `${snippet.get('id')}.${ext}`;
 
-  download(content, name, modeInfo.mime);
+  // Unfortunately, AceEditor doesn't maintain MIME type map so we don't know
+  // for sure which mode corresponds to which MIME type. Hence, let's use
+  // text/plain until we come up with better idea.
+  download(content, name, 'text/plain');
 }
 
 export { regExpEscape, downloadSnippet };

src/helpers/index.js

@@ -1,32 +1,11 @@
 @import './common/variables.styl'
 @import './common/mixins.styl'
 
-.react-codemirror2,
-.CodeMirror
-  height: 100% !important
-  line-height: 1.4
+.snippet .ace_gutter-layer
+  width: 40px !important
 
-.new-snippet .react-codemirror2,
-.new-snippet .CodeMirror
-  color: text-dark !important
-
-.CodeMirror-gutter
-  &.CodeMirror-linenumbers
-    width: 39px
-
-.CodeMirror-sizer
-  margin-left: 39px
-  padding-top: 5px
-
-.CodeMirror-gutters
-  border-right: none
-
-.snippet .CodeMirror-line
-  padding-left: 20px !important
-
-.snippet .CodeMirror-cursor {
+.snippet .ace_cursor
   display: none !important
-}
 
 .react-tags
   display: flex