diff --git a/app/controllers/questions_controller.rb b/app/controllers/questions_controller.rb index 783c520e04d..87969a15b2d 100644 --- a/app/controllers/questions_controller.rb +++ b/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 diff --git a/app/javascript/initializeAnswer.js b/app/javascript/initializeAnswer.js index 464120ef292..af2cfd3d72c 100644 --- a/app/javascript/initializeAnswer.js +++ b/app/javascript/initializeAnswer.js @@ -6,6 +6,7 @@ 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() @@ -13,10 +14,19 @@ export default function initializeAnswer(answer) { 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') diff --git a/app/javascript/new-answer.js b/app/javascript/new-answer.js index aa4ef3efbca..20dd9e5895b 100644 --- a/app/javascript/new-answer.js +++ b/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) +} diff --git a/app/views/questions/_answer.html.slim b/app/views/questions/_answer.html.slim index 3204868b087..9928be7db75 100644 --- a/app/views/questions/_answer.html.slim +++ b/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 diff --git a/app/views/questions/show.html.slim b/app/views/questions/show.html.slim index 65ef5b0dcd7..43b1a695813 100644 --- a/app/views/questions/show.html.slim +++ b/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