Clear old attributes in initClasses

3 years ago · 18063bb854
2 changed files with 8 additions and 5 deletions
--- a/src/dom_components/model/Component.ts
+++ b/src/dom_components/model/Component.ts
@ -989,9 +989,9 @@ 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);
@ -999,6 +999,8 @@ export default class Component extends StyleableModel<ComponentProperties> {
    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;
--- a/test/specs/grapesjs/headless.ts
+++ b/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' }],