feat:overflow:"hidden scroll"

readme.md

@@ -0,0 +1,13 @@
+```shell
+/electron/my-electron-app$ node -v
+v19.9.0
+/electron/my-electron-app$ npm -v
+9.6.3
+```
+
+## nvm
+node version manage
+## npm
+node package manage
+## nrm
+node remote manage

src/components/ItemTree/index.jsx

@@ -1,5 +1,5 @@
 import React, {useEffect, useMemo, useState} from 'react';
-import {Input, Tree} from 'antd';
+import {Input, Menu, Tree} from 'antd';
 import {FolderOutlined, FileMarkdownOutlined, FileOutlined, DeleteOutlined, RedoOutlined} from '@ant-design/icons';
 import {message, Popconfirm} from 'antd';
 import "./index.less"
@@ -9,6 +9,8 @@ import {useSelector, useDispatch} from "react-redux";
 import {addExpandedKeys, addTableBarItem, setExpandedKeys} from "../../redux/tableBarItem_reducer";
 import {readDir} from "../../utils/File";
 import {nextDirAdd} from "../../redux/dirMessage_reducer";
+import Icon from "antd/lib/icon";
+import {isEmpty} from "../../utils/ObjectUtils";
 // const defaultData = [];
 // 将树平铺用于查找
 const dataList = [];
@@ -134,6 +136,7 @@ const ItemTree = (prop) => {
     const [autoExpandParent, setAutoExpandParent] = useState(true);
     // let filePath = useSelector(state => state.dirMessage.data);
     const [defaultValueState, setDefaultValueState] = useState(flushTree(prop.filePath));
+    const [state, setState] = useState();
     useEffect(() => {
         setDefaultValueState(flushTree(prop.filePath))
     }, [prop]);
@@ -229,8 +232,42 @@ const ItemTree = (prop) => {
     //         });
     //     return loop(defaultData);
     // }, [searchValue]);
+    const treeNodeOnRightClick=(e,node)=> {
+        console.log("e,node",node)
+        setState({
+            rightClickNodeTreeItem: {
+                pageX: e.event.pageX,
+                pageY: e.event.pageY,
+                id: e.node.key
+            }
+        });
+    }
+    const getNodeTreeRightClickMenu=()=> {
+        console.log("state",state,isEmpty(state))
+        if (isEmpty(state)){
+            return
+        }
+        const {pageX, pageY} = {...state.rightClickNodeTreeItem};
+        const tmpStyle = {
+            position: 'absolute',
+            left: `${pageX}px`,
+            top: `${pageY}px`,
+            popupBg:"#ec0f0f",
+            "z-index":"9999"
+        };
+        return (
+            <Menu  style={tmpStyle}>
+                <Menu.Item key='1'><Icon type='plus-circle'/>{'修改文件名'}</Menu.Item>
+                <Menu.Item key='2'><Icon type='plus-circle-o'/>{'添加文件'}</Menu.Item>
+                <Menu.Item key='4'><Icon type='edit'/>{'修改'}</Menu.Item>
+                <Menu.Item key='3'><Icon type='minus-circle-o'/>{'删除目录'}</Menu.Item>
+            </Menu>
+        )
+    }
+
     return (
         <div style={{height: "100%"}}>
+            {getNodeTreeRightClickMenu()}
             <Search
                 style={{marginBottom: 8,}}
                 placeholder="Search"
@@ -244,11 +281,12 @@ const ItemTree = (prop) => {
                 // 是否自动展开父节点
                 autoExpandParent={autoExpandParent}
                 showIcon={true}
-                defaultSelectedKeys={[useSelector(state => state.tableBarItem.activeKey)]}
+                // defaultSelectedKeys={[useSelector(state => state.tableBarItem.activeKey)]}
                 defaultExpandedKeys={useSelector(state => state.tableBarItem.expandedKeyList)}
                 // treeNodes 数据，如果设置则不需要手动构造 TreeNode 节点（key 在整个树范围内唯一）
                 treeData={defaultValueState}
                 onSelect={onSelect}
+                onRightClick={treeNodeOnRightClick}
             />
         </div>
     );

src/pages/Note/Hlexical/index.jsx

@@ -10,22 +10,22 @@ 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} 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} 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 {CLEAR_HISTORY_COMMAND} from "lexical";
+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 {updatedSavedFile} from "../../../redux/tableBarItem_reducer";
-
 function Placeholder() {
     return <div className="editor-placeholder">Enter some rich text...</div>;
 }
@@ -68,11 +68,31 @@ function ImportFilePlugin(props) {
     useEffect(() => {
         if (props.filePath){
             importFile(props.filePath).then(value => {
+
+                if (props.filePath.endsWith(".md")){
+                    const root = $getRoot();
+                    const firstChild = root.getFirstChild();
+                    if ($isCodeNode(firstChild) && firstChild.getLanguage() === 'markdown') {
+                        $convertFromMarkdownString(
+                            firstChild.getTextContent(),
+                            PLAYGROUND_TRANSFORMERS,
+                        );
+                    } else {
+                        const markdown = $convertToMarkdownString(PLAYGROUND_TRANSFORMERS);
+                        root
+                            .clear()
+                            .append(
+                                $createCodeNode('markdown').append($createTextNode(markdown)),
+                            );
+                    }
+                    root.selectEnd();
+                }else {
                     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)
             )
@@ -164,6 +184,7 @@ export default function Hlexical(props) {
                     {/*<LinkPlugin />*/}
                     {/*<AutoLinkPlugin />*/}
                     {/*<ListMaxIndentLevelPlugin maxDepth={7} />*/}
+                    {/*markdown 快捷键*/}
                     <MarkdownShortcutPlugin transformers={TRANSFORMERS}/>
                     <OnChangePlugin onChange={onChange}/>
                     <ImportFilePlugin filePath={props.filePath}/>

src/pages/Note/index.jsx

@@ -67,7 +67,7 @@ const Note = () => {
 
     return (
         <Layout>
-            <Sider margin='5' collapsed='true'>
+            <Sider margin='5' collapsedWidth={0} collapsed="true">
                 <div>
                     <Avatar size={60} src='http://localhost/20231114150555.jpg' icon={<UserOutlined/>}/>
                 </div>
@@ -75,7 +75,7 @@ const Note = () => {
                     <p style={{color: colorBgContainer, 'fontSize': 60}}>上善若水</p>
                 </div>
             </Sider>
-            <Sider trigger={null} collapsedWidth={0} collapsible collapsed={collapsed}>
+            <Sider trigger={null} collapsedWidth={0} width={217} collapsible collapsed={collapsed} style={{overflow:"hidden scroll"}}>
                 <ItemTree filePath={filePath}></ItemTree>
             </Sider>
             <Layout>