Use fit-textarea to autosize textarea

This seems to fix the annoying scrolling behaviour described in lektor#1038.

https://github.com/fregante/fit-textarea

frontend/js/widgets/MultiLineTextInputWidget.tsx

@@ -1,3 +1,4 @@
+import fitTextarea from "fit-textarea";
 import React, { ChangeEvent, useCallback, useEffect, useRef } from "react";
 import { getInputClass, WidgetProps } from "./types";
 
@@ -10,11 +11,9 @@ export function MultiLineTextInputWidget({
 }: WidgetProps) {
   const textarea = useRef<HTMLTextAreaElement | null>(null);
 
-  const recalculateSize = useCallback(() => {
-    const node = textarea.current;
-    if (node) {
-      node.style.height = "auto";
-      node.style.height = node.scrollHeight + "px";
+  useEffect(() => {
+    if (textarea?.current) {
+      fitTextarea.watch(textarea?.current);
     }
   }, []);
 
@@ -25,17 +24,6 @@ export function MultiLineTextInputWidget({
     [onChangeProp]
   );
 
-  useEffect(() => {
-    recalculateSize();
-  }, [recalculateSize, value]);
-
-  useEffect(() => {
-    window.addEventListener("resize", recalculateSize);
-    return () => {
-      window.removeEventListener("resize", recalculateSize);
-    };
-  }, [recalculateSize]);
-
   return (
     <div>
       <textarea

frontend/package.json

@@ -23,6 +23,7 @@
     "eslint": "^8.4.1",
     "eslint-plugin-react": "^7.22.0",
     "eslint-plugin-react-hooks": "^4.2.0",
+    "fit-textarea": "^3.0.0",
     "font-awesome": "^4.3.0",
     "jsdom": "^19.0.0",
     "mocha": "^9.0.3",