docbrown/app/views/comments/_form.html.erb

<div id="response-templates-data" class="hidden"></div>
<%= javascript_include_tag "validateFileInputs", defer: true %>

<% if @comment.errors.any? %>
  <div class="crayons-notice crayons-notice--danger" role="alert">
    <h2><%= t("views.comments.write.errors", count: @comment.errors.count) %></h2>
    <ul>
      <% @comment.errors.full_messages.each do |message| %>
        <li><%= message %></li>
      <% end %>
    </ul>
  </div>
<% end %>

<%= form_for(@comment, authenticity_token: false, html: { class: "comment-form print-hidden" }) do |f| %>
  <% if @article&.comment_template.present? && @comment.new_record? %>
    <div class="article-comment-form-preamble">
      <%= t("views.comments.write.template.article") %>
    </div>
  <% end %>

  <%# this is used by JS and it will be replaced with the CSRF token received from the server %>
  <input type="hidden" name="authenticity_token" value="NOTHING" id="new_comment_authenticity_token">

  <% unless @comment.persisted? %>
    <%= f.hidden_field :commentable_id, value: commentable&.id %>
    <%= f.hidden_field :commentable_type, value: commentable_type %>
    <%= f.hidden_field :parent_id, value: @parent_comment.id if @parent_comment %>
  <% end %>

  <span class="crayons-avatar m:crayons-avatar--l mr-2 shrink-0">
    <img src="<%= Images::Optimizer.call(Settings::General.logo_png, width: 256) %>" width="32" height="32" alt="pic" class="crayons-avatar__image overflow-hidden" id="comment-primary-user-profile--avatar" loading="lazy" />
  </span>
  <div class="comment-form__inner">
    <div class="comment-form__field" data-tracking-name="comment_form_textfield">
      <%= f.text_area :body_markdown,
                      placeholder: t("views.comments.write.field.placeholder"),
                      onfocus: "handleFocus(event)",
                      onkeyup: "handleKeyUp(event)",
                      onkeydown: "handleKeyDown(event)",
                      oninput: "handleChange(event)",
                      id: "text-area",
                      required: true,
                      class: "crayons-textfield comment-textarea crayons-textfield--ghost",
                      "aria-label": t("views.comments.write.field.aria_label") %>

    </div>

    <div class="response-templates-container crayons-card crayons-card--secondary p-4 mb-4 comment-form__templates fs-base hidden">
      <header class="mb-3">
        <button type="button" class="crayons-btn personal-template-button active" data-target-type="personal" data-form-id="new_comment"><%= t("views.comments.write.template.personal") %></button>
        <button type="button" class="crayons-btn moderator-template-button hidden" data-target-type="moderator" data-form-id="new_comment"><%= t("views.comments.write.template.moderator") %></button>
      </header>

      <div class="personal-responses-container">
        <%# filled by JS %>
      </div>
      <div class="moderator-responses-container hidden">
        <%# filled by JS %>
      </div>

      <a target="_blank" rel="noopener nofollow" href="<%= user_settings_path(tab: "response-templates") %>">
        <%= t("views.comments.write.template.create.subtitle") %>
      </a>
      <p><%= t("views.comments.write.template.create.desc") %></p>
    </div>

    <div class="comment-form__preview text-styles text-styles--secondary" id="preview-div"></div>

    <div class="comment-form__buttons mb-4">
      <button type="submit" class="crayons-btn mr-2 js-btn-enable" onclick="validateField(event)" data-tracking-name="comment_submit_button" disabled><%= t("views.comments.write.submit") %></button>
      <button type="button" class="preview-toggle crayons-btn crayons-btn--secondary comment-action-preview js-btn-enable mr-2" data-tracking-name="comment_preview_button" disabled><%= t("views.comments.write.preview") %></button>
      <a href="<%= @comment.path %>" class="dismiss-edit-comment crayons-btn crayons-btn--ghost js-btn-dismiss hidden"><%= t("views.comments.write.cancel") %></a>
    </div>
  </div>

  <div class="code-of-conduct" id="toggle-code-of-conduct-checkbox"></div>
<% end %>

<% if @comment.persisted? %>
  <script>
    var editForm = document.getElementById("edit_comment_<%= @comment&.id %>");
    if ( editForm ) {
      editForm.onsubmit = function (e) {
        e.preventDefault();
        document.getElementsByClassName("comment-form")[0].classList.add("opacity-50");
        var form = this;
        var waitingOnCSRF = setInterval(function () {
          var metaTag = document.querySelector("meta[name='csrf-token']")
          if (metaTag) {
            clearInterval(waitingOnCSRF);
            authToken = metaTag.getAttribute("content");
            document.getElementById("new_comment_authenticity_token").value = authToken;
            form.submit();
          }
        }, 1);
      }

      editForm.getElementsByClassName("js-btn-dismiss")[0].classList.remove("hidden");
      setTimeout(function(){
        editForm.getElementsByClassName('comment-textarea')[0].focus();
      }, 50);
    }
  </script>
<% end %>