From eaab97dcbf9f6832d232e6937067b85dc1fc423f Mon Sep 17 00:00:00 2001
From: Tom Moor <tom@getoutline.com>
Date: Sat, 22 Jun 2024 10:05:23 -0400
Subject: [PATCH] fix: Unable to scroll until multiple comments (#7112)

* fix: Unable to scroll in comments
fix: Missing highlighted text on first comment while composing

* docs
---
 .../Document/components/CommentForm.tsx       |  7 +++++
 .../Document/components/CommentThread.tsx     |  3 ++
 .../Document/components/CommentThreadItem.tsx | 29 +++----------------
 app/scenes/Document/components/Comments.tsx   |  2 --
 .../Document/components/HighlightText.ts      | 29 +++++++++++++++++++
 5 files changed, 43 insertions(+), 27 deletions(-)
 create mode 100644 app/scenes/Document/components/HighlightText.ts

diff --git a/app/scenes/Document/components/CommentForm.tsx b/app/scenes/Document/components/CommentForm.tsx
index 5accb27e5..0cb297f00 100644
--- a/app/scenes/Document/components/CommentForm.tsx
+++ b/app/scenes/Document/components/CommentForm.tsx
@@ -24,6 +24,7 @@ import useOnClickOutside from "~/hooks/useOnClickOutside";
 import useStores from "~/hooks/useStores";
 import CommentEditor from "./CommentEditor";
 import { Bubble } from "./CommentThreadItem";
+import { HighlightedText } from "./HighlightText";
 
 type Props = {
   /** Callback when the draft should be saved. */
@@ -42,6 +43,8 @@ type Props = {
   standalone?: boolean;
   /** Whether to animate the comment form in and out */
   animatePresence?: boolean;
+  /** Text to highlight at the top of the comment */
+  highlightedText?: string;
   /** The text direction of the editor */
   dir?: "rtl" | "ltr";
   /** Callback when the user is typing in the editor */
@@ -64,6 +67,7 @@ function CommentForm({
   standalone,
   placeholder,
   animatePresence,
+  highlightedText,
   dir,
   ...rest
 }: Props) {
@@ -274,6 +278,9 @@ function CommentForm({
           $firstOfThread={standalone}
           column
         >
+          {highlightedText && (
+            <HighlightedText>{highlightedText}</HighlightedText>
+          )}
           <CommentEditor
             key={`${forceRender}`}
             ref={editorRef}
diff --git a/app/scenes/Document/components/CommentThread.tsx b/app/scenes/Document/components/CommentThread.tsx
index e82c98f65..61e345b49 100644
--- a/app/scenes/Document/components/CommentThread.tsx
+++ b/app/scenes/Document/components/CommentThread.tsx
@@ -210,6 +210,9 @@ function CommentThread({
               standalone={commentsInThread.length === 0}
               dir={document.dir}
               autoFocus={autoFocus}
+              highlightedText={
+                commentsInThread.length === 0 ? highlightedText : undefined
+              }
             />
           </Fade>
         )}
diff --git a/app/scenes/Document/components/CommentThreadItem.tsx b/app/scenes/Document/components/CommentThreadItem.tsx
index ada71ffbc..aeda32d28 100644
--- a/app/scenes/Document/components/CommentThreadItem.tsx
+++ b/app/scenes/Document/components/CommentThreadItem.tsx
@@ -19,8 +19,9 @@ import Text from "~/components/Text";
 import Time from "~/components/Time";
 import useBoolean from "~/hooks/useBoolean";
 import CommentMenu from "~/menus/CommentMenu";
-import { hover, truncateMultiline } from "~/styles";
+import { hover } from "~/styles";
 import CommentEditor from "./CommentEditor";
+import { HighlightedText } from "./HighlightText";
 
 /**
  * Hook to calculate if we should display a timestamp on a comment
@@ -127,12 +128,12 @@ function CommentThreadItem({
   const handleCancel = () => {
     setData(toJS(comment.data));
     setReadOnly();
-    setForceRender((s) => ++s);
+    setForceRender((i) => ++i);
   };
 
   React.useEffect(() => {
     setData(toJS(comment.data));
-    setForceRender((s) => ++s);
+    setForceRender((i) => ++i);
   }, [comment.data]);
 
   return (
@@ -240,28 +241,6 @@ const Body = styled.form`
   border-radius: 2px;
 `;
 
-const HighlightedText = styled(Text)`
-  position: relative;
-  color: ${s("textSecondary")};
-  font-size: 14px;
-  padding: 0 8px;
-  margin: 4px 0;
-  display: inline-block;
-
-  ${truncateMultiline(3)}
-
-  &:after {
-    content: "";
-    width: 2px;
-    position: absolute;
-    left: 0;
-    top: 2px;
-    bottom: 2px;
-    background: ${s("commentMarkBackground")};
-    border-radius: 2px;
-  }
-`;
-
 const Menu = styled(CommentMenu)<{ dir?: "rtl" | "ltr" }>`
   position: absolute;
   left: ${(props) => (props.dir !== "rtl" ? "auto" : "4px")};
diff --git a/app/scenes/Document/components/Comments.tsx b/app/scenes/Document/components/Comments.tsx
index 482efa5c6..fe485232c 100644
--- a/app/scenes/Document/components/Comments.tsx
+++ b/app/scenes/Document/components/Comments.tsx
@@ -42,7 +42,6 @@ function Comments() {
     .threadsInDocument(document.id)
     .filter((thread) => !thread.isNew || thread.createdById === user.id);
   const hasComments = threads.length > 0;
-  const hasMultipleComments = comments.inDocument(document.id).length > 1;
 
   return (
     <Sidebar
@@ -52,7 +51,6 @@ function Comments() {
     >
       <Scrollable
         id="comments"
-        overflow={hasMultipleComments ? undefined : "initial"}
         bottomShadow={!focusedComment}
         hiddenScrollbars
         topShadow
diff --git a/app/scenes/Document/components/HighlightText.ts b/app/scenes/Document/components/HighlightText.ts
new file mode 100644
index 000000000..529dd08ad
--- /dev/null
+++ b/app/scenes/Document/components/HighlightText.ts
@@ -0,0 +1,29 @@
+import styled from "styled-components";
+import { s } from "@shared/styles";
+import Text from "~/components/Text";
+import { truncateMultiline } from "~/styles";
+
+/**
+ * Highlighted text associated with a comment.
+ */
+export const HighlightedText = styled(Text)`
+  position: relative;
+  color: ${s("textSecondary")};
+  font-size: 14px;
+  padding: 0 8px;
+  margin: 4px 0;
+  display: inline-block;
+
+  ${truncateMultiline(3)}
+
+  &:after {
+    content: "";
+    width: 2px;
+    position: absolute;
+    left: 0;
+    top: 2px;
+    bottom: 2px;
+    background: ${s("commentMarkBackground")};
+    border-radius: 2px;
+  }
+`;