diff --git a/.editorconfig b/.editorconfig new file mode 100644 index 000000000..99745b003 --- /dev/null +++ b/.editorconfig @@ -0,0 +1,10 @@ +root = true + +[*] +end_of_line = lf +insert_final_newline = true + +[*.js] +charset = utf-8 +indent_style = space +indent_size = 2 diff --git a/.gitignore b/.gitignore index 1a1b1a334..ab0e09880 100644 --- a/.gitignore +++ b/.gitignore @@ -2,7 +2,8 @@ .settings/ .sass-cache/ .project -npm-debug.log +.idea +npm-debug.log* style/.sass-cache/ img/ @@ -13,3 +14,4 @@ vendor/ coverage/ node_modules/ bower_components/ +grapesjs-*.tgz diff --git a/.npmignore b/.npmignore new file mode 100644 index 000000000..0e14b84bf --- /dev/null +++ b/.npmignore @@ -0,0 +1,4 @@ +test +index.html +webpack.config.js +grapesjs-*.tgz diff --git a/README.md b/README.md index bf70a578f..de8cbbee4 100644 --- a/README.md +++ b/README.md @@ -1,9 +1,15 @@ # [GrapesJS](http://grapesjs.com) [![Build Status](https://travis-ci.org/artf/grapesjs.svg?branch=master)](https://travis-ci.org/artf/grapesjs) +[![Chat](https://img.shields.io/badge/chat-discord-7289da.svg)](https://discord.gg/QAbgGXq)

GrapesJS

-
+ + + + Sponsor + + GrapesJS is a free and open source Web Builder Framework which helps you building HTML templates to be used inside sites, newsletters and mobile apps. Mainly GrapesJS was designed to be used inside a [CMS] to speed up a creation of dynamic templates. To better understand this concept check the image below diff --git a/src/asset_manager/view/FileUploader.js b/src/asset_manager/view/FileUploader.js index 4324984d4..c3c02feab 100644 --- a/src/asset_manager/view/FileUploader.js +++ b/src/asset_manager/view/FileUploader.js @@ -73,7 +73,7 @@ module.exports = Backbone.View.extend({ const em = this.config.em; const config = this.config; const target = this.target; - const json = typeof text === 'text' ? JSON.parse(text) : text; + const json = typeof text === 'string' ? JSON.parse(text) : text; em && em.trigger('asset:upload:response', json); if (config.autoAdd && target) { diff --git a/src/commands/index.js b/src/commands/index.js index e5d5dfab3..b0922da9a 100644 --- a/src/commands/index.js +++ b/src/commands/index.js @@ -196,15 +196,9 @@ module.exports = () => { if(c.em) c.model = c.em.get('Canvas'); - return this; - }, + this.loadDefaultCommands() - /** - * On load callback - * @private - */ - onLoad() { - this.loadDefaultCommands(); + return this; }, /** @@ -258,7 +252,7 @@ module.exports = () => { * */ loadDefaultCommands() { for (var id in defaultCommands) { - this.add(id, defaultCommands[id]); + this.add(id, defaultCommands[id]); } return this; diff --git a/src/styles/scss/_gjs_variables.scss b/src/styles/scss/_gjs_variables.scss index f03c8e05e..fb79eb54d 100644 --- a/src/styles/scss/_gjs_variables.scss +++ b/src/styles/scss/_gjs_variables.scss @@ -1,78 +1,76 @@ - - /* Class names prefixes */ -$app-prefix: 'gjs-' !default; -$nv-prefix: $app-prefix + 'nv-' !default; -$rte-prefix: $app-prefix + 'rte-' !default; -$comp-prefix: $app-prefix + 'comp-' !default; -$mdl-prefix: $app-prefix + 'mdl-' !default; -$am-prefix: $app-prefix + 'am-' !default; -$cm-prefix: $app-prefix + 'cm-' !default; -$pn-prefix: $app-prefix + 'pn-' !default; -$com-prefix: $app-prefix + 'com-' !default; -$sm-prefix: $app-prefix + 'sm-' !default; -$cv-prefix: $app-prefix + 'cv-' !default; -$clm-prefix: $app-prefix + 'clm-' !default; -$trt-prefix: $app-prefix + 'trt-' !default; +$app-prefix: 'gjs-' !default; +$nv-prefix: $app-prefix + 'nv-' !default; +$rte-prefix: $app-prefix + 'rte-' !default; +$comp-prefix: $app-prefix + 'comp-' !default; +$mdl-prefix: $app-prefix + 'mdl-' !default; +$am-prefix: $app-prefix + 'am-' !default; +$cm-prefix: $app-prefix + 'cm-' !default; +$pn-prefix: $app-prefix + 'pn-' !default; +$com-prefix: $app-prefix + 'com-' !default; +$sm-prefix: $app-prefix + 'sm-' !default; +$cv-prefix: $app-prefix + 'cv-' !default; +$clm-prefix: $app-prefix + 'clm-' !default; +$trt-prefix: $app-prefix + 'trt-' !default; /* Colors / Theme */ /* Dark theme */ -$mainColor: #444 !default; /* Light: #573454 Dark: #3b2639 -moz-linear-gradient(top, #fca99b 0%, #6e2842 100%) */ -$fontColor: #ddd !default; /* l: #d8d7db */ -$fontColorActive: #f8f8f8 !default; +$mainColor: #444 !default; /* Light: #573454 Dark: #3b2639 -moz-linear-gradient(top, #fca99b 0%, #6e2842 100%) */ +$fontColor: #ddd !default; /* l: #d8d7db */ +$fontColorActive: #f8f8f8 !default; /* Light theme -$mainColor: #fff; -$fontColor: #9299a3; -$fontColorActive: #4f8ef7; +$mainColor: #fff; +$fontColor: #9299a3; +$fontColorActive: #4f8ef7; */ -$mainDkColor: rgba(0, 0, 0, 0.2) !default;/* darken($mainColor, 4%) - #383838 */ -$mainDklColor: rgba(0, 0, 0, 0.1) !default; -$mainLhColor: rgba(255, 255, 255, 0.1) !default; /* #515151 */ -$mainLhlColor: rgba(255, 255, 255, 0.7) !default; -$fontColorDk: #777 !default; -$mainFont: Helvetica, sans-serif !default; -$colorBlue: #3b97e3 !default; -$colorRed: #dd3636 !default; -$colorYell: #ffca6f !default; -$colorGreen: #62c462 !default; -$tagBg: #804f7b !default; -$secColor: $tagBg !default; -$imageCompDim: 50px !default; -$leftWidth: 15% !default; +$mainDkColor: rgba(0, 0, 0, 0.2) !default;/* darken($mainColor, 4%) - #383838 */ +$mainDklColor: rgba(0, 0, 0, 0.1) !default; +$mainLhColor: rgba(255, 255, 255, 0.1) !default; /* #515151 */ +$mainLhlColor: rgba(255, 255, 255, 0.7) !default; +$fontColorDk: #777 !default; +$mainFont: Helvetica, sans-serif !default; +$colorBlue: #3b97e3 !default; +$colorRed: #dd3636 !default; +$colorYell: #ffca6f !default; +$colorGreen: #62c462 !default; +$tagBg: #804f7b !default; +$secColor: $tagBg !default; +$imageCompDim: 50px !default; +$leftWidth: 15% !default; /* Color Helpers */ -$colorHighlight: #71b7f1 !default; -$colorWarn: #ffca6f !default; +$colorHighlight: #71b7f1 !default; +$colorWarn: #ffca6f !default; /* Canvas */ -$hndlMargin: -5px !default; +$hndlMargin: -5px !default; /* Components / Inputs */ -$lightBorder: rgba(255, 255, 255, 0.05) !default; -$inputFontColor: $mainLhlColor !default; /* #d5d5d5 */ -$arrowColor: $mainLhlColor !default; /* b1b1b1 */ -$darkTextShadow: $mainDkColor !default; /* #252525 */ -$darkBorder: rgba(0, 0, 0, 0.15) !default; /* 303030 */ -$colorpSize: 22px !default; -$inputPadding: 5px !default; // Has to be a single value +$lightBorder: rgba(255, 255, 255, 0.05) !default; +$inputFontColor: $mainLhlColor !default; /* #d5d5d5 */ +$arrowColor: $mainLhlColor !default; /* b1b1b1 */ +$darkTextShadow: $mainDkColor !default; /* #252525 */ +$darkBorder: rgba(0, 0, 0, 0.15) !default; /* 303030 */ +$colorpSize: 22px !default; +$inputPadding: 5px !default; // Has to be a single value /* Class manager */ -$addBtnBg: lighten($mainDkColor, 10%) !default; -$paddElClm: 5px 6px !default; +$addBtnBg: lighten($mainDkColor, 10%) !default; +$paddElClm: 5px 6px !default; /* File uploader */ -$uploadPadding: 150px 10px !default; +$uploadPadding: 150px 10px !default; /* Commands */ -$animSpeed: 0.2s !default; +$animSpeed: 0.2s !default; /* Fonts */ -$fontPath: '../fonts' !default; -$fontName: 'main-fonts' !default; -$fontV: 20 !default;//random(1000) +$fontPath: '../fonts' !default; +$fontName: 'main-fonts' !default; +$fontV: 20 !default;//random(1000) diff --git a/test/specs/commands/index.js b/test/specs/commands/index.js index f3a83f2ac..42316ad43 100644 --- a/test/specs/commands/index.js +++ b/test/specs/commands/index.js @@ -25,8 +25,30 @@ describe('Commands', () => { expect(obj.get('test').test).toEqual('test'); }); - it('No default commands at init', () => { - expect(obj.get('select-comp')).toEqual(null); + it('Load default commands at init', () => { + expect(obj.get('select-comp')).toNotEqual(null); + expect(obj.get('create-comp')).toNotEqual(null); + expect(obj.get('delete-comp')).toNotEqual(null); + expect(obj.get('image-comp')).toNotEqual(null); + expect(obj.get('move-comp')).toNotEqual(null); + expect(obj.get('text-comp')).toNotEqual(null); + expect(obj.get('insert-custom')).toNotEqual(null); + expect(obj.get('export-template')).toNotEqual(null); + expect(obj.get('sw-visibility')).toNotEqual(null); + expect(obj.get('open-layers')).toNotEqual(null); + expect(obj.get('open-sm')).toNotEqual(null); + expect(obj.get('open-tm')).toNotEqual(null); + expect(obj.get('open-blocks')).toNotEqual(null); + expect(obj.get('open-assets')).toNotEqual(null); + expect(obj.get('show-offset')).toNotEqual(null); + expect(obj.get('select-parent')).toNotEqual(null); + expect(obj.get('tlb-delete')).toNotEqual(null); + expect(obj.get('tlb-clone')).toNotEqual(null); + expect(obj.get('tlb-move')).toNotEqual(null); + expect(obj.get('fullscreen')).toNotEqual(null); + expect(obj.get('preview')).toNotEqual(null); + expect(obj.get('resize')).toNotEqual(null); + expect(obj.get('drag')).toNotEqual(null); }); it('Default commands after loadDefaultCommands', () => { @@ -34,6 +56,10 @@ describe('Commands', () => { expect(obj.get('select-comp')).toNotEqual(null); }); + it('Commands module should not have toLoad property', () => { + expect(obj.toLoad).toEqual(null); + }); + }); }); diff --git a/test/specs/grapesjs/index.js b/test/specs/grapesjs/index.js index 813e237c5..a2d39ad3f 100644 --- a/test/specs/grapesjs/index.js +++ b/test/specs/grapesjs/index.js @@ -229,6 +229,22 @@ describe('GrapesJS', () => { expect(editor.getDevice()).toEqual('Tablet'); }); + // Problems with iframe loading + it.skip('Init new editor with custom plugin overrides default commands', () => { + var editor, + pluginName = 'test-plugin-opts'; + + obj.plugins.add(pluginName, (edt, opts) => { + let cmdm = edt.Commands; + // Overwrite export template + cmdm.add('export-template', {test: 1}); + }); + config.plugins = [pluginName]; + + editor = obj.init(config); + expect(editor.Commands.get('export-template').test).toEqual(1); + }); + }); });