fix: image grid

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

src/components/ui/markdown/Markdown.tsx

@@ -82,9 +82,12 @@ export const Markdown: FC<MdProps & MarkdownToJSX.Options & PropsWithChildren> =
     const ref = useRef<HTMLDivElement>(null)
 
     const node = useMemo(() => {
-      if (!value && typeof props.children != 'string') return null
+      const mdContent = value || props.children
 
-      const mdElement = compiler(`${value || props.children}`, {
+      if (!mdContent) return null
+      if (typeof mdContent != 'string') return null
+
+      const mdElement = compiler(mdContent, {
         wrapper: null,
         // @ts-ignore
         overrides: {

src/components/ui/markdown/customize.md

@@ -165,23 +165,23 @@ https://loremflickr.com/640/480/city?3
 
 ```md
 ::: grid {cols=2,rows=2,gap=4,type=images}
-https://loremflickr.com/640/480/city?4
-https://loremflickr.com/640/480/city?4
-https://loremflickr.com/640/480/city?4
-https://loremflickr.com/640/480/city?4
+![](https://loremflickr.com/640/480/city?4)
+![](https://loremflickr.com/640/480/city?4)
+![](https://loremflickr.com/640/480/city?4)
+![](https://loremflickr.com/640/480/city?4)
 :::
 ```
 
 ::: grid {cols=3,rows=3,gap=12,type=images}
-https://loremflickr.com/640/480/city?4
-https://loremflickr.com/640/480/city?4
-https://loremflickr.com/640/480/city?4
-https://loremflickr.com/640/480/city?4
-https://loremflickr.com/640/480/city?4
-https://loremflickr.com/640/480/city?4
-https://loremflickr.com/640/480/city?4
-https://loremflickr.com/640/480/city?4
-https://loremflickr.com/640/480/city?4
+![](https://loremflickr.com/640/480/city?4)
+![](https://loremflickr.com/640/480/city?4)
+![](https://loremflickr.com/640/480/city?4)
+![](https://loremflickr.com/640/480/city?4)
+![](https://loremflickr.com/640/480/city?4)
+![](https://loremflickr.com/640/480/city?4)
+![](https://loremflickr.com/640/480/city?4)
+![](https://loremflickr.com/640/480/city?4)
+![](https://loremflickr.com/640/480/city?4)
 :::
 
 

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

@@ -140,7 +140,7 @@ export const ContainerRule: MarkdownToJSX.Rule = {
             )
           }
           case 'images': {
-            const imagesSrc = content.split('\n').filter(Boolean) as string[]
+            const imagesSrc = pickImagesFromMarkdown(content).map((r) => r.url)
 
             return (
               <GridMarkdownImages

src/components/ui/markdown/renderers/image.tsx

@@ -1,12 +1,11 @@
 'use client'
 
-import React, { memo, useRef, useState } from 'react'
-import { useIsomorphicLayoutEffect } from 'foxact/use-isomorphic-layout-effect'
+import React, { memo, useRef } from 'react'
+import clsx from 'clsx'
 import mediumZoom from 'medium-zoom'
-import type { Zoom } from 'medium-zoom'
 import type { FC } from 'react'
 
-import { isServerSide } from '~/lib/env'
+import { addImageUrlResizeQuery } from '~/lib/image'
 import { isVideoExt } from '~/lib/mine-type'
 import { useMarkdownImageRecord } from '~/providers/article/MarkdownImageRecordProvider'
 import {
@@ -69,43 +68,34 @@ export const GridMarkdownImages: FC<{
   )
 }
 
-let zoomer: Zoom
 const GridZoomImage: FC<{ src: string }> = memo(({ src }) => {
-  const { accent } = useMarkdownImageRecord(src) || {}
-
-  const [zoomer_] = useState(() => {
-    if (isServerSide) return null
-    if (zoomer) return zoomer
-    const zoom = mediumZoom(undefined)
-    zoomer = zoom
-    return zoom
-  })
-
+  const { accent, height, width } = useMarkdownImageRecord(src) || {}
+  const cropUrl = addImageUrlResizeQuery(src, 300)
   const imageEl = useRef<HTMLImageElement>(null)
-
-  useIsomorphicLayoutEffect(() => {
-    if (!zoomer_) return
-    const $image = imageEl.current
-    if (!$image) return
-
-    zoomer_.attach($image)
-    return () => {
-      zoomer_.detach($image)
-    }
-  }, [])
+  const wGreaterThanH = width && height ? width > height : true
 
   return (
     <div
-      className="relative h-full w-full rounded-md bg-cover bg-center"
+      className="relative flex h-full w-full overflow-hidden rounded-md bg-cover bg-center center"
       style={{
-        backgroundImage: `url(${src})`,
         backgroundColor: accent,
       }}
     >
       <img
-        src={src}
+        alt=""
+        height={height}
+        width={width}
+        src={cropUrl}
         ref={imageEl}
-        className="absolute inset-0 z-[1] !mx-0 !my-0 h-full w-full cursor-zoom-in opacity-0"
+        className={clsx(
+          '!mx-0 !my-0 max-w-max object-cover',
+          wGreaterThanH ? 'h-full' : 'w-full',
+        )}
+        data-zoom-src={src}
+        onClick={() => {
+          if (!imageEl.current) return
+          mediumZoom(imageEl.current).open()
+        }}
       />
     </div>
   )

src/lib/image.ts

@@ -39,3 +39,26 @@ export function getDominantColor(imageObject: HTMLImageElement) {
     .toString(16)
     .slice(1)}`
 }
+
+export const addImageUrlCropSizeQuery = (url: string, size: number) => {
+  const parsedUrl = new URL(url)
+
+  // Tencent Cloud 数据万象
+  // ?imageMogr2/thumbnail/300x/crop/300x300/gravity/center
+  parsedUrl.searchParams.set(
+    `imageMogr2/thumbnail/${size}x/crop/${size}x${size}/gravity/center`,
+    '',
+  )
+
+  return parsedUrl.toString()
+}
+
+export const addImageUrlResizeQuery = (url: string, size: number) => {
+  const parsedUrl = new URL(url)
+
+  // Tencent Cloud 数据万象
+  // ?imageMogr2/thumbnail/300x
+  parsedUrl.searchParams.set(`imageMogr2/thumbnail/${size}x`, '')
+
+  return parsedUrl.toString()
+}

src/styles/image-zoom.css

@@ -5,16 +5,17 @@
   @apply !bg-slate-50 dark:!bg-neutral-900;
 }
 
-.medium-zoom-overlay + .medium-zoom-image {
-  z-index: 100;
-  opacity: 1;
-  transition: all 0.5s ease-in-out;
-}
+/* .medium-zoom-overlay + .medium-zoom-image {
+} */
 
 .medium-zoom-image {
   border-radius: 0.5rem;
   transition: border-radius 0.3s ease-in-out;
 }
 .medium-zoom-image.medium-zoom-image--opened {
   border-radius: 0;
+
+  z-index: 100;
+  opacity: 1;
+  transition: all 0.5s ease-in-out;
 }