ace editor

.gitignore

 /resources/game-icons.net
 /node_modules
 /generator/js/*.map
-/generator/js/*.d.ts
+/generator/js/ui.d.ts
+/generator/js/card.d.ts
 /generator/js/*.js

generator/css/ui.css

     align-items: center;
 }
 
+#card-contents {
+    height: 240px;
+}
+
 /* Small screen (preview fills all columns) */
 @media (max-width : 1199px) {
     .preview-container {

generator/generate.html

     <!-- Library: Color picker -->
     <link href="lib/colorpicker/css/bootstrap-colorselector.css" rel="stylesheet" />
     <script type="text/javascript" src="lib/colorpicker/js/bootstrap-colorselector.js" charset="utf-8"></script>
+    <!-- Library: Ace editor -->
+    <script src="lib/ace/ace.js" type="text/javascript" charset="utf-8"></script>
+    <script src="lib/ace/mode-rpgcard.js" type="text/javascript" charset="utf-8"></script>
     <!-- Javascript -->
     <script type="text/javascript" src="js/card.js"></script>
     <script type="text/javascript" defer src="js/ui.js"></script>
             </div>
         </div>
         <div class="row">
-            <div class="col-md-12 col-lg-3">
+            <div class="col-md-12 col-lg-3" id="menu-column">
                 <!--<h3>Menu</h3>-->
                 <form style="display:none" id="file-load-form">
                     <input type="file" id="file-load" name="files[]" multiple class="form-control" style="display:none" />
                     </div>
                 </form>
             </div>
-            <div class="col-md-12 col-lg-5">
+            <div class="col-md-12 col-lg-5" id="card-column">
                 <!--<h3>Card</h3>-->
                 <form class="form-horizontal" role="form">
                     <div class="form-group">
                     <div class="form-group">
                         <label for="card-contents" class="col-sm-2 control-label">Contents</label>
                         <div class="col-sm-10">
-                            <textarea class="form-control" rows="14" id="card-contents" wrap="off"></textarea>
+                            <!--<textarea class="form-control" rows="14" id="card-contents" wrap="soft"></textarea>-->
+                            <div class="form-control" id="card-contents"></div>
                         </div>
                     </div>
                 </form>
             </div>
-            <div class="col-md-12 col-lg-4">
+            <div class="col-md-12 col-lg-4" id="preview-column">
                 <!--<h3>Preview</h3>-->
                 <div id="preview-container" class="preview-container">
                 </div>
             </div>
         </div>
     </div>
+
 </body>
 </html>

generator/js/ui.ts

 /// <reference path="./icons.ts" />
 /// <reference path="./example_data.ts" />
 /// <reference path="./jquery.d.ts" />
+/// <reference path="./ace.d.ts" />
 
 module RpgCardsUI {
 
     var options: RpgCards.Options = null;
     var cardGenerator: RpgCards.CardHtmlGenerator = null;
     var pageGenerator: RpgCards.PageHtmlGenerator = null;
+    var editor: AceAjax.Editor;
 
     // ============================================================================
     // Seleted card
             $("#card-count").val(""+card.count);
             $("#card-icon").val(card.icon);
             $("#card-icon-back").val(card.icon_back);
-            $("#card-contents").val(card.contents.join("\n"));
+            //$("#card-contents").val(card.contents.join("\n"));
+            editor.setValue(card.contents.join("\n"), -1);
             $("#card-tags").val(card.tags.join(", "));
             $("#card-color").val(card.color).change();
         } else {
             $("#card-count").val("1");
             $("#card-icon").val("");
             $("#card-icon-back").val("");
-            $("#card-contents").val("");
+            //$("#card-contents").val("");
+            editor.setValue("");
             $("#card-tags").val("");
             $("#card-color").val("").change();
         }
     }
 
     function on_change_card_contents() {
-        var value = $(this).val();
+        // var value = $(this).val();
+        var value = editor.getValue();
 
         var card = selected_card();
         if (card) {
         // Use a delay to give the new window time to set up a message listener
         setTimeout(function () { tab.postMessage(card_html, '*') }, 500);
     }
-    
+
+    export function collapse_menu() {
+        $("#menu-column").hide();
+        $("#card-column").removeClass("col-lg-5");
+        $("#card-column").addClass("col-lg-8");
+    }
+
+    export function uncollapse_menu() {
+        $("#menu-column").show();
+        $("#card-column").removeClass("col-lg-8");
+        $("#card-column").addClass("col-lg-5");
+    }
+
     // ============================================================================
     // Initialization
     // ============================================================================
         cardGenerator = new RpgCards.CardHtmlGenerator;
         pageGenerator = new RpgCards.PageHtmlGenerator;
 
+        editor = ace.edit("card-contents");
+        editor.setShowInvisibles(true);
+        editor.renderer.setShowGutter(false);
+        (<any>editor).setOption("wrap", "free");
+        editor.setTheme("ace/theme/chrome");
+        editor.getSession().setMode("ace/mode/rpgcard");
+
         setup_color_selector();
         (<any>$('.icon-list')).typeahead({ source: icon_names });
 
         $("#card-count").change(on_change_card_property);
         $("#card-icon-back").change(on_change_card_property);
         $("#card-color").change(on_change_card_color);
-        $("#card-contents").change(on_change_card_contents);
+        editor.getSession().on('change', on_change_card_contents);
+        //$("#card-contents").change(on_change_card_contents);
         $("#card-tags").change(on_change_card_tags);
 
         // Global options

generator/lib/ace/mode-rpgcard.js

+ace.define("ace/mode/rpgcard_highlight_rules", ["require", "exports", "module", "ace/lib/oop", "ace/mode/text_highlight_rules"], function (require, exports, module) {
+    "use strict";
+
+    var oop = require("../lib/oop");
+    var TextHighlightRules = require("./text_highlight_rules").TextHighlightRules;
+
+    var RpgCardHighlightRules = function () {
+
+        var keywords = (
+            "subtitle|rule|ruler|text|property|description|dndstats|fill|section|bullet|boxes"
+        );
+
+        var builtinConstants = (
+            "null"
+        );
+
+        var builtinFunctions = (
+            ""
+        );
+
+        var keywordMapper = this.createKeywordMapper({
+            "support.function": builtinFunctions,
+            "keyword": keywords,
+            "constant.language": builtinConstants
+        }, "identifier", true);
+
+        this.$rules = {
+            "start": [{
+                token: keywordMapper,
+                regex: "[a-zA-Z_$][a-zA-Z0-9_$]*\\b"
+            }, {
+                token: "keyword.operator",
+                regex: "\\|"
+            }, {
+                token: "paren.lparen",
+                regex: "[\\(]"
+            }, {
+                token: "paren.rparen",
+                regex: "[\\)]"
+            }, {
+                token: "text",
+                regex: "\\s+"
+            }]
+        };
+        this.normalizeRules();
+    };
+
+    oop.inherits(RpgCardHighlightRules, TextHighlightRules);
+
+    exports.RpgCardHighlightRules = RpgCardHighlightRules;
+});
+
+ace.define("ace/mode/rpgcard", ["require", "exports", "module", "ace/lib/oop", "ace/mode/text", "ace/mode/rpgcard_highlight_rules", "ace/range"], function (require, exports, module) {
+    "use strict";
+
+    var oop = require("../lib/oop");
+    var TextMode = require("./text").Mode;
+    var RpgCardHighlightRules = require("./rpgcard_highlight_rules").RpgCardHighlightRules;
+    var Range = require("../range").Range;
+
+    var Mode = function () {
+        this.HighlightRules = RpgCardHighlightRules;
+    };
+    oop.inherits(Mode, TextMode);
+
+    (function () {
+
+        this.lineCommentStart = "--";
+
+        this.$id = "ace/mode/rpgcard";
+    }).call(Mode.prototype);
+
+    exports.Mode = Mode;
+
+});