feat: parser for horizontal rule

web/src/labs/marked/marked.test.ts

@@ -4,6 +4,29 @@ import { unescape } from "lodash-es";
 import { marked } from ".";
 
 describe("test marked parser", () => {
+  test("horizontal rule", () => {
+    const tests = [
+      {
+        markdown: `To create a horizontal rule, use three or more asterisks (***), dashes (---), or underscores (___) on a line by themselves.
+---
+This is some text after the horizontal rule.
+___
+This is some text after the horizontal rule.
+***
+This is some text after the horizontal rule.`,
+        want: `<p>To create a horizontal rule, use three or more asterisks (<em>*</em>), dashes (---), or underscores (___) on a line by themselves.</p>
+<hr>
+<p>This is some text after the horizontal rule.</p>
+<hr>
+<p>This is some text after the horizontal rule.</p>
+<hr>
+<p>This is some text after the horizontal rule.</p>`,
+      },
+    ];
+    for (const t of tests) {
+      expect(unescape(marked(t.markdown))).toBe(t.want);
+    }
+  });
   test("parse code block", () => {
     const tests = [
       {

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

@@ -0,0 +1,15 @@
+export const HORIZONTAL_RULES_REG = /^---\n|^\*\*\*\n|^___\n/;
+
+export const renderer = (rawStr: string): string => {
+  const matchResult = rawStr.match(HORIZONTAL_RULES_REG);
+  if (!matchResult) {
+    return rawStr;
+  }
+  return `<hr>\n`;
+};
+
+export default {
+  name: "horizontal rules",
+  regex: HORIZONTAL_RULES_REG,
+  renderer,
+};

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

@@ -15,6 +15,7 @@ import PlainText from "./PlainText";
 import Table from "./Table";
 import BoldEmphasis from "./BoldEmphasis";
 import Blockquote from "./Blockquote";
+import HorizontalRules from "./HorizontalRules";
 
 export { CODE_BLOCK_REG } from "./CodeBlock";
 export { TODO_LIST_REG } from "./TodoList";
@@ -23,8 +24,19 @@ export { TAG_REG } from "./Tag";
 export { IMAGE_REG } from "./Image";
 export { LINK_REG } from "./Link";
 export { TABLE_REG } from "./Table";
+export { HORIZONTAL_RULES_REG } from "./HorizontalRules";
 
 // The order determines the order of execution.
-export const blockElementParserList = [Table, CodeBlock, Blockquote, TodoList, DoneList, OrderedList, UnorderedList, Paragraph];
+export const blockElementParserList = [
+  HorizontalRules,
+  Table,
+  CodeBlock,
+  Blockquote,
+  TodoList,
+  DoneList,
+  OrderedList,
+  UnorderedList,
+  Paragraph,
+];
 export const inlineElementParserList = [Image, BoldEmphasis, Bold, Emphasis, Link, InlineCode, PlainLink, Tag, PlainText];
 export const parserList = [...blockElementParserList, ...inlineElementParserList];

web/src/less/memo-content.less

@@ -81,6 +81,10 @@
     blockquote {
       @apply border-l-4 pl-2 text-gray-400;
     }
+
+    hr {
+      @apply my-1;
+    }
   }
 
   > .expand-btn-container {