feat: implement subscript and superscript renderer

api/v2/markdown_service.go

@@ -92,6 +92,10 @@ func convertFromASTNode(rawNode ast.Node) *apiv2pb.Node {
 		node.Node = &apiv2pb.Node_MathNode{MathNode: &apiv2pb.MathNode{Content: n.Content}}
 	case *ast.Highlight:
 		node.Node = &apiv2pb.Node_HighlightNode{HighlightNode: &apiv2pb.HighlightNode{Content: n.Content}}
+	case *ast.Subscript:
+		node.Node = &apiv2pb.Node_SubscriptNode{SubscriptNode: &apiv2pb.SubscriptNode{Content: n.Content}}
+	case *ast.Superscript:
+		node.Node = &apiv2pb.Node_SuperscriptNode{SuperscriptNode: &apiv2pb.SuperscriptNode{Content: n.Content}}
 	default:
 		node.Node = &apiv2pb.Node_TextNode{TextNode: &apiv2pb.TextNode{}}
 	}
@@ -165,6 +169,10 @@ func convertToASTNode(node *apiv2pb.Node) ast.Node {
 		return &ast.Math{Content: n.MathNode.Content}
 	case *apiv2pb.Node_HighlightNode:
 		return &ast.Highlight{Content: n.HighlightNode.Content}
+	case *apiv2pb.Node_SubscriptNode:
+		return &ast.Subscript{Content: n.SubscriptNode.Content}
+	case *apiv2pb.Node_SuperscriptNode:
+		return &ast.Superscript{Content: n.SuperscriptNode.Content}
 	default:
 		return &ast.Text{}
 	}

proto/api/v2/markdown_service.proto

@@ -49,6 +49,8 @@ enum NodeType {
   ESCAPING_CHARACTER = 22;
   MATH = 23;
   HIGHLIGHT = 24;
+  SUBSCRIPT = 25;
+  SUPERSCRIPT = 26;
 }
 
 message Node {
@@ -78,6 +80,8 @@ message Node {
     EscapingCharacterNode escaping_character_node = 23;
     MathNode math_node = 24;
     HighlightNode highlight_node = 25;
+    SubscriptNode subscript_node = 26;
+    SuperscriptNode superscript_node = 27;
   }
 }
 
@@ -195,3 +199,11 @@ message MathNode {
 message HighlightNode {
   string content = 1;
 }
+
+message SubscriptNode {
+  string content = 1;
+}
+
+message SuperscriptNode {
+  string content = 1;
+}

proto/gen/api/v2/README.md

@@ -88,6 +88,8 @@
     - [ParseMarkdownRequest](#memos-api-v2-ParseMarkdownRequest)
     - [ParseMarkdownResponse](#memos-api-v2-ParseMarkdownResponse)
     - [StrikethroughNode](#memos-api-v2-StrikethroughNode)
+    - [SubscriptNode](#memos-api-v2-SubscriptNode)
+    - [SuperscriptNode](#memos-api-v2-SuperscriptNode)
     - [TableNode](#memos-api-v2-TableNode)
     - [TableNode.Row](#memos-api-v2-TableNode-Row)
     - [TagNode](#memos-api-v2-TagNode)
@@ -1238,6 +1240,8 @@
 | escaping_character_node | [EscapingCharacterNode](#memos-api-v2-EscapingCharacterNode) |  |  |
 | math_node | [MathNode](#memos-api-v2-MathNode) |  |  |
 | highlight_node | [HighlightNode](#memos-api-v2-HighlightNode) |  |  |
+| subscript_node | [SubscriptNode](#memos-api-v2-SubscriptNode) |  |  |
+| superscript_node | [SuperscriptNode](#memos-api-v2-SuperscriptNode) |  |  |
 
 
 
@@ -1321,6 +1325,36 @@
 
 
 
+<a name="memos-api-v2-SubscriptNode"></a>
+
+### SubscriptNode
+
+
+
+| Field | Type | Label | Description |
+| ----- | ---- | ----- | ----------- |
+| content | [string](#string) |  |  |
+
+
+
+
+
+
+<a name="memos-api-v2-SuperscriptNode"></a>
+
+### SuperscriptNode
+
+
+
+| Field | Type | Label | Description |
+| ----- | ---- | ----- | ----------- |
+| content | [string](#string) |  |  |
+
+
+
+
+
+
 <a name="memos-api-v2-TableNode"></a>
 
 ### TableNode
@@ -1452,6 +1486,8 @@
 | ESCAPING_CHARACTER | 22 |  |
 | MATH | 23 |  |
 | HIGHLIGHT | 24 |  |
+| SUBSCRIPT | 25 |  |
+| SUPERSCRIPT | 26 |  |
 
 
  

web/src/components/MemoContent/Renderer.tsx

@@ -18,6 +18,8 @@ import {
   OrderedListNode,
   ParagraphNode,
   StrikethroughNode,
+  SubscriptNode,
+  SuperscriptNode,
   TableNode,
   TagNode,
   TaskListNode,
@@ -41,6 +43,8 @@ import Math from "./Math";
 import OrderedList from "./OrderedList";
 import Paragraph from "./Paragraph";
 import Strikethrough from "./Strikethrough";
+import Subscript from "./Subscript";
+import Superscript from "./Superscript";
 import Table from "./Table";
 import Tag from "./Tag";
 import TaskList from "./TaskList";
@@ -102,6 +106,10 @@ const Renderer: React.FC<Props> = ({ index, node }: Props) => {
       return <Highlight {...(node.highlightNode as HighlightNode)} />;
     case NodeType.ESCAPING_CHARACTER:
       return <EscapingCharacter {...(node.escapingCharacterNode as EscapingCharacterNode)} />;
+    case NodeType.SUBSCRIPT:
+      return <Subscript {...(node.subscriptNode as SubscriptNode)} />;
+    case NodeType.SUPERSCRIPT:
+      return <Superscript {...(node.superscriptNode as SuperscriptNode)} />;
     default:
       return null;
   }

web/src/components/MemoContent/Subscript.tsx

+interface Props {
+  content: string;
+}
+
+const Subscript: React.FC<Props> = ({ content }: Props) => {
+  return <sub>{content}</sub>;
+};
+
+export default Subscript;

web/src/components/MemoContent/Superscript.tsx

+interface Props {
+  content: string;
+}
+
+const Superscript: React.FC<Props> = ({ content }: Props) => {
+  return <sup>{content}</sup>;
+};
+
+export default Superscript;