From 3f97149a7305025cc2d610259a0a8dce89750e9a Mon Sep 17 00:00:00 2001 From: shixiaohua Date: Mon, 29 Apr 2024 15:56:10 +0800 Subject: [PATCH] =?UTF-8?q?feat:=E8=BF=87=E5=A4=9ATags=E6=98=BE=E7=A4=BA?= =?UTF-8?q?=E7=9C=81=E7=95=A5=E5=8F=B7=EF=BC=8C=E7=9B=AE=E5=BD=95100h,@?= =?UTF-8?q?=E4=BD=9C=E4=B8=BA=E9=A1=B9=E7=9B=AE=E8=B7=AF=E5=BE=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- craco.config.js | 19 ++++++++- jsconfig.json | 10 +++++ src/App.js | 4 +- src/pages/Note/Hlexical/index.jsx | 39 +++++++++---------- .../plugins/TableOfContentsPlugin/index.less | 6 +-- src/pages/Note/index.jsx | 10 ++--- src/pages/Note/index.less | 11 +++++- 7 files changed, 66 insertions(+), 33 deletions(-) create mode 100644 jsconfig.json diff --git a/craco.config.js b/craco.config.js index 0af321a..0e1430c 100644 --- a/craco.config.js +++ b/craco.config.js @@ -1,5 +1,7 @@ const CracoLessPlugin = require('craco-less'); -const HtmlWebpackPlugin=require('html-webpack-plugin') +function resolve(dir) { + return path.join(__dirname, dir); +} const path = require('path'); module.exports = { plugins: [ @@ -21,8 +23,23 @@ module.exports = { // webpackConfig.output.publicPath = './'; webpackConfig.output.path = path.join(__dirname,); webpackConfig.output.publicPath = ""; + // webpackConfig.output.module + // .rule("icons") + // .test(/\.svg$/) + // .include.add(resolve("src/icons")) + // .end() + // .use("svg-sprite-loader") + // .loader("svg-sprite-loader") + // .options({ + // symbolId: "icon-[name]", + // }) + // .end() return webpackConfig; }, + alias: { + // 将@/*映射为src目录 + '@': path.resolve(__dirname, 'src/'), + }, } diff --git a/jsconfig.json b/jsconfig.json new file mode 100644 index 0000000..14cd464 --- /dev/null +++ b/jsconfig.json @@ -0,0 +1,10 @@ +{ + "compilerOptions":{ + "baseUrl":"./", + "paths":{ + "@/*":[ + "src/*" + ] + } + } +} diff --git a/src/App.js b/src/App.js index 62c0acb..a53b6f8 100644 --- a/src/App.js +++ b/src/App.js @@ -33,8 +33,8 @@ function App() { return ( <> {/* 注册路由 */} - {element} - {/**/} + {/*{element}*/} + ) diff --git a/src/pages/Note/Hlexical/index.jsx b/src/pages/Note/Hlexical/index.jsx index f4d8937..9f76d8d 100644 --- a/src/pages/Note/Hlexical/index.jsx +++ b/src/pages/Note/Hlexical/index.jsx @@ -1,42 +1,39 @@ -import FirstTheme from "./themes/FirstTheme"; +import FirstTheme from "@/pages/Note/Hlexical/themes/FirstTheme"; import {LexicalComposer} from "@lexical/react/LexicalComposer"; import {RichTextPlugin} from "@lexical/react/LexicalRichTextPlugin"; import {ContentEditable} from "@lexical/react/LexicalContentEditable"; import {HistoryPlugin} from "@lexical/react/LexicalHistoryPlugin"; import {AutoFocusPlugin} from "@lexical/react/LexicalAutoFocusPlugin"; import LexicalErrorBoundary from "@lexical/react/LexicalErrorBoundary"; -import ToolbarPlugin from "./plugins/ToolbarPlugin"; +import ToolbarPlugin from "@/pages/Note/Hlexical/plugins/ToolbarPlugin"; import {MarkdownShortcutPlugin} from "@lexical/react/LexicalMarkdownShortcutPlugin"; import { TRANSFORMERS, $convertFromMarkdownString, } from "@lexical/markdown"; -import "./index.less" -import {importFile} from "../../../utils/File" +import "@/pages/Note/Hlexical/index.less" +import {importFile} from "@/utils/File" -import {isEmpty} from "../../../utils/ObjectUtils"; +import {isEmpty} from "@/utils/ObjectUtils"; 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"; -import ImportFilePlugin from "./plugins/ImportFilePlugin"; - -import SaveFilePlugin from "./plugins/SaveFilePlugin"; +import AutoLinkPlugin from "@/pages/Note/Hlexical/plugins/AutoLinkPlugin"; +import ListMaxIndentLevelPlugin from "@/pages/Note/Hlexical/plugins/ListMaxIndentLevelPlugin"; +import CodeHighlightPlugin from "@/pages/Note/Hlexical/plugins/CodeHighlightPlugin"; +import ImportFilePlugin from "@/pages/Note/Hlexical/plugins/ImportFilePlugin"; +import SaveFilePlugin from "@/pages/Note/Hlexical/plugins/SaveFilePlugin"; import {TabIndentationPlugin} from "@lexical/react/LexicalTabIndentationPlugin"; -import UsefulNodes from "./nodes/UsefulNodes"; -import ImagesPlugin from "./plugins/ImagesPlugin"; - - +import UsefulNodes from "@/pages/Note/Hlexical/nodes/UsefulNodes"; +import ImagesPlugin from "@/pages/Note/Hlexical/plugins/ImagesPlugin"; import {HorizontalRulePlugin} from "@lexical/react/LexicalHorizontalRulePlugin" -import InlineImagePlugin from "./plugins/InlineImagePlugin"; +import InlineImagePlugin from "@/pages/Note/Hlexical/plugins/InlineImagePlugin"; import {TablePlugin} from "@lexical/react/LexicalTablePlugin"; -import TableCellActionMenuPlugin from './plugins/TableActionMenuPlugin'; -import ExcalidrawPlugin from "./plugins/ExcalidrawPlugin"; -import TableOfContentsPlugin from "./plugins/TableOfContentsPlugin"; -import ContextMenuPlugin from "./plugins/ContextMenuPlugin" +import TableCellActionMenuPlugin from '@/pages/Note/Hlexical/plugins/TableActionMenuPlugin'; +import ExcalidrawPlugin from "@/pages/Note/Hlexical/plugins/ExcalidrawPlugin"; +import TableOfContentsPlugin from "@/pages/Note/Hlexical/plugins/TableOfContentsPlugin"; +import ContextMenuPlugin from "@/pages/Note/Hlexical/plugins/ContextMenuPlugin" import {Spin} from "antd"; import {useState} from "react"; -import DragDropPaste from "./plugins/DragDropPastePlugin"; +import DragDropPaste from "@/pages/Note/Hlexical/plugins/DragDropPastePlugin"; function Placeholder() { return
记录一些灵感吧
; } diff --git a/src/pages/Note/Hlexical/plugins/TableOfContentsPlugin/index.less b/src/pages/Note/Hlexical/plugins/TableOfContentsPlugin/index.less index bce7fbd..01d1855 100644 --- a/src/pages/Note/Hlexical/plugins/TableOfContentsPlugin/index.less +++ b/src/pages/Note/Hlexical/plugins/TableOfContentsPlugin/index.less @@ -54,7 +54,7 @@ flex-direction: row; justify-content: flex-start; z-index: 1; - height: 300px; + height: 100vh; } .first-heading { @@ -70,7 +70,7 @@ padding: 0; overflow: scroll; width: 200px; - height: 220px; + height: 100vh; overflow-x: hidden; overflow-y: auto; -ms-overflow-style: none; /* IE and Edge */ @@ -85,7 +85,7 @@ .headings::before { content: ' '; position: absolute; - height: 220px; + height: 100vh; width: 4px; right: 240px; margin-top: 5px; diff --git a/src/pages/Note/index.jsx b/src/pages/Note/index.jsx index 2afb7c7..ac663b4 100644 --- a/src/pages/Note/index.jsx +++ b/src/pages/Note/index.jsx @@ -2,12 +2,12 @@ import React, {useRef, useState} from 'react'; import { UserOutlined, } from '@ant-design/icons'; -import {Layout, Avatar, Tabs, Button} from 'antd'; -import Hlexical from './Hlexical'; -import ItemTree from "../../components/ItemTree"; -import './index.less' +import {Layout, Avatar, Tabs} from 'antd'; +import Hlexical from '@/pages/Note/Hlexical'; +import ItemTree from "@/components/ItemTree"; +import '@/pages/Note/index.less' import {useSelector, useDispatch} from "react-redux"; -import {addTableBarItem, removeTableBarItem, setActiveKey,editLeftTableOfContents} from "../../redux/tableBarItem_reducer" +import {addTableBarItem, removeTableBarItem, setActiveKey,editLeftTableOfContents} from "@/redux/tableBarItem_reducer" const {Sider} = Layout; const Note = () => { diff --git a/src/pages/Note/index.less b/src/pages/Note/index.less index 1de6a99..8c1c0b0 100644 --- a/src/pages/Note/index.less +++ b/src/pages/Note/index.less @@ -27,4 +27,13 @@ } #itemTreeTabs .ant-tabs-tab-btn{ width: 100%; -} \ No newline at end of file +} +.ant-tabs-nav .ant-tabs-nav-add, +/* 显示新增标签按钮 */ +.ant-tabs-nav-operations { + display: inline-block; +} +/* 隐藏触发隐藏操作按钮的样式 */ +.ant-tabs-nav-operations-hidden { + display: none !important; +}