feat: update marked parsers (#260)

* chore: remove external match functions

* chore: update parsers

web/src/labs/marked/index.ts

-import { parserList } from "./parser";
+import { blockElementParserList, inlineElementParserList } from "./parser";
 
-export const marked = (markdownStr: string, parsers = parserList) => {
-  for (const parser of parsers) {
+const match = (rawStr: string, regex: RegExp): number => {
+  const matchResult = rawStr.match(regex);
+  if (!matchResult) {
+    return 0;
+  }
+
+  const matchStr = matchResult[0];
+  return matchStr.length;
+};
+
+export const marked = (markdownStr: string, blockParsers = blockElementParserList, inlineParsers = inlineElementParserList): string => {
+  for (const parser of blockParsers) {
     const startIndex = markdownStr.search(parser.regex);
-    const matchedLength = parser.match(markdownStr);
+    const matchedLength = match(markdownStr, parser.regex);
 
     if (startIndex > -1 && matchedLength > 0) {
       const prefixStr = markdownStr.slice(0, startIndex);
       const matchedStr = markdownStr.slice(startIndex, startIndex + matchedLength);
       const suffixStr = markdownStr.slice(startIndex + matchedLength);
-      markdownStr = marked(prefixStr, parsers) + parser.renderer(matchedStr) + marked(suffixStr, parsers);
-      break;
+      return marked(prefixStr, blockParsers, inlineParsers) + parser.renderer(matchedStr) + marked(suffixStr, blockParsers, inlineParsers);
+    }
+  }
+
+  let matchedInlineParser = undefined;
+  let matchedIndex = -1;
+
+  for (const parser of inlineElementParserList) {
+    const startIndex = markdownStr.search(parser.regex);
+    const matchedLength = match(markdownStr, parser.regex);
+
+    if (startIndex > -1 && matchedLength > 0) {
+      if (!matchedInlineParser || matchedIndex > startIndex) {
+        matchedIndex = startIndex;
+        matchedInlineParser = parser;
       }
     }
+  }
+
+  if (matchedInlineParser) {
+    const matchedLength = match(markdownStr, matchedInlineParser.regex);
+    const prefixStr = markdownStr.slice(0, matchedIndex);
+    const matchedStr = markdownStr.slice(matchedIndex, matchedIndex + matchedLength);
+    const suffixStr = markdownStr.slice(matchedIndex + matchedLength);
+    return prefixStr + matchedInlineParser.renderer(matchedStr) + marked(suffixStr, [], inlineParsers);
+  }
 
   return markdownStr;
 };

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

@@ -94,6 +94,30 @@ console.log("hello world!")
       },
     ];
 
+    for (const t of tests) {
+      expect(marked(t.markdown)).toBe(t.want);
+    }
+  });
+  test("parse bold and em text", () => {
+    const tests = [
+      {
+        markdown: `Important: **Minecraft**`,
+        want: `<p>Important: <strong>Minecraft</strong></p>`,
+      },
+      {
+        markdown: `Em: *Minecraft*`,
+        want: `<p>Em: <em>Minecraft</em></p>`,
+      },
+      {
+        markdown: `Important: ***Minecraft/123***`,
+        want: `<p>Important: <strong><em>Minecraft/123</em></strong></p>`,
+      },
+      {
+        markdown: `Important: ***[baidu](https://baidu.com)***`,
+        want: `<p>Important: <strong><em><a class='link' target='_blank' rel='noreferrer' href='https://baidu.com'>baidu</a></em></strong></p>`,
+      },
+    ];
+
     for (const t of tests) {
       expect(marked(t.markdown)).toBe(t.want);
     }

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

-export const BOLD_REG = /\*\*([\S ]+?)\*\*/;
+import { marked } from "..";
+import Emphasis from "./Emphasis";
+import Link from "./Link";
 
-const match = (rawStr: string): number => {
+export const BOLD_REG = /\*\*([\S ]+)\*\*/;
+
+const renderer = (rawStr: string): string => {
   const matchResult = rawStr.match(BOLD_REG);
   if (!matchResult) {
-    return 0;
+    return rawStr;
   }
 
-  const matchStr = matchResult[0];
-  return matchStr.length;
-};
-
-const renderer = (rawStr: string): string => {
-  const parsedStr = rawStr.replace(BOLD_REG, "<strong>$1</strong>");
-  return parsedStr;
+  const parsedContent = marked(matchResult[1], [], [Emphasis, Link]);
+  return `<strong>${parsedContent}</strong>`;
 };
 
 export default {
   name: "bold",
   regex: BOLD_REG,
-  match,
   renderer,
 };

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

 export const CODE_BLOCK_REG = /^```(\S*?)\s([\s\S]*?)```(\n?)/;
 
-const match = (rawStr: string): number => {
-  const matchResult = rawStr.match(CODE_BLOCK_REG);
-  if (!matchResult) {
-    return 0;
-  }
-
-  const matchStr = matchResult[0];
-  return matchStr.length;
-};
-
 const renderer = (rawStr: string): string => {
   const parsedStr = rawStr.replace(CODE_BLOCK_REG, "<pre lang='$1'>\n$2</pre>$3");
   return parsedStr;
@@ -18,6 +8,5 @@ const renderer = (rawStr: string): string => {
 export default {
   name: "code block",
   regex: CODE_BLOCK_REG,
-  match,
   renderer,
 };

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

@@ -3,29 +3,18 @@ import { marked } from "..";
 
 export const DONE_LIST_REG = /^- \[x\] ([\S ]+)(\n?)/;
 
-const match = (rawStr: string): number => {
-  const matchResult = rawStr.match(DONE_LIST_REG);
-  if (!matchResult) {
-    return 0;
-  }
-
-  const matchStr = matchResult[0];
-  return matchStr.length;
-};
-
 const renderer = (rawStr: string): string => {
   const matchResult = rawStr.match(DONE_LIST_REG);
   if (!matchResult) {
     return rawStr;
   }
 
-  const parsedContent = marked(matchResult[1], inlineElementParserList);
+  const parsedContent = marked(matchResult[1], [], inlineElementParserList);
   return `<p><span class='todo-block done' data-value='DONE'>✓</span>${parsedContent}</p>${matchResult[2]}`;
 };
 
 export default {
   name: "done list",
   regex: DONE_LIST_REG,
-  match,
   renderer,
 };

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

-export const EMPHASIS_REG = /\*([\S ]+?)\*/;
+import { marked } from "..";
+import Bold from "./Bold";
+import Link from "./Link";
 
-const match = (rawStr: string): number => {
+export const EMPHASIS_REG = /\*([\S ]+)\*/;
+
+const renderer = (rawStr: string): string => {
   const matchResult = rawStr.match(EMPHASIS_REG);
   if (!matchResult) {
-    return 0;
+    return rawStr;
   }
 
-  const matchStr = matchResult[0];
-  return matchStr.length;
-};
-
-const renderer = (rawStr: string): string => {
-  const parsedStr = rawStr.replace(EMPHASIS_REG, "<em>$1</em>");
-  return parsedStr;
+  const parsedContent = marked(matchResult[1], [], [Bold, Link]);
+  return `<em>${parsedContent}</em>`;
 };
 
 export default {
   name: "emphasis",
   regex: EMPHASIS_REG,
-  match,
   renderer,
 };

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

 export const IMAGE_REG = /!\[.*?\]\((.+?)\)/;
 
-const match = (rawStr: string): number => {
-  const matchResult = rawStr.match(IMAGE_REG);
-  if (!matchResult) {
-    return 0;
-  }
-
-  const matchStr = matchResult[0];
-  return matchStr.length;
-};
-
 const renderer = (rawStr: string): string => {
   const parsedStr = rawStr.replace(IMAGE_REG, "<img class='img' src='$1' />");
   return parsedStr;
@@ -18,6 +8,5 @@ const renderer = (rawStr: string): string => {
 export default {
   name: "image",
   regex: IMAGE_REG,
-  match,
   renderer,
 };

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

 export const INLINE_CODE_REG = /`([\S ]+?)`/;
 
-const match = (rawStr: string): number => {
-  const matchResult = rawStr.match(INLINE_CODE_REG);
-  if (!matchResult) {
-    return 0;
-  }
-
-  const matchStr = matchResult[0];
-  return matchStr.length;
-};
-
 const renderer = (rawStr: string): string => {
   const parsedStr = rawStr.replace(INLINE_CODE_REG, "<code>$1</code>");
   return parsedStr;
@@ -18,6 +8,5 @@ const renderer = (rawStr: string): string => {
 export default {
   name: "inline code",
   regex: INLINE_CODE_REG,
-  match,
   renderer,
 };

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

 export const LINK_REG = /\[(.*?)\]\((.+?)\)/;
 
-const match = (rawStr: string): number => {
-  const matchResult = rawStr.match(LINK_REG);
-  if (!matchResult) {
-    return 0;
-  }
-
-  const matchStr = matchResult[0];
-  return matchStr.length;
-};
-
 const renderer = (rawStr: string): string => {
   const parsedStr = rawStr.replace(LINK_REG, "<a class='link' target='_blank' rel='noreferrer' href='$2'>$1</a>");
   return parsedStr;
@@ -18,6 +8,5 @@ const renderer = (rawStr: string): string => {
 export default {
   name: "link",
   regex: LINK_REG,
-  match,
   renderer,
 };

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

 export const MARK_REG = /@\[([\S ]+?)\]\((\S+?)\)/;
 
-const match = (rawStr: string): number => {
-  const matchResult = rawStr.match(MARK_REG);
-  if (!matchResult) {
-    return 0;
-  }
-
-  const matchStr = matchResult[0];
-  return matchStr.length;
-};
-
 const renderer = (rawStr: string): string => {
   const parsedStr = rawStr.replace(MARK_REG, "<span class='memo-link-text' data-value='$2'>$1</span>");
   return parsedStr;
@@ -18,6 +8,5 @@ const renderer = (rawStr: string): string => {
 export default {
   name: "mark",
   regex: MARK_REG,
-  match,
   renderer,
 };

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

@@ -3,29 +3,18 @@ import { marked } from "..";
 
 export const ORDERED_LIST_REG = /^(\d+)\. ([\S ]+)(\n?)/;
 
-const match = (rawStr: string): number => {
-  const matchResult = rawStr.match(ORDERED_LIST_REG);
-  if (!matchResult) {
-    return 0;
-  }
-
-  const matchStr = matchResult[0];
-  return matchStr.length;
-};
-
 const renderer = (rawStr: string): string => {
   const matchResult = rawStr.match(ORDERED_LIST_REG);
   if (!matchResult) {
     return rawStr;
   }
 
-  const parsedContent = marked(matchResult[2], inlineElementParserList);
+  const parsedContent = marked(matchResult[2], [], inlineElementParserList);
   return `<p><span class='ol-block'>${matchResult[1]}.</span>${parsedContent}</p>${matchResult[3]}`;
 };
 
 export default {
   name: "ordered list",
   regex: ORDERED_LIST_REG,
-  match,
   renderer,
 };

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

@@ -3,29 +3,18 @@ import { marked } from "..";
 
 export const PARAGRAPH_REG = /^([\S ]*)(\n?)/;
 
-const match = (rawStr: string): number => {
-  const matchResult = rawStr.match(PARAGRAPH_REG);
-  if (!matchResult) {
-    return 0;
-  }
-
-  const matchStr = matchResult[0];
-  return matchStr.length;
-};
-
 const renderer = (rawStr: string): string => {
   const matchResult = rawStr.match(PARAGRAPH_REG);
   if (!matchResult) {
     return rawStr;
   }
 
-  const parsedContent = marked(matchResult[1], inlineElementParserList);
+  const parsedContent = marked(matchResult[1], [], inlineElementParserList);
   return `<p>${parsedContent}</p>${matchResult[2]}`;
 };
 
 export default {
   name: "ordered list",
   regex: PARAGRAPH_REG,
-  match,
   renderer,
 };

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

 export const PLAIN_LINK_REG = /(https?:\/\/[^ ]+)/;
 
-const match = (rawStr: string): number => {
-  const matchResult = rawStr.match(PLAIN_LINK_REG);
-  if (!matchResult) {
-    return 0;
-  }
-
-  const matchStr = matchResult[0];
-  return matchStr.length;
-};
-
 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;
@@ -18,6 +8,5 @@ const renderer = (rawStr: string): string => {
 export default {
   name: "plain link",
   regex: PLAIN_LINK_REG,
-  match,
   renderer,
 };

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

 export const TAG_REG = /[^\s]?#([^\s#]+?) /;
 
-const match = (rawStr: string): number => {
-  const matchResult = rawStr.match(TAG_REG);
-  if (!matchResult) {
-    return 0;
-  }
-
-  const matchStr = matchResult[0];
-  return matchStr.length;
-};
-
 const renderer = (rawStr: string): string => {
   const parsedStr = rawStr.replace(TAG_REG, "<span class='tag-span'>#$1</span> ");
   return parsedStr;
@@ -18,6 +8,5 @@ const renderer = (rawStr: string): string => {
 export default {
   name: "tag",
   regex: TAG_REG,
-  match,
   renderer,
 };

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

@@ -3,29 +3,18 @@ import { marked } from "..";
 
 export const TODO_LIST_REG = /^- \[ \] ([\S ]+)(\n?)/;
 
-const match = (rawStr: string): number => {
-  const matchResult = rawStr.match(TODO_LIST_REG);
-  if (!matchResult) {
-    return 0;
-  }
-
-  const matchStr = matchResult[0];
-  return matchStr.length;
-};
-
 const renderer = (rawStr: string): string => {
   const matchResult = rawStr.match(TODO_LIST_REG);
   if (!matchResult) {
     return rawStr;
   }
 
-  const parsedContent = marked(matchResult[1], inlineElementParserList);
+  const parsedContent = marked(matchResult[1], [], inlineElementParserList);
   return `<p><span class='todo-block todo' data-value='TODO'></span>${parsedContent}</p>${matchResult[2]}`;
 };
 
 export default {
   name: "todo list",
   regex: TODO_LIST_REG,
-  match,
   renderer,
 };

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

@@ -3,29 +3,18 @@ import { marked } from "..";
 
 export const UNORDERED_LIST_REG = /^[*-] ([\S ]+)(\n?)/;
 
-const match = (rawStr: string): number => {
-  const matchResult = rawStr.match(UNORDERED_LIST_REG);
-  if (!matchResult) {
-    return 0;
-  }
-
-  const matchStr = matchResult[0];
-  return matchStr.length;
-};
-
 const renderer = (rawStr: string): string => {
   const matchResult = rawStr.match(UNORDERED_LIST_REG);
   if (!matchResult) {
     return rawStr;
   }
 
-  const parsedContent = marked(matchResult[1], inlineElementParserList);
+  const parsedContent = marked(matchResult[1], [], inlineElementParserList);
   return `<p><span class='ul-block'>•</span>${parsedContent}</p>${matchResult[2]}`;
 };
 
 export default {
   name: "unordered list",
   regex: UNORDERED_LIST_REG,
-  match,
   renderer,
 };

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

@@ -16,17 +16,12 @@ import InlineCode from "./InlineCode";
 export { CODE_BLOCK_REG } from "./CodeBlock";
 export { TODO_LIST_REG } from "./TodoList";
 export { DONE_LIST_REG } from "./DoneList";
-export { ORDERED_LIST_REG } from "./OrderedList";
-export { UNORDERED_LIST_REG } from "./UnorderedList";
-export { PARAGRAPH_REG } from "./Paragraph";
 export { TAG_REG } from "./Tag";
 export { IMAGE_REG } from "./Image";
 export { LINK_REG } from "./Link";
 export { MARK_REG } from "./Mark";
-export { BOLD_REG } from "./Bold";
-export { EMPHASIS_REG } from "./Emphasis";
 
 // The order determines the order of execution.
 export const blockElementParserList = [CodeBlock, TodoList, DoneList, OrderedList, UnorderedList, Paragraph];
-export const inlineElementParserList = [Image, Mark, Link, Bold, Emphasis, InlineCode, PlainLink, Tag];
+export const inlineElementParserList = [Image, Mark, Bold, Emphasis, Link, InlineCode, PlainLink, Tag];
 export const parserList = [...blockElementParserList, ...inlineElementParserList];

web/src/less/memo-content.less

@@ -19,7 +19,7 @@
     }
 
     .img {
-      @apply float-left max-w-full w-full;
+      @apply float-left max-w-full;
     }
 
     .tag-span {
@@ -52,7 +52,7 @@
     }
 
     code {
-      @apply bg-gray-100 px-1 rounded text-sm leading-6 inline-block;
+      @apply bg-gray-100 px-1 rounded text-sm font-mono leading-6 inline-block;
     }
   }