feat: implement params field for embedded content node

api/v2/markdown_service.go

@@ -66,7 +66,7 @@ func convertFromASTNode(rawNode ast.Node) *apiv2pb.Node {
 	case *ast.Table:
 		node.Node = &apiv2pb.Node_TableNode{TableNode: convertTableFromASTNode(n)}
 	case *ast.EmbeddedContent:
-		node.Node = &apiv2pb.Node_EmbeddedContentNode{EmbeddedContentNode: &apiv2pb.EmbeddedContentNode{ResourceName: n.ResourceName}}
+		node.Node = &apiv2pb.Node_EmbeddedContentNode{EmbeddedContentNode: &apiv2pb.EmbeddedContentNode{ResourceName: n.ResourceName, Params: n.Params}}
 	case *ast.Text:
 		node.Node = &apiv2pb.Node_TextNode{TextNode: &apiv2pb.TextNode{Content: n.Content}}
 	case *ast.Bold:
@@ -145,7 +145,7 @@ func convertToASTNode(node *apiv2pb.Node) ast.Node {
 	case *apiv2pb.Node_TableNode:
 		return convertTableToASTNode(node)
 	case *apiv2pb.Node_EmbeddedContentNode:
-		return &ast.EmbeddedContent{ResourceName: n.EmbeddedContentNode.ResourceName}
+		return &ast.EmbeddedContent{ResourceName: n.EmbeddedContentNode.ResourceName, Params: n.EmbeddedContentNode.Params}
 	case *apiv2pb.Node_TextNode:
 		return &ast.Text{Content: n.TextNode.Content}
 	case *apiv2pb.Node_BoldNode:

plugin/gomark/ast/block.go

@@ -208,7 +208,7 @@ func (*Table) Type() NodeType {
 }
 
 func (n *Table) Restore() string {
-	var result string
+	result := ""
 	for _, header := range n.Header {
 		result += fmt.Sprintf("| %s ", header)
 	}
@@ -233,6 +233,7 @@ type EmbeddedContent struct {
 	BaseBlock
 
 	ResourceName string
+	Params       string
 }
 
 func (*EmbeddedContent) Type() NodeType {
@@ -240,5 +241,9 @@ func (*EmbeddedContent) Type() NodeType {
 }
 
 func (n *EmbeddedContent) Restore() string {
-	return fmt.Sprintf("![[%s]]", n.ResourceName)
+	result := fmt.Sprintf("![[%s]]", n.ResourceName)
+	if n.Params != "" {
+		result += fmt.Sprintf("?%s", n.Params)
+	}
+	return result
 }

plugin/gomark/parser/embedded_content.go

@@ -45,7 +45,18 @@ func (p *EmbeddedContentParser) Parse(tokens []*tokenizer.Token) (ast.Node, erro
 		return nil, errors.New("not matched")
 	}
 
+	contentTokens := tokens[3 : size-2]
+	resourceName, params := "", ""
+	paramsIndex, ok := tokenizer.Find(contentTokens, tokenizer.QuestionMark)
+	if ok && paramsIndex > 0 {
+		resourceName = tokenizer.Stringify(contentTokens[:paramsIndex])
+		params = tokenizer.Stringify(contentTokens[paramsIndex+1:])
+	} else {
+		resourceName = tokenizer.Stringify(contentTokens)
+	}
+
 	return &ast.EmbeddedContent{
-		ResourceName: tokenizer.Stringify(tokens[3 : size-2]),
+		ResourceName: resourceName,
+		Params:       params,
 	}, nil
 }

plugin/gomark/parser/embedded_content_test.go

@@ -41,6 +41,13 @@ func TestEmbeddedContentParser(t *testing.T) {
 				ResourceName: "resources/101",
 			},
 		},
+		{
+			text: "![[resources/101?align=center]]\n123",
+			embeddedContent: &ast.EmbeddedContent{
+				ResourceName: "resources/101",
+				Params:       "align=center",
+			},
+		},
 	}
 
 	for _, test := range tests {

plugin/gomark/parser/tokenizer/tokenizer.go

@@ -12,6 +12,7 @@ const (
 	LeftParenthesis    TokenType = "("
 	RightParenthesis   TokenType = ")"
 	ExclamationMark    TokenType = "!"
+	QuestionMark       TokenType = "?"
 	Tilde              TokenType = "~"
 	Hyphen             TokenType = "-"
 	PlusSign           TokenType = "+"
@@ -67,6 +68,8 @@ func Tokenize(text string) []*Token {
 			tokens = append(tokens, NewToken(RightParenthesis, ")"))
 		case '!':
 			tokens = append(tokens, NewToken(ExclamationMark, "!"))
+		case '?':
+			tokens = append(tokens, NewToken(QuestionMark, "?"))
 		case '~':
 			tokens = append(tokens, NewToken(Tilde, "~"))
 		case '-':
@@ -149,3 +152,12 @@ func Split(tokens []*Token, delimiter TokenType) [][]*Token {
 	result = append(result, current)
 	return result
 }
+
+func Find(tokens []*Token, delimiter TokenType) (int, bool) {
+	for index, token := range tokens {
+		if token.Type == delimiter {
+			return index, true
+		}
+	}
+	return 0, false
+}

proto/api/v2/markdown_service.proto

@@ -146,6 +146,7 @@ message TableNode {
 
 message EmbeddedContentNode {
   string resource_name = 1;
+  string params = 2;
 }
 
 message TextNode {

proto/gen/api/v2/README.md

@@ -1070,6 +1070,7 @@
 | Field | Type | Label | Description |
 | ----- | ---- | ----- | ----------- |
 | resource_name | [string](#string) |  |  |
+| params | [string](#string) |  |  |
 
 
 

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

@@ -6,6 +6,7 @@ import Error from "./Error";
 
 interface Props {
   memoId: number;
+  params: string;
 }
 
 const EmbeddedMemo = ({ memoId }: Props) => {

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

+import classNames from "classnames";
 import { useEffect } from "react";
 import MemoResourceListView from "@/components/MemoResourceListView";
 import { useResourceStore } from "@/store/v1";
 
 interface Props {
   resourceId: number;
+  params: string;
 }
 
-const EmbeddedResource = ({ resourceId }: Props) => {
+const getAdditionalClassNameWithParams = (params: URLSearchParams) => {
+  const additionalClassNames = [];
+  if (params.has("align")) {
+    const align = params.get("align");
+    if (align === "center") {
+      additionalClassNames.push("mx-auto");
+    }
+  }
+  if (params.has("size")) {
+    const size = params.get("size");
+    if (size === "lg") {
+      additionalClassNames.push("w-full");
+    } else if (size === "md") {
+      additionalClassNames.push("w-2/3");
+    } else if (size === "sm") {
+      additionalClassNames.push("w-1/3");
+    }
+  }
+  if (params.has("width")) {
+    const width = params.get("width");
+    additionalClassNames.push(`w-[${width}]`);
+  }
+  return additionalClassNames.join(" ");
+};
+
+const EmbeddedResource = ({ resourceId, params: paramsStr }: Props) => {
   const resourceStore = useResourceStore();
   const resource = resourceStore.getResourceById(resourceId);
+  const params = new URLSearchParams(paramsStr);
 
   useEffect(() => {
     resourceStore.getOrFetchResourceById(resourceId);
@@ -18,7 +46,11 @@ const EmbeddedResource = ({ resourceId }: Props) => {
     return null;
   }
 
-  return <MemoResourceListView resources={[resource]} />;
+  return (
+    <div className={classNames("max-w-full", getAdditionalClassNameWithParams(params))}>
+      <MemoResourceListView resources={[resource]} />
+    </div>
+  );
 };
 
 export default EmbeddedResource;

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

@@ -4,6 +4,7 @@ import Error from "./Error";
 
 interface Props {
   resourceName: string;
+  params: string;
 }
 
 const extractResourceTypeAndId = (resourceName: string) => {
@@ -11,12 +12,12 @@ const extractResourceTypeAndId = (resourceName: string) => {
   return { resourceType, resourceId };
 };
 
-const EmbeddedContent = ({ resourceName }: Props) => {
+const EmbeddedContent = ({ resourceName, params }: Props) => {
   const { resourceType, resourceId } = extractResourceTypeAndId(resourceName);
   if (resourceType === "memos") {
-    return <EmbeddedMemo memoId={Number(resourceId)} />;
+    return <EmbeddedMemo memoId={Number(resourceId)} params={params} />;
   } else if (resourceType === "resources") {
-    return <EmbeddedResource resourceId={Number(resourceId)} />;
+    return <EmbeddedResource resourceId={Number(resourceId)} params={params} />;
   }
   return <Error message={`Unknown resource: ${resourceName}`} />;
 };