refactoring(modules): sanitizer module is util now

docs/CHANGELOG.md

@@ -2,6 +2,9 @@
 
 ### 2.20.1
 
+
+- `Fix` — Fix sanitisation problem with Inline Tools [#1631](https://github.com/codex-team/editor.js/issues/1631)
+- `Refactoring` - The Sanitizer module is util now.
 - `Refactoring` - Tooltip module is util now.
 
 ### 2.20.0
@@ -15,7 +18,7 @@
 
 ### 2.19.2
 
-- `New` -  `toolbar.toggleBlockSettings()` API method added [#1442](https://github.com/codex-team/editor.js/issues/1421).
+- `New` - `toolbar.toggleBlockSettings()` API method added [#1442](https://github.com/codex-team/editor.js/issues/1421).
 - `Improvements` - A generic type for Tool config added [#1516](https://github.com/codex-team/editor.js/issues/1516)
 - `Improvements` - Remove unused `force` option in `Caret.navigateNext()` and `Caret.navigatePrevious()` [#857](https://github.com/codex-team/editor.js/issues/857#issuecomment-770363438).
 - `Improvements` - Remove bundles from the repo [#1541](https://github.com/codex-team/editor.js/pull/1541).
@@ -33,6 +36,7 @@
 - `Refactoring` - Shortcuts module is util now.
 - `Fix` - Fix bubbling on BlockManagers' listener [#1433](https://github.com/codex-team/editor.js/issues/1433).
 
+
 ### 2.19.1
 
 - `Improvements` - The [Cypress](https://www.cypress.io) was integrated as the end-to-end testing framework

package.json

@@ -54,6 +54,7 @@
     "css-loader": "^3.5.3",
     "cssnano": "^4.1.10",
     "cypress": "^6.8.0",
+    "cypress-intellij-reporter": "^0.0.6",
     "eslint": "^6.8.0",
     "eslint-config-codex": "^1.3.3",
     "eslint-loader": "^4.0.2",

src/components/block/index.ts

@@ -45,11 +45,6 @@ interface BlockConstructorOptions {
    */
   readOnly: boolean;
 
-  /**
-   * Tunes for current Block
-   */
-  tunes: ToolsCollection<BlockTune>;
-
   /**
    * Tunes data for current Block
    */
@@ -224,7 +219,6 @@ export default class Block {
     tool,
     api,
     readOnly,
-    tunes,
     tunesData,
   }: BlockConstructorOptions) {
     this.name = tool.name;
@@ -241,7 +235,7 @@ export default class Block {
     /**
      * @type {BlockTune[]}
      */
-    this.tunes = tunes;
+    this.tunes = tool.tunes;
 
     this.composeTunes(tunesData);
 

src/components/modules/api/sanitizer.ts

@@ -1,6 +1,7 @@
-import { Sanitizer } from '../../../../types/api';
+import { Sanitizer as ISanitizer } from '../../../../types/api';
 import { SanitizerConfig } from '../../../../types/configs';
 import Module from '../../__module';
+import { clean } from '../../utils/sanitizer';
 
 /**
  * @class SanitizerAPI
@@ -12,7 +13,7 @@ export default class SanitizerAPI extends Module {
    *
    * @returns {Sanitizer}
    */
-  public get methods(): Sanitizer {
+  public get methods(): ISanitizer {
     return {
       clean: (taintString, config): string => this.clean(taintString, config),
     };
@@ -27,6 +28,6 @@ export default class SanitizerAPI extends Module {
    * @returns {string}
    */
   public clean(taintString: string, config: SanitizerConfig): string {
-    return this.Editor.Sanitizer.clean(taintString, config);
+    return clean(taintString, config);
   }
 }

src/components/modules/blockManager.ts

@@ -227,13 +227,11 @@ export default class BlockManager extends Module {
   }: {tool: string; data?: BlockToolData; tunes?: {[name: string]: BlockTuneData}}): Block {
     const readOnly = this.Editor.ReadOnly.isEnabled;
     const tool = this.Editor.Tools.blockTools.get(name);
-    const tunes = this.Editor.Tools.getTunesForTool(tool);
     const block = new Block({
       data,
       tool,
       api: this.Editor.API,
       readOnly,
-      tunes,
       tunesData,
     });
 

src/components/modules/blockSelection.ts

@@ -13,6 +13,7 @@ import Shortcuts from '../utils/shortcuts';
 
 import SelectionUtils from '../selection';
 import { SanitizerConfig } from '../../../types/configs';
+import { clean } from '../utils/sanitizer';
 
 /**
  *
@@ -297,7 +298,7 @@ export default class BlockSelection extends Module {
       /**
        * Make <p> tag that holds clean HTML
        */
-      const cleanHTML = this.Editor.Sanitizer.clean(block.holder.innerHTML, this.sanitizerConfig);
+      const cleanHTML = clean(block.holder.innerHTML, this.sanitizerConfig);
       const fragment = $.make('p');
 
       fragment.innerHTML = cleanHTML;

src/components/modules/paste.ts

@@ -8,6 +8,7 @@ import {
 } from '../../../types';
 import Block from '../block';
 import { SavedData } from '../../../types/data-formats';
+import { clean, sanitizeBlocks } from '../utils/sanitizer';
 import BlockTool from '../tools/block';
 
 /**
@@ -158,8 +159,7 @@ export default class Paste extends Module {
    * @param {boolean} isDragNDrop - true if data transfer comes from drag'n'drop events
    */
   public async processDataTransfer(dataTransfer: DataTransfer, isDragNDrop = false): Promise<void> {
-    const { Sanitizer } = this.Editor;
-
+    const { Tools } = this.Editor;
     const types = dataTransfer.types;
 
     /**
@@ -203,9 +203,8 @@ export default class Paste extends Module {
       return result;
     }, {});
 
-    const customConfig = Object.assign({}, toolsTags, Sanitizer.getAllInlineToolsConfig(), { br: {} });
-
-    const cleanData = Sanitizer.clean(htmlData, customConfig);
+    const customConfig = Object.assign({}, toolsTags, Tools.getAllInlineToolsSanitizeConfig(), { br: {} });
+    const cleanData = clean(htmlData, customConfig);
 
     /** If there is no HTML or HTML string is equal to plain one, process it as plain text */
     if (!cleanData.trim() || cleanData.trim() === plainData || !$.isHTMLString(cleanData)) {
@@ -515,7 +514,7 @@ export default class Paste extends Module {
    * @returns {PasteData[]}
    */
   private processHTML(innerHTML: string): PasteData[] {
-    const { Tools, Sanitizer } = this.Editor;
+    const { Tools } = this.Editor;
     const wrapper = $.make('DIV');
 
     wrapper.innerHTML = innerHTML;
@@ -551,9 +550,9 @@ export default class Paste extends Module {
 
           return result;
         }, {});
-        const customConfig = Object.assign({}, toolTags, Sanitizer.getInlineToolsConfig(tool));
+        const customConfig = Object.assign({}, toolTags, tool.baseSanitizeConfig);
 
-        content.innerHTML = Sanitizer.clean(content.innerHTML, customConfig);
+        content.innerHTML = clean(content.innerHTML, customConfig);
 
         const event = this.composePasteEvent('tag', {
           data: content,
@@ -640,7 +639,7 @@ export default class Paste extends Module {
    * @param {PasteData} dataToInsert - data of Block to insert
    */
   private async processInlinePaste(dataToInsert: PasteData): Promise<void> {
-    const { BlockManager, Caret, Sanitizer } = this.Editor;
+    const { BlockManager, Caret, Tools } = this.Editor;
     const { content } = dataToInsert;
 
     const currentBlockIsDefault = BlockManager.currentBlock && BlockManager.currentBlock.tool.isDefault;
@@ -663,12 +662,12 @@ export default class Paste extends Module {
 
     /** If there is no pattern substitute - insert string as it is */
     if (BlockManager.currentBlock && BlockManager.currentBlock.currentInput) {
-      const currentToolSanitizeConfig = Sanitizer.getInlineToolsConfig(BlockManager.currentBlock.tool);
+      const currentToolSanitizeConfig = BlockManager.currentBlock.tool.sanitizeConfig;
 
       document.execCommand(
         'insertHTML',
         false,
-        Sanitizer.clean(content.innerHTML, currentToolSanitizeConfig)
+        clean(content.innerHTML, currentToolSanitizeConfig)
       );
     } else {
       this.insertBlock(dataToInsert);
@@ -741,8 +740,10 @@ export default class Paste extends Module {
    * @returns {void}
    */
   private insertEditorJSData(blocks: Pick<SavedData, 'data' | 'tool'>[]): void {
-    const { BlockManager, Caret, Sanitizer } = this.Editor;
-    const sanitizedBlocks = Sanitizer.sanitizeBlocks(blocks);
+    const { BlockManager, Caret, Tools } = this.Editor;
+    const sanitizedBlocks = sanitizeBlocks(blocks, (name) =>
+      Tools.blockTools.get(name).sanitizeConfig
+    );
 
     sanitizedBlocks.forEach(({ tool, data }, i) => {
       let needToReplaceCurrentBlock = false;