From 6e5a87123841d958098964b4144d1d8ea427c351 Mon Sep 17 00:00:00 2001
From: Torsten <torsten@rubydesign.fi>
Date: Sun, 22 Jan 2023 15:20:38 +0200
Subject: [PATCH] a simple markdown editor

---
 app/helpers/merged/view_helper.rb  |  1 +
 app/views/merged/form/_editor.haml | 33 ++++++++++++++++++++++++++++++
 2 files changed, 34 insertions(+)
 create mode 100644 app/views/merged/form/_editor.haml

diff --git a/app/helpers/merged/view_helper.rb b/app/helpers/merged/view_helper.rb
index 863a0a8..943708d 100644
--- a/app/helpers/merged/view_helper.rb
+++ b/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
diff --git a/app/views/merged/form/_editor.haml b/app/views/merged/form/_editor.haml
new file mode 100644
index 0000000..2ba2a86
--- /dev/null
+++ b/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