From 18063bb8544af3c7ebcb8c5a6e74929731530a78 Mon Sep 17 00:00:00 2001 From: Artur Arseniev Date: Fri, 1 Sep 2023 22:50:51 +0400 Subject: [PATCH] Clear old attributes in initClasses --- src/dom_components/model/Component.ts | 6 ++++-- test/specs/grapesjs/{headless.js => headless.ts} | 7 ++++--- 2 files changed, 8 insertions(+), 5 deletions(-) rename test/specs/grapesjs/{headless.js => headless.ts} (95%) diff --git a/src/dom_components/model/Component.ts b/src/dom_components/model/Component.ts index e1060f9b9..eab0b0f0b 100644 --- a/src/dom_components/model/Component.ts +++ b/src/dom_components/model/Component.ts @@ -989,9 +989,9 @@ export default class Component extends StyleableModel { 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 { 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 b/test/specs/grapesjs/headless.ts similarity index 95% rename from test/specs/grapesjs/headless.js rename to test/specs/grapesjs/headless.ts index a697c20f7..2658ec50f 100644 --- a/test/specs/grapesjs/headless.js +++ 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 = '
Test
'; + const cmpStr = '
Test
'; const fullHtml = `${cmpStr}`; const styleObj = { selectors: [{ name: 'cls' }],