From ad27184a91a72905a4b32a9f6b3ad7cea43d8475 Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <65252264+aaryan610@users.noreply.github.com>
Date: Fri, 26 Apr 2024 18:29:18 +0530
Subject: [PATCH] [WEB-1072] fix: pages UI improvements (#4294)

* fix: outline alignment

* fix: textarea auto-resize logic
---
 packages/ui/src/form-fields/textarea.tsx      |  2 +-
 .../ui/src/hooks/use-auto-resize-textarea.ts  | 30 +++++++------------
 .../editor/summary/heading-components.tsx     |  6 ++--
 web/components/pages/editor/title.tsx         | 11 +++++--
 web/components/pages/list/block.tsx           |  2 +-
 5 files changed, 25 insertions(+), 26 deletions(-)

diff --git a/packages/ui/src/form-fields/textarea.tsx b/packages/ui/src/form-fields/textarea.tsx
index 2c47a65f5..e6927a968 100644
--- a/packages/ui/src/form-fields/textarea.tsx
+++ b/packages/ui/src/form-fields/textarea.tsx
@@ -15,7 +15,7 @@ const TextArea = React.forwardRef<HTMLTextAreaElement, TextAreaProps>((props, re
   // refs
   const textAreaRef = useRef<any>(ref);
   // auto re-size
-  useAutoResizeTextArea(textAreaRef);
+  useAutoResizeTextArea(textAreaRef, value);
 
   return (
     <textarea
diff --git a/packages/ui/src/hooks/use-auto-resize-textarea.ts b/packages/ui/src/hooks/use-auto-resize-textarea.ts
index a1b907a60..326319f24 100644
--- a/packages/ui/src/hooks/use-auto-resize-textarea.ts
+++ b/packages/ui/src/hooks/use-auto-resize-textarea.ts
@@ -1,24 +1,16 @@
-import { useEffect } from "react";
+import { useLayoutEffect } from "react";
 
-export const useAutoResizeTextArea = (textAreaRef: React.RefObject<HTMLTextAreaElement>) => {
-  useEffect(() => {
+export const useAutoResizeTextArea = (
+  textAreaRef: React.RefObject<HTMLTextAreaElement>,
+  value: string | number | readonly string[]
+) => {
+  useLayoutEffect(() => {
     const textArea = textAreaRef.current;
     if (!textArea) return;
 
-    const resizeTextArea = () => {
-      textArea.style.height = "auto";
-      const computedHeight = textArea.scrollHeight + "px";
-      textArea.style.height = computedHeight;
-    };
-
-    const handleInput = () => resizeTextArea();
-
-    // resize on mount
-    resizeTextArea();
-
-    textArea.addEventListener("input", handleInput);
-    return () => {
-      textArea.removeEventListener("input", handleInput);
-    };
-  }, [textAreaRef]);
+    // We need to reset the height momentarily to get the correct scrollHeight for the textarea
+    textArea.style.height = "0px";
+    const scrollHeight = textArea.scrollHeight;
+    textArea.style.height = scrollHeight + "px";
+  }, [textAreaRef, value]);
 };
diff --git a/web/components/pages/editor/summary/heading-components.tsx b/web/components/pages/editor/summary/heading-components.tsx
index a8eade6fc..6807f36b7 100644
--- a/web/components/pages/editor/summary/heading-components.tsx
+++ b/web/components/pages/editor/summary/heading-components.tsx
@@ -10,7 +10,7 @@ export const OutlineHeading1 = ({ marking, onClick }: HeadingProps) => (
   <button
     type="button"
     onClick={onClick}
-    className="ml-4 cursor-pointer text-sm font-medium text-custom-text-400 hover:text-custom-primary-100 max-md:ml-2.5"
+    className="text-sm text-left font-medium text-custom-text-300 hover:text-custom-primary-100"
   >
     {marking.text}
   </button>
@@ -20,7 +20,7 @@ export const OutlineHeading2 = ({ marking, onClick }: HeadingProps) => (
   <button
     type="button"
     onClick={onClick}
-    className="ml-6 cursor-pointer text-xs font-medium text-custom-text-400 hover:text-custom-primary-100"
+    className="ml-2 text-xs text-left font-medium text-custom-text-300 hover:text-custom-primary-100"
   >
     {marking.text}
   </button>
@@ -30,7 +30,7 @@ export const OutlineHeading3 = ({ marking, onClick }: HeadingProps) => (
   <button
     type="button"
     onClick={onClick}
-    className="ml-8 cursor-pointer text-xs font-medium text-custom-text-400 hover:text-custom-primary-100"
+    className="ml-4 text-xs text-left font-medium text-custom-text-300 hover:text-custom-primary-100"
   >
     {marking.text}
   </button>
diff --git a/web/components/pages/editor/title.tsx b/web/components/pages/editor/title.tsx
index b5b06069f..cb7d432e0 100644
--- a/web/components/pages/editor/title.tsx
+++ b/web/components/pages/editor/title.tsx
@@ -22,12 +22,19 @@ export const PageEditorTitle: React.FC<Props> = observer((props) => {
   return (
     <>
       {readOnly ? (
-        <h6 className="-mt-2 break-words bg-transparent text-4xl font-bold">{title}</h6>
+        <h6
+          className="break-words bg-transparent text-4xl font-bold"
+          style={{
+            lineHeight: "1.2",
+          }}
+        >
+          {title}
+        </h6>
       ) : (
         <>
           <TextArea
             onChange={(e) => updateTitle(e.target.value)}
-            className="-mt-2 w-full bg-custom-background text-4xl font-bold outline-none p-0 border-none resize-none rounded-none"
+            className="w-full bg-custom-background text-4xl font-bold outline-none p-0 border-none resize-none rounded-none"
             style={{
               lineHeight: "1.2",
             }}
diff --git a/web/components/pages/list/block.tsx b/web/components/pages/list/block.tsx
index 73e286546..82a7cedc2 100644
--- a/web/components/pages/list/block.tsx
+++ b/web/components/pages/list/block.tsx
@@ -51,7 +51,7 @@ export const PageListBlock: FC<TPageListBlock> = observer((props) => {
     >
       {/* page title */}
       <Tooltip tooltipHeading="Title" tooltipContent={name}>
-        <h5 className="text-base font-semibold truncate">{name}</h5>
+        <h5 className="text-base font-medium truncate">{name}</h5>
       </Tooltip>
 
       {/* page properties */}