usememos/memos
1
1
Fork 0
mirror of https://github.com/usememos/memos.git synced 2024-12-24 11:44:44 +03:00
Code Issues Packages Projects Releases Wiki Activity

feat: update marked parsers (#260)

Browse Source 
* chore: remove external match functions

* chore: update parsers
This commit is contained in:
boojack 2022-10-04 10:44:16 +08:00 committed by GitHub
parent 4bd373ba57
commit eaf89aa2f2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
18 changed files with 92 additions and 177 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
web/src/labs/marked/index.ts
View File

@ -1,18 +1,50 @@
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;
};

24
web/src/labs/marked/marked.test.ts
View File

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

24
web/src/labs/marked/parser/Bold.ts
View File

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

11
web/src/labs/marked/parser/CodeBlock.ts
View File

@ -1,15 +1,5 @@
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,
};

13
web/src/labs/marked/parser/DoneList.ts
View File

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

24
web/src/labs/marked/parser/Emphasis.ts
View File

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

11
web/src/labs/marked/parser/Image.ts
View File

@ -1,15 +1,5 @@
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,
};

11
web/src/labs/marked/parser/InlineCode.ts
View File

@ -1,15 +1,5 @@
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,
};

11
web/src/labs/marked/parser/Link.ts
View File

@ -1,15 +1,5 @@
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,
};

11
web/src/labs/marked/parser/Mark.ts
View File

@ -1,15 +1,5 @@
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,
};

13
web/src/labs/marked/parser/OrderedList.ts
View File

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

13
web/src/labs/marked/parser/Paragraph.ts
View File

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

11
web/src/labs/marked/parser/PlainLink.ts
View File

@ -1,15 +1,5 @@
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,
};

11
web/src/labs/marked/parser/Tag.ts
View File

@ -1,15 +1,5 @@
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,
};

13
web/src/labs/marked/parser/TodoList.ts
View File

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

13
web/src/labs/marked/parser/UnorderedList.ts
View File

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

7
web/src/labs/marked/parser/index.ts
View File

@ -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];

4
web/src/less/memo-content.less
View File

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