feat:导入成功
This commit is contained in:
parent
8d4f52244e
commit
9febf49d37
5
main.js
5
main.js
|
|
@ -7,13 +7,16 @@ const {menuRebuild} = require('./src/comment/TopMenu.js')
|
|||
const { fileHelper } = require('./src/utils/File/fileHelper');
|
||||
|
||||
const iconName = path.join(__dirname, 'iconForDragAndDrop.png')
|
||||
// electorn
|
||||
|
||||
const createWindow = () => {
|
||||
// Create the browser window.
|
||||
const win = new BrowserWindow({
|
||||
width: 800,
|
||||
height: 600,
|
||||
webPreferences: {
|
||||
nodeIntegration:true,
|
||||
contextIsolation:false,
|
||||
|
||||
preload: path.join(__dirname, 'preload.js')
|
||||
}
|
||||
})
|
||||
|
|
|
|||
|
|
@ -53,9 +53,7 @@
|
|||
"node-sass": "^7.0.3"
|
||||
},
|
||||
"browser": {
|
||||
"fs": false,
|
||||
"os": false,
|
||||
"path": false
|
||||
"fs": false
|
||||
},
|
||||
"browserslist": {
|
||||
"production": [
|
||||
|
|
|
|||
|
|
@ -0,0 +1,25 @@
|
|||
import {Button} from "antd";
|
||||
import {importFile} from "../../utils/File";
|
||||
import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
|
||||
export default function actionPlug(){
|
||||
const [editor] = useLexicalComposerContext();
|
||||
return <Button
|
||||
className="action-button import"
|
||||
onClick={() => {
|
||||
console.log('editor:',editor)
|
||||
importFile("/media/shixiaohua/homedisk/Playground 2024-01-10T08_41_12.073Z.lexical").then(value=>{
|
||||
console.log('value.toString()',value.toString())
|
||||
const editorState = editor.parseEditorState(
|
||||
JSON.stringify(JSON.parse(value.toString()).editorState)
|
||||
);
|
||||
editor.setEditorState(editorState);
|
||||
editor.dispatchCommand(CLEAR_HISTORY_COMMAND, undefined);
|
||||
}).catch(error=>
|
||||
console.error(error)
|
||||
)
|
||||
}}
|
||||
title="Import"
|
||||
aria-label="Import editor state from JSON">
|
||||
<i className="import"/> Import
|
||||
</Button>
|
||||
}
|
||||
|
|
@ -20,17 +20,17 @@ const GateWay = () => {
|
|||
const colCount = 3;
|
||||
let colCode = '';
|
||||
cols.push(
|
||||
<Col span={24 / colCount}>
|
||||
<Col key={'bj'} span={24 / colCount}>
|
||||
<div><NavLink to='/note'>笔记</NavLink></div>
|
||||
</Col>,
|
||||
);
|
||||
cols.push(
|
||||
<Col span={24 / colCount}>
|
||||
<Col key={'todo'} span={24 / colCount}>
|
||||
<div>TODO</div>
|
||||
</Col>,
|
||||
);
|
||||
cols.push(
|
||||
<Col span={24 / colCount}>
|
||||
<Col key={'dlt'} span={24 / colCount}>
|
||||
<div><NavLink to='/show/sync'>大乐透</NavLink></div>
|
||||
</Col>,
|
||||
);
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@ 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";
|
||||
|
|
@ -23,6 +24,8 @@ import AutoLinkPlugin from "./plugins/AutoLinkPlugin";
|
|||
import {useEffect,useState} from 'react';
|
||||
import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
|
||||
import {importFile} from "../../../utils/File"
|
||||
import {CLEAR_HISTORY_COMMAND} from "lexical";
|
||||
import ActionPlugin from "../../../components/ActionPlug"
|
||||
function Placeholder() {
|
||||
return <div className="editor-placeholder">Enter some rich text...</div>;
|
||||
}
|
||||
|
|
@ -52,6 +55,7 @@ const editorConfig = {
|
|||
|
||||
function OnChangePlugin({ onChange }) {
|
||||
const [editor] = useLexicalComposerContext();
|
||||
console.log('editor',editor)
|
||||
useEffect(() => {
|
||||
return editor.registerUpdateListener(({editorState}) => {
|
||||
onChange(editorState);
|
||||
|
|
@ -68,6 +72,7 @@ export default function Hlexical() {
|
|||
// However, we still have a JavaScript object, so we need to convert it to an actual string with JSON.stringify
|
||||
setEditorState(JSON.stringify(editorStateJSON));
|
||||
}
|
||||
|
||||
return (
|
||||
<LexicalComposer initialConfig={editorConfig}>
|
||||
<div className="editor-container">
|
||||
|
|
@ -82,7 +87,7 @@ export default function Hlexical() {
|
|||
<HistoryPlugin/>
|
||||
{/*黑窗口动态记录当前操作*/}
|
||||
<TreeViewPlugin/>
|
||||
{/*<AutoFocusPlugin />*/}
|
||||
<AutoFocusPlugin />
|
||||
{/*<CodeHighlightPlugin />*/}
|
||||
{/*<ListPlugin />*/}
|
||||
{/*<LinkPlugin />*/}
|
||||
|
|
@ -90,13 +95,7 @@ export default function Hlexical() {
|
|||
{/*<ListMaxIndentLevelPlugin maxDepth={7} />*/}
|
||||
<MarkdownShortcutPlugin transformers={TRANSFORMERS} />
|
||||
<OnChangePlugin onChange={onChange}/>
|
||||
<button
|
||||
className="action-button import"
|
||||
onClick={() => importFile("/media/shixiaohua/homedisk/Playground 2024-01-10T08_41_12.073Z.lexical")}
|
||||
title="Import"
|
||||
aria-label="Import editor state from JSON">
|
||||
<i className="import"/> Import
|
||||
</button>
|
||||
<ActionPlugin/>
|
||||
</div>
|
||||
</div>
|
||||
</LexicalComposer>
|
||||
|
|
|
|||
|
|
@ -91,7 +91,7 @@ const Note = () => {
|
|||
<Avatar size={60} src='http://localhost/20231114150555.jpg' icon={<UserOutlined />} />
|
||||
</div>
|
||||
<div>
|
||||
<p style={{ color: colorBgContainer, 'font-size': 60 }}>上善若水</p>
|
||||
<p style={{ color: colorBgContainer, 'fontSize': 60 }}>上善若水</p>
|
||||
</div>
|
||||
</Sider>
|
||||
<Sider trigger={null} collapsedWidth={0} collapsible collapsed={collapsed}>
|
||||
|
|
@ -106,43 +106,6 @@ const Note = () => {
|
|||
items={items}
|
||||
/>
|
||||
</Layout>
|
||||
{/*<Layout>*/}
|
||||
{/*<Header*/}
|
||||
{/* style={{*/}
|
||||
{/* padding: 0,*/}
|
||||
{/* background: colorBgContainer,*/}
|
||||
{/* }}*/}
|
||||
{/*>*/}
|
||||
{/* <Button*/}
|
||||
{/* type="text"*/}
|
||||
{/* icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}*/}
|
||||
{/* onClick={() => setCollapsed(!collapsed)}*/}
|
||||
{/* style={{*/}
|
||||
{/* fontSize: '16px',*/}
|
||||
{/* width: 64,*/}
|
||||
{/* height: 64,*/}
|
||||
{/* }}*/}
|
||||
{/* />*/}
|
||||
{/*</Header>*/}
|
||||
{/*<Content*/}
|
||||
{/* style={{*/}
|
||||
{/* margin: '0px 0px',*/}
|
||||
{/* padding: 0,*/}
|
||||
{/* minHeight: 280,*/}
|
||||
{/* background: 'white',*/}
|
||||
{/* 'border-style':'solid',*/}
|
||||
{/* 'border-color':'green',*/}
|
||||
{/* }}*/}
|
||||
{/*>*/}
|
||||
{/* <div className="App">*/}
|
||||
{/* <Hlexical/>*/}
|
||||
{/* </div>*/}
|
||||
|
||||
{/*</Content>*/}
|
||||
|
||||
|
||||
|
||||
{/*</Layout>*/}
|
||||
</Layout>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,19 +1,24 @@
|
|||
const fs = require("fs")
|
||||
// const fs = require("fs").promises
|
||||
|
||||
const fileHelper = {
|
||||
readFile: (path) => {
|
||||
return fs.readFile(path, { encoding: 'utf8'})
|
||||
},
|
||||
writeFile: (path, content) => {
|
||||
return fs.writeFile(path, content, { encoding: 'utf8'})
|
||||
},
|
||||
renameFile: (path, newPath) => {
|
||||
return fs.rename(path, newPath)
|
||||
},
|
||||
deleteFile: (path) => {
|
||||
return fs.unlink(path)
|
||||
}
|
||||
}
|
||||
// const fileHelper =async (path) => {
|
||||
// console.log("fileHelper-----------",fs)
|
||||
// return await fs.readFile(path, {encoding: 'utf8'})
|
||||
// }
|
||||
|
||||
module.exports = fileHelper
|
||||
// = {
|
||||
// readFile: async (path) => {
|
||||
// return await fs.readFile(path, {encoding: 'utf8'})
|
||||
// },
|
||||
// writeFile: (path, content) => {
|
||||
// return fs.writeFile(path, content, { encoding: 'utf8'})
|
||||
// },
|
||||
// renameFile: (path, newPath) => {
|
||||
// return fs.rename(path, newPath)
|
||||
// },
|
||||
// deleteFile: (path) => {
|
||||
// return fs.unlink(path)
|
||||
// }
|
||||
// }
|
||||
|
||||
// module.exports = fileHelper
|
||||
|
||||
|
|
|
|||
|
|
@ -1,29 +1,8 @@
|
|||
import {CLEAR_HISTORY_COMMAND} from 'lexical';
|
||||
import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
|
||||
import {fileHelper} from './fileHelper'
|
||||
// import fileHelper from './fileHelper'
|
||||
const fs = window.require("fs").promises
|
||||
|
||||
export function importFile(pathName) {
|
||||
readTextFileFromSystem(pathName,(text) => {
|
||||
const [editor]=useLexicalComposerContext()
|
||||
const json = JSON.parse(text);
|
||||
const editorState = editor.parseEditorState(
|
||||
JSON.stringify(json.editorState),
|
||||
);
|
||||
editor.setEditorState(editorState);
|
||||
editor.dispatchCommand(CLEAR_HISTORY_COMMAND, undefined);
|
||||
});
|
||||
}
|
||||
|
||||
async function readTextFileFromSystem(pathName, callback) {
|
||||
console.log("fileHelper",fileHelper)
|
||||
const files = fileHelper.readFile(pathName);
|
||||
const reader = new FileReader();
|
||||
console.log('pathName',pathName)
|
||||
reader.readAsText( files[0],'UTF-8');
|
||||
reader.onload = (readerEvent) => {
|
||||
if (readerEvent.target) {
|
||||
const content = readerEvent.target.result;
|
||||
callback(content);
|
||||
}
|
||||
};
|
||||
export async function importFile(pathName) {
|
||||
return await fs.readFile(pathName)
|
||||
}
|
||||
Loading…
Reference in New Issue