feat:导入成功

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')
         }
     })

package.json

@@ -53,9 +53,7 @@
     "node-sass": "^7.0.3"
   },
   "browser": {
-    "fs": false,
+    "fs": false
-    "os": false,
-    "path": false
   },
   "browserslist": {
     "production": [

src/components/ActionPlug/index.jsx

@@ -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>
+}

src/pages/GateWay/index.jsx

@@ -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>,
     );

src/pages/Note/Hlexical/index.jsx

@@ -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
+          <ActionPlugin/>
-              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>
         </div>
       </div>
     </LexicalComposer>

src/pages/Note/index.jsx

@@ -91,58 +91,21 @@ 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}>
                 <ItemTree></ItemTree>
             </Sider>
             <Layout>
-            <Tabs
+                <Tabs
-                type="editable-card"
+                    type="editable-card"
-                onChange={onChange}
+                    onChange={onChange}
-                activeKey={activeKey}
+                    activeKey={activeKey}
-                onEdit={onEdit}
+                    onEdit={onEdit}
-                items={items}
+                    items={items}
-            />
+                />
-                </Layout>
+            </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>
     );
 };

src/utils/File/fileHelper.js

@@ -1,19 +1,24 @@
-const fs = require("fs")
+// const fs = require("fs").promises
 
-const fileHelper = {
+// const fileHelper =async (path) => {
-  readFile: (path) => {
+//   console.log("fileHelper-----------",fs)
-    return fs.readFile(path, { encoding: 'utf8'})
+//   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
+//     = {
+//   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
 

src/utils/File/index.jsx

@@ -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) {
+export async function importFile(pathName) {
-    readTextFileFromSystem(pathName,(text) => {
+      return await fs.readFile(pathName)
-        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);
-        }
-    };
 }