Clear old attributes in initClasses

crupko93 · Sep 1, 2023 · 18063bb · 18063bb
1 parent 793599c
commit 18063bb
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 5 deletions.
diff --git a/src/dom_components/model/Component.ts b/src/dom_components/model/Component.ts
@@ -989,16 +989,18 @@ export default class Component extends StyleableModel<ComponentProperties> {
 
   initClasses(m?: any, c?: any, opts: any = {}) {
     const event = 'change:classes';
-    const attrCls = this.get('attributes')!.class || [];
+    const { class: attrCls, ...restAttr } = this.get('attributes') || {};
     const toListen = [this, event, this.initClasses];
-    const cls = this.get('classes') || attrCls;
+    const cls = this.get('classes') || attrCls || [];
     const clsArr = isString(cls) ? cls.split(' ') : cls;
     this.stopListening(...toListen);
     const classes = this.normalizeClasses(clsArr);
     const selectors = new Selectors([]);
     this.set('classes', selectors, opts);
     selectors.add(classes);
     selectors.on('add remove reset', this.__upSymbCls);
+    // Clear attributes from classes
+    attrCls && classes.length && this.set('attributes', restAttr);
     // @ts-ignore
     this.listenTo(...toListen);
     return this;

diff --git a/test/specs/grapesjs/headless.js → test/specs/grapesjs/headless.ts b/test/specs/grapesjs/headless.js → test/specs/grapesjs/headless.ts
@@ -1,6 +1,7 @@
 /**
  * @jest-environment node
  */
+import grapesjs, { Editor } from '../../../src';
 
 describe('GrapesJS Headless', () => {
   test('Can init and destroy an editor', () => {
@@ -10,12 +11,12 @@ describe('GrapesJS Headless', () => {
   });
 
   describe('Headless operations', () => {
-    let editor;
+    let editor: Editor;
     const cmpObj = {
-      attributes: { class: 'cls', test: 'value' },
+      attributes: { test: 'value', class: 'cls' },
       components: { type: 'textnode', content: 'Test' },
     };
-    const cmpStr = '<div class="cls" test="value">Test</div>';
+    const cmpStr = '<div test="value" class="cls">Test</div>';
     const fullHtml = `<body>${cmpStr}</body>`;
     const styleObj = {
       selectors: [{ name: 'cls' }],