[15 min fix] ✂️✂️✂️ Remove preact-textarea-autosize library ✂️✂️✂️ (#13234)

* remove lib from title component, use hook instead

* remove lib from chat compose, and remove package

app/javascript/article-form/components/Title.jsx

@@ -1,23 +1,32 @@
 import { h } from 'preact';
+import { useRef, useLayoutEffect } from 'preact/hooks';
 import PropTypes from 'prop-types';
-// We use this magic Textarea component for title field because it's automatically
-// resizable. Even though it looks like a classic input, if you enter long title
-// it would wrap the text to the next line automatically resizing itself. It helps keep
-// the entire layout the way it is without having unnecessary scrolling and white spaces.
-// Keep in mind this is what happens only here - in preact component.
+// We use this hook for the title field to automatically grow the height of the textarea.
+// It helps keep the entire layout the way it is without having unnecessary scrolling and white spaces.
+// Keep in mind this is what happens only here - in the Preact component.
 // I'm mentioning this because the entire "Write a post" view is a preact component
 // BUT it is also a classic .html.erb view which is being loaded BEFORE this component
 // to give a feeling of blazing fast page load. And we do NOT use this magic autoresizing
 // functionality on .html.erb view because there's no point of it.
-import Textarea from 'preact-textarea-autosize';
+import { useTextAreaAutoResize } from '@utilities/textAreaUtils';
 
 export const Title = ({ onChange, defaultValue, switchHelpContext }) => {
+  const textAreaRef = useRef(null);
+  const { setTextArea } = useTextAreaAutoResize();
+
+  useLayoutEffect(() => {
+    if (textAreaRef.current) {
+      setTextArea(textAreaRef.current);
+    }
+  }, [setTextArea]);
+
   return (
     <div
       data-testid="article-form__title"
       className="crayons-article-form__title"
     >
-      <Textarea
+      <textarea
+        ref={textAreaRef}
         className="crayons-textfield crayons-textfield--ghost fs-3xl m:fs-4xl l:fs-5xl fw-bold s:fw-heavy lh-tight"
         type="text"
         id="article-form-title"

app/javascript/chat/compose.jsx

@@ -1,7 +1,13 @@
 import { h } from 'preact';
-import { useState, useEffect, useMemo } from 'preact/hooks';
+import {
+  useState,
+  useEffect,
+  useMemo,
+  useRef,
+  useLayoutEffect,
+} from 'preact/hooks';
 import PropTypes from 'prop-types';
-import Textarea from 'preact-textarea-autosize';
+import { useTextAreaAutoResize } from '@utilities/textAreaUtils';
 
 export const Compose = ({
   handleKeyDown,
@@ -18,6 +24,15 @@ export const Compose = ({
   activeChannelName,
 }) => {
   const [value, setValue] = useState('');
+  const textAreaRef = useRef(null);
+
+  const { setTextArea } = useTextAreaAutoResize();
+
+  useLayoutEffect(() => {
+    if (textAreaRef.current) {
+      setTextArea(textAreaRef.current);
+    }
+  }, [setTextArea]);
 
   useEffect(() => {
     if (!markdownEdited && startEditing) {
@@ -56,7 +71,8 @@ export const Compose = ({
           startEditing ? 'composer-container__edit' : 'messagecomposer'
         }
       >
-        <Textarea
+        <textarea
+          ref={textAreaRef}
           className={
             startEditing
               ? 'crayons-textfield composer-textarea__edit'

package.json

@@ -172,7 +172,6 @@
     "postcss-smart-import": "^0.7.6",
     "postscribe": "^2.0.8",
     "preact": "^10.5.13",
-    "preact-textarea-autosize": "^4.0.7",
     "prop-types": "^15.7.2",
     "pusher-js": "^7.0.3",
     "rails-erb-loader": "^5.5.2",

yarn.lock

@@ -15372,11 +15372,6 @@ postscribe@^2.0.8:
   dependencies:
     prescribe ">=1.1.2"
 
-preact-textarea-autosize@^4.0.7:
-  version "4.0.7"
-  resolved "https://registry.yarnpkg.com/preact-textarea-autosize/-/preact-textarea-autosize-4.0.7.tgz#aa654ce1a0ed57027dca21e4710a78cb6f007457"
-  integrity sha1-qmVM4aDtVwJ9yiHkcQp4y28AdFc=
-
 preact@^10.5.13:
   version "10.5.13"
   resolved "https://registry.yarnpkg.com/preact/-/preact-10.5.13.tgz#85f6c9197ecd736ce8e3bec044d08fd1330fa019"