From 2ac85b28159c8c50dc19f6ebc20b3834360aab6e Mon Sep 17 00:00:00 2001
From: Divyansh Singh <40380293+brc-dd@users.noreply.github.com>
Date: Sat, 30 Dec 2023 18:54:45 +0530
Subject: [PATCH] scope to image

---
 __tests__/e2e/.vitepress/config.ts |  4 +++-
 docs/guide/markdown.md             |  8 +++++---
 src/node/markdown/markdown.ts      | 10 +++-------
 src/node/markdown/plugins/image.ts | 10 +++++++++-
 4 files changed, 20 insertions(+), 12 deletions(-)

diff --git a/__tests__/e2e/.vitepress/config.ts b/__tests__/e2e/.vitepress/config.ts
index 9c02cc26..e4e503a6 100644
--- a/__tests__/e2e/.vitepress/config.ts
+++ b/__tests__/e2e/.vitepress/config.ts
@@ -87,7 +87,9 @@ export default defineConfig({
   title: 'Example',
   description: 'An example app using VitePress.',
   markdown: {
-    lazyLoading: true
+    image: {
+      lazyLoading: true
+    }
   },
   themeConfig: {
     sidebar,
diff --git a/docs/guide/markdown.md b/docs/guide/markdown.md
index 82417669..ef3cc0e8 100644
--- a/docs/guide/markdown.md
+++ b/docs/guide/markdown.md
@@ -849,13 +849,15 @@ $$ x = {-b \pm \sqrt{b^2-4ac} \over 2a} $$
 
 ## Image Lazy Loading
 
-You can enable lazy loading for each image in the content via config:
+You can enable lazy loading for each image added via markdown by setting `lazyLoading` to `true` in your config file:
 
 ```js
-// image lazy loading is disabled by default
 export default {
   markdown: {
-    lazyLoading: true
+    image: {
+      // image lazy loading is disabled by default
+      lazyLoading: true
+    }
   }
 }
 ```
diff --git a/src/node/markdown/markdown.ts b/src/node/markdown/markdown.ts
index fd23643a..e64a1bde 100644
--- a/src/node/markdown/markdown.ts
+++ b/src/node/markdown/markdown.ts
@@ -23,7 +23,7 @@ import type { Logger } from 'vite'
 import { containerPlugin, type ContainerOptions } from './plugins/containers'
 import { highlight } from './plugins/highlight'
 import { highlightLinePlugin } from './plugins/highlightLines'
-import { imagePlugin } from './plugins/image'
+import { imagePlugin, type Options as ImageOptions } from './plugins/image'
 import { lineNumberPlugin } from './plugins/lineNumbers'
 import { linkPlugin } from './plugins/link'
 import { preWrapperPlugin } from './plugins/preWrapper'
@@ -166,11 +166,7 @@ export interface MarkdownOptions extends MarkdownIt.Options {
    * @see https://vitepress.dev/guide/markdown#math-equations
    */
   math?: boolean | any
-  /**
-   * Support native lazy loading for the <img> tag.
-   * @default false
-   */
-  lazyLoading?: boolean
+  image?: ImageOptions
 }
 
 export type MarkdownRenderer = MarkdownIt
@@ -203,7 +199,7 @@ export const createMarkdownRenderer = async (
     .use(preWrapperPlugin, { hasSingleTheme })
     .use(snippetPlugin, srcDir)
     .use(containerPlugin, { hasSingleTheme }, options.container)
-    .use(imagePlugin, options.lazyLoading)
+    .use(imagePlugin, options.image)
     .use(
       linkPlugin,
       { target: '_blank', rel: 'noreferrer', ...options.externalLinks },
diff --git a/src/node/markdown/plugins/image.ts b/src/node/markdown/plugins/image.ts
index 7fcd8bcd..d6f7eb5f 100644
--- a/src/node/markdown/plugins/image.ts
+++ b/src/node/markdown/plugins/image.ts
@@ -3,7 +3,15 @@
 import type MarkdownIt from 'markdown-it'
 import { EXTERNAL_URL_RE } from '../../shared'
 
-export const imagePlugin = (md: MarkdownIt, lazyLoading: boolean) => {
+export interface Options {
+  /**
+   * Support native lazy loading for the `<img>` tag.
+   * @default false
+   */
+  lazyLoading?: boolean
+}
+
+export const imagePlugin = (md: MarkdownIt, { lazyLoading }: Options = {}) => {
   const imageRule = md.renderer.rules.image!
   md.renderer.rules.image = (tokens, idx, options, env, self) => {
     const token = tokens[idx]