aiden
/
memos
mirror of https://github.com/usememos/memos
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

chore: deprecate old `MemoContent`

Browse Source
pull/2650/head
Steven 1 year ago
parent 5d677c3c57
commit bcfcd59642
7 changed files with 10 additions and 169 deletions
Show Stats Download Patch File Download Diff File

4
web/src/components/ArchivedMemo.tsx
Unescape Escape View File

@ -5,7 +5,7 @@ import { useMemoStore } from "@/store/module";
import { useTranslate } from "@/utils/i18n";
import { showCommonDialog } from "./Dialog/CommonDialog";
import Icon from "./Icon";
import MemoContent from "./MemoContent";
import MemoContentV1 from "./MemoContentV1";
import MemoResourceListView from "./MemoResourceListView";
import "@/less/memo.less";
@ -63,7 +63,7 @@ const ArchivedMemo: React.FC<Props> = (props: Props) => {
</Tooltip>
</div>
</div>
<MemoContent content={memo.content} />
<MemoContentV1 content={memo.content} />
<MemoResourceListView resourceList={memo.resourceList} />
</div>
);

23
web/src/components/Memo.tsx
Unescape Escape View File

@ -13,7 +13,7 @@ import { useTranslate } from "@/utils/i18n";
import showChangeMemoCreatedTsDialog from "./ChangeMemoCreatedTsDialog";
import { showCommonDialog } from "./Dialog/CommonDialog";
import Icon from "./Icon";
import MemoContent from "./MemoContent";
import MemoContentV1 from "./MemoContentV1";
import showMemoEditorDialog from "./MemoEditor/MemoEditorDialog";
import MemoRelationListView from "./MemoRelationListView";
import MemoResourceListView from "./MemoResourceListView";
@ -207,21 +207,6 @@ const Memo: React.FC<Props> = (props: Props) => {
}
};
const handleMemoContentDoubleClick = (e: React.MouseEvent) => {
if (readonly) {
return;
}
const targetEl = e.target as HTMLElement;
if (targetEl.className === "tag-span") {
return;
} else if (targetEl.classList.contains("todo-block")) {
return;
}
handleEditMemoClick();
};
return (
<div
className={`group memo-wrapper ${"memos-" + memo.id} ${memo.pinned && props.showPinnedStyle ? "pinned" : ""}`}
@ -329,11 +314,7 @@ const Memo: React.FC<Props> = (props: Props) => {
</Link>
</div>
)}
<MemoContent
content={memo.content}
onMemoContentClick={handleMemoContentClick}
onMemoContentDoubleClick={handleMemoContentDoubleClick}
/>
<MemoContentV1 content={memo.content} onMemoContentClick={handleMemoContentClick} />
<MemoResourceListView resourceList={memo.resourceList} />
<MemoRelationListView memo={memo} relationList={referenceRelations} />
</div>

42
web/src/components/MemoContent.tsx
Unescape Escape View File

@ -1,42 +0,0 @@
import { useRef } from "react";
import { marked } from "@/labs/marked";
import "@/less/memo-content.less";
interface Props {
content: string;
className?: string;
onMemoContentClick?: (e: React.MouseEvent) => void;
onMemoContentDoubleClick?: (e: React.MouseEvent) => void;
}
const MemoContent: React.FC<Props> = (props: Props) => {
const { className, content, onMemoContentClick, onMemoContentDoubleClick } = props;
const memoContentContainerRef = useRef<HTMLDivElement>(null);
const handleMemoContentClick = async (e: React.MouseEvent) => {
if (onMemoContentClick) {
onMemoContentClick(e);
}
};
const handleMemoContentDoubleClick = async (e: React.MouseEvent) => {
if (onMemoContentDoubleClick) {
onMemoContentDoubleClick(e);
}
};
return (
<div className={`memo-content-wrapper ${className || ""}`}>
<div
ref={memoContentContainerRef}
className="memo-content-text"
onClick={handleMemoContentClick}
onDoubleClick={handleMemoContentDoubleClick}
>
{marked(content)}
</div>
</div>
);
};
export default MemoContent;

4
web/src/components/ShareMemoDialog.tsx
Unescape Escape View File

@ -10,7 +10,7 @@ import { useTranslate } from "@/utils/i18n";
import { generateDialog } from "./Dialog";
import showEmbedMemoDialog from "./EmbedMemoDialog";
import Icon from "./Icon";
import MemoContent from "./MemoContent";
import MemoContentV1 from "./MemoContentV1";
import MemoResourceListView from "./MemoResourceListView";
import UserAvatar from "./UserAvatar";
import "@/less/share-memo-dialog.less";
@ -112,7 +112,7 @@ const ShareMemoDialog: React.FC<Props> = (props: Props) => {
>
<span className="w-full px-6 pt-5 pb-2 text-sm text-gray-500">{memo.displayTsStr}</span>
<div className="w-full px-6 text-base pb-4">
<MemoContent content={memo.content} />
<MemoContentV1 content={memo.content} />
<MemoResourceListView resourceList={memo.resourceList} />
</div>
<div className="flex flex-row justify-between items-center w-full bg-gray-100 dark:bg-zinc-700 py-4 px-6">

98
web/src/less/memo-content.less
Unescape Escape View File

@ -1,98 +0,0 @@
.memo-content-wrapper {
@apply w-full flex flex-col justify-start items-start text-gray-800 dark:text-gray-300;
> .memo-content-text {
@apply w-full max-w-full word-break text-base leading-6;
> h1 {
@apply text-5xl leading-normal font-bold;
}
> h2 {
@apply text-3xl leading-normal font-medium;
}
> h3 {
@apply text-xl leading-normal font-medium;
}
> h4 {
@apply text-lg;
}
> p {
@apply w-full h-auto mb-1 last:mb-0 text-base;
min-height: 24px;
}
> .li-container {
@apply w-full flex flex-row flex-nowrap;
}
.img {
@apply block max-w-full rounded cursor-pointer hover:shadow;
}
.tag-span {
@apply inline-block w-auto text-blue-600 dark:text-blue-400 cursor-pointer;
}
.link {
@apply text-blue-600 dark:text-blue-400 cursor-pointer underline break-all hover:opacity-80 decoration-1;
code {
@apply underline decoration-1;
}
}
.ol-block,
.ul-block,
.todo-block {
@apply shrink-0 inline-block box-border text-right w-7 mr-px font-mono text-sm leading-6 select-none whitespace-nowrap;
}
.ol-block {
@apply opacity-80 pr-1 mt-px;
}
.ul-block {
@apply text-center mt-px;
}
.todo-block {
@apply w-4 h-4 leading-4 mx-1 mr-2 mt-1 border rounded box-border text-lg cursor-pointer shadow-inner hover:opacity-80;
}
pre {
@apply w-full my-1 p-3 rounded bg-gray-100 dark:bg-zinc-600 whitespace-pre-wrap relative;
code {
@apply block;
}
}
code {
@apply break-all bg-gray-100 dark:bg-zinc-600 px-1 rounded text-sm font-mono leading-6 inline-block;
}
table {
@apply my-1 table-auto border-collapse border border-gray-300;
th {
@apply px-4 py-1 text-center border border-gray-300;
}
td {
@apply px-4 py-1 text-center border border-gray-300;
}
}
blockquote {
@apply border-l-4 pl-2 text-gray-400 dark:text-gray-300;
}
hr {
@apply my-1 dark:border-zinc-600;
}
}
}

4
web/src/pages/DailyReview.tsx
Unescape Escape View File

@ -5,7 +5,7 @@ import toast from "react-hot-toast";
import useToggle from "react-use/lib/useToggle";
import Empty from "@/components/Empty";
import Icon from "@/components/Icon";
import MemoContent from "@/components/MemoContent";
import MemoContentV1 from "@/components/MemoContentV1";
import MemoEditor from "@/components/MemoEditor";
import MemoRelationListView from "@/components/MemoRelationListView";
import MemoResourceListView from "@/components/MemoResourceListView";
@ -112,7 +112,7 @@ const DailyReview = () => {
<Icon.Dot className="w-5 h-auto opacity-60" />
<span className="opacity-60">#{memo.id}</span>
</div>
<MemoContent content={memo.content} />
<MemoContentV1 content={memo.content} />
<MemoResourceListView resourceList={memo.resourceList} />
<MemoRelationListView memo={memo} relationList={memo.relationList.filter((relation) => relation.type === "REFERENCE")} />
<div className="absolute left-1 sm:left-2 top-3 h-full">

4
web/src/pages/EmbedMemo.tsx
Unescape Escape View File

@ -1,7 +1,7 @@
import { useEffect, useState } from "react";
import { toast } from "react-hot-toast";
import { useParams } from "react-router-dom";
import MemoContent from "@/components/MemoContent";
import MemoContentV1 from "@/components/MemoContentV1";
import MemoResourceListView from "@/components/MemoResourceListView";
import { UNKNOWN_ID } from "@/helpers/consts";
import { getDateTimeString } from "@/helpers/datetime";
@ -50,7 +50,7 @@ const EmbedMemo = () => {
@{state.memo.creatorName}
</a>
</div>
<MemoContent className="memo-content" content={state.memo.content} onMemoContentClick={() => undefined} />
<MemoContentV1 className="memo-content" content={state.memo.content} onMemoContentClick={() => undefined} />
<MemoResourceListView resourceList={state.memo.resourceList} />
</div>
</div>

Write Preview
Loading…
Cancel
Save