Merge pull request #2742 from daostack/CW-instant-chat-message-edit

Instant chat message edit
daostack · Oct 11, 2024 · 983a905 · 983a905
2 parents ade8ab8 + 94de9b9
commit 983a905
Show file tree

Hide file tree

Showing 5 changed files with 68 additions and 10 deletions.
diff --git a/src/shared/components/Chat/ChatMessage/ChatMessage.tsx b/src/shared/components/Chat/ChatMessage/ChatMessage.tsx
@@ -121,6 +121,7 @@ const ChatMessage = ({
   }>();
   const [isEditMode, setEditMode] = useState(false);
   const [isMenuOpen, setIsMenuOpen] = useState(false);
+  const [parsedMessage, setParsedMessage] = useState(discussionMessage.parsedText);
   const [isMessageEditLoading, setIsMessageEditLoading] = useState(false);
   const isTabletView = useIsTabletView();
   const isUserDiscussionMessage =
@@ -133,6 +134,9 @@ const ChatMessage = ({
     : null;
   const isNotCurrentUserMessage =
     !isUserDiscussionMessage || userId !== discussionMessageUserId;
+  const initialEditedAtDate = new Date(
+    (discussionMessage.editedAt?.seconds ?? 0) * 1000,
+  );
 
   const [replyMessageText, setReplyMessageText] = useState<
     (string | JSX.Element)[]
@@ -177,9 +181,7 @@ const ChatMessage = ({
   ]);
 
   const createdAtDate = new Date(discussionMessage.createdAt.seconds * 1000);
-  const editedAtDate = new Date(
-    (discussionMessage.editedAt?.seconds ?? 0) * 1000,
-  );
+  const [editedAtDate, setEditedAtDate] = useState(initialEditedAtDate);
 
   const handleUserClick = () => {
     if (onUserClick && discussionMessageUserId && !isBotMessage) {
@@ -258,6 +260,8 @@ const ChatMessage = ({
             handleEditModeClose();
           } else {
             notify("Something went wrong");
+            setParsedMessage(discussionMessage.parsedText);
+            setEditedAtDate(initialEditedAtDate);
           }
         },
       }),
@@ -276,17 +280,38 @@ const ChatMessage = ({
       handleEditModeClose();
     } catch (err) {
       notify("Something went wrong");
+      setParsedMessage(discussionMessage.parsedText);
+      setEditedAtDate(initialEditedAtDate);
     } finally {
       setIsMessageEditLoading(false);
     }
   };
 
-  const updateMessage = (message: TextEditorValue) => {
+  const updateMessage = async (message: TextEditorValue) => {
+    try {
     if (chatType === ChatType.ChatMessages) {
       updateChatMessage(message);
     } else {
       updateDiscussionMessage(message);
     }
+    const parsedText = await getTextFromTextEditorString({
+      userId,
+      ownerId: discussionMessageUserId,
+      textEditorString: JSON.stringify(message),
+      users,
+      commonId: discussionMessage.commonId,
+      directParent,
+      onUserClick,
+      onFeedItemClick,
+      onInternalLinkClick,
+    });
+
+    setParsedMessage(parsedText);
+    setEditedAtDate(new Date());
+    handleEditModeClose();
+  } catch(err) {
+    setIsMessageEditLoading(false);
+  }
   };
   updateMessageRef.current = {
     updateMessage,
@@ -520,7 +545,7 @@ const ChatMessage = ({
                   <ChatMessageLinkify
                     onInternalLinkClick={handleInternalLinkClick}
                   >
-                    {discussionMessage.parsedText.map((text) => text)}
+                    {(parsedMessage ?? []).map((text) => text)}
                   </ChatMessageLinkify>
                   {!isSystemMessage && (
                     <Time

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, useLayoutEffect } from "react";
 import classNames from "classnames";
 import { useCommonMembers } from "@/pages/OldCommon/hooks";
 import { Loader } from "@/shared/components";
@@ -13,6 +13,7 @@ import {
 import { parseStringToTextEditorValue } from "@/shared/ui-kit/TextEditor/utils";
 import { emptyFunction } from "@/shared/utils";
 import styles from "./EditMessageInput.module.scss";
+import { BaseTextEditorHandles } from "@/shared/ui-kit/TextEditor/BaseTextEditor";
 
 interface Props {
   discussionMessage: DiscussionMessage;
@@ -29,13 +30,20 @@ export default function EditMessageInput({
   isLoading,
   updateMessage,
 }: Props) {
+  const textInputRef = useRef<BaseTextEditorHandles>(null);
+  const editorRef = useRef<HTMLElement>(null);
+  const inputContainerRef = useRef<HTMLDivElement>(null);
   const [message, setMessage] = useState(() =>
     parseStringToTextEditorValue(discussionMessage.text),
   );
   const { data: commonMembers, fetchCommonMembers } = useCommonMembers({
     commonId: discussionMessage.commonId,
   });
 
+  useLayoutEffect(() => {
+    textInputRef?.current?.focus?.();
+  },[discussionMessage]);
+
   const handleMessageUpdate = () => {
     updateMessage(message);
   };
@@ -53,8 +61,9 @@ export default function EditMessageInput({
   }, [commonMember, commonMembers]);
 
   return (
-    <div className={styles.container}>
+    <div ref={inputContainerRef} className={styles.container}>
       <BaseTextEditor
+        ref={textInputRef}
         className={styles.input}
         emojiPickerContainerClassName={styles.pickerContainer}
         emojiContainerClassName={styles.emojiContainer}
@@ -64,6 +73,8 @@ export default function EditMessageInput({
         shouldReinitializeEditor={false}
         onClearFinished={emptyFunction}
         size={TextEditorSize.Auto}
+        inputContainerRef={inputContainerRef}
+        editorRef={editorRef}
       />
 
       <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
@@ -179,9 +179,18 @@ const BaseTextEditor = forwardRef<BaseTextEditorHandles, TextEditorProps>((props
   useImperativeHandle(ref, () => ({
     focus: () => {
       if (editorRef) {
+        const end = EditorSlate.end(editor, []);
+
+        // Move the selection to the end
+        Transforms.select(editor, end);
+
+        // Focus the editor DOM node
         const editorEl = ReactEditor.toDOMNode(editor, editor);
         editorEl.focus();
-      }
+
+        // Ensure the editor itself is focused programmatically
+        ReactEditor.focus(editor);
+      } 
     },
     clear: () => {
       clearInput();
@@ -265,7 +274,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();
       }
@@ -349,6 +359,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}>
@@ -367,7 +387,7 @@ const BaseTextEditor = forwardRef<BaseTextEditorHandles, TextEditorProps>((props
           disabled={disabled}
           onBlur={onBlur}
           onKeyDown={handleKeyDown}
-          scrollSelectionIntoView={scrollSelectionIntoView}
+          scrollSelectionIntoView={scrollSelectionIntoView ?? customScrollSelectionIntoView}
           elementStyles={elementStyles}
         />
         <EmojiPicker