Q&A Answer部分の非Vue化の不具合修正

app/controllers/questions_controller.rb

@@ -33,6 +33,7 @@ def show
                           .includes(:correct_answer)
                           .latest_update_order
                           .limit(MAX_PRACTICE_QUESTIONS_DISPLAYED)
+    @answers = @question.answers.order(created_at: :asc)
     respond_to do |format|
       format.html
       format.md

app/javascript/initializeAnswer.js

@@ -6,17 +6,27 @@ import MarkdownInitializer from 'markdown-initializer'
 export default function initializeAnswer(answer) {
   const questionId = answer.dataset.question_id
   const answerId = answer.dataset.answer_id
+  const answerDescription = answer.dataset.answer_description
   let savedAnswer = ''
   TextareaInitializer.initialize(`#js-comment-${answerId}`)
   const markdownInitializer = new MarkdownInitializer()
 
   const answerDisplay = answer.querySelector('.answer-display')
   const answerEditor = answer.querySelector('.answer-editor')
   const answerDisplayContent = answerDisplay.querySelector('.a-long-text')
-  const answerDescription = answerDisplayContent.innerHTML
+
+  const answerEditorPreview = answerEditor.querySelector(
+    '.a-markdown-input__preview'
+  )
+  const editorTextarea = answerEditor.querySelector(
+    '.a-markdown-input__textarea'
+  )
+
   if (answerDescription) {
     answerDisplayContent.innerHTML =
       markdownInitializer.render(answerDescription)
+    answerEditorPreview.innerHTML =
+      markdownInitializer.render(answerDescription)
   }
 
   const editButton = answerDisplay.querySelector('.card-main-actions__action')
@@ -40,13 +50,6 @@ export default function initializeAnswer(answer) {
     })
   }
 
-  const answerEditorPreview = answerEditor.querySelector(
-    '.a-markdown-input__preview'
-  )
-  const editorTextarea = answerEditor.querySelector(
-    '.a-markdown-input__textarea'
-  )
-
   const cancelButton = answerEditor.querySelector('.is-secondary')
   cancelButton.addEventListener('click', () => {
     toggleVisibility(modalElements, 'is-hidden')

app/javascript/new-answer.js

@@ -10,7 +10,9 @@ import store from './check-store.js'
 document.addEventListener('DOMContentLoaded', () => {
   const newAnswer = document.querySelector('.new-answer')
   if (newAnswer) {
-    TextareaInitializer.initialize('#new-comment')
+    TextareaInitializer.initialize('#js-new-comment')
+    const defaultTextareaSize =
+      document.getElementById('js-new-comment').scrollHeight
     const markdownInitializer = new MarkdownInitializer()
     const questionId = newAnswer.dataset.question_id
     let savedAnswer = ''
@@ -39,6 +41,12 @@ document.addEventListener('DOMContentLoaded', () => {
         editorTextarea.value
       )
       saveButton.disabled = true
+      updateAnswerCount(true)
+      updateWatchable(questionId)
+      if (previewTab.classList.contains('is-active')) {
+        toggleVisibility(tabElements, 'is-active')
+      }
+      resizeTextarea(editorTextarea, defaultTextareaSize)
     })
 
     const editTab = answerEditor.querySelector('.edit-answer-tab')
@@ -93,16 +101,7 @@ function createAnswer(description, questionId) {
       }
     })
     .then((html) => {
-      const answersList = document.querySelector('.answers-list')
-      const answerDiv = document.createElement('div')
-      answerDiv.innerHTML = html
-      const newAnswerElement = answerDiv.firstElementChild
-      answersList.appendChild(newAnswerElement)
-      initializeAnswer(newAnswerElement)
-      const reactionElement = newAnswerElement.querySelector('.js-reactions')
-      initializeReaction(reactionElement)
-      updateAnswerCount(true)
-      updateWatchable(questionId)
+      initializeNewAnswer(html)
       toast('回答を投稿しました！')
     })
     .catch((error) => {
@@ -122,3 +121,18 @@ function updateWatchable(questionId) {
     watchableType: 'Question'
   })
 }
+
+function resizeTextarea(textarea, defaultTextareaSize) {
+  textarea.style.height = `${defaultTextareaSize}px`
+}
+
+function initializeNewAnswer(html) {
+  const answersList = document.querySelector('.answers-list')
+  const answerDiv = document.createElement('div')
+  answerDiv.innerHTML = html
+  const newAnswerElement = answerDiv.firstElementChild
+  answersList.appendChild(newAnswerElement)
+  initializeAnswer(newAnswerElement)
+  const reactionElement = newAnswerElement.querySelector('.js-reactions')
+  initializeReaction(reactionElement)
+}

app/views/questions/_answer.html.slim

@@ -1,4 +1,4 @@
-.thread-comment.answer id="answer_#{answer.id}" data-question_id="#{question.id}" data-answer_id="#{answer.id}"
+.thread-comment.answer id="answer_#{answer.id}" data-question_id="#{question.id}" data-answer_id="#{answer.id}" data-answer_description="#{answer.description}"
   .thread-comment__start
     a.thread-comment__user-link href="#{answer.user.url}"
       span class="a-user-role is-#{answer.user.primary_role}"
@@ -64,7 +64,7 @@
           .a-markdown-input__inner.is-editor.js-tabs__content.is-active
             .form-textarea
               .form-textarea__body
-                textarea.a-text-input.a-markdown-input__textarea data-id="#js-comment-#{answer.id}" data-preview="#js-comment-preview-#{answer.id}" data-input=".js-comment-file-input-#{answer.id}" name='answer[description]'
+                textarea.a-text-input.a-markdown-input__textarea id="js-comment-#{answer.id}" data-preview="#js-comment-preview-#{answer.id}" data-input=".js-comment-file-input-#{answer.id}" name='answer[description]'
                   = answer.description
               .form-textarea__footer
                 .form-textarea__insert

app/views/questions/show.html.slim

@@ -39,7 +39,7 @@ hr.a-border
           h2.thread-comments__title
             | 回答・コメント
         .answers-list
-          - @question.answers.each do |answer|
+          - @answers.each do |answer|
             = render 'answer', question: @question, user: current_user, answer: answer
         = render 'new_answer', question: @question, user: current_user
     nav.a-side-nav