Better support for relative links

Author: MartenBE

src/core/render/compiler.js

@@ -231,6 +231,7 @@ export class Compiler {
     origin.code = highlightCodeCompiler({ renderer });
     origin.link = linkCompiler({
       renderer,
+      contentBase,
       router,
       linkTarget,
       linkRel,

src/core/render/compiler/link.js

@@ -1,8 +1,12 @@
 import { getAndRemoveConfig } from '../utils.js';
-import { isAbsolutePath } from '../../router/util.js';
+import { isAbsolutePath, getPath, getParentPath } from '../../router/util.js';
+
+const GET_EXTENSION_REGEXP = /(?:\.([^.]+))?$/;
+const GET_REDUNDANT_DOTS = /\/\.\//g;
 
 export const linkCompiler = ({
   renderer,
+  contentBase,
   router,
   linkTarget,
   linkRel,
@@ -18,29 +22,36 @@ export const linkCompiler = ({
         : '';
     title = str;
 
-    if (
-      !isAbsolutePath(href) &&
-      !compilerClass._matchNotCompileLink(href) &&
-      !config.ignore
-    ) {
-      if (href === compilerClass.config.homepage) {
-        href = 'README';
-      }
+    if (!config.ignore && !compilerClass._matchNotCompileLink(href)) {
+      if (!isAbsolutePath(href)) {
+        if (href === compilerClass.config.homepage) {
+          href = 'README';
+        } else {
+          const ext = GET_EXTENSION_REGEXP.exec(href)[1];
+          if (!ext || ext === 'md') {
+            href = router.toURL(href, null, router.getCurrentPath());
+          } else {
+            href = getPath(
+              contentBase,
+              getParentPath(router.getCurrentPath()),
+              href
+            );
+          }
 
-      href = router.toURL(href, null, router.getCurrentPath());
-    } else {
-      if (!isAbsolutePath(href) && href.slice(0, 2) === './') {
-        href =
-          document.URL.replace(/\/(?!.*\/).*/, '/').replace('#/./', '') + href;
+          href = href.replace(GET_REDUNDANT_DOTS, '/');
+        }
+      } else {
+        attrs.push(
+          href.indexOf('mailto:') === 0 ? '' : `target="${linkTarget}"`
+        );
+        attrs.push(
+          href.indexOf('mailto:') === 0
+            ? ''
+            : linkRel !== ''
+            ? ` rel="${linkRel}"`
+            : ''
+        );
       }
-      attrs.push(href.indexOf('mailto:') === 0 ? '' : `target="${linkTarget}"`);
-      attrs.push(
-        href.indexOf('mailto:') === 0
-          ? ''
-          : linkRel !== ''
-          ? ` rel="${linkRel}"`
-          : ''
-      );
     }
 
     if (config.disabled) {

test/integration/render.test.js

@@ -263,5 +263,47 @@ describe('render', function () {
         `"<p><a href=\\"http://url\\" target=\\"_blank\\"  rel=\\"noopener\\" id=\\"someCssID\\">alt text</a></p>"`
       );
     });
+
+    test('relative link with md extension', async function () {
+      const output = window.marked('[alt text](test.md)');
+
+      expect(output).toMatchInlineSnapshot(
+        `"<p><a href=\\"#/test\\" >alt text</a></p>"`
+      );
+    });
+
+    test('relative link with md extension starting with "./"', async function () {
+      const output = window.marked('[alt text](./test.md)');
+
+      expect(output).toMatchInlineSnapshot(
+        `"<p><a href=\\"#/test\\" >alt text</a></p>"`
+      );
+    });
+
+    test('relative link with extension other than md', async function () {
+      const output = window.marked('[alt text](test.txt)');
+
+      expect(output).toMatchInlineSnapshot(
+        `"<p><a href=\\"http://127.0.0.1:3001/test.txt\\" >alt text</a></p>"`
+      );
+    });
+
+    test('relative link with extension other than md starting with "./"', async function () {
+      const output = window.marked('[alt text](./test.txt)');
+
+      expect(output).toMatchInlineSnapshot(
+        `"<p><a href=\\"http://127.0.0.1:3001/test.txt\\" >alt text</a></p>"`
+      );
+    });
+
+    test('absolute link with md extension', async function () {
+      const output = window.marked(
+        '[alt text](http://www.example.com/test.md)'
+      );
+
+      expect(output).toMatchInlineSnapshot(
+        `"<p><a href=\\"http://www.example.com/test.md\\" target=\\"_blank\\"  rel=\\"noopener\\">alt text</a></p>"`
+      );
+    });
   });
 });