simple_discussion.html.erb

<div>
  <div class="row simple_discussion mt-2">
    <div class="col-lg-2 mb-3 border-right">
      <div class="col sidebar-sticky">
        <h2 class="community-heading"><%= t('community') %></h2>
        <%= link_to t('ask_a_question'), simple_discussion.new_forum_thread_path, class: "btn forum-primary-btn btn-block mb-4" %>

        <div class="forum-thread-filters">
          <%= forum_link_to simple_discussion.forum_threads_path, exact: true do %>
            <div class="btn-link">
                <%= icon "fa-fw fas", "bars" %>
                <%= t('.all_threads') %>
            </div>
          <% end %>

          <% if user_signed_in? %>
            <%= forum_link_to simple_discussion.mine_forum_threads_path do %>
              <div class="btn-link">
                <%= icon "fa-fw far", "user-circle" %>
                <%= t('.my_questions') %>
              </div>
            <% end %>
            <%= forum_link_to simple_discussion.participating_forum_threads_path do %>
              <div class="btn-link">
                <%= icon "fa-fw far", "comment-alt" %>
                <%= t('.participating') %>
              </div>
            <% end %>
          <% end %>

          <%= forum_link_to simple_discussion.answered_forum_threads_path do %>
            <div class="btn-link">
              <%= icon "fa-fw far", "check-circle" %>
              <%= t('.answered') %>
            </div>
          <% end %>

          <%= forum_link_to simple_discussion.unanswered_forum_threads_path do %>
            <div class="btn-link">
              <%= icon "fa-fw far", "question-circle" %>
              <%= t('.unanswered') %>
            </div>
          <% end %>
          <% if is_moderator? %>
            <%= forum_link_to simple_discussion.spam_reports_forum_threads_path do %>
              <div class="btn-link">
                <%= icon "fa-fw fa", "exclamation-triangle" %>
                <%= t('.spam_posts') %>
              </div>
            <% end %>
          <% end %>
        </div>
        <% if @forum_thread.present? && @forum_thread.persisted? %>
          <div class="mt-3">
            <%# User has not posted in the thread or subscribed %>
            <%= link_to simple_discussion.forum_thread_notifications_path(@forum_thread), method: :post, class: "btn forum-primary-outline-btn btn-block" do %>
              <% if @forum_thread.subscribed? current_user %>
                <%= icon "fa-fw fas", "bell-slash" %> <%= t('.unsubscribe') %>
              <% else %>
                <%= icon "fa-fw fas", "bell" %>
                <%= t('.suscribe') %>
              <% end %>
            <% end %>
            <p class="forum-primary-outline-text"><%= @forum_thread.subscribed_reason(current_user) %></p>
          </div>
        <% end %>
      </div>

    </div>

    <div class="col-lg-10 mb-3 thread-page-container">
      <%= yield %>
    </div>
  </div>
</div>

<% 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()

  Stimulus.register("dropdown", class extends Controller {
    static targets = ["dropdownButton", "dropdownMenu"]

    connect() {
      this.dropdownButtonTarget.addEventListener("click", this.toggleDropdown.bind(this))
      // if click somewhere else in the document, close the dropdown
      window.addEventListener("click", (event) => {
        if (!this.dropdownButtonTarget.contains(event.target)) {
          this.dropdownMenuTarget.classList.remove("show")
        }
      })
    }

    // note that we are using bootstrap
    toggleDropdown() {
      this.dropdownMenuTarget.classList.toggle("show")
    }
  })

  Stimulus.register("report-post", class extends Controller {
    static targets = ["reportPostButton"]

    connect() {
      const reportPostForm = document.getElementById("reportPostForm")
      const postId = this.element.dataset.postId
      this.reportPostButtonTarget.addEventListener("click", () => {
        const formActionArray = reportPostForm.action.split("/")
        console.log(formActionArray)
        if (formActionArray[formActionArray.length - 2] === "threads") {
          reportPostForm.action += `/posts/${postId}/report_post`
        } else {
          reportPostForm.action = reportPostForm.action.replace(/\/\d+\//, `/${postId}/`)
        }
      })
    }
  })

  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>