feat: implement highlight renderer

api/v2/markdown_service.go

@@ -88,6 +88,8 @@ func convertFromASTNode(rawNode ast.Node) *apiv2pb.Node {
 		node.Node = &apiv2pb.Node_EscapingCharacterNode{EscapingCharacterNode: &apiv2pb.EscapingCharacterNode{Symbol: n.Symbol}}
 	case *ast.Math:
 		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}}
 	default:
 		node.Node = &apiv2pb.Node_TextNode{TextNode: &apiv2pb.TextNode{}}
 	}
@@ -157,6 +159,8 @@ func convertToASTNode(node *apiv2pb.Node) ast.Node {
 		return &ast.EscapingCharacter{Symbol: n.EscapingCharacterNode.Symbol}
 	case *apiv2pb.Node_MathNode:
 		return &ast.Math{Content: n.MathNode.Content}
+	case *apiv2pb.Node_HighlightNode:
+		return &ast.Highlight{Content: n.HighlightNode.Content}
 	default:
 		return &ast.Text{}
 	}

proto/api/v2/markdown_service.proto

@@ -47,6 +47,7 @@ enum NodeType {
   STRIKETHROUGH = 20;
   ESCAPING_CHARACTER = 21;
   MATH = 22;
+  HIGHLIGHT = 23;
 }
 
 message Node {
@@ -74,6 +75,7 @@ message Node {
     StrikethroughNode strikethrough_node = 21;
     EscapingCharacterNode escaping_character_node = 22;
     MathNode math_node = 23;
+    HighlightNode highlight_node = 24;
   }
 }
 
@@ -177,3 +179,7 @@ message EscapingCharacterNode {
 message MathNode {
   string content = 1;
 }
+
+message HighlightNode {
+  string content = 1;
+}

proto/buf.lock

@@ -4,10 +4,10 @@ deps:
   - remote: buf.build
     owner: googleapis
     repository: googleapis
-    commit: 711e289f6a384c4caeebaff7c6931ade
-    digest: shake256:e08fb55dad7469f69df00304eed31427d2d1576e9aab31e6bf86642688e04caaf0372f15fe6974cf79432779a635b3ea401ca69c943976dc42749524e4c25d94
+    commit: a86849a25cc04f4dbe9b15ddddfbc488
+    digest: shake256:e19143328f8cbfe13fc226aeee5e63773ca494693a72740a7560664270039a380d94a1344234b88c7691311460df9a9b1c2982190d0a2612eae80368718e1943
   - remote: buf.build
     owner: grpc-ecosystem
     repository: grpc-gateway
-    commit: fed2dcdcfd694403ad51cd3c94957830
-    digest: shake256:ed076a21e3d772892fc465ced0e4dd50f9dba86fdd4473920eaa25efa4807644e8e021be423dcfcee74bf4242e7e57422393f9b1abb10acb18ea1a5df509bb19
+    commit: 3f42134f4c564983838425bc43c7a65f
+    digest: shake256:3d11d4c0fe5e05fda0131afefbce233940e27f0c31c5d4e385686aea58ccd30f72053f61af432fa83f1fc11cda57f5f18ca3da26a29064f73c5a0d076bba8d92

proto/gen/api/v2/README.md

@@ -74,6 +74,7 @@
     - [CodeNode](#memos-api-v2-CodeNode)
     - [EscapingCharacterNode](#memos-api-v2-EscapingCharacterNode)
     - [HeadingNode](#memos-api-v2-HeadingNode)
+    - [HighlightNode](#memos-api-v2-HighlightNode)
     - [HorizontalRuleNode](#memos-api-v2-HorizontalRuleNode)
     - [ImageNode](#memos-api-v2-ImageNode)
     - [ItalicNode](#memos-api-v2-ItalicNode)
@@ -1084,6 +1085,21 @@
 
 
 
+<a name="memos-api-v2-HighlightNode"></a>
+
+### HighlightNode
+
+
+
+| Field | Type | Label | Description |
+| ----- | ---- | ----- | ----------- |
+| content | [string](#string) |  |  |
+
+
+
+
+
+
 <a name="memos-api-v2-HorizontalRuleNode"></a>
 
 ### HorizontalRuleNode
@@ -1218,6 +1234,7 @@
 | strikethrough_node | [StrikethroughNode](#memos-api-v2-StrikethroughNode) |  |  |
 | escaping_character_node | [EscapingCharacterNode](#memos-api-v2-EscapingCharacterNode) |  |  |
 | math_node | [MathNode](#memos-api-v2-MathNode) |  |  |
+| highlight_node | [HighlightNode](#memos-api-v2-HighlightNode) |  |  |
 
 
 
@@ -1398,6 +1415,7 @@
 | STRIKETHROUGH | 20 |  |
 | ESCAPING_CHARACTER | 21 |  |
 | MATH | 22 |  |
+| HIGHLIGHT | 23 |  |
 
 
  

web/src/components/MemoContent/Highlight.tsx

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

web/src/components/MemoContent/Renderer.tsx

@@ -7,6 +7,7 @@ import {
   CodeNode,
   EscapingCharacterNode,
   HeadingNode,
+  HighlightNode,
   HorizontalRuleNode,
   ImageNode,
   ItalicNode,
@@ -29,6 +30,7 @@ import Code from "./Code";
 import CodeBlock from "./CodeBlock";
 import EscapingCharacter from "./EscapingCharacter";
 import Heading from "./Heading";
+import Highlight from "./Highlight";
 import HorizontalRule from "./HorizontalRule";
 import Image from "./Image";
 import Italic from "./Italic";
@@ -92,6 +94,8 @@ const Renderer: React.FC<Props> = ({ index, node }: Props) => {
       return <Strikethrough {...(node.strikethroughNode as StrikethroughNode)} />;
     case NodeType.MATH:
       return <Math {...(node.mathNode as MathNode)} />;
+    case NodeType.HIGHLIGHT:
+      return <Highlight {...(node.highlightNode as HighlightNode)} />;
     case NodeType.ESCAPING_CHARACTER:
       return <EscapingCharacter {...(node.escapingCharacterNode as EscapingCharacterNode)} />;
     default:

web/src/components/MemoEditor/ActionButton/MarkdownMenu.tsx

 import { Dropdown, IconButton, Menu, MenuButton, MenuItem } from "@mui/joy";
+import { Link } from "@mui/joy";
 import toast from "react-hot-toast";
 import Icon from "@/components/Icon";
 import showPreviewMarkdownDialog from "@/components/PreviewMarkdownDialog";
@@ -93,6 +94,11 @@ const MarkdownMenu = (props: Props) => {
           <Icon.GanttSquare className="w-4 h-auto" />
           <span>Preview</span>
         </MenuItem>
+        <div className="-mt-0.5 pl-2">
+          <Link fontSize={12} href="https://www.usememos.com/docs/getting-started/content-syntax" target="_blank">
+            Content syntax
+          </Link>
+        </div>
       </Menu>
     </Dropdown>
   );