Markdown editor for DraftVersion body

Gemfile

@@ -65,6 +65,8 @@ gem 'browser'
 gem 'turnout', '~> 2.4.0'
 gem 'redcarpet'
 
+gem 'rails-assets-markdown-it', source: 'https://rails-assets.org'
+
 group :development, :test do
   # Call 'byebug' anywhere in the code to stop execution and get a debugger console
   gem 'byebug'

Gemfile.lock

@@ -1,5 +1,6 @@
 GEM
   remote: https://rubygems.org/
+  remote: https://rails-assets.org/
   specs:
     actionmailer (4.2.7.1)
       actionpack (= 4.2.7.1)
@@ -303,6 +304,7 @@ GEM
       bundler (>= 1.3.0, < 2.0)
       railties (= 4.2.7.1)
       sprockets-rails
+    rails-assets-markdown-it (8.2.1)
     rails-deprecated_sanitizer (1.0.3)
       activesupport (>= 4.2.0.alpha)
     rails-dom-testing (1.0.7)
@@ -504,6 +506,7 @@ DEPENDENCIES
   poltergeist
   quiet_assets
   rails (= 4.2.7.1)
+  rails-assets-markdown-it!
   redcarpet
   responders (~> 2.3.0)
   rinku (~> 2.0.2)

app/assets/javascripts/application.js

@@ -46,6 +46,8 @@
 //= require embed_video
 //= require banners
 //= require social_share
+//= require markdown-it
+//= require markdown_editor
 //= require custom
 
 var initialize_modules = function() {
@@ -68,6 +70,7 @@ var initialize_modules = function() {
   App.EmbedVideo.initialize();
   App.Banners.initialize();
   App.SocialShare.initialize();
+  App.MarkdownEditor.initialize();
 };
 
 $(function(){

app/assets/javascripts/markdown_editor.js.coffee

@@ -0,0 +1,20 @@
+App.MarkdownEditor =
+
+  refresh_preview: (element, md) ->
+    textarea_content = element.find('textarea').val()
+    result = md.render(textarea_content)
+    element.find('#markdown-preview').html(result)
+
+  initialize: ->
+    $('.markdown-editor').each ->
+      md = window.markdownit({
+        html: true,
+        breaks: true,
+        typographer: true,
+      })
+      App.MarkdownEditor.refresh_preview($(this), md)
+      $(this).on 'change input paste keyup', ->
+        App.MarkdownEditor.refresh_preview($(this), md)
+        return
+
+

app/views/admin/legislation/draft_versions/_form.html.erb

@@ -59,8 +59,13 @@
     <div class="small-12 medium-4 column">
       <%= f.label :body %>
     </div>
-    <div class="small-12 medium-8 column">
-      <%= f.text_area :body, label: false, rows: 15 %>
+    <br/>
+    <div class="markdown-editor">
+      <div class="small-12 medium-6 column">
+        <%= f.text_area :body, label: false, rows: 25 %>
+      </div>
+      <div id="markdown-preview" class="small-12 medium-6 column">
+      </div>
     </div>
   </div>