fix: simplemde initialization for forum thread form

Author: Waishnav

app/assets/javascripts/simple_discussion/application.js

@@ -119,5 +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/assets/javascripts/simple_discussion/controllers/application.js

@@ -19,7 +19,6 @@
             <%= icon("fas","ellipsis-v") %>
           </button>
           <div class="dropdown-menu dropdown-menu-right" data-dropdown-target="dropdownMenu">
-            <%= link_to t('report_spam'), "#", class: "dropdown-item", data: { controller: "report-spam", report_spam_target: "reportSpamButton", toggle: "modal", target: "#reportSpamModal", post_id: forum_post.id } %>
             <% if is_moderator_or_owner?(forum_post) %>
               <%= link_to t('edit_post'), simple_discussion.edit_forum_thread_forum_post_path(@forum_thread, forum_post),
                   class: "dropdown-item",

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

@@ -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/assets/javascripts/simple_discussion/controllers/index.js

@@ -6,24 +6,5 @@ class Engine < ::Rails::Engine
     config.after_initialize do
       SimpleDiscussion::Engine.routes.default_url_options = ActionMailer::Base.default_url_options
     end
-
-    # javascripts assets precompiled for dropdown and markdown text editor
-    @@javascripts = []
-
-    initializer "simple_discussion.assets.precompile" do |app|
-      app.config.assets.precompile += [
-        "simple_discussion/application.js",
-      ]
-    end
-
-    def self.add_javascript(script)
-      @@javascripts << script
-    end
-
-    def self.javascripts
-      @@javascripts
-    end
-
-    add_javascript "simple_discussion/application.js"
   end
 end