feat:toolbar

src/pages/Note/Hlexical/index.jsx

@@ -26,6 +26,11 @@ import md5 from "md5"
 import {isEmpty} from "../../../utils/ObjectUtils";
 import {useDispatch} 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";
 function Placeholder() {
     return <div className="editor-placeholder">Enter some rich text...</div>;
 }
@@ -181,17 +186,19 @@ export default function Hlexical(props) {
                     <HistoryPlugin/>
                     {/*黑窗口动态记录当前操作*/}
                     <TreeViewPlugin/>
+
                     <AutoFocusPlugin/>
-                    {/*<CodeHighlightPlugin />*/}
-                    {/*<ListPlugin />*/}
-                    {/*<LinkPlugin />*/}
-                    {/*<AutoLinkPlugin />*/}
-                    {/*<ListMaxIndentLevelPlugin maxDepth={7} />*/}
+                    <CodeHighlightPlugin />
+                    <ListPlugin />
+                    <LinkPlugin />
+                    <AutoLinkPlugin/>
+                    <ListMaxIndentLevelPlugin maxDepth={7} />
                     {/*markdown 快捷键*/}
                     <MarkdownShortcutPlugin transformers={TRANSFORMERS}/>
                     <OnChangePlugin onChange={onChange}/>
                     <ImportFilePlugin filePath={props.filePath}/>
                     <SaveFilePlugin filePath={props.filePath} editorState={editorState}/>
+                    {/*文件操作导入文件*/}
                     {/*<ActionPlugin/>*/}
                 </div>
             </div>

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

@@ -53,16 +53,16 @@ const supportedBlockTypes = new Set([
 ]);
 
 const blockTypeToBlockName = {
-  code: "Code Block",
-  h1: "Large Heading",
-  h2: "Small Heading",
-  h3: "Heading",
-  h4: "Heading",
-  h5: "Heading",
-  ol: "Numbered List",
-  paragraph: "Normal",
-  quote: "Quote",
-  ul: "Bulleted List"
+  code: "代码块",
+  h1: "一级标题",
+  h2: "二级标题",
+  h3: "三级标题",
+  h4: "四级标题",
+  h5: "五级标题",
+  ol: "有序序列",
+  paragraph: "普通文本",
+  quote: "引用",
+  ul: "无序序列"
 };
 
 function Divider() {
@@ -378,37 +378,37 @@ function BlockOptionsDropdownList({
     <div className="dropdown" ref={dropDownRef}>
       <button className="item" onClick={formatParagraph}>
         <span className="icon paragraph" />
-        <span className="text">Normal</span>
+        <span className="text">普通文本</span>
         {blockType === "paragraph" && <span className="active" />}
       </button>
       <button className="item" onClick={formatLargeHeading}>
         <span className="icon large-heading" />
-        <span className="text">Large Heading</span>
+        <span className="text">一级标题</span>
         {blockType === "h1" && <span className="active" />}
       </button>
       <button className="item" onClick={formatSmallHeading}>
         <span className="icon small-heading" />
-        <span className="text">Small Heading</span>
+        <span className="text">二级标题</span>
         {blockType === "h2" && <span className="active" />}
       </button>
       <button className="item" onClick={formatBulletList}>
         <span className="icon bullet-list" />
-        <span className="text">Bullet List</span>
+        <span className="text">无序序列</span>
         {blockType === "ul" && <span className="active" />}
       </button>
       <button className="item" onClick={formatNumberedList}>
         <span className="icon numbered-list" />
-        <span className="text">Numbered List</span>
+        <span className="text">有序序列</span>
         {blockType === "ol" && <span className="active" />}
       </button>
       <button className="item" onClick={formatQuote}>
         <span className="icon quote" />
-        <span className="text">Quote</span>
+        <span className="text">引用</span>
         {blockType === "quote" && <span className="active" />}
       </button>
       <button className="item" onClick={formatCode}>
         <span className="icon code" />
-        <span className="text">Code Block</span>
+        <span className="text">代码块</span>
         {blockType === "code" && <span className="active" />}
       </button>
     </div>