diff --git a/web/src/labs/marked/parser/Blockquote.ts b/web/src/labs/marked/parser/Blockquote.ts new file mode 100644 index 00000000..de18f4a2 --- /dev/null +++ b/web/src/labs/marked/parser/Blockquote.ts @@ -0,0 +1,18 @@ +import { escape } from "lodash"; + +export const BLOCKQUOTE_REG = /> ([\S ]+)(\n?)/; + +const renderer = (rawStr: string): string => { + const matchResult = rawStr.match(BLOCKQUOTE_REG); + if (!matchResult) { + return rawStr; + } + + return `
${escape(matchResult[1])}${matchResult[2]}`; +}; + +export default { + name: "blockqoute", + regex: BLOCKQUOTE_REG, + renderer, +}; diff --git a/web/src/labs/marked/parser/index.ts b/web/src/labs/marked/parser/index.ts index ca1e497a..9d5eb97d 100644 --- a/web/src/labs/marked/parser/index.ts +++ b/web/src/labs/marked/parser/index.ts @@ -15,6 +15,7 @@ import InlineCode from "./InlineCode"; import PlainText from "./PlainText"; import Table from "./Table"; import BoldEmphasis from "./BoldEmphasis"; +import Blockquote from "./Blockquote"; export { CODE_BLOCK_REG } from "./CodeBlock"; export { TODO_LIST_REG } from "./TodoList"; @@ -26,6 +27,6 @@ export { MARK_REG } from "./Mark"; export { TABLE_REG } from "./Table"; // The order determines the order of execution. -export const blockElementParserList = [Table, CodeBlock, TodoList, DoneList, OrderedList, UnorderedList, Paragraph]; +export const blockElementParserList = [Table, CodeBlock, Blockquote, TodoList, DoneList, OrderedList, UnorderedList, Paragraph]; export const inlineElementParserList = [Image, Mark, BoldEmphasis, Bold, Emphasis, Link, InlineCode, PlainLink, Tag, PlainText]; export const parserList = [...blockElementParserList, ...inlineElementParserList]; diff --git a/web/src/less/memo-content.less b/web/src/less/memo-content.less index 0ef2690b..37b882c0 100644 --- a/web/src/less/memo-content.less +++ b/web/src/less/memo-content.less @@ -77,6 +77,10 @@ @apply px-4 py-1 text-center border border-gray-300; } } + + blockquote { + @apply border-l-4 pl-2 text-gray-400; + } } > .expand-btn-container {