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

* event handlers function added

* santization config added

* integrate with paste event

* lint removed

* remove old changes

* object based sanitization configuration support

* paste config updated

* logic updated

* extract tag name from paste-config

* tool tags added

* multi tag sanitization added

* the comments added

* lint removed

* Update types/configs/paste-config.d.ts

Co-authored-by: Peter Savchenko <specc.dev@gmail.com>

* update the changes

* lint removed\

* return empty array by get tags

* submoduble reset

* Update src/components/modules/paste.ts

Co-authored-by: Jorge <46056498+jorgectf@users.noreply.github.com>

* changelog added

* tool comments added

* chore: docs, code comments updated

* fix: xss in processDataTransfer

* base tests added

* test added

* rm 'only' from test suite

* rm log

* reorder test

Co-authored-by: Peter Savchenko <specc.dev@gmail.com>
Co-authored-by: Jorge <46056498+jorgectf@users.noreply.github.com>

docs/CHANGELOG.md

@@ -9,6 +9,9 @@
 - `Deprecated` — *Styles API* — CSS classes `.cdx-settings-button` and `.cdx-settings-button--active` are not recommended to use. Consider configuring your block settings with new JSON API instead.
 - `Fix` — Wrong element not highlighted anymore when popover opened.
 - `Fix` — When Tunes Menu open keydown events can not be handled inside plugins.
+- `Fix` — If a Tool specifies some tags to substitute on paste, all attributes of that tags will be removed before passing them to the tool. Possible XSS vulnerability fixed.
+- `Fix` — Workaround for the HTMLJanitor bug with Tables (https://github.com/guardian/html-janitor/issues/3) added
+- `Improvement` — *Tools API* — `pasteConfig().tags` now support sanitizing configuration. It allows you to leave some explicitly specified attributes for pasted content.
 
 ### 2.25.0
 

docs/tools.md

@@ -151,7 +151,7 @@ To handle pasted HTML elements object returned from `pasteConfig` getter should
 
 For correct work you MUST provide `onPaste` handler at least for `defaultBlock` Tool.
 
-> Example
+#### Example
 
 Header Tool can handle `H1`-`H6` tags using paste handling API
 
@@ -163,7 +163,27 @@ static get pasteConfig() {
 }
 ```
 
-> Same tag can be handled by one (first specified) Tool only.
+**Note. Same tag can be handled by one (first specified) Tool only.**
+
+**Note. All attributes of pasted tag will be removed. To leave some attribute, you should explicitly specify them. Se below**
+
+Let's suppose you want to leave the 'src' attribute when handle pasting of the `img` tags. Your config should look like this:
+
+```javascript
+static get pasteConfig() {
+  return {
+    tags: [
+      {
+        img: {
+          src: true
+        }
+      }
+    ],
+  }
+}
+```
+
+[Read more](https://editorjs.io/sanitizer) about the sanitizing configuration.
 
 ### RegExp patterns handling
 

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);
   }
 
@@ -523,6 +523,8 @@ export default class Dom {
       'ruby',
       'section',
       'table',
+      'tbody',
+      'thead',
       'tr',
       'tfoot',
       'ul',
@@ -619,7 +621,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;