From 72daa4e1d6b7c2bc9abb14e4647bf4a927026a73 Mon Sep 17 00:00:00 2001
From: boojack <stevenlgtm@gmail.com>
Date: Thu, 22 Dec 2022 19:48:19 +0800
Subject: [PATCH] feat: support heading syntax (#827)

---
 web/src/labs/marked/marked.test.ts    | 22 +++++-----------------
 web/src/labs/marked/parser/Heading.ts | 25 +++++++++++++++++++++++++
 web/src/labs/marked/parser/index.ts   |  2 ++
 web/src/less/memo-content.less        | 16 ++++++++++++++++
 4 files changed, 48 insertions(+), 17 deletions(-)
 create mode 100644 web/src/labs/marked/parser/Heading.ts

diff --git a/web/src/labs/marked/marked.test.ts b/web/src/labs/marked/marked.test.ts
index da33e3bc..16d1c1de 100644
--- a/web/src/labs/marked/marked.test.ts
+++ b/web/src/labs/marked/marked.test.ts
@@ -156,27 +156,15 @@ console.log("hello world!")
       expect(unescape(marked(t.markdown))).toBe(t.want);
     }
   });
-  test("parse tags", () => {
+  test("parse heading", () => {
     const tests = [
       {
-        markdown: `#123 `,
-        want: `<p><span class='tag-span'>#123</span> </p>`,
+        markdown: `# 123 `,
+        want: `<h1>123 </h1>`,
       },
       {
-        markdown: `#123#asd`,
-        want: `<p><span class='tag-span'>#123</span><span class='tag-span'>#asd</span></p>`,
-      },
-      {
-        markdown: `#123`,
-        want: `<p><span class='tag-span'>#123</span></p>`,
-      },
-      {
-        markdown: `123123#123`,
-        want: `<p>123123<span class='tag-span'>#123</span></p>`,
-      },
-      {
-        markdown: `123123 #123`,
-        want: `<p>123123 <span class='tag-span'>#123</span></p>`,
+        markdown: `## 123 `,
+        want: `<h2>123 </h2>`,
       },
     ];
     for (const t of tests) {
diff --git a/web/src/labs/marked/parser/Heading.ts b/web/src/labs/marked/parser/Heading.ts
new file mode 100644
index 00000000..9f5dd2de
--- /dev/null
+++ b/web/src/labs/marked/parser/Heading.ts
@@ -0,0 +1,25 @@
+import { escape } from "lodash";
+
+export const HEADING_REG = /^(#+) ([^\n]+)/;
+
+const matcher = (rawStr: string) => {
+  const matchResult = rawStr.match(HEADING_REG);
+  return matchResult;
+};
+
+const renderer = (rawStr: string): string => {
+  const matchResult = matcher(rawStr);
+  if (!matchResult) {
+    return rawStr;
+  }
+
+  const level = matchResult[1].length;
+  return `<h${level}>${escape(matchResult[2])}</h${level}>`;
+};
+
+export default {
+  name: "heading",
+  regex: HEADING_REG,
+  matcher,
+  renderer,
+};
diff --git a/web/src/labs/marked/parser/index.ts b/web/src/labs/marked/parser/index.ts
index fbe8b4b2..eea08329 100644
--- a/web/src/labs/marked/parser/index.ts
+++ b/web/src/labs/marked/parser/index.ts
@@ -17,6 +17,7 @@ import BoldEmphasis from "./BoldEmphasis";
 import Blockquote from "./Blockquote";
 import HorizontalRules from "./HorizontalRules";
 import Strikethrough from "./Strikethrough";
+import Heading from "./Heading";
 
 export { TAG_REG } from "./Tag";
 export { LINK_REG } from "./Link";
@@ -26,6 +27,7 @@ export const blockElementParserList = [
   Br,
   CodeBlock,
   Blockquote,
+  Heading,
   TodoList,
   DoneList,
   OrderedList,
diff --git a/web/src/less/memo-content.less b/web/src/less/memo-content.less
index ef00b41a..c689d2b4 100644
--- a/web/src/less/memo-content.less
+++ b/web/src/less/memo-content.less
@@ -4,6 +4,22 @@
   > .memo-content-text {
     @apply w-full max-w-full word-break text-base leading-6;
 
+    > h1 {
+      @apply text-5xl leading-normal font-bold;
+    }
+
+    > h2 {
+      @apply text-3xl leading-normal font-medium;
+    }
+
+    > h3 {
+      @apply text-xl leading-normal font-medium;
+    }
+
+    > h4 {
+      @apply text-lg;
+    }
+
     > p {
       @apply w-full h-auto mb-1 last:mb-0 text-base;
       min-height: 24px;