Merge pull request #2413 from daostack/bugfix/CW-2388-chat-makes-feed…

…-items-scroll Feed is scrolling upon typing a chat text #2388
daostack · Dec 21, 2023 · fbd52f4 · fbd52f4
2 parents 72fb592 + da9d387
commit fbd52f4
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 3 deletions.
diff --git a/src/pages/common/components/ChatComponent/ChatComponent.tsx b/src/pages/common/components/ChatComponent/ChatComponent.tsx
@@ -51,7 +51,12 @@ import {
   removeTextEditorEmptyEndLinesValues,
   countTextEditorEmojiElements,
 } from "@/shared/ui-kit";
-import { getUserName, hasPermission, isMobile } from "@/shared/utils";
+import {
+  emptyFunction,
+  getUserName,
+  hasPermission,
+  isMobile,
+} from "@/shared/utils";
 import {
   cacheActions,
   chatActions,
@@ -682,6 +687,7 @@ export default function ChatComponent({
           users={users}
           shouldReinitializeEditor={shouldReinitializeEditor}
           onClearFinished={onClearFinished}
+          scrollSelectionIntoView={emptyFunction}
           groupChat={chatChannel && chatChannel?.participants.length > 2}
         />
         <button

diff --git a/src/shared/ui-kit/TextEditor/BaseTextEditor.tsx b/src/shared/ui-kit/TextEditor/BaseTextEditor.tsx
@@ -19,6 +19,7 @@ import {
 } from "slate";
 import { withHistory } from "slate-history";
 import { ReactEditor, Slate, withReact } from "slate-react";
+import { DOMRange } from "slate-react/dist/utils/dom";
 import { KeyboardKeys } from "@/shared/constants/keyboardKeys";
 import { User } from "@/shared/models";
 import { getUserName, isMobile, isRtlText } from "@/shared/utils";
@@ -60,6 +61,7 @@ export interface TextEditorProps {
   users?: User[];
   shouldReinitializeEditor: boolean;
   onClearFinished: () => void;
+  scrollSelectionIntoView?: (editor: ReactEditor, domRange: DOMRange) => void;
   elementStyles?: EditorElementStyles;
   groupChat?: boolean;
 }
@@ -94,6 +96,7 @@ const BaseTextEditor: FC<TextEditorProps> = (props) => {
     users,
     shouldReinitializeEditor = false,
     onClearFinished,
+    scrollSelectionIntoView,
     elementStyles,
     groupChat,
   } = props;
@@ -261,6 +264,7 @@ const BaseTextEditor: FC<TextEditorProps> = (props) => {
           disabled={disabled}
           onBlur={onBlur}
           onKeyDown={handleKeyDown}
+          scrollSelectionIntoView={scrollSelectionIntoView}
           elementStyles={elementStyles}
         />
         <EmojiPicker

diff --git a/src/shared/ui-kit/TextEditor/components/Editor/Editor.tsx b/src/shared/ui-kit/TextEditor/components/Editor/Editor.tsx
@@ -7,7 +7,8 @@ import React, {
 } from "react";
 import classNames from "classnames";
 import isHotkey from "is-hotkey";
-import { Editable, useSlate } from "slate-react";
+import { Editable, ReactEditor, useSlate } from "slate-react";
+import { DOMRange } from "slate-react/dist/utils/dom";
 import { Element, Leaf } from "../../components";
 import { HOTKEYS, TextEditorSize } from "../../constants";
 import { EditorElementStyles } from "../../types";
@@ -25,17 +26,19 @@ interface EditorProps {
   onBlur?: FocusEventHandler;
   elementStyles?: EditorElementStyles;
   onKeyDown?: (event: KeyboardEvent<HTMLElement>) => void;
+  scrollSelectionIntoView?: (editor: ReactEditor, domRange: DOMRange) => void;
 }
 
 const Editor: FC<EditorProps> = (props) => {
   const {
     size = TextEditorSize.Small,
     placeholder,
+    elementStyles,
     readOnly = false,
     disabled = false,
     onBlur,
     onKeyDown,
-    elementStyles,
+    scrollSelectionIntoView,
   } = props;
   const editor = useSlate();
   const renderElement = useCallback(
@@ -78,6 +81,7 @@ const Editor: FC<EditorProps> = (props) => {
       readOnly={readOnly || disabled}
       onBlur={onBlur}
       onKeyDown={handleKeyDown}
+      scrollSelectionIntoView={scrollSelectionIntoView}
     />
   );
 };