chore: rename type to context

src/common/component/Send/Toolbar.js

@@ -34,7 +34,7 @@ const Styled = styled.div`
     }
   }
 `;
-export default function Toolbar({ toggleMode, mode, to, type }) {
+export default function Toolbar({ toggleMode, mode, to, context }) {
   const [files, setFiles] = useState([]);
   const fileInputRef = useRef(null);
   const resetFiles = () => {
@@ -51,7 +51,7 @@ export default function Toolbar({ toggleMode, mode, to, type }) {
     <>
       {files.length !== 0 && (
         <UploadModal
-          type={type}
+          context={context}
           files={files}
           sendTo={to}
           closeModal={resetFiles}

src/common/component/Send/index.js

@@ -1,4 +1,4 @@
-import { memo } from "react";
+import { useEffect, useState } from "react";
 // import TextareaAutosize from "react-textarea-autosize";
 import { useDispatch, useSelector } from "react-redux";
 // import { useKey } from "rooks";
@@ -14,8 +14,7 @@ import Toolbar from "./Toolbar";
 import EmojiPicker from "./EmojiPicker";
 
 import MarkdownEditor from "../MarkdownEditor";
-// import MarkdownInput from "../MarkdownInput";
-import MixedInput, { TEXT_EDITOR_PREFIX } from "../MixedInput";
+import MixedInput, { TEXT_EDITOR_PREFIX, setEditorFocus } from "../MixedInput";
 const Types = {
   channel: "#",
   user: "@",
@@ -26,11 +25,11 @@ const Modes = {
 };
 function Send({
   name,
-  type = "channel",
+  context = "channel",
   // 发给谁，或者是channel，或者是user
   id = "",
 }) {
-  // const editorRef = usePlateEditorRef(`${TEXT_EDITOR_PREFIX}_${type}_${id}`);
+  const [markdownEditor, setMarkdownEditor] = useState(null);
   const [replyMessage] = useReplyMessageMutation();
   const dispatch = useDispatch();
   // 谁发的
@@ -44,35 +43,52 @@ function Send({
 
   const [sendMsg] = useSendMsgMutation();
   const [sendChannelMsg] = useSendChannelMsgMutation();
-  const sendMessage = type == "channel" ? sendChannelMsg : sendMsg;
+  const sendMessage = context == "channel" ? sendChannelMsg : sendMsg;
   // const sendingMessage = userSending || channelSending;
+  useEffect(() => {
+    if (replying_mid) {
+      const editorRef = getPlateEditorRef(
+        `${TEXT_EDITOR_PREFIX}_${context}_${id}`
+      );
+      if (editorRef) {
+        setEditorFocus(editorRef);
+      }
+    }
+  }, [replying_mid]);
+
   const insertEmoji = (emoji) => {
-    console.log("insert emoji", emoji);
-    const editorRef = getPlateEditorRef(`${TEXT_EDITOR_PREFIX}_${type}_${id}`);
-    if (editorRef) {
-      console.log("wtf", editorRef);
-      editorRef.insertText(emoji);
+    if (mode == Modes.markdown && markdownEditor) {
+      // markdown insert emoji
+      markdownEditor.insertText(emoji);
+    } else {
+      const editorRef = getPlateEditorRef(
+        `${TEXT_EDITOR_PREFIX}_${context}_${id}`
+      );
+      if (editorRef) {
+        // console.log("wtf", editorRef);
+        editorRef.insertText(emoji);
+      }
     }
   };
   const handleSendMessage = async (msgs = []) => {
     if (!msgs || msgs.length == 0 || !id) return;
     for await (const msg of msgs) {
-      const { type, value: content } = msg;
+      const { type: content_type, value: content } = msg;
       if (replying_mid) {
         console.log("replying", replying_mid);
         await replyMessage({
           id,
           reply_mid: replying_mid,
-          type,
+          type: content_type,
           content,
-          context: type,
+          context,
           from_uid,
         });
         dispatch(removeReplyingMessage(id));
       } else {
         await sendMessage({
           id,
-          type,
+          type: content_type,
           content,
           from_uid,
           properties: { local_id: new Date().getTime() },
@@ -92,32 +108,33 @@ function Send({
   const toggleMode = () => {
     dispatch(updateInputMode(mode == Modes.text ? Modes.markdown : Modes.text));
   };
+  const placeholder = `Send to ${Types[context]}${name} `;
   return (
     <StyledSend
-      className={`send ${mode} ${replying_mid ? "reply" : ""} ${type}`}
+      className={`send ${mode} ${replying_mid ? "reply" : ""} ${context}`}
     >
       {replying_mid && <Replying mid={replying_mid} id={id} />}
       <EmojiPicker selectEmoji={insertEmoji} />
       {mode == Modes.text && (
         <MixedInput
-          id={`${type}_${id}`}
-          placeholder={`Send to ${Types[type]}${name} `}
+          id={`${context}_${id}`}
+          placeholder={placeholder}
           sendMessages={handleSendMessage}
         />
       )}
-      {/* <MarkdownInput placeholder={`Send to ${Types[type]}${name} `} /> */}
-      <Toolbar type={type} to={id} mode={mode} toggleMode={toggleMode} />
+      <Toolbar context={context} to={id} mode={mode} toggleMode={toggleMode} />
       {mode == Modes.markdown && (
         <MarkdownEditor
-          placeholder={`Send to ${Types[type]}${name} `}
-          // updateMarkdown={setMarkdown}
+          placeholder={placeholder}
+          setEditorInstance={setMarkdownEditor}
           sendMarkdown={sendMarkdown}
         />
       )}
     </StyledSend>
   );
 }
-export default memo(Send, (prevs, nexts) => {
-  console.log("send name", prevs.name, nexts.name);
-  return prevs.name == nexts.name;
-});
+export default Send;
+// export default memo(Send, (prevs, nexts) => {
+//   console.log("send name", prevs.name, nexts.name);
+//   return prevs.name == nexts.name;
+// });

src/common/component/UploadModal/index.js

@@ -9,7 +9,7 @@ import { isTreatAsImage } from "../../utils";
 import StyledWrapper from "./styled";
 
 export default function UploadModal({
-  type = "user",
+  context = "user",
   sendTo = 0,
   files = [],
   closeModal,
@@ -20,7 +20,7 @@ export default function UploadModal({
     isSending: isSendingImage,
     isSuccess: sendImageSuccess,
   } = useSendImageMessage({
-    context: type,
+    context,
     from: from_uid,
     to: sendTo,
   });
@@ -30,7 +30,7 @@ export default function UploadModal({
     isSending: isSendingFile,
     isSuccess: sendFileSuccess,
   } = useSendFileMessage({
-    context: type,
+    context,
     from: from_uid,
     to: sendTo,
   });