Merge pull request #4258 from xQwexx/editor

Convert EditorModule into class

src/canvas/index.js

@@ -267,7 +267,6 @@ export default class CanvasModule {
       model: this.canvas,
       config: this.c,
     });
-    console.log(this.canvas);
     return this.canvasView.render().el;
   }
 

src/editor/model/Editor.js

@@ -809,7 +809,7 @@ export default class EditorModel extends Model {
     view && view.remove();
     this.clear({ silent: true });
     this.destroyed = 1;
-    ['config', 'view', '_previousAttributes', '_events', '_listeners'].forEach(i => (this[i] = {}));
+    ['_config', 'view', '_previousAttributes', '_events', '_listeners'].forEach(i => (this[i] = {}));
     editors.splice(editors.indexOf(editor), 1);
     hasWin() && $(config.el).empty().attr(this.attrsOrig);
   }

src/index.js

@@ -52,7 +52,7 @@ export default {
     if (!els && !headless) throw new Error("'container' is required");
     config = { ...defaultConfig, ...config, grapesjs: this };
     config.el = !headless && (isElement(els) ? els : document.querySelector(els));
-    const editor = new Editor(config, { $ }).init();
+    const editor = new Editor(config, { $ });
     const em = editor.getModel();
 
     // Load plugins

test/specs/block_manager/index.js

@@ -10,14 +10,14 @@ describe('BlockManager', () => {
     beforeEach(() => {
       editor = new Editor({
         blockManager: {
-          blocks: []
+          blocks: [],
-        }
+        },
-      }).init();
+      });
 
       idTest = 'h1-block';
       optsTest = {
         label: 'Heading',
-        content: '<h1>Test</h1>'
+        content: '<h1>Test</h1>',
       };
 
       obj = editor.Blocks;

test/specs/device_manager/index.js

@@ -13,9 +13,9 @@ describe('DeviceManager', () => {
       testWidthDevice = '100px';
       editor = new Editor({
         deviceManager: {
-          devices: []
+          devices: [],
-        }
+        },
-      }).init();
+      });
       em = editor.getModel();
       obj = editor.Devices;
     });
@@ -64,7 +64,7 @@ describe('DeviceManager', () => {
     test('Add device with props', () => {
       const model = obj.add({
         name: testNameDevice,
-        width: testWidthDevice
+        width: testWidthDevice,
       });
       expect(model.get('id')).toEqual(testNameDevice);
       expect(model.get('name')).toEqual(testNameDevice);
@@ -73,7 +73,7 @@ describe('DeviceManager', () => {
 
     test('Add device without id and name', () => {
       const model = obj.add({
-        width: testWidthDevice
+        width: testWidthDevice,
       });
       expect(model.get('name')).toEqual('');
       expect(model.get('width')).toEqual(testWidthDevice);
@@ -97,7 +97,7 @@ describe('DeviceManager', () => {
     test('Get device by name with different id', () => {
       const model = obj.add({
         id: 'device',
-        name: testNameDevice
+        name: testNameDevice,
       });
       const model2 = obj.get(testNameDevice);
       expect(model).toBe(model2);

test/specs/editor/index.js

@@ -8,7 +8,6 @@ describe('Editor', () => {
 
   beforeEach(() => {
     editor = new Editor();
-    editor.init();
     editor.getModel().loadOnStart();
   });
 
@@ -99,12 +98,7 @@ describe('Editor', () => {
     </div>`);
     expect(umStack.length).toBe(1); // UM counts first children
     expect(keys(all).length).toBe(5 + initComps);
-    wrapper
+    wrapper.components().at(0).components().at(0).remove(); // Remove 1 component
-      .components()
-      .at(0)
-      .components()
-      .at(0)
-      .remove(); // Remove 1 component
 
     expect(umStack.length).toBe(2);
     expect(keys(all).length).toBe(3 + initComps);

test/specs/i18n/index.js

@@ -1,10 +1,10 @@
 import I18n from 'i18n';
-import Editor from 'editor/index';
+import Editor from 'editor';
 
 describe('I18n', () => {
   describe('Main', () => {
     let obj;
-    let editor = Editor().init();
+    let editor = new Editor();
     let em = editor.getModel();
 
     beforeEach(() => {
@@ -34,8 +34,8 @@ describe('I18n', () => {
         localeFallback,
         detectLocale: 0,
         messages: {
-          en: { msg }
+          en: { msg },
-        }
+        },
       });
       expect(obj.getLocale()).toBe(locale);
       expect(obj.getConfig().localeFallback).toBe(localeFallback);
@@ -44,7 +44,7 @@ describe('I18n', () => {
 
     test('English always imported', () => {
       obj.init({
-        messages: { it: {} }
+        messages: { it: {} },
       });
       expect(Object.keys(obj.getMessages())).toEqual(['en', 'it']);
     });
@@ -74,12 +74,12 @@ describe('I18n', () => {
       obj.setMessages(set1);
       const set2 = {
         en: { msg2: 'Msg 2 up', msg3: 'Msg 3' },
-        it: { msg1: 'Msg 1' }
+        it: { msg1: 'Msg 1' },
       };
       obj.addMessages(set2);
       expect(obj.getMessages()).toEqual({
         en: { msg1: 'Msg 1', msg2: 'Msg 2 up', msg3: 'Msg 3' },
-        it: { msg1: 'Msg 1' }
+        it: { msg1: 'Msg 1' },
       });
     });
 
@@ -90,19 +90,19 @@ describe('I18n', () => {
           msg2: 'Msg 2',
           msg3: {
             msg31: 'Msg 31',
-            msg32: { msg321: 'Msg 321' }
+            msg32: { msg321: 'Msg 321' },
-          }
+          },
-        }
+        },
       });
       obj.addMessages({
         en: {
           msg2: { msg21: 'Msg 21' },
           msg3: {
             msg32: { msg322: 'Msg 322' },
-            msg33: 'Msg 33'
+            msg33: 'Msg 33',
           },
-          msg4: 'Msg 4'
+          msg4: 'Msg 4',
-        }
+        },
       });
       expect(obj.getMessages()).toEqual({
         en: {
@@ -112,12 +112,12 @@ describe('I18n', () => {
             msg31: 'Msg 31',
             msg32: {
               msg321: 'Msg 321',
-              msg322: 'Msg 322'
+              msg322: 'Msg 322',
             },
-            msg33: 'Msg 33'
+            msg33: 'Msg 33',
           },
-          msg4: 'Msg 4'
+          msg4: 'Msg 4',
-        }
+        },
       });
     });
 
@@ -126,7 +126,7 @@ describe('I18n', () => {
       obj.setLocale('en');
       obj.setMessages({
         en: { msg1 },
-        it: { msg1: `${msg1} it` }
+        it: { msg1: `${msg1} it` },
       });
       expect(obj.t('msg2')).toBe(undefined);
       expect(obj.t('msg1')).toBe(msg1);
@@ -141,10 +141,10 @@ describe('I18n', () => {
           key1: {
             msg1,
             key2: {
-              msg2
+              msg2,
-            }
+            },
-          }
+          },
-        }
+        },
       });
       expect(obj.t('key1.msg1')).toBe(msg1);
       expect(obj.t('key1.key2.msg2')).toBe(msg2);
@@ -158,7 +158,7 @@ describe('I18n', () => {
       obj.setLocale('en');
       obj.setMessages({
         en: { msg1 },
-        it: { msg1: msg1Alt }
+        it: { msg1: msg1Alt },
       });
       expect(obj.t('msg1', { l: 'it' })).toBe(msg1Alt);
     });
@@ -168,7 +168,7 @@ describe('I18n', () => {
       obj.setLocale('it');
       obj.setMessages({
         en: { msg1 },
-        it: {}
+        it: {},
       });
       expect(obj.t('msg1')).toBe(msg1);
     });
@@ -179,12 +179,10 @@ describe('I18n', () => {
       obj.setLocale('en');
       obj.setMessages({
         en: { msg1 },
-        it: { msg1: msg1Alt }
+        it: { msg1: msg1Alt },
       });
       expect(obj.t('msg1', { params: { test: 'Hello' } })).toBe('Msg 1 Hello');
-      expect(obj.t('msg1', { l: 'it', params: { test: 'Hello' } })).toBe(
+      expect(obj.t('msg1', { l: 'it', params: { test: 'Hello' } })).toBe('Msg 1 Hello it');
-        'Msg 1 Hello it'
-      );
     });
 
     test('i18n events', () => {

test/specs/keymaps/index.js

@@ -1,4 +1,4 @@
-import Editor from 'editor/index';
+import Editor from 'editor';
 
 describe('Keymaps', () => {
   describe('Main', () => {
@@ -7,7 +7,7 @@ describe('Keymaps', () => {
     let editor;
 
     beforeEach(() => {
-      editor = Editor({ keymaps: { defaults: [] } }).init();
+      editor = new Editor({ keymaps: { defaults: [] } });
       em = editor.getModel();
       em.loadOnStart();
       obj = editor.Keymaps;
@@ -64,13 +64,13 @@ describe('Keymaps', () => {
       it('Should run the handler', () => {
         const handler = {
           run: jest.fn(),
-          callRun: jest.fn()
+          callRun: jest.fn(),
         };
         obj.add('test', 'ctrl+a', handler);
         const keyboardEvent = new KeyboardEvent('keydown', {
           keyCode: 65,
           which: 65,
-          ctrlKey: true
+          ctrlKey: true,
         });
         document.dispatchEvent(keyboardEvent);
 
@@ -86,13 +86,13 @@ describe('Keymaps', () => {
       it('Should not run the handler', () => {
         const handler = {
           run: jest.fn(),
-          callRun: jest.fn()
+          callRun: jest.fn(),
         };
         obj.add('test', 'ctrl+a', handler);
         const keyboardEvent = new KeyboardEvent('keydown', {
           keyCode: 65,
           which: 65,
-          ctrlKey: true
+          ctrlKey: true,
         });
         document.dispatchEvent(keyboardEvent);
 
@@ -102,13 +102,13 @@ describe('Keymaps', () => {
       it('Should run the handler if checked as force', () => {
         const handler = {
           run: jest.fn(),
-          callRun: jest.fn()
+          callRun: jest.fn(),
         };
         obj.add('test', 'ctrl+a', handler, { force: true });
         const keyboardEvent = new KeyboardEvent('keydown', {
           keyCode: 65,
           which: 65,
-          ctrlKey: true
+          ctrlKey: true,
         });
         document.dispatchEvent(keyboardEvent);