CW-instant-chat-message-edit

Fix scroll behaviour
daostack · Oct 10, 2024 · 44eef1d · 44eef1d
1 parent 193847d
commit 44eef1d
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 4 deletions.
diff --git a/src/shared/components/Chat/ChatMessage/components/Time/Time.module.scss b/src/shared/components/Chat/ChatMessage/components/Time/Time.module.scss
@@ -24,6 +24,7 @@
 
 .editedTimeWrapper {
   font-size: $xxsmall;
+  min-width: 5rem;
 }
 
 .creationTimeWrapper {

diff --git a/src/shared/components/Chat/EditMessageInput/EditMessageInput.tsx b/src/shared/components/Chat/EditMessageInput/EditMessageInput.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useState } from "react";
+import React, { useEffect, useMemo, useState, useRef } from "react";
 import classNames from "classnames";
 import { useCommonMembers } from "@/pages/OldCommon/hooks";
 import { Loader } from "@/shared/components";
@@ -29,6 +29,7 @@ export default function EditMessageInput({
   isLoading,
   updateMessage,
 }: Props) {
+  const inputContainerRef = useRef<HTMLDivElement>(null);
   const [message, setMessage] = useState(() =>
     parseStringToTextEditorValue(discussionMessage.text),
   );
@@ -53,7 +54,7 @@ export default function EditMessageInput({
   }, [commonMember, commonMembers]);
 
   return (
-    <div className={styles.container}>
+    <div ref={inputContainerRef} className={styles.container}>
       <BaseTextEditor
         className={styles.input}
         emojiPickerContainerClassName={styles.pickerContainer}
@@ -64,6 +65,7 @@ export default function EditMessageInput({
         shouldReinitializeEditor={false}
         onClearFinished={emptyFunction}
         size={TextEditorSize.Auto}
+        inputContainerRef={inputContainerRef}
       />
 
       <div className={styles.buttonContainer}>

diff --git a/src/shared/ui-kit/TextEditor/BaseTextEditor.module.scss b/src/shared/ui-kit/TextEditor/BaseTextEditor.module.scss
@@ -2,4 +2,5 @@
   position: relative;
   width: 100%;
   height: 100%;
+  scroll-behavior: smooth;
 }
diff --git a/src/shared/ui-kit/TextEditor/BaseTextEditor.tsx b/src/shared/ui-kit/TextEditor/BaseTextEditor.tsx
@@ -256,7 +256,8 @@ const BaseTextEditor = forwardRef<BaseTextEditorHandles, TextEditorProps>((props
       event.preventDefault();
       setShouldFocusTarget(true);
     } else {
-      onKeyDown && onKeyDown(event);
+      // event.stopPropagation();
+      onKeyDown && onKeyDown(event); // Call any custom onKeyDown handler
       if (event.key === KeyboardKeys.Enter && !isMobile()) {
         onToggleIsMessageSent();
       }
@@ -340,6 +341,16 @@ const BaseTextEditor = forwardRef<BaseTextEditorHandles, TextEditorProps>((props
     [onChange, value, handleMentionSelectionChange],
   );
 
+  const customScrollSelectionIntoView = ( ) => {
+    if (inputContainerRef && 'current' in inputContainerRef && inputContainerRef?.current) {
+      inputContainerRef.current?.scrollIntoView({
+        behavior: "smooth",
+        block: "end",
+        inline: "nearest",
+      });
+    }
+  }
+
   return (
     <div ref={inputContainerRef} className={styles.container}>
       <Slate editor={editor} initialValue={value} onChange={handleOnChange}>
@@ -358,7 +369,7 @@ const BaseTextEditor = forwardRef<BaseTextEditorHandles, TextEditorProps>((props
           disabled={disabled}
           onBlur={onBlur}
           onKeyDown={handleKeyDown}
-          scrollSelectionIntoView={scrollSelectionIntoView}
+          scrollSelectionIntoView={scrollSelectionIntoView ?? customScrollSelectionIntoView}
           elementStyles={elementStyles}
         />
         <EmojiPicker