tsai
/
grapesjs
mirror of https://github.com/artf/grapesjs.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Update style rules instead of overwriting them. Fixes #6502

fix-style-rule-merge
Artur Arseniev 9 months ago
parent
51fe5d909c
commit
831a23e0d8
2 changed files with 49 additions and 4 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 5
      packages/core/src/dom_components/model/Component.ts
  2. 48
      packages/core/test/specs/dom_components/index.ts

5
packages/core/src/dom_components/model/Component.ts
View File

@ -777,7 +777,7 @@ export default class Component extends StyleableModel<ComponentProperties> {
const dynamicAttributes = this.dataResolverWatchers.getDynamicAttributesDefs(); const dynamicAttributes = this.dataResolverWatchers.getDynamicAttributesDefs();
return this.setAttributes( return this.setAttributes(
{ {
...this.getAttributes({ noClass: true }), ...this.getAttributes({ noClass: true, noStyle: true }),
...dynamicAttributes, ...dynamicAttributes,
...attrs, ...attrs,
}, },
@ -847,7 +847,8 @@ export default class Component extends StyleableModel<ComponentProperties> {
const state = em.get('state'); const state = em.get('state');
const cc = em.Css; const cc = em.Css;
const propOrig = this.getStyle(opts); 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); const diff = shallowDiff(propOrig, prop);
this.set('style', '', { silent: true }); this.set('style', '', { silent: true });
keys(diff).forEach((pr) => this.trigger(`change:style:${pr}`)); keys(diff).forEach((pr) => this.trigger(`change:style:${pr}`));

48
packages/core/test/specs/dom_components/index.ts
View File

@ -48,7 +48,6 @@ describe('DOM Components', () => {
var setEm = () => { var setEm = () => {
config.em = editorModel; config.em = editorModel;
}; };
const createSymbol = (component: Component) => obj.addSymbol(component)!;
beforeEach(() => { beforeEach(() => {
const editor = new Editor({ const editor = new Editor({
@ -122,7 +121,25 @@ describe('DOM Components', () => {
expect(obj.getComponents().length).toEqual(2); 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(
`<div id="${id}" style="color:red; padding: 50px 100px">Text</div>`,
) as Component;
expect(em.getHtml({ component })).toEqual(`<div id="${id}">Text</div>`);
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; obj = em.Components;
const cc = em.Css; const cc = em.Css;
const id = 'idtest'; const id = 'idtest';
@ -406,6 +423,33 @@ describe('DOM Components', () => {
editor.destroy(); editor.destroy();
}); });
test('Import components and styles with the same ids', () => {
const id = 'idtest';
const { Components, Css } = editor;
const component = Components.addComponent(`
<div id="${id}" style="color:red; padding: 50px 100px">Text</div>
<style>
#${id} {
background-color: red;
color: blue;
}
</style>`) as Component;
expect(component.getAttributes()).toEqual({ id });
expect(em.getHtml({ component })).toEqual(`<div id="${id}">Text</div>`);
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', () => { describe('render components with asDocument', () => {
const docHtml = ` const docHtml = `
<!DOCTYPE html> <!DOCTYPE html>

Write Preview
Loading…
Cancel
Save