Merge pull request #56 from xsnippet/aceeditor

Replace CodeMirror with AceEditor

Author: lotrien

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