From bcfcd59642ea0857a9c7c015e7c59d2bd0192102 Mon Sep 17 00:00:00 2001 From: Steven Date: Sun, 17 Dec 2023 10:58:22 +0800 Subject: [PATCH] chore: deprecate old `MemoContent` --- web/src/components/ArchivedMemo.tsx | 4 +- web/src/components/Memo.tsx | 23 +----- web/src/components/MemoContent.tsx | 42 ----------- web/src/components/ShareMemoDialog.tsx | 4 +- web/src/less/memo-content.less | 98 -------------------------- web/src/pages/DailyReview.tsx | 4 +- web/src/pages/EmbedMemo.tsx | 4 +- 7 files changed, 10 insertions(+), 169 deletions(-) delete mode 100644 web/src/components/MemoContent.tsx delete mode 100644 web/src/less/memo-content.less diff --git a/web/src/components/ArchivedMemo.tsx b/web/src/components/ArchivedMemo.tsx index 4ac57869..cf158810 100644 --- a/web/src/components/ArchivedMemo.tsx +++ b/web/src/components/ArchivedMemo.tsx @@ -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) => { - + ); diff --git a/web/src/components/Memo.tsx b/web/src/components/Memo.tsx index 1ae82acd..14d9190d 100644 --- a/web/src/components/Memo.tsx +++ b/web/src/components/Memo.tsx @@ -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) => { } }; - 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 (
= (props: Props) => {
)} - + diff --git a/web/src/components/MemoContent.tsx b/web/src/components/MemoContent.tsx deleted file mode 100644 index 4dc2f2cc..00000000 --- a/web/src/components/MemoContent.tsx +++ /dev/null @@ -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) => { - const { className, content, onMemoContentClick, onMemoContentDoubleClick } = props; - const memoContentContainerRef = useRef(null); - - const handleMemoContentClick = async (e: React.MouseEvent) => { - if (onMemoContentClick) { - onMemoContentClick(e); - } - }; - - const handleMemoContentDoubleClick = async (e: React.MouseEvent) => { - if (onMemoContentDoubleClick) { - onMemoContentDoubleClick(e); - } - }; - - return ( -
-
- {marked(content)} -
-
- ); -}; - -export default MemoContent; diff --git a/web/src/components/ShareMemoDialog.tsx b/web/src/components/ShareMemoDialog.tsx index 593b64d2..dd0a319a 100644 --- a/web/src/components/ShareMemoDialog.tsx +++ b/web/src/components/ShareMemoDialog.tsx @@ -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) => { > {memo.displayTsStr}
- +
diff --git a/web/src/less/memo-content.less b/web/src/less/memo-content.less deleted file mode 100644 index d01521bd..00000000 --- a/web/src/less/memo-content.less +++ /dev/null @@ -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; - } - } -} diff --git a/web/src/pages/DailyReview.tsx b/web/src/pages/DailyReview.tsx index dcf1575f..93b9dcb3 100644 --- a/web/src/pages/DailyReview.tsx +++ b/web/src/pages/DailyReview.tsx @@ -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 = () => { #{memo.id}
- + relation.type === "REFERENCE")} />
diff --git a/web/src/pages/EmbedMemo.tsx b/web/src/pages/EmbedMemo.tsx index a80968cb..b3b0bf2c 100644 --- a/web/src/pages/EmbedMemo.tsx +++ b/web/src/pages/EmbedMemo.tsx @@ -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}
- undefined} /> + undefined} />