a simple markdown editor

app/helpers/merged/view_helper.rb

@@ -13,6 +13,7 @@ module Merged
       text = text.text unless text.is_a?(String)
       return 5 if text.blank?
       rows = (text.length / 50).to_i
+      rows += text.count("\n")
       return 5 if rows < 5
       rows
     end

app/views/merged/form/_editor.haml

@@ -0,0 +1,33 @@
+%script{:src => "https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"}
+%script{:src => "https://cdn.jsdelivr.net/npm/marked/marked.min.js"}
+.editor.mt-4
+  You can use
+  =link_to "markdown" , "https://www.markdown-cheatsheet.com/" , class: :underline, target: :blank
+  for styling, use Preview tab to view rendered output. Remember to save!
+  %ul.flex.text-center.mt-4.font-bold
+    %li.p-2.flex-1.border-t.border-l.border-r.rounded-lg.border-gray-200{"v-bind:class" => "{'bg-gray-50 border-b font-normal': tab == 2}"}
+      %a.text-sm{"@click" => "tab = 1"}
+        Write text
+    %li.p-2.flex-1.border-t.border-l.border-r.rounded-lg.border-gray-200{"v-bind:class" => "{'bg-gray-50 border-b font-normal': tab == 1}"}
+      %a.p-4.text-sm{"@click" => "tab = 2"}
+        Preview
+
+  .my-3{"v-bind:class" => "{hidden: tab == 2}"}
+    %textarea.w-full{ rows: rows(object.send(field)) ,
+              name: "#{object.class.name.downcase}[#{field}]",
+              id: "#{object.class.name.downcase}_#{field}" ,
+               "v-model": "markdown" }
+
+  .my-3.prose{"v-html" => "compiledMarkdown" , "v-bind:class" => "{hidden: tab == 1}"}
+
+:ruby2js
+  class MarkdownEditor < Vue
+    options el: '.editor'
+    def initialize
+      @tab = 1
+      @markdown = "#{object.send(field).to_s.html_safe}"
+    end
+    def compiledMarkdown
+      marked.parse(@markdown)
+    end
+  end