diff --git a/packages/mini-markdown-editor/src/App.tsx b/packages/mini-markdown-editor/src/App.tsx
index 36fbd0b659759a833ff349518266693571c3bf69..27f96b684d722a8ffc24b54e3b79df834a8f82e4 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 ad49c82d0ed1d01285d312fd614fb8227f79962b..625379dde8c64c0a3c4726608ac6d90be0b49bb0 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 f11eb1b19b5b927f0c20c21d85a39f1722537689..ebd6482cf3994f7ccc10aa9e2c2f97fde5c29235 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 06de90ad596cc28eed4cae2827459506d63e36c7..13d9762ce9f26e96511ccc42f5fbee75bbdaf05e 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 a26907b51177fc64900072389b64455b5bf32685..5297cbf979d2ea0952e972c88496bb1524125ce5 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 0000000000000000000000000000000000000000..1fc2dd6fc024f31210c6741d589a08cd7ad975f6
--- /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 0000000000000000000000000000000000000000..ada36651541c93dfe82d39ca1c4780cf6dff3f43
--- /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 0000000000000000000000000000000000000000..a51582405e42288aed0946c72443603a52adf803
--- /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 701ab3662da161b5b27922021f087efc2b27bb94..82287d9a2fd7b6a75d27218c9b79f413a6764c65 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 b7d5cf1554dd03d4548983597cb287e68f2d7fc6..2a0c00defbacd960f28c0ff3f541cc09b6544ea1 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 53258279173e033152122c0b9b47ce599fc8c8f4..7057f2afe972924ce793c4818f2ce5f449daf739 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 586c1664f5df48e6ae65a7d3e4ca28f0ddf8b89d..b3def0d2ba8902463150f4ff829cec88afe2a38b 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 8d3ecb79c5de0c18549b07ffc6823ee886c94fc8..678eeed613c8a068034e084000e015092fdde540 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 0000000000000000000000000000000000000000..4c21be6bbb95b2f9b8bb0ce8f100aea8b01f3237
--- /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 96cb6a5e4950e669a305f0ba80f4629b50401e56..99f5388592518759bd62ab6cb994806ff9367dd3 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 fb35534271225333e9d0401b2e0c7ba1e4b4fe18..8340cdd4cbbed80066f7b99b3be761901a422fa3 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 0000000000000000000000000000000000000000..bac993b09f9b013289ea855f97477fe03f358fa3
--- /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 30015f6593c151f4db6abdff79e577f4f409f10c..da2b98e8d0e28c0e01bc7c785dcc7d889a307bb4 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 0000000000000000000000000000000000000000..571b251901b3334f3d6bf5b9049bd7da6e2286a8
--- /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 0000000000000000000000000000000000000000..270c494abfc7288fd00a9afb506d42d691887639
--- /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}
+
+ {rules.map((item, index) => {
+ return (
+
+
+
{item.title}
+
+ {item.rule}
+
+
+
+ );
+};
+
+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 e16bcddbf84c39cfe5c9c6ba6a2f7fb218b64dde..de7727dd9b41812ecce82434f30e6a9a955ce8d5 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 d02048b02ef93d1799379827c0705455b4d40f70..8ee235bcf4bfc6e1cbf6d6bcb1db356f21e9fe4a 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 178150a69ba3ed9e5d220effc9080f63173a302b..7f2e4d911cebb0e549f2f7cd4ed680a3cad4c2b8 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 };