From 151a118f57f93401dfb4c32c444abce382db4858 Mon Sep 17 00:00:00 2001
From: ktmouk <ktmouk.dev@gmail.com>
Date: Thu, 2 Feb 2023 21:10:24 +0900
Subject: [PATCH] Fix the last line of editor is not visible (#19023)

Co-authored-by: Lawrence <lawrence@forem.com>
---
 app/javascript/utilities/textAreaUtils.js | 14 ++++++++++++--
 testSetup.js                              |  6 ++++++
 2 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/app/javascript/utilities/textAreaUtils.js b/app/javascript/utilities/textAreaUtils.js
index aca022bc8..ad89ae39a 100644
--- a/app/javascript/utilities/textAreaUtils.js
+++ b/app/javascript/utilities/textAreaUtils.js
@@ -1,5 +1,6 @@
 import { useEffect, useState } from 'preact/hooks';
 import { calculateTextAreaHeight } from '@utilities/calculateTextAreaHeight';
+import { debounceAction } from '@utilities/debounceAction';
 
 /**
  * A helper function to get the X/Y coordinates of the current cursor position within an element.
@@ -287,7 +288,7 @@ export const useTextAreaAutoResize = () => {
       const height = Math.max(...allContentHeights);
       const newHeight = `${height}px`;
 
-      [textArea, ...additionalElements].forEach((element) => {
+      allElements.forEach((element) => {
         element.style['min-height'] = newHeight;
         if (constrainToContentHeight) {
           // Don't allow the textarea to grow to a size larger than the content
@@ -298,10 +299,19 @@ export const useTextAreaAutoResize = () => {
 
     // Resize on first attach
     resizeTextArea();
+
+    // Resize on window size changes
+    const resizeCallback = debounceAction(() => resizeTextArea(), 300);
+    const resizeObserver = new ResizeObserver(resizeCallback);
+    resizeObserver.observe(textArea);
+
     // Resize on subsequent value changes
     textArea.addEventListener('input', resizeTextArea);
 
-    return () => textArea.removeEventListener('input', resizeTextArea);
+    return () => {
+      resizeObserver.disconnect();
+      textArea.removeEventListener('input', resizeTextArea);
+    };
   }, [textArea, additionalElements, constrainToContentHeight]);
 
   return { setTextArea, setAdditionalElements, setConstrainToContentHeight };
diff --git a/testSetup.js b/testSetup.js
index 27b009602..fe8c9dab0 100644
--- a/testSetup.js
+++ b/testSetup.js
@@ -4,6 +4,12 @@ import './app/assets/javascripts/lib/xss';
 
 global.setImmediate = global.setTimeout;
 
+global.ResizeObserver = class ResizeObserver {
+  disconnect() {}
+  observe() {}
+  unobserve() {}
+};
+
 // TODO: Remove this once https://github.com/nickcolley/jest-axe/issues/147 is fixed.
 const { getComputedStyle } = window;
 window.getComputedStyle = (elt) => getComputedStyle(elt);