uses ace editor

instead of tab, ace requires the tab-size. so (string) tab has been replaced with tab-size (integer)

index.php

@@ -2,7 +2,7 @@
 
 $options = array(
     // which string should represent a tab for indentation
-    'tab' => '    ',
+    'tabsize' => 3,
 );
 
 /**
@@ -75,10 +75,12 @@ if (isset($_POST['code'])) {
         <link rel="stylesheet" type="text/css" href="styles.css" />
         <script type="text/javascript" src="jquery-1.4.2.min.js"></script>
         <script type="text/javascript" src="jquery.selections.js"></script>
+        <script type="text/javascript" src="ace.js"></script>
+        <script type="text/javascript" src="mode-php.js"></script>
         <script type="text/javascript" src="php-console.js"></script>
         <script type="text/javascript">
             $.console({
-                tab: <?php echo json_encode($options['tab']) ?>
+                tabsize: <?php echo json_encode($options['tabsize']) ?>
             });
         </script>
     </head>

php-console.js

@@ -13,80 +13,19 @@
  */
 (function() {
 
-    var updateStatusBar, handleKeyPress, options;
+    var updateStatusBar, handleKeyPress, options, editor;
 
     options = {
-        tab: '    '
+        tabsize: 4,
+        editor: 'editor'
     };
 
     /**
      * updates the text of the status bar
      */
-    updateStatusBar = function() {
+    updateStatusBar = function(e) {
-        var caret, part, matches, charCount, lineCount;
+        var cursor_position = editor.getCursorPosition();
-        caret = $('textarea[name="code"]').getCaret();
+        $('.statusbar').text('Line: ' + (1+cursor_position.row) + ', Column: ' + cursor_position.column);
-        part = $('textarea[name="code"]').val().substr(0, caret);
-        matches = part.match(/(\n|[^\r\n]*$)/g);
-        part = matches.length > 1 ? matches[matches.length - 2] : matches[0];
-        lineCount = Math.max(1, matches.length);
-        // matched the first char of a line, so matches are only \n's
-        if (part === "" || part === "\r\n" || part === "\n") {
-            charCount = 1;
-        } else {
-            // matched another char, so we've got the current line as the next-to-last match
-            charCount = part.length + 1;
-            lineCount--;
-        }
-        $('.statusbar').text('Line: ' + lineCount + ', Column: ' + charCount);
-    };
-
-    /**
-     * handler for keypress/keydown events
-     */
-    handleKeyPress = function(e) {
-        var caret, part, matches, re;
-        switch(e.keyCode) {
-        case 9:
-            // add 4 spaces when tab is pressed
-            e.preventDefault();
-            $(this).injectText(options.tab);
-            break;
-        case 13:
-            // submit form on ctrl-enter or alt-enter
-            if (e.metaKey || e.altKey) {
-                e.preventDefault();
-                $('form').submit();
-                return;
-            }
-
-            // indent automatically the new lines
-            caret = $(this).getCaret();
-            part = $(this).val().substr(0, caret);
-            matches = part.match(/(\n[ \t]+)[^\r\n]*$/);
-            if (matches) {
-                $(this).val(function(idx, val) {
-                    return val.substring(0, caret) + matches[1] + val.substring(caret);
-                });
-                $(this).setCaret(caret + matches[1].length);
-                e.preventDefault();
-            }
-            break;
-        case 8:
-            // deindent automatically on backspace
-            caret = $(this).getCaret();
-            part = $(this).val().substr(0, caret);
-            re = new RegExp('\n[ \t]*?'+options.tab+'$');
-            if (part.match(re)) {
-                $(this).val(function(idx, val) {
-                    return val.substring(0, caret - options.tab.length) + val.substring(caret);
-                });
-                $(this).setCaret(caret - options.tab.length);
-                e.preventDefault();
-            }
-            break;
-        }
-
-        updateStatusBar();
     };
 
     /**
@@ -111,7 +50,8 @@
     handleSubmit = function(e) {
         e.preventDefault();
         $('div.output').html('<img src="loader.gif" class="loader" alt="" /> Loading ...');
-        $.post('?js=1', $(this).serializeArray(), function(res) {
+
+        $.post('?js=1', { code: editor.getSession().getValue() }, function(res) {
             if (res.match(/#end-php-console-output#$/)) {
                 $('div.output').html(res.substring(0, res.length-24));
             } else {
@@ -119,28 +59,44 @@
             }
             refreshKrumoState();
         });
-    }
+    };
+
+    initializeAce = function() {
+        editor = ace.edit(options.editor);
+
+        // set mode
+        var PhpMode = require("ace/mode/php").Mode;
+        editor.getSession().setMode(new PhpMode());
+
+        // tab size
+        editor.getSession().setTabSize(options.tabsize);
+
+        // events
+        editor.getSession().selection.on('changeCursor', updateStatusBar);
+
+        // commands
+        editor.commands.addCommand({
+            name: 'submitForm',
+            bindKey: {
+                win: 'Ctrl-Enter|Alt-Enter',
+                mac: 'Command-Enter|Alt-Enter',
+                sender: 'editor'
+            },
+            exec: function(env, args, request) {
+                $('form').submit();
+            }
+        });
+    };
+
 
     $.console = function(settings) {
         $.extend(options, settings);
 
         $(function() {
-            $('textarea[name="code"]')
+            $(document).ready(initializeAce);
-                .keyup(updateStatusBar)
-                .click(updateStatusBar)
-                .focus();
-
-            if ($.browser.opera) {
-                $('textarea[name="code"]').keypress(handleKeyPress);
-            } else {
-                $('textarea[name="code"]').keydown(handleKeyPress);
-            }
 
             $('form').submit(handleSubmit);
-
+/*
-            updateStatusBar();
-            refreshKrumoState();
-
             // set the focus back to the textarea if pressing tab moved
             // the focus to the submit button (opera bug)
             $('input[name="subm"]').keyup(function(e) {
@@ -148,6 +104,7 @@
                     $('textarea[name="code"]').focus();
                 }
             });
+            */
         });
     };
 }());