Merge pull request #50 from mrjoelkemp/ace_editor

Use the Ace editor and autocomplete

Author: mrjoelkemp

.travis.yml

@@ -3,4 +3,6 @@ node_js:
   - "0.10"
 
 notifications:
-  email: false
+  email: false
+
+sudo: false

css/styles.css

@@ -88,10 +88,10 @@ body {
     width: 100% - $sidebar-width - 1%;
     display: inline-block;
     #editor {
-      font-size: 17px;
+      font-size: 15px;
       border: 1px solid black;
       margin-bottom: 5px;
-      height: 450px;
+      height: 600px;
       .CodeMirror {
         min-height: 450px;
       }

css/styles.scss

@@ -54,23 +54,26 @@ module.exports = Console;
 
 },{}],2:[function(require,module,exports){
 var SessionStore = require('./sessionstore');
+
 /**
- * A code editor wrapper around Codemirror
+ * A code editor wrapper around the client-side text editor
  *
- * @param {$} $element - Dom element the editor should bind to
- * @returns {CodeMirror}
+ * @param {String} selector - Dom element the editor should bind to
  */
-function Editor($element) {
-  this.$element = $element;
-
-  this._editor = window.CodeMirror(this.$element.get(0), {
-    lineNumbers:       true,
-    matchBrackets:     true,
-    mode:              'text/x-php',
-    indentUnit:        2,
-    tabSize:           2,
-    autofocus:         true,
-    autoCloseBrackets: true
+function Editor(selector) {
+  this.$element = $('#' + selector);
+
+  this._editor = window.ace.edit(selector);
+  this._editor.getSession().setMode({path: 'ace/mode/php', inline: true});
+  this._editor.getSession().setUseSoftTabs(true);
+  this._editor.getSession().setTabSize(2);
+
+  this._editor.$blockScrolling = Infinity;
+  this._editor.setShowPrintMargin(false);
+  this._editor.setOptions({
+    enableBasicAutocompletion: true,
+    enableSnippets: true,
+    enableLiveAutocompletion: false
   });
 
   this._sessionStore = new SessionStore();
@@ -98,19 +101,13 @@ Editor.prototype.setValue = function(val) {
  * @param  {Number} line
  */
 Editor.prototype.showLineError = function(line) {
-  // Find the dom element in the gutter
-  this.$element.find('.CodeMirror-linenumber').each(function() {
-    // If the cell's line number matches the error line
-    if (Number($(this).html()) === line) {
-      // Make the background red
-      $(this).addClass('error-gutter');
-      return;
-    }
-  });
+  this.$element
+  .find('.ace_gutter-cell:nth-child(' + line + ')')
+    .addClass('error-gutter');
 };
 
 Editor.prototype.clearLineErrors = function() {
-  this.$element.find('.CodeMirror-linenumber').removeClass('error-gutter');
+  this.$element.find('.ace_gutter-cell').removeClass('error-gutter');
 };
 
 Editor.prototype.saveSession = function() {
@@ -285,7 +282,7 @@ var getQueryParams = require('./lib/getQueryParams');
 var timestamp = require('./lib/timestamp');
 var utils = require('./lib/utils');
 
-var editor = new Editor($('#editor'));
+var editor = new Editor('editor');
 var console = new Console($('.console'));
 var sidebar = new Sidebar($('.sidebar'));
 

dist/phpepl.js

@@ -12,8 +12,7 @@
     <link rel="shortcut icon" href="/favicon.ico?316280cb6879b222" type="image/x-icon">
     <link rel="icon" href="/favicon.ico?316280cb6879b222" type="image/x-icon">
 
-    <link href='js/vendor/codemirror/lib/codemirror.css?69882100f431f700' rel='stylesheet'>
-    <link href='css/styles.css?7781a720541bbc70' rel='stylesheet'>
+    <link href='css/styles.css?2a3d32a4457212ce' rel='stylesheet'>
     <script>
       var _gaq = _gaq || [];
       _gaq.push(['_setAccount', 'UA-36055599-1']);
@@ -79,6 +78,10 @@
             or
             <span class='shortcut'>Ctrl + Shift + Down</span>
           </span>
+          <span class='code'>
+            Autocomplete:
+            <span class='shortcut'>Ctrl + Space</span>
+          </span>
         </div>
         <div class="share-code">
           <span>Share your code:</span>
@@ -127,7 +130,9 @@
   </body>
   <script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
 
-  <script src='js/vendor/codemirror-compressed.js?af375df6c1c1d3de'></script>
+  <script src='js/vendor/ace/ace.js?744a5852f2a9614b'></script>
+  <script src='js/vendor/ace/ext-language_tools.js?541ef4db9ed6eff7'></script>
+  <script src='js/vendor/ace/snippets/php.js?846bbe7ad7c1d6f6'></script>
 
-  <script src='dist/phpepl.js?f7372bc0bcf9ca25'></script>
+  <script src='dist/phpepl.js?c11e19b19c5457fb'></script>
 </html>

index.html

@@ -1,21 +1,24 @@
 var SessionStore = require('./sessionstore');
+
 /**
- * A code editor wrapper around Codemirror
+ * A code editor wrapper around the client-side text editor
  *
- * @param {$} $element - Dom element the editor should bind to
- * @returns {CodeMirror}
+ * @param {String} selector - Dom element the editor should bind to
  */
-function Editor($element) {
-  this.$element = $element;
-
-  this._editor = window.CodeMirror(this.$element.get(0), {
-    lineNumbers:       true,
-    matchBrackets:     true,
-    mode:              'text/x-php',
-    indentUnit:        2,
-    tabSize:           2,
-    autofocus:         true,
-    autoCloseBrackets: true
+function Editor(selector) {
+  this.$element = $('#' + selector);
+
+  this._editor = window.ace.edit(selector);
+  this._editor.getSession().setMode({path: 'ace/mode/php', inline: true});
+  this._editor.getSession().setUseSoftTabs(true);
+  this._editor.getSession().setTabSize(2);
+
+  this._editor.$blockScrolling = Infinity;
+  this._editor.setShowPrintMargin(false);
+  this._editor.setOptions({
+    enableBasicAutocompletion: true,
+    enableSnippets: true,
+    enableLiveAutocompletion: false
   });
 
   this._sessionStore = new SessionStore();
@@ -43,19 +46,13 @@ Editor.prototype.setValue = function(val) {
  * @param  {Number} line
  */
 Editor.prototype.showLineError = function(line) {
-  // Find the dom element in the gutter
-  this.$element.find('.CodeMirror-linenumber').each(function() {
-    // If the cell's line number matches the error line
-    if (Number($(this).html()) === line) {
-      // Make the background red
-      $(this).addClass('error-gutter');
-      return;
-    }
-  });
+  this.$element
+  .find('.ace_gutter-cell:nth-child(' + line + ')')
+    .addClass('error-gutter');
 };
 
 Editor.prototype.clearLineErrors = function() {
-  this.$element.find('.CodeMirror-linenumber').removeClass('error-gutter');
+  this.$element.find('.ace_gutter-cell').removeClass('error-gutter');
 };
 
 Editor.prototype.saveSession = function() {

js/editor.js

@@ -9,7 +9,7 @@ var getQueryParams = require('./lib/getQueryParams');
 var timestamp = require('./lib/timestamp');
 var utils = require('./lib/utils');
 
-var editor = new Editor($('#editor'));
+var editor = new Editor('editor');
 var console = new Console($('.console'));
 var sidebar = new Sidebar($('.sidebar'));