diff --git a/src/dom_components/view/ComponentView.js b/src/dom_components/view/ComponentView.js
index 918ca8dfa..feec1dd90 100644
--- a/src/dom_components/view/ComponentView.js
+++ b/src/dom_components/view/ComponentView.js
@@ -1,4 +1,4 @@
-import { isArray } from 'underscore';
+import { isArray, isEmpty } from 'underscore';
const ComponentsView = require('./ComponentsView');
@@ -151,7 +151,8 @@ module.exports = Backbone.View.extend({
if (em && em.get('avoidInlineStyle')) {
this.el.id = model.getId();
- model.setStyle(model.getStyle());
+ const style = model.getStyle();
+ !isEmpty(style) && model.setStyle(style);
} else {
this.setAttribute('style', model.styleToString());
}
diff --git a/test/specs/grapesjs/index.js b/test/specs/grapesjs/index.js
index f7869c951..303527a15 100644
--- a/test/specs/grapesjs/index.js
+++ b/test/specs/grapesjs/index.js
@@ -28,6 +28,7 @@ describe('GrapesJS', () => {
});
beforeEach(() => {
+ storage = {};
htmlString = '
';
cssString = '.test2{color:red}.test3{color:blue}';
documentEl = '' + htmlString;
@@ -40,11 +41,18 @@ describe('GrapesJS', () => {
}
};
obj = grapesjs;
- //fixture = $('');
- //fixture.empty().appendTo(fixtures);
-
document.body.innerHTML = ``;
fixtures = document.body.querySelector('#fixtures');
+ fixture = document.body.querySelector(`#${editorName}`);
+ });
+
+ afterEach(() => {
+ var plugins = obj.plugins.getAll();
+ for (let id in plugins) {
+ if (plugins.hasOwnProperty(id)) {
+ delete plugins[id];
+ }
+ }
});
it('Main object should be loaded', () => {
@@ -197,13 +205,13 @@ describe('GrapesJS', () => {
});
it.skip('Adds new storage as plugin and store data there', done => {
- var pluginName = storageId + '-plugin';
- obj.plugins.add(pluginName, edt => {
- edt.StorageManager.add(storageId, storageMock);
- });
+ const pluginName = storageId + '-p2';
+ obj.plugins.add(pluginName, e =>
+ e.StorageManager.add(storageId, storageMock)
+ );
config.storageManager.type = storageId;
config.plugins = [pluginName];
- var editor = obj.init(config);
+ const editor = obj.init(config);
editor.setComponents(htmlString);
editor.store(() => {
editor.load(data => {
@@ -213,6 +221,45 @@ describe('GrapesJS', () => {
});
});
+ it('Adds a new storage and fetch correctly data from it', done => {
+ fixture.innerHTML = documentEl;
+ const styleResult = { color: 'white', display: 'block' };
+ const style = [
+ {
+ selectors: [{ name: 'sclass1' }],
+ style: { color: 'green' }
+ },
+ {
+ selectors: [{ name: 'test2' }],
+ style: styleResult
+ },
+ {
+ selectors: [{ name: 'test3' }],
+ style: { color: 'black', display: 'block' }
+ }
+ ];
+ storage = {
+ css: '* { box-sizing: border-box; } body {margin: 0;}',
+ styles: JSON.stringify(style)
+ };
+
+ const pluginName = storageId + '-p';
+ obj.plugins.add(pluginName, e =>
+ e.StorageManager.add(storageId, storageMock)
+ );
+ config.fromElement = 1;
+ config.storageManager.type = storageId;
+ config.plugins = [pluginName];
+ config.storageManager.autoload = 1;
+ const editor = obj.init(config);
+ editor.on('load', () => {
+ const cc = editor.CssComposer;
+ expect(cc.getAll().length).toEqual(style.length);
+ // expect(cc.setClassRule('test2').getStyle()).toEqual(styleResult);
+ done();
+ });
+ });
+
it('Execute plugins with custom options', () => {
var pluginName = storageId + '-plugin-opts';
obj.plugins.add(pluginName, (edt, opts) => {