fix: remove img regex

Author: abernier

docs/getting-started/authoring.mdx

@@ -56,7 +56,7 @@ title: Authoring
 <details>
   <summary>Result (with double quotes)</summary>
 
-<img src="./gutenberg.jpg" />
+<img src="gutenberg.jpg" />
 
 </details>
 

src/components/mdx/Img/rehypeImg.ts

@@ -1,12 +1,33 @@
+import resolveMdxUrl from '@/utils/resolveMdxUrl'
 import type { Root } from 'hast'
 import { visit } from 'unist-util-visit'
 
+import type { MdxJsxAttribute } from 'mdast-util-mdx-jsx'
+
 // https://unifiedjs.com/learn/guide/create-a-rehype-plugin/
-export function rehypeImg() {
-  return (tree: Root) => {
+export function rehypeImg(
+  relFilePath: Parameters<typeof resolveMdxUrl>[1],
+  MDX_BASEURL: Parameters<typeof resolveMdxUrl>[2],
+) {
+  return () => (tree: Root) => {
     visit(tree, null, function (node) {
       // console.log(node)
-      if (node.type === 'mdxJsxFlowElement' && node.name === 'img') node.name = 'Img' // map HTML <img> to <Img> React component
+      if (node.type === 'mdxJsxFlowElement' && node.name === 'img') {
+        node.name = 'Img' // map HTML <img> to <Img> React component
+
+        //
+        // Resolve relative URLs
+        //
+
+        const srcAttr = (
+          node.attributes.filter(({ type }) => type === 'mdxJsxAttribute') as MdxJsxAttribute[]
+        ).find((attr) => attr.name === 'src')
+
+        if (srcAttr) {
+          const src = srcAttr.value
+          if (typeof src === 'string') srcAttr.value = resolveMdxUrl(src, relFilePath, MDX_BASEURL)
+        }
+      }
     })
   }
 }

src/utils/docs.tsx

@@ -142,14 +142,6 @@ async function _getDocs(
       // inline images
       //
 
-      content = content.replace(
-        /(src="|\()(.+?\.(?:png|jpe?g|gif|webp|avif))("|\))/g, // https://regexper.com/#%2F%28src%3D%22%7C%5C%28%29%28.%2B%3F%5C.%28%3F%3Apng%7Cjpe%3Fg%7Cgif%7Cwebp%7Cavif%29%29%28%22%7C%5C%29%29%2Fg
-        (_input, prefix: string, src: string, suffix: string) => {
-          const url = resolveMdxUrl(src, relFilePath, MDX_BASEURL)
-          return `${prefix}${url}${suffix}`
-        },
-      )
-
       const boxes: string[] = []
       const tableOfContents: DocToC[] = []
 
@@ -159,7 +151,7 @@ async function _getDocs(
           mdxOptions: {
             remarkPlugins: [remarkGFM],
             rehypePlugins: [
-              rehypeImg,
+              rehypeImg(relFilePath, MDX_BASEURL),
               rehypeDetails,
               rehypeSummary,
               rehypeGha,