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

<div id="response-templates-data"></div>
<%= javascript_packs_with_chunks_tag "validateFileInputs", "responseTemplates", defer: true %>

<% if @comment.errors.any? %>
  <div class="crayons-notice crayons-notice--danger">
    <h2><%= pluralize(@comment.errors.count, "error") %> prohibited this comment from being saved:</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" }) do |f| %>
  <% if @article&.comment_template.present? && @comment.new_record? %>
    <div class="article-comment-form-preamble">
      This post comes with a comment template
    </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 crayons-avatar--l mr-2 shrink-0">
    <img src="<%= SiteConfig.logo_png %>" width="32" height="32" alt="pic" class="crayons-avatar__image" id="comment-primary-user-profile--avatar">
  </span>
  <div class="comment-form__inner">
    <div class="comment-form__field">
      <%= f.text_area :body_markdown,
                      placeholder: "Add to the discussion",
                      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': "Add a comment to the discussion" %>
      <div class="comment-form__toolbar">
        <div class="editor-image-upload">
          <input type="file" id="image-upload-main" name="file" accept="image/*" style="display:none">
          <button type="button" class="crayons-btn crayons-btn--s crayons-btn--icon-left crayons-btn--ghost-dimmed" onclick="handleImageUpload(event,'main')">
            <%= inline_svg_tag("image.svg", aria: true, class: "crayons-icon", title: "Image") %>
            <span class="hidden s:inline-block">Upload image</span>
          </button>
          <label class="image-upload-file-label" id="image-upload-file-label-main"></label>
          <input type="submit" id='image-upload-submit-main' value="Upload" style="display:none">
          <input class="hidden" id="uploaded-image-main" />
        </div>

        <button type="button" class="crayons-btn crayons-btn--s crayons-btn--icon-left crayons-btn--ghost-dimmed response-templates-button" title="Use a response template" data-has-listener="false" data-form-id="new_comment">
          <%= inline_svg_tag("templates.svg", aria: true, class: "crayons-icon", title: "Templates") %>
          <span class="hidden s:inline-block">Templates</span>
        </button>

        <a href="/p/editor_guide" class="crayons-btn crayons-btn--ghost-dimmed crayons-btn--icon crayons-btn--s ml-auto" target="_blank" rel="noopener" title="Markdown Guide">
          <%= inline_svg_tag("info.svg", aria: true, class: "crayons-icon", title: "Editor guide") %>
        </a>
      </div>
    </div>

    <div class="response-templates-container crayons-card crayons-card--secondary p-4 mb-4 comment-form__templates fs-base hidden">
      <header>
        <button type="button" class="personal-template-button active" data-target-type="personal" data-form-id="new_comment">Personal</button>
        <button type="button" class="moderator-template-button hidden" data-target-type="moderator" data-form-id="new_comment">Moderator</button>
      </header>

      <img class="loading-img hidden" src="<%= asset_path("loading-ellipsis.svg") %>" alt="loading">

      <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") %>">
        Create template
      </a>
      <p>Templates let you quickly answer FAQs or store snippets for re-use.</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)" disabled>Submit</button>
      <button type="button" class="preview-toggle crayons-btn crayons-btn--secondary comment-action-preview js-btn-enable mr-2" disabled>Preview</button>
      <a href="<%= @comment.path %>" class="crayons-btn crayons-btn--ghost js-btn-dismiss hidden">Dismiss</a>
    </div>
  </div>

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

<% if @comment.persisted? %>
  <script defer>
    var editForm = document.getElementById("edit_comment_<%= @comment&.id %>")
    if ( editForm ) {
      editForm.onsubmit = function (e) {
        e.preventDefault();
        document.querySelector(".comment-form").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.querySelector(".js-btn-dismiss").classList.remove("hidden");
      setTimeout(function(){
        editForm.querySelector('.comment-textarea').focus();
      }, 50);
    }
  </script>
<% end %>