Made link target attribute configurable and allowed individual ops to…

… override it
nozer · Apr 22, 2018 · b3ca7d8 · b3ca7d8
1 parent 4c71ac3
commit b3ca7d8
Show file tree

Hide file tree

Showing 11 changed files with 310 additions and 243 deletions.
diff --git a/README.md b/README.md
@@ -44,6 +44,7 @@ var html = converter.convert();
 |multiLineHeader| true | Same deal as `multiLineBlockquote` for headers|
 |multiLineCodeblock| true | Same deal as `multiLineBlockquote` for code-blocks|
 |linkRel| '' | Specifies a value to put on the `rel` attr on links|
+|linkTarget| '_blank' | Specifies target for all links; use `''` (empty string) to not generate `target` attribute. This can be overridden by an individual link op by specifiying the `target` with a value in the respective op's attributes|
 |allowBackgroundClasses| false | If true, css classes will be added for background attr|
 
 ## Rendering Quill Formats ##

diff --git a/dist/browser/QuillDeltaToHtmlConverter.bundle.js b/dist/browser/QuillDeltaToHtmlConverter.bundle.js
@@ -215,7 +215,7 @@ var OpAttributeSanitizer = (function () {
             'blockquote', 'code-block'
         ];
         var colorAttrs = ['background', 'color'];
-        var font = dirtyAttrs.font, size = dirtyAttrs.size, link = dirtyAttrs.link, script = dirtyAttrs.script, list = dirtyAttrs.list, header = dirtyAttrs.header, align = dirtyAttrs.align, direction = dirtyAttrs.direction, indent = dirtyAttrs.indent, mentions = dirtyAttrs.mentions, mention = dirtyAttrs.mention, width = dirtyAttrs.width;
+        var font = dirtyAttrs.font, size = dirtyAttrs.size, link = dirtyAttrs.link, script = dirtyAttrs.script, list = dirtyAttrs.list, header = dirtyAttrs.header, align = dirtyAttrs.align, direction = dirtyAttrs.direction, indent = dirtyAttrs.indent, mentions = dirtyAttrs.mentions, mention = dirtyAttrs.mention, width = dirtyAttrs.width, target = dirtyAttrs.target;
         var sanitizedAttrs = booleanAttrs.concat(colorAttrs, ['font', 'size', 'link', 'script', 'list', 'header', 'align',
             'direction', 'indent', 'mentions', 'mention', 'width']);
         booleanAttrs.forEach(function (prop) {
@@ -243,6 +243,9 @@ var OpAttributeSanitizer = (function () {
         if (link) {
             cleanAttrs.link = (link + '')._scrubUrl();
         }
+        if (target && OpAttributeSanitizer.isValidTarget(target)) {
+            cleanAttrs.target = target;
+        }
         if (script === value_types_1.ScriptType.Sub || value_types_1.ScriptType.Super === script) {
             cleanAttrs.script = script;
         }
@@ -291,6 +294,9 @@ var OpAttributeSanitizer = (function () {
     OpAttributeSanitizer.IsValidWidth = function (width) {
         return !!width.match(/^[0-9]*(px|em|%)?$/);
     };
+    OpAttributeSanitizer.isValidTarget = function (target) {
+        return !!target.match(/^[_a-zA-Z0-9\-]{1,50}$/);
+    };
     return OpAttributeSanitizer;
 }());
 exports.OpAttributeSanitizer = OpAttributeSanitizer;
@@ -419,11 +425,16 @@ var OpToHtmlConverter = (function () {
         tagAttrs = tagAttrs
             .concat(styleAttr)
             .concat(this.op.isLink() ? [
-            makeAttr('href', funcs_html_1.encodeLink(this.op.attributes.link)),
-            makeAttr('target', '_blank')
+            makeAttr('href', funcs_html_1.encodeLink(this.op.attributes.link))
         ] : []);
-        if (this.op.isLink() && !!this.options.linkRel && OpToHtmlConverter.IsValidRel(this.options.linkRel)) {
-            tagAttrs.push(makeAttr('rel', this.options.linkRel));
+        if (this.op.isLink()) {
+            var target = this.op.attributes.target || this.options.linkTarget;
+            tagAttrs = tagAttrs
+                .concat(makeAttr('href', funcs_html_1.encodeLink(this.op.attributes.link)))
+                .concat(target ? makeAttr('target', target) : []);
+            if (!!this.options.linkRel && OpToHtmlConverter.IsValidRel(this.options.linkRel)) {
+                tagAttrs.push(makeAttr('rel', this.options.linkRel));
+            }
         }
         return tagAttrs;
     };
@@ -489,7 +500,8 @@ var QuillDeltaToHtmlConverter = (function () {
             multiLineBlockquote: true,
             multiLineHeader: true,
             multiLineCodeblock: true,
-            allowBackgroundClasses: false
+            allowBackgroundClasses: false,
+            linkTarget: '_blank'
         }, options, {
             orderedListTag: 'ol',
             bulletListTag: 'ul',
@@ -501,6 +513,7 @@ var QuillDeltaToHtmlConverter = (function () {
             listItemTag: this.options.listItemTag,
             paragraphTag: this.options.paragraphTag,
             linkRel: this.options.linkRel,
+            linkTarget: this.options.linkTarget,
             allowBackgroundClasses: this.options.allowBackgroundClasses
         };
         this.rawDeltaOps = deltaOps;

diff --git a/dist/commonjs/OpAttributeSanitizer.js b/dist/commonjs/OpAttributeSanitizer.js
@@ -16,7 +16,7 @@ var OpAttributeSanitizer = (function () {
             'blockquote', 'code-block'
         ];
         var colorAttrs = ['background', 'color'];
-        var font = dirtyAttrs.font, size = dirtyAttrs.size, link = dirtyAttrs.link, script = dirtyAttrs.script, list = dirtyAttrs.list, header = dirtyAttrs.header, align = dirtyAttrs.align, direction = dirtyAttrs.direction, indent = dirtyAttrs.indent, mentions = dirtyAttrs.mentions, mention = dirtyAttrs.mention, width = dirtyAttrs.width;
+        var font = dirtyAttrs.font, size = dirtyAttrs.size, link = dirtyAttrs.link, script = dirtyAttrs.script, list = dirtyAttrs.list, header = dirtyAttrs.header, align = dirtyAttrs.align, direction = dirtyAttrs.direction, indent = dirtyAttrs.indent, mentions = dirtyAttrs.mentions, mention = dirtyAttrs.mention, width = dirtyAttrs.width, target = dirtyAttrs.target;
         var sanitizedAttrs = booleanAttrs.concat(colorAttrs, ['font', 'size', 'link', 'script', 'list', 'header', 'align',
             'direction', 'indent', 'mentions', 'mention', 'width']);
         booleanAttrs.forEach(function (prop) {
@@ -44,6 +44,9 @@ var OpAttributeSanitizer = (function () {
         if (link) {
             cleanAttrs.link = (link + '')._scrubUrl();
         }
+        if (target && OpAttributeSanitizer.isValidTarget(target)) {
+            cleanAttrs.target = target;
+        }
         if (script === value_types_1.ScriptType.Sub || value_types_1.ScriptType.Super === script) {
             cleanAttrs.script = script;
         }
@@ -92,6 +95,9 @@ var OpAttributeSanitizer = (function () {
     OpAttributeSanitizer.IsValidWidth = function (width) {
         return !!width.match(/^[0-9]*(px|em|%)?$/);
     };
+    OpAttributeSanitizer.isValidTarget = function (target) {
+        return !!target.match(/^[_a-zA-Z0-9\-]{1,50}$/);
+    };
     return OpAttributeSanitizer;
 }());
 exports.OpAttributeSanitizer = OpAttributeSanitizer;
diff --git a/dist/commonjs/OpToHtmlConverter.js b/dist/commonjs/OpToHtmlConverter.js
@@ -121,11 +121,16 @@ var OpToHtmlConverter = (function () {
         tagAttrs = tagAttrs
             .concat(styleAttr)
             .concat(this.op.isLink() ? [
-            makeAttr('href', funcs_html_1.encodeLink(this.op.attributes.link)),
-            makeAttr('target', '_blank')
+            makeAttr('href', funcs_html_1.encodeLink(this.op.attributes.link))
         ] : []);
-        if (this.op.isLink() && !!this.options.linkRel && OpToHtmlConverter.IsValidRel(this.options.linkRel)) {
-            tagAttrs.push(makeAttr('rel', this.options.linkRel));
+        if (this.op.isLink()) {
+            var target = this.op.attributes.target || this.options.linkTarget;
+            tagAttrs = tagAttrs
+                .concat(makeAttr('href', funcs_html_1.encodeLink(this.op.attributes.link)))
+                .concat(target ? makeAttr('target', target) : []);
+            if (!!this.options.linkRel && OpToHtmlConverter.IsValidRel(this.options.linkRel)) {
+                tagAttrs.push(makeAttr('rel', this.options.linkRel));
+            }
         }
         return tagAttrs;
     };

diff --git a/dist/commonjs/QuillDeltaToHtmlConverter.js b/dist/commonjs/QuillDeltaToHtmlConverter.js
@@ -20,7 +20,8 @@ var QuillDeltaToHtmlConverter = (function () {
             multiLineBlockquote: true,
             multiLineHeader: true,
             multiLineCodeblock: true,
-            allowBackgroundClasses: false
+            allowBackgroundClasses: false,
+            linkTarget: '_blank'
         }, options, {
             orderedListTag: 'ol',
             bulletListTag: 'ul',
@@ -32,6 +33,7 @@ var QuillDeltaToHtmlConverter = (function () {
             listItemTag: this.options.listItemTag,
             paragraphTag: this.options.paragraphTag,
             linkRel: this.options.linkRel,
+            linkTarget: this.options.linkTarget,
             allowBackgroundClasses: this.options.allowBackgroundClasses
         };
         this.rawDeltaOps = deltaOps;

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "quill-delta-to-html",
-  "version": "0.7.2",
+  "version": "0.8.0",
   "description": "Converts Quill's delta ops to HTML",
   "main": "dist/commonjs/main.js",
   "dependencies": {},

diff --git a/src/OpAttributeSanitizer.ts b/src/OpAttributeSanitizer.ts
@@ -29,7 +29,8 @@ interface IOpAttributes {
    indent?: number,
 
    mentions?: boolean,
-   mention?: IMention
+   mention?: IMention,
+   target?: string
 }
 
 class OpAttributeSanitizer {
@@ -49,7 +50,7 @@ class OpAttributeSanitizer {
       let colorAttrs = ['background', 'color'];
 
       let { font, size, link, script, list, header, align, 
-         direction, indent, mentions, mention, width
+         direction, indent, mentions, mention, width, target
       } = dirtyAttrs;
 
       let sanitizedAttrs = [...booleanAttrs, ...colorAttrs,
@@ -86,6 +87,9 @@ class OpAttributeSanitizer {
       if (link) {
          cleanAttrs.link = (link + '')._scrubUrl();
       }
+      if (target && OpAttributeSanitizer.isValidTarget(target)) {
+         cleanAttrs.target = target;
+      }
 
       if (script === ScriptType.Sub || ScriptType.Super === script) {
          cleanAttrs.script = script;
@@ -110,7 +114,7 @@ class OpAttributeSanitizer {
       if (indent && Number(indent)) {
          cleanAttrs.indent = Math.min(Number(indent), 30);
       }
-
+      
       if (mentions && mention) {
          let sanitizedMention = MentionSanitizer.sanitize(mention);
          if (Object.keys(sanitizedMention).length > 0) {
@@ -144,7 +148,11 @@ class OpAttributeSanitizer {
    }
 
    static IsValidWidth(width: string) {
-    return !!width.match(/^[0-9]*(px|em|%)?$/)
+      return !!width.match(/^[0-9]*(px|em|%)?$/)
+   }
+
+   static isValidTarget(target: string) {
+      return !!target.match(/^[_a-zA-Z0-9\-]{1,50}$/);
    }
 }