feat(gsoc'24): minimal markdown editor using simplemde

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()
@@ -99,7 +102,6 @@
     }
   })
 
-
   Stimulus.register("report-post", class extends Controller {
     static targets = ["reportPostButton"]
 
@@ -117,4 +119,44 @@
       })
     }
   })
+
+  Stimulus.register("simplemde", 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,
+      });
+    }
+  })
 </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 %>

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

@@ -1,6 +1,6 @@
 <%= form_for @forum_thread,
    url: (@forum_thread.persisted? ? simple_discussion.forum_thread_path(@forum_thread) : simple_discussion.forum_threads_path),
-   html: { data: {behavior: "comment-form"} } do |f| %>
+   html: { data: { behavior: "comment-form", controller: "simplemde" } } do |f| %>
 
   <% if @forum_thread.errors.any? %>
     <div class="alert alert-danger" role="alert">
@@ -24,7 +24,7 @@
     <%= f.fields_for :forum_posts do |p| %>
       <div class="form-group">
         <%= p.label :body, t('what_help_needed') %>
-        <%= p.text_area :body, placeholder: t('add_a_comment'), rows: 10, class: "form-control simplemde", data: { behavior: "comment-body" } %>
+        <%= p.text_area :body, placeholder: t('add_a_comment'), rows: 10, class: "form-control simplemde", data: { behavior: "comment-body", simplemde_target: "textarea" } %>
       </div>
     <% end %>
   <% end %>

app/views/simple_discussion/forum_threads/show.html.erb

@@ -27,6 +27,7 @@
   </div>
 </div>
 
+
 <div class="d-flex mb-4">
   <div class="thread-details-custom">
     <%= t("created_by") %> <%= @forum_thread.user.name %> • <%= time_ago_in_words(@forum_thread.created_at) %> <%= t("ago") %>