feat: implement embedded resource renderer

api/v2/resource_service.go

@@ -66,6 +66,19 @@ func (s *APIV2Service) ListResources(ctx context.Context, _ *apiv2pb.ListResourc
 	return response, nil
 }
 
+func (s *APIV2Service) GetResource(ctx context.Context, request *apiv2pb.GetResourceRequest) (*apiv2pb.GetResourceResponse, error) {
+	resource, err := s.Store.GetResource(ctx, &store.FindResource{
+		ID: &request.Id,
+	})
+	if err != nil {
+		return nil, status.Errorf(codes.Internal, "failed to list resources: %v", err)
+	}
+
+	return &apiv2pb.GetResourceResponse{
+		Resource: s.convertResourceFromStore(ctx, resource),
+	}, nil
+}
+
 func (s *APIV2Service) UpdateResource(ctx context.Context, request *apiv2pb.UpdateResourceRequest) (*apiv2pb.UpdateResourceResponse, error) {
 	if request.UpdateMask == nil || len(request.UpdateMask.Paths) == 0 {
 		return nil, status.Errorf(codes.InvalidArgument, "update mask is required")

proto/api/v2/resource_service.proto

@@ -16,6 +16,10 @@ service ResourceService {
   rpc ListResources(ListResourcesRequest) returns (ListResourcesResponse) {
     option (google.api.http) = {get: "/api/v2/resources"};
   }
+  rpc GetResource(GetResourceRequest) returns (GetResourceResponse) {
+    option (google.api.http) = {get: "/api/v2/resources/{id}"};
+    option (google.api.method_signature) = "id";
+  }
   rpc UpdateResource(UpdateResourceRequest) returns (UpdateResourceResponse) {
     option (google.api.http) = {
       patch: "/api/v2/resources/{resource.id}",
@@ -24,7 +28,7 @@ service ResourceService {
     option (google.api.method_signature) = "resource,update_mask";
   }
   rpc DeleteResource(DeleteResourceRequest) returns (DeleteResourceResponse) {
-    option (google.api.http) = {get: "/api/v2/resources/{id}"};
+    option (google.api.http) = {delete: "/api/v2/resources/{id}"};
     option (google.api.method_signature) = "id";
   }
 }
@@ -56,6 +60,14 @@ message ListResourcesResponse {
   repeated Resource resources = 1;
 }
 
+message GetResourceRequest {
+  int32 id = 1;
+}
+
+message GetResourceResponse {
+  Resource resource = 1;
+}
+
 message UpdateResourceRequest {
   Resource resource = 1;
 

proto/gen/api/v2/README.md

@@ -112,6 +112,8 @@
     - [CreateResourceResponse](#memos-api-v2-CreateResourceResponse)
     - [DeleteResourceRequest](#memos-api-v2-DeleteResourceRequest)
     - [DeleteResourceResponse](#memos-api-v2-DeleteResourceResponse)
+    - [GetResourceRequest](#memos-api-v2-GetResourceRequest)
+    - [GetResourceResponse](#memos-api-v2-GetResourceResponse)
     - [ListResourcesRequest](#memos-api-v2-ListResourcesRequest)
     - [ListResourcesResponse](#memos-api-v2-ListResourcesResponse)
     - [Resource](#memos-api-v2-Resource)
@@ -1637,6 +1639,36 @@
 
 
 
+<a name="memos-api-v2-GetResourceRequest"></a>
+
+### GetResourceRequest
+
+
+
+| Field | Type | Label | Description |
+| ----- | ---- | ----- | ----------- |
+| id | [int32](#int32) |  |  |
+
+
+
+
+
+
+<a name="memos-api-v2-GetResourceResponse"></a>
+
+### GetResourceResponse
+
+
+
+| Field | Type | Label | Description |
+| ----- | ---- | ----- | ----------- |
+| resource | [Resource](#memos-api-v2-Resource) |  |  |
+
+
+
+
+
+
 <a name="memos-api-v2-ListResourcesRequest"></a>
 
 ### ListResourcesRequest
@@ -1729,6 +1761,7 @@
 | ----------- | ------------ | ------------- | ------------|
 | CreateResource | [CreateResourceRequest](#memos-api-v2-CreateResourceRequest) | [CreateResourceResponse](#memos-api-v2-CreateResourceResponse) |  |
 | ListResources | [ListResourcesRequest](#memos-api-v2-ListResourcesRequest) | [ListResourcesResponse](#memos-api-v2-ListResourcesResponse) |  |
+| GetResource | [GetResourceRequest](#memos-api-v2-GetResourceRequest) | [GetResourceResponse](#memos-api-v2-GetResourceResponse) |  |
 | UpdateResource | [UpdateResourceRequest](#memos-api-v2-UpdateResourceRequest) | [UpdateResourceResponse](#memos-api-v2-UpdateResourceResponse) |  |
 | DeleteResource | [DeleteResourceRequest](#memos-api-v2-DeleteResourceRequest) | [DeleteResourceResponse](#memos-api-v2-DeleteResourceResponse) |  |
 

proto/gen/api/v2/resource_service.pb.gw.go

@@ -85,6 +85,58 @@ func local_request_ResourceService_ListResources_0(ctx context.Context, marshale
 
 }
 
+func request_ResourceService_GetResource_0(ctx context.Context, marshaler runtime.Marshaler, client ResourceServiceClient, req *http.Request, pathParams map[string]string) (proto.Message, runtime.ServerMetadata, error) {
+	var protoReq GetResourceRequest
+	var metadata runtime.ServerMetadata
+
+	var (
+		val string
+		ok  bool
+		err error
+		_   = err
+	)
+
+	val, ok = pathParams["id"]
+	if !ok {
+		return nil, metadata, status.Errorf(codes.InvalidArgument, "missing parameter %s", "id")
+	}
+
+	protoReq.Id, err = runtime.Int32(val)
+	if err != nil {
+		return nil, metadata, status.Errorf(codes.InvalidArgument, "type mismatch, parameter: %s, error: %v", "id", err)
+	}
+
+	msg, err := client.GetResource(ctx, &protoReq, grpc.Header(&metadata.HeaderMD), grpc.Trailer(&metadata.TrailerMD))
+	return msg, metadata, err
+
+}
+
+func local_request_ResourceService_GetResource_0(ctx context.Context, marshaler runtime.Marshaler, server ResourceServiceServer, req *http.Request, pathParams map[string]string) (proto.Message, runtime.ServerMetadata, error) {
+	var protoReq GetResourceRequest
+	var metadata runtime.ServerMetadata
+
+	var (
+		val string
+		ok  bool
+		err error
+		_   = err
+	)
+
+	val, ok = pathParams["id"]
+	if !ok {
+		return nil, metadata, status.Errorf(codes.InvalidArgument, "missing parameter %s", "id")
+	}
+
+	protoReq.Id, err = runtime.Int32(val)
+	if err != nil {
+		return nil, metadata, status.Errorf(codes.InvalidArgument, "type mismatch, parameter: %s, error: %v", "id", err)
+	}
+
+	msg, err := server.GetResource(ctx, &protoReq)
+	return msg, metadata, err
+
+}
+
 var (
 	filter_ResourceService_UpdateResource_0 = &utilities.DoubleArray{Encoding: map[string]int{"resource": 0, "id": 1}, Base: []int{1, 4, 5, 2, 0, 0, 0, 0}, Check: []int{0, 1, 1, 2, 4, 2, 2, 3}}
 )
@@ -293,6 +345,31 @@ func RegisterResourceServiceHandlerServer(ctx context.Context, mux *runtime.Serv
 
 	})
 
+	mux.Handle("GET", pattern_ResourceService_GetResource_0, func(w http.ResponseWriter, req *http.Request, pathParams map[string]string) {
+		ctx, cancel := context.WithCancel(req.Context())
+		defer cancel()
+		var stream runtime.ServerTransportStream
+		ctx = grpc.NewContextWithServerTransportStream(ctx, &stream)
+		inboundMarshaler, outboundMarshaler := runtime.MarshalerForRequest(mux, req)
+		var err error
+		var annotatedContext context.Context
+		annotatedContext, err = runtime.AnnotateIncomingContext(ctx, mux, req, "/memos.api.v2.ResourceService/GetResource", runtime.WithHTTPPathPattern("/api/v2/resources/{id}"))
+		if err != nil {
+			runtime.HTTPError(ctx, mux, outboundMarshaler, w, req, err)
+			return
+		}
+		resp, md, err := local_request_ResourceService_GetResource_0(annotatedContext, inboundMarshaler, server, req, pathParams)
+		md.HeaderMD, md.TrailerMD = metadata.Join(md.HeaderMD, stream.Header()), metadata.Join(md.TrailerMD, stream.Trailer())
+		annotatedContext = runtime.NewServerMetadataContext(annotatedContext, md)
+		if err != nil {
+			runtime.HTTPError(annotatedContext, mux, outboundMarshaler, w, req, err)
+			return
+		}
+
+		forward_ResourceService_GetResource_0(annotatedContext, mux, outboundMarshaler, w, req, resp, mux.GetForwardResponseOptions()...)
+
+	})
+
 	mux.Handle("PATCH", pattern_ResourceService_UpdateResource_0, func(w http.ResponseWriter, req *http.Request, pathParams map[string]string) {
 		ctx, cancel := context.WithCancel(req.Context())
 		defer cancel()
@@ -318,7 +395,7 @@ func RegisterResourceServiceHandlerServer(ctx context.Context, mux *runtime.Serv
 
 	})
 
-	mux.Handle("GET", pattern_ResourceService_DeleteResource_0, func(w http.ResponseWriter, req *http.Request, pathParams map[string]string) {
+	mux.Handle("DELETE", pattern_ResourceService_DeleteResource_0, func(w http.ResponseWriter, req *http.Request, pathParams map[string]string) {
 		ctx, cancel := context.WithCancel(req.Context())
 		defer cancel()
 		var stream runtime.ServerTransportStream
@@ -428,6 +505,28 @@ func RegisterResourceServiceHandlerClient(ctx context.Context, mux *runtime.Serv
 
 	})
 
+	mux.Handle("GET", pattern_ResourceService_GetResource_0, func(w http.ResponseWriter, req *http.Request, pathParams map[string]string) {
+		ctx, cancel := context.WithCancel(req.Context())
+		defer cancel()
+		inboundMarshaler, outboundMarshaler := runtime.MarshalerForRequest(mux, req)
+		var err error
+		var annotatedContext context.Context
+		annotatedContext, err = runtime.AnnotateContext(ctx, mux, req, "/memos.api.v2.ResourceService/GetResource", runtime.WithHTTPPathPattern("/api/v2/resources/{id}"))
+		if err != nil {
+			runtime.HTTPError(ctx, mux, outboundMarshaler, w, req, err)
+			return
+		}
+		resp, md, err := request_ResourceService_GetResource_0(annotatedContext, inboundMarshaler, client, req, pathParams)
+		annotatedContext = runtime.NewServerMetadataContext(annotatedContext, md)
+		if err != nil {
+			runtime.HTTPError(annotatedContext, mux, outboundMarshaler, w, req, err)
+			return
+		}
+
+		forward_ResourceService_GetResource_0(annotatedContext, mux, outboundMarshaler, w, req, resp, mux.GetForwardResponseOptions()...)
+
+	})
+
 	mux.Handle("PATCH", pattern_ResourceService_UpdateResource_0, func(w http.ResponseWriter, req *http.Request, pathParams map[string]string) {
 		ctx, cancel := context.WithCancel(req.Context())
 		defer cancel()
@@ -450,7 +549,7 @@ func RegisterResourceServiceHandlerClient(ctx context.Context, mux *runtime.Serv
 
 	})
 
-	mux.Handle("GET", pattern_ResourceService_DeleteResource_0, func(w http.ResponseWriter, req *http.Request, pathParams map[string]string) {
+	mux.Handle("DELETE", pattern_ResourceService_DeleteResource_0, func(w http.ResponseWriter, req *http.Request, pathParams map[string]string) {
 		ctx, cancel := context.WithCancel(req.Context())
 		defer cancel()
 		inboundMarshaler, outboundMarshaler := runtime.MarshalerForRequest(mux, req)
@@ -480,6 +579,8 @@ var (
 
 	pattern_ResourceService_ListResources_0 = runtime.MustPattern(runtime.NewPattern(1, []int{2, 0, 2, 1, 2, 2}, []string{"api", "v2", "resources"}, ""))
 
+	pattern_ResourceService_GetResource_0 = runtime.MustPattern(runtime.NewPattern(1, []int{2, 0, 2, 1, 2, 2, 1, 0, 4, 1, 5, 3}, []string{"api", "v2", "resources", "id"}, ""))
+
 	pattern_ResourceService_UpdateResource_0 = runtime.MustPattern(runtime.NewPattern(1, []int{2, 0, 2, 1, 2, 2, 1, 0, 4, 1, 5, 3}, []string{"api", "v2", "resources", "resource.id"}, ""))
 
 	pattern_ResourceService_DeleteResource_0 = runtime.MustPattern(runtime.NewPattern(1, []int{2, 0, 2, 1, 2, 2, 1, 0, 4, 1, 5, 3}, []string{"api", "v2", "resources", "id"}, ""))
@@ -490,6 +591,8 @@ var (
 
 	forward_ResourceService_ListResources_0 = runtime.ForwardResponseMessage
 
+	forward_ResourceService_GetResource_0 = runtime.ForwardResponseMessage
+
 	forward_ResourceService_UpdateResource_0 = runtime.ForwardResponseMessage
 
 	forward_ResourceService_DeleteResource_0 = runtime.ForwardResponseMessage

proto/gen/api/v2/resource_service_grpc.pb.go

@@ -21,6 +21,7 @@ const _ = grpc.SupportPackageIsVersion7
 const (
 	ResourceService_CreateResource_FullMethodName = "/memos.api.v2.ResourceService/CreateResource"
 	ResourceService_ListResources_FullMethodName  = "/memos.api.v2.ResourceService/ListResources"
+	ResourceService_GetResource_FullMethodName    = "/memos.api.v2.ResourceService/GetResource"
 	ResourceService_UpdateResource_FullMethodName = "/memos.api.v2.ResourceService/UpdateResource"
 	ResourceService_DeleteResource_FullMethodName = "/memos.api.v2.ResourceService/DeleteResource"
 )
@@ -31,6 +32,7 @@ const (
 type ResourceServiceClient interface {
 	CreateResource(ctx context.Context, in *CreateResourceRequest, opts ...grpc.CallOption) (*CreateResourceResponse, error)
 	ListResources(ctx context.Context, in *ListResourcesRequest, opts ...grpc.CallOption) (*ListResourcesResponse, error)
+	GetResource(ctx context.Context, in *GetResourceRequest, opts ...grpc.CallOption) (*GetResourceResponse, error)
 	UpdateResource(ctx context.Context, in *UpdateResourceRequest, opts ...grpc.CallOption) (*UpdateResourceResponse, error)
 	DeleteResource(ctx context.Context, in *DeleteResourceRequest, opts ...grpc.CallOption) (*DeleteResourceResponse, error)
 }
@@ -61,6 +63,15 @@ func (c *resourceServiceClient) ListResources(ctx context.Context, in *ListResou
 	return out, nil
 }
 
+func (c *resourceServiceClient) GetResource(ctx context.Context, in *GetResourceRequest, opts ...grpc.CallOption) (*GetResourceResponse, error) {
+	out := new(GetResourceResponse)
+	err := c.cc.Invoke(ctx, ResourceService_GetResource_FullMethodName, in, out, opts...)
+	if err != nil {
+		return nil, err
+	}
+	return out, nil
+}
+
 func (c *resourceServiceClient) UpdateResource(ctx context.Context, in *UpdateResourceRequest, opts ...grpc.CallOption) (*UpdateResourceResponse, error) {
 	out := new(UpdateResourceResponse)
 	err := c.cc.Invoke(ctx, ResourceService_UpdateResource_FullMethodName, in, out, opts...)
@@ -85,6 +96,7 @@ func (c *resourceServiceClient) DeleteResource(ctx context.Context, in *DeleteRe
 type ResourceServiceServer interface {
 	CreateResource(context.Context, *CreateResourceRequest) (*CreateResourceResponse, error)
 	ListResources(context.Context, *ListResourcesRequest) (*ListResourcesResponse, error)
+	GetResource(context.Context, *GetResourceRequest) (*GetResourceResponse, error)
 	UpdateResource(context.Context, *UpdateResourceRequest) (*UpdateResourceResponse, error)
 	DeleteResource(context.Context, *DeleteResourceRequest) (*DeleteResourceResponse, error)
 	mustEmbedUnimplementedResourceServiceServer()
@@ -100,6 +112,9 @@ func (UnimplementedResourceServiceServer) CreateResource(context.Context, *Creat
 func (UnimplementedResourceServiceServer) ListResources(context.Context, *ListResourcesRequest) (*ListResourcesResponse, error) {
 	return nil, status.Errorf(codes.Unimplemented, "method ListResources not implemented")
 }
+func (UnimplementedResourceServiceServer) GetResource(context.Context, *GetResourceRequest) (*GetResourceResponse, error) {
+	return nil, status.Errorf(codes.Unimplemented, "method GetResource not implemented")
+}
 func (UnimplementedResourceServiceServer) UpdateResource(context.Context, *UpdateResourceRequest) (*UpdateResourceResponse, error) {
 	return nil, status.Errorf(codes.Unimplemented, "method UpdateResource not implemented")
 }
@@ -155,6 +170,24 @@ func _ResourceService_ListResources_Handler(srv interface{}, ctx context.Context
 	return interceptor(ctx, in, info, handler)
 }
 
+func _ResourceService_GetResource_Handler(srv interface{}, ctx context.Context, dec func(interface{}) error, interceptor grpc.UnaryServerInterceptor) (interface{}, error) {
+	in := new(GetResourceRequest)
+	if err := dec(in); err != nil {
+		return nil, err
+	}
+	if interceptor == nil {
+		return srv.(ResourceServiceServer).GetResource(ctx, in)
+	}
+	info := &grpc.UnaryServerInfo{
+		Server:     srv,
+		FullMethod: ResourceService_GetResource_FullMethodName,
+	}
+	handler := func(ctx context.Context, req interface{}) (interface{}, error) {
+		return srv.(ResourceServiceServer).GetResource(ctx, req.(*GetResourceRequest))
+	}
+	return interceptor(ctx, in, info, handler)
+}
+
 func _ResourceService_UpdateResource_Handler(srv interface{}, ctx context.Context, dec func(interface{}) error, interceptor grpc.UnaryServerInterceptor) (interface{}, error) {
 	in := new(UpdateResourceRequest)
 	if err := dec(in); err != nil {
@@ -206,6 +239,10 @@ var ResourceService_ServiceDesc = grpc.ServiceDesc{
 			MethodName: "ListResources",
 			Handler:    _ResourceService_ListResources_Handler,
 		},
+		{
+			MethodName: "GetResource",
+			Handler:    _ResourceService_GetResource_Handler,
+		},
 		{
 			MethodName: "UpdateResource",
 			Handler:    _ResourceService_UpdateResource_Handler,

web/src/components/MemoContent/EmbeddedContent/EmbeddedMemo.tsx

@@ -2,6 +2,7 @@ import { useContext, useEffect } from "react";
 import { useMemoStore } from "@/store/v1";
 import MemoContent from "..";
 import { RendererContext } from "../types";
+import Error from "./Error";
 
 interface Props {
   memoId: number;
@@ -17,16 +18,16 @@ const EmbeddedMemo = ({ memoId }: Props) => {
     memoStore.getOrFetchMemoById(memoId);
   }, [memoId]);
 
+  if (!memo) {
+    return null;
+  }
   if (memoId === context.memoId || context.embeddedMemos.has(resourceName)) {
-    return <p>Nested Rendering Error: {`![[${resourceName}]]`}</p>;
+    return <Error message={`Nested Rendering Error: ![[${resourceName}]]`} />;
   }
-  context.embeddedMemos.add(resourceName);
 
-  return (
-    <div className="embedded-memo">
-      <MemoContent nodes={memo.nodes} memoId={memoId} embeddedMemos={context.embeddedMemos} />
-    </div>
-  );
+  // Add the memo to the set of embedded memos. This is used to prevent infinite loops when a memo embeds itself.
+  context.embeddedMemos.add(resourceName);
+  return <MemoContent nodes={memo.nodes} memoId={memoId} embeddedMemos={context.embeddedMemos} />;
 };
 
 export default EmbeddedMemo;

web/src/components/MemoContent/EmbeddedContent/EmbeddedResource.tsx

+import { useEffect } from "react";
+import MemoResourceListView from "@/components/MemoResourceListView";
+import { useResourceStore } from "@/store/v1";
+
+interface Props {
+  resourceId: number;
+}
+
+const EmbeddedResource = ({ resourceId }: Props) => {
+  const resourceStore = useResourceStore();
+  const resource = resourceStore.getResourceById(resourceId);
+
+  useEffect(() => {
+    resourceStore.getOrFetchResourceById(resourceId);
+  }, [resourceId]);
+
+  if (!resource) {
+    return null;
+  }
+
+  return <MemoResourceListView resources={[resource]} />;
+};
+
+export default EmbeddedResource;

web/src/components/MemoContent/EmbeddedContent/Error.tsx

+interface Props {
+  message: string;
+}
+
+const Error = ({ message }: Props) => {
+  return <p className="font-mono text-sm text-red-600 dark:text-red-700">{message}</p>;
+};
+
+export default Error;

web/src/components/MemoContent/EmbeddedContent/index.tsx

 import EmbeddedMemo from "./EmbeddedMemo";
+import EmbeddedResource from "./EmbeddedResource";
+import Error from "./Error";
 
 interface Props {
   resourceName: string;
@@ -13,8 +15,10 @@ const EmbeddedContent = ({ resourceName }: Props) => {
   const { resourceType, resourceId } = extractResourceTypeAndId(resourceName);
   if (resourceType === "memos") {
     return <EmbeddedMemo memoId={Number(resourceId)} />;
+  } else if (resourceType === "resources") {
+    return <EmbeddedResource resourceId={Number(resourceId)} />;
   }
-  return <p>Unknown resource: {resourceName}</p>;
+  return <Error message={`Unknown resource: ${resourceName}`} />;
 };
 
 export default EmbeddedContent;

web/src/components/MemoContent/index.tsx

-import { useRef } from "react";
+import { memo, useRef } from "react";
 import useCurrentUser from "@/hooks/useCurrentUser";
 import { useMemoStore } from "@/store/v1";
 import { Node, NodeType } from "@/types/proto/api/v2/markdown_service";
@@ -65,4 +65,4 @@ const MemoContent: React.FC<Props> = (props: Props) => {
   );
 };
 
-export default MemoContent;
+export default memo(MemoContent);

web/src/components/MemoRelationListView.tsx

 import { Tooltip } from "@mui/joy";
-import { useEffect, useState } from "react";
+import { memo, useEffect, useState } from "react";
 import { Link } from "react-router-dom";
 import { useMemoStore } from "@/store/v1";
 import { MemoRelation } from "@/types/proto/api/v2/memo_relation_service";
@@ -82,4 +82,4 @@ const MemoRelationListView = (props: Props) => {
   );
 };
 
-export default MemoRelationListView;
+export default memo(MemoRelationListView);

web/src/components/MemoResourceListView.tsx

@@ -6,11 +6,11 @@ import MemoResource from "./MemoResource";
 import showPreviewImageDialog from "./PreviewImageDialog";
 import SquareDiv from "./kit/SquareDiv";
 
-const MemoResourceListView = ({ resourceList = [] }: { resourceList: Resource[] }) => {
+const MemoResourceListView = ({ resources = [] }: { resources: Resource[] }) => {
   const mediaResources: Resource[] = [];
   const otherResources: Resource[] = [];
 
-  resourceList.forEach((resource) => {
+  resources.forEach((resource) => {
     const type = getResourceType(resource);
     if (type === "image/*" || type === "video/*") {
       mediaResources.push(resource);

web/src/components/MemoView.tsx

 import { Divider, Tooltip } from "@mui/joy";
 import classNames from "classnames";
 import copy from "copy-to-clipboard";
-import { memo, useEffect, useRef, useState } from "react";
+import { memo, useCallback, useEffect, useRef, useState } from "react";
 import { toast } from "react-hot-toast";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
@@ -153,7 +153,7 @@ const MemoView: React.FC<Props> = (props: Props) => {
     toast.success("Copied to clipboard!");
   };
 
-  const handleMemoContentClick = async (e: React.MouseEvent) => {
+  const handleMemoContentClick = useCallback(async (e: React.MouseEvent) => {
     const targetEl = e.target as HTMLElement;
 
     if (targetEl.tagName === "IMG") {
@@ -162,7 +162,7 @@ const MemoView: React.FC<Props> = (props: Props) => {
         showPreviewImageDialog([imgUrl], 0);
       }
     }
-  };
+  }, []);
 
   return (
     <div
@@ -257,7 +257,7 @@ const MemoView: React.FC<Props> = (props: Props) => {
         </div>
       </div>
       <MemoContent memoId={memo.id} nodes={memo.nodes} readonly={readonly} onClick={handleMemoContentClick} />
-      <MemoResourceListView resourceList={memo.resources} />
+      <MemoResourceListView resources={memo.resources} />
       <MemoRelationListView memo={memo} relationList={referenceRelations} />
     </div>
   );

web/src/components/ShareMemoDialog.tsx

@@ -113,7 +113,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 memoId={memo.id} nodes={memo.nodes} readonly={true} disableFilter />
-              <MemoResourceListView resourceList={memo.resources} />
+              <MemoResourceListView resources={memo.resources} />
             </div>
             <div className="flex flex-row justify-between items-center w-full bg-gray-100 dark:bg-zinc-900 py-4 px-6">
               <div className="flex flex-row justify-start items-center">

web/src/pages/MemoDetail.tsx

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

web/src/store/v1/index.ts

@@ -2,3 +2,4 @@ export * from "./user";
 export * from "./memo";
 export * from "./inbox";
 export * from "./resourceName";
+export * from "./resource";

web/src/store/v1/resource.ts

+import { create } from "zustand";
+import { combine } from "zustand/middleware";
+import { resourceServiceClient } from "@/grpcweb";
+import { Resource } from "@/types/proto/api/v2/resource_service";
+
+interface State {
+  resourceMapById: Record<number, Resource>;
+}
+
+const getDefaultState = (): State => ({
+  resourceMapById: {},
+});
+
+export const useResourceStore = create(
+  combine(getDefaultState(), (set, get) => ({
+    setState: (state: State) => set(state),
+    getState: () => get(),
+    getOrFetchResourceById: async (id: number, options?: { skipCache?: boolean; skipStore?: boolean }) => {
+      const resourceMap = get().resourceMapById;
+      const resource = resourceMap[id];
+      if (resource && !options?.skipCache) {
+        return resource;
+      }
+
+      const res = await resourceServiceClient.getResource({
+        id,
+      });
+      if (!res.resource) {
+        throw new Error("Resource not found");
+      }
+
+      if (!options?.skipStore) {
+        resourceMap[id] = res.resource;
+        set({ resourceMapById: resourceMap });
+      }
+      return res.resource;
+    },
+    getResourceById: (id: number) => {
+      return get().resourceMapById[id];
+    },
+  }))
+);