From 90261143bd54fae0994e18d28d647a62038a3962 Mon Sep 17 00:00:00 2001
From: juliopavila <javila1997@gmail.com>
Date: Thu, 20 Jul 2023 13:03:10 -0300
Subject: [PATCH] bug: Fix auto-scrolling issue when adding new lines

---
 .../src/components/commons/Editor/Editor.tsx  | 20 ++++++++++++++++++-
 1 file changed, 19 insertions(+), 1 deletion(-)

diff --git a/packages/app/src/components/commons/Editor/Editor.tsx b/packages/app/src/components/commons/Editor/Editor.tsx
index 2de31da1..f6b1653e 100644
--- a/packages/app/src/components/commons/Editor/Editor.tsx
+++ b/packages/app/src/components/commons/Editor/Editor.tsx
@@ -47,6 +47,7 @@ const Editor: React.FC = () => {
     setContentImageFiles,
     setLinkComponentUrl,
   } = useArticleContext()
+  const editorContainer = useRef<HTMLDivElement>(null)
   const navigate = useNavigate()
   const linkDecorator = useLinkDecorator()
   const decorators = new CompositeDecorator(linkDecorator)
@@ -217,6 +218,23 @@ const Editor: React.FC = () => {
     }
   }, [editorState, setShowInlinePopup])
 
+  useEffect(() => {
+    scrollToBottom()
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [editorState])
+
+  // go to the end of the text editor
+  const scrollToBottom = () => {
+    const currentSelection = editorState.getSelection()
+    const anchorKey = currentSelection.getAnchorKey()
+    const currentContent = editorState.getCurrentContent()
+    const currentBlock = currentContent.getBlockForKey(anchorKey)
+
+    //check if the current blocks is the last
+    if (currentBlock === currentContent.getLastBlock()) {
+      editorContainer.current?.scrollIntoView({ behavior: "smooth", block: "end" })
+    }
+  }
   const handleState = (editorState: EditorState) => {
     const finalEditorState = handleSlashCommand(editorState)
     setEditorState(finalEditorState)
@@ -322,7 +340,7 @@ const Editor: React.FC = () => {
   }
 
   return (
-    <Box>
+    <Box ref={editorContainer}>
       <DraftEditor
         ref={editor}
         editorState={editorState}