assistant-note/src/pages/Note/Hlexical/plugins/SaveFilePlugin.js

import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
import {Fragment, useEffect, useState} from "react";
import {importFile, overWriteFile, saveFileWithName} from "../../../../utils/File";
import {isEmpty} from "../../../../utils/ObjectUtils";
import {CLEAR_HISTORY_COMMAND} from "lexical";
import {TRANSFORMERS, $convertFromMarkdownString, $convertToMarkdownString,} from "@lexical/markdown";
import {getFileNameByPath} from "../../../../utils/PathOperate";
import {updatedSavedFile} from "../../../../redux/tableBarItem_reducer";
import {useDispatch, useSelector} from "react-redux";
import md5 from "md5"
import {message} from "antd";
const {ipcRenderer} = window.require('electron')
export default function SaveFilePlugin(props) {
  let activeKey = useSelector(state => state.tableBarItem.activeKey);
  const dispatch = useDispatch();
  const [messageApi,contextHolder] = message.useMessage();
  const [editor] = useLexicalComposerContext();
  const [editorState,setEditorState]=useState();

  function onChange(editorState) {
    if (props.filePath.endsWith(".md")){
      let read = editorState.read(() => $convertToMarkdownString(TRANSFORMERS));
      setEditorState(read)
    }else {
      // Call toJSON on the EditorState object, which produces a serialization safe string
      const editorStateJSON = editorState.toJSON();
      console.log('onChange-editorStateJSON')
      // However, we still have a JavaScript object, so we need to convert it to an actual string with JSON.stringify
      setEditorState(JSON.stringify(editorStateJSON));
    }
  }

  const saveFile = (event, args) => {
    console.log("event,args:", event, args)
    if (args !== "CTRL+S") {
      return
    }
    let filePath = props.filePath;
    if (filePath !== activeKey) {
      console.log("文件不同", filePath, activeKey)
      return;
    }
    console.log("触发保存filePath:", filePath)
    if (isEmpty(editorState)) {
      return
    }
    let resultSave;
    if (props.filePath.endsWith(".md")){
      resultSave=editorState
    }else {
      const editorStateSave = {"editorState": JSON.parse(editorState)};
      resultSave = JSON.stringify(editorStateSave);
    }

    // 如果文件地址为空需要用户选择目录并设置文件。
    if (!filePath) {
      let saveDialogReturnValuePromise = saveFileWithName();
      console.log("saveDialogReturnValuePromise", saveDialogReturnValuePromise)
      saveDialogReturnValuePromise.then(result => {
        if (!result.canceled) {
          let fileKey = getFileNameByPath(result.filePath)
          if (isEmpty(fileKey)){
            fileKey = fileKey+".lexical"
          }
          overWriteFile(fileKey, resultSave)
          // 修改当前文件名
          dispatch(updatedSavedFile({filePath: result.filePath}))
          // 文件目录更新
          dispatch()
        }
      })
      return
    }
    importFile(filePath).then(value => {
      let save
      if (props.filePath.endsWith(".md")){
        // editorState
        save = (isEmpty(value)) || md5(resultSave) !== md5(value.toString());
      }else {
        save = (isEmpty(value)) || md5(resultSave) !== md5(JSON.stringify(JSON.parse(value.toString())));
      }

      if (save) {
        overWriteFile(filePath, resultSave)
        console.log("保存成功"+ filePath)
        messageApi.open({type:"success",content:"保存成功：" + filePath})
      }
    }).catch(error =>
        console.error(error)
    )
  }

  useEffect(() => {
        ipcRenderer.on("pushHotkeys", saveFile);
        let updateListener = editor.registerUpdateListener(({editorState}) => {
          console.log("SaveFilePlugin:editorState",editorState)
          onChange(editorState);
        })
        return () => {
          console.log("销毁取消监听");
          updateListener()
          ipcRenderer.removeListener("pushHotkeys", saveFile)
        };
      },[editor,onChange]
  )
  return (
      <Fragment>
        {contextHolder}
      </Fragment>
  )
}