feat:保存文件使用ipcRenderer
This commit is contained in:
parent
4a163039a8
commit
245c4df326
|
|
@ -28,7 +28,7 @@ function App() {
|
|||
const element = useRoutes(routes)
|
||||
useIpcRenderer({'redirectUrl':redirectUrl})
|
||||
useIpcRenderer({'openDirectory':addNewDir})
|
||||
useIpcRenderer({'pushHotkeys':pushHotkeysAction})
|
||||
// useIpcRenderer({'pushHotkeys':pushHotkeysAction})
|
||||
return (
|
||||
<>
|
||||
{/* 注册路由 */}
|
||||
|
|
|
|||
|
|
@ -10,27 +10,30 @@ import ToolbarPlugin from "./plugins/ToolbarPlugin";
|
|||
import {HeadingNode, QuoteNode} from "@lexical/rich-text";
|
||||
import {TableCellNode, TableNode, TableRowNode} from "@lexical/table";
|
||||
import {ListItemNode, ListNode} from "@lexical/list";
|
||||
import {CodeHighlightNode, CodeNode,$createCodeNode, $isCodeNode} from "@lexical/code";
|
||||
import {CodeHighlightNode, CodeNode, $createCodeNode, $isCodeNode} from "@lexical/code";
|
||||
import {AutoLinkNode, LinkNode} from "@lexical/link";
|
||||
import {MarkdownShortcutPlugin} from "@lexical/react/LexicalMarkdownShortcutPlugin";
|
||||
import {TRANSFORMERS, $convertFromMarkdownString,
|
||||
$convertToMarkdownString,} from "@lexical/markdown";
|
||||
import {
|
||||
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>;
|
||||
}
|
||||
|
|
@ -71,12 +74,12 @@ function OnChangePlugin({onChange}) {
|
|||
function ImportFilePlugin(props) {
|
||||
const [editor] = useLexicalComposerContext();
|
||||
useEffect(() => {
|
||||
if (props.filePath){
|
||||
if (props.filePath) {
|
||||
importFile(props.filePath).then(value => {
|
||||
if (isEmpty(value)){
|
||||
if (isEmpty(value)) {
|
||||
return
|
||||
}
|
||||
if (props.filePath.endsWith(".md")){
|
||||
if (props.filePath.endsWith(".md")) {
|
||||
const root = $getRoot();
|
||||
const firstChild = root.getFirstChild();
|
||||
if ($isCodeNode(firstChild) && firstChild.getLanguage() === 'markdown') {
|
||||
|
|
@ -93,7 +96,7 @@ function ImportFilePlugin(props) {
|
|||
);
|
||||
}
|
||||
root.selectEnd();
|
||||
}else {
|
||||
} else {
|
||||
const editorState = editor.parseEditorState(
|
||||
JSON.stringify(JSON.parse(value.toString()).editorState)
|
||||
);
|
||||
|
|
@ -113,10 +116,10 @@ function ImportFilePlugin(props) {
|
|||
// editor.setEditorState(editorState);
|
||||
|
||||
export default function Hlexical(props) {
|
||||
console.log("this.props.filePath:", props.filePath)
|
||||
const [editorState, setEditorState] = useState("");
|
||||
const [lastId ,setLastId]= useState("");
|
||||
console.log("Hlexical(props):this.props.filePath:", props.filePath)
|
||||
const [editorState, setEditorState] = useState();
|
||||
const dispatch = useDispatch();
|
||||
|
||||
function onChange(editorState) {
|
||||
// Call toJSON on the EditorState object, which produces a serialization safe string
|
||||
const editorStateJSON = editorState.toJSON();
|
||||
|
|
@ -125,51 +128,59 @@ export default function Hlexical(props) {
|
|||
setEditorState(JSON.stringify(editorStateJSON));
|
||||
}
|
||||
|
||||
function SaveFilePlugin(props) {
|
||||
useEffect(()=>{
|
||||
let unsubscribe = store.subscribe(() => {
|
||||
let filePath =props.filePath;
|
||||
console.log("触发保存filePath:",filePath)
|
||||
if (isEmpty(props.editorState)) {
|
||||
let pushHotKey = useSelector(state => state.pushHotkeys.data);
|
||||
let activeKey = useSelector(state => state.tableBarItem.activeKey);
|
||||
const saveFile = (event, args) => {
|
||||
console.log("event,args:", event, args)
|
||||
console.log("触发保存pushHotKey:", pushHotKey)
|
||||
if (pushHotKey !== "CTRL+S") {
|
||||
return
|
||||
}
|
||||
// 如果文件地址为空需要用户选择目录并设置文件。
|
||||
if (!filePath){
|
||||
let saveDialogReturnValuePromise = saveFileWithName();
|
||||
console.log("saveDialogReturnValuePromise",saveDialogReturnValuePromise)
|
||||
saveDialogReturnValuePromise.then(result=>{
|
||||
if (!result.canceled){
|
||||
const editorStateSave = {"editorState": JSON.parse(props.editorState)};
|
||||
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) {
|
||||
|
||||
overWriteFile(result.filePath, resultSave)
|
||||
// 修改当前文件名
|
||||
dispatch(updatedSavedFile({filePath:result.filePath}))
|
||||
dispatch(updatedSavedFile({filePath: result.filePath}))
|
||||
}
|
||||
})
|
||||
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())));
|
||||
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)
|
||||
)
|
||||
}
|
||||
});
|
||||
console.log("return unsubscribe();")
|
||||
return ()=>unsubscribe();
|
||||
},[])
|
||||
|
||||
useEffect(() => {
|
||||
ipcRenderer.on("pushHotkeys", saveFile);
|
||||
return () => {
|
||||
console.log("销毁取消监听");
|
||||
ipcRenderer.removeListener("pushHotkeys", saveFile)
|
||||
};
|
||||
}
|
||||
)
|
||||
|
||||
|
||||
return (
|
||||
<LexicalComposer initialConfig={editorConfig}>
|
||||
|
|
@ -187,16 +198,15 @@ export default function Hlexical(props) {
|
|||
{/*<TreeViewPlugin/>*/}
|
||||
|
||||
<AutoFocusPlugin/>
|
||||
<CodeHighlightPlugin />
|
||||
<ListPlugin />
|
||||
<LinkPlugin />
|
||||
<CodeHighlightPlugin/>
|
||||
<ListPlugin/>
|
||||
<LinkPlugin/>
|
||||
<AutoLinkPlugin/>
|
||||
<ListMaxIndentLevelPlugin maxDepth={7} />
|
||||
<ListMaxIndentLevelPlugin maxDepth={7}/>
|
||||
{/*markdown 快捷键*/}
|
||||
<MarkdownShortcutPlugin transformers={TRANSFORMERS}/>
|
||||
<OnChangePlugin onChange={onChange}/>
|
||||
<ImportFilePlugin filePath={props.filePath}/>
|
||||
<SaveFilePlugin filePath={props.filePath} editorState={editorState}/>
|
||||
{/*文件操作导入文件*/}
|
||||
{/*<ActionPlugin/>*/}
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue