chore: update memo content props

web/src/components/MemoContent/index.tsx

@@ -1,35 +1,17 @@
-import { isUndefined } from "lodash-es";
-import { useEffect, useRef, useState } from "react";
-import { markdownServiceClient } from "@/grpcweb";
+import { useRef } from "react";
 import { Node } from "@/types/proto/api/v2/markdown_service";
 import Renderer from "./Renderer";
 
 interface Props {
-  content: string;
-  nodes?: Node[];
+  nodes: Node[];
   className?: string;
   onMemoContentClick?: (e: React.MouseEvent) => void;
 }
 
 const MemoContent: React.FC<Props> = (props: Props) => {
-  const { className, content, onMemoContentClick } = props;
-  const [nodes, setNodes] = useState<Node[]>(props.nodes ?? []);
+  const { className, onMemoContentClick } = props;
   const memoContentContainerRef = useRef<HTMLDivElement>(null);
 
-  useEffect(() => {
-    if (!isUndefined(props.nodes)) {
-      return;
-    }
-
-    markdownServiceClient
-      .parseMarkdown({
-        markdown: content,
-      })
-      .then(({ nodes }) => {
-        setNodes(nodes);
-      });
-  }, [content, props.nodes]);
-
   const handleMemoContentClick = async (e: React.MouseEvent) => {
     if (onMemoContentClick) {
       onMemoContentClick(e);
@@ -43,7 +25,7 @@ const MemoContent: React.FC<Props> = (props: Props) => {
         className="w-full max-w-full word-break text-base leading-6 space-y-1"
         onClick={handleMemoContentClick}
       >
-        {nodes.map((node, index) => (
+        {props.nodes.map((node, index) => (
           <Renderer key={`${node.type}-${index}`} node={node} />
         ))}
       </div>

web/src/components/MemoView.tsx

@@ -205,7 +205,7 @@ const MemoView: React.FC<Props> = (props: Props) => {
           <div className="w-auto hidden group-hover:flex flex-row justify-between items-center">
             {props.showVisibility && memo.visibility !== Visibility.PRIVATE && (
               <>
-                <Tooltip title={t(`memo.visibility.${convertVisibilityToString(memo.visibility)}` as any)} placement="top">
+                <Tooltip title={t(`memo.visibility.${convertVisibilityToString(memo.visibility).toLowerCase()}` as any)} placement="top">
                   <span>
                     <VisibilityIcon visibility={memo.visibility} />
                   </span>
@@ -251,7 +251,7 @@ const MemoView: React.FC<Props> = (props: Props) => {
           )}
         </div>
       </div>
-      <MemoContent content={memo.content} nodes={memo.nodes} onMemoContentClick={handleMemoContentClick} />
+      <MemoContent nodes={memo.nodes} onMemoContentClick={handleMemoContentClick} />
       <MemoResourceListView resourceList={memo.resources} />
       <MemoRelationListView memo={memo} relationList={referenceRelations} />
     </div>

web/src/components/ShareMemoDialog.tsx

@@ -100,7 +100,7 @@ const ShareMemoDialog: React.FC<Props> = (props: Props) => {
           >
             <span className="w-full px-6 pt-5 pb-2 text-sm text-gray-500">{getDateTimeString(memo.displayTime)}</span>
             <div className="w-full px-6 text-base pb-4">
-              <MemoContent content={memo.content} />
+              <MemoContent nodes={memo.nodes} />
               <MemoResourceListView resourceList={memo.resources} />
             </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/components/TimelineMemo.tsx

@@ -21,7 +21,7 @@ const TimelineMemo = (props: Props) => {
         <Icon.Dot className="w-5 h-auto opacity-60" />
         <span className="opacity-60">#{memo.id}</span>
       </div>
-      <MemoContent content={memo.content} nodes={memo.nodes} />
+      <MemoContent nodes={memo.nodes} />
       <MemoResourceListView resourceList={memo.resources} />
       <MemoRelationListView memo={memo} relationList={relations} />
     </div>

web/src/pages/Archived.tsx

@@ -105,7 +105,7 @@ const Archived = () => {
                     </Tooltip>
                   </div>
                 </div>
-                <MemoContent content={memo.content} nodes={memo.nodes} />
+                <MemoContent nodes={memo.nodes} />
               </div>
             ))}
           </div>

web/src/pages/MemoDetail.tsx

@@ -139,7 +139,7 @@ const MemoDetail = () => {
               </Link>
             </div>
           )}
-          <MemoContent content={memo.content} />
+          <MemoContent nodes={memo.nodes} />
           <MemoResourceListView resourceList={memo.resources} />
           <MemoRelationListView memo={memo} relationList={referenceRelations} />
           <div className="w-full mt-3 flex flex-row justify-between items-center gap-2">