fix(kami-design): markdown props

Signed-off-by: Innei <tukon479@gmail.com>
mx-space · Dec 10, 2022 · a205777 · a205777
1 parent 815c40b
commit a205777
Show file tree

Hide file tree

Showing 2 changed files with 126 additions and 120 deletions.
diff --git a/packages/kami-design/components/Markdown/components.tsx b/packages/kami-design/components/Markdown/components.tsx
@@ -27,7 +27,6 @@ import { MFootNote } from './renderers/footnotes'
 
 export interface MdProps {
   value?: string
-  toc?: boolean
 
   style?: React.CSSProperties
   readonly renderers?: { [key: string]: Partial<MarkdownToJSX.Rule> }

diff --git a/src/components/universal/Markdown/index.tsx b/src/components/universal/Markdown/index.tsx
@@ -19,128 +19,135 @@ import { LinkCard } from './renderers/link-card'
 
 const Noop = () => null
 
-export const Markdown: FC<MdProps & MarkdownToJSX.Options> = memo((props) => {
-  const {
-    value,
-    renderers,
-
-    wrapperProps = {},
-
-    extendsRules,
-
-    ...rest
-  } = props
-
-  const Heading = useMemo(() => {
-    return MHeading()
-  }, [value, props.children])
-
-  const RenderError = useCallback(
-    () => (
-      <div>
-        Markdown RenderError, Raw: <br /> {value || props.children}
-      </div>
-    ),
-    [props.children, value],
-  )
-
-  return (
-    <ErrorBoundary fallbackComponent={RenderError}>
-      <KamiMarkdown
-        tocSlot={props.toc ? MarkdownToc : Noop}
-        {...wrapperProps}
-        value={value}
-        overrides={{
-          footer: MFootNote,
-
-          img: MImage,
-          // for custom react component
-          LinkCard,
-        }}
-        extendsRules={{
-          link: {
-            react(node, output, state) {
-              const { target, title } = node
-              return (
-                <MLink
-                  href={sanitizeUrl(target)!}
-                  title={title}
-                  key={state?.key}
-                >
-                  {output(node.content, state!)}
-                </MLink>
-              )
+export interface KamiMarkdownProps extends MdProps {
+  toc?: boolean
+}
+export const Markdown: FC<KamiMarkdownProps & MarkdownToJSX.Options> = memo(
+  (props) => {
+    const {
+      value,
+      renderers,
+
+      wrapperProps = {},
+
+      extendsRules,
+
+      ...rest
+    } = props
+
+    const Heading = useMemo(() => {
+      return MHeading()
+    }, [value, props.children])
+
+    const RenderError = useCallback(
+      () => (
+        <div>
+          Markdown RenderError, Raw: <br /> {value || props.children}
+        </div>
+      ),
+      [props.children, value],
+    )
+
+    return (
+      <ErrorBoundary fallbackComponent={RenderError}>
+        <KamiMarkdown
+          tocSlot={props.toc ? MarkdownToc : Noop}
+          {...wrapperProps}
+          value={value}
+          overrides={{
+            footer: MFootNote,
+
+            img: MImage,
+            // for custom react component
+            LinkCard,
+          }}
+          extendsRules={{
+            link: {
+              react(node, output, state) {
+                const { target, title } = node
+                return (
+                  <MLink
+                    href={sanitizeUrl(target)!}
+                    title={title}
+                    key={state?.key}
+                  >
+                    {output(node.content, state!)}
+                  </MLink>
+                )
+              },
             },
-          },
-          heading: {
-            react(node, output, state) {
-              return (
-                <Heading id={node.id} level={node.level} key={state?.key}>
-                  {output(node.content, state!)}
-                </Heading>
-              )
+            heading: {
+              react(node, output, state) {
+                return (
+                  <Heading id={node.id} level={node.level} key={state?.key}>
+                    {output(node.content, state!)}
+                  </Heading>
+                )
+              },
             },
-          },
-
-          footnoteReference: {
-            react(node, output, state) {
-              const { footnoteMap, target, content } = node
-              const footnote = footnoteMap.get(content)
-              const linkCardId = (() => {
-                try {
-                  const thisUrl = new URL(footnote?.footnote?.replace(': ', ''))
-                  const isCurrentHost =
-                    thisUrl.hostname === window.location.hostname
-
-                  if (!isCurrentHost && !isDev) {
+
+            footnoteReference: {
+              react(node, output, state) {
+                const { footnoteMap, target, content } = node
+                const footnote = footnoteMap.get(content)
+                const linkCardId = (() => {
+                  try {
+                    const thisUrl = new URL(
+                      footnote?.footnote?.replace(': ', ''),
+                    )
+                    const isCurrentHost =
+                      thisUrl.hostname === window.location.hostname
+
+                    if (!isCurrentHost && !isDev) {
+                      return undefined
+                    }
+                    const pathname = thisUrl.pathname
+                    return pathname.slice(1)
+                  } catch {
                     return undefined
                   }
-                  const pathname = thisUrl.pathname
-                  return pathname.slice(1)
-                } catch {
-                  return undefined
-                }
-              })()
-
-              return (
-                <Fragment key={state?.key}>
-                  <a
-                    href={sanitizeUrl(target)!}
-                    onClick={(e) => {
-                      e.preventDefault()
-
-                      springScrollToElement(
-                        document.getElementById(content)!,
-                        undefined,
-                        -window.innerHeight / 2,
-                      )
-                    }}
-                  >
-                    <sup key={state?.key}>^{content}</sup>
-                  </a>
-                  {linkCardId && <LinkCard id={linkCardId} source={'self'} />}
-                </Fragment>
-              )
+                })()
+
+                return (
+                  <Fragment key={state?.key}>
+                    <a
+                      href={sanitizeUrl(target)!}
+                      onClick={(e) => {
+                        e.preventDefault()
+
+                        springScrollToElement(
+                          document.getElementById(content)!,
+                          undefined,
+                          -window.innerHeight / 2,
+                        )
+                      }}
+                    >
+                      <sup key={state?.key}>^{content}</sup>
+                    </a>
+                    {linkCardId && <LinkCard id={linkCardId} source={'self'} />}
+                  </Fragment>
+                )
+              },
             },
-          },
-          codeBlock: {
-            react(node, output, state) {
-              return (
-                <CodeBlock
-                  key={state?.key}
-                  content={node.content}
-                  lang={node.lang}
-                />
-              )
+            codeBlock: {
+              react(node, output, state) {
+                return (
+                  <CodeBlock
+                    key={state?.key}
+                    content={node.content}
+                    lang={node.lang}
+                  />
+                )
+              },
             },
-          },
-          ...extendsRules,
-          ...renderers,
-        }}
-        {...rest}
-      >
-        {props.children}
-      </KamiMarkdown>
-    </ErrorBoundary>
-  )
-})
+            ...extendsRules,
+            ...renderers,
+          }}
+          {...rest}
+        >
+          {props.children}
+        </KamiMarkdown>
+      </ErrorBoundary>
+    )
+  },
+)