fix(paste): handle pasteConfig with tag names specified in upper case (#2217)

* toLower case added

* regression test case added

* change log update

* version updated

* Apply suggestions from code review

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

* Update docs/CHANGELOG.md

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

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

docs/CHANGELOG.md

@@ -1,5 +1,8 @@
 # Changelog
 
+### 2.26.3
+
+- `Fix` — *Paste Module* — fix for a problem with specifying of `pasteConfig().tags` in upper case  [#2208](https://github.com/codex-team/editor.js/issues/2208).
 
 ### 2.26.2
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@editorjs/editorjs",
-  "version": "2.26.2",
+  "version": "2.26.3",
   "description": "Editor.js — Native JS, based on API and Open Source",
   "main": "dist/editor.js",
   "types": "./types/index.d.ts",

src/components/modules/paste.ts

@@ -639,7 +639,7 @@ export default class Paste extends Module {
           tags.forEach((tag) => {
             const sanitizationConfig = _.isObject(tagOrSanitizeConfig) ? tagOrSanitizeConfig[tag] : null;
 
-            result[tag] = sanitizationConfig || {};
+            result[tag.toLowerCase()] = sanitizationConfig || {};
           });
 
           return result;

test/cypress/tests/api/tools.spec.ts

@@ -526,6 +526,79 @@ describe('Editor Tools Api', () => {
           });
       });
 
+      /**
+       * tags: ['OL','LI',]
+       * -><ol>
+       * <li></li>
+       * <li></li>
+       * </ol>
+       */
+      it('should sanitize all attributes from tags, even if tag names specified in uppercase', () => {
+        /**
+         * Variable used for spying the pasted element we are passing to the Tool
+         */
+        let pastedElement;
+
+        /**
+         * Test tool with pasteConfig.tags specified
+         */
+        class TestListTool {
+          /** config specified handled tag */
+          public static get pasteConfig(): PasteConfig {
+            return {
+              tags: ['OL', 'LI'], // tag names specified in upper case
+            };
+          }
+
+          /** onPaste callback will be stubbed below */
+          public onPaste(): void { }
+
+          /** save is required for correct implementation of the BlockTool class */
+          public save(): void { }
+
+          /** render is required for correct implementation of the BlockTool class */
+          public render(): HTMLElement {
+            return document.createElement('ol');
+          }
+        }
+
+        /**
+         * Stub the onPaste method to access the PasteEvent data for assertion
+         */
+        cy.stub(TestListTool.prototype, 'onPaste').callsFake((event: HTMLPasteEvent) => {
+          pastedElement = event.detail.data;
+        });
+
+        cy.createEditor({
+          tools: {
+            testListTool: TestListTool,
+          },
+        });
+
+        cy.get('[data-cy=editorjs]')
+          .get('div.ce-block')
+          .click()
+          .paste({
+            // eslint-disable-next-line @typescript-eslint/naming-convention
+            'text/html': '<ol start="50"><li>Orderd List</li><li>Unorderd List</li></ol>', // all attributes should be sanitized, <li> should be preserved
+          })
+          .then(() => {
+            expect(pastedElement).not.to.be.undefined;
+            expect(pastedElement.tagName.toLowerCase()).eq('ol');
+            expect(pastedElement.attributes.length).eq(0);
+            // check number of children
+            expect(pastedElement.children.length).eq(2);
+
+            /**
+             * Check that all children are <li> tags
+             */
+            pastedElement.childNodes.forEach((child) => {
+              expect(child.tagName.toLowerCase()).eq('li');
+              expect(child.attributes.length).eq(0);
+            });
+          });
+      });
+
       /**
        * tags: [{
        *   img: {
@@ -644,7 +717,7 @@ describe('Editor Tools Api', () => {
 
           /** render is required for correct implementation of the BlockTool class */
           public render(): HTMLElement {
-            return document.createElement('tbody');
+            return document.createElement('video');
           }
         }
 
@@ -728,7 +801,7 @@ describe('Editor Tools Api', () => {
 
           /** render is required for correct implementation of the BlockTool class */
           public render(): HTMLElement {
-            return document.createElement('tbody');
+            return document.createElement('video');
           }
         }