fix: simplemde initialization for forum thread form

CircuitVerse · Jul 28, 2024 · e042dc4 · e042dc4
1 parent 2f669a9
commit e042dc4
Show file tree

Hide file tree

Showing 9 changed files with 41 additions and 101 deletions.
diff --git a/app/assets/javascripts/simple_discussion/application.js b/app/assets/javascripts/simple_discussion/application.js
diff --git a/app/assets/javascripts/simple_discussion/controllers/application.js b/app/assets/javascripts/simple_discussion/controllers/application.js
diff --git a/app/assets/javascripts/simple_discussion/controllers/dropdown_controller.js b/app/assets/javascripts/simple_discussion/controllers/dropdown_controller.js
diff --git a/app/assets/javascripts/simple_discussion/controllers/index.js b/app/assets/javascripts/simple_discussion/controllers/index.js
diff --git a/app/assets/javascripts/simple_discussion/controllers/report_spam_controller.js b/app/assets/javascripts/simple_discussion/controllers/report_spam_controller.js
diff --git a/app/assets/javascripts/simple_discussion/controllers/simplemde_controller.js b/app/assets/javascripts/simple_discussion/controllers/simplemde_controller.js
diff --git a/app/views/layouts/simple_discussion.html.erb b/app/views/layouts/simple_discussion.html.erb
@@ -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>
 
diff --git a/app/views/simple_discussion/forum_posts/_forum_post.html.erb b/app/views/simple_discussion/forum_posts/_forum_post.html.erb
@@ -10,7 +10,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",

diff --git a/app/views/simple_discussion/forum_threads/_form.html.erb b/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 %>