YourSelfHosted/memos
1
0
Fork 0
mirror of https://github.com/usememos/memos.git synced 2025-06-05 22:09:59 +02:00
Code Issues Packages Projects Releases Wiki Activity

chore: update content parser (#97)

Browse Source
This commit is contained in:
boojack
2022-06-30 21:19:50 +08:00
committed by GitHub
parent 5b2e6a568f
commit 64f67f4bda
8 changed files with 35 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
web/src/components/Memo.tsx
View File

@ -1,10 +1,10 @@
import { memo, useEffect, useRef, useState } from "react";
import { escape } from "lodash-es";
import { IMAGE_URL_REG, LINK_REG, MEMO_LINK_REG, TAG_REG, UNKNOWN_ID } from "../helpers/consts";
import { parseMarkedToHtml, parseRawTextToHtml } from "../helpers/marked";
import { parseMarkedToHtml } from "../helpers/marked";
import * as utils from "../helpers/utils";
import useToggle from "../hooks/useToggle";
import { editorStateService, memoService } from "../services";
import { editorStateService, locationService, memoService } from "../services";
import Only from "./common/OnlyWhen";
import Image from "./Image";
import showMemoCardDialog from "./MemoCardDialog";
@ -116,8 +116,16 @@ const Memo: React.FC<Props> = (props: Props) => {
toastHelper.error("MEMO Not Found");
targetEl.classList.remove("memo-link-text");
}
} else if (targetEl.tagName === "SPAN" && targetEl.className === "tag-span") {
const tagName = targetEl.innerText.slice(1);
const currTagQuery = locationService.getState().query?.tag;
if (currTagQuery === tagName) {
locationService.setTagQuery("");
} else {
locationService.setTagQuery(tagName);
}
} else if (targetEl.className === "todo-block") {
// do nth
// ...do nth
}
};
@ -196,32 +204,10 @@ const Memo: React.FC<Props> = (props: Props) => {
};
export function formatMemoContent(content: string) {
content = escape(content);
content = parseRawTextToHtml(content)
.split("<br>")
.map((t) => {
return `<p>${t !== "" ? t : "<br>"}</p>`;
})
.join("");
const tempElement = document.createElement("div");
tempElement.innerHTML = parseMarkedToHtml(escape(content));
content = parseMarkedToHtml(content);
// Add space in english and chinese
content = content.replace(/([\u4e00-\u9fa5])([A-Za-z0-9?.,;[\]]+)/g, "$1 $2").replace(/([A-Za-z0-9?.,;[\]]+)([\u4e00-\u9fa5])/g, "$1 $2");
const tempDivContainer = document.createElement("div");
tempDivContainer.innerHTML = content;
for (let i = 0; i < tempDivContainer.children.length; i++) {
const c = tempDivContainer.children[i];
if (c.tagName === "P" && c.textContent === "" && c.firstElementChild?.tagName !== "BR") {
c.remove();
i--;
continue;
}
}
return tempDivContainer.innerHTML
return tempElement.innerHTML
.replace(IMAGE_URL_REG, "")
.replace(TAG_REG, "<span class='tag-span'>#$1</span> ")
.replace(LINK_REG, "<a class='link' target='_blank' rel='noreferrer' href='$1'>$1</a>")

19
web/src/components/MemoList.tsx
View File

@ -1,5 +1,5 @@
import { useCallback, useEffect, useRef, useState } from "react";
import { locationService, memoService, shortcutService } from "../services";
import { useEffect, useRef, useState } from "react";
import { memoService, shortcutService } from "../services";
import { useAppSelector } from "../store";
import { IMAGE_URL_REG, LINK_REG, MEMO_LINK_REG, TAG_REG } from "../helpers/consts";
import * as utils from "../helpers/utils";
@ -94,21 +94,8 @@ const MemoList: React.FC<Props> = () => {
wrapperElement.current?.scrollTo({ top: 0 });
}, [query]);
const handleMemoListClick = useCallback((event: React.MouseEvent) => {
const targetEl = event.target as HTMLElement;
if (targetEl.tagName === "SPAN" && targetEl.className === "tag-span") {
const tagName = targetEl.innerText.slice(1);
const currTagQuery = locationService.getState().query?.tag;
if (currTagQuery === tagName) {
locationService.setTagQuery("");
} else {
locationService.setTagQuery(tagName);
}
}
}, []);
return (
<div className={`memo-list-container ${isFetching ? "" : "completed"}`} onClick={handleMemoListClick} ref={wrapperElement}>
<div className={`memo-list-container ${isFetching ? "" : "completed"}`} ref={wrapperElement}>
{sortedMemos.map((memo) => (
<Memo key={`${memo.id}-${memo.updatedTs}`} memo={memo} />
))}

28
web/src/helpers/marked.ts
View File

@ -1,27 +1,22 @@
/**
* 实现一个简易版的 markdown 解析
* - 列表解析；
* - 代码块；
* - 加粗/斜体；
* - TODO;
*/
const CODE_BLOCK_REG = /```([\s\S]*?)```/g;
const BOLD_TEXT_REG = /\*\*(.+?)\*\*/g;
const EM_TEXT_REG = /\*(.+?)\*/g;
const TODO_BLOCK_REG = /\[ \] /g;
const DONE_BLOCK_REG = /\[x\] /g;
const DOT_LI_REG = /[*] /g;
const TODO_BLOCK_REG = /- \[ \] /g;
const DONE_BLOCK_REG = /- \[x\] /g;
const DOT_LI_REG = /[*-] /g;
const NUM_LI_REG = /(\d+)\. /g;
const parseMarkedToHtml = (markedStr: string): string => {
const htmlText = markedStr
.replace(CODE_BLOCK_REG, "<pre lang=''>$1</pre>")
.replace(DOT_LI_REG, "<span class='counter-block'>•</span>")
.replace(NUM_LI_REG, "<span class='counter-block'>$1.</span>")
.replace(TODO_BLOCK_REG, "<span class='todo-block' data-type='todo'>⬜</span>")
.replace(DONE_BLOCK_REG, "<span class='todo-block' data-type='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>");
.replace(EM_TEXT_REG, "<em>$1</em>")
.replace(/([\u4e00-\u9fa5])([A-Za-z0-9?.,;[\]]+)/g, "$1 $2")
.replace(/([A-Za-z0-9?.,;[\]]+)([\u4e00-\u9fa5])/g, "$1 $2");
return htmlText;
};
@ -34,9 +29,4 @@ const parseHtmlToRawText = (htmlStr: string): string => {
return text;
};
const parseRawTextToHtml = (rawTextStr: string): string => {
const htmlText = rawTextStr.replace(/\n/g, "<br>");
return htmlText;
};
export { parseMarkedToHtml, parseHtmlToRawText, parseRawTextToHtml };
export { parseMarkedToHtml, parseHtmlToRawText };

6
web/src/less/daily-memo.less
View File

@ -21,12 +21,6 @@
> .memo-content-container {
@apply flex flex-col justify-start items-start w-full p-0 text-base;
> .memo-content-text {
.tag-span {
cursor: unset;
}
}
> .images-container {
@apply flex flex-col justify-start items-start mt-1 w-full;

6
web/src/less/memo-card-dialog.less
View File

@ -41,11 +41,7 @@
@apply w-full pt-2;
> .memo-content-text {
@apply w-full text-base leading-6;
.tag-span {
@apply p-0 text-blue-600 text-base bg-transparent cursor-auto;
}
@apply w-full text-base;
}
> .images-wrapper {

5
web/src/less/memo-content.less
View File

@ -1,15 +1,14 @@
@import "./mixin.less";
.memo-content-text {
.flex(column, flex-start, flex-start);
@apply w-full whitespace-pre-wrap break-words;
@apply w-full whitespace-pre-wrap break-words text-base leading-7;
> p {
@apply inline-block w-full h-auto mb-1 last:mb-0 text-base leading-7 whitespace-pre-wrap break-words;
}
.tag-span {
@apply inline-block w-auto px-2 text-sm leading-6 border-none rounded cursor-pointer text-blue-600 bg-blue-50 hover:text-white hover:bg-blue-600;
@apply inline-block w-auto font-mono text-blue-600;
}
.memo-link-text {

4
web/src/less/memo.less
View File

@ -87,6 +87,10 @@
> .memo-content-text {
@apply w-full h-auto transition-all;
.tag-span {
@apply cursor-pointer hover:opacity-80;
}
}
> .expand-btn-container {

4
web/src/less/tag-list.less
View File

@ -76,10 +76,10 @@
}
> .tag-tip-container {
@apply w-full mt-2 pl-4 text-xs text-gray-400;
@apply w-full mt-2 pl-4 text-sm text-gray-400;
> .code-text {
@apply p-1 mx-1 text-blue-400 font-mono whitespace-pre-line bg-blue-100 rounded;
@apply p-1 mx-1 text-blue-600 font-mono whitespace-pre-line bg-blue-100 rounded;
}
}
}