feat(markdown): add aliasSupport option for assetsPlugin (close #1646) (#1647)

Co-authored-by: Mister-Hope <mister-hope@outlook.com>

Author: LincZero

e2e/docs/markdown/images/images.md

@@ -2,12 +2,16 @@
 
 ![logo-relative](./logo-relative.png)
 
+<!--![logo-unprefix](logo-relative.png)-->
+
 ![logo-alias](@source/markdown/images/logo-relative.png)
 
 <img src="/logo.png" alt="img-logo-public">
 
 <img src="./logo-relative.png" alt="img-logo-relative">
 
+<!--<img src="logo-relative.png" alt="img-logo-unprefix">-->
+
 <img src="@source/markdown/images/logo-relative.png" alt="img-logo-alias">
 
 <img :src="logoRelative" alt="img-logo-import-relative">

packages/markdown/src/plugins/assetsPlugin/assetsPlugin.ts

@@ -9,14 +9,34 @@ export interface AssetsPluginOptions {
    * Whether to prepend base to absolute path
    */
   absolutePathPrependBase?: boolean
+
+  /**
+   * Use aliases for non-strict relative paths.
+   *
+   * This is a path that does not start
+   * with `./` or `../` or `/` or `<protocol header>`:
+   * `<img src="path1/path2.png" />`
+   *
+   * - If the option is `true`. `path1` is regarded as an alias.
+   * - If the option is `false`. It is regarded as a relative path.
+   * - If the option is `"@-prefix"`.
+   *   If the path starts with `@`, `path1` is regarded as an alias;
+   *   Otherwise, it is regarded as a relative path.
+   *
+   * @default true
+   */
+  aliasSupport?: boolean | '@-prefix'
 }
 
 /**
  * Plugin to handle assets links
  */
 export const assetsPlugin: PluginWithOptions<AssetsPluginOptions> = (
   md,
-  { absolutePathPrependBase = false }: AssetsPluginOptions = {},
+  {
+    absolutePathPrependBase = false,
+    aliasSupport = true,
+  }: AssetsPluginOptions = {},
 ) => {
   // wrap raw image renderer rule
   const rawImageRule = md.renderer.rules.image!
@@ -28,7 +48,10 @@ export const assetsPlugin: PluginWithOptions<AssetsPluginOptions> = (
 
     if (link) {
       // replace the original link with resolved link
-      token.attrSet('src', resolveLink(link, { env, absolutePathPrependBase }))
+      token.attrSet(
+        'src',
+        resolveLink(link, { env, absolutePathPrependBase, aliasSupport }),
+      )
     }
 
     return rawImageRule(tokens, idx, options, env, self)
@@ -42,16 +65,17 @@ export const assetsPlugin: PluginWithOptions<AssetsPluginOptions> = (
       tokens[idx].content = tokens[idx].content
         // handle src
         .replace(
-          /(<img\b.*?src=)(['"])(.*?)\2/gs,
+          /(<(?:img|source|video|audio)\b.*?\bsrc=)(['"])(.*?)\2/gs,
           (_, prefix: string, quote: string, src: string) =>
             `${prefix}${quote}${resolveLink(src.trim(), {
               env,
               absolutePathPrependBase,
+              aliasSupport,
             })}${quote}`,
         )
         // handle srcset
         .replace(
-          /(<img\b.*?srcset=)(['"])(.*?)\2/gs,
+          /(<(?:img|source|video|audio)\b.*?\bsrcset=)(['"])(.*?)\2/gs,
           (_, prefix: string, quote: string, srcset: string) =>
             `${prefix}${quote}${srcset
               .split(',')
@@ -62,6 +86,7 @@ export const assetsPlugin: PluginWithOptions<AssetsPluginOptions> = (
                     `${resolveLink(url.trim(), {
                       env,
                       absolutePathPrependBase,
+                      aliasSupport,
                     })}${descriptor.replace(/[ \n]+/g, ' ').trimEnd()}`,
                 ),
               )

packages/markdown/src/plugins/assetsPlugin/resolveLink.ts

@@ -6,18 +6,37 @@ import type { MarkdownEnv } from '../../types.js'
 interface ResolveLinkOptions {
   env: MarkdownEnv
   absolutePathPrependBase?: boolean
+  aliasSupport?: boolean | '@-prefix'
 }
 
 export const resolveLink = (
   link: string,
-  { env, absolutePathPrependBase = false }: ResolveLinkOptions,
+  {
+    env,
+    absolutePathPrependBase = false,
+    aliasSupport = true,
+  }: ResolveLinkOptions,
 ): string => {
   // do not resolve data uri
   if (link.startsWith('data:')) return link
 
   // decode link to ensure bundler can find the file correctly
   let resolvedLink = decode(link)
 
+  // handle alias support
+  if (aliasSupport === false || aliasSupport === '@-prefix') {
+    const hasPrefix =
+      link.startsWith('/') ||
+      link.startsWith('./') ||
+      link.startsWith('../') ||
+      /[A-Za-z]+:\/\//.test(link)
+    if (!hasPrefix) {
+      if (aliasSupport === false || !link.startsWith('@')) {
+        resolvedLink = `./${resolvedLink}`
+      }
+    }
+  }
+
   // prepend base to absolute path if needed
   if (absolutePathPrependBase && env.base && link.startsWith('/')) {
     resolvedLink = path.join(env.base, resolvedLink)

packages/markdown/tests/plugins/assetsPlugin.spec.ts

@@ -553,3 +553,89 @@ describe('html <img> tag', () => {
     })
   })
 })
+
+// Complex situations are tested by the previous `img tag`.
+// Here, only the situation where the img tag is replaced with other media tags is supplemented.
+//
+// And test `aliasSupport` option.
+describe('html media tag', () => {
+  describe('single-line', () => {
+    const source = [
+      /* src */
+      // relative paths
+      '<audio src="./foo.mp3">',
+      '<video src="./foo.mp4">',
+      '<source src="./foo.mp4">',
+      '<audio src="../foo.mp3">',
+      '<video src="../foo.mp4">',
+      '<source src="../foo.mp4">',
+      // absolute paths
+      '<audio src="/foo.mp3">',
+      '<video src="/foo.mp4">',
+      '<source src="/foo.mp4">',
+      // aliases
+      '<audio src="@alias/foo.mp3">',
+      '<video src="@alias/foo.mp4">',
+      '<source src="@alias/foo.mp4">',
+      // no-prefix paths
+      '<audio src="sub2/foo.mp3">',
+      '<video src="sub2/foo.mp4">',
+      '<source src="sub2/foo.mp4">',
+    ]
+
+    const TEST_CASES: {
+      description: string
+      md: MarkdownIt
+      env: MarkdownEnv
+      expected: string[]
+    }[] = [
+      {
+        description: 'should respect `aliasSupport` option',
+        md: MarkdownIt({ html: true }).use(assetsPlugin, {
+          aliasSupport: '@-prefix',
+        }),
+        env: {
+          base: '/base/',
+        },
+        expected: [
+          /* src */
+          // relative paths
+          '<audio src="./foo.mp3">',
+          '<video src="./foo.mp4">',
+          '<source src="./foo.mp4">',
+          '<audio src="../foo.mp3">',
+          '<video src="../foo.mp4">',
+          '<source src="../foo.mp4">',
+          // absolute paths
+          '<audio src="/foo.mp3">',
+          '<video src="/foo.mp4">',
+          '<source src="/foo.mp4">',
+          // aliases
+          '<audio src="@alias/foo.mp3">',
+          '<video src="@alias/foo.mp4">',
+          '<source src="@alias/foo.mp4">',
+          // no-prefix paths
+          '<audio src="./sub2/foo.mp3">',
+          '<video src="./sub2/foo.mp4">',
+          '<source src="./sub2/foo.mp4">',
+        ],
+      },
+    ]
+
+    TEST_CASES.forEach(({ description, md, env, expected }) => {
+      it(description, () => {
+        // Note: Media tags are blocks.
+
+        // block
+        expect(md.render(source.join('\n\n'), env)).toEqual(
+          expected.map((item) => item).join('\n'),
+        )
+
+        // block with leading white space
+        expect(
+          md.render(source.map((item) => `   ${item}`).join('\n\n'), env),
+        ).toEqual(expected.map((item) => `   ${item}`).join('\n'))
+      })
+    })
+  })
+})