Add markdown preview; fix bug with deleted editor

app/assets/javascripts/app.js

@@ -40,6 +40,7 @@ $(function(){
       $(this).parent().attr("lang", "(language unknown)");
     }
   });
+
   updateTimestamps();
   setInterval(updateTimestamps, 1000*10);
 });

app/assets/javascripts/application.js

@@ -12,5 +12,6 @@
 //= require jquery
 //= require jquery_ujs
 //= require app
+//= require editor
 //= require ago
 //= require highlight

app/assets/javascripts/editor.js

@@ -0,0 +1,55 @@
+$(function() {
+
+  $('.md_editor .field_container .preview-button').click(function() {
+    if ($(this).data('preview') == 'true') {
+      edit($(this));
+    } else {
+      preview($(this));
+    }
+  });
+
+  function edit(target) {
+    target.data('preview', 'false');
+    target.text('Preview');
+    target.parent().find('.preview').hide();
+    target.parent().find('.editor_field').show();
+  }
+
+  function preview(target) {
+    target.data('preview', 'true');
+    target.text('Edit');
+    var prev   = target.parent().find('.preview');
+    var editor = target.parent().find('.editor_field')
+    prev.html("<i>(Loading ...)</i>");
+    prev.show();
+    editor.hide()
+    if (target.parent().parent().hasClass('mini')) {
+      var url = '/tools/render_mini_markdown';
+    } else {
+      var url = '/tools/render_markdown';
+    }
+    $.ajax(url, {
+      type: 'post',
+      data: {text: editor.val()},
+      dataType: 'html',
+      headers: {
+        'X-CSRF-Token': $('meta[name="csrf-token"]').attr('content')
+      },
+      success: function(data) {
+        prev.html(data);
+        prev.find('pre code').each(function(i, e) {
+          if ($(this).attr("class")) {
+            $(this).parent().attr("lang", $(this).attr("class").replace("hljs", "").trim());
+          } else {
+            $(this).parent().attr("lang", "(language unknown)");
+          }
+          hljs.highlightBlock(e);
+        });
+      },
+      error: function(xhr, status, err) {
+        prev.html('<i>(Error: ' + status + ')</i><br>' + err);
+      }
+    });
+  }
+
+});

app/assets/stylesheets/style.css.scss

@@ -216,7 +216,7 @@ span.no-about {
   display: block;
 }
 
-.post, .thread, .thread-reply {
+.post, .thread, .thread-reply, .preview {
   margin-bottom: 50px;
 
   .post-content, .thread-content {
@@ -224,11 +224,8 @@ span.no-about {
     clear: both;
     word-wrap: break-word;
     overflow: hidden;
+  }
 
-    img {
-      max-width: 100%;
-    }
-  }
   .post-title, .thread-title {
     margin-bottom: 10px;
     word-wrap: break-word;
@@ -297,7 +294,9 @@ pre {
 
   // code blocks
   code {
-    padding: 0;
+    display: block;
+    padding: 0.5em;
+    color: #C5C8C6; //hljs
     box-shadow: 0 0 16px #222 inset;
     background: #3f3f3f !important;
     border: none;
@@ -388,6 +387,28 @@ blockquote p {
   }
 }
 
+.md_editor {
+  .field_container {
+    position: relative;
+
+    .preview-button {
+      position: absolute;
+      top: 1em;
+      left: 1em;
+      z-index: 10;
+    }
+    .editor_field {
+      padding-top: 4em;
+      min-height: 5em;
+    }
+
+    .preview {
+      display: none;
+      padding: 4em 1em 1em;
+    }
+  }
+}
+
 #comments {
   margin: 50px 0 0 40px;
 }
@@ -457,10 +478,6 @@ textarea {
   padding: 1em;
   min-height: 3.5em;
   resize: vertical;
-
-  &.comment {
-    height: 75px;
-  }
 }
 
 tr.spacer {

app/controllers/tools_controller.rb

@@ -0,0 +1,19 @@
+class ToolsController < ApplicationController
+
+  def render_markdown
+    if current_user
+      render text: render_md(params[:text])
+    else
+      render text: "Error: You are not logged in!"
+    end
+  end
+
+  def render_mini_markdown
+    if current_user
+      render text: render_mini_md(params[:text])
+    else
+      render text: "Error: You are not logged in!"
+    end
+  end
+
+end

app/models/forumthread.rb

@@ -15,16 +15,11 @@ class Forumthread < ActiveRecord::Base
   end
 
   def author
-    @author ||= if self.user_author.present?
+    @author ||= (user_author || User.first)
-      user_author
-    else
-      User.first
-    end
   end
 
   def editor
-    # can be nil
+    @editor ||= (self.user_editor || User.first)
-    @editor ||= user_editor
   end
 
   def edited?

app/views/application/_md_editor.html.erb

@@ -0,0 +1,11 @@
+<div class="md_editor <%= "mini" if mini %>">
+  <%= render partial: 'mdhelp' %>
+  <div class="field_container">
+    <div class="preview-button btn dark">Preview</div>
+    <% options = (defined?(options) && options || {}) %>
+    <% options[:class] = "#{options[:class]} editor_field" %>
+    <% options[:placeholder] ||= "Text" %>
+    <%= text_area_tag name, content, options %>
+    <div class="preview"><i>(Loading...)</i></div>
+  </div>
+</div>

app/views/blogposts/edit.html.erb

@@ -1,8 +1,7 @@
 <h1>Edit post</h1>
 <%= form_for @post do |f|%>
   <%= f.text_field :title %>
-  <%= render partial: "mdhelp" %>
+  <%= render partial: "md_editor", locals: {name: "blogpost[content]", content: @post.content, mini: false} %>
-  <%= f.text_area :content%>
   <p><%= f.submit "Update Post", class: "btn blue left" %></p>
 <% end %>
 <p><%= button_to "Delete post", @post, method: "delete", data: {confirm: "Delete post & comments forever?"}, class: "btn red right" %></p>

app/views/blogposts/new.html.erb

@@ -1,8 +1,7 @@
 <h1>New Post</h1>
 <%= form_for @post do |f|%>
   <%= f.text_field :title, placeholder: "Title" %>
-  <%= render partial: "mdhelp" %>
+  <%= render partial: "md_editor", locals: {name: "blogpost[content]", content: @post.content, mini: false} %>
-  <%= f.text_area :content, placeholder: "Text" %>
   <p><%= f.submit "Create Post", class: "btn blue left" %></p>
   <div class="clear"></div>
 <% end %>

app/views/comments/_new.html.erb

@@ -1,8 +1,7 @@
 <% if current_user %>
   <h3>New comment</h3>
   <%= form_for [@post, @comment] do |f| %>
-    <%= render partial: "mdhelp" %>
+    <%= render partial: "md_editor", locals: {name: "comment[content]", content: @comment.content, mini: true} %>
-    <%= f.text_area :content, placeholder: "Comment", class: "comment" %>
     <p><%= f.submit class: "btn blue" %></p>
   <% end %>
 <% end %>

app/views/comments/edit.html.erb

@@ -1,8 +1,7 @@
 <h1>Edit comment</h1>
 
 <%= form_for [@comment.blogpost, @comment] do |f| %>
-  <%= render partial: "mdhelp" %>
+  <%= render partial: "md_editor", locals: {name: "comment[content]", content: @comment.content, mini: true} %>
-  <%= f.text_area :content, placeholder: "Comment" %>
   <p><%= f.submit "Update Comment", class: "btn blue left" %></p>
 <% end %>
 <p><%= button_to "Delete comment", [@comment.blogpost, @comment] , method: "delete", data: {confirm: "Delete comment forever?"}, class: "btn red right" %></p>

app/views/forumthreads/edit.html.erb

@@ -24,8 +24,7 @@
     <% end %>
   </table>
   <%= f.text_field :title, placeholder: "Title" %>
-  <%= render partial: "mdhelp" %>
+  <%= render partial: "md_editor", locals: {name: "forumthread[content]", content: @thread.content, mini: false} %>
-  <%= f.text_area :content, placeholder: "Text" %>
   <p><%= f.submit "Update thread", class: "btn blue left" %></p>
 <% end %>
 <%= button_to "Delete thread", @thread, :method => "delete", data: {confirm: "Delete thread & comments forever?"}, class: "btn red right" %>

app/views/forumthreads/new.html.erb

@@ -14,8 +14,7 @@
     <% end %>
   </table>
   <%= f.text_field :title, placeholder: "Title" %>
-  <%= render partial: "mdhelp" %>
+  <%= render partial: "md_editor", locals: {name: "forumthread[content]", content: @thread.content, mini: false} %>
-  <%= f.text_area :content, placeholder: "Text" %>
   <%= f.hidden_field :forum_id %>
   <p><%= f.submit "Create thread", class: "btn blue left" %></p>
   <div class="clear"></div>

app/views/info/edit.html.erb

@@ -1,8 +1,7 @@
 <h1>Edit Info</h1>
 <%= form_for @info do |f|%>
   <%= f.text_field :title%>
-  <%= render partial: "mdhelp" %>
+  <%= render partial: "md_editor", locals: {name: "info[content]", content: @info.content, mini: false} %>
-  <%= f.text_area :content %>
   <p><%= f.submit "Update Info", class: "btn blue left" %></p>
 <% end %>
 <p><%= button_to "Delete Info", @info, method: "delete", data: {confirm: "Delete Info forever?"}, class: "btn red right" %></p>

app/views/info/new.html.erb

@@ -1,8 +1,7 @@
 <h1>New Info</h1>
 <%= form_for @info, url: info_index_path do |f|%>
   <%= f.text_field :title, placeholder: "Title" %>
-  <%= render partial: "mdhelp" %>
+  <%= render partial: "md_editor", locals: {name: "info[content]", content: @info.content, mini: false} %>
-  <%= f.text_area :content, placeholder: "Text" %>
   <p><%= f.submit "Create Info", class: "btn blue left" %></p>
   <div class="clear"></div>
 <% end %>

app/views/threadreplies/_new.html.erb

@@ -1,4 +1,4 @@
 <%= form_for [reply.thread, reply] do |f| %>
-  <%= f.text_area :content, placeholder: "Text" %>
+  <%= render partial: "md_editor", locals: {name: "threadreply[content]", content: reply.content, mini: false} %>
   <p><%= f.submit "Reply", class: "btn blue" %></p>
 <% end %>

app/views/threadreplies/edit.html.erb

@@ -1,8 +1,7 @@
 <%= link_to @reply.thread.forum.group, forumgroup_path(@reply.thread.forum.group) %> → <%= link_to @reply.thread.forum, @reply.thread.forum %> → <%= link_to @reply.thread %> → Edit reply
 <h1>Edit reply</h1>
 <%= form_for [@reply.thread, @reply] do |f| %>
-  <%= render partial: "mdhelp" %>
+  <%= render partial: "md_editor", locals: {name: "threadreply[content]", content: @reply.content, mini: false} %>
-  <%= f.text_area :content, placeholder: "Text" %>
   <p><%= f.submit "Reply", class: "btn blue left" %></p>
 <% end %>
 <p><%= button_to "Delete reply", [@reply.thread, @reply], method: "delete", data: {confirm: "Delete reply forever?"}, class: "btn red right" %></p>

app/views/users/edit.html.erb

@@ -59,8 +59,7 @@
       <tr>
         <td>About you</td>
         <td>
-          <%= render partial: "mdhelp" %>
+          <%= render partial: "md_editor", locals: {name: "user[about]", content: @user.about, mini: true, options: {disabled: !can_edit?, placeholder: "Tell us something about you ..."}} %>
-          <%= f.text_area :about, placeholder: "Tell us something about you...", disabled: !can_edit? %>
         </td>
       </tr>
     </tbody>

config/routes.rb

@@ -27,6 +27,13 @@ Redstoner::Application.routes.draw do
     resources :threadreplies, path: 'replies'
   end
 
+  resources :tools do
+    collection do
+      post 'render_markdown'
+      post 'render_mini_markdown'
+    end
+  end
+
   # get '/status' => 'status#show'
 
   get  'login'  => 'sessions#new'