From 77d9568ab4cb66ef2da9b68682a324653caf2817 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?wifi=E6=AD=AAf?= <1402772884@qq.com> Date: Tue, 28 Jan 2025 01:10:12 +0800 Subject: [PATCH] =?UTF-8?q?feat(mini-markdown-editor):=20=E6=96=B0?= =?UTF-8?q?=E5=A2=9E=E4=BE=A7=E8=BE=B9=E6=A0=8F,=20help=E7=9A=84=E8=AF=AD?= =?UTF-8?q?=E6=B3=95=E8=A7=84=E5=88=99?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/mini-markdown-editor/src/App.tsx | 2 +- .../src/assets/images/blockquote.svg | 2 +- .../src/assets/images/bold.svg | 2 +- .../src/assets/images/code.svg | 2 +- .../src/assets/images/delete.svg | 2 +- .../src/assets/images/heading-1.svg | 1 + .../src/assets/images/heading-2.svg | 1 + .../src/assets/images/heading-3.svg | 1 + .../src/assets/images/image.svg | 2 +- .../src/assets/images/inlinecode.svg | 2 +- .../src/assets/images/italic.svg | 2 +- .../src/assets/images/link.svg | 2 +- .../src/assets/images/ol.svg | 2 +- .../src/assets/images/thematic-break.svg | 1 + .../src/assets/images/ul.svg | 2 +- .../src/assets/images/underline.svg | 2 +- .../mini-markdown-editor/src/common/help.ts | 120 ++++++++++++++++++ .../src/components/Preview/index.tsx | 1 + .../src/components/Sidebar/Contents.tsx | 7 + .../src/components/Sidebar/Help.tsx | 84 ++++++++++++ .../src/components/Toolbar/ShowLayout.tsx | 40 ++++++ .../src/config/toolbar/base.tsx | 10 +- .../mini-markdown-editor/src/store/toolbar.ts | 11 ++ 23 files changed, 282 insertions(+), 19 deletions(-) create mode 100644 packages/mini-markdown-editor/src/assets/images/heading-1.svg create mode 100644 packages/mini-markdown-editor/src/assets/images/heading-2.svg create mode 100644 packages/mini-markdown-editor/src/assets/images/heading-3.svg create mode 100644 packages/mini-markdown-editor/src/assets/images/thematic-break.svg create mode 100644 packages/mini-markdown-editor/src/common/help.ts create mode 100644 packages/mini-markdown-editor/src/components/Sidebar/Contents.tsx create mode 100644 packages/mini-markdown-editor/src/components/Sidebar/Help.tsx diff --git a/packages/mini-markdown-editor/src/App.tsx b/packages/mini-markdown-editor/src/App.tsx index 36fbd0b..27f96b6 100644 --- a/packages/mini-markdown-editor/src/App.tsx +++ b/packages/mini-markdown-editor/src/App.tsx @@ -6,7 +6,7 @@ import { message } from "antd"; const AppWrapper = styled.div` width: 100%; - height: 100vh; + height: 95vh; background-color: #fafafa; padding: 50px; display: flex; diff --git a/packages/mini-markdown-editor/src/assets/images/blockquote.svg b/packages/mini-markdown-editor/src/assets/images/blockquote.svg index ad49c82..625379d 100644 --- a/packages/mini-markdown-editor/src/assets/images/blockquote.svg +++ b/packages/mini-markdown-editor/src/assets/images/blockquote.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/mini-markdown-editor/src/assets/images/bold.svg b/packages/mini-markdown-editor/src/assets/images/bold.svg index f11eb1b..ebd6482 100644 --- a/packages/mini-markdown-editor/src/assets/images/bold.svg +++ b/packages/mini-markdown-editor/src/assets/images/bold.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/mini-markdown-editor/src/assets/images/code.svg b/packages/mini-markdown-editor/src/assets/images/code.svg index 06de90a..13d9762 100644 --- a/packages/mini-markdown-editor/src/assets/images/code.svg +++ b/packages/mini-markdown-editor/src/assets/images/code.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/mini-markdown-editor/src/assets/images/delete.svg b/packages/mini-markdown-editor/src/assets/images/delete.svg index a26907b..5297cbf 100644 --- a/packages/mini-markdown-editor/src/assets/images/delete.svg +++ b/packages/mini-markdown-editor/src/assets/images/delete.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/mini-markdown-editor/src/assets/images/heading-1.svg b/packages/mini-markdown-editor/src/assets/images/heading-1.svg new file mode 100644 index 0000000..1fc2dd6 --- /dev/null +++ b/packages/mini-markdown-editor/src/assets/images/heading-1.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/mini-markdown-editor/src/assets/images/heading-2.svg b/packages/mini-markdown-editor/src/assets/images/heading-2.svg new file mode 100644 index 0000000..ada3665 --- /dev/null +++ b/packages/mini-markdown-editor/src/assets/images/heading-2.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/mini-markdown-editor/src/assets/images/heading-3.svg b/packages/mini-markdown-editor/src/assets/images/heading-3.svg new file mode 100644 index 0000000..a515824 --- /dev/null +++ b/packages/mini-markdown-editor/src/assets/images/heading-3.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/mini-markdown-editor/src/assets/images/image.svg b/packages/mini-markdown-editor/src/assets/images/image.svg index 701ab36..82287d9 100644 --- a/packages/mini-markdown-editor/src/assets/images/image.svg +++ b/packages/mini-markdown-editor/src/assets/images/image.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/mini-markdown-editor/src/assets/images/inlinecode.svg b/packages/mini-markdown-editor/src/assets/images/inlinecode.svg index b7d5cf1..2a0c00d 100644 --- a/packages/mini-markdown-editor/src/assets/images/inlinecode.svg +++ b/packages/mini-markdown-editor/src/assets/images/inlinecode.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/mini-markdown-editor/src/assets/images/italic.svg b/packages/mini-markdown-editor/src/assets/images/italic.svg index 5325827..7057f2a 100644 --- a/packages/mini-markdown-editor/src/assets/images/italic.svg +++ b/packages/mini-markdown-editor/src/assets/images/italic.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/mini-markdown-editor/src/assets/images/link.svg b/packages/mini-markdown-editor/src/assets/images/link.svg index 586c166..b3def0d 100644 --- a/packages/mini-markdown-editor/src/assets/images/link.svg +++ b/packages/mini-markdown-editor/src/assets/images/link.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/mini-markdown-editor/src/assets/images/ol.svg b/packages/mini-markdown-editor/src/assets/images/ol.svg index 8d3ecb7..678eeed 100644 --- a/packages/mini-markdown-editor/src/assets/images/ol.svg +++ b/packages/mini-markdown-editor/src/assets/images/ol.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/mini-markdown-editor/src/assets/images/thematic-break.svg b/packages/mini-markdown-editor/src/assets/images/thematic-break.svg new file mode 100644 index 0000000..4c21be6 --- /dev/null +++ b/packages/mini-markdown-editor/src/assets/images/thematic-break.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/mini-markdown-editor/src/assets/images/ul.svg b/packages/mini-markdown-editor/src/assets/images/ul.svg index 96cb6a5..99f5388 100644 --- a/packages/mini-markdown-editor/src/assets/images/ul.svg +++ b/packages/mini-markdown-editor/src/assets/images/ul.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/mini-markdown-editor/src/assets/images/underline.svg b/packages/mini-markdown-editor/src/assets/images/underline.svg index fb35534..8340cdd 100644 --- a/packages/mini-markdown-editor/src/assets/images/underline.svg +++ b/packages/mini-markdown-editor/src/assets/images/underline.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/mini-markdown-editor/src/common/help.ts b/packages/mini-markdown-editor/src/common/help.ts new file mode 100644 index 0000000..bac993b --- /dev/null +++ b/packages/mini-markdown-editor/src/common/help.ts @@ -0,0 +1,120 @@ +import Heading1 from "@/assets/images/heading-1.svg?raw"; +import Heading2 from "@/assets/images/heading-2.svg?raw"; +import Heading3 from "@/assets/images/heading-3.svg?raw"; +import Bold from "@/assets/images/bold.svg?raw"; +import Italic from "@/assets/images/italic.svg?raw"; +import Underline from "@/assets/images/underline.svg?raw"; +import Delete from "@/assets/images/delete.svg?raw"; +import Blockquote from "@/assets/images/blockquote.svg?raw"; +import Ul from "@/assets/images/ul.svg?raw"; +import Ol from "@/assets/images/ol.svg?raw"; +import InlineCode from "@/assets/images/inlinecode.svg?raw"; +import Code from "@/assets/images/code.svg?raw"; +import Link from "@/assets/images/link.svg?raw"; +import Image from "@/assets/images/image.svg?raw"; +import ThematicBreak from "@/assets/images/thematic-break.svg?raw"; + +// markdown语法规则 +export const grammar = [ + { + title: "一级标题", + icon: Heading1, + rule: "# heading", + }, + { + title: "二级标题", + icon: Heading2, + rule: "## heading", + }, + { + title: "三级标题", + icon: Heading3, + rule: "### heading", + }, + { + title: "加粗", + icon: Bold, + rule: "**bold text**", + }, + { + title: "斜体", + icon: Italic, + rule: "_italic text_", + }, + { + title: "下划线", + icon: Underline, + rule: "--underline text--", + }, + { + title: "删除线", + icon: Delete, + rule: "~~delete text~~", + }, + { + title: "引用", + icon: Blockquote, + rule: "> quoted text", + }, + { + title: "无序列表", + icon: Ul, + rule: "- item", + }, + { + title: "有序列表", + icon: Ol, + rule: "1. item", + }, + { + title: "内联代码", + icon: InlineCode, + rule: "`code`", + }, + { + title: "代码块", + icon: Code, + rule: "```lang↵", + }, + { + title: "链接", + icon: Link, + rule: "[link text](url)", + }, + { + title: "图片", + icon: Image, + rule: "![alt](url)", + }, + { + title: "分割线", + icon: ThematicBreak, + rule: "---", + }, +]; + +const isMac = /Mac/.test(navigator.userAgent); + +// 快捷键 +export const shortcuts = [ + { + title: "加粗", + icon: Bold, + rule: isMac ? "Cmd + B" : "Ctrl + B", + }, + { + title: "斜体", + icon: Italic, + rule: isMac ? "Cmd + I" : "Ctrl + I", + }, + { + title: "下划线", + icon: Underline, + rule: isMac ? "Cmd + U" : "Ctrl + U", + }, + { + title: "删除线", + icon: Delete, + rule: isMac ? "Cmd + D" : "Ctrl + D", + }, +]; diff --git a/packages/mini-markdown-editor/src/components/Preview/index.tsx b/packages/mini-markdown-editor/src/components/Preview/index.tsx index 30015f6..da2b98e 100644 --- a/packages/mini-markdown-editor/src/components/Preview/index.tsx +++ b/packages/mini-markdown-editor/src/components/Preview/index.tsx @@ -14,6 +14,7 @@ const ScrollWrapper = styled.div` height: 100%; overflow: auto; padding: 10px; + word-wrap: break-word; `; const Preview: FC<{ content: string }> = ({ content }) => { diff --git a/packages/mini-markdown-editor/src/components/Sidebar/Contents.tsx b/packages/mini-markdown-editor/src/components/Sidebar/Contents.tsx new file mode 100644 index 0000000..571b251 --- /dev/null +++ b/packages/mini-markdown-editor/src/components/Sidebar/Contents.tsx @@ -0,0 +1,7 @@ +import { FC } from "react"; + +const Contents: FC = () => { + return <>Contents; +}; + +export default Contents; diff --git a/packages/mini-markdown-editor/src/components/Sidebar/Help.tsx b/packages/mini-markdown-editor/src/components/Sidebar/Help.tsx new file mode 100644 index 0000000..270c494 --- /dev/null +++ b/packages/mini-markdown-editor/src/components/Sidebar/Help.tsx @@ -0,0 +1,84 @@ +import { grammar, shortcuts } from "@/common/help"; +import { FC } from "react"; +import styled from "styled-components"; + +const Wrapper = styled.div` + width: 100%; + height: 100%; + padding: 10px; + .title { + font-weight: 600; + margin: 5px 0 16px; + color: #3f4a54; + } + .grammar-list { + margin: 0; + padding: 0; + list-style: none; + color: #959da5; + padding-bottom: 5px; + box-sizing: content-box; + .grammar-item { + display: flex; + align-items: center; + font-size: 13px; + margin-bottom: 12px; + .icon { + font-size: 16px; + display: flex; + justify-content: center; + align-items: center; + margin-right: 7.5px; + fill: #959da5; + } + .rule { + margin-left: auto; + code { + font-size: 12px; + } + } + } + } +`; + +// 语法 +const RenderRules: FC<{ + title: string; + rules: Array<{ + title: string; + icon: string; + rule: string; + }>; +}> = ({ title, rules }) => { + return ( + <> +

{title}

+ + + ); +}; + +const Help: FC = () => { + return ( + + {/* 语法规则 */} + + {/* 快捷键 */} + + + ); +}; + +export default Help; diff --git a/packages/mini-markdown-editor/src/components/Toolbar/ShowLayout.tsx b/packages/mini-markdown-editor/src/components/Toolbar/ShowLayout.tsx index e16bcdd..de7727d 100644 --- a/packages/mini-markdown-editor/src/components/Toolbar/ShowLayout.tsx +++ b/packages/mini-markdown-editor/src/components/Toolbar/ShowLayout.tsx @@ -3,7 +3,11 @@ import styled from "styled-components"; import IconTooltip from "../base/IconTooltip"; import WriteIcon from "@/assets/images/write.svg?raw"; import PreviewIcon from "@/assets/images/perview.svg?raw"; +import ContentsIcon from "@/assets/images/contents.svg?raw"; +import HelpIcon from "@/assets/images/help.svg?raw"; import { useToolbarStore } from "@/store/toolbar"; +import SidebarContents from "@/components/Sidebar/Contents"; +import SidebarHelp from "@/components/Sidebar/Help"; const Wrapper = styled.div<{ $isSelect: boolean }>` display: flex; @@ -14,6 +18,7 @@ const Wrapper = styled.div<{ $isSelect: boolean }>` color: ${(props) => (props.$isSelect ? "#0366d6" : "")}; `; +// 只写按钮 export const Write: FC = () => { const { isOnlyWrite, setIsOnlyWrite } = useToolbarStore(); return ( @@ -25,6 +30,7 @@ export const Write: FC = () => { ); }; +// 仅预览按钮 export const Read: FC = () => { const { isOnlyPreview, setIsOnlyPreview } = useToolbarStore(); return ( @@ -38,3 +44,37 @@ export const Read: FC = () => { ); }; + +// 目录按钮 +export const Contents: FC = () => { + // 标记 + const ComponentsMark = "Contents"; + const { isSidebar, componentMark, setSidebar } = useToolbarStore(); + return ( + <> + setSidebar(, ComponentsMark)}> + + + + ); +}; + +// 帮助按钮 +export const Help: FC = () => { + // 标记 + const ComponentsMark = "Help"; + const { isSidebar, componentMark, setSidebar } = useToolbarStore(); + return ( + <> + setSidebar(, ComponentsMark)}> + + + + ); +}; diff --git a/packages/mini-markdown-editor/src/config/toolbar/base.tsx b/packages/mini-markdown-editor/src/config/toolbar/base.tsx index d02048b..8ee235b 100644 --- a/packages/mini-markdown-editor/src/config/toolbar/base.tsx +++ b/packages/mini-markdown-editor/src/config/toolbar/base.tsx @@ -14,15 +14,13 @@ import ImageIcon from "@/assets/images/image.svg"; import TableIcon from "@/assets/images/table.svg"; import Undo from "@/assets/images/undo.svg"; import Redo from "@/assets/images/redo.svg"; -import ContentsIcon from "@/assets/images/contents.svg"; -import HelpIcon from "@/assets/images/help.svg"; import OutputPDFIcon from "@/assets/images/output-pdf.svg"; import { InsertTextEvent } from "./event"; import { ToolbarItem } from "@/types/toolbar"; // 组件 import Upload from "@/components/Toolbar/Upload"; import FullScreen from "@/components/Toolbar/FullScreen"; -import { Read, Write } from "@/components/Toolbar/ShowLayout"; +import { Contents, Read, Write, Help } from "@/components/Toolbar/ShowLayout"; export const toolbar: ToolbarItem[] = [ { @@ -177,13 +175,11 @@ export const toolbar: ToolbarItem[] = [ }, { type: "contents", - icon: ContentsIcon, - title: "目录", + component: , }, { type: "help", - icon: HelpIcon, - title: "帮助", + component: , }, { type: "pdf", diff --git a/packages/mini-markdown-editor/src/store/toolbar.ts b/packages/mini-markdown-editor/src/store/toolbar.ts index 178150a..7f2e4d9 100644 --- a/packages/mini-markdown-editor/src/store/toolbar.ts +++ b/packages/mini-markdown-editor/src/store/toolbar.ts @@ -9,6 +9,8 @@ export interface ToolbarStoreType { setIsOnlyPreview: () => void; isSidebar: boolean; sidebarComponent: React.ReactNode | null; + componentMark: string | null; + setSidebar: (sidebarComponent: React.ReactNode | null, componentMark: string | null) => void; } const useToolbarStore = create((set, get) => ({ @@ -30,6 +32,15 @@ const useToolbarStore = create((set, get) => ({ // 侧边栏 isSidebar: false, sidebarComponent: null, + componentMark: null, + setSidebar: (sidebarComponent, componentMark) => { + const { isSidebar, componentMark: oldMark } = get(); + if (componentMark === oldMark) { + set({ isSidebar: !isSidebar }); + } else { + set({ isSidebar: true, sidebarComponent, componentMark }); + } + }, })); export { useToolbarStore }; -- Gitee