Skip to content

Commit a205777

Browse files
InneiInnei
committed
fix(kami-design): markdown props
Signed-off-by: Innei <tukon479@gmail.com>
1 parent 815c40b commit a205777

File tree

2 files changed

+126
-120
lines changed

2 files changed

+126
-120
lines changed

‎packages/kami-design/components/Markdown/components.tsx

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,6 @@ import { MFootNote } from './renderers/footnotes'
2727

2828
export interface MdProps {
2929
value?: string
30-
toc?: boolean
3130

3231
style?: React.CSSProperties
3332
readonly renderers?: { [key: string]: Partial<MarkdownToJSX.Rule> }

‎src/components/universal/Markdown/index.tsx

Lines changed: 126 additions & 119 deletions
Original file line numberDiff line numberDiff line change
@@ -19,128 +19,135 @@ import { LinkCard } from './renderers/link-card'
1919

2020
const Noop = () => null
2121

22-
export const Markdown: FC<MdProps & MarkdownToJSX.Options> = memo((props) => {
23-
const {
24-
value,
25-
renderers,
26-
27-
wrapperProps = {},
28-
29-
extendsRules,
30-
31-
...rest
32-
} = props
33-
34-
const Heading = useMemo(() => {
35-
return MHeading()
36-
}, [value, props.children])
37-
38-
const RenderError = useCallback(
39-
() => (
40-
<div>
41-
Markdown RenderError, Raw: <br /> {value || props.children}
42-
</div>
43-
),
44-
[props.children, value],
45-
)
46-
47-
return (
48-
<ErrorBoundary fallbackComponent={RenderError}>
49-
<KamiMarkdown
50-
tocSlot={props.toc ? MarkdownToc : Noop}
51-
{...wrapperProps}
52-
value={value}
53-
overrides={{
54-
footer: MFootNote,
55-
56-
img: MImage,
57-
// for custom react component
58-
LinkCard,
59-
}}
60-
extendsRules={{
61-
link: {
62-
react(node, output, state) {
63-
const { target, title } = node
64-
return (
65-
<MLink
66-
href={sanitizeUrl(target)!}
67-
title={title}
68-
key={state?.key}
69-
>
70-
{output(node.content, state!)}
71-
</MLink>
72-
)
22+
export interface KamiMarkdownProps extends MdProps {
23+
toc?: boolean
24+
}
25+
export const Markdown: FC<KamiMarkdownProps & MarkdownToJSX.Options> = memo(
26+
(props) => {
27+
const {
28+
value,
29+
renderers,
30+
31+
wrapperProps = {},
32+
33+
extendsRules,
34+
35+
...rest
36+
} = props
37+
38+
const Heading = useMemo(() => {
39+
return MHeading()
40+
}, [value, props.children])
41+
42+
const RenderError = useCallback(
43+
() => (
44+
<div>
45+
Markdown RenderError, Raw: <br /> {value || props.children}
46+
</div>
47+
),
48+
[props.children, value],
49+
)
50+
51+
return (
52+
<ErrorBoundary fallbackComponent={RenderError}>
53+
<KamiMarkdown
54+
tocSlot={props.toc ? MarkdownToc : Noop}
55+
{...wrapperProps}
56+
value={value}
57+
overrides={{
58+
footer: MFootNote,
59+
60+
img: MImage,
61+
// for custom react component
62+
LinkCard,
63+
}}
64+
extendsRules={{
65+
link: {
66+
react(node, output, state) {
67+
const { target, title } = node
68+
return (
69+
<MLink
70+
href={sanitizeUrl(target)!}
71+
title={title}
72+
key={state?.key}
73+
>
74+
{output(node.content, state!)}
75+
</MLink>
76+
)
77+
},
7378
},
74-
},
75-
heading: {
76-
react(node, output, state) {
77-
return (
78-
<Heading id={node.id} level={node.level} key={state?.key}>
79-
{output(node.content, state!)}
80-
</Heading>
81-
)
79+
heading: {
80+
react(node, output, state) {
81+
return (
82+
<Heading id={node.id} level={node.level} key={state?.key}>
83+
{output(node.content, state!)}
84+
</Heading>
85+
)
86+
},
8287
},
83-
},
84-
85-
footnoteReference: {
86-
react(node, output, state) {
87-
const { footnoteMap, target, content } = node
88-
const footnote = footnoteMap.get(content)
89-
const linkCardId = (() => {
90-
try {
91-
const thisUrl = new URL(footnote?.footnote?.replace(': ', ''))
92-
const isCurrentHost =
93-
thisUrl.hostname === window.location.hostname
94-
95-
if (!isCurrentHost && !isDev) {
88+
89+
footnoteReference: {
90+
react(node, output, state) {
91+
const { footnoteMap, target, content } = node
92+
const footnote = footnoteMap.get(content)
93+
const linkCardId = (() => {
94+
try {
95+
const thisUrl = new URL(
96+
footnote?.footnote?.replace(': ', ''),
97+
)
98+
const isCurrentHost =
99+
thisUrl.hostname === window.location.hostname
100+
101+
if (!isCurrentHost && !isDev) {
102+
return undefined
103+
}
104+
const pathname = thisUrl.pathname
105+
return pathname.slice(1)
106+
} catch {
96107
return undefined
97108
}
98-
const pathname = thisUrl.pathname
99-
return pathname.slice(1)
100-
} catch {
101-
return undefined
102-
}
103-
})()
104-
105-
return (
106-
<Fragment key={state?.key}>
107-
<a
108-
href={sanitizeUrl(target)!}
109-
onClick={(e) => {
110-
e.preventDefault()
111-
112-
springScrollToElement(
113-
document.getElementById(content)!,
114-
undefined,
115-
-window.innerHeight / 2,
116-
)
117-
}}
118-
>
119-
<sup key={state?.key}>^{content}</sup>
120-
</a>
121-
{linkCardId && <LinkCard id={linkCardId} source={'self'} />}
122-
</Fragment>
123-
)
109+
})()
110+
111+
return (
112+
<Fragment key={state?.key}>
113+
<a
114+
href={sanitizeUrl(target)!}
115+
onClick={(e) => {
116+
e.preventDefault()
117+
118+
springScrollToElement(
119+
document.getElementById(content)!,
120+
undefined,
121+
-window.innerHeight / 2,
122+
)
123+
}}
124+
>
125+
<sup key={state?.key}>^{content}</sup>
126+
</a>
127+
{linkCardId && <LinkCard id={linkCardId} source={'self'} />}
128+
</Fragment>
129+
)
130+
},
124131
},
125-
},
126-
codeBlock: {
127-
react(node, output, state) {
128-
return (
129-
<CodeBlock
130-
key={state?.key}
131-
content={node.content}
132-
lang={node.lang}
133-
/>
134-
)
132+
codeBlock: {
133+
react(node, output, state) {
134+
return (
135+
<CodeBlock
136+
key={state?.key}
137+
content={node.content}
138+
lang={node.lang}
139+
/>
140+
)
141+
},
135142
},
136-
},
137-
...extendsRules,
138-
...renderers,
139-
}}
140-
{...rest}
141-
>
142-
{props.children}
143-
</KamiMarkdown>
144-
</ErrorBoundary>
145-
)
146-
})
143+
...extendsRules,
144+
...renderers,
145+
}}
146+
{...rest}
147+
>
148+
{props.children}
149+
</KamiMarkdown>
150+
</ErrorBoundary>
151+
)
152+
},
153+
)

0 commit comments

Comments
 (0)