chores: updates

src/assets/icons/message.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C10.3596 22 8.77516 21.6039 7.35578 20.8583L3.06538 21.9753C2.6111 22.0937 2.1469 21.8213 2.02858 21.367C1.99199 21.2266 1.99198 21.0791 2.02855 20.9386L3.1449 16.6502C2.3972 15.2294 2 13.6428 2 12C2 6.47715 6.47715 2 12 2Z" fill="#22CCEE"/>
+</svg>

src/common/component/MixedInput/index.js

@@ -1,7 +1,6 @@
 import { useRef, useEffect, useState, useCallback } from "react";
 import { useKey } from "rooks";
-import { useDispatch } from "react-redux";
-import { useSelector } from "react-redux";
+import { useDispatch, useSelector } from "react-redux";
 import { Editor, Transforms } from "slate";
 import {
   createPlateUI,
@@ -32,20 +31,6 @@ import { CONFIG } from "./config";
 import Contact from "../Contact";
 import { updateUploadFiles } from "../../../app/slices/ui";
 export const TEXT_EDITOR_PREFIX = "rustchat_text_editor";
-export const setEditorFocus = (edtr) => {
-  console.log("focus", edtr);
-  ReactEditor.focus(edtr);
-};
-export const clearEditorAndFocus = (edtr) => {
-  console.log("focus", edtr);
-
-  Transforms.delete(edtr, {
-    at: {
-      anchor: Editor.start(edtr, []),
-      focus: Editor.end(edtr, []),
-    },
-  });
-};
 
 let components = createPlateUI({
   // [ELEMENT_IMAGE]: ImageElement,
@@ -104,7 +89,12 @@ const Plugins = ({
       sendMessages(msgs);
       // 清空
       const plateEditor = getPlateEditorRef(`${TEXT_EDITOR_PREFIX}_${id}`);
-      clearEditorAndFocus(plateEditor);
+      Transforms.delete(plateEditor, {
+        at: {
+          anchor: Editor.start(plateEditor, []),
+          focus: Editor.end(plateEditor, []),
+        },
+      });
     },
     {
       // eventTypes: ["keydown"],
@@ -261,4 +251,22 @@ const Plugins = ({
     </Styled>
   );
 };
+
+export const useMixedEditor = (key) => {
+  const editorRef = getPlateEditorRef(`${TEXT_EDITOR_PREFIX}_${key}`);
+  const focus = () => {
+    if (editorRef) {
+      ReactEditor.focus(editorRef);
+    }
+  };
+  const insertText = (txt) => {
+    if (editorRef) {
+      editorRef.insertText(txt);
+    }
+  };
+  return {
+    focus,
+    insertText,
+  };
+};
 export default Plugins;

src/common/component/Send/EmojiPicker.js

@@ -1,40 +1,57 @@
-// import { useState } from "react";
-import Tippy from "@tippyjs/react";
+import { useState, useRef } from "react";
 import styled from "styled-components";
+import { useOutsideClick } from "rooks";
 import Tooltip from "../../component/Tooltip";
 const StyledBtn = styled.button`
+  position: relative;
   outline: none;
   width: fit-content;
   background: none;
   display: flex;
   align-items: center;
-  svg {
+  > svg {
     width: 22px;
     height: 22px;
   }
+  > .picker {
+    visibility: hidden;
+    position: absolute;
+    top: -20px;
+    left: -20px;
+    transform: translateY(-100%);
+    &.visible {
+      visibility: visible;
+    }
+  }
 `;
 import Picker from "../EmojiPicker";
 import SmileIcon from "../../../assets/icons/emoji.smile.svg";
 
 export default function EmojiPicker({ selectEmoji }) {
+  const ref = useRef();
+  const [visible, setVisible] = useState(false);
+
+  const openPicker = () => {
+    setVisible(true);
+  };
   const handleSelect = (emoji) => {
     selectEmoji(emoji.native);
   };
+  useOutsideClick(
+    ref,
+    () => {
+      setVisible(false);
+    },
+    visible
+  );
   return (
-    <Tooltip placement="top" tip="Emojis">
-      <Tippy
-        duration={0}
-        delay={[0, 0]}
-        offset={[-18, 25]}
-        interactive
-        placement="top-start"
-        trigger="click"
-        content={<Picker onSelect={handleSelect} />}
-      >
-        <StyledBtn>
-          <SmileIcon />
-        </StyledBtn>
-      </Tippy>
+    <Tooltip placement="top" tip="Emojis" disabled={visible}>
+      <StyledBtn>
+        <div ref={ref} className={`picker ${visible ? "visible" : ""}`}>
+          <Picker onSelect={handleSelect} />
+        </div>
+        <SmileIcon onClick={visible ? null : openPicker} />
+      </StyledBtn>
     </Tooltip>
   );
 }

src/common/component/Send/UploadFileList/index.js

@@ -1,6 +1,7 @@
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import Styled from "./styled";
+import { useMixedEditor } from "../../MixedInput";
 import EditFileDetailsModal from "./EditFileDetails";
 import { updateUploadFiles } from "../../../../app/slices/ui";
 import { getFileIcon, formatBytes } from "../../../utils";
@@ -8,10 +9,11 @@ import EditIcon from "../../../../assets/icons/edit.svg";
 import DeleteIcon from "../../../../assets/icons/delete.svg";
 
 export default function UploadFileList({ context = "", id = null }) {
+  const eidtor = useMixedEditor(`${context}_${id}`);
   const [editInfo, setEditInfo] = useState(null);
   const dispatch = useDispatch();
   const files = useSelector(
-    (store) => store.ui.uploadFiles[`${context}_${id}`]
+    (store) => store.ui.uploadFiles[`${context}_${id}`] || []
   );
   const toggleModalVisible = (info) => {
     setEditInfo((prev) => (prev ? null : info));
@@ -34,6 +36,10 @@ export default function UploadFileList({ context = "", id = null }) {
       updateUploadFiles({ context, id, operation: "update", index, name })
     );
   };
+  useEffect(() => {
+    eidtor.focus();
+  }, [files.length]);
+
   if (!context || !id || !files || files.length == 0) return null;
   console.log("upload files", files);
   return (

src/common/component/Send/index.js

@@ -2,7 +2,6 @@ import { useEffect, useState } from "react";
 // import TextareaAutosize from "react-textarea-autosize";
 import { useDispatch, useSelector } from "react-redux";
 // import { useKey } from "rooks";
-import { getPlateEditorRef } from "@udecode/plate";
 
 import useSendMessage from "../../hook/useSendMessage";
 import useAddLocalFileMessage from "../../hook/useAddLocalFileMessage";
@@ -17,7 +16,7 @@ import Toolbar from "./Toolbar";
 import EmojiPicker from "./EmojiPicker";
 
 import MarkdownEditor from "../MarkdownEditor";
-import MixedInput, { TEXT_EDITOR_PREFIX, setEditorFocus } from "../MixedInput";
+import MixedInput, { useMixedEditor } from "../MixedInput";
 const Types = {
   channel: "#",
   user: "@",
@@ -33,6 +32,7 @@ function Send({
   // 发给谁，或者是channel，或者是user
   id = "",
 }) {
+  const editor = useMixedEditor(`${context}_${id}`);
   const [markdownEditor, setMarkdownEditor] = useState(null);
   const dispatch = useDispatch();
   const addLocalFileMesage = useAddLocalFileMessage({ context, to: id });
@@ -51,12 +51,7 @@ function Send({
 
   useEffect(() => {
     if (replying_mid) {
-      const editorRef = getPlateEditorRef(
-        `${TEXT_EDITOR_PREFIX}_${context}_${id}`
-      );
-      if (editorRef) {
-        setEditorFocus(editorRef);
-      }
+      editor.focus();
     }
   }, [replying_mid]);
 
@@ -65,13 +60,7 @@ function Send({
       // markdown insert emoji
       markdownEditor.insertText(emoji);
     } else {
-      const editorRef = getPlateEditorRef(
-        `${TEXT_EDITOR_PREFIX}_${context}_${id}`
-      );
-      if (editorRef) {
-        // console.log("wtf", editorRef);
-        editorRef.insertText(emoji);
-      }
+      editor.insertText(emoji);
     }
   };
   const handleSendMessage = async (msgs = []) => {
@@ -136,7 +125,7 @@ function Send({
   return (
     <StyledSend className={`send ${replying_mid ? "reply" : ""} ${context}`}>
       {replying_mid && <Replying mid={replying_mid} id={id} />}
-      <UploadFileList context={context} id={id} />
+      {mode == Modes.text && <UploadFileList context={context} id={id} />}
 
       <div className={`send_box ${mode}`}>
         <EmojiPicker selectEmoji={insertEmoji} />