obs editor textbox auto sizing

bible-technology · Oct 26, 2023 · 7be3e89 · 7be3e89
1 parent 6194ae6
commit 7be3e89
Showing 1 changed file with 22 additions and 0 deletions.
diff --git a/renderer/src/components/EditorPage/ObsEditor/EditorPanel.js b/renderer/src/components/EditorPage/ObsEditor/EditorPanel.js
@@ -51,6 +51,25 @@ const EditorPanel = ({ obsStory, storyUpdate }) => {
       return false;
     }
   };
+
+  const adjustTextareaHeight = (element) => {
+    element.style.height = 'auto';
+    element.style.height = `${element.scrollHeight }px`;
+  };
+
+  const handleOnFocus = (status, e) => {
+    const element = e.target;
+    if (status) {
+      adjustTextareaHeight(element);
+    } else {
+      element.style.height = '58px';
+    }
+  };
+
+  const handleAutoHeight = (e) => {
+    adjustTextareaHeight(e.target);
+  };
+
   return (
     <>
       {obsStory.map((story, index) => (
@@ -94,6 +113,9 @@ const EditorPanel = ({ obsStory, storyUpdate }) => {
               value={story.text}
               data-id={story.id}
               className="flex-grow text-justify ml-2 p-2 text-sm"
+              onFocus={(e) => handleOnFocus(true, e)}
+              onBlur={(e) => handleOnFocus(false, e)}
+              onInput={(e) => handleAutoHeight(e)}
               style={{
                 fontFamily: selectedFont || 'sans-serif',
                 fontSize: `${fontSize}rem`,