fix: add a span as wrapper to fix whitespace (#747)

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

@@ -60,8 +60,8 @@ console.log("hello world!")
 - [ ] finish my homework
 - [x] yahaha`,
         want: `<p>My task:</p>
-<p class='li-container'><span class='todo-block todo' data-value='TODO'></span>finish my homework</p>
-<p class='li-container'><span class='todo-block done' data-value='DONE'>✓</span>yahaha</p>`,
+<p class='li-container'><span class='todo-block todo' data-value='TODO'></span><span>finish my homework</span></p>
+<p class='li-container'><span class='todo-block done' data-value='DONE'>✓</span><span>yahaha</span></p>`,
       },
     ];
 
@@ -76,8 +76,8 @@ console.log("hello world!")
 * list 123
 1. 123123`,
         want: `<p>This is a list</p>
-<p class='li-container'><span class='ul-block'>•</span>list 123</p>
-<p class='li-container'><span class='ol-block'>1.</span>123123</p>`,
+<p class='li-container'><span class='ul-block'>•</span><span>list 123</span></p>
+<p class='li-container'><span class='ol-block'>1.</span><span>123123</span></p>`,
       },
     ];
 

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

@@ -10,7 +10,7 @@ const renderer = (rawStr: string): string => {
   }
 
   const parsedContent = marked(matchResult[1], [], inlineElementParserList);
-  return `<p class='li-container'><span class='todo-block done' data-value='DONE'>✓</span>${parsedContent}</p>${matchResult[2]}`;
+  return `<p class='li-container'><span class='todo-block done' data-value='DONE'>✓</span><span>${parsedContent}</span></p>${matchResult[2]}`;
 };
 
 export default {

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

@@ -10,7 +10,7 @@ const renderer = (rawStr: string): string => {
   }
 
   const parsedContent = marked(matchResult[2], [], inlineElementParserList);
-  return `<p class='li-container'><span class='ol-block'>${matchResult[1]}.</span>${parsedContent}</p>${matchResult[3]}`;
+  return `<p class='li-container'><span class='ol-block'>${matchResult[1]}.</span><span>${parsedContent}</span></p>${matchResult[3]}`;
 };
 
 export default {

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

@@ -11,7 +11,9 @@ const renderer = (rawStr: string): string => {
   }
 
   const parsedContent = marked(matchResult[1], [], inlineElementParserList);
-  return `<p class='li-container'><span class='todo-block todo' data-value='TODO'></span>${parsedContent}</p>${escape(matchResult[2])}`;
+  return `<p class='li-container'><span class='todo-block todo' data-value='TODO'></span><span>${parsedContent}</span></p>${escape(
+    matchResult[2]
+  )}`;
 };
 
 export default {

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

@@ -11,7 +11,7 @@ const renderer = (rawStr: string): string => {
   }
 
   const parsedContent = marked(matchResult[1], [], inlineElementParserList);
-  return `<p class='li-container'><span class='ul-block'>•</span>${parsedContent}</p>${escape(matchResult[2])}`;
+  return `<p class='li-container'><span class='ul-block'>•</span><span>${parsedContent}</span></p>${escape(matchResult[2])}`;
 };
 
 export default {