mirror of
https://github.com/usememos/memos.git
synced 2025-04-02 20:10:45 +02:00
70 lines
2.4 KiB
TypeScript
70 lines
2.4 KiB
TypeScript
import { escape } from "lodash-es";
|
|
|
|
const CODE_BLOCK_REG = /```([\s\S]*?)```\n?/g;
|
|
const BOLD_TEXT_REG = /\*\*(.+?)\*\*/g;
|
|
const EM_TEXT_REG = /\*(.+?)\*/g;
|
|
const DOT_LI_REG = /[*-] /g;
|
|
const NUM_LI_REG = /(\d+)\. /g;
|
|
export const TODO_BLOCK_REG = /- \[ \] /g;
|
|
export const DONE_BLOCK_REG = /- \[x\] /g;
|
|
// tag regex
|
|
export const TAG_REG = /#([^\s#]+?) /g;
|
|
// markdown image regex
|
|
export const IMAGE_URL_REG = /!\[.*?\]\((.+?)\)\n?/g;
|
|
// markdown link regex
|
|
export const LINK_URL_REG = /\[(.*?)\]\((.+?)\)/g;
|
|
// linked memo regex
|
|
export const MEMO_LINK_REG = /@\[(.+?)\]\((.+?)\)/g;
|
|
|
|
const parseMarkedToHtml = (markedStr: string): string => {
|
|
const htmlText = markedStr
|
|
.replace(/([\u4e00-\u9fa5])([A-Za-z0-9?.,;[\]]+)/g, "$1 $2")
|
|
.replace(/([A-Za-z0-9?.,;[\]]+)([\u4e00-\u9fa5])/g, "$1 $2")
|
|
.replace(CODE_BLOCK_REG, "<pre lang=''>$1</pre>")
|
|
.replace(TODO_BLOCK_REG, "<span class='todo-block todo' data-value='TODO'></span>")
|
|
.replace(DONE_BLOCK_REG, "<span class='todo-block done' data-value='DONE'>✓</span>")
|
|
.replace(DOT_LI_REG, "<span class='counter-block'>•</span>")
|
|
.replace(NUM_LI_REG, "<span class='counter-block'>$1.</span>")
|
|
.replace(BOLD_TEXT_REG, "<strong>$1</strong>")
|
|
.replace(EM_TEXT_REG, "<em>$1</em>");
|
|
return htmlText;
|
|
};
|
|
|
|
const parseHtmlToRawText = (htmlStr: string): string => {
|
|
const tempEl = document.createElement("div");
|
|
tempEl.className = "memo-content-text";
|
|
tempEl.innerHTML = htmlStr;
|
|
const text = tempEl.innerText;
|
|
return text;
|
|
};
|
|
|
|
interface FormatterConfig {
|
|
inlineImage: boolean;
|
|
}
|
|
const defaultFormatterConfig: FormatterConfig = {
|
|
inlineImage: false,
|
|
};
|
|
|
|
const formatMemoContent = (content: string, addtionConfig?: Partial<FormatterConfig>) => {
|
|
const config = {
|
|
...defaultFormatterConfig,
|
|
...addtionConfig,
|
|
};
|
|
const tempElement = document.createElement("div");
|
|
tempElement.innerHTML = parseMarkedToHtml(escape(content));
|
|
|
|
let outputString = tempElement.innerHTML;
|
|
if (config.inlineImage) {
|
|
outputString = outputString.replace(IMAGE_URL_REG, "<img class='img' src='$1' />");
|
|
} else {
|
|
outputString = outputString.replace(IMAGE_URL_REG, "");
|
|
}
|
|
|
|
return outputString
|
|
.replace(MEMO_LINK_REG, "<span class='memo-link-text' data-value='$2'>$1</span>")
|
|
.replace(LINK_URL_REG, "<a class='link' target='_blank' rel='noreferrer' href='$2'>$1</a>")
|
|
.replace(TAG_REG, "<span class='tag-span'>#$1</span> ");
|
|
};
|
|
|
|
export { formatMemoContent, parseHtmlToRawText };
|