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: "", + }, + { + 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}
+{item.rule}
+