chore: deprecate old `MemoContent`

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: Props) => {
           </Tooltip>
         </div>
       </div>
-      <MemoContent content={memo.content} />
+      <MemoContentV1 content={memo.content} />
       <MemoResourceListView resourceList={memo.resourceList} />
     </div>
   );

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: 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>

web/src/components/MemoContent.tsx

-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;

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: 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">

web/src/less/memo-content.less

-.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;
-    }
-  }
-}

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 = () => {
                   <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">

web/src/pages/EmbedMemo.tsx

 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>