chore: fix renderer props

f563b58a · Steven · ce2d37b9 · f563b58a · f563b58a · f563b58a
Commit f563b58a authored Jan 05, 2024 by Steven
11 changed files
--- a/web/src/components/MemoContent/Blockquote.tsx
+++ b/web/src/components/MemoContent/Blockquote.tsx
 import { Node } from "@/types/proto/api/v2/markdown_service";
 import Renderer from "./Renderer";
+import { BaseProps } from "./types";

-interface Props {
+interface Props extends BaseProps {
  children: Node[];
 }

@@ -9,7 +10,7 @@ const Blockquote: React.FC<Props> = ({ children }: Props) => {
  return (
    <blockquote>
      {children.map((child, index) => (
-        <Renderer key={`${child.type}-${index}`} node={child} />
+        <Renderer key={`${child.type}-${index}`} index={String(index)} node={child} />
      ))}
    </blockquote>
  );

--- a/web/src/components/MemoContent/Bold.tsx
+++ b/web/src/components/MemoContent/Bold.tsx
@@ -10,7 +10,7 @@ const Bold: React.FC<Props> = ({ children }: Props) => {
  return (
    <strong>
      {children.map((child, index) => (
-        <Renderer key={`${child.type}-${index}`} node={child} />
+        <Renderer key={`${child.type}-${index}`} index={String(index)} node={child} />
      ))}
    </strong>
  );

--- a/web/src/components/MemoContent/CodeBlock.tsx
+++ b/web/src/components/MemoContent/CodeBlock.tsx
@@ -4,8 +4,9 @@ import copy from "copy-to-clipboard";
 import hljs from "highlight.js";
 import toast from "react-hot-toast";
 import Icon from "../Icon";
+import { BaseProps } from "./types";

-interface Props {
+interface Props extends BaseProps {
  language: string;
  content: string;
 }

--- a/web/src/components/MemoContent/Heading.tsx
+++ b/web/src/components/MemoContent/Heading.tsx
 import { Node } from "@/types/proto/api/v2/markdown_service";
 import Renderer from "./Renderer";
+import { BaseProps } from "./types";

-interface Props {
+interface Props extends BaseProps {
  level: number;
  children: Node[];
 }
@@ -24,7 +25,7 @@ const Heading: React.FC<Props> = ({ level, children }: Props) => {
  return (
    <Head className={className}>
      {children.map((child, index) => (
-        <Renderer key={`${child.type}-${index}`} node={child} />
+        <Renderer key={`${child.type}-${index}`} index={String(index)} node={child} />
      ))}
    </Head>
  );

--- a/web/src/components/MemoContent/HorizontalRule.tsx
+++ b/web/src/components/MemoContent/HorizontalRule.tsx
-interface Props {
+import { BaseProps } from "./types";
+
+interface Props extends BaseProps {
  symbol: string;
 }


--- a/web/src/components/MemoContent/LineBreak.tsx
+++ b/web/src/components/MemoContent/LineBreak.tsx
-interface Props {}
+import { BaseProps } from "./types";
+
+interface Props extends BaseProps {}

 const LineBreak: React.FC<Props> = () => {
  return <br />;

--- a/web/src/components/MemoContent/OrderedList.tsx
+++ b/web/src/components/MemoContent/OrderedList.tsx
 import { Node } from "@/types/proto/api/v2/markdown_service";
 import Renderer from "./Renderer";
+import { BaseProps } from "./types";

-interface Props {
+interface Props extends BaseProps {
  number: string;
  children: Node[];
 }
@@ -15,7 +16,7 @@ const OrderedList: React.FC<Props> = ({ number, children }: Props) => {
        </div>
        <div>
          {children.map((child, index) => (
-            <Renderer key={`${child.type}-${index}`} node={child} />
+            <Renderer key={`${child.type}-${index}`} index={String(index)} node={child} />
          ))}
        </div>
      </li>

--- a/web/src/components/MemoContent/Paragraph.tsx
+++ b/web/src/components/MemoContent/Paragraph.tsx
 import { Node } from "@/types/proto/api/v2/markdown_service";
 import Renderer from "./Renderer";
+import { BaseProps } from "./types";

-interface Props {
+interface Props extends BaseProps {
  children: Node[];
 }

@@ -9,7 +10,7 @@ const Paragraph: React.FC<Props> = ({ children }: Props) => {
  return (
    <p>
      {children.map((child, index) => (
-        <Renderer key={`${child.type}-${index}`} node={child} />
+        <Renderer key={`${child.type}-${index}`} index={String(index)} node={child} />
      ))}
    </p>
  );

--- a/web/src/components/MemoContent/Renderer.tsx
+++ b/web/src/components/MemoContent/Renderer.tsx
@@ -51,19 +51,19 @@ interface Props {
 const Renderer: React.FC<Props> = ({ index, node }: Props) => {
  switch (node.type) {
    case NodeType.LINE_BREAK:
-      return <LineBreak />;
+      return <LineBreak index={index} />;
    case NodeType.PARAGRAPH:
-      return <Paragraph {...(node.paragraphNode as ParagraphNode)} />;
+      return <Paragraph index={index} {...(node.paragraphNode as ParagraphNode)} />;
    case NodeType.CODE_BLOCK:
-      return <CodeBlock {...(node.codeBlockNode as CodeBlockNode)} />;
+      return <CodeBlock index={index} {...(node.codeBlockNode as CodeBlockNode)} />;
    case NodeType.HEADING:
-      return <Heading {...(node.headingNode as HeadingNode)} />;
+      return <Heading index={index} {...(node.headingNode as HeadingNode)} />;
    case NodeType.HORIZONTAL_RULE:
-      return <HorizontalRule {...(node.horizontalRuleNode as HorizontalRuleNode)} />;
+      return <HorizontalRule index={index} {...(node.horizontalRuleNode as HorizontalRuleNode)} />;
    case NodeType.BLOCKQUOTE:
-      return <Blockquote {...(node.blockquoteNode as BlockquoteNode)} />;
+      return <Blockquote index={index} {...(node.blockquoteNode as BlockquoteNode)} />;
    case NodeType.ORDERED_LIST:
-      return <OrderedList {...(node.orderedListNode as OrderedListNode)} />;
+      return <OrderedList index={index} {...(node.orderedListNode as OrderedListNode)} />;
    case NodeType.UNORDERED_LIST:
      return <UnorderedList {...(node.unorderedListNode as UnorderedListNode)} />;
    case NodeType.TASK_LIST:

--- a/web/src/components/MemoContent/UnorderedList.tsx
+++ b/web/src/components/MemoContent/UnorderedList.tsx
@@ -15,7 +15,7 @@ const UnorderedList: React.FC<Props> = ({ children }: Props) => {
        </div>
        <div>
          {children.map((child, index) => (
-            <Renderer key={`${child.type}-${index}`} node={child} />
+            <Renderer key={`${child.type}-${index}`} index={String(index)} node={child} />
          ))}
        </div>
      </li>

--- a/web/src/components/MemoContent/types/index.ts
+++ b/web/src/components/MemoContent/types/index.ts
 export * from "./context";
+
+export interface BaseProps {
+  index: string;
+  className?: string;
+}