feat: link attribute option (close: #288) (#480)

* feat: link attribute option (close: #288)

* fix: addLink url encode

* refactor: reflect code review

examples/example20-performance-demo.html

@@ -58,7 +58,12 @@
           'uml',
           'mark',
           'table'
-        ]
+        ],
+        linkAttribute: {
+          target: '_blank',
+          contenteditable: 'false',
+          rel: 'noopener noreferrer'
+        }
       });
       editor.on('change', function() {
         setTimeout(function() {

src/js/convertor.js

@@ -15,6 +15,7 @@ import blockQuote from './markdownItPlugins/markdownitBlockQuoteRenderer';
 import tableRenderer from './markdownItPlugins/markdownitTableRenderer';
 import htmlBlock from './markdownItPlugins/markdownitHtmlBlockRenderer';
 import codeBackticks from './markdownItPlugins/markdownitBackticksRenderer';
+import {linkAttribute} from './markdownItPlugins/markdownitInlinePlugin';
 import codeBlockManager from './codeBlockManager';
 
 const markdownitHighlight = new MarkdownIt({
@@ -171,6 +172,23 @@ class Convertor {
     this.eventManager.listen('convertorAfterMarkdownToHtmlConverted', html => htmlSanitizer(html, true));
   }
 
+  /**
+   * set link attribute to markdownitHighlight, markdownit
+   * using linkAttribute of markdownItInlinePlugin
+   * @param {object} attribute markdown text
+   */
+  setLinkAttribute(attribute) {
+    const keys = Object.keys(attribute);
+    const setAttributeToToken = (tokens, idx) => {
+      keys.forEach(key => {
+        tokens[idx].attrPush([key, attribute[key]]);
+      });
+    };
+
+    markdownitHighlight.use(linkAttribute, setAttributeToToken);
+    markdownit.use(linkAttribute, setAttributeToToken);
+  }
+
   /**
    * toMarkdown
    * Convert html to markdown

src/js/editor.js

@@ -91,6 +91,8 @@ import './langs/gl_ES';
 const __nedInstance = [];
 const gaTrackingId = 'UA-129966929-1';
 
+const availableLinkAttributes = ['rel', 'target', 'contenteditable', 'hreflang', 'type'];
+
 /**
  * @callback addImageBlobHook
  * @param  {File|Blob} fileOrBlob - image blob
@@ -131,6 +133,7 @@ class ToastUIEditor {
     * @param {object} [options.customConvertor] - convertor extention
     * @param {string} [options.placeholder] - The placeholder text of the editable element.
     * @param {string} [options.previewDelayTime] - the delay time for rendering preview
+    * @param {object} [options.linkAttribute] - Attributes of anchor element that shold be rel, target, contenteditable, hreflang, type
     */
   constructor(options) {
     this.initialHtml = options.el.innerHTML;
@@ -216,6 +219,13 @@ class ToastUIEditor {
     this.wwEditor = WysiwygEditor.factory(this.layout.getWwEditorContainerEl(), this.eventManager);
     this.toMarkOptions = null;
 
+    if (this.options.linkAttribute) {
+      const attribute = this._sanitizeLinkAttribute(this.options.linkAttribute);
+
+      this.convertor.setLinkAttribute(attribute);
+      this.wwEditor.setLinkAttribute(attribute);
+    }
+
     this.changePreviewStyle(this.options.previewStyle);
 
     this.changeMode(this.options.initialEditType, true);
@@ -247,6 +257,23 @@ class ToastUIEditor {
     }
   }
 
+  /**
+   * sanitize attribute for link
+   * @param {object} attribute - attribute for link
+   * @returns {object} sanitized attribute
+   */
+  _sanitizeLinkAttribute(attribute) {
+    const linkAttribute = {};
+
+    availableLinkAttributes.forEach(key => {
+      if (!util.isUndefined(attribute[key])) {
+        linkAttribute[key] = attribute[key];
+      }
+    });
+
+    return linkAttribute;
+  }
+
   /**
    * change preview style
    * @memberof ToastUIEditor

src/js/markdownItPlugins/markdownitInlinePlugin.js

@@ -0,0 +1,37 @@
+// Copyright (c) 2014, Vitaly Puzrin.
+// Distributed under an MIT license: https://github.com/markdown-it/markdown-it-for-inline
+/* eslint-disable */
+
+/**
+ * @fileoverview Implements markdownItLinkPlugin
+ * @modifier NHN FE Development Lab <dl_javascript@nhn.com>
+ */
+
+function for_inline_plugin(md, ruleName, tokenType, iteartor) {
+
+  function scan(state) {
+    var i, blkIdx, inlineTokens;
+
+    for (blkIdx = state.tokens.length - 1; blkIdx >= 0; blkIdx--) {
+      if (state.tokens[blkIdx].type !== 'inline') {
+        continue;
+      }
+
+      inlineTokens = state.tokens[blkIdx].children;
+
+      for (i = inlineTokens.length - 1; i >= 0; i--) {
+        if (inlineTokens[i].type !== tokenType) {
+          continue;
+        }
+
+        iteartor(inlineTokens, i);
+      }
+    }
+  }
+
+  md.core.ruler.push(ruleName, scan);
+};
+
+export const linkAttribute = function(markdownit, iteartor) {
+  for_inline_plugin(markdownit, 'url_attribute', 'link_open', iteartor);
+};

src/js/wysiwygCommands/addLink.js

@@ -3,6 +3,7 @@
  * @author NHN FE Development Lab <dl_javascript@nhn.com>
  */
 import $ from 'jquery';
+import util from 'tui-code-snippet';
 
 import CommandManager from '../commandManager';
 import ImportManager from '../importManager';
@@ -24,6 +25,7 @@ const AddLink = CommandManager.command('wysiwyg', /** @lends AddLink */{
    */
   exec(wwe, data) {
     const sq = wwe.getEditor();
+    const linkAttibute = wwe.getLinkAttribute();
     let {url, linkText} = data;
     linkText = decodeURIGraceful(linkText);
     url = encodeMarkdownCharacters(url);
@@ -34,9 +36,12 @@ const AddLink = CommandManager.command('wysiwyg', /** @lends AddLink */{
       sq.removeAllFormatting();
 
       if (sq.getSelectedText()) {
-        sq.makeLink(url);
+        sq.makeLink(url, linkAttibute);
       } else {
-        const link = sq.createElement('A', {href: url});
+        const link = sq.createElement('A', util.extend({
+          href: url
+        }, linkAttibute));
+
         $(link).text(linkText);
         sq.insertElement(link);
       }

src/js/wysiwygEditor.js

@@ -54,6 +54,7 @@ class WysiwygEditor {
 
     this._keyEventHandlers = {};
     this._managers = {};
+    this._linkAttribute = {};
 
     this._initEvent();
     this._initDefaultKeyEventHandler();
@@ -815,6 +816,22 @@ class WysiwygEditor {
     }
   }
 
+  /**
+   * Set attribute of link for wysiwyg
+   * @param {object} attribute - attribute of anchor tag
+   */
+  setLinkAttribute(attribute) {
+    this._linkAttribute = attribute;
+  }
+
+  /**
+   * Get attribute of link for wysiwyg
+   * @returns {object} attribute - attribute of anchor tag
+   */
+  getLinkAttribute() {
+    return this._linkAttribute;
+  }
+
   /**
    * setValue
    * Set value to wysiwyg editor