Add ace editor

pinaxcon/templates/_scripts.html

@@ -1 +1 @@
-<script src='/site_media/static/js/site.js?45281e7e2f5ad8c9f8a5'></script>
+<script src='/site_media/static/js/site.js?7324c997497bcdad9dd0'></script>

pinaxcon/templates/_styles.html

@@ -1 +1 @@
-<link href='/site_media/static/css/site.css?45281e7e2f5ad8c9f8a5' rel='stylesheet' />
+<link href='/site_media/static/css/site.css?7324c997497bcdad9dd0' rel='stylesheet' />

pinaxcon/templates/pinax/boxes/_box_body.html

@@ -9,7 +9,7 @@
                         <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                         <h4 class="modal-title">{% trans "Editing content:" %} {{ label }}</h4>
                     </div>
-                    <div class="modal-body">
+                    <div class="modal-body form-group">
                         {% csrf_token %}
                         {{ form.content }}
                     </div>

pinaxcon/templates/site_base.html

@@ -46,6 +46,7 @@
 
 {% block scripts %}
     {% include "_scripts.html" %}
+    <script src="//cdnjs.cloudflare.com/ajax/libs/ace/1.2.0/ace.js"></script>
 {% endblock %}
 
 {% block extra_body_base %}

static/src/js/main.js

@@ -3,3 +3,36 @@ window.jQuery = window.$ = require("jquery");
 require("bootstrap");
 
 require("../less/site.less");
+
+var loadEditors = function () {
+    var $editors = $(".modal-body textarea, #id_body, #id_comment, #id_message, #id_text, #id_abstract, #id_additional_notes, #id_content_override, #id_description, #id_biography");
+    $editors.each(function (i, el) {
+      var editorId = "markdown-editor-" + i,
+          reportDiv = $("<div>").attr("id", editorId),
+          setupEditor = function (editor, textarea) {
+              var session = editor.getSession();
+              editor.setTheme("ace/theme/tomorrow");
+              editor.$blockScrolling = Infinity;
+              editor.setOption("scrollPastEnd", true);
+              session.setMode("ace/mode/markdown");
+              session.setValue(textarea.val());
+              session.setUseWrapMode(true);
+              session.on('change', function(){
+                textarea.val(session.getValue());
+              });
+              editor.renderer.setShowGutter(false);
+              session.setTabSize(4);
+              session.setUseSoftTabs(true);
+          },
+          $formGroup = $(el).closest(".form-group"),
+          $textarea = $formGroup.find("textarea");
+      $formGroup.append(reportDiv);
+      setupEditor(ace.edit(editorId), $textarea);
+      console.log(i, el, $formGroup, $textarea);
+    });
+};
+
+
+$(function () {
+  loadEditors();
+});

static/src/less/editor.less

@@ -0,0 +1,22 @@
+form {
+   #id_body,
+   #id_comment,
+   #id_message,
+   #id_text,
+   #id_abstract,
+   #id_additional_notes,
+   #id_content_override,
+   #id_description,
+   #id_biography,
+   .modal-body textarea {
+       display: none
+   }
+   .ace_editor {
+       min-height: 200px;
+       width: 100%;
+       border: 1px dotted #CCC;
+   }
+   .ace_content {
+       padding: 5px;
+   }
+}

static/src/less/site.less

@@ -14,6 +14,7 @@
 @import "account.less";
 
 // Symposion UI components
+@import "editor.less";
 @import "symposion-components.less";
 @import "symposion-schedule.less";