feat: adding markdown editor using simplemde

Author: Waishnav

app/assets/javascripts/simple_discussion/controllers/index.js

@@ -2,6 +2,8 @@ import { application } from "./application"
 
 import DropdownController from "./dropdown_controller"
 import ReportSpamController from "./report_spam_controller";
+import SimplemdeController from "./simplemde_controller";
 
 application.register("dropdown", DropdownController);
 application.register("report-spam", ReportSpamController);
+application.register("simplemde",SimplemdeController);

app/assets/javascripts/simple_discussion/controllers/simplemde_controller.js

@@ -0,0 +1,41 @@
+import { Controller } from "@hotwired/stimulus"
+//import SimpleMDE from "simplemde";
+
+export default class extends Controller {
+  static targets = ["textarea"]
+
+  connect() {
+    this.initializeEditor();
+
+    const previewButton = document.querySelector(".preview")
+    previewButton.style.width = "80px"
+    previewButton.style.height = "34px"
+  }
+
+  initializeEditor() {
+    this.editor = new SimpleMDE({
+      element: this.textareaTarget,
+      forceSync: true,
+      toolbar: [
+        "bold",
+        "italic",
+        "heading",
+        "|",
+        "quote",
+        "unordered-list",
+        "ordered-list",
+        "|",
+        "link",
+        {
+          name: "preview",
+          className: "preview no-disable",
+          action: function(editor) {
+            SimpleMDE.togglePreview(editor);
+          },
+          title: "Preview",
+        }
+      ],
+      spellChecker: false,
+    });
+  }
+}

app/assets/stylesheets/simple_discussion.scss

@@ -296,3 +296,25 @@
 .thread-page-container {
   padding: 24px;
 }
+
+.preview::before {
+  content: "Preview";
+  width: 80px;
+}
+
+p {
+  font-size: 18px;
+}
+
+blockquote {
+  border-left: 5px solid #e9ecef;
+  padding: 10px 20px;
+  margin: 10px 0;
+  font-size: 18px;
+  font-weight: 500;
+  color: #6c757d;
+}
+
+.CodeMirror-line span {
+  font-size: 18px;
+}

app/views/layouts/simple_discussion.html.erb

@@ -76,6 +76,9 @@
 
 <% parent_layout("application") %>
 
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.css">
+<script src="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.js"></script>
+
 <script type="module">
   import { Application, Controller } from "https://unpkg.com/@hotwired/stimulus/dist/stimulus.js"
   window.Stimulus = Application.start()
@@ -117,3 +120,4 @@
     }
   })
 </script>
+

app/views/simple_discussion/forum_posts/_form.html.erb

@@ -1,7 +1,7 @@
 <div class="mt-4"></div>
 <%= form_for [@forum_thread, @forum_post],
   url: (@forum_post.persisted? ? simple_discussion.forum_thread_forum_post_path(@forum_thread, @forum_post) : simple_discussion.forum_thread_forum_posts_path(@forum_thread)),
-  html: { data: { behavior: "comment-form" } } do |f| %>
+  html: { data: { behavior: "comment-form", controller: "simplemde" } } do |f| %>
 
   <% if @forum_post.errors.any? %>
     <div class="alert alert-danger" role="alert">
@@ -13,12 +13,10 @@
 
 <div class="d-block position-relative">
   <div class="form-group">
-    <%= f.text_area :body, placeholder: t('add_a_comment'), rows: 8, class: "form-control simplemde", data: { behavior: "comment-body" } %>
+    <%= f.text_area :body, placeholder: t('add_a_comment'), rows: 8, class: "form-control", data: { behavior: "comment-body", simplemde_target: "textarea"} %>
+    <%#= link_to "Parsed with Markdown", "https://guides.github.com/features/mastering-markdown/", target: "_blank" %>
   </div>
   <%= f.button "#{f.object.new_record? ? t('comment') : t('update_comment')  }", class: "btn forum-primary-btn", style: "bottom: 10px; right: 10px", data: {disable_with: "<i class='fa fa-spinner fa-spin'></i> #{t('saving_comment')}"} %>
 </div>
-
   <%# Describe text formatting options here with a link %>
-  <%#= link_to "Parsed with Markdown", "https://guides.github.com/features/mastering-markdown/", target: "_blank" %>
-
 <% end %>