update

glassonion1 · Dec 13, 2024 · df837d8 · df837d8
1 parent 185dd36
commit df837d8
Show file tree

Hide file tree

Showing 4 changed files with 74 additions and 70 deletions.
diff --git a/packages/core/src/components/Link.tsx b/packages/core/src/components/Link.tsx
@@ -2,6 +2,7 @@ import { type ComponentWithAs, cx, forwardRef, Style } from '@sakura-ui/helper'
 import { Icon } from './Icon'
 
 export namespace Link {
+  // biome-ignore lint/suspicious/noEmptyInterface: no error
   export interface Props {}
 }
 

diff --git a/packages/forms/src/components/FileInput.tsx b/packages/forms/src/components/FileInput.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import { cx, Style } from '@sakura-ui/helper'
 import { ControllerContext } from './context'
-import { InputSize } from './inputStyle'
+import type { InputSize } from './inputStyle'
 
 export namespace FileInput {
   export interface Props

diff --git a/packages/markdown/package.json b/packages/markdown/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@sakura-ui/markdown",
-  "version": "0.0.16",
+  "version": "0.0.17",
   "description": "",
   "keywords": [
     "markdown"

diff --git a/packages/markdown/src/components/Markdown.tsx b/packages/markdown/src/components/Markdown.tsx
@@ -249,18 +249,83 @@ export const Markdown = ({
   const [toc, setToc] = React.useState<HeadingItem[]>([])
   const [element, setElement] = React.useState(<React.Fragment />)
 
-  const markdown2Headings = (md: string) => {
+  const markdown2Headings = React.useCallback((md: string) => {
     const result: any = remark().use(headingsPlugin).processSync(md)
 
     const headings: HeadingItem[] = result.data.fm.headings.filter(
-      (obj: any) => obj.depth < 3
+      (obj: HeadingItem) => obj.depth < 3
     )
 
     return headings
-  }
+  }, [])
+
+  const markdown2ReactElements = React.useCallback(
+    (md: string) => {
+      const rhypeReactOptions = {
+        ...production,
+        components: {
+          a: Anchor,
+          article: Article,
+          button: Button,
+          code: Code,
+          dl: Faq,
+          dt: Question,
+          dd: Answer,
+          h1: H1,
+          h2: H2,
+          h3: H3,
+          h4: H4,
+          h5: H5,
+          h6: H6,
+          iframe: Iframe,
+          img: Img,
+          ul: Ul,
+          ol: Ol,
+          pre: Pre,
+          table: TableContainer,
+          caption: Caption,
+          thead: Thead,
+          tbody: Tbody,
+          th: Th,
+          tr: Tr,
+          td: Td,
+          div: Div
+        }
+      }
+
+      const elem = unified()
+        .use(remarkParse) // md    -> mdast     (Markdown Abstract Syntax Tree)
+        .use(remarkGfm) // mdast -> GFM mdast (GitHub Flavored Markdown Abstract Syntax Tree)
+        .use(remarkDirective) // support for directive syntax
+        .use(remarkBreaks)
+        .use(attrPlugin)
+        .use(youtubePlugin)
+        .use(linkButtonPlugin)
+        .use(cellPlugin)
+        .use(cardPlugin)
+        .use(faqPlugin)
+        .use(gridPlugin)
+        .use(remarkRehype, {
+          allowDangerousHtml: true
+        }) // mdast -> hast      (HTML Abstract Syntax Tree)
+        .use(rehypeRaw) // hast  -> hast
+        .use(rehypeExternalLinks, { target: '_blank' }) // hast  -> hast
+        .use(rebypeShiftHeding, { shift: shiftHeding }) // hast  -> hast
+        .use(rehypeSlug)
+        .use(rehypeReact, rhypeReactOptions as any) // hast  -> React Elements
+        .processSync(md).result
+      return elem
+    },
+    [shiftHeding]
+  )
+
+  React.useEffect(() => {
+    setToc(markdown2Headings(children))
+    setElement(markdown2ReactElements(children))
+  }, [children, markdown2Headings, markdown2ReactElements])
 
-  // Necessary to make in-page links work.
-  const ref = React.useCallback(() => {
+  React.useEffect(() => {
+    // Necessary to make in-page links work.
     const scrollToHash = async () => {
       await sleep(500)
       if (location.hash) {
@@ -272,76 +337,14 @@ export const Markdown = ({
     scrollToHash()
   }, [])
 
-  React.useEffect(() => {
-    setToc(markdown2Headings(children))
-    setElement(markdown2ReactElements(children))
-  }, [children])
-
-  const rhypeReactOptions = {
-    ...production,
-    components: {
-      a: Anchor,
-      article: Article,
-      button: Button,
-      code: Code,
-      dl: Faq,
-      dt: Question,
-      dd: Answer,
-      h1: H1,
-      h2: H2,
-      h3: H3,
-      h4: H4,
-      h5: H5,
-      h6: H6,
-      iframe: Iframe,
-      img: Img,
-      ul: Ul,
-      ol: Ol,
-      pre: Pre,
-      table: TableContainer,
-      caption: Caption,
-      thead: Thead,
-      tbody: Tbody,
-      th: Th,
-      tr: Tr,
-      td: Td,
-      div: Div
-    }
-  }
-
-  const markdown2ReactElements = (md: string) => {
-    const elem = unified()
-      .use(remarkParse) // md    -> mdast     (Markdown Abstract Syntax Tree)
-      .use(remarkGfm) // mdast -> GFM mdast (GitHub Flavored Markdown Abstract Syntax Tree)
-      .use(remarkDirective) // support for directive syntax
-      .use(remarkBreaks)
-      .use(attrPlugin)
-      .use(youtubePlugin)
-      .use(linkButtonPlugin)
-      .use(cellPlugin)
-      .use(cardPlugin)
-      .use(faqPlugin)
-      .use(gridPlugin)
-      .use(remarkRehype, {
-        allowDangerousHtml: true
-      }) // mdast -> hast      (HTML Abstract Syntax Tree)
-      .use(rehypeRaw) // hast  -> hast
-      .use(rehypeExternalLinks, { target: '_blank' }) // hast  -> hast
-      .use(rebypeShiftHeding, { shift: shiftHeding }) // hast  -> hast
-      .use(rehypeSlug)
-      .use(rehypeReact, rhypeReactOptions as any) // hast  -> React Elements
-      .processSync(md).result
-    return elem
-  }
-
   const style = `
     rounded-3xl
     p-10
     bg-wood-50
   `
 
   return (
-    <div ref={ref} className="py-8 flex flex-col gap-8">
+    <div className="py-8 flex flex-col gap-8">
       {showToc && (
         <nav className={style}>
           <h2 className="mb-4 font-bold text-h-xs-m sm:text-h-xs">