feat: support heading syntax (#827)

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) {

web/src/labs/marked/parser/Heading.ts

+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,
+};

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,

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;