mirror of https://github.com/usememos/memos
refactor: return jsx element instead of string in marked (#910)
* refactor: return jsx element instead of string in marked * chore: updatepull/912/head
boojack
3 years ago
committed by
GitHub
parent
491859bbf6
commit
0f8ce3dd16
@ -1,24 +0,0 @@
|
|||||||
import { escape } from "lodash";
|
|
||||||
|
|
||||||
const walkthroughNodeWithKeyword = (node: HTMLElement, keyword: string) => {
|
|
||||||
if (node.nodeType === 3) {
|
|
||||||
const span = document.createElement("span");
|
|
||||||
span.innerHTML = node.nodeValue?.replace(new RegExp(keyword, "g"), `<mark>${keyword}</mark>`) ?? "";
|
|
||||||
node.parentNode?.insertBefore(span, node);
|
|
||||||
node.parentNode?.removeChild(node);
|
|
||||||
}
|
|
||||||
for (const child of Array.from(node.childNodes)) {
|
|
||||||
walkthroughNodeWithKeyword(<HTMLElement>child, keyword);
|
|
||||||
}
|
|
||||||
return node.innerHTML;
|
|
||||||
};
|
|
||||||
|
|
||||||
export const highlightWithWord = (html: string, keyword?: string): string => {
|
|
||||||
if (!keyword) {
|
|
||||||
return html;
|
|
||||||
}
|
|
||||||
keyword = escape(keyword);
|
|
||||||
const wrap = document.createElement("div");
|
|
||||||
wrap.innerHTML = escape(html);
|
|
||||||
return walkthroughNodeWithKeyword(wrap, keyword);
|
|
||||||
};
|
|
||||||
@ -0,0 +1,4 @@
|
|||||||
|
export const matcher = (rawStr: string, regexp: RegExp) => {
|
||||||
|
const matchResult = rawStr.match(regexp);
|
||||||
|
return matchResult;
|
||||||
|
};
|
||||||
@ -1,24 +0,0 @@
|
|||||||
import { escape } from "lodash";
|
|
||||||
|
|
||||||
export const BLOCKQUOTE_REG = /^> ([^\n]+)/;
|
|
||||||
|
|
||||||
const matcher = (rawStr: string) => {
|
|
||||||
const matchResult = rawStr.match(BLOCKQUOTE_REG);
|
|
||||||
return matchResult;
|
|
||||||
};
|
|
||||||
|
|
||||||
const renderer = (rawStr: string): string => {
|
|
||||||
const matchResult = matcher(rawStr);
|
|
||||||
if (!matchResult) {
|
|
||||||
return rawStr;
|
|
||||||
}
|
|
||||||
|
|
||||||
return `<blockquote>${escape(matchResult[1])}</blockquote>`;
|
|
||||||
};
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: "blockquote",
|
|
||||||
regex: BLOCKQUOTE_REG,
|
|
||||||
matcher,
|
|
||||||
renderer,
|
|
||||||
};
|
|
||||||
@ -0,0 +1,19 @@
|
|||||||
|
import { escape } from "lodash";
|
||||||
|
import { matcher } from "../matcher";
|
||||||
|
|
||||||
|
export const BLOCKQUOTE_REG = /^> ([^\n]+)/;
|
||||||
|
|
||||||
|
const renderer = (rawStr: string) => {
|
||||||
|
const matchResult = matcher(rawStr, BLOCKQUOTE_REG);
|
||||||
|
if (!matchResult) {
|
||||||
|
return <>{rawStr}</>;
|
||||||
|
}
|
||||||
|
|
||||||
|
return <blockquote>{escape(matchResult[1])}</blockquote>;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "blockquote",
|
||||||
|
regexp: BLOCKQUOTE_REG,
|
||||||
|
renderer,
|
||||||
|
};
|
||||||
@ -1,27 +0,0 @@
|
|||||||
import { marked } from "..";
|
|
||||||
import Link from "./Link";
|
|
||||||
import PlainText from "./PlainText";
|
|
||||||
|
|
||||||
export const BOLD_REG = /\*\*(.+?)\*\*/;
|
|
||||||
|
|
||||||
const matcher = (rawStr: string) => {
|
|
||||||
const matchResult = rawStr.match(BOLD_REG);
|
|
||||||
return matchResult;
|
|
||||||
};
|
|
||||||
|
|
||||||
const renderer = (rawStr: string): string => {
|
|
||||||
const matchResult = matcher(rawStr);
|
|
||||||
if (!matchResult) {
|
|
||||||
return rawStr;
|
|
||||||
}
|
|
||||||
|
|
||||||
const parsedContent = marked(matchResult[1], [], [Link, PlainText]);
|
|
||||||
return `<strong>${parsedContent}</strong>`;
|
|
||||||
};
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: "bold",
|
|
||||||
regex: BOLD_REG,
|
|
||||||
matcher,
|
|
||||||
renderer,
|
|
||||||
};
|
|
||||||
@ -0,0 +1,22 @@
|
|||||||
|
import { marked } from "..";
|
||||||
|
import { matcher } from "../matcher";
|
||||||
|
import Link from "./Link";
|
||||||
|
import PlainText from "./PlainText";
|
||||||
|
|
||||||
|
export const BOLD_REG = /\*\*(.+?)\*\*/;
|
||||||
|
|
||||||
|
const renderer = (rawStr: string) => {
|
||||||
|
const matchResult = matcher(rawStr, BOLD_REG);
|
||||||
|
if (!matchResult) {
|
||||||
|
return <>{rawStr}</>;
|
||||||
|
}
|
||||||
|
|
||||||
|
const parsedContent = marked(matchResult[1], [], [Link, PlainText]);
|
||||||
|
return <strong>{parsedContent}</strong>;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "bold",
|
||||||
|
regexp: BOLD_REG,
|
||||||
|
renderer,
|
||||||
|
};
|
||||||
@ -1,27 +1,26 @@
|
|||||||
import { marked } from "..";
|
import { marked } from "..";
|
||||||
|
import { matcher } from "../matcher";
|
||||||
import Link from "./Link";
|
import Link from "./Link";
|
||||||
import PlainText from "./PlainText";
|
import PlainText from "./PlainText";
|
||||||
|
|
||||||
export const BOLD_EMPHASIS_REG = /\*\*\*(.+?)\*\*\*/;
|
export const BOLD_EMPHASIS_REG = /\*\*\*(.+?)\*\*\*/;
|
||||||
|
|
||||||
const matcher = (rawStr: string) => {
|
const renderer = (rawStr: string) => {
|
||||||
const matchResult = rawStr.match(BOLD_EMPHASIS_REG);
|
const matchResult = matcher(rawStr, BOLD_EMPHASIS_REG);
|
||||||
return matchResult;
|
|
||||||
};
|
|
||||||
|
|
||||||
const renderer = (rawStr: string): string => {
|
|
||||||
const matchResult = matcher(rawStr);
|
|
||||||
if (!matchResult) {
|
if (!matchResult) {
|
||||||
return rawStr;
|
return rawStr;
|
||||||
}
|
}
|
||||||
|
|
||||||
const parsedContent = marked(matchResult[1], [], [Link, PlainText]);
|
const parsedContent = marked(matchResult[1], [], [Link, PlainText]);
|
||||||
return `<strong><em>${parsedContent}</em></strong>`;
|
return (
|
||||||
|
<strong>
|
||||||
|
<em>${parsedContent}</em>
|
||||||
|
</strong>
|
||||||
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "bold emphasis",
|
name: "bold emphasis",
|
||||||
regex: BOLD_EMPHASIS_REG,
|
regexp: BOLD_EMPHASIS_REG,
|
||||||
matcher,
|
|
||||||
renderer,
|
renderer,
|
||||||
};
|
};
|
||||||
@ -1,17 +0,0 @@
|
|||||||
export const BR_REG = /^(\n+)/;
|
|
||||||
|
|
||||||
const matcher = (rawStr: string) => {
|
|
||||||
const matchResult = rawStr.match(BR_REG);
|
|
||||||
return matchResult;
|
|
||||||
};
|
|
||||||
|
|
||||||
const renderer = (rawStr: string): string => {
|
|
||||||
return rawStr.replaceAll("\n", "<br>");
|
|
||||||
};
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: "br",
|
|
||||||
regex: BR_REG,
|
|
||||||
matcher,
|
|
||||||
renderer,
|
|
||||||
};
|
|
||||||
@ -0,0 +1,16 @@
|
|||||||
|
export const BR_REG = /^(\n+)/;
|
||||||
|
|
||||||
|
const renderer = (rawStr: string) => {
|
||||||
|
const length = rawStr.split("\n").length - 1;
|
||||||
|
const brList = [];
|
||||||
|
for (let i = 0; i < length; i++) {
|
||||||
|
brList.push(<br />);
|
||||||
|
}
|
||||||
|
return <>{...brList}</>;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "br",
|
||||||
|
regexp: BR_REG,
|
||||||
|
renderer,
|
||||||
|
};
|
||||||
@ -1,37 +0,0 @@
|
|||||||
import { escape } from "lodash-es";
|
|
||||||
import hljs from "highlight.js";
|
|
||||||
|
|
||||||
export const CODE_BLOCK_REG = /^```(\S*?)\s([\s\S]*?)```/;
|
|
||||||
|
|
||||||
const matcher = (rawStr: string) => {
|
|
||||||
const matchResult = rawStr.match(CODE_BLOCK_REG);
|
|
||||||
return matchResult;
|
|
||||||
};
|
|
||||||
|
|
||||||
const renderer = (rawStr: string): string => {
|
|
||||||
const matchResult = matcher(rawStr);
|
|
||||||
if (!matchResult) {
|
|
||||||
return rawStr;
|
|
||||||
}
|
|
||||||
|
|
||||||
const language = escape(matchResult[1]) || "plaintext";
|
|
||||||
let highlightedCode = hljs.highlightAuto(matchResult[2]).value;
|
|
||||||
|
|
||||||
try {
|
|
||||||
const temp = hljs.highlight(matchResult[2], {
|
|
||||||
language,
|
|
||||||
}).value;
|
|
||||||
highlightedCode = temp;
|
|
||||||
} catch (error) {
|
|
||||||
// do nth
|
|
||||||
}
|
|
||||||
|
|
||||||
return `<pre><button class="codeblock-copy-btn">copy</button><code class="language-${language}">${highlightedCode}</code></pre>`;
|
|
||||||
};
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: "code block",
|
|
||||||
regex: CODE_BLOCK_REG,
|
|
||||||
matcher,
|
|
||||||
renderer,
|
|
||||||
};
|
|
||||||
@ -0,0 +1,51 @@
|
|||||||
|
import copy from "copy-to-clipboard";
|
||||||
|
import { escape } from "lodash-es";
|
||||||
|
import hljs from "highlight.js";
|
||||||
|
import { useTranslation } from "react-i18next";
|
||||||
|
import { matcher } from "../matcher";
|
||||||
|
import toastHelper from "../../../components/Toast";
|
||||||
|
|
||||||
|
export const CODE_BLOCK_REG = /^```(\S*?)\s([\s\S]*?)```/;
|
||||||
|
|
||||||
|
const renderer = (rawStr: string) => {
|
||||||
|
const { t } = useTranslation();
|
||||||
|
const matchResult = matcher(rawStr, CODE_BLOCK_REG);
|
||||||
|
if (!matchResult) {
|
||||||
|
return <>{rawStr}</>;
|
||||||
|
}
|
||||||
|
|
||||||
|
const language = escape(matchResult[1]) || "plaintext";
|
||||||
|
let highlightedCode = hljs.highlightAuto(matchResult[2]).value;
|
||||||
|
|
||||||
|
try {
|
||||||
|
const temp = hljs.highlight(matchResult[2], {
|
||||||
|
language,
|
||||||
|
}).value;
|
||||||
|
highlightedCode = temp;
|
||||||
|
} catch (error) {
|
||||||
|
// do nth
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleCopyButtonClick = () => {
|
||||||
|
copy(matchResult[2]);
|
||||||
|
toastHelper.success(t("message.succeed-copy-code"));
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<pre>
|
||||||
|
<button
|
||||||
|
className="text-xs font-mono italic absolute top-0 right-0 px-2 leading-6 border btn-text rounded opacity-60"
|
||||||
|
onClick={handleCopyButtonClick}
|
||||||
|
>
|
||||||
|
copy
|
||||||
|
</button>
|
||||||
|
<code className={`language-${language}`}>{highlightedCode}</code>
|
||||||
|
</pre>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "code block",
|
||||||
|
regexp: CODE_BLOCK_REG,
|
||||||
|
renderer,
|
||||||
|
};
|
||||||
@ -1,26 +0,0 @@
|
|||||||
import { inlineElementParserList } from ".";
|
|
||||||
import { marked } from "..";
|
|
||||||
|
|
||||||
export const DONE_LIST_REG = /^- \[[xX]\] ([^\n]+)/;
|
|
||||||
|
|
||||||
const matcher = (rawStr: string) => {
|
|
||||||
const matchResult = rawStr.match(DONE_LIST_REG);
|
|
||||||
return matchResult;
|
|
||||||
};
|
|
||||||
|
|
||||||
const renderer = (rawStr: string): string => {
|
|
||||||
const matchResult = matcher(rawStr);
|
|
||||||
if (!matchResult) {
|
|
||||||
return rawStr;
|
|
||||||
}
|
|
||||||
|
|
||||||
const parsedContent = marked(matchResult[1], [], inlineElementParserList);
|
|
||||||
return `<p class='li-container'><span class='todo-block done' data-value='DONE'>✓</span><span>${parsedContent}</span></p>`;
|
|
||||||
};
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: "done list",
|
|
||||||
regex: DONE_LIST_REG,
|
|
||||||
matcher,
|
|
||||||
renderer,
|
|
||||||
};
|
|
||||||
@ -0,0 +1,28 @@
|
|||||||
|
import { inlineElementParserList } from ".";
|
||||||
|
import { marked } from "..";
|
||||||
|
import { matcher } from "../matcher";
|
||||||
|
|
||||||
|
export const DONE_LIST_REG = /^- \[[xX]\] ([^\n]+)/;
|
||||||
|
|
||||||
|
const renderer = (rawStr: string) => {
|
||||||
|
const matchResult = matcher(rawStr, DONE_LIST_REG);
|
||||||
|
if (!matchResult) {
|
||||||
|
return rawStr;
|
||||||
|
}
|
||||||
|
|
||||||
|
const parsedContent = marked(matchResult[1], [], inlineElementParserList);
|
||||||
|
return (
|
||||||
|
<p className="li-container">
|
||||||
|
<span className="todo-block done" data-value="DONE">
|
||||||
|
✓
|
||||||
|
</span>
|
||||||
|
<span>{parsedContent}</span>
|
||||||
|
</p>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "done list",
|
||||||
|
regexp: DONE_LIST_REG,
|
||||||
|
renderer,
|
||||||
|
};
|
||||||
@ -1,27 +1,22 @@
|
|||||||
import { marked } from "..";
|
import { marked } from "..";
|
||||||
|
import { matcher } from "../matcher";
|
||||||
import Link from "./Link";
|
import Link from "./Link";
|
||||||
import PlainText from "./PlainText";
|
import PlainText from "./PlainText";
|
||||||
|
|
||||||
export const EMPHASIS_REG = /\*(.+?)\*/;
|
export const EMPHASIS_REG = /\*(.+?)\*/;
|
||||||
|
|
||||||
const matcher = (rawStr: string) => {
|
const renderer = (rawStr: string) => {
|
||||||
const matchResult = rawStr.match(EMPHASIS_REG);
|
const matchResult = matcher(rawStr, EMPHASIS_REG);
|
||||||
return matchResult;
|
|
||||||
};
|
|
||||||
|
|
||||||
const renderer = (rawStr: string): string => {
|
|
||||||
const matchResult = matcher(rawStr);
|
|
||||||
if (!matchResult) {
|
if (!matchResult) {
|
||||||
return rawStr;
|
return rawStr;
|
||||||
}
|
}
|
||||||
|
|
||||||
const parsedContent = marked(matchResult[1], [], [Link, PlainText]);
|
const parsedContent = marked(matchResult[1], [], [Link, PlainText]);
|
||||||
return `<em>${parsedContent}</em>`;
|
return <em>{parsedContent}</em>;
|
||||||
};
|
};
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "emphasis",
|
name: "emphasis",
|
||||||
regex: EMPHASIS_REG,
|
regexp: EMPHASIS_REG,
|
||||||
matcher,
|
|
||||||
renderer,
|
renderer,
|
||||||
};
|
};
|
||||||
@ -1,25 +0,0 @@
|
|||||||
import { escape } from "lodash";
|
|
||||||
|
|
||||||
export const HEADING_REG = /^(#+) ([^\n]+)/;
|
|
||||||
|
|
||||||
const matcher = (rawStr: string) => {
|
|
||||||
const matchResult = rawStr.match(HEADING_REG);
|
|
||||||
return matchResult;
|
|
||||||
};
|
|
||||||
|
|
||||||
const renderer = (rawStr: string): string => {
|
|
||||||
const matchResult = matcher(rawStr);
|
|
||||||
if (!matchResult) {
|
|
||||||
return rawStr;
|
|
||||||
}
|
|
||||||
|
|
||||||
const level = matchResult[1].length;
|
|
||||||
return `<h${level}>${escape(matchResult[2])}</h${level}>`;
|
|
||||||
};
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: "heading",
|
|
||||||
regex: HEADING_REG,
|
|
||||||
matcher,
|
|
||||||
renderer,
|
|
||||||
};
|
|
||||||
@ -0,0 +1,29 @@
|
|||||||
|
import { escape } from "lodash";
|
||||||
|
import { matcher } from "../matcher";
|
||||||
|
|
||||||
|
export const HEADING_REG = /^(#+) ([^\n]+)/;
|
||||||
|
|
||||||
|
const renderer = (rawStr: string) => {
|
||||||
|
const matchResult = matcher(rawStr, HEADING_REG);
|
||||||
|
if (!matchResult) {
|
||||||
|
return rawStr;
|
||||||
|
}
|
||||||
|
|
||||||
|
const level = matchResult[1].length;
|
||||||
|
if (level === 1) {
|
||||||
|
return <h1>{escape(matchResult[2])}</h1>;
|
||||||
|
} else if (level === 2) {
|
||||||
|
return <h2>{escape(matchResult[2])}</h2>;
|
||||||
|
} else if (level === 3) {
|
||||||
|
return <h3>{escape(matchResult[2])}</h3>;
|
||||||
|
} else if (level === 4) {
|
||||||
|
return <h4>{escape(matchResult[2])}</h4>;
|
||||||
|
}
|
||||||
|
return <h5>{escape(matchResult[2])}</h5>;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "heading",
|
||||||
|
regexp: HEADING_REG,
|
||||||
|
renderer,
|
||||||
|
};
|
||||||
@ -1,18 +0,0 @@
|
|||||||
export const HORIZONTAL_RULES_REG = /^_{3}|^-{3}|^\*{3}/;
|
|
||||||
|
|
||||||
const matcher = (rawStr: string) => {
|
|
||||||
const matchResult = rawStr.match(HORIZONTAL_RULES_REG);
|
|
||||||
return matchResult;
|
|
||||||
};
|
|
||||||
|
|
||||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
||||||
export const renderer = (rawStr: string): string => {
|
|
||||||
return `<hr>`;
|
|
||||||
};
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: "horizontal rules",
|
|
||||||
regex: HORIZONTAL_RULES_REG,
|
|
||||||
matcher,
|
|
||||||
renderer,
|
|
||||||
};
|
|
||||||
@ -0,0 +1,12 @@
|
|||||||
|
export const HORIZONTAL_RULES_REG = /^_{3}|^-{3}|^\*{3}/;
|
||||||
|
|
||||||
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||||
|
export const renderer = (rawStr: string) => {
|
||||||
|
return <hr />;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "horizontal rules",
|
||||||
|
regexp: HORIZONTAL_RULES_REG,
|
||||||
|
renderer,
|
||||||
|
};
|
||||||
@ -1,26 +1,21 @@
|
|||||||
import { escape } from "lodash-es";
|
import { escape } from "lodash-es";
|
||||||
import { absolutifyLink } from "../../../helpers/utils";
|
import { absolutifyLink } from "../../../helpers/utils";
|
||||||
|
import { matcher } from "../matcher";
|
||||||
|
|
||||||
export const IMAGE_REG = /!\[.*?\]\((.+?)\)/;
|
export const IMAGE_REG = /!\[.*?\]\((.+?)\)/;
|
||||||
|
|
||||||
const matcher = (rawStr: string) => {
|
const renderer = (rawStr: string) => {
|
||||||
const matchResult = rawStr.match(IMAGE_REG);
|
const matchResult = matcher(rawStr, IMAGE_REG);
|
||||||
return matchResult;
|
|
||||||
};
|
|
||||||
|
|
||||||
const renderer = (rawStr: string): string => {
|
|
||||||
const matchResult = matcher(rawStr);
|
|
||||||
if (!matchResult) {
|
if (!matchResult) {
|
||||||
return rawStr;
|
return rawStr;
|
||||||
}
|
}
|
||||||
|
|
||||||
const imageUrl = absolutifyLink(escape(matchResult[1]));
|
const imageUrl = absolutifyLink(escape(matchResult[1]));
|
||||||
return `<img class='img' src='${imageUrl}' />`;
|
return <img className="img" src={imageUrl} />;
|
||||||
};
|
};
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "image",
|
name: "image",
|
||||||
regex: IMAGE_REG,
|
regexp: IMAGE_REG,
|
||||||
matcher,
|
|
||||||
renderer,
|
renderer,
|
||||||
};
|
};
|
||||||
@ -1,24 +0,0 @@
|
|||||||
import { escape } from "lodash-es";
|
|
||||||
|
|
||||||
export const INLINE_CODE_REG = /`(.+?)`/;
|
|
||||||
|
|
||||||
const matcher = (rawStr: string) => {
|
|
||||||
const matchResult = rawStr.match(INLINE_CODE_REG);
|
|
||||||
return matchResult;
|
|
||||||
};
|
|
||||||
|
|
||||||
const renderer = (rawStr: string): string => {
|
|
||||||
const matchResult = matcher(rawStr);
|
|
||||||
if (!matchResult) {
|
|
||||||
return rawStr;
|
|
||||||
}
|
|
||||||
|
|
||||||
return `<code>${escape(matchResult[1])}</code>`;
|
|
||||||
};
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: "inline code",
|
|
||||||
regex: INLINE_CODE_REG,
|
|
||||||
matcher,
|
|
||||||
renderer,
|
|
||||||
};
|
|
||||||
@ -0,0 +1,19 @@
|
|||||||
|
import { escape } from "lodash-es";
|
||||||
|
import { matcher } from "../matcher";
|
||||||
|
|
||||||
|
export const INLINE_CODE_REG = /`(.+?)`/;
|
||||||
|
|
||||||
|
const renderer = (rawStr: string) => {
|
||||||
|
const matchResult = matcher(rawStr, INLINE_CODE_REG);
|
||||||
|
if (!matchResult) {
|
||||||
|
return rawStr;
|
||||||
|
}
|
||||||
|
|
||||||
|
return <code>{escape(matchResult[1])}</code>;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "inline code",
|
||||||
|
regexp: INLINE_CODE_REG,
|
||||||
|
renderer,
|
||||||
|
};
|
||||||
@ -1,26 +0,0 @@
|
|||||||
import { inlineElementParserList } from ".";
|
|
||||||
import { marked } from "..";
|
|
||||||
|
|
||||||
export const ORDERED_LIST_REG = /^(\d+)\. (.+)/;
|
|
||||||
|
|
||||||
const matcher = (rawStr: string) => {
|
|
||||||
const matchResult = rawStr.match(ORDERED_LIST_REG);
|
|
||||||
return matchResult;
|
|
||||||
};
|
|
||||||
|
|
||||||
const renderer = (rawStr: string): string => {
|
|
||||||
const matchResult = matcher(rawStr);
|
|
||||||
if (!matchResult) {
|
|
||||||
return rawStr;
|
|
||||||
}
|
|
||||||
|
|
||||||
const parsedContent = marked(matchResult[2], [], inlineElementParserList);
|
|
||||||
return `<p class='li-container'><span class='ol-block'>${matchResult[1]}.</span><span>${parsedContent}</span></p>`;
|
|
||||||
};
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: "ordered list",
|
|
||||||
regex: ORDERED_LIST_REG,
|
|
||||||
matcher,
|
|
||||||
renderer,
|
|
||||||
};
|
|
||||||
@ -0,0 +1,26 @@
|
|||||||
|
import { inlineElementParserList } from ".";
|
||||||
|
import { marked } from "..";
|
||||||
|
import { matcher } from "../matcher";
|
||||||
|
|
||||||
|
export const ORDERED_LIST_REG = /^(\d+)\. (.+)/;
|
||||||
|
|
||||||
|
const renderer = (rawStr: string) => {
|
||||||
|
const matchResult = matcher(rawStr, ORDERED_LIST_REG);
|
||||||
|
if (!matchResult) {
|
||||||
|
return rawStr;
|
||||||
|
}
|
||||||
|
|
||||||
|
const parsedContent = marked(matchResult[2], [], inlineElementParserList);
|
||||||
|
return (
|
||||||
|
<p className="li-container">
|
||||||
|
<span className="ol-block">{matchResult[1]}.</span>
|
||||||
|
<span>{parsedContent}</span>
|
||||||
|
</p>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "ordered list",
|
||||||
|
regexp: ORDERED_LIST_REG,
|
||||||
|
renderer,
|
||||||
|
};
|
||||||
@ -1,24 +0,0 @@
|
|||||||
import { escape } from "lodash-es";
|
|
||||||
|
|
||||||
export const PLAIN_LINK_REG = /(https?:\/\/[^ ]+)/;
|
|
||||||
|
|
||||||
const matcher = (rawStr: string) => {
|
|
||||||
const matchResult = rawStr.match(PLAIN_LINK_REG);
|
|
||||||
return matchResult;
|
|
||||||
};
|
|
||||||
|
|
||||||
const renderer = (rawStr: string): string => {
|
|
||||||
const matchResult = matcher(rawStr);
|
|
||||||
if (!matchResult) {
|
|
||||||
return rawStr;
|
|
||||||
}
|
|
||||||
|
|
||||||
return `<a class='link' target='_blank' rel='noreferrer' href='${escape(matchResult[1])}'>${escape(matchResult[1])}</a>`;
|
|
||||||
};
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: "plain link",
|
|
||||||
regex: PLAIN_LINK_REG,
|
|
||||||
matcher,
|
|
||||||
renderer,
|
|
||||||
};
|
|
||||||
@ -0,0 +1,23 @@
|
|||||||
|
import { escape } from "lodash-es";
|
||||||
|
import { matcher } from "../matcher";
|
||||||
|
|
||||||
|
export const PLAIN_LINK_REG = /(https?:\/\/[^ ]+)/;
|
||||||
|
|
||||||
|
const renderer = (rawStr: string) => {
|
||||||
|
const matchResult = matcher(rawStr, PLAIN_LINK_REG);
|
||||||
|
if (!matchResult) {
|
||||||
|
return rawStr;
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<a className="link" target="_blank" rel="noreferrer" href={escape(matchResult[1])}>
|
||||||
|
{escape(matchResult[1])}
|
||||||
|
</a>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "plain link",
|
||||||
|
regexp: PLAIN_LINK_REG,
|
||||||
|
renderer,
|
||||||
|
};
|
||||||
@ -1,24 +0,0 @@
|
|||||||
import { escape } from "lodash";
|
|
||||||
|
|
||||||
export const STRIKETHROUGH_REG = /~~(.+?)~~/;
|
|
||||||
|
|
||||||
const matcher = (rawStr: string) => {
|
|
||||||
const matchResult = rawStr.match(STRIKETHROUGH_REG);
|
|
||||||
return matchResult;
|
|
||||||
};
|
|
||||||
|
|
||||||
const renderer = (rawStr: string): string => {
|
|
||||||
const matchResult = matcher(rawStr);
|
|
||||||
if (!matchResult) {
|
|
||||||
return rawStr;
|
|
||||||
}
|
|
||||||
|
|
||||||
return `<del>${escape(matchResult[1])}</del>`;
|
|
||||||
};
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: "Strikethrough",
|
|
||||||
regex: STRIKETHROUGH_REG,
|
|
||||||
matcher,
|
|
||||||
renderer,
|
|
||||||
};
|
|
||||||
@ -0,0 +1,19 @@
|
|||||||
|
import { escape } from "lodash";
|
||||||
|
import { matcher } from "../matcher";
|
||||||
|
|
||||||
|
export const STRIKETHROUGH_REG = /~~(.+?)~~/;
|
||||||
|
|
||||||
|
const renderer = (rawStr: string) => {
|
||||||
|
const matchResult = matcher(rawStr, STRIKETHROUGH_REG);
|
||||||
|
if (!matchResult) {
|
||||||
|
return rawStr;
|
||||||
|
}
|
||||||
|
|
||||||
|
return <del>{escape(matchResult[1])}</del>;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "Strikethrough",
|
||||||
|
regexp: STRIKETHROUGH_REG,
|
||||||
|
renderer,
|
||||||
|
};
|
||||||
@ -1,27 +0,0 @@
|
|||||||
import { escape } from "lodash-es";
|
|
||||||
|
|
||||||
export const TAG_REG = /#([^\s#]+)/;
|
|
||||||
|
|
||||||
export const matcher = (rawStr: string) => {
|
|
||||||
const matchResult = rawStr.match(TAG_REG);
|
|
||||||
if (matchResult) {
|
|
||||||
return matchResult;
|
|
||||||
}
|
|
||||||
return null;
|
|
||||||
};
|
|
||||||
|
|
||||||
const renderer = (rawStr: string): string => {
|
|
||||||
const matchResult = matcher(rawStr);
|
|
||||||
if (!matchResult) {
|
|
||||||
return rawStr;
|
|
||||||
}
|
|
||||||
|
|
||||||
return `<span class='tag-span'>#${escape(matchResult[1])}</span>`;
|
|
||||||
};
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: "tag",
|
|
||||||
regex: TAG_REG,
|
|
||||||
matcher,
|
|
||||||
renderer,
|
|
||||||
};
|
|
||||||
@ -0,0 +1,19 @@
|
|||||||
|
import { escape } from "lodash-es";
|
||||||
|
import { matcher } from "../matcher";
|
||||||
|
|
||||||
|
export const TAG_REG = /#([^\s#]+)/;
|
||||||
|
|
||||||
|
const renderer = (rawStr: string) => {
|
||||||
|
const matchResult = matcher(rawStr, TAG_REG);
|
||||||
|
if (!matchResult) {
|
||||||
|
return rawStr;
|
||||||
|
}
|
||||||
|
|
||||||
|
return <span className="tag-span">#{escape(matchResult[1])}</span>;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "tag",
|
||||||
|
regexp: TAG_REG,
|
||||||
|
renderer,
|
||||||
|
};
|
||||||
@ -1,26 +0,0 @@
|
|||||||
import { inlineElementParserList } from ".";
|
|
||||||
import { marked } from "..";
|
|
||||||
|
|
||||||
export const TODO_LIST_REG = /^- \[ \] ([^\n]+)/;
|
|
||||||
|
|
||||||
const matcher = (rawStr: string) => {
|
|
||||||
const matchResult = rawStr.match(TODO_LIST_REG);
|
|
||||||
return matchResult;
|
|
||||||
};
|
|
||||||
|
|
||||||
const renderer = (rawStr: string): string => {
|
|
||||||
const matchResult = matcher(rawStr);
|
|
||||||
if (!matchResult) {
|
|
||||||
return rawStr;
|
|
||||||
}
|
|
||||||
|
|
||||||
const parsedContent = marked(matchResult[1], [], inlineElementParserList);
|
|
||||||
return `<p class='li-container'><span class='todo-block todo' data-value='TODO'></span><span>${parsedContent}</span></p>`;
|
|
||||||
};
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: "todo list",
|
|
||||||
regex: TODO_LIST_REG,
|
|
||||||
matcher,
|
|
||||||
renderer,
|
|
||||||
};
|
|
||||||
@ -0,0 +1,26 @@
|
|||||||
|
import { inlineElementParserList } from ".";
|
||||||
|
import { marked } from "..";
|
||||||
|
import { matcher } from "../matcher";
|
||||||
|
|
||||||
|
export const TODO_LIST_REG = /^- \[ \] ([^\n]+)/;
|
||||||
|
|
||||||
|
const renderer = (rawStr: string) => {
|
||||||
|
const matchResult = matcher(rawStr, TODO_LIST_REG);
|
||||||
|
if (!matchResult) {
|
||||||
|
return rawStr;
|
||||||
|
}
|
||||||
|
|
||||||
|
const parsedContent = marked(matchResult[1], [], inlineElementParserList);
|
||||||
|
return (
|
||||||
|
<p className="li-container">
|
||||||
|
<span className="todo-block todo" data-value="TODO"></span>
|
||||||
|
<span>{parsedContent}</span>
|
||||||
|
</p>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "todo list",
|
||||||
|
regexp: TODO_LIST_REG,
|
||||||
|
renderer,
|
||||||
|
};
|
||||||
@ -1,26 +0,0 @@
|
|||||||
import { inlineElementParserList } from ".";
|
|
||||||
import { marked } from "..";
|
|
||||||
|
|
||||||
export const UNORDERED_LIST_REG = /^[*-] ([^\n]+)/;
|
|
||||||
|
|
||||||
const matcher = (rawStr: string) => {
|
|
||||||
const matchResult = rawStr.match(UNORDERED_LIST_REG);
|
|
||||||
return matchResult;
|
|
||||||
};
|
|
||||||
|
|
||||||
const renderer = (rawStr: string): string => {
|
|
||||||
const matchResult = matcher(rawStr);
|
|
||||||
if (!matchResult) {
|
|
||||||
return rawStr;
|
|
||||||
}
|
|
||||||
|
|
||||||
const parsedContent = marked(matchResult[1], [], inlineElementParserList);
|
|
||||||
return `<p class='li-container'><span class='ul-block'>•</span><span>${parsedContent}</span></p>`;
|
|
||||||
};
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: "unordered list",
|
|
||||||
regex: UNORDERED_LIST_REG,
|
|
||||||
matcher,
|
|
||||||
renderer,
|
|
||||||
};
|
|
||||||
@ -0,0 +1,26 @@
|
|||||||
|
import { inlineElementParserList } from ".";
|
||||||
|
import { marked } from "..";
|
||||||
|
import { matcher } from "../matcher";
|
||||||
|
|
||||||
|
export const UNORDERED_LIST_REG = /^[*-] ([^\n]+)/;
|
||||||
|
|
||||||
|
const renderer = (rawStr: string) => {
|
||||||
|
const matchResult = matcher(rawStr, UNORDERED_LIST_REG);
|
||||||
|
if (!matchResult) {
|
||||||
|
return rawStr;
|
||||||
|
}
|
||||||
|
|
||||||
|
const parsedContent = marked(matchResult[1], [], inlineElementParserList);
|
||||||
|
return (
|
||||||
|
<p className="li-container">
|
||||||
|
<span className="ul-block">•</span>
|
||||||
|
<span>${parsedContent}</span>
|
||||||
|
</p>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "unordered list",
|
||||||
|
regexp: UNORDERED_LIST_REG,
|
||||||
|
renderer,
|
||||||
|
};
|
||||||
Loading…
Reference in New Issue