fix(tools-api): pasteConfig.tags now supports a sanitize config

src/components/dom.ts

@@ -53,7 +53,7 @@ export default class Dom {
    *
    * @returns {HTMLElement}
    */
-  public static make(tagName: string, classNames: string|string[] = null, attributes: object = {}): HTMLElement {
+  public static make(tagName: string, classNames: string | string[] = null, attributes: object = {}): HTMLElement {
     const el = document.createElement(tagName);
 
     if (Array.isArray(classNames)) {
@@ -109,8 +109,8 @@ export default class Dom {
    * @param  {Element|Element[]|DocumentFragment|Text|Text[]} elements - element or elements list
    */
   public static append(
-    parent: Element|DocumentFragment,
-    elements: Element|Element[]|DocumentFragment|Text|Text[]
+    parent: Element | DocumentFragment,
+    elements: Element | Element[] | DocumentFragment | Text | Text[]
   ): void {
     if (Array.isArray(elements)) {
       elements.forEach((el) => parent.appendChild(el));
@@ -125,7 +125,7 @@ export default class Dom {
    * @param {Element} parent - where to append
    * @param {Element|Element[]} elements - element or elements list
    */
-  public static prepend(parent: Element, elements: Element|Element[]): void {
+  public static prepend(parent: Element, elements: Element | Element[]): void {
     if (Array.isArray(elements)) {
       elements = elements.reverse();
       elements.forEach((el) => parent.prepend(el));
@@ -168,7 +168,7 @@ export default class Dom {
    *
    * @returns {Element}
    */
-  public static find(el: Element|Document = document, selector: string): Element {
+  public static find(el: Element | Document = document, selector: string): Element {
     return el.querySelector(selector);
   }
 
@@ -192,7 +192,7 @@ export default class Dom {
    *
    * @returns {NodeList}
    */
-  public static findAll(el: Element|Document = document, selector: string): NodeList {
+  public static findAll(el: Element | Document = document, selector: string): NodeList {
     return el.querySelectorAll(selector);
   }
 
@@ -619,7 +619,7 @@ export default class Dom {
    * @todo handle case when editor initialized in scrollable popup
    * @param el - element to compute offset
    */
-  public static offset(el): {top: number; left: number; right: number; bottom: number} {
+  public static offset(el): { top: number; left: number; right: number; bottom: number } {
     const rect = el.getBoundingClientRect();
     const scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;
     const scrollTop = window.pageYOffset || document.documentElement.scrollTop;

src/components/modules/paste.ts

@@ -20,6 +20,11 @@ interface TagSubstitute {
    *
    */
   tool: BlockTool;
+  /**
+   * Paste Sanitization configuration
+   *
+   */
+  sanitizationConfig?: object;
 }
 
 /**
@@ -112,12 +117,12 @@ export default class Paste extends Module {
   /**
    * Tags` substitutions parameters
    */
-  private toolsTags: {[tag: string]: TagSubstitute} = {};
+  private toolsTags: { [tag: string]: TagSubstitute } = {};
 
   /**
    * Store tags to substitute by tool name
    */
-  private tagsByTool: {[tools: string]: string[]} = {};
+  private tagsByTool: { [tools: string]: string[] } = {};
 
   /** Patterns` substitutions parameters */
   private toolsPatterns: PatternSubstitute[] = [];
@@ -186,7 +191,7 @@ export default class Paste extends Module {
         this.insertEditorJSData(JSON.parse(editorJSData));
 
         return;
-      } catch (e) {} // Do nothing and continue execution as usual if error appears
+      } catch (e) { } // Do nothing and continue execution as usual if error appears
     }
 
     /**
@@ -195,10 +200,16 @@ export default class Paste extends Module {
     if (isDragNDrop && plainData.trim() && htmlData.trim()) {
       htmlData = '<p>' + (htmlData.trim() ? htmlData : plainData) + '</p>';
     }
-
     /** Add all tags that can be substituted to sanitizer configuration */
     const toolsTags = Object.keys(this.toolsTags).reduce((result, tag) => {
-      result[tag.toLowerCase()] = true;
+      /**
+       * Check if sanitizer configuration for this tag is defined.
+       */
+      if (this.toolsTags[tag].sanitizationConfig) {
+        result[tag.toLowerCase()] = this.toolsTags[tag].sanitizationConfig;
+      } else {
+        result[tag.toLowerCase()] = true;
+      }
 
       return result;
     }, {});
@@ -324,13 +335,31 @@ export default class Paste extends Module {
 
         return;
       }
-
-      this.toolsTags[tag.toUpperCase()] = {
-        tool,
-      };
+      /** Sanitization configuration is string */
+      if (_.isString(tag)) {
+        this.toolsTags[tag.toUpperCase()] = {
+          tool,
+        };
+      }
+      /** Sanitization configuration is object */
+      if (_.isObject(tag)) {
+        this.toolsTags[Object.keys(tag)[0].toUpperCase()] = {
+          tool,
+          sanitizationConfig: tag[Object.keys(tag)[0]],
+        };
+      }
     });
 
-    this.tagsByTool[tool.name] = tags.map((t) => t.toUpperCase());
+    this.tagsByTool[tool.name] = tags.map((t) => {
+      /** Sanitization configuration is string */
+      if (_.isString(t)) {
+        return t.toUpperCase();
+      }
+      /** Sanitization configuration is object */
+      if (_.isObject(t)) {
+        return Object.keys(t)[0].toUpperCase();
+      }
+    });
   }
 
   /**
@@ -449,7 +478,7 @@ export default class Paste extends Module {
   private async processFiles(items: FileList): Promise<void> {
     const { BlockManager } = this.Editor;
 
-    let dataToInsert: {type: string; event: PasteEvent}[];
+    let dataToInsert: { type: string; event: PasteEvent }[];
 
     dataToInsert = await Promise.all(
       Array
@@ -473,12 +502,12 @@ export default class Paste extends Module {
    *
    * @param {File} file - file to process
    */
-  private async processFile(file: File): Promise<{event: PasteEvent; type: string}> {
+  private async processFile(file: File): Promise<{ event: PasteEvent; type: string }> {
     const extension = _.getFileExtension(file);
 
     const foundConfig = Object
       .entries(this.toolsFiles)
-      .find(([toolName, { mimeTypes, extensions } ]) => {
+      .find(([toolName, { mimeTypes, extensions }]) => {
         const [fileType, fileSubtype] = file.type.split('/');
 
         const foundExt = extensions.find((ext) => ext.toLowerCase() === extension.toLowerCase());
@@ -495,7 +524,7 @@ export default class Paste extends Module {
       return;
     }
 
-    const [ tool ] = foundConfig;
+    const [tool] = foundConfig;
     const pasteEvent = this.composePasteEvent('file', {
       file,
     });
@@ -546,7 +575,14 @@ export default class Paste extends Module {
         const { tags } = tool.pasteConfig;
 
         const toolTags = tags.reduce((result, tag) => {
-          result[tag.toLowerCase()] = {};
+          /** Sanitization configuration is string */
+          if (_.isString(tag)) {
+            result[tag.toLowerCase()] = {};
+          }
+          /** Sanitization configuration is object */
+          if (_.isObject(tag)) {
+            result[Object.keys(tag)[0].toUpperCase()] = tag[Object.keys(tag)[0]];
+          }
 
           return result;
         }, {});
@@ -576,7 +612,7 @@ export default class Paste extends Module {
    * @returns {PasteData[]}
    */
   private processPlain(plain: string): PasteData[] {
-    const { defaultBlock } = this.config as {defaultBlock: string};
+    const { defaultBlock } = this.config as { defaultBlock: string };
 
     if (!plain) {
       return [];
@@ -681,7 +717,7 @@ export default class Paste extends Module {
    *
    * @returns {Promise<{event: PasteEvent, tool: string}>}
    */
-  private async processPattern(text: string): Promise<{event: PasteEvent; tool: string}> {
+  private async processPattern(text: string): Promise<{ event: PasteEvent; tool: string }> {
     const pattern = this.toolsPatterns.find((substitute) => {
       const execResult = substitute.pattern.exec(text);