Update from master

generator/css/ui.css

 
 .form-horizontal {
     margin-top: 10px;
+}
+
+
+.dropdown-menu>li>a {
+    padding-left: 35px;
+    position: relative;
+}
+
+.dropdown-menu a > span {
+    position: absolute;
+    left: 5px;
+    background-color: #000;
+    background-repeat: no-repeat;
+    background-position: center center;
+    width: 24px;
+    height: 24px;
+    background-size: auto 90%;
+    top: 50%;
+    margin-top: -12px;
 }

generator/generate.html

                     <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"></textarea>
                         </div>
                     </div>
                 </form>

generator/js/cards.js

     return result;
 }
 
+function card_element_center(params, card_data, options) {
+    var result = "";
+    result += '<div class="card-element card-description-line" style="text-align: center">';
+    result += '   <p class="card-p card-description-text">' + params[0] + '</p>';
+    result += '</div>';
+    return result;
+}
+
+function card_element_justify(params, card_data, options) {
+    var result = "";
+    result += '<div class="card-element card-description-line" style="text-align: justify; hyphens: auto">';
+    result += '   <p class="card-p card-description-text">' + params[0] + '</p>';
+    result += '</div>';
+    return result;
+}
+
 function card_element_dndstats(params, card_data, options) {
     var stats = [10, 10, 10, 10, 10, 10];
     var mods = [0,0,0,0,0,0];
     description: card_element_description,
     dndstats: card_element_dndstats,
     text: card_element_text,
+    center: card_element_center,
+    justify: card_element_justify,
     bullet: card_element_bullet,
     fill: card_element_fill,
     section: card_element_section,

generator/js/ui.js

         $("#card-color").val("").change();
     }
 
-    local_store_save();
     ui_render_selected_card();
 }
 
         var back = card_generate_back(card, card_options);
         $('#preview-container').html(front + "\n" + back);
     }
+    local_store_save()
 }
 
 function ui_open_help() {
     }
 }
 
+function ui_change_card_contents_keyup () {
+    clearTimeout(ui_change_card_contents_keyup.timeout)
+    ui_change_card_contents_keyup.timeout = setTimeout(function () {
+        $('#card-contents').trigger('change')
+    }, 200)
+}
+ui_change_card_contents_keyup.timeout = null
+
 function ui_change_card_tags() {
     var value = $(this).val();
 
 $(document).ready(function () {
     local_store_load();
     ui_setup_color_selector();
-    $('.icon-list').typeahead({source:icon_names});
+    $('.icon-list').typeahead({
+        source:icon_names,
+        items: 'all',
+        render: function (items) {
+          var that = this;
+
+          items = $(items).map(function (i, item) {
+            i = $(that.options.item).data('value', item);
+            i.find('a').html(that.highlighter(item));
+            var classname = 'icon-' + item.split(' ').join('-').toLowerCase()
+            i.find('a').append('<span class="' + classname + '"></span>')
+            return i[0];
+          });
+
+          if (this.autoSelect) {
+            items.first().addClass('active');
+          }
+          this.$menu.html(items);
+          return this;
+        }
+    });
 
     $("#button-generate").click(ui_generate);
     $("#button-load").click(function () { $("#file-load").click(); });
     $("#card-contents").change(ui_change_card_contents);
     $("#card-tags").change(ui_change_card_tags);
 
+    $("#card-contents").keyup(ui_change_card_contents_keyup);
+
+
     $("#page-size").change(ui_change_option);
     $("#page-rows").change(ui_change_option);
     $("#page-columns").change(ui_change_option);