Merge pull request #11 from PopulateTools/9-markdown-editor

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,29 @@
+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
+
+      $(this).find('.fullscreen-toggle').on 'click', ->
+        $('.markdown-editor').toggleClass('fullscreen')
+
+        if $('.markdown-editor').hasClass('fullscreen')
+          $('.markdown-editor textarea').height($(window).height() - 100)
+        else
+          $('.markdown-editor textarea').height("10em")
+

app/assets/stylesheets/admin.scss

@@ -394,3 +394,34 @@ table.investment-projects-summary {
     white-space: nowrap;
   }
 }
+
+
+// Markdown Editor
+// ---------------
+
+.markdown-editor {
+  background-color: white;
+}
+
+.markdown-editor #markdown-preview {
+  overflow-y: auto;
+  height: 15em;
+}
+
+.markdown-editor textarea {
+  height: 15em;
+}
+
+.markdown-editor.fullscreen {
+  z-index: 9999;
+  width: 100%;
+  height: 100%;
+  position: fixed;
+  top: 0;
+  left: 0;
+}
+
+.markdown-editor.fullscreen #markdown-preview {
+  height: 99%;
+}
+

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

@@ -59,8 +59,16 @@
     <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 column">
+        <span class="icon-arrows-expand"></span><%= link_to t("admin.legislation.draft_versions.form.fullscreen_toggle"), "#", class: 'fullscreen-toggle' %>
+      </div>
+      <div class="small-12 medium-6 column">
+        <%= f.text_area :body, label: false %>
+      </div>
+      <div id="markdown-preview" class="small-12 medium-6 column">
+      </div>
     </div>
   </div>
 

config/locales/admin.en.yml

@@ -115,6 +115,8 @@ en:
         errors:
           form:
             error: Error
+        form:
+          fullscreen_toggle: Toggle full screen
         index:
           title: Draft versions
           create: Create version

config/locales/admin.es.yml

@@ -113,6 +113,8 @@ es:
         errors:
           form:
             error: Error
+        form:
+          fullscreen_toggle: Pantalla completa
         index:
           title: Versiones del borrador
           create: Crear versión