feat: message draft

src/common/component/MarkdownEditor/index.js

@@ -11,6 +11,8 @@ import useUploadFile from "../../hook/useUploadFile";
 import Button from "../../component/styled/Button";
 
 function MarkdownEditor({
+  updateDraft = null,
+  initialValue = "",
   height = "50vh",
   placeholder,
   sendMarkdown,
@@ -33,6 +35,11 @@ function MarkdownEditor({
     return () => {
       if (editor) {
         const editorInstance = editor.getInstance();
+        const md = editorInstance.getMarkdown();
+        if (updateDraft) {
+          updateDraft(md);
+        }
+        console.log("mmmm", md);
         editorInstance.destroy();
       }
     };
@@ -49,6 +56,7 @@ function MarkdownEditor({
   return (
     <StyledWrapper className="input">
       <Editor
+        initialValue={initialValue}
         plugins={[codeSyntaxHighlight]}
         placeholder={placeholder}
         // onChange={handleChange}

src/common/component/MixedInput/index.js

@@ -21,6 +21,7 @@ import {
   createPlugins,
   ELEMENT_PARAGRAPH,
   getPlateEditorRef,
+
   // usePlateEditorRef,
   // ELEMENT_IMAGE,
   MentionCombobox,
@@ -37,8 +38,10 @@ let components = createPlateUI({
   // [ELEMENT_IMAGE]: ImageElement,
   // customize your components by plugin key
 });
-const initialValue = [{ type: ELEMENT_PARAGRAPH, children: [{ text: "" }] }];
+const initials = [{ type: ELEMENT_PARAGRAPH, children: [{ text: "" }] }];
 const Plugins = ({
+  updateDraft = null,
+  initialValue = initials,
   id = "",
   placeholder = "Write some markdown...",
   sendMessages,
@@ -48,6 +51,7 @@ const Plugins = ({
   const enableMentions = members.length > 0;
   const filesRef = useRef([]);
   const contactData = useSelector((store) => store.contacts.byId);
+  const [originalValue, setOriginalValue] = useState(initialValue);
   const [msgs, setMsgs] = useState([]);
   const [cmdKey, setCmdKey] = useState(false);
   const editableRef = useRef(null);
@@ -78,6 +82,9 @@ const Plugins = ({
     };
     // window.addEventListener("paste")
   }, []);
+  useEffect(() => {
+    updateDraft(originalValue);
+  }, [originalValue]);
 
   useKey(
     "Enter",
@@ -147,6 +154,7 @@ const Plugins = ({
 
   const handleChange = useCallback(
     async (val) => {
+      setOriginalValue(val);
       console.log("tmps changed", val);
       const tmps = [];
       const getMixedText = (children) => {

src/common/component/Send/index.js

@@ -17,6 +17,7 @@ import EmojiPicker from "./EmojiPicker";
 
 import MarkdownEditor from "../MarkdownEditor";
 import MixedInput, { useMixedEditor } from "../MixedInput";
+import useDraft from "../../hook/useDraft";
 const Types = {
   channel: "#",
   user: "@",
@@ -30,6 +31,7 @@ function Send({
   context = "channel",
   id = "",
 }) {
+  const { getDraft, getUpdateDraft } = useDraft({ context, id });
   const editor = useMixedEditor(`${context}_${id}`);
   const [markdownEditor, setMarkdownEditor] = useState(null);
   const [markdownFullscreen, setMarkdownFullscreen] = useState(false);
@@ -155,6 +157,8 @@ function Send({
         <EmojiPicker selectEmoji={insertEmoji} />
         {mode == Modes.text && (
           <MixedInput
+            updateDraft={getUpdateDraft()}
+            initialValue={getDraft()}
             members={members}
             id={`${context}_${id}`}
             placeholder={placeholder}
@@ -171,6 +175,8 @@ function Send({
         />
         {mode == Modes.markdown && (
           <MarkdownEditor
+            updateDraft={getUpdateDraft("markdown")}
+            initialValue={getDraft("markdown")}
             height={markdownFullscreen ? `calc(100vh - 168px)` : `30vh`}
             placeholder={placeholder}
             setEditorInstance={setMarkdownEditor}

src/common/hook/useDraft.js

@@ -0,0 +1,24 @@
+// import React from 'react'
+import { useDispatch, useSelector } from "react-redux";
+import { updateDraftMarkdown, updateDraftMixedText } from "../../app/slices/ui";
+export default function useDraft({ context = "", id = "" }) {
+  const dispatch = useDispatch();
+  const _key = `${context}_${id}`;
+  const { draftMarkdown, draftMixedText } = useSelector((store) => {
+    return {
+      draftMarkdown: store.ui.draftMarkdown,
+      draftMixedText: store.ui.draftMixedText,
+    };
+  });
+
+  const getUpdateDraft = (type = "mixed") => {
+    const update = type == "mixed" ? updateDraftMixedText : updateDraftMarkdown;
+    return (value) => {
+      dispatch(update({ key: _key, value }));
+    };
+  };
+  const getDraft = (type = "mixed") => {
+    return type == "mixed" ? draftMixedText[_key] : draftMarkdown[_key];
+  };
+  return { getDraft, getUpdateDraft };
+}