feat:保存文件使用ipcRenderer

src/App.js

@@ -28,7 +28,7 @@ function App() {
   const element = useRoutes(routes)
   useIpcRenderer({'redirectUrl':redirectUrl})
   useIpcRenderer({'openDirectory':addNewDir})
-  useIpcRenderer({'pushHotkeys':pushHotkeysAction})
+  // useIpcRenderer({'pushHotkeys':pushHotkeysAction})
   return (
     <>
       {/* 注册路由 */}

src/pages/Note/Hlexical/index.jsx

@@ -13,24 +13,27 @@ import {ListItemNode, ListNode} from "@lexical/list";
 import {CodeHighlightNode, CodeNode, $createCodeNode, $isCodeNode} from "@lexical/code";
 import {AutoLinkNode, LinkNode} from "@lexical/link";
 import {MarkdownShortcutPlugin} from "@lexical/react/LexicalMarkdownShortcutPlugin";
-import {TRANSFORMERS,    $convertFromMarkdownString,
+import {
-    $convertToMarkdownString,} from "@lexical/markdown";
+    TRANSFORMERS, $convertFromMarkdownString,
+    $convertToMarkdownString,
+} from "@lexical/markdown";
 import "./index.less"
 import {useEffect, useId, useState} from 'react';
 import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
 import {importFile, overWriteFile, saveFileWithName} from "../../../utils/File"
 import {$getRoot, CLEAR_HISTORY_COMMAND, $createTextNode,} from "lexical";
-import {store} from "../../../redux/store";
-import {SAVE} from "../../../utils/HotkeyConst";
 import md5 from "md5"
 import {isEmpty} from "../../../utils/ObjectUtils";
-import {useDispatch} from "react-redux";
+import {useDispatch, useSelector} from "react-redux";
 import {updatedSavedFile} from "../../../redux/tableBarItem_reducer";
 import {ListPlugin} from "@lexical/react/LexicalListPlugin";
 import {LinkPlugin} from "@lexical/react/LexicalLinkPlugin";
 import AutoLinkPlugin from "./plugins/AutoLinkPlugin";
 import ListMaxIndentLevelPlugin from "./plugins/ListMaxIndentLevelPlugin";
 import CodeHighlightPlugin from "./plugins/CodeHighlightPlugin";
+
+const {ipcRenderer} = window.require('electron')
+
 function Placeholder() {
     return <div className="editor-placeholder">Enter some rich text...</div>;
 }
@@ -113,10 +116,10 @@ function ImportFilePlugin(props) {
 // editor.setEditorState(editorState);
 
 export default function Hlexical(props) {
-    console.log("this.props.filePath:", props.filePath)
+    console.log("Hlexical(props):this.props.filePath:", props.filePath)
-    const [editorState, setEditorState] = useState("");
+    const [editorState, setEditorState] = useState();
-    const [lastId ,setLastId]= useState("");
     const dispatch = useDispatch();
+
     function onChange(editorState) {
         // Call toJSON on the EditorState object, which produces a serialization safe string
         const editorStateJSON = editorState.toJSON();
@@ -125,22 +128,33 @@ export default function Hlexical(props) {
         setEditorState(JSON.stringify(editorStateJSON));
     }
 
-    function SaveFilePlugin(props) {
+    let pushHotKey = useSelector(state => state.pushHotkeys.data);
-        useEffect(()=>{
+    let activeKey = useSelector(state => state.tableBarItem.activeKey);
-            let unsubscribe = store.subscribe(() => {
+    const saveFile = (event, args) => {
-                let filePath =props.filePath;
+        console.log("event,args:", event, args)
-                console.log("触发保存filePath:",filePath)
+        console.log("触发保存pushHotKey:", pushHotKey)
-                if (isEmpty(props.editorState)) {
+        if (pushHotKey !== "CTRL+S") {
             return
         }
+        let filePath = props.filePath;
+        if (filePath !== activeKey) {
+            console.log("文件不同", filePath, activeKey)
+            return;
+        }
+        console.log("触发保存filePath:", filePath)
+        if (isEmpty(editorState)) {
+            return
+        }
+        const editorStateSave = {"editorState": JSON.parse(editorState)};
+        let resultSave = JSON.stringify(editorStateSave);
+
         // 如果文件地址为空需要用户选择目录并设置文件。
         if (!filePath) {
             let saveDialogReturnValuePromise = saveFileWithName();
             console.log("saveDialogReturnValuePromise", saveDialogReturnValuePromise)
             saveDialogReturnValuePromise.then(result => {
                 if (!result.canceled) {
-                            const editorStateSave = {"editorState": JSON.parse(props.editorState)};
+
-                            let resultSave = JSON.stringify(editorStateSave);
                     overWriteFile(result.filePath, resultSave)
                     // 修改当前文件名
                     dispatch(updatedSavedFile({filePath: result.filePath}))
@@ -148,28 +162,25 @@ export default function Hlexical(props) {
             })
             return
         }
-
-                const editorStateSave = {"editorState": JSON.parse(props.editorState)};
-                let resultSave = JSON.stringify(editorStateSave);
-                console.log("lastId", lastId)
-                if ((lastId === "" || lastId !== store.getState().pushHotkeys.id) && store.getState().pushHotkeys.data === SAVE) {
-                    setLastId(store.getState().pushHotkeys.id);
         importFile(filePath).then(value => {
             let save = (isEmpty(value)) || md5(resultSave) !== md5(JSON.stringify(JSON.parse(value.toString())));
             if (save) {
-                            console.log("保存重写")
+                console.log("保存重写" + filePath)
                 overWriteFile(filePath, resultSave)
             }
         }).catch(error =>
             console.error(error)
         )
     }
-            });
+    useEffect(() => {
-            console.log("return unsubscribe();")
+            ipcRenderer.on("pushHotkeys", saveFile);
-            return ()=>unsubscribe();
+            return () => {
-        },[])
+                console.log("销毁取消监听");
-
+                ipcRenderer.removeListener("pushHotkeys", saveFile)
+            };
         }
+    )
+
 
     return (
         <LexicalComposer initialConfig={editorConfig}>
@@ -196,7 +207,6 @@ export default function Hlexical(props) {
                     <MarkdownShortcutPlugin transformers={TRANSFORMERS}/>
                     <OnChangePlugin onChange={onChange}/>
                     <ImportFilePlugin filePath={props.filePath}/>
-                    <SaveFilePlugin filePath={props.filePath} editorState={editorState}/>
                     {/*文件操作导入文件*/}
                     {/*<ActionPlugin/>*/}
                 </div>