fix markdown preview

assets/src/css/main.css

@@ -337,6 +337,12 @@ fieldset input {
   font-size: 1em;
 }
 
+#editor-preview {
+  padding: 4% 13%;
+  display: block;
+  background-color: rgb(255, 255, 255);
+}
+
 .ace_editor {
   margin: 0;
   border-bottom-left-radius: .5em;

assets/src/js/app.js

@@ -28,9 +28,9 @@ $(document).on('ready pjax:success', function() {
   //TODO: navbar titles changing effect when changing page
 
   // Auto Grow Textarea
-  function autoGrow(element) {
+  function autoGrow() {
-    this.style.height = "5px";
+    this.style.height = '5px';
-    this.style.height = (this.scrollHeight) + "px";
+    this.style.height = this.scrollHeight + 'px';
   }
 
   $("textarea").each(autoGrow);

assets/src/js/editor.js

@@ -1,8 +1,8 @@
 $(document).on('page:editor', function() {
-  var mode = $("#source-area").data('mode');
+  var mode = $("#editor-source").data('mode');
-  var editor = ace.edit("source-area");
+  var aceEditor = ace.edit("editor-source");
-  editor.getSession().setMode("ace/mode/" + mode);
+  aceEditor.getSession().setMode("ace/mode/" + mode);
-  editor.setOptions({
+  aceEditor.setOptions({
     wrap: true,
     maxLines: Infinity,
     theme: "ace/theme/github",
@@ -10,11 +10,7 @@ $(document).on('page:editor', function() {
     fontSize: "1em"
   });
 
-
+  $('body').off('keypress', 'input').on('keypress', 'input', function(event) {
-  preview = $("#preview-area");
-  textarea = $("#content-area");
-
-  $('body').on('keypress', 'input', function(event) {
     if (event.keyCode == 13) {
       event.preventDefault();
       $('input[value="Save"]').focus().click();
@@ -22,6 +18,50 @@ $(document).on('page:editor', function() {
     }
   });
 
+  $('#site-title').keyup(function() {
+    $('.frontmatter #title').val($(this).val());
+  });
+
+  // Toggles between preview and editing mode
+  $("#see-preview").off('click').click(function(event) {
+    var preview = $('#editor-preview');
+    var editor = $('pre.ace_editor');
+
+    event.preventDefault();
+
+    // If it currently in the preview mode, hide the preview
+    // and show the editor
+    if ($(this).data("previewing") == "true") {
+      preview.hide();
+      editor.fadeIn();
+      $(this).data("previewing", "false");
+      notification({
+        text: "Think, relax and do the better you can!",
+        type: 'information',
+        timeout: 2000
+      });
+    } else {
+      // If it's in editing mode, convert the markdown to html
+      // and show it
+      var converter = new showdown.Converter(),
+        text = aceEditor.getValue(),
+        html = converter.makeHtml(text);
+
+      // Hide the editor and show the preview
+      editor.hide();
+      preview.html(html).fadeIn();
+
+      $(this).data("previewing", "true");
+      notification({
+        text: "This is how your post looks like.",
+        type: 'information',
+        timeout: 2000
+      });
+    }
+
+    return false;
+  });
+
   //TODO: reform this
   // Submites any form in the page in JSON format
   $('form').submit(function(event) {
@@ -188,64 +228,6 @@ $(document).on('page:editor', function() {
     return false;
   });
 
-  // If it has a textarea
-  if (textarea[0]) {
-    options = {
-      mode: textarea.data("mode"),
-      theme: 'ttcn',
-      lineWrapping: true,
-      lineNumbers: true,
-      scrollbarStyle: null
-    }
-
-    if (textarea.data("mode") == "markdown") {
-      options.lineNumbers = false
-    }
-
-    editor = CodeMirror.fromTextArea(textarea[0], options);
-    codemirror = $('.CodeMirror');
-
-    // Toggles between preview and editing mode
-    $("#preview").click(function(event) {
-      event.preventDefault();
-
-      // If it currently in the preview mode, hide the preview
-      // and show the editor
-      if ($(this).data("previewing") == "true") {
-        preview.hide();
-        codemirror.fadeIn();
-        $(this).data("previewing", "false");
-        notification({
-          text: "Think, relax and do the better you can!",
-          type: 'information',
-          timeout: 2000
-        });
-      } else {
-        // Copy the editor content to texteare
-        editor.save()
-
-        // If it's in editing mode, convert the markdown to html
-        // and show it
-        var converter = new showdown.Converter(),
-          text = textarea.val(),
-          html = converter.makeHtml(text);
-
-        // Hide the editor and show the preview
-        codemirror.hide();
-        preview.html(html).fadeIn();
-
-        $(this).data("previewing", "true");
-        notification({
-          text: "This is how your post looks like.",
-          type: 'information',
-          timeout: 2000
-        });
-      }
-
-      return false;
-    });
-  }
-
   $("body").on('click', '.delete', function(event) {
     event.preventDefault();
     button = $(this);

templates/editor.tmpl

@@ -19,7 +19,7 @@
       </div>
       {{ else if eq .Class "content-only" }}
       <div class="content">
-        <textarea id="source-area" name="content" data-mode="{{ .Mode }}">{{ .Content }}</textarea>
+        <textarea id="editor-source" name="content" data-mode="{{ .Mode }}">{{ .Content }}</textarea>
       </div>
       {{ else }}
       <div class="frontmatter">
@@ -39,8 +39,8 @@
           <a id="see-preview"><i class="fa fa-eye"></i> Preview</a>
         </nav>
         {{ end}}
-        <textarea id="source-area" name="content" data-mode="{{ .Mode }}">{{ .Content }}</textarea>
+        <textarea id="editor-source" name="content" data-mode="{{ .Mode }}">{{ .Content }}</textarea>
-        <div id="preview-area"></div>
+        <div id="editor-preview"></div>
       </div>
       {{ end }}