feat:内容加载Spin

src/pages/Note/Hlexical/index.jsx

@@ -33,6 +33,8 @@ import TableCellActionMenuPlugin from './plugins/TableActionMenuPlugin';
 import ExcalidrawPlugin from "./plugins/ExcalidrawPlugin";
 import TableOfContentsPlugin from "./plugins/TableOfContentsPlugin";
 import ContextMenuPlugin from "./plugins/ContextMenuPlugin"
+import {Spin} from "antd";
+import {useState} from "react";
 function Placeholder() {
     return <div className="editor-placeholder">Enter some rich text...</div>;
 }
@@ -45,28 +47,35 @@ export default function Hlexical(props) {
         },
         nodes: UsefulNodes
     };
+    const [spinningState,setSpinningState]=useState(true)
     console.log("Hlexical(props):this.props.filePath:", props.filePath)
     if (!isEmpty(props.filePath)&&props.filePath.endsWith(".md")){
-        importFile(props.filePath).then(value => {
+
+        let promise = importFile(props.filePath);
+
+        promise.then(value => {
             if (isEmpty(value)) {
                 return
             }
             editorConfig={...editorConfig,editorState: () => $convertFromMarkdownString(value.toString(), TRANSFORMERS)}
+            setSpinningState(false)
         }).catch(error =>
             console.error(error)
         )
     }
     return (
+
         <LexicalComposer initialConfig={editorConfig}>
             <div className="editor-container">
                 {/* 富文本插件 */}
                 <ToolbarPlugin/>
                 <div className="editor-inner">
+                    <Spin size="large" fullscreen="ture" spinning={spinningState}>
                     <RichTextPlugin
                         contentEditable={<ContentEditable className="editor-input"/>}
                         placeholder={<Placeholder/>}
                         ErrorBoundary={LexicalErrorBoundary}
-                    />
+                    />    </Spin>
                     <HistoryPlugin/>
                     {/*黑窗口动态记录当前操作*/}
                     {/*<TreeViewPlugin/>*/}
@@ -83,7 +92,7 @@ export default function Hlexical(props) {
                     />
                     {/* 表格单元格操作 */}
                     <TableCellActionMenuPlugin/>
-                    <TabIndentationPlugin />
+                    <TabIndentationPlugin/>
                     {/*markdown 快捷键*/}
                     <MarkdownShortcutPlugin transformers={TRANSFORMERS}/>
                     {/*图片加载*/}
@@ -91,22 +100,24 @@ export default function Hlexical(props) {
                     <InlineImagePlugin/>
 
                     {/*分割线 */}
-                    <HorizontalRulePlugin />
+                    <HorizontalRulePlugin/>
                     {/*页分割线*/}
 
                     {/*目录加载*/}
                     <TableOfContentsPlugin filePath={props.filePath}/>
                     {/*右键菜单*/}
-                    <ContextMenuPlugin />
+                    <ContextMenuPlugin/>
                     {/* 画图 */}
-                    <ExcalidrawPlugin />
+                    <ExcalidrawPlugin/>
 
-                    <ImportFilePlugin filePath={props.filePath}/>
+                    <ImportFilePlugin filePath={props.filePath} setSpinningState={setSpinningState}/>
-                    <SaveFilePlugin  filePath={props.filePath}/>
+                    <SaveFilePlugin filePath={props.filePath}/>
                     {/*文件操作导入文件*/}
                     {/*<ActionPlugin/>*/}
                 </div>
             </div>
+
         </LexicalComposer>
+
     );
 }

src/pages/Note/Hlexical/plugins/ImportFilePlugin.js

@@ -28,6 +28,7 @@ export default function ImportFilePlugin(props) {
           );
           editor.setEditorState(editorState);
           editor.dispatchCommand(CLEAR_HISTORY_COMMAND, undefined);
+          props.setSpinningState(false)
         }
       }).catch(error =>
           console.error(error)

src/redux/tableBarItem_reducer.js

@@ -17,6 +17,7 @@ export const tableBarItemSlice = createSlice({
         activeKey:"",
         expandedKeyList:[],
         leftTableOfContents:""
+        // document.querySelectorAll("[data-node-key='/media/shixiaohua/homedisk/work/202402/note使用记录.lexical']")[0].setAttribute('style','background:black')
     },
     reducers: {
         addTableBarItem: (state, action) => {