From b19c3c6db3d88e5043aa8b1de2d8c7fa807e6561 Mon Sep 17 00:00:00 2001
From: boojack <stevenlgtm@gmail.com>
Date: Thu, 12 Jan 2023 08:52:57 +0800
Subject: [PATCH] feat: update renderer in list (#935)

---
 web/src/labs/marked/parser/DoneList.tsx      |  7 ++++---
 web/src/labs/marked/parser/Emphasis.tsx      |  3 ++-
 web/src/labs/marked/parser/Heading.tsx       | 15 ++++++++++-----
 web/src/labs/marked/parser/OrderedList.tsx   |  9 +++++----
 web/src/labs/marked/parser/TodoList.tsx      |  7 ++++---
 web/src/labs/marked/parser/UnorderedList.tsx |  7 ++++---
 6 files changed, 29 insertions(+), 19 deletions(-)

diff --git a/web/src/labs/marked/parser/DoneList.tsx b/web/src/labs/marked/parser/DoneList.tsx
index b3b1c10b..52f3a0f9 100644
--- a/web/src/labs/marked/parser/DoneList.tsx
+++ b/web/src/labs/marked/parser/DoneList.tsx
@@ -2,17 +2,18 @@ import { inlineElementParserList } from ".";
 import { marked } from "..";
 import { matcher } from "../matcher";
 
-export const DONE_LIST_REG = /^- \[[xX]\] ([^\n]+)/;
+export const DONE_LIST_REG = /^( *)- \[[xX]\] ([^\n]+)/;
 
 const renderer = (rawStr: string) => {
   const matchResult = matcher(rawStr, DONE_LIST_REG);
   if (!matchResult) {
     return rawStr;
   }
-
-  const parsedContent = marked(matchResult[1], [], inlineElementParserList);
+  const space = matchResult[1];
+  const parsedContent = marked(matchResult[2], [], inlineElementParserList);
   return (
     <p className="li-container">
+      <span className="whitespace-pre">{space}</span>
       <span className="todo-block done" data-value="DONE">
         ✓
       </span>
diff --git a/web/src/labs/marked/parser/Emphasis.tsx b/web/src/labs/marked/parser/Emphasis.tsx
index 20c2ece1..3a92437e 100644
--- a/web/src/labs/marked/parser/Emphasis.tsx
+++ b/web/src/labs/marked/parser/Emphasis.tsx
@@ -1,6 +1,7 @@
 import { marked } from "..";
 import { matcher } from "../matcher";
 import Link from "./Link";
+import PlainLink from "./PlainLink";
 import PlainText from "./PlainText";
 
 export const EMPHASIS_REG = /\*(.+?)\*/;
@@ -11,7 +12,7 @@ const renderer = (rawStr: string) => {
     return rawStr;
   }
 
-  const parsedContent = marked(matchResult[1], [], [Link, PlainText]);
+  const parsedContent = marked(matchResult[1], [], [Link, PlainLink, PlainText]);
   return <em>{parsedContent}</em>;
 };
 
diff --git a/web/src/labs/marked/parser/Heading.tsx b/web/src/labs/marked/parser/Heading.tsx
index aadfa408..2f4e0568 100644
--- a/web/src/labs/marked/parser/Heading.tsx
+++ b/web/src/labs/marked/parser/Heading.tsx
@@ -1,4 +1,8 @@
+import { marked } from "..";
 import { matcher } from "../matcher";
+import Link from "./Link";
+import PlainLink from "./PlainLink";
+import PlainText from "./PlainText";
 
 export const HEADING_REG = /^(#+) ([^\n]+)/;
 
@@ -9,16 +13,17 @@ const renderer = (rawStr: string) => {
   }
 
   const level = matchResult[1].length;
+  const parsedContent = marked(matchResult[2], [], [Link, PlainLink, PlainText]);
   if (level === 1) {
-    return <h1>{matchResult[2]}</h1>;
+    return <h1>{parsedContent}</h1>;
   } else if (level === 2) {
-    return <h2>{matchResult[2]}</h2>;
+    return <h2>{parsedContent}</h2>;
   } else if (level === 3) {
-    return <h3>{matchResult[2]}</h3>;
+    return <h3>{parsedContent}</h3>;
   } else if (level === 4) {
-    return <h4>{matchResult[2]}</h4>;
+    return <h4>{parsedContent}</h4>;
   }
-  return <h5>{matchResult[2]}</h5>;
+  return <h5>{parsedContent}</h5>;
 };
 
 export default {
diff --git a/web/src/labs/marked/parser/OrderedList.tsx b/web/src/labs/marked/parser/OrderedList.tsx
index ebe0dc99..fb1bed55 100644
--- a/web/src/labs/marked/parser/OrderedList.tsx
+++ b/web/src/labs/marked/parser/OrderedList.tsx
@@ -2,18 +2,19 @@ import { inlineElementParserList } from ".";
 import { marked } from "..";
 import { matcher } from "../matcher";
 
-export const ORDERED_LIST_REG = /^(\d+)\. (.+)/;
+export const ORDERED_LIST_REG = /^( *)(\d+)\. (.+)/;
 
 const renderer = (rawStr: string) => {
   const matchResult = matcher(rawStr, ORDERED_LIST_REG);
   if (!matchResult) {
     return rawStr;
   }
-
-  const parsedContent = marked(matchResult[2], [], inlineElementParserList);
+  const space = matchResult[1];
+  const parsedContent = marked(matchResult[3], [], inlineElementParserList);
   return (
     <p className="li-container">
-      <span className="ol-block">{matchResult[1]}.</span>
+      <span className="whitespace-pre">{space}</span>
+      <span className="ol-block">{matchResult[2]}.</span>
       <span>{parsedContent}</span>
     </p>
   );
diff --git a/web/src/labs/marked/parser/TodoList.tsx b/web/src/labs/marked/parser/TodoList.tsx
index 10aa4ffb..c7b6d9d5 100644
--- a/web/src/labs/marked/parser/TodoList.tsx
+++ b/web/src/labs/marked/parser/TodoList.tsx
@@ -2,17 +2,18 @@ import { inlineElementParserList } from ".";
 import { marked } from "..";
 import { matcher } from "../matcher";
 
-export const TODO_LIST_REG = /^- \[ \] ([^\n]+)/;
+export const TODO_LIST_REG = /^( *)- \[ \] ([^\n]+)/;
 
 const renderer = (rawStr: string) => {
   const matchResult = matcher(rawStr, TODO_LIST_REG);
   if (!matchResult) {
     return rawStr;
   }
-
-  const parsedContent = marked(matchResult[1], [], inlineElementParserList);
+  const space = matchResult[1];
+  const parsedContent = marked(matchResult[2], [], inlineElementParserList);
   return (
     <p className="li-container">
+      <span className="whitespace-pre">{space}</span>
       <span className="todo-block todo" data-value="TODO"></span>
       <span>{parsedContent}</span>
     </p>
diff --git a/web/src/labs/marked/parser/UnorderedList.tsx b/web/src/labs/marked/parser/UnorderedList.tsx
index bd7ff76c..ebd41e62 100644
--- a/web/src/labs/marked/parser/UnorderedList.tsx
+++ b/web/src/labs/marked/parser/UnorderedList.tsx
@@ -2,17 +2,18 @@ import { inlineElementParserList } from ".";
 import { marked } from "..";
 import { matcher } from "../matcher";
 
-export const UNORDERED_LIST_REG = /^[*-] ([^\n]+)/;
+export const UNORDERED_LIST_REG = /^( *)[*-] ([^\n]+)/;
 
 const renderer = (rawStr: string) => {
   const matchResult = matcher(rawStr, UNORDERED_LIST_REG);
   if (!matchResult) {
     return rawStr;
   }
-
-  const parsedContent = marked(matchResult[1], [], inlineElementParserList);
+  const space = matchResult[1];
+  const parsedContent = marked(matchResult[2], [], inlineElementParserList);
   return (
     <p className="li-container">
+      <span className="whitespace-pre">{space}</span>
       <span className="ul-block">•</span>
       <span>{parsedContent}</span>
     </p>