feat: update renderer in list (#935)

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>

web/src/labs/marked/parser/Emphasis.tsx

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

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

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

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

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>

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>