feat: add `escape` to renderer

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

+import { escape } from "lodash-es";
+
 export const CODE_BLOCK_REG = /^```(\S*?)\s([\s\S]*?)```(\n?)/;
 
 const renderer = (rawStr: string): string => {
-  const parsedStr = rawStr.replace(CODE_BLOCK_REG, "<pre lang='$1'>\n$2</pre>$3");
-  return parsedStr;
+  const matchResult = rawStr.match(CODE_BLOCK_REG);
+  if (!matchResult) {
+    return rawStr;
+  }
+
+  return `<pre lang='${escape(matchResult[1])}'>\n${escape(matchResult[2])}</pre>${matchResult[3]}`;
 };
 
 export default {

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

+import { escape } from "lodash-es";
+
 export const IMAGE_REG = /!\[.*?\]\((.+?)\)/;
 
 const renderer = (rawStr: string): string => {
-  const parsedStr = rawStr.replace(IMAGE_REG, "<img class='img' src='$1' />");
-  return parsedStr;
+  const matchResult = rawStr.match(IMAGE_REG);
+  if (!matchResult) {
+    return rawStr;
+  }
+
+  return `<img class='img' src='${escape(matchResult[1])}' />`;
 };
 
 export default {

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

+import { escape } from "lodash-es";
+
 export const INLINE_CODE_REG = /`([\S ]+?)`/;
 
 const renderer = (rawStr: string): string => {
-  const parsedStr = rawStr.replace(INLINE_CODE_REG, "<code>$1</code>");
-  return parsedStr;
+  const matchResult = rawStr.match(INLINE_CODE_REG);
+  if (!matchResult) {
+    return rawStr;
+  }
+
+  return `<code>${escape(matchResult[1])}</code>`;
 };
 
 export default {

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

+import { escape } from "lodash-es";
+
 export const LINK_REG = /\[(.*?)\]\((.+?)\)/;
 
 const renderer = (rawStr: string): string => {
-  const parsedStr = rawStr.replace(LINK_REG, "<a class='link' target='_blank' rel='noreferrer' href='$2'>$1</a>");
-  return parsedStr;
+  const matchResult = rawStr.match(LINK_REG);
+  if (!matchResult) {
+    return rawStr;
+  }
+
+  return `<a class='link' target='_blank' rel='noreferrer' href='${escape(matchResult[2])}'>${escape(matchResult[1])}</a>`;
 };
 
 export default {

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

+import { escape } from "lodash-es";
+
 export const MARK_REG = /@\[([\S ]+?)\]\((\S+?)\)/;
 
 const renderer = (rawStr: string): string => {
-  const parsedStr = rawStr.replace(MARK_REG, "<span class='memo-link-text' data-value='$2'>$1</span>");
-  return parsedStr;
+  const matchResult = rawStr.match(MARK_REG);
+  if (!matchResult) {
+    return rawStr;
+  }
+
+  return `<span class='memo-link-text' data-value='${escape(matchResult[2])}'>${escape(matchResult[1])}</span>`;
 };
 
 export default {

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

+import { escape } from "lodash-es";
+
 export const PLAIN_LINK_REG = /(https?:\/\/[^ ]+)/;
 
 const renderer = (rawStr: string): string => {
-  const parsedStr = rawStr.replace(PLAIN_LINK_REG, "<a class='link' target='_blank' rel='noreferrer' href='$1'>$1</a>");
-  return parsedStr;
+  const matchResult = rawStr.match(PLAIN_LINK_REG);
+  if (!matchResult) {
+    return rawStr;
+  }
+
+  return `<a class='link' target='_blank' rel='noreferrer' href='${escape(matchResult[1])}'>${escape(matchResult[1])}</a>`;
 };
 
 export default {

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

+import { escape } from "lodash-es";
+
+export const PLAIN_TEXT_REG = /([\S ]+)/;
+
+const renderer = (rawStr: string): string => {
+  const matchResult = rawStr.match(PLAIN_TEXT_REG);
+  if (!matchResult) {
+    return rawStr;
+  }
+
+  return `${escape(matchResult[1])}`;
+};
+
+export default {
+  name: "plain text",
+  regex: PLAIN_TEXT_REG,
+  renderer,
+};

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

+import { escape } from "lodash-es";
+
 export const TAG_REG = /[^\s]?#([^\s#]+?) /;
 
 const renderer = (rawStr: string): string => {
-  const parsedStr = rawStr.replace(TAG_REG, "<span class='tag-span'>#$1</span> ");
-  return parsedStr;
+  const matchResult = rawStr.match(TAG_REG);
+  if (!matchResult) {
+    return rawStr;
+  }
+
+  return `<span class='tag-span'>#${escape(matchResult[1])}</span> `;
 };
 
 export default {

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

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

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

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

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

@@ -12,6 +12,7 @@ import Bold from "./Bold";
 import Emphasis from "./Emphasis";
 import PlainLink from "./PlainLink";
 import InlineCode from "./InlineCode";
+import PlainText from "./PlainText";
 
 export { CODE_BLOCK_REG } from "./CodeBlock";
 export { TODO_LIST_REG } from "./TodoList";
@@ -23,5 +24,5 @@ export { MARK_REG } from "./Mark";
 
 // The order determines the order of execution.
 export const blockElementParserList = [CodeBlock, TodoList, DoneList, OrderedList, UnorderedList, Paragraph];
-export const inlineElementParserList = [Image, Mark, Bold, Emphasis, Link, InlineCode, PlainLink, Tag];
+export const inlineElementParserList = [Image, Mark, Bold, Emphasis, Link, InlineCode, PlainLink, Tag, PlainText];
 export const parserList = [...blockElementParserList, ...inlineElementParserList];