feat: add snippet field to memo message (#3689)

docs/apidocs.swagger.yaml

@@ -969,6 +969,9 @@ paths:
                 type: string
                 title: "The name of the parent memo.\r\nFormat: memos/{id}"
                 readOnly: true
+              snippet:
+                type: string
+                description: The snippet of the memo content. Plain text only.
       tags:
         - MemoService
   /api/v1/{name_1}:
@@ -2644,6 +2647,9 @@ definitions:
         type: string
         title: "The name of the parent memo.\r\nFormat: memos/{id}"
         readOnly: true
+      snippet:
+        type: string
+        description: The snippet of the memo content. Plain text only.
   v1MemoProperty:
     type: object
     properties:

proto/api/v1/memo_service.proto

@@ -206,6 +206,9 @@ message Memo {
   // The name of the parent memo.
   // Format: memos/{id}
   optional string parent = 18 [(google.api.field_behavior) = OUTPUT_ONLY];
+
+  // The snippet of the memo content. Plain text only.
+  string snippet = 19;
 }
 
 message MemoProperty {

server/router/api/v1/memo_service.go

@@ -15,6 +15,7 @@ import (
 	"github.com/usememos/gomark/ast"
 	"github.com/usememos/gomark/parser"
 	"github.com/usememos/gomark/parser/tokenizer"
+	"github.com/usememos/gomark/renderer"
 	"github.com/usememos/gomark/restore"
 	expr "google.golang.org/genproto/googleapis/api/expr/v1alpha1"
 	"google.golang.org/grpc/codes"
@@ -869,6 +870,11 @@ func (s *APIV1Service) convertMemoFromStore(ctx context.Context, memo *store.Mem
 		return nil, errors.Wrap(err, "failed to parse content")
 	}
 
+	snippet, err := getMemoContentSnippet(memo.Content)
+	if err != nil {
+		return nil, errors.Wrap(err, "failed to get memo content snippet")
+	}
+
 	memoMessage := &v1pb.Memo{
 		Name:        name,
 		Uid:         memo.UID,
@@ -878,6 +884,7 @@ func (s *APIV1Service) convertMemoFromStore(ctx context.Context, memo *store.Mem
 		UpdateTime:  timestamppb.New(time.Unix(memo.UpdatedTs, 0)),
 		DisplayTime: timestamppb.New(time.Unix(displayTs, 0)),
 		Content:     memo.Content,
+		Snippet:     snippet,
 		Nodes:       convertFromASTNodes(nodes),
 		Visibility:  convertVisibilityFromStore(memo.Visibility),
 		Pinned:      memo.Pinned,
@@ -1286,3 +1293,16 @@ func convertMemoToWebhookPayload(memo *v1pb.Memo) (*v1pb.WebhookRequestPayload,
 		Memo:       memo,
 	}, nil
 }
+
+func getMemoContentSnippet(content string) (string, error) {
+	nodes, err := parser.Parse(tokenizer.Tokenize(content))
+	if err != nil {
+		return "", errors.Wrap(err, "failed to parse content")
+	}
+
+	plainText := renderer.NewStringRenderer().Render(nodes)
+	if len(plainText) > 100 {
+		return plainText[:100] + "...", nil
+	}
+	return plainText, nil
+}

web/src/components/CreateMemoRelationDialog.tsx

@@ -104,16 +104,14 @@ const CreateMemoRelationDialog: React.FC<Props> = (props: Props) => {
           value={selectedMemos}
           multiple
           onInputChange={(_, value) => setSearchText(value.trim())}
-          getOptionKey={(option) => option.name}
-          getOptionLabel={(option) => option.content}
-          isOptionEqualToValue={(option, value) => option.name === value.name}
-          renderOption={(props, option) => (
+          getOptionKey={(memo) => memo.name}
+          getOptionLabel={(memo) => memo.content}
+          isOptionEqualToValue={(memo, value) => memo.name === value.name}
+          renderOption={(props, memo) => (
             <AutocompleteOption {...props}>
               <div className="w-full flex flex-col justify-start items-start">
-                <p className="text-xs text-gray-400 select-none">{getDateTimeString(option.displayTime)}</p>
-                <p className="mt-0.5 text-sm leading-5 line-clamp-2">
-                  {searchText ? getHighlightedContent(option.content) : option.content}
-                </p>
+                <p className="text-xs text-gray-400 select-none">{getDateTimeString(memo.displayTime)}</p>
+                <p className="mt-0.5 text-sm leading-5 line-clamp-2">{searchText ? getHighlightedContent(memo.content) : memo.snippet}</p>
               </div>
             </AutocompleteOption>
           )}