fix: fixed target and rel issue (fixes #1183)

packages/docsify-server-renderer/index.js

@@ -1,13 +1,13 @@
 import { readFileSync } from 'fs';
 import { resolve, basename } from 'path';
 import resolvePathname from 'resolve-pathname';
+import fetch from 'node-fetch';
+import debug from 'debug';
 import { AbstractHistory } from '../../src/core/router/history/abstract';
 import { Compiler } from '../../src/core/render/compiler';
 import { isAbsolutePath } from '../../src/core/router/util';
 import * as tpl from '../../src/core/render/tpl';
 import { prerenderEmbed } from '../../src/core/render/embed';
-import fetch from 'node-fetch';
-import debug from 'debug';
 
 function cwd(...args) {
   return resolve(process.cwd(), ...args);

src/core/event/scroll.js

@@ -1,8 +1,8 @@
+import Tweezer from 'tweezer.js';
 import { isMobile } from '../util/env';
 import * as dom from '../util/dom';
 import { removeParams } from '../router/util';
 import config from '../config';
-import Tweezer from 'tweezer.js';
 
 const nav = {};
 let hoverOver = false;

src/core/global-api.js

@@ -1,10 +1,10 @@
+import prism from 'prismjs';
+import marked from 'marked';
 import * as util from './util';
 import * as dom from './util/dom';
 import { Compiler } from './render/compiler';
 import { slugify } from './render/slugify';
 import { get } from './fetch/ajax';
-import prism from 'prismjs';
-import marked from 'marked';
 
 export default function() {
   window.Docsify = {

src/core/render/compiler.js

@@ -1,3 +1,4 @@
+import marked from 'marked';
 import { isAbsolutePath, getPath, getParentPath } from '../router/util';
 import { isFn, merge, cached, isPrimitive } from '../util/core';
 import { tree as treeTpl } from './tpl';
@@ -11,7 +12,6 @@ import { paragraphCompiler } from './compiler/paragraph';
 import { taskListCompiler } from './compiler/taskList';
 import { taskListItemCompiler } from './compiler/taskListItem';
 import { linkCompiler } from './compiler/link';
-import marked from 'marked';
 
 const cachedLinks = {};
 
@@ -193,7 +193,7 @@ export class Compiler {
 
   _initRenderer() {
     const renderer = new marked.Renderer();
-    const { linkTarget, router, contentBase } = this;
+    const { linkTarget, linkRel, router, contentBase } = this;
     const _self = this;
     const origin = {};
 
@@ -233,6 +233,7 @@ export class Compiler {
       renderer,
       router,
       linkTarget,
+      linkRel,
       compilerClass: _self,
     });
     origin.paragraph = paragraphCompiler({ renderer });

src/core/render/compiler/link.js

@@ -1,11 +1,21 @@
 import { getAndRemoveConfig } from '../utils';
 import { isAbsolutePath } from '../../router/util';
 
-export const linkCompiler = ({ renderer, router, linkTarget, compilerClass }) =>
+export const linkCompiler = ({
+  renderer,
+  router,
+  linkTarget,
+  linkRel,
+  compilerClass,
+}) =>
   (renderer.link = (href, title = '', text) => {
     let attrs = [];
     const { str, config } = getAndRemoveConfig(title);
-
+    linkTarget = config.target || linkTarget;
+    linkRel =
+      linkTarget === '_blank'
+        ? compilerClass.config.externalLinkRel || 'noopener'
+        : '';
     title = str;
 
     if (
@@ -24,10 +34,13 @@ export const linkCompiler = ({ renderer, router, linkTarget, compilerClass }) =>
           document.URL.replace(/\/(?!.*\/).*/, '/').replace('#/./', '') + href;
       }
       attrs.push(href.indexOf('mailto:') === 0 ? '' : `target="${linkTarget}"`);
-    }
-
-    if (config.target) {
-      attrs.push(`target="${config.target}"`);
+      attrs.push(
+        href.indexOf('mailto:') === 0
+          ? ''
+          : linkRel !== ''
+          ? ` rel="${linkRel}"`
+          : ''
+      );
     }
 
     // special case to check crossorigin urls

src/core/render/embed.js

@@ -1,6 +1,6 @@
+import stripIndent from 'strip-indent';
 import { get } from '../fetch/ajax';
 import { merge } from '../util/core';
-import stripIndent from 'strip-indent';
 
 const cached = {};
 

src/core/render/index.js

@@ -1,4 +1,5 @@
 /* eslint-disable no-unused-vars */
+import tinydate from 'tinydate';
 import * as dom from '../util/dom';
 import cssVars from '../util/polyfill/css-vars';
 import { callHook } from '../init/lifecycle';
@@ -10,7 +11,6 @@ import { scrollActiveSidebar } from '../event/scroll';
 import { Compiler } from './compiler';
 import * as tpl from './tpl';
 import { prerenderEmbed } from './embed';
-import tinydate from 'tinydate';
 
 function executeScript() {
   const script = dom

test/unit/base.test.js

@@ -2,8 +2,8 @@
 require = require('esm')(
   module /* , options */
 ); /* eslint-disable-line no-global-assign */
-const { History } = require('../../src/core/router/history/base');
 const { expect } = require('chai');
+const { History } = require('../../src/core/router/history/base');
 
 class MockHistory extends History {
   parse(path) {

test/unit/render.test.js

@@ -1,5 +1,5 @@
-const { init, expectSameDom } = require('../_helper');
 const { expect } = require('chai');
+const { init, expectSameDom } = require('../_helper');
 
 describe('render', function() {
   it('important content (tips)', async function() {
@@ -14,88 +14,81 @@ describe('render', function() {
     it('as unordered task list', async function() {
       const { docsify } = await init();
       const output = docsify.compiler.compile(`
-- [x] Task 1
-- [ ] Task 2
-- [ ] Task 3`);
+  - [x] Task 1
+  - [ ] Task 2
+  - [ ] Task 3`);
       expect(
         output,
         `<ul class="task-list">
-				<li class="task-list-item"><label><input checked="" disabled="" type="checkbox"> Task 1</label></li>
-				<li class="task-list-item"><label><input disabled="" type="checkbox"> Task 2</label></li>
-				<li class="task-list-item"><label><input disabled="" type="checkbox"> Task 3</label></li>
-			</ul>`
+  				<li class="task-list-item"><label><input checked="" disabled="" type="checkbox"> Task 1</label></li>
+  				<li class="task-list-item"><label><input disabled="" type="checkbox"> Task 2</label></li>
+  				<li class="task-list-item"><label><input disabled="" type="checkbox"> Task 3</label></li>
+  			</ul>`
       );
     });
 
     it('as ordered task list', async function() {
       const { docsify } = await init();
       const output = docsify.compiler.compile(`
-1. [ ] Task 1
-2. [x] Task 2`);
+  1. [ ] Task 1
+  2. [x] Task 2`);
       expectSameDom(
         output,
         `<ol class="task-list">
-				<li class="task-list-item"><label><input disabled="" type="checkbox"> Task 1</label></li>
-				<li class="task-list-item"><label><input checked="" disabled="" type="checkbox"> Task 2</label></li>
-			</ol>`
+  				<li class="task-list-item"><label><input disabled="" type="checkbox"> Task 1</label></li>
+  				<li class="task-list-item"><label><input checked="" disabled="" type="checkbox"> Task 2</label></li>
+  			</ol>`
       );
     });
 
     it('normal unordered', async function() {
       const { docsify } = await init();
       const output = docsify.compiler.compile(`
-- [linktext](link)
-- just text`);
+  - [linktext](link)
+  - just text`);
       expectSameDom(
         output,
         `<ul >
-				<li><a href="#/link" >linktext</a></li>
-				<li>just text</li>
-			</ul>`
+  				<li><a href="#/link" >linktext</a></li>
+  				<li>just text</li>
+  			</ul>`
       );
     });
 
     it('unordered with custom start', async function() {
       const { docsify } = await init();
       const output = docsify.compiler.compile(`
-1. first
-2. second
+  1. first
+  2. second
 
-text
+  text
 
-3. third`);
+  3. third`);
       expectSameDom(
         output,
-        `<ol >
-				<li>first</li>
-				<li>second</li>
-			</ol>
-			<p>text</p>
-			<ol start="3">
-			  <li>third</li>
-			</ol>`
+        `<ol ><li><p>first</p></li><li><p>second</p><p>text</p></li><li><p>third</p></li></ol>`
       );
     });
 
     it('nested', async function() {
       const { docsify } = await init();
       const output = docsify.compiler.compile(`
-- 1
-- 2
-  - 2 a
-  - 2 b
-- 3`);
+  - 1
+  - 2
+    - 2 a
+    - 2 b
+  - 3`);
       expectSameDom(
         output,
         `<ul >
-				<li>1</li>
-				<li>2<ul >
-						<li>2 a</li>
-						<li>2 b</li>
-					</ul>
-				</li>
-				<li>3</li>
-			</ul>`
+  				<li>1</li>
+  				<li>2<ul >
+  						<li>2 a</li>
+  						<li>2 b</li>
+  					</ul>
+  				</li>
+  				<li>3</li>
+  			</ul>`
       );
     });
   });
@@ -181,11 +174,11 @@ text
       expectSameDom(
         output,
         `
-      <h1 id="h1-tag">
-        <a href="#/?id=h1-tag" data-id="h1-tag" class="anchor">
-          <span>h1 tag</span>
-        </a>
-      </h1>`
+        <h1 id="h1-tag">
+          <a href="#/?id=h1-tag" data-id="h1-tag" class="anchor">
+            <span>h1 tag</span>
+          </a>
+        </h1>`
       );
     });
 
@@ -195,11 +188,11 @@ text
       expectSameDom(
         output,
         `
-      <h2 id="h2-tag">
-        <a href="#/?id=h2-tag" data-id="h2-tag" class="anchor">
-          <span>h2 tag</span>
-        </a>
-      </h2>`
+        <h2 id="h2-tag">
+          <a href="#/?id=h2-tag" data-id="h2-tag" class="anchor">
+            <span>h2 tag</span>
+          </a>
+        </h2>`
       );
     });
 
@@ -209,11 +202,11 @@ text
       expectSameDom(
         output,
         `
-      <h3 id="h3-tag">
-        <a href="#/?id=h3-tag" data-id="h3-tag" class="anchor">
-          <span>h3 tag</span>
-        </a>
-      </h3>`
+        <h3 id="h3-tag">
+          <a href="#/?id=h3-tag" data-id="h3-tag" class="anchor">
+            <span>h3 tag</span>
+          </a>
+        </h3>`
       );
     });
 
@@ -223,11 +216,11 @@ text
       expectSameDom(
         output,
         `
-      <h4 id="h4-tag">
-        <a href="#/?id=h4-tag" data-id="h4-tag" class="anchor">
-          <span>h4 tag</span>
-        </a>
-      </h4>`
+        <h4 id="h4-tag">
+          <a href="#/?id=h4-tag" data-id="h4-tag" class="anchor">
+            <span>h4 tag</span>
+          </a>
+        </h4>`
       );
     });
 
@@ -237,11 +230,11 @@ text
       expectSameDom(
         output,
         `
-      <h5 id="h5-tag">
-        <a href="#/?id=h5-tag" data-id="h5-tag" class="anchor">
-          <span>h5 tag</span>
-        </a>
-      </h5>`
+        <h5 id="h5-tag">
+          <a href="#/?id=h5-tag" data-id="h5-tag" class="anchor">
+            <span>h5 tag</span>
+          </a>
+        </h5>`
       );
     });
 
@@ -251,11 +244,11 @@ text
       expectSameDom(
         output,
         `
-      <h6 id="h6-tag">
-        <a href="#/?id=h6-tag" data-id="h6-tag" class="anchor">
-          <span>h6 tag</span>
-        </a>
-      </h6>`
+        <h6 id="h6-tag">
+          <a href="#/?id=h6-tag" data-id="h6-tag" class="anchor">
+            <span>h6 tag</span>
+          </a>
+        </h6>`
       );
     });
   });
@@ -267,7 +260,22 @@ text
 
       expectSameDom(
         output,
-        '<p><a href="http://url" target="_blank">alt text</a></p>'
+        '<p><a href="http://url" target="_blank"  rel="noopener">alt text</a></p>'
+      );
+    });
+
+    it('linkrel', async function() {
+      const { docsify } = await init('default', {
+        externalLinkTarget: '_blank',
+        externalLinkRel: 'noopener',
+      });
+      const output = docsify.compiler.compile(
+        '[alt text](http://www.example.com)'
+      );
+
+      expectSameDom(
+        output,
+        '<p><a href="http://www.example.com" target="_blank"  rel="noopener">alt text</a></p>'
       );
     });
 
@@ -279,7 +287,7 @@ text
 
       expectSameDom(
         output,
-        '<p><a href="javascript:void(0)" target="_blank" disabled>alt text</a></p>'
+        '<p><a href="javascript:void(0)" target="_blank"  rel="noopener" disabled>alt text</a></p>'
       );
     });
 
@@ -291,7 +299,7 @@ text
 
       expectSameDom(
         output,
-        '<p><a href="http://url" target="_blank" target="_self">alt text</a></p>'
+        '<p><a href="http://url" target="_self" >alt text</a></p>'
       );
     });
 
@@ -303,7 +311,7 @@ text
 
       expectSameDom(
         output,
-        '<p><a href="http://url" target="_blank" class="someCssClass">alt text</a></p>'
+        '<p><a href="http://url" target="_blank"  rel="noopener" class="someCssClass">alt text</a></p>'
       );
     });
 
@@ -315,7 +323,7 @@ text
 
       expectSameDom(
         output,
-        '<p><a href="http://url" target="_blank" id="someCssID">alt text</a></p>'
+        '<p><a href="http://url" target="_blank"  rel="noopener" id="someCssID">alt text</a></p>'
       );
     });
   });

test/unit/util.test.js

@@ -2,8 +2,8 @@
 require = require('esm')(
   module /* , options */
 ); /* eslint-disable-line no-global-assign */
-const { resolvePath } = require('../../src/core/router/util');
 const { expect } = require('chai');
+const { resolvePath } = require('../../src/core/router/util');
 
 describe('router/util', function() {
   it('resolvePath', async function() {