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 { matcher } from "../matcher";
|
||||
import Link from "./Link";
|
||||
import PlainText from "./PlainText";
|
||||
|
||||
export const BOLD_EMPHASIS_REG = /\*\*\*(.+?)\*\*\*/;
|
||||
|
||||
const matcher = (rawStr: string) => {
|
||||
const matchResult = rawStr.match(BOLD_EMPHASIS_REG);
|
||||
return matchResult;
|
||||
};
|
||||
|
||||
const renderer = (rawStr: string): string => {
|
||||
const matchResult = matcher(rawStr);
|
||||
const renderer = (rawStr: string) => {
|
||||
const matchResult = matcher(rawStr, BOLD_EMPHASIS_REG);
|
||||
if (!matchResult) {
|
||||
return rawStr;
|
||||
}
|
||||
|
||||
const parsedContent = marked(matchResult[1], [], [Link, PlainText]);
|
||||
return `<strong><em>${parsedContent}</em></strong>`;
|
||||
return (
|
||||
<strong>
|
||||
<em>${parsedContent}</em>
|
||||
</strong>
|
||||
);
|
||||
};
|
||||
|
||||
export default {
|
||||
name: "bold emphasis",
|
||||
regex: BOLD_EMPHASIS_REG,
|
||||
matcher,
|
||||
regexp: BOLD_EMPHASIS_REG,
|
||||
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 { matcher } from "../matcher";
|
||||
import Link from "./Link";
|
||||
import PlainText from "./PlainText";
|
||||
|
||||
export const EMPHASIS_REG = /\*(.+?)\*/;
|
||||
|
||||
const matcher = (rawStr: string) => {
|
||||
const matchResult = rawStr.match(EMPHASIS_REG);
|
||||
return matchResult;
|
||||
};
|
||||
|
||||
const renderer = (rawStr: string): string => {
|
||||
const matchResult = matcher(rawStr);
|
||||
const renderer = (rawStr: string) => {
|
||||
const matchResult = matcher(rawStr, EMPHASIS_REG);
|
||||
if (!matchResult) {
|
||||
return rawStr;
|
||||
}
|
||||
|
||||
const parsedContent = marked(matchResult[1], [], [Link, PlainText]);
|
||||
return `<em>${parsedContent}</em>`;
|
||||
return <em>{parsedContent}</em>;
|
||||
};
|
||||
|
||||
export default {
|
||||
name: "emphasis",
|
||||
regex: EMPHASIS_REG,
|
||||
matcher,
|
||||
regexp: EMPHASIS_REG,
|
||||
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 { absolutifyLink } from "../../../helpers/utils";
|
||||
import { matcher } from "../matcher";
|
||||
|
||||
export const IMAGE_REG = /!\[.*?\]\((.+?)\)/;
|
||||
|
||||
const matcher = (rawStr: string) => {
|
||||
const matchResult = rawStr.match(IMAGE_REG);
|
||||
return matchResult;
|
||||
};
|
||||
|
||||
const renderer = (rawStr: string): string => {
|
||||
const matchResult = matcher(rawStr);
|
||||
const renderer = (rawStr: string) => {
|
||||
const matchResult = matcher(rawStr, IMAGE_REG);
|
||||
if (!matchResult) {
|
||||
return rawStr;
|
||||
}
|
||||
|
||||
const imageUrl = absolutifyLink(escape(matchResult[1]));
|
||||
return `<img class='img' src='${imageUrl}' />`;
|
||||
return <img className="img" src={imageUrl} />;
|
||||
};
|
||||
|
||||
export default {
|
||||
name: "image",
|
||||
regex: IMAGE_REG,
|
||||
matcher,
|
||||
regexp: IMAGE_REG,
|
||||
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