chore: add spoiler node

web/src/components/MemoContent/Renderer.tsx

@@ -19,6 +19,7 @@ import {
   OrderedListNode,
   ParagraphNode,
   ReferencedContentNode,
+  SpoilerNode,
   StrikethroughNode,
   SubscriptNode,
   SuperscriptNode,
@@ -46,6 +47,7 @@ import Math from "./Math";
 import OrderedList from "./OrderedList";
 import Paragraph from "./Paragraph";
 import ReferencedContent from "./ReferencedContent";
+import Spoiler from "./Spoiler";
 import Strikethrough from "./Strikethrough";
 import Subscript from "./Subscript";
 import Superscript from "./Superscript";
@@ -118,6 +120,8 @@ const Renderer: React.FC<Props> = ({ index, node }: Props) => {
       return <Superscript {...(node.superscriptNode as SuperscriptNode)} />;
     case NodeType.REFERENCED_CONTENT:
       return <ReferencedContent {...(node.referencedContentNode as ReferencedContentNode)} />;
+    case NodeType.SPOILER:
+      return <Spoiler {...(node.spoilerNode as SpoilerNode)} />;
     default:
       return null;
   }

web/src/components/MemoContent/Spoiler.tsx

@@ -0,0 +1,24 @@
+import classNames from "classnames";
+import { useState } from "react";
+
+interface Props {
+  content: string;
+}
+
+const Spoiler: React.FC<Props> = ({ content }: Props) => {
+  const [isRevealed, setIsRevealed] = useState(false);
+
+  return (
+    <div
+      className={classNames(
+        "inline cursor-pointer select-none transition-all",
+        isRevealed ? "bg-gray-100 dark:bg-zinc-700" : "bg-gray-200 dark:bg-zinc-600",
+      )}
+      onClick={() => setIsRevealed(!isRevealed)}
+    >
+      <span className={classNames(isRevealed ? "opacity-100" : "opacity-0")}>{content}</span>
+    </div>
+  );
+};
+
+export default Spoiler;

web/src/types/node.ts

@@ -32,6 +32,7 @@ export enum NodeType {
   SUBSCRIPT = "SUBSCRIPT",
   SUPERSCRIPT = "SUPERSCRIPT",
   REFERENCED_CONTENT = "REFERENCED_CONTENT",
+  SPOILER = "SPOILER",
   UNRECOGNIZED = "UNRECOGNIZED",
 }
 
@@ -65,9 +66,11 @@ export interface Node {
   subscriptNode?: SubscriptNode | undefined;
   superscriptNode?: SuperscriptNode | undefined;
   referencedContentNode?: ReferencedContentNode | undefined;
+  spoilerNode?: SpoilerNode | undefined;
 }
 
-export interface LineBreakNode {}
+export interface LineBreakNode {
+}
 
 export interface ParagraphNode {
   children: Node[];
@@ -199,3 +202,7 @@ export interface ReferencedContentNode {
   resourceName: string;
   params: string;
 }
+
+export interface SpoilerNode {
+  content: string;
+}