feat: electron 保存触发一次

2024-02-01 10:36:30 +08:00 · 2024-02-01 10:36:30 +08:00 · beef468477
parent 615c7b30ba
commit beef468477
7 changed files with 70 additions and 88 deletions
--- a/main.js
+++ b/main.js
@ -1,18 +1,15 @@
-// npm start
-const { app,Menu, BrowserWindow } = require('electron')
+const {app, Menu, BrowserWindow} = require('electron')
 const path = require('path')
 const {menuRebuild} = require('./src/comment/TopMenu.js')
-// const {SAVE} = require("./src/utils/HotkeyConst");
-// const {PUSH_HOTKEY} = require("./src/utils/MainContentsChannel");
 const createWindow = () => {
    // Create the browser window.
    const win = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
-            nodeIntegration:true,
+            nodeIntegration: true,
            // 启用后nodeIntegration会无效
-            contextIsolation:false,
+            contextIsolation: false,
            preload: path.join(__dirname, 'preload.js')
        }
    })
@ -21,20 +18,31 @@ const createWindow = () => {
    win.loadURL('http://localhost:3000')
    // 打开开发工具
    win.webContents.openDevTools()
+    // let okPush =false
+    let devToolPush = false
    win.webContents.on('before-input-event', (event, input) => {
-        if (input.control && input.key.toLowerCase() === 's') {
-            console.log("win.webContents.send(\"pushHotkeys\",\"CTRL+S\")")
-            win.webContents.send("pushHotkeys","CTRL+S")
-            // event.preventDefault()
+        console.log("input.type.toLowerCase()", input)
+        if (input.control && input.key.toLowerCase() === 's' && input.type.toLowerCase() === "keydown" && input.isAutoRepeat === false) {
+            // if (input.type.toLowerCase()==="keydown"&& !okPush){
+            win.webContents.send("pushHotkeys", "CTRL+S")
+            console.log("pushHotkeys", "CTRL+S", input.type)
+            // }
+            event.preventDefault()
        }
-        console.log('Pressed ',input.key)
-        if (input.key.toUpperCase()==='F5'){
+        // console.log('Pressed ',input.key)
+        if (input.key.toUpperCase() === 'F5') {
            win.reload()
        }
-        if (input.key.toUpperCase()==='F12'){
-            if (win.webContents.isDevToolsOpened()){
+        if (input.key.toUpperCase() === 'F12') {
+            if (input.type.toLowerCase() === "keydown") {
+                devToolPush = true;
+            } else {
+                devToolPush = false;
+            }
+            if (win.webContents.isDevToolsOpened() && !devToolPush) {
                win.webContents.closeDevTools()
-            }else {
+            }
+            if (!win.webContents.isDevToolsOpened() && !devToolPush) {
                win.webContents.openDevTools()
            }
        }
@ -51,7 +59,7 @@ app.whenReady().then(() => {
    // 点击托盘图标时通常会重新创建一个新窗口
    app.on('activate', () => {
        if (BrowserWindow.getAllWindows().length === 0) createWindow()
-      })
+    })
 })
 // 除了 macOS 外，当所有窗口都被关闭的时候退出程序。 因此, 通常
 // 对应用程序和它们的菜单栏来说应该时刻保持激活状态, 
--- a/package-lock.json
+++ b/package-lock.json
@ -39,7 +39,7 @@
        "formik": "^2.2.9",
        "lexical": "^0.12.2",
        "localStorage": "^1.0.4",
-        "nanoid": "^4.0.1",
+        "nanoid": "^4.0.2",
        "prop-types": "^15.8.1",
        "react": "^18.2.0",
        "react-dom": "^18.2.0",
--- a/package.json
+++ b/package.json
@ -29,7 +29,7 @@
    "formik": "^2.2.9",
    "lexical": "^0.12.2",
    "localStorage": "^1.0.4",
-    "nanoid": "^4.0.1",
+    "nanoid": "^4.0.2",
    "prop-types": "^15.8.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
--- a/src/App.js
+++ b/src/App.js
@ -1,4 +1,4 @@
-import React from 'react';
+import React, {useId} from 'react';
 import routes from './routes'
 import {Outlet, useNavigate, useRoutes} from 'react-router-dom'
 import useIpcRenderer from '../src/utils/useIpcRenderer'
--- a/src/comment/TopMenu.js
+++ b/src/comment/TopMenu.js
@ -68,6 +68,12 @@ exports.menuRebuild = (mainWindow) => {
                        })
                    }
                },
+                {
+                    label: '保存文件',
+                    accelerator: 'Ctrl+S',
+                    click: () => { // console.log('Electron rocks!')
+                    }
+                },
                {
                    label: '全部应用',
                    click: () => {
--- a/src/pages/Note/Hlexical/index.jsx
+++ b/src/pages/Note/Hlexical/index.jsx
@ -7,28 +7,19 @@ import {AutoFocusPlugin} from "@lexical/react/LexicalAutoFocusPlugin";
 import LexicalErrorBoundary from "@lexical/react/LexicalErrorBoundary";
 import TreeViewPlugin from "./plugins/TreeViewPlugin";
 import ToolbarPlugin from "./plugins/ToolbarPlugin";
-import {Button} from "antd";
 import {HeadingNode, QuoteNode} from "@lexical/rich-text";
 import {TableCellNode, TableNode, TableRowNode} from "@lexical/table";
 import {ListItemNode, ListNode} from "@lexical/list";
 import {CodeHighlightNode, CodeNode} from "@lexical/code";
 import {AutoLinkNode, LinkNode} from "@lexical/link";
-import {LinkPlugin} from "@lexical/react/LexicalLinkPlugin";
-import {ListPlugin} from "@lexical/react/LexicalListPlugin";
 import {MarkdownShortcutPlugin} from "@lexical/react/LexicalMarkdownShortcutPlugin";
 import {TRANSFORMERS} from "@lexical/markdown";
 import "./index.less"
-import ListMaxIndentLevelPlugin from "./plugins/ListMaxIndentLevelPlugin";
-import CodeHighlightPlugin from "./plugins/CodeHighlightPlugin";
-import AutoLinkPlugin from "./plugins/AutoLinkPlugin";
-import {useEffect, useState} from 'react';
+import {useEffect, useId, useState} from 'react';
 import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
 import {importFile, overWriteFile} from "../../../utils/File"
 import {CLEAR_HISTORY_COMMAND} from "lexical";
-import ActionPlugin from "../../../components/ActionPlug"
-import {func} from "prop-types";
 import store from "../../../redux/store";
-
 import {SAVE} from "../../../utils/HotkeyConst";
 import md5 from "md5"
 import {isEmpty} from "../../../utils/ObjectUtils";
@ -85,43 +76,15 @@ function ImportFilePlugin(props) {
    }, [])
 }

-function SaveFilePlugin(props) {
-    useEffect(() => {
-        store.subscribe(() => {
-            console.log("触发保存")
-            let data = store.getState().pushHotkeys.data;
-            console.log("props.editorState",props.editorState)
-            if (isEmpty(props.editorState)){
-                return
-            }
-            const editorState = {"editorState":JSON.parse(props.editorState)};
-            let resultSave = JSON.stringify(editorState);
-            console.log("data === SAVE",data,SAVE,data === SAVE)
-            if (data === SAVE) {
-                importFile(props.filePath).then(value => {
-                    let save = md5(resultSave)!==md5(JSON.stringify(JSON.parse(value.toString())));
-                    console.log("md5(resultSave)!==md5(JSON.stringify(JSON.parse(value.toString())))",resultSave,save)
-                    if (save){
-                        console.log("保存重写")
-                        overWriteFile(props.filePath, resultSave)
-                    }
-                }).catch(error =>
-                    console.error(error)
-                )
-
-            }
-        })
-    }, props)
-}

 // 从字符串化 JSON 设置编辑器状态
 // const editorState = editor.parseEditorState(editorStateJSONString);
 // editor.setEditorState(editorState);

 export default function Hlexical(props) {
-    console.log("this.props.filePath:", props.filePath)
-    const [editorState, setEditorState] = useState();
-
+    console.log("this.props.filePath=============:", props.filePath)
+    const [editorState, setEditorState] = useState("");
+    const [lastId ,setLastId]= useState("");
    function onChange(editorState) {
        // Call toJSON on the EditorState object, which produces a serialization safe string
        const editorStateJSON = editorState.toJSON();
@ -130,31 +93,32 @@ export default function Hlexical(props) {
        setEditorState(JSON.stringify(editorStateJSON));
    }

-    store.subscribe(() => {
-        console.log("触发保存")
-        let data = store.getState().pushHotkeys.data;
-        console.log("props.editorState",editorState)
-        if (isEmpty(editorState)){
-            return
-        }
-        const editorStateSave = {"editorState":JSON.parse(editorState)};
-        console.log("editorStateSave",editorStateSave)
-        let resultSave = JSON.stringify(editorStateSave);
-        console.log("data === SAVE",resultSave,data === SAVE)
-        if (data === SAVE) {
-            importFile(props.filePath).then(value => {
-                let save = md5(resultSave)!==md5(JSON.stringify(JSON.parse(value.toString())));
-                console.log("md5(resultSave)!==md5(JSON.stringify(JSON.parse(value.toString())))",resultSave,save)
-                if (save){
-                    console.log("保存重写")
-                    overWriteFile(props.filePath, resultSave)
-                }
-            }).catch(error =>
-                console.error(error)
-            )
-
-        }
-    })
+    function SaveFilePlugin(props) {
+        let unsubscribe = store.subscribe(() => {
+            console.log("触发保存")
+            console.log("props.editorState", props)
+            if (isEmpty(props.editorState)) {
+                return
+            }
+            const editorStateSave = {"editorState": JSON.parse(props.editorState)};
+            let resultSave = JSON.stringify(editorStateSave);
+            console.log("store.getState().pushHotkeys", store.getState().pushHotkeys)
+            console.log("lastId", lastId)
+            if ((lastId === "" || lastId !== store.getState().pushHotkeys.id) && store.getState().pushHotkeys.data === SAVE) {
+                setLastId(store.getState().pushHotkeys.id);
+                importFile(props.filePath).then(value => {
+                    let save = md5(resultSave) !== md5(JSON.stringify(JSON.parse(value.toString())));
+                    console.log("md5(resultSave)!==md5(JSON.stringify(JSON.parse(value.toString())))", resultSave, save)
+                    if (save) {
+                        console.log("保存重写")
+                        overWriteFile(props.filePath, resultSave)
+                    }
+                }).catch(error =>
+                    console.error(error)
+                )
+            }
+        });
+    }

    return (
        <LexicalComposer initialConfig={editorConfig}>
@ -179,7 +143,7 @@ export default function Hlexical(props) {
                    <MarkdownShortcutPlugin transformers={TRANSFORMERS}/>
                    <OnChangePlugin onChange={onChange}/>
                    <ImportFilePlugin filePath={props.filePath}/>
-                    {/*<SaveFilePlugin filePath={props.filePath} editorState={editorState} />*/}
+                    <SaveFilePlugin filePath={props.filePath} editorState={editorState}/>
                    {/*<ActionPlugin/>*/}
                </div>
            </div>
--- a/src/redux/pushHotkeys_reducer.js
+++ b/src/redux/pushHotkeys_reducer.js
@ -1,15 +1,19 @@
 import { createSlice } from '@reduxjs/toolkit'
+import {nanoid} from "nanoid";

 export const pushHotkeysSlice = createSlice({
    name: 'pushHotkeys',
    initialState: {
-        data: ""
+        data: "",
+        id: nanoid()
    },
    reducers: {
        pushHotkeys: (state, action) => {
-            console.log("pushHotkeys:pushHotkeys", state, action)
+            console.log("pushHotkeys:pushHotkeys---------state", state)
+            console.log("pushHotkeys:pushHotkeys---------action", action)
            if(action.payload){
                state.data = action.payload;
+                state.id = nanoid();
            }
        }
    }