diff --git a/packages/core/src/dom_components/model/Component.ts b/packages/core/src/dom_components/model/Component.ts index ffaff45ed..149725246 100644 --- a/packages/core/src/dom_components/model/Component.ts +++ b/packages/core/src/dom_components/model/Component.ts @@ -777,7 +777,7 @@ export default class Component extends StyleableModel { const dynamicAttributes = this.dataResolverWatchers.getDynamicAttributesDefs(); return this.setAttributes( { - ...this.getAttributes({ noClass: true }), + ...this.getAttributes({ noClass: true, noStyle: true }), ...dynamicAttributes, ...attrs, }, @@ -847,7 +847,8 @@ export default class Component extends StyleableModel { const state = em.get('state'); const cc = em.Css; const propOrig = this.getStyle(opts); - this.rule = cc.setIdRule(this.getId(), prop, { state, ...opts }); + const newStyle = { ...propOrig, ...prop }; + this.rule = cc.setIdRule(this.getId(), newStyle, { state, ...opts }); const diff = shallowDiff(propOrig, prop); this.set('style', '', { silent: true }); keys(diff).forEach((pr) => this.trigger(`change:style:${pr}`)); diff --git a/packages/core/test/specs/dom_components/index.ts b/packages/core/test/specs/dom_components/index.ts index 152139b0e..3cd5c0c69 100644 --- a/packages/core/test/specs/dom_components/index.ts +++ b/packages/core/test/specs/dom_components/index.ts @@ -48,7 +48,6 @@ describe('DOM Components', () => { var setEm = () => { config.em = editorModel; }; - const createSymbol = (component: Component) => obj.addSymbol(component)!; beforeEach(() => { const editor = new Editor({ @@ -122,7 +121,25 @@ describe('DOM Components', () => { expect(obj.getComponents().length).toEqual(2); }); - test('Import propertly components and styles with the same ids', () => { + test('Import properly component with styles', () => { + const id = 'idtest'; + const { Css, Components } = em; + const component = Components.addComponent( + `
Text
`, + ) as Component; + expect(em.getHtml({ component })).toEqual(`
Text
`); + expect(Components.getComponents().length).toEqual(1); + const firstComp = Components.getComponents().first(); + firstComp.addStyle({ margin: '10px' }); + expect(Css.getAll().length).toEqual(1); + expect(Css.getIdRule(id)!.getStyle()).toEqual({ + color: 'red', + padding: '50px 100px', + margin: '10px', + }); + }); + + test('Import properly components and styles with the same ids', () => { obj = em.Components; const cc = em.Css; const id = 'idtest'; @@ -406,6 +423,33 @@ describe('DOM Components', () => { editor.destroy(); }); + test('Import components and styles with the same ids', () => { + const id = 'idtest'; + const { Components, Css } = editor; + const component = Components.addComponent(` +
Text
+ `) as Component; + expect(component.getAttributes()).toEqual({ id }); + expect(em.getHtml({ component })).toEqual(`
Text
`); + expect(Components.getComponents().length).toEqual(1); + const firstComp = Components.getComponents().first(); + firstComp.addStyle({ margin: '10px' }); + firstComp.addStyle('width', '100px'); + expect(Css.getAll().length).toEqual(1); + expect(Css.getIdRule(id)!.getStyle()).toEqual({ + color: 'red', + 'background-color': 'red', + padding: '50px 100px', + margin: '10px', + width: '100px', + }); + }); + describe('render components with asDocument', () => { const docHtml = `