added a (not perfect) markdown preview when editing a page body in the admin dashboard

Author: Domur

app/assets/javascripts/rails_admin/custom/parse_markdown.js

@@ -0,0 +1,10 @@
+$(document).on('rails_admin.dom_ready', function() {
+  if($('.markdown-input').length && $('.markdown-output').length){
+    const input = $('.markdown-input')[0]
+    const output = $('.markdown-output')[0]
+    output.innerHTML = marked.parse(input.value)
+    input.addEventListener('input', function(a,b) {
+      output.innerHTML = marked.parse(input.value)
+    })
+  }
+});

app/controllers/pages_controller.rb

@@ -2,6 +2,6 @@ class PagesController < ApplicationController
   before_action :load_game
 
   def show
-    @page = @game.pages.find_by path: params[:id]
+    @page = @game.pages.find_by path: params[:id].downcase
   end
 end

app/models/page.rb

@@ -1,5 +1,14 @@
 class Page < ApplicationRecord
   belongs_to :game
 
-  validates :path, presence: true, uniqueness: { scope: :game_id }, :format => { with: /\A[a-zA-Z\-]*\z/ , :message => 'path can only consist of letters and dashes' }
+  validates :path, presence: true, uniqueness: { scope: :game_id, case_sensitive: false }, :format => { with: /\A[a-zA-Z\-]*\z/ , :message => 'path can only consist of letters and dashes' }
+  before_save :downcase_path
+
+  def preview
+    self.body
+  end
+
+  def downcase_path
+    self.path.downcase!
+  end
 end

app/views/rails_admin/main/_markdown_input.html.haml

@@ -0,0 +1 @@
+%textarea{class: 'form-control markdown-input', rows: '10', cols: '64', name: 'page[body]', id: 'page_body'}=form.object.body

app/views/rails_admin/main/_markdown_output.html.haml

@@ -0,0 +1,2 @@
+%div{class: 'markdown-output', rows: 10, cols: 64, disabled: true}=form.object.body
+= javascript_include_tag "https://cdn.jsdelivr.net/npm/marked/marked.min.js"

config/initializers/rails_admin.rb

@@ -597,7 +597,12 @@
   config.model 'Page' do
     edit do
       field :title
-      field :body
+      field :body do
+        partial "markdown_input"
+      end
+      field :preview do
+        partial "markdown_output"
+      end
       field :path do
         label 'mitrestemctf.org/game/pages/'
       end