From 486cf8bdac8ee7c4339a532494a91a32b3edd282 Mon Sep 17 00:00:00 2001
From: steven <stevenlgtm@gmail.com>
Date: Tue, 4 Oct 2022 13:53:36 +0800
Subject: [PATCH] feat: add `escape` to renderer

---
 web/src/labs/marked/parser/CodeBlock.ts     | 10 ++++++++--
 web/src/labs/marked/parser/Image.ts         | 10 ++++++++--
 web/src/labs/marked/parser/InlineCode.ts    | 10 ++++++++--
 web/src/labs/marked/parser/Link.ts          | 10 ++++++++--
 web/src/labs/marked/parser/Mark.ts          | 10 ++++++++--
 web/src/labs/marked/parser/PlainLink.ts     | 10 ++++++++--
 web/src/labs/marked/parser/PlainText.ts     | 18 ++++++++++++++++++
 web/src/labs/marked/parser/Tag.ts           | 10 ++++++++--
 web/src/labs/marked/parser/TodoList.ts      |  3 ++-
 web/src/labs/marked/parser/UnorderedList.ts |  3 ++-
 web/src/labs/marked/parser/index.ts         |  3 ++-
 11 files changed, 80 insertions(+), 17 deletions(-)
 create mode 100644 web/src/labs/marked/parser/PlainText.ts

diff --git a/web/src/labs/marked/parser/CodeBlock.ts b/web/src/labs/marked/parser/CodeBlock.ts
index 28cb1580..8eaee10e 100644
--- a/web/src/labs/marked/parser/CodeBlock.ts
+++ b/web/src/labs/marked/parser/CodeBlock.ts
@@ -1,8 +1,14 @@
+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 {
diff --git a/web/src/labs/marked/parser/Image.ts b/web/src/labs/marked/parser/Image.ts
index 208b80a0..b366e0d9 100644
--- a/web/src/labs/marked/parser/Image.ts
+++ b/web/src/labs/marked/parser/Image.ts
@@ -1,8 +1,14 @@
+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 {
diff --git a/web/src/labs/marked/parser/InlineCode.ts b/web/src/labs/marked/parser/InlineCode.ts
index d6270423..5eda57e3 100644
--- a/web/src/labs/marked/parser/InlineCode.ts
+++ b/web/src/labs/marked/parser/InlineCode.ts
@@ -1,8 +1,14 @@
+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 {
diff --git a/web/src/labs/marked/parser/Link.ts b/web/src/labs/marked/parser/Link.ts
index 7429488b..8ebd6aa5 100644
--- a/web/src/labs/marked/parser/Link.ts
+++ b/web/src/labs/marked/parser/Link.ts
@@ -1,8 +1,14 @@
+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 {
diff --git a/web/src/labs/marked/parser/Mark.ts b/web/src/labs/marked/parser/Mark.ts
index 893eb4ce..f8cbaccb 100644
--- a/web/src/labs/marked/parser/Mark.ts
+++ b/web/src/labs/marked/parser/Mark.ts
@@ -1,8 +1,14 @@
+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 {
diff --git a/web/src/labs/marked/parser/PlainLink.ts b/web/src/labs/marked/parser/PlainLink.ts
index f1ae6e84..73d8265e 100644
--- a/web/src/labs/marked/parser/PlainLink.ts
+++ b/web/src/labs/marked/parser/PlainLink.ts
@@ -1,8 +1,14 @@
+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 {
diff --git a/web/src/labs/marked/parser/PlainText.ts b/web/src/labs/marked/parser/PlainText.ts
new file mode 100644
index 00000000..df90bf99
--- /dev/null
+++ b/web/src/labs/marked/parser/PlainText.ts
@@ -0,0 +1,18 @@
+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,
+};
diff --git a/web/src/labs/marked/parser/Tag.ts b/web/src/labs/marked/parser/Tag.ts
index 5d9262ac..cd0e49e9 100644
--- a/web/src/labs/marked/parser/Tag.ts
+++ b/web/src/labs/marked/parser/Tag.ts
@@ -1,8 +1,14 @@
+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 {
diff --git a/web/src/labs/marked/parser/TodoList.ts b/web/src/labs/marked/parser/TodoList.ts
index f817c5e4..159ae2f0 100644
--- a/web/src/labs/marked/parser/TodoList.ts
+++ b/web/src/labs/marked/parser/TodoList.ts
@@ -1,3 +1,4 @@
+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 {
diff --git a/web/src/labs/marked/parser/UnorderedList.ts b/web/src/labs/marked/parser/UnorderedList.ts
index 9b075360..aaaa6cf9 100644
--- a/web/src/labs/marked/parser/UnorderedList.ts
+++ b/web/src/labs/marked/parser/UnorderedList.ts
@@ -1,3 +1,4 @@
+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 {
diff --git a/web/src/labs/marked/parser/index.ts b/web/src/labs/marked/parser/index.ts
index 3dedfd89..e679f485 100644
--- a/web/src/labs/marked/parser/index.ts
+++ b/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];