feat: add escape to renderer

This commit is contained in:
steven 2022-10-04 13:53:36 +08:00
parent ea911387f1
commit 486cf8bdac
11 changed files with 80 additions and 17 deletions

View File

@ -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 {

View File

@ -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 {

View File

@ -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 {

View File

@ -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 {

View File

@ -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 {

View File

@ -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 {

View File

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

View File

@ -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 {

View File

@ -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 {

View File

@ -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 {

View File

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