feat: implement html element renderer

docs/apidocs.swagger.yaml

@@ -2447,6 +2447,15 @@ definitions:
         description: |-
           stats is the stats of memo creating/updating activities.
           key is the year-month-day string. e.g. "2020-01-01".
+  v1HTMLElementNode:
+    type: object
+    properties:
+      tagName:
+        type: string
+      attributes:
+        type: object
+        additionalProperties:
+          type: string
   v1HeadingNode:
     type: object
     properties:
@@ -2836,6 +2845,8 @@ definitions:
         $ref: '#/definitions/v1ReferencedContentNode'
       spoilerNode:
         $ref: '#/definitions/v1SpoilerNode'
+      htmlElementNode:
+        $ref: '#/definitions/v1HTMLElementNode'
   v1NodeType:
     type: string
     enum:
@@ -2869,6 +2880,7 @@ definitions:
       - SUPERSCRIPT
       - REFERENCED_CONTENT
       - SPOILER
+      - HTML_ELEMENT
     default: NODE_UNSPECIFIED
   v1OrderedListNode:
     type: object

go.mod

@@ -25,7 +25,7 @@ require (
 	github.com/spf13/cobra v1.8.1
 	github.com/spf13/viper v1.19.0
 	github.com/stretchr/testify v1.9.0
-	github.com/usememos/gomark v0.0.0-20240712135956-99d0ab9b9aa1
+	github.com/usememos/gomark v0.0.0-20240713015837-e5b687d3d637
 	golang.org/x/crypto v0.25.0
 	golang.org/x/mod v0.19.0
 	golang.org/x/net v0.27.0

go.sum

@@ -441,8 +441,8 @@ github.com/ugorji/go v1.1.7/go.mod h1:kZn38zHttfInRq0xu/PH0az30d+z6vm202qpg1oXVM
 github.com/ugorji/go/codec v1.1.7/go.mod h1:Ax+UKWsSmolVDwsd+7N3ZtXu+yMGCf907BLYF3GoBXY=
 github.com/urfave/cli v1.20.0/go.mod h1:70zkFmudgCuE/ngEzBv17Jvp/497gISqfk5gWijbERA=
 github.com/urfave/cli v1.22.1/go.mod h1:Gos4lmkARVdJ6EkW0WaNv/tZAAMe9V7XWyB60NtXRu0=
-github.com/usememos/gomark v0.0.0-20240712135956-99d0ab9b9aa1 h1:4LuNOC1zgAk9K8kZjTBZ/yNJR9vgQTNAQFyWxLxJp5A=
-github.com/usememos/gomark v0.0.0-20240712135956-99d0ab9b9aa1/go.mod h1:7CZRoYFQyyljzplOTeyODFR26O+wr0BbnpTWVLGfKJA=
+github.com/usememos/gomark v0.0.0-20240713015837-e5b687d3d637 h1:DTSf/z7oXyAJXk9bYaTHnRiLlHynWJ/ate9VKJn2awc=
+github.com/usememos/gomark v0.0.0-20240713015837-e5b687d3d637/go.mod h1:7CZRoYFQyyljzplOTeyODFR26O+wr0BbnpTWVLGfKJA=
 github.com/valyala/bytebufferpool v1.0.0 h1:GqA5TC/0021Y/b9FG4Oi9Mr3q7XYx6KllzawFIhcdPw=
 github.com/valyala/bytebufferpool v1.0.0/go.mod h1:6bBcMArwyJ5K/AmCkWv1jt77kVWyCJ6HpOuEn7z0Csc=
 github.com/valyala/fasttemplate v1.2.2 h1:lxLXG0uE3Qnshl9QyaK6XJxMXlQZELvChBOCmQD0Loo=

proto/api/v1/markdown_service.proto

@@ -84,6 +84,7 @@ enum NodeType {
   SUPERSCRIPT = 27;
   REFERENCED_CONTENT = 28;
   SPOILER = 29;
+  HTML_ELEMENT = 30;
 }
 
 message Node {
@@ -118,6 +119,7 @@ message Node {
     SuperscriptNode superscript_node = 28;
     ReferencedContentNode referenced_content_node = 29;
     SpoilerNode spoiler_node = 30;
+    HTMLElementNode html_element_node = 31;
   }
 }
 
@@ -257,3 +259,8 @@ message ReferencedContentNode {
 message SpoilerNode {
   string content = 1;
 }
+
+message HTMLElementNode {
+  string tag_name = 1;
+  map<string, string> attributes = 2;
+}

server/router/api/v1/markdown_service.go

@@ -116,6 +116,8 @@ func convertFromASTNode(rawNode ast.Node) *v1pb.Node {
 		node.Node = &v1pb.Node_ReferencedContentNode{ReferencedContentNode: &v1pb.ReferencedContentNode{ResourceName: n.ResourceName, Params: n.Params}}
 	case *ast.Spoiler:
 		node.Node = &v1pb.Node_SpoilerNode{SpoilerNode: &v1pb.SpoilerNode{Content: n.Content}}
+	case *ast.HTMLElement:
+		node.Node = &v1pb.Node_HtmlElementNode{HtmlElementNode: &v1pb.HTMLElementNode{TagName: n.TagName, Attributes: n.Attributes}}
 	default:
 		node.Node = &v1pb.Node_TextNode{TextNode: &v1pb.TextNode{}}
 	}
@@ -209,6 +211,8 @@ func convertToASTNode(node *v1pb.Node) ast.Node {
 		return &ast.ReferencedContent{ResourceName: n.ReferencedContentNode.ResourceName, Params: n.ReferencedContentNode.Params}
 	case *v1pb.Node_SpoilerNode:
 		return &ast.Spoiler{Content: n.SpoilerNode.Content}
+	case *v1pb.Node_HtmlElementNode:
+		return &ast.HTMLElement{TagName: n.HtmlElementNode.TagName, Attributes: n.HtmlElementNode.Attributes}
 	default:
 		return &ast.Text{}
 	}

web/src/components/MemoContent/HTMLElement.tsx

+import { createElement } from "react";
+
+interface Props {
+  tagName: string;
+  attributes: { [key: string]: string };
+}
+
+const HTMLElement: React.FC<Props> = ({ tagName, attributes }: Props) => {
+  return createElement(tagName, attributes);
+};
+
+export default HTMLElement;

web/src/components/MemoContent/Renderer.tsx

@@ -10,6 +10,7 @@ import {
   HeadingNode,
   HighlightNode,
   HorizontalRuleNode,
+  HTMLElementNode,
   ImageNode,
   ItalicNode,
   LinkNode,
@@ -37,6 +38,7 @@ import Code from "./Code";
 import CodeBlock from "./CodeBlock";
 import EmbeddedContent from "./EmbeddedContent";
 import EscapingCharacter from "./EscapingCharacter";
+import HTMLElement from "./HTMLElement";
 import Heading from "./Heading";
 import Highlight from "./Highlight";
 import HorizontalRule from "./HorizontalRule";
@@ -123,6 +125,8 @@ const Renderer: React.FC<Props> = ({ index, node }: Props) => {
       return <ReferencedContent {...(node.referencedContentNode as ReferencedContentNode)} />;
     case NodeType.SPOILER:
       return <Spoiler {...(node.spoilerNode as SpoilerNode)} />;
+    case NodeType.HTML_ELEMENT:
+      return <HTMLElement {...(node.htmlElementNode as HTMLElementNode)} />;
     default:
       return null;
   }