feat(markdown): add grid type

Signed-off-by: Innei <i@innei.in>

package.json

@@ -79,7 +79,7 @@
     "js-yaml": "4.1.0",
     "kbar": "0.1.0-beta.45",
     "markdown-escape": "2.0.0",
-    "markdown-to-jsx": "npm:@innei/markdown-to-jsx@7.2.1-beta.0",
+    "markdown-to-jsx": "npm:@innei/markdown-to-jsx@7.2.1-beta.4",
     "marked": "11.1.1",
     "medium-zoom": "1.1.0",
     "mermaid": "10.6.1",

src/components/ui/banner/Banner.tsx

@@ -39,21 +39,22 @@ const iconColorMap = {
 }
 
 export const Banner: FC<{
-  type: 'warning' | 'error' | 'success' | 'info'
+  type: 'warning' | 'error' | 'success' | 'info' | 'warn'
   message?: string | React.ReactNode
   className?: string
   children?: React.ReactNode
   placement?: 'center' | 'left'
   showIcon?: boolean
 }> = (props) => {
-  const Icon = IconMap[props.type] || IconMap.info
+  const nextType = props.type == 'warn' ? 'warning' : props.type
+  const Icon = IconMap[nextType] || IconMap.info
   const { placement = 'center', showIcon = true } = props
   return (
     <div
       className={clsx(
-        'flex flex-col items-center gap-4 rounded-md border p-6 text-neutral-900 md:flex md:flex-row dark:bg-opacity-10 dark:text-[#c4c4c4]',
-        bgColorMap[props.type] || bgColorMap.info,
-        borderColorMap[props.type] || borderColorMap.info,
+        'flex flex-col items-center gap-4 rounded-md border p-6 text-neutral-900 dark:bg-opacity-10 dark:text-[#c4c4c4] md:flex md:flex-row',
+        bgColorMap[nextType] || bgColorMap.info,
+        borderColorMap[nextType] || borderColorMap.info,
         placement == 'center' ? 'justify-center' : 'justify-start',
         props.className,
       )}
@@ -62,7 +63,7 @@ export const Banner: FC<{
         <Icon
           className={clsx(
             `flex-shrink-0 text-3xl md:mr-2 md:self-start md:text-left`,
-            iconColorMap[props.type] || iconColorMap.info,
+            iconColorMap[nextType] || iconColorMap.info,
           )}
         />
       )}

src/components/ui/markdown/Markdown.tsx

@@ -57,6 +57,8 @@ export interface MdProps {
   as?: React.ElementType
 
   allowsScript?: boolean
+
+  removeWrapper?: boolean
 }
 
 export const Markdown: FC<MdProps & MarkdownToJSX.Options & PropsWithChildren> =
@@ -73,6 +75,7 @@ export const Markdown: FC<MdProps & MarkdownToJSX.Options & PropsWithChildren> =
       additionalParserRules,
       as: As = 'div',
       allowsScript = false,
+      removeWrapper = false,
       ...rest
     } = props
 
@@ -277,6 +280,8 @@ export const Markdown: FC<MdProps & MarkdownToJSX.Options & PropsWithChildren> =
       rest,
     ])
 
+    if (removeWrapper) return <Suspense>{node}</Suspense>
+
     return (
       <Suspense>
         <As

src/components/ui/markdown/customize.md

@@ -74,6 +74,18 @@ $ c = \pm\sqrt{a^2 + b^2} $
 
 ## Container
 
+### banner
+
+```
+::: warning
+_here be dragons_
+:::
+
+::: banner {error}
+_here be dragons_
+:::
+```
+
 ::: warning
 _here be dragons_
 :::
@@ -82,13 +94,77 @@ _here be dragons_
 _here be dragons_
 :::
 
+### Gallery
+
+```
+::: gallery
+https://loremflickr.com/640/480/city?1
+https://loremflickr.com/640/480/city?2
+https://loremflickr.com/640/480/city?3
+![](https://loremflickr.com/640/480/city?4 'Image')
+:::
+
+```
+
 ::: gallery
 https://loremflickr.com/640/480/city?1
 https://loremflickr.com/640/480/city?2
 https://loremflickr.com/640/480/city?3
 ![](https://loremflickr.com/640/480/city?4 'Image')
 :::
 
+
+### Grid
+
+```md
+
+::: grid {cols=3,gap=4}
+
+Grid 1
+
+Grid 2
+
+Grid 3
+
+https://loremflickr.com/640/480/city?1
+
+
+https://loremflickr.com/640/480/city?2
+
+https://loremflickr.com/640/480/city?3
+
+![](https://loremflickr.com/640/480/city?4 'Image')
+
+![](https://loremflickr.com/640/480/city?4 'Image')
+
+![](https://loremflickr.com/640/480/city?4 'Image')
+
+:::
+```
+
+::: grid {cols=3,gap=4}
+
+Grid 1
+
+Grid 2
+
+Grid 3
+
+https://loremflickr.com/640/480/city?1
+
+
+https://loremflickr.com/640/480/city?2
+
+https://loremflickr.com/640/480/city?3
+
+![](https://loremflickr.com/640/480/city?4 'Image')
+
+![](https://loremflickr.com/640/480/city?4 'Image')
+
+![](https://loremflickr.com/640/480/city?4 'Image')
+
+:::
+
 ## Rich Link
 
 ```

src/components/ui/markdown/parsers/container.tsx

@@ -1,5 +1,5 @@
-import React from 'react'
-import { blockRegex, Priority } from 'markdown-to-jsx'
+import React, { Fragment } from 'react'
+import { Priority } from 'markdown-to-jsx'
 import type { MarkdownToJSX } from 'markdown-to-jsx'
 
 import { Banner } from '../../banner/Banner'
@@ -19,26 +19,36 @@ const shouldCatchContainerName = [
   'success',
   'warning',
   'note',
+
+  'grid',
 ].join('|')
 
 export const ContainerRule: MarkdownToJSX.Rule = {
-  match: blockRegex(
-    new RegExp(
-      `^\\s*::: *(?<name>(${shouldCatchContainerName})) *({(?<params>(.*?))})? *\n(?<content>[\\s\\S]+?)\\s*::: *(?:\n *)+\n?`,
-    ),
-  ),
+  match: (source: string) => {
+    const result =
+      /^\s*::: *(?<type>.*?) *(?:{(?<params>.*?)})? *\n(?<content>[\s\S]+?)\s*::: *(?:\n *)+\n?/.exec(
+        source,
+      )
+
+    if (!result) return null
+
+    const type = result.groups!.type
+    if (!type || !type.match(shouldCatchContainerName)) return null
+    return result
+  },
   order: Priority.MED,
   parse(capture) {
     const { groups } = capture
     return {
-      ...groups,
+      node: { ...groups },
     }
   },
-  // @ts-ignore
+
   react(node, _, state) {
-    const { name, content, params } = node
+    const { type, params, content } = node.node
 
-    switch (name) {
+    console.log('container', type, params, content)
+    switch (type) {
       case 'carousel':
       case 'gallery': {
         return (
@@ -55,15 +65,17 @@ export const ContainerRule: MarkdownToJSX.Rule = {
         const transformMap = {
           warning: 'warn',
           danger: 'error',
+          note: 'info',
         }
         return (
           <Banner
-            type={name || (transformMap as any)[name] || 'info'}
+            type={(transformMap as any)[type] || type}
             className="my-4"
             key={state?.key}
           >
             <Markdown
               value={content}
+              as={Fragment}
               allowsScript
               className="w-full [&>p:first-child]:mt-0"
             />
@@ -85,6 +97,30 @@ export const ContainerRule: MarkdownToJSX.Rule = {
           </Banner>
         )
       }
+
+      case 'grid': {
+        // cols=2,gap=4
+
+        const cols = params?.match(/cols=(?<cols>\d+)/)?.groups?.cols || 2
+        const gap = params?.match(/gap=(?<gap>\d+)/)?.groups?.gap || 4
+        return (
+          <div
+            className="grid w-full"
+            style={{
+              gridTemplateColumns: `repeat(${cols}, minmax(0, 1fr))`,
+              gap: `${gap}px`,
+            }}
+            key={state?.key}
+          >
+            <Markdown
+              value={content}
+              allowsScript
+              removeWrapper
+              className="w-full [&>p:first-child]:mt-0"
+            />
+          </div>
+        )
+      }
     }
 
     return (