fix: remove img regex

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,