YourSelfHosted/memos
1
0
Fork 0
mirror of https://github.com/usememos/memos.git synced 2025-06-05 22:09:59 +02:00
Code Issues Packages Projects Releases Wiki Activity

chore: fix renderer props

Browse Source
This commit is contained in:
Steven
2024-01-05 08:47:43 +08:00
parent ce2d37b90c
commit f563b58a85
11 changed files with 34 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
web/src/components/MemoContent/Blockquote.tsx
View File

@ -1,7 +1,8 @@
import { Node } from "@/types/proto/api/v2/markdown_service"; import { Node } from "@/types/proto/api/v2/markdown_service";
import Renderer from "./Renderer"; import Renderer from "./Renderer";
import { BaseProps } from "./types";
interface Props { interface Props extends BaseProps {
children: Node[]; children: Node[];
} }
@ -9,7 +10,7 @@ const Blockquote: React.FC<Props> = ({ children }: Props) => {
return ( return (
<blockquote> <blockquote>
{children.map((child, index) => ( {children.map((child, index) => (
<Renderer key={`${child.type}-${index}`} node={child} /> <Renderer key={`${child.type}-${index}`} index={String(index)} node={child} />
))} ))}
</blockquote> </blockquote>
); );

2
web/src/components/MemoContent/Bold.tsx
View File

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

3
web/src/components/MemoContent/CodeBlock.tsx
View File

@ -4,8 +4,9 @@ import copy from "copy-to-clipboard";
import hljs from "highlight.js"; import hljs from "highlight.js";
import toast from "react-hot-toast"; import toast from "react-hot-toast";
import Icon from "../Icon"; import Icon from "../Icon";
import { BaseProps } from "./types";
interface Props { interface Props extends BaseProps {
language: string; language: string;
content: string; content: string;
} }

5
web/src/components/MemoContent/Heading.tsx
View File

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

4
web/src/components/MemoContent/HorizontalRule.tsx
View File

@ -1,4 +1,6 @@
interface Props { import { BaseProps } from "./types";
interface Props extends BaseProps {
symbol: string; symbol: string;
} }

4
web/src/components/MemoContent/LineBreak.tsx
View File

@ -1,4 +1,6 @@
interface Props {} import { BaseProps } from "./types";
interface Props extends BaseProps {}
const LineBreak: React.FC<Props> = () => { const LineBreak: React.FC<Props> = () => {
return <br />; return <br />;

5
web/src/components/MemoContent/OrderedList.tsx
View File

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

5
web/src/components/MemoContent/Paragraph.tsx
View File

@ -1,7 +1,8 @@
import { Node } from "@/types/proto/api/v2/markdown_service"; import { Node } from "@/types/proto/api/v2/markdown_service";
import Renderer from "./Renderer"; import Renderer from "./Renderer";
import { BaseProps } from "./types";
interface Props { interface Props extends BaseProps {
children: Node[]; children: Node[];
} }
@ -9,7 +10,7 @@ const Paragraph: React.FC<Props> = ({ children }: Props) => {
return ( return (
<p> <p>
{children.map((child, index) => ( {children.map((child, index) => (
<Renderer key={`${child.type}-${index}`} node={child} /> <Renderer key={`${child.type}-${index}`} index={String(index)} node={child} />
))} ))}
</p> </p>
); );

14
web/src/components/MemoContent/Renderer.tsx
View File

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

2
web/src/components/MemoContent/UnorderedList.tsx
View File

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

5
web/src/components/MemoContent/types/index.ts
View File

@ -1 +1,6 @@
export * from "./context"; export * from "./context";
export interface BaseProps {
index: string;
className?: string;
}