Merge pull request #4312 from xQwexx/components

Start of the Components ts refactor

src/abstract/Module.ts

@@ -1,5 +1,5 @@
 import { isElement, isUndefined } from 'underscore';
-import { Collection } from '../common';
+import { Collection, View } from '../common';
 import EditorModel from '../editor/model/Editor';
 import { createId, isDef } from '../utils/mixins';
 
@@ -8,7 +8,7 @@ export interface IModule<TConfig extends any = any>
   init(cfg: any): void;
   destroy(): void;
   postLoad(key: any): any;
-  getConfig(): ModuleConfig;
+  config: TConfig;
   onLoad?(): void;
   name: string;
   postRender?(view: any): void;
@@ -73,8 +73,8 @@ export default abstract class Module<T extends ModuleConfig = ModuleConfig>
     return this._name;
   }
 
-  getConfig() {
-    return this.config;
+  getConfig(name?: string) {
+    return name ? this.config.name : this.config;
   }
 
   __logWarn(str: string, opts = {}) {
@@ -90,8 +90,9 @@ export abstract class ItemManagerModule<
 > extends Module<TConf> {
   cls: any[] = [];
   protected all: TCollection;
+  view?: View;
 
-  constructor(em: EditorModel, moduleName: string, all: any, events: any) {
+  constructor(em: EditorModel, moduleName: string, all: any, events?: any) {
     super(em, moduleName);
     this.all = all;
     this.events = events;
@@ -251,5 +252,7 @@ export abstract class ItemManagerModule<
       coll.stopListening();
       coll.reset();
     });
+    this.view?.remove();
+    this.view = undefined;
   }
 }

src/asset_manager/config/config.js

@@ -106,5 +106,5 @@ export default {
   openAssetsOnDrop: 1,
 
   // Any dropzone content to append inside dropzone element
-  dropzoneContent: ''
+  dropzoneContent: '',
 };

src/asset_manager/model/AssetImage.js

@@ -7,7 +7,7 @@ export default class AssetImage extends Asset {
       type: 'image',
       unitDim: 'px',
       height: 0,
-      width: 0
+      width: 0,
     };
   }
 }

src/block_manager/config/config.js

@@ -20,5 +20,5 @@ export default {
   blocks: [],
 
   // Avoid rendering the default block manager.
-  custom: false
+  custom: false,
 };

src/code_manager/config/config.js

@@ -2,5 +2,5 @@ export default {
   // Style prefix
   stylePrefix: 'cm-',
 
-  inlineCss: false
+  inlineCss: false,
 };

src/code_manager/index.js

@@ -222,9 +222,7 @@ export default () => {
     },
 
     destroy() {
-      [c, generators, defGenerators, viewers, defViewers].forEach(
-        i => (i = {})
-      );
-    }
+      [c, generators, defGenerators, viewers, defViewers].forEach(i => (i = {}));
+    },
   };
 };

src/commands/config/config.js

@@ -6,5 +6,5 @@ export default {
 
   // If true, stateful commands (with `run` and `stop` methods) can't be runned multiple times.
   // So, if the command is already active, running it again will not execute the `run` method
-  strict: 1
+  strict: 1,
 };

src/commands/view/CanvasClear.js

@@ -2,5 +2,5 @@ export default {
   run(ed) {
     ed.DomComponents.clear();
     ed.CssComposer.clear();
-  }
+  },
 };

src/commands/view/ComponentEnter.js

@@ -10,5 +10,5 @@ export default {
     });
 
     toSelect.length && ed.select(toSelect);
-  }
+  },
 };

src/commands/view/ComponentExit.js

@@ -15,5 +15,5 @@ export default {
     });
 
     toSelect.length && ed.select(toSelect);
-  }
+  },
 };

src/commands/view/ComponentNext.js

@@ -23,5 +23,5 @@ export default {
     });
 
     toSelect.length && ed.select(toSelect);
-  }
+  },
 };

src/commands/view/ComponentPrev.js

@@ -22,5 +22,5 @@ export default {
     });
 
     toSelect.length && ed.select(toSelect);
-  }
+  },
 };

src/commands/view/CopyComponent.js

@@ -3,5 +3,5 @@ export default {
     const em = ed.getModel();
     const models = [...ed.getSelectedAll()];
     models.length && em.set('clipboard', models);
-  }
+  },
 };

src/commands/view/DeleteComponent.js

@@ -13,11 +13,7 @@ export default extend({}, SelectComponent, {
 
   enable() {
     var that = this;
-    this.$el
-      .find('*')
-      .mouseover(this.startDelete)
-      .mouseout(this.stopDelete)
-      .click(this.onDelete);
+    this.$el.find('*').mouseover(this.startDelete).mouseout(this.stopDelete).click(this.onDelete);
   },
 
   /**
@@ -74,5 +70,5 @@ export default extend({}, SelectComponent, {
    * */
   updateBadgeLabel(model) {
     this.badge.html('Remove ' + model.getName());
-  }
+  },
 });

src/commands/view/ExportTemplate.js

@@ -22,7 +22,7 @@ export default {
     modal
       .open({
         title: config.textViewCode,
-        content: this.$editors
+        content: this.$editors,
       })
       .getModel()
       .once('change:open', () => editor.stopCommand(this.id));
@@ -43,16 +43,16 @@ export default {
       label,
       codeName,
       theme,
-      input
+      input,
     });
 
     const $el = new this.cm.EditorView({
       model: el,
-      config: this.cm.getConfig()
+      config: this.cm.getConfig(),
     }).render().$el;
 
     el.init(input);
 
     return { el, $el };
-  }
+  },
 };

src/commands/view/Fullscreen.js

@@ -7,12 +7,7 @@ export default {
    */
   isEnabled() {
     var d = document;
-    if (
-      d.fullscreenElement ||
-      d.webkitFullscreenElement ||
-      d.mozFullScreenElement
-    )
-      return 1;
+    if (d.fullscreenElement || d.webkitFullscreenElement || d.mozFullScreenElement) return 1;
     else return 0;
   },
 
@@ -66,9 +61,7 @@ export default {
   run(editor, sender, opts = {}) {
     this.sender = sender;
     const { target } = opts;
-    const targetEl = isElement(target)
-      ? target
-      : document.querySelector(target);
+    const targetEl = isElement(target) ? target : document.querySelector(target);
     const pfx = this.enable(targetEl || editor.getContainer());
     this.fsChanged = this.fsChanged.bind(this, pfx);
     document.addEventListener(pfx + 'fullscreenchange', this.fsChanged);
@@ -79,5 +72,5 @@ export default {
     if (sender && sender.set) sender.set('active', false);
     this.disable();
     if (editor) editor.trigger('change:canvasOffset');
-  }
+  },
 };

src/commands/view/OpenAssets.js

@@ -37,7 +37,7 @@ export default {
     am.__behaviour({
       select,
       types,
-      options: opts
+      options: opts,
     });
 
     if (config.custom) {
@@ -58,9 +58,7 @@ export default {
       }
 
       if (accept) {
-        const uploadEl = this.rendered.querySelector(
-          `input#${config.stylePrefix}uploadFile`
-        );
+        const uploadEl = this.rendered.querySelector(`input#${config.stylePrefix}uploadFile`);
         uploadEl && uploadEl.setAttribute('accept', accept);
       }
     }
@@ -72,5 +70,5 @@ export default {
   stop(editor) {
     this.editor = editor;
     this.close(this.rendered);
-  }
+  },
 };

src/commands/view/OpenBlocks.js

@@ -41,7 +41,7 @@ export default {
     this.bm = bm;
     const { container } = this;
     bm.__behaviour({
-      container
+      container,
     });
 
     if (this.config.custom) {
@@ -53,5 +53,5 @@ export default {
 
   stop() {
     this.close();
-  }
+  },
 };

src/commands/view/OpenLayers.js

@@ -20,5 +20,5 @@ export default {
   stop() {
     const { layers } = this;
     layers && (layers.style.display = 'none');
-  }
+  },
 };

src/commands/view/OpenTraitManager.js

@@ -19,25 +19,16 @@ export default {
       this.$cn = $('<div></div>');
       this.$cn2 = $('<div></div>');
       this.$cn.append(this.$cn2);
-      this.$header = $('<div>').append(
-        `<div class="${confTm.stylePrefix}header">${em.t(
-          'traitManager.empty'
-        )}</div>`
-      );
+      this.$header = $('<div>').append(`<div class="${confTm.stylePrefix}header">${em.t('traitManager.empty')}</div>`);
       this.$cn.append(this.$header);
-      this.$cn2.append(
-        `<div class="${pfx}traits-label">${em.t('traitManager.label')}</div>`
-      );
+      this.$cn2.append(`<div class="${pfx}traits-label">${em.t('traitManager.label')}</div>`);
       this.$cn2.append(tm.render());
       var panels = editor.Panels;
 
-      if (!panels.getPanel('views-container'))
-        panelC = panels.addPanel({ id: 'views-container' });
+      if (!panels.getPanel('views-container')) panelC = panels.addPanel({ id: 'views-container' });
       else panelC = panels.getPanel('views-container');
 
-      panelC
-        .set('appendContent', this.$cn.get(0))
-        .trigger('change:appendContent');
+      panelC.set('appendContent', this.$cn.get(0)).trigger('change:appendContent');
 
       this.target = editor.getModel();
       this.listenTo(this.target, 'component:toggled', this.toggleTm);
@@ -66,5 +57,5 @@ export default {
   stop() {
     this.$cn2 && this.$cn2.hide();
     this.$header && this.$header.hide();
-  }
+  },
 };

src/commands/view/Preview.js

@@ -93,5 +93,5 @@ export default {
 
     editor.refresh();
     this.tglEffects();
-  }
+  },
 };

src/commands/view/SelectPosition.js

@@ -25,7 +25,7 @@ export default {
         nested: 1,
         em: this.editorModel,
         canvasRelative: 1,
-        scale: () => this.em.getZoomDecimal()
+        scale: () => this.em.getZoomDecimal(),
       });
 
     if (opts.onStart) this.sorter.onStart = opts.onStart;
@@ -51,19 +51,13 @@ export default {
    * */
   stopSelectPosition() {
     this.posTargetCollection = null;
-    this.posIndex =
-      this.posMethod == 'after' && this.cDim.length !== 0
-        ? this.posIndex + 1
-        : this.posIndex; //Normalize
+    this.posIndex = this.posMethod == 'after' && this.cDim.length !== 0 ? this.posIndex + 1 : this.posIndex; //Normalize
     if (this.sorter) {
       this.sorter.moved = 0;
       this.sorter.endMove();
     }
     if (this.cDim) {
-      this.posIsLastEl =
-        this.cDim.length !== 0 &&
-        this.posMethod == 'after' &&
-        this.posIndex == this.cDim.length;
+      this.posIsLastEl = this.cDim.length !== 0 && this.posMethod == 'after' && this.posIndex == this.cDim.length;
       this.posTargetEl =
         this.cDim.length === 0
           ? $(this.outsideElem)
@@ -96,12 +90,7 @@ export default {
     var m = method || 'before';
     var len = dims.length;
     var isLast = len !== 0 && m == 'after' && i == len;
-    if (
-      len !== 0 &&
-      ((!isLast && !dims[i][4]) ||
-        (dims[i - 1] && !dims[i - 1][4]) ||
-        (isLast && !dims[i - 1][4]))
-    )
+    if (len !== 0 && ((!isLast && !dims[i][4]) || (dims[i - 1] && !dims[i - 1][4]) || (isLast && !dims[i - 1][4])))
       return 1;
     return 0;
   },
@@ -114,5 +103,5 @@ export default {
     this.stopSelectPosition();
     this.$wrapper.css('cursor', '');
     this.$wrapper.unbind();
-  }
+  },
 };

src/commands/view/SwitchVisibility.js

@@ -29,5 +29,5 @@ export default {
   _upFrame(frame, active) {
     const method = active ? 'add' : 'remove';
     frame.view.getBody().classList[method](`${this.ppfx}dashed`);
-  }
+  },
 };

src/css_composer/config/config.js

@@ -18,5 +18,5 @@ export default {
    *    return style;
    * }
    */
-  onBeforeStyle: null
+  onBeforeStyle: null,
 };

src/dom_components/index.js → src/dom_components/index.ts

@@ -51,7 +51,15 @@
  *
  * @module Components
  */
-import { isEmpty, isObject, isArray, isFunction, isString, result, debounce } from 'underscore';
+import {
+  isEmpty,
+  isObject,
+  isArray,
+  isFunction,
+  isString,
+  result,
+  debounce,
+} from 'underscore';
 import defaults from './config/config';
 import Component, { keyUpdate, keyUpdateInside } from './model/Component';
 import Components from './model/Components';
@@ -94,9 +102,11 @@ import ComponentTextView from './view/ComponentTextView';
 import ComponentWrapper from './model/ComponentWrapper';
 import ComponentFrame from './model/ComponentFrame';
 import ComponentFrameView from './view/ComponentFrameView';
-import Module from 'abstract/moduleLegacy';
+import { ItemManagerModule } from '../abstract/Module';
+import EditorModel from '../editor/model/Editor';
+import { Model } from 'backbone';
 
-export default class ComponentManager extends Module {
+export default class ComponentManager extends ItemManagerModule {
   componentTypes = [
     {
       id: 'cell',
@@ -200,7 +210,8 @@ export default class ComponentManager extends Module {
     },
   ];
 
-  componentsById = {};
+  componentsById: { [id: string]: Component } = {};
+  componentView?: ComponentWrapperView;
 
   Component = Component;
 
@@ -213,18 +224,11 @@ export default class ComponentManager extends Module {
    * @type {String}
    * @private
    */
-  name = 'DomComponents';
+  //name = "DomComponents";
 
   storageKey = 'components';
 
-  /**
-   * Returns config
-   * @return {Object} Config object
-   * @private
-   */
-  getConfig() {
-    return this.c;
-  }
+  shallow?: Component;
 
   /**
    * Initialize module. Called on a new instance of the editor with configurations passed
@@ -232,40 +236,43 @@ export default class ComponentManager extends Module {
    * @param {Object} config Configurations
    * @private
    */
-  init(config) {
-    this.c = config || {};
-    const em = this.c.em;
-    this.em = em;
+  constructor(em: EditorModel) {
+    super(em, 'DomComponents', new Components(undefined, { em }));
 
     if (em) {
-      this.c.components = em.config.components || this.c.components;
+      this.config.components = em.config.components || this.config.components;
     }
 
     for (var name in defaults) {
-      if (!(name in this.c)) this.c[name] = defaults[name];
+      //@ts-ignore
+      if (!(name in this.config)) this.config[name] = defaults[name];
     }
 
-    var ppfx = this.c.pStylePrefix;
-    if (ppfx) this.c.stylePrefix = ppfx + this.c.stylePrefix;
+    var ppfx = this.config.pStylePrefix;
+    if (ppfx) this.config.stylePrefix = ppfx + this.config.stylePrefix;
 
     // Load dependencies
     if (em) {
-      this.c.modal = em.get('Modal') || '';
-      this.c.am = em.get('AssetManager') || '';
+      this.config.modal = em.get('Modal') || '';
+      this.config.am = em.get('AssetManager') || '';
       em.get('Parser').compTypes = this.componentTypes;
       em.on('change:componentHovered', this.componentHovered, this);
 
       const selected = em.get('selected');
-      em.listenTo(selected, 'add', (sel, c, opts) => this.selectAdd(selected.getComponent(sel), opts));
-      em.listenTo(selected, 'remove', (sel, c, opts) => this.selectRemove(selected.getComponent(sel), opts));
+      em.listenTo(selected, 'add', (sel, c, opts) =>
+        this.selectAdd(selected.getComponent(sel), opts)
+      );
+      em.listenTo(selected, 'remove', (sel, c, opts) =>
+        this.selectRemove(selected.getComponent(sel), opts)
+      );
     }
 
     return this;
   }
 
-  load(data) {
+  load(data: any) {
     return this.loadProjectData(data, {
-      onResult: result => {
+      onResult: (result: Component) => {
         let wrapper = this.getWrapper();
 
         if (!wrapper) {
@@ -278,6 +285,7 @@ export default class ComponentManager extends Module {
         } else {
           const { components = [], ...rest } = result;
           wrapper.set(rest);
+          //@ts-ignore
           wrapper.components(components);
         }
       },
@@ -293,7 +301,7 @@ export default class ComponentManager extends Module {
    * @return {Object}
    * @private
    */
-  getComponent() {
+  getComponent(): Component {
     const sel = this.em.get('PageManager').getSelected();
     const frame = sel && sel.getMainFrame();
     return frame && frame.getComponent();
@@ -340,7 +348,7 @@ export default class ComponentManager extends Module {
    * // Remove comp2
    * wrapperChildren.remove(comp2);
    */
-  getComponents() {
+  getComponents(): Components {
     const wrp = this.getWrapper();
     return wrp && wrp.get('components');
   }
@@ -374,7 +382,7 @@ export default class ComponentManager extends Module {
    *   attributes: { title: 'here' }
    * });
    */
-  addComponent(component, opt = {}) {
+  addComponent(component: Component, opt = {}) {
     return this.getComponents().add(component, opt);
   }
 
@@ -386,7 +394,7 @@ export default class ComponentManager extends Module {
    * @return {HTMLElement}
    */
   render() {
-    return this.componentView.render().el;
+    return this.componentView?.render().el;
   }
 
   /**
@@ -395,7 +403,8 @@ export default class ComponentManager extends Module {
    */
   clear(opts = {}) {
     const components = this.getComponents();
-    components?.filter(Boolean).forEach(i => i.remove(opts));
+    //@ts-ignore
+    components?.filter(Boolean).forEach((i) => i.remove(opts));
     return this;
   }
 
@@ -406,7 +415,7 @@ export default class ComponentManager extends Module {
    * @return {this}
    * @private
    */
-  setComponents(components, opt = {}) {
+  setComponents(components: Component, opt = {}) {
     this.clear(opt).addComponent(components, opt);
   }
 
@@ -417,23 +426,35 @@ export default class ComponentManager extends Module {
    * @param {Object} methods Component methods
    * @return {this}
    */
-  addType(type, methods) {
+  addType(type: string, methods: any) {
     const { em } = this;
-    const { model = {}, view = {}, isComponent, extend, extendView, extendFn = [], extendFnView = [] } = methods;
+    const {
+      model = {},
+      view = {},
+      isComponent,
+      extend,
+      extendView,
+      extendFn = [],
+      extendFnView = [],
+    } = methods;
     const compType = this.getType(type);
     const extendType = this.getType(extend);
     const extendViewType = this.getType(extendView);
-    const typeToExtend = extendType ? extendType : compType ? compType : this.getType('default');
+    const typeToExtend = extendType
+      ? extendType
+      : compType
+      ? compType
+      : this.getType('default');
     const modelToExt = typeToExtend.model;
     const viewToExt = extendViewType ? extendViewType.view : typeToExtend.view;
 
     // Function for extending source object methods
-    const getExtendedObj = (fns, target, srcToExt) =>
+    const getExtendedObj = (fns: any[], target: any, srcToExt: any) =>
       fns.reduce((res, next) => {
         const fn = target[next];
         const parentFn = srcToExt.prototype[next];
         if (fn && parentFn) {
-          res[next] = function (...args) {
+          res[next] = (...args: any[]) => {
             parentFn.bind(this)(...args);
             fn.bind(this)(...args);
           };
@@ -453,7 +474,10 @@ export default class ComponentManager extends Module {
           },
         },
         {
-          isComponent: compType && !extendType && !isComponent ? modelToExt.isComponent : isComponent || (() => 0),
+          isComponent:
+            compType && !extendType && !isComponent
+              ? modelToExt.isComponent
+              : isComponent || (() => 0),
         }
       );
     }
@@ -485,7 +509,9 @@ export default class ComponentManager extends Module {
    * @param {string} type Component ID
    * @return {Object} Component type definition, eg. `{ model: ..., view: ... }`
    */
-  getType(type) {
+  getType(type: 'default'): { id: string; model: any; view: any };
+  getType(type: string): { id: string; model: any; view: any } | undefined;
+  getType(type: string) {
     var df = this.componentTypes;
 
     for (var it = 0; it < df.length; it++) {
@@ -502,7 +528,7 @@ export default class ComponentManager extends Module {
    * @param {string} type Component ID
    * @returns {Object|undefined} Removed component type, undefined otherwise
    */
-  removeType(id) {
+  removeType(id: string) {
     const df = this.componentTypes;
     const type = this.getType(id);
     if (!type) return;
@@ -519,23 +545,27 @@ export default class ComponentManager extends Module {
     return this.componentTypes;
   }
 
-  selectAdd(component, opts = {}) {
+  selectAdd(component: Component, opts = {}) {
     if (component) {
       component.set({
         status: 'selected',
       });
-      ['component:selected', 'component:toggled'].forEach(event => this.em.trigger(event, component, opts));
+      ['component:selected', 'component:toggled'].forEach((event) =>
+        this.em.trigger(event, component, opts)
+      );
     }
   }
 
-  selectRemove(component, opts = {}) {
+  selectRemove(component: Component, opts = {}) {
     if (component) {
       const { em } = this;
       component.set({
         status: '',
         state: '',
       });
-      ['component:deselected', 'component:toggled'].forEach(event => this.em.trigger(event, component, opts));
+      ['component:deselected', 'component:toggled'].forEach((event) =>
+        this.em.trigger(event, component, opts)
+      );
     }
   }
 
@@ -564,7 +594,7 @@ export default class ComponentManager extends Module {
     let { shallow, em } = this;
 
     if (!shallow && em) {
-      const shallowEm = em.get('shallow');
+      const shallowEm = em.shallow;
       if (!shallowEm) return;
       const domc = shallowEm.get('DomComponents');
       domc.componentTypes = this.componentTypes;
@@ -573,7 +603,7 @@ export default class ComponentManager extends Module {
         const events = [keyUpdate, keyUpdateInside].join(' ');
         shallow.on(
           events,
-          debounce(() => shallow.components(''), 100)
+          debounce(() => shallow?.components(''), 100)
         );
       }
       this.shallow = shallow;
@@ -593,7 +623,7 @@ export default class ComponentManager extends Module {
    * * `2` - Target doesn't accept source.
    * @private
    */
-  canMove(target, source, index) {
+  canMove(target: Component, source?: Component, index?: number) {
     const at = index || index === 0 ? index : null;
     const result = {
       result: false,
@@ -604,13 +634,15 @@ export default class ComponentManager extends Module {
 
     if (!source) return result;
 
-    let srcModel = source?.toHTML ? source : null;
+    //@ts-ignore
+    let srcModel = source.toHTML ? source : null;
 
     if (!srcModel) {
       const wrapper = this.getShallowWrapper();
       srcModel = wrapper?.append(source)[0];
     }
 
+    //@ts-ignore
     result.source = srcModel;
 
     if (!srcModel) return result;
@@ -634,7 +666,11 @@ export default class ComponentManager extends Module {
     if (isFunction(droppable)) {
       droppable = !!droppable(srcModel, target, at);
     } else {
-      if (droppable === false && target.isInstanceOf('text') && srcModel.get('textable')) {
+      if (
+        droppable === false &&
+        target.isInstanceOf('text') &&
+        srcModel.get('textable')
+      ) {
         droppable = true;
       } else {
         const el = srcModel.getEl();
@@ -652,14 +688,14 @@ export default class ComponentManager extends Module {
     return this.componentsById;
   }
 
-  getById(id) {
+  getById(id: string) {
     return this.componentsById[id] || null;
   }
 
   destroy() {
     const all = this.allById();
-    Object.keys(all).forEach(id => all[id] && all[id].remove());
+    Object.keys(all).forEach((id) => all[id] && all[id].remove());
     this.componentView?.remove();
-    [this.c, this.em, this.componentsById, this.component, this.componentView].forEach(i => (i = {}));
+    [this.em, this.componentsById, this.componentView].forEach((i) => (i = {}));
   }
 }

src/dom_components/model/Component.js

@@ -978,7 +978,7 @@ export default class Component extends StyleableModel {
   /**
    * Set new collection if `components` are provided, otherwise the
    * current collection is returned
-   * @param  {Component|String} [components] Component Definitions or HTML string
+   * @param  {Component|Component[]|String} [components] Component Definitions or HTML string
    * @param {Object} [opts={}] Options, same as in `Component.append()`
    * @returns {Collection|Array<[Component]>}
    * @example
@@ -1560,7 +1560,7 @@ export default class Component extends StyleableModel {
    * @param {Frame} frame Specific frame from which taking the element
    * @return {HTMLElement}
    */
-  getEl(frame) {
+  getEl(frame = undefined) {
     const view = this.getView(frame);
     return view && view.el;
   }

src/dom_components/model/ComponentComment.js

@@ -3,12 +3,12 @@ import Component from './ComponentTextNode';
 export default Component.extend(
   {
     defaults: {
-      ...Component.prototype.defaults
+      ...Component.prototype.defaults,
     },
 
     toHTML() {
       return `<!--${this.get('content')}-->`;
-    }
+    },
   },
   {
     isComponent(el) {
@@ -16,9 +16,9 @@ export default Component.extend(
         return {
           tagName: 'NULL',
           type: 'comment',
-          content: el.textContent
+          content: el.textContent,
         };
       }
-    }
+    },
   }
 );

src/dom_components/model/ComponentFrame.js

@@ -13,11 +13,11 @@ export default Component.extend(
         droppable: false,
         resizable: true,
         traits: ['id', 'title', 'src'],
-        attributes: { frameborder: '0' }
+        attributes: { frameborder: '0' },
       };
-    }
+    },
   },
   {
-    isComponent: el => toLowerCase(el.tagName) === type
+    isComponent: el => toLowerCase(el.tagName) === type,
   }
 );

src/dom_components/model/ComponentImage.js

@@ -29,7 +29,7 @@ export default Component.extend(
       </svg>`,
 
       // File to load asynchronously once the model is rendered
-      file: ''
+      file: '',
     },
 
     initialize(o, opt) {
@@ -61,7 +61,7 @@ export default Component.extend(
           if (!hasButtonBool) {
             tb.push({
               attributes: { class: 'fa fa-pencil' },
-              command: cmdName
+              command: cmdName,
             });
             this.set('toolbar', tb);
           }
@@ -134,11 +134,11 @@ export default Component.extend(
         search: el.search,
         hash: el.hash,
         port: el.port,
-        query
+        query,
       };
-    }
+    },
   },
   {
-    isComponent: el => toLowerCase(el.tagName) === 'img'
+    isComponent: el => toLowerCase(el.tagName) === 'img',
   }
 );

src/dom_components/model/ComponentLabel.js

@@ -9,10 +9,10 @@ export default Component.extend(
       ...Component.prototype.defaults,
       type,
       tagName: type,
-      traits: ['id', 'title', 'for']
-    }
+      traits: ['id', 'title', 'for'],
+    },
   },
   {
-    isComponent: el => toLowerCase(el.tagName) === type
+    isComponent: el => toLowerCase(el.tagName) === type,
   }
 );

src/dom_components/model/ComponentMap.js

@@ -21,7 +21,7 @@ export default Component.extend(
           label: 'Address',
           name: 'address',
           placeholder: 'eg. London, UK',
-          changeProp: 1
+          changeProp: 1,
         },
         {
           type: 'select',
@@ -30,8 +30,8 @@ export default Component.extend(
           changeProp: 1,
           options: [
             { value: 'q', name: 'Roadmap' },
-            { value: 'w', name: 'Satellite' }
-          ]
+            { value: 'w', name: 'Satellite' },
+          ],
         },
         {
           label: 'Zoom',
@@ -39,20 +39,16 @@ export default Component.extend(
           type: 'range',
           min: '1',
           max: '20',
-          changeProp: 1
-        }
-      ]
+          changeProp: 1,
+        },
+      ],
     },
 
     initialize(o, opt) {
       if (this.get('src')) this.parseFromSrc();
       else this.updateSrc();
       Component.prototype.initialize.apply(this, arguments);
-      this.listenTo(
-        this,
-        'change:address change:zoom change:mapType',
-        this.updateSrc
-      );
+      this.listenTo(this, 'change:address change:zoom change:mapType', this.updateSrc);
     },
 
     updateSrc() {
@@ -88,7 +84,7 @@ export default Component.extend(
       if (qr.q) this.set('address', qr.q);
       if (qr.z) this.set('zoom', qr.z);
       if (qr.t) this.set('mapType', qr.t);
-    }
+    },
   },
   {
     /**
@@ -101,13 +97,10 @@ export default Component.extend(
      */
     isComponent(el) {
       var result = '';
-      if (
-        toLowerCase(el.tagName) == 'iframe' &&
-        /maps\.google\.com/.test(el.src)
-      ) {
+      if (toLowerCase(el.tagName) == 'iframe' && /maps\.google\.com/.test(el.src)) {
         result = { type: 'map', src: el.src };
       }
       return result;
-    }
+    },
   }
 );

src/dom_components/model/ComponentScript.js

@@ -11,8 +11,8 @@ export default Component.extend(
       tagName: type,
       droppable: false,
       draggable: false,
-      layerable: false
-    }
+      layerable: false,
+    },
   },
   {
     isComponent(el) {
@@ -26,6 +26,6 @@ export default Component.extend(
 
         return result;
       }
-    }
+    },
   }
 );

src/dom_components/model/ComponentSvg.js

@@ -10,7 +10,7 @@ export default Component.extend(
       type,
       tagName: type,
       highlightable: 0,
-      resizable: { ratioDefault: 1 }
+      resizable: { ratioDefault: 1 },
     },
 
     getName() {
@@ -18,9 +18,9 @@ export default Component.extend(
       let customName = this.get('custom-name');
       name = name.charAt(0).toUpperCase() + name.slice(1);
       return customName || name;
-    }
+    },
   },
   {
-    isComponent: el => toLowerCase(el.tagName) === type
+    isComponent: el => toLowerCase(el.tagName) === type,
   }
 );

src/dom_components/model/ComponentSvgIn.js

@@ -9,10 +9,10 @@ export default Component.extend(
       ...Component.prototype.defaults,
       selectable: false,
       hoverable: false,
-      layerable: false
-    }
+      layerable: false,
+    },
   },
   {
-    isComponent: (el, opts = {}) => !!opts.inSvg
+    isComponent: (el, opts = {}) => !!opts.inSvg,
   }
 );

src/dom_components/model/ComponentTable.js

@@ -9,16 +9,16 @@ export default Component.extend(
       ...Component.prototype.defaults,
       type,
       tagName: type,
-      droppable: ['tbody', 'thead', 'tfoot']
+      droppable: ['tbody', 'thead', 'tfoot'],
     },
 
     initialize(o, opt) {
       Component.prototype.initialize.apply(this, arguments);
       const components = this.get('components');
       !components.length && components.add({ type: 'tbody' });
-    }
+    },
   },
   {
-    isComponent: el => toLowerCase(el.tagName) === type
+    isComponent: el => toLowerCase(el.tagName) === type,
   }
 );

src/dom_components/model/ComponentTableBody.js

@@ -12,7 +12,7 @@ export default Component.extend(
       draggable: ['table'],
       droppable: ['tr'],
       columns: 1,
-      rows: 1
+      rows: 1,
     },
 
     initialize(o, opt) {
@@ -32,22 +32,22 @@ export default Component.extend(
           while (clm--) {
             columnsToAdd.push({
               type: 'cell',
-              classes: ['cell']
+              classes: ['cell'],
             });
           }
 
           rowsToAdd.push({
             type: 'row',
             classes: ['row'],
-            components: columnsToAdd
+            components: columnsToAdd,
           });
         }
 
         components.add(rowsToAdd);
       }
-    }
+    },
   },
   {
-    isComponent: el => toLowerCase(el.tagName) === type
+    isComponent: el => toLowerCase(el.tagName) === type,
   }
 );

src/dom_components/model/ComponentTableCell.js

@@ -7,10 +7,10 @@ export default Component.extend(
       ...Component.prototype.defaults,
       type: 'cell',
       tagName: 'td',
-      draggable: ['tr']
-    }
+      draggable: ['tr'],
+    },
   },
   {
-    isComponent: el => ['td', 'th'].indexOf(toLowerCase(el.tagName)) >= 0
+    isComponent: el => ['td', 'th'].indexOf(toLowerCase(el.tagName)) >= 0,
   }
 );

src/dom_components/model/ComponentTableFoot.js

@@ -8,10 +8,10 @@ export default ComponentTableBody.extend(
     defaults: {
       ...ComponentTableBody.prototype.defaults,
       type,
-      tagName: type
-    }
+      tagName: type,
+    },
   },
   {
-    isComponent: el => toLowerCase(el.tagName) === type
+    isComponent: el => toLowerCase(el.tagName) === type,
   }
 );

src/dom_components/model/ComponentTableHead.js

@@ -8,10 +8,10 @@ export default ComponentTableBody.extend(
     defaults: {
       ...ComponentTableBody.prototype.defaults,
       type,
-      tagName: type
-    }
+      tagName: type,
+    },
   },
   {
-    isComponent: el => toLowerCase(el.tagName) === type
+    isComponent: el => toLowerCase(el.tagName) === type,
   }
 );

src/dom_components/model/ComponentTableRow.js

@@ -9,10 +9,10 @@ export default Component.extend(
       ...Component.prototype.defaults,
       tagName,
       draggable: ['thead', 'tbody', 'tfoot'],
-      droppable: ['th', 'td']
-    }
+      droppable: ['th', 'td'],
+    },
   },
   {
-    isComponent: el => toLowerCase(el.tagName) === tagName
+    isComponent: el => toLowerCase(el.tagName) === tagName,
   }
 );

src/dom_components/model/ComponentTextNode.js

@@ -9,14 +9,14 @@ export default Component.extend(
       droppable: false,
       layerable: false,
       selectable: false,
-      editable: true
+      editable: true,
     },
 
     toHTML() {
       const parent = this.parent();
       const cnt = this.get('content');
       return parent && parent.is('script') ? cnt : escape(cnt);
-    }
+    },
   },
   {
     isComponent(el) {
@@ -24,10 +24,10 @@ export default Component.extend(
       if (el.nodeType === 3) {
         result = {
           type: 'textnode',
-          content: el.textContent
+          content: el.textContent,
         };
       }
       return result;
-    }
+    },
   }
 );

src/dom_components/model/ComponentVideo.js

@@ -28,7 +28,7 @@ export default Component.extend(
       rel: 1, // YT related videos
       modestbranding: 0, // YT modest branding
       sources: [],
-      attributes: { allowfullscreen: 'allowfullscreen' }
+      attributes: { allowfullscreen: 'allowfullscreen' },
     },
 
     initialize(o, opt) {
@@ -153,8 +153,8 @@ export default Component.extend(
           { value: 'so', name: 'HTML5 Source' },
           { value: yt, name: 'Youtube' },
           { value: ytnc, name: 'Youtube (no cookie)' },
-          { value: vi, name: 'Vimeo' }
-        ]
+          { value: vi, name: 'Vimeo' },
+        ],
       };
     },
 
@@ -170,17 +170,17 @@ export default Component.extend(
           label: 'Source',
           name: 'src',
           placeholder: 'eg. ./media/video.mp4',
-          changeProp: 1
+          changeProp: 1,
         },
         {
           label: 'Poster',
           name: 'poster',
-          placeholder: 'eg. ./media/image.jpg'
+          placeholder: 'eg. ./media/image.jpg',
           // changeProp: 1
         },
         this.getAutoplayTrait(),
         this.getLoopTrait(),
-        this.getControlsTrait()
+        this.getControlsTrait(),
       ];
     },
     /**
@@ -195,7 +195,7 @@ export default Component.extend(
           label: 'Video ID',
           name: 'videoId',
           placeholder: 'eg. jNQXAC9IVRw',
-          changeProp: 1
+          changeProp: 1,
         },
         this.getAutoplayTrait(),
         this.getLoopTrait(),
@@ -204,14 +204,14 @@ export default Component.extend(
           type: 'checkbox',
           label: 'Related',
           name: 'rel',
-          changeProp: 1
+          changeProp: 1,
         },
         {
           type: 'checkbox',
           label: 'Modest',
           name: 'modestbranding',
-          changeProp: 1
-        }
+          changeProp: 1,
+        },
       ];
     },
 
@@ -227,16 +227,16 @@ export default Component.extend(
           label: 'Video ID',
           name: 'videoId',
           placeholder: 'eg. 123456789',
-          changeProp: 1
+          changeProp: 1,
         },
         {
           label: 'Color',
           name: 'color',
           placeholder: 'eg. FF0000',
-          changeProp: 1
+          changeProp: 1,
         },
         this.getAutoplayTrait(),
-        this.getLoopTrait()
+        this.getLoopTrait(),
       ];
     },
 
@@ -250,7 +250,7 @@ export default Component.extend(
         type: 'checkbox',
         label: 'Autoplay',
         name: 'autoplay',
-        changeProp: 1
+        changeProp: 1,
       };
     },
 
@@ -264,7 +264,7 @@ export default Component.extend(
         type: 'checkbox',
         label: 'Loop',
         name: 'loop',
-        changeProp: 1
+        changeProp: 1,
       };
     },
 
@@ -278,7 +278,7 @@ export default Component.extend(
         type: 'checkbox',
         label: 'Controls',
         name: 'controls',
-        changeProp: 1
+        changeProp: 1,
       };
     },
 
@@ -327,7 +327,7 @@ export default Component.extend(
       url += !this.get('controls') ? '&title=0&portrait=0&badge=0' : '';
       url += this.get('color') ? '&color=' + this.get('color') : '';
       return url;
-    }
+    },
   },
   {
     /**
@@ -345,10 +345,7 @@ export default Component.extend(
       const isYtncProv = /youtube-nocookie\.com\/embed/.test(src);
       const isViProv = /player\.vimeo\.com\/video/.test(src);
       const isExtProv = isYtProv || isYtncProv || isViProv;
-      if (
-        toLowerCase(tagName) == type ||
-        (toLowerCase(tagName) == 'iframe' && isExtProv)
-      ) {
+      if (toLowerCase(tagName) == type || (toLowerCase(tagName) == 'iframe' && isExtProv)) {
         result = { type: 'video' };
         if (src) result.src = src;
         if (isExtProv) {
@@ -358,6 +355,6 @@ export default Component.extend(
         }
       }
       return result;
-    }
+    },
   }
 );

src/dom_components/model/Components.js

@@ -40,7 +40,7 @@ const getComponentsFromDefs = (items, all = {}, opts = {}) => {
   });
 };
 
-export default Backbone.Collection.extend({
+export default class Components extends Backbone.Collection {
   initialize(models, opt = {}) {
     this.opt = opt;
     this.listenTo(this, 'add', this.onAdd);
@@ -50,7 +50,7 @@ export default Backbone.Collection.extend({
     this.config = config;
     this.em = em;
     this.domc = opt.domc || (em && em.get('DomComponents'));
-  },
+  }
 
   resetChildren(models, opts = {}) {
     const coll = this;
@@ -60,7 +60,7 @@ export default Backbone.Collection.extend({
     opts.keepIds = getComponentIds(prev).filter(pr => newIds.indexOf(pr) >= 0);
     toRemove.forEach(md => this.removeChildren(md, coll, opts));
     models.each(model => this.onAdd(model));
-  },
+  }
 
   resetFromString(input = '', opts = {}) {
     opts.keepIds = getComponentIds(this);
@@ -71,7 +71,7 @@ export default Backbone.Collection.extend({
     const newCmps = getComponentsFromDefs(cmps, allByID, opts);
     this.reset(newCmps, opts);
     this.em?.trigger('component:content', this.parent, opts, input);
-  },
+  }
 
   removeChildren(removed, coll, opts = {}) {
     // Removing a parent component can cause this function
@@ -123,7 +123,7 @@ export default Backbone.Collection.extend({
     em.stopListening(removed);
     em.stopListening(removed.get('classes'));
     removed.__postRemove();
-  },
+  }
 
   model(attrs, options) {
     const { opt } = options.collection;
@@ -155,7 +155,7 @@ export default Backbone.Collection.extend({
     }
 
     return new model(attrs, options);
-  },
+  }
 
   parseString(value, opt = {}) {
     const { em, domc } = this;
@@ -173,7 +173,7 @@ export default Backbone.Collection.extend({
     }
 
     return parsed.html;
-  },
+  }
 
   add(models, opt = {}) {
     opt.keepIds = [...(opt.keepIds || []), ...getComponentIds(opt.previousModels)];
@@ -197,7 +197,7 @@ export default Backbone.Collection.extend({
     const result = Backbone.Collection.prototype.add.apply(this, [models, opt]);
     this.__firstAdd = result;
     return result;
-  },
+  }
 
   /**
    * Process component definition.
@@ -250,7 +250,7 @@ export default Backbone.Collection.extend({
     }
 
     return model;
-  },
+  }
 
   onAdd(model, c, opts = {}) {
     const { domc, em } = this;
@@ -267,9 +267,9 @@ export default Backbone.Collection.extend({
 
     model.__postAdd({ recursive: 1 });
     this.__onAddEnd();
-  },
+  }
 
-  __onAddEnd: debounce(function () {
+  __onAddEnd = debounce(function () {
     // TODO to check symbols on load, probably this might be removed as symbols
     // are always recovered from the model
     // const { domc } = this;
@@ -295,5 +295,5 @@ export default Backbone.Collection.extend({
     //   });
     // };
     // onAll(toCheck);
-  }),
-});
+  });
+}

src/dom_components/model/ToolbarButton.js

@@ -1,8 +1,10 @@
 import Backbone from 'backbone';
 
-export default Backbone.Model.extend({
-  defaults: {
-    command: '',
-    attributes: {}
+export default class ToolbarButton extends Backbone.Model {
+  defaults() {
+    return {
+      command: '',
+      attributes: {},
+    };
   }
-});
+}

src/dom_components/view/ComponentCommentView.js

@@ -1,7 +1,7 @@
 import ComponentView from './ComponentTextNodeView';
 
-export default ComponentView.extend({
+export default class ComponentCommentView extends ComponentView {
   _createElement() {
     return document.createComment(this.model.get('content'));
   }
-});
+}

src/dom_components/view/ComponentFrameView.js

@@ -1,31 +1,33 @@
 import ComponentView from './ComponentView';
 import { createEl, find, attrUp } from 'utils/dom';
 
-export default ComponentView.extend({
-  tagName: 'div',
+export default class ComponentFrameView extends ComponentView.extend {
+  tagName() {
+    return 'div';
+  }
 
   initialize(...args) {
     ComponentView.prototype.initialize.apply(this, args);
     this.listenTo(this.model, 'change:attributes:src', this.updateSrc);
-  },
+  }
 
   updateSrc() {
     const frame = find(this.el, 'iframe')[0];
     frame && attrUp(frame, { src: this.__getSrc() });
-  },
+  }
 
   render(...args) {
     ComponentView.prototype.render.apply(this, args);
     const frame = createEl('iframe', {
       class: `${this.ppfx}no-pointer`,
       style: 'width: 100%; height: 100%; border: none',
-      src: this.__getSrc()
+      src: this.__getSrc(),
     });
     this.el.appendChild(frame);
     return this;
-  },
+  }
 
   __getSrc() {
     return this.model.getAttributes().src || '';
   }
-});
+}

src/dom_components/view/ComponentImageView.js

@@ -1,23 +1,26 @@
 import { isString } from 'underscore';
 import ComponentView from './ComponentView';
 
-export default ComponentView.extend({
-  tagName: 'img',
-
-  events: {
-    dblclick: 'onActive',
-    click: 'initResize',
-    error: 'onError',
-    load: 'onLoad',
-    dragstart: 'noDrag',
-  },
+export default class ComponentImageView extends ComponentView {
+  tagName() {
+    return 'img';
+  }
+  events() {
+    return {
+      dblclick: 'onActive',
+      click: 'initResize',
+      error: 'onError',
+      load: 'onLoad',
+      dragstart: 'noDrag',
+    };
+  }
 
   initialize(o) {
     ComponentView.prototype.initialize.apply(this, arguments);
     this.listenTo(this.model, 'change:src', this.updateSrc);
     this.classEmpty = `${this.ppfx}plh-image`;
     this.fetchFile();
-  },
+  }
 
   /**
    * Fetch file if exists
@@ -36,7 +39,7 @@ export default ComponentView.extend({
       });
       model.set('file', '');
     }
-  },
+  }
 
   /**
    * Update src attribute
@@ -48,7 +51,7 @@ export default ComponentView.extend({
     const srcExists = src && !model.isDefaultSrc();
     model.addAttributes({ src });
     $el[srcExists ? 'removeClass' : 'addClass'](classEmpty);
-  },
+  }
 
   /**
    * Open dialog for image changing
@@ -71,22 +74,22 @@ export default ComponentView.extend({
         accept: 'image/*',
       });
     }
-  },
+  }
 
   onError() {
     const fallback = this.model.getSrcResult({ fallback: 1 });
     if (fallback) this.el.src = fallback;
-  },
+  }
 
   onLoad() {
     // Used to update component tools box (eg. toolbar, resizer) once the image is loaded
     this.em.trigger('change:canvasOffset');
-  },
+  }
 
   noDrag(ev) {
     ev.preventDefault();
     return false;
-  },
+  }
 
   render() {
     this.renderAttributes();
@@ -98,5 +101,5 @@ export default ComponentView.extend({
     this.postRender();
 
     return this;
-  },
-});
+  }
+}

src/dom_components/view/ComponentLabelView.js

@@ -1,5 +1,7 @@
 import ComponentLinkView from './ComponentLinkView';
 
-export default ComponentLinkView.extend({
-  tagName: 'span' // Avoid Firefox bug with label editing #2332
-});
+export default class ComponentLabelView extends ComponentLinkView {
+  tagName() {
+    return 'span';
+  } // Avoid Firefox bug with label editing #2332
+}

src/dom_components/view/ComponentLinkView.js

@@ -1,6 +1,6 @@
 import ComponentView from './ComponentTextView';
 
-export default ComponentView.extend({
+export default class ComponentLinkView extends ComponentView {
   render(...args) {
     ComponentView.prototype.render.apply(this, args);
 
@@ -10,4 +10,4 @@ export default ComponentView.extend({
 
     return this;
   }
-});
+}

src/dom_components/view/ComponentMapView.js

@@ -1,15 +1,18 @@
-import Backbone from 'backbone';
 import ComponentView from './ComponentImageView';
 
-export default ComponentView.extend({
-  tagName: 'div',
+export default class ComponentMapView extends ComponentView {
+  tagName() {
+    return 'div';
+  }
 
-  events: {},
+  events() {
+    return {};
+  }
 
   initialize(o) {
     ComponentView.prototype.initialize.apply(this, arguments);
     this.classEmpty = this.ppfx + 'plh-map';
-  },
+  }
 
   /**
    * Update the map on the canvas
@@ -17,7 +20,7 @@ export default ComponentView.extend({
    */
   updateSrc() {
     this.getIframe().src = this.model.get('src');
-  },
+  }
 
   getIframe() {
     if (!this.iframe) {
@@ -30,7 +33,7 @@ export default ComponentView.extend({
       this.iframe = ifrm;
     }
     return this.iframe;
-  },
+  }
 
   render(...args) {
     ComponentView.prototype.render.apply(this, args);
@@ -38,4 +41,4 @@ export default ComponentView.extend({
     this.el.appendChild(this.getIframe());
     return this;
   }
-});
+}

src/dom_components/view/ComponentScriptView.js

@@ -1,9 +1,13 @@
 import ComponentView from './ComponentImageView';
 
-export default ComponentView.extend({
-  tagName: 'script',
+export default class ComponentScriptView extends ComponentView {
+  tagName() {
+    return 'script';
+  }
 
-  events: {},
+  events() {
+    return {};
+  }
 
   render() {
     const { model, em } = this;
@@ -39,4 +43,4 @@ export default ComponentView.extend({
     this.postRender();
     return this;
   }
-});
+}

src/dom_components/view/ComponentSvgView.js

@@ -1,7 +1,7 @@
 import ComponentView from './ComponentView';
 
-export default ComponentView.extend({
-  _createElement: function(tagName) {
+export default class ComponentSvgView extends ComponentView {
+  _createElement(tagName) {
     return document.createElementNS('http://www.w3.org/2000/svg', tagName);
   }
-});
+}

src/dom_components/view/ComponentTableBodyView.js

@@ -1,3 +1,3 @@
 import ComponentView from './ComponentView';
 
-export default ComponentView.extend({});
+export default class ComponentTableBodyView extends ComponentView {}

src/dom_components/view/ComponentTableView.js

@@ -1,5 +1,5 @@
 import ComponentView from './ComponentView';
 
 export default ComponentView.extend({
-  events: {}
+  events: {},
 });

src/dom_components/view/ComponentTextNodeView.js

@@ -1,24 +1,24 @@
 import ComponentView from './ComponentView';
 
-export default ComponentView.extend({
+export default class ComponentTextNodeView extends ComponentView {
   initialize() {
     ComponentView.prototype.initialize.apply(this, arguments);
-  },
+  }
 
   // Clear methods used on Nodes with attributes
-  _setAttributes() {},
-  renderAttributes() {},
-  updateStatus() {},
-  updateClasses() {},
-  setAttribute() {},
-  updateAttributes() {},
-  initClasses() {},
-  initComponents() {},
-  delegateEvents() {},
+  _setAttributes() {}
+  renderAttributes() {}
+  updateStatus() {}
+  updateClasses() {}
+  setAttribute() {}
+  updateAttributes() {}
+  initClasses() {}
+  initComponents() {}
+  delegateEvents() {}
 
   _createElement() {
     return document.createTextNode('');
-  },
+  }
 
   render() {
     const { model, el } = this;
@@ -26,4 +26,4 @@ export default ComponentView.extend({
     el.textContent = model.get('content');
     return this;
   }
-});
+}

src/dom_components/view/ComponentTextView.js

@@ -4,11 +4,13 @@ import { bindAll } from 'underscore';
 
 const compProt = ComponentView.prototype;
 
-export default ComponentView.extend({
-  events: {
-    dblclick: 'onActive',
-    input: 'onInput',
-  },
+export default class ComponentTextView extends ComponentView {
+  events() {
+    return {
+      dblclick: 'onActive',
+      input: 'onInput',
+    };
+  }
 
   initialize(o) {
     compProt.initialize.apply(this, arguments);
@@ -19,11 +21,11 @@ export default ComponentView.extend({
     this.listenTo(model, 'change:content', this.updateContentText);
     this.listenTo(model, 'sync:content', this.syncContent);
     this.rte = em && em.get('RichTextEditor');
-  },
+  }
 
   updateContentText(m, v, opts = {}) {
     !opts.fromDisable && this.disableEditing();
-  },
+  }
 
   canActivate() {
     const { model, rteEnabled, em } = this;
@@ -52,7 +54,7 @@ export default ComponentView.extend({
     }
 
     return { result, delegate };
-  },
+  }
 
   /**
    * Enable element content editing
@@ -85,11 +87,11 @@ export default ComponentView.extend({
     }
 
     this.toggleEvents(1);
-  },
+  }
 
   onDisable() {
     this.disableEditing();
-  },
+  }
 
   /**
    * Disable element content editing
@@ -115,7 +117,7 @@ export default ComponentView.extend({
     }
 
     this.toggleEvents();
-  },
+  }
 
   /**
    * get content from RTE
@@ -126,7 +128,7 @@ export default ComponentView.extend({
     const canGetRteContent = activeRte && typeof activeRte.getContent === 'function';
 
     return canGetRteContent ? activeRte.getContent() : this.getChildrenContainer().innerHTML;
-  },
+  }
 
   /**
    * Merge content from the DOM to the model
@@ -147,7 +149,7 @@ export default ComponentView.extend({
     } else {
       comps.resetFromString(content, opts);
     }
-  },
+  }
 
   insertComponent(content, opts = {}) {
     const { model, el } = this;
@@ -184,7 +186,7 @@ export default ComponentView.extend({
     }
 
     return model.append(content, opts);
-  },
+  }
 
   /**
    * Callback on input event
@@ -197,7 +199,7 @@ export default ComponentView.extend({
 
     // Update toolbars
     em && em.trigger(ev, this.model);
-  },
+  }
 
   /**
    * Isolate disable propagation method
@@ -206,7 +208,7 @@ export default ComponentView.extend({
    * */
   disablePropagation(e) {
     e.stopPropagation();
-  },
+  }
 
   /**
    * Enable/Disable events
@@ -245,5 +247,5 @@ export default ComponentView.extend({
         el && el.tagName == 'BODY' && (el = 0);
       }
     }
-  },
-});
+  }
+}

src/dom_components/view/ComponentVideoView.js

@@ -1,28 +1,24 @@
 import ComponentView from './ComponentImageView';
 import OComponentView from './ComponentView';
 
-export default ComponentView.extend({
-  tagName: 'div',
+export default class ComponentVideoView extends ComponentView {
+  tagName() {
+    return 'div';
+  }
 
-  events: {},
+  events() {
+    return {};
+  }
 
   initialize(o) {
     OComponentView.prototype.initialize.apply(this, arguments);
     const { model } = this;
-    const props = [
-      'loop',
-      'autoplay',
-      'controls',
-      'color',
-      'rel',
-      'modestbranding',
-      'poster'
-    ];
+    const props = ['loop', 'autoplay', 'controls', 'color', 'rel', 'modestbranding', 'poster'];
     const events = props.map(p => `change:${p}`).join(' ');
     this.listenTo(model, 'change:provider', this.updateProvider);
     this.listenTo(model, 'change:src', this.updateSrc);
     this.listenTo(model, events, this.updateVideo);
-  },
+  }
 
   /**
    * Rerender on update of the provider
@@ -32,7 +28,7 @@ export default ComponentView.extend({
     var prov = this.model.get('provider');
     this.el.innerHTML = '';
     this.el.appendChild(this.renderByProvider(prov));
-  },
+  }
 
   /**
    * Update the source of the video
@@ -57,7 +53,7 @@ export default ComponentView.extend({
     }
 
     videoEl.src = src;
-  },
+  }
 
   /**
    * Update video parameters
@@ -79,7 +75,7 @@ export default ComponentView.extend({
         videoEl.controls = md.get('controls');
         videoEl.poster = md.get('poster');
     }
-  },
+  }
 
   renderByProvider(prov) {
     var videoEl;
@@ -98,14 +94,14 @@ export default ComponentView.extend({
     }
     this.videoEl = videoEl;
     return videoEl;
-  },
+  }
 
   renderSource() {
     var el = document.createElement('video');
     el.src = this.model.get('src');
     this.initVideoEl(el);
     return el;
-  },
+  }
 
   renderYoutube() {
     var el = document.createElement('iframe');
@@ -114,7 +110,7 @@ export default ComponentView.extend({
     el.setAttribute('allowfullscreen', true);
     this.initVideoEl(el);
     return el;
-  },
+  }
 
   renderYoutubeNoCookie() {
     var el = document.createElement('iframe');
@@ -123,7 +119,7 @@ export default ComponentView.extend({
     el.setAttribute('allowfullscreen', true);
     this.initVideoEl(el);
     return el;
-  },
+  }
 
   renderVimeo() {
     var el = document.createElement('iframe');
@@ -132,13 +128,13 @@ export default ComponentView.extend({
     el.setAttribute('allowfullscreen', true);
     this.initVideoEl(el);
     return el;
-  },
+  }
 
   initVideoEl(el) {
     el.className = this.ppfx + 'no-pointer';
     el.style.height = '100%';
     el.style.width = '100%';
-  },
+  }
 
   render(...args) {
     ComponentView.prototype.render.apply(this, args);
@@ -148,4 +144,4 @@ export default ComponentView.extend({
     this.updateVideo();
     return this;
   }
-});
+}

src/dom_components/view/ComponentView.js

@@ -6,14 +6,14 @@ import Selectors from 'selector_manager/model/Selectors';
 import { replaceWith } from 'utils/dom';
 import { setViewEl } from 'utils/mixins';
 
-export default Backbone.View.extend({
+export default class ComponentView extends Backbone.View {
   className() {
     return this.getClasses();
-  },
+  }
 
   tagName() {
     return this.model.get('tagName');
-  },
+  }
 
   initialize(opt = {}) {
     const model = this.model;
@@ -50,13 +50,13 @@ export default Backbone.View.extend({
     };
     this.delegateEvents();
     !modelOpt.temporary && this.init(this._clbObj());
-  },
+  }
 
   __isDraggable() {
     const { model, config } = this;
     const { draggable } = model.attributes;
     return config.draggableComponents && draggable;
-  },
+  }
 
   _clbObj() {
     const { em, model, el } = this;
@@ -65,27 +65,27 @@ export default Backbone.View.extend({
       model,
       el,
     };
-  },
+  }
 
   /**
    * Initialize callback
    */
-  init() {},
+  init() {}
 
   /**
    * Remove callback
    */
-  removed() {},
+  removed() {}
 
   /**
    * Callback executed when the `active` event is triggered on component
    */
-  onActive() {},
+  onActive() {}
 
   /**
    * Callback executed when the `disable` event is triggered on component
    */
-  onDisable() {},
+  onDisable() {}
 
   remove() {
     Backbone.View.prototype.remove.apply(this, arguments);
@@ -102,7 +102,7 @@ export default Backbone.View.extend({
     $el.data({ model: '', collection: '', view: '' });
     // delete model.view; // Sorter relies on this property
     return this;
-  },
+  }
 
   handleDragStart(event) {
     if (!this.__isDraggable()) return false;
@@ -112,7 +112,7 @@ export default Backbone.View.extend({
       target: this.model,
       event,
     });
-  },
+  }
 
   initClasses() {
     const { model } = this;
@@ -125,7 +125,7 @@ export default Backbone.View.extend({
       this.listenTo(classes, 'add remove change', this.updateClasses);
       classes.length && this.importClasses();
     }
-  },
+  }
 
   initComponents(opts = {}) {
     const { model, $el, childrenView } = this;
@@ -140,7 +140,7 @@ export default Backbone.View.extend({
       !opts.avoidRender && this.renderChildren();
       this.listenTo(...toListen);
     }
-  },
+  }
 
   /**
    * Handle any property change
@@ -155,7 +155,7 @@ export default Backbone.View.extend({
     for (let prop in model.changed) {
       model.emitUpdate(prop);
     }
-  },
+  }
 
   /**
    * Import, if possible, classes inside main container
@@ -169,7 +169,7 @@ export default Backbone.View.extend({
         clm.add(m.get('name'));
       });
     }
-  },
+  }
 
   /**
    * Update item on status change
@@ -212,7 +212,7 @@ export default Backbone.View.extend({
 
     cls = cls.trim();
     cls && el.setAttribute('class', cls);
-  },
+  }
 
   /**
    * Update highlight attribute
@@ -223,7 +223,7 @@ export default Backbone.View.extend({
     const isTextable = model.get('textable');
     const hl = model.get('highlightable') && (isTextable || !model.isChildOf('text'));
     this.setAttribute('data-gjs-highlightable', hl ? true : '');
-  },
+  }
 
   /**
    * Update style attribute
@@ -238,7 +238,7 @@ export default Backbone.View.extend({
     } else {
       this.setAttribute('style', model.styleToString(opts));
     }
-  },
+  }
 
   /**
    * Update classe attribute
@@ -251,7 +251,7 @@ export default Backbone.View.extend({
     // Regenerate status class
     this.updateStatus();
     this.onAttrUpdate();
-  },
+  }
 
   /**
    * Update single attribute
@@ -261,7 +261,7 @@ export default Backbone.View.extend({
   setAttribute(name, value) {
     const el = this.$el;
     value ? el.attr(name, value) : el.removeAttr(name);
-  },
+  }
 
   /**
    * Get classes from attributes.
@@ -272,7 +272,7 @@ export default Backbone.View.extend({
    * */
   getClasses() {
     return this.model.getClasses().join(' ');
-  },
+  }
 
   /**
    * Update attributes
@@ -304,7 +304,7 @@ export default Backbone.View.extend({
     keys(attr).forEach(key => attr[key] === false && delete attr[key]);
 
     $el.attr(attr);
-  },
+  }
 
   /**
    * Update component content
@@ -314,7 +314,7 @@ export default Backbone.View.extend({
     const content = this.model.get('content');
     const hasComps = this.model.components().length;
     this.getChildrenContainer().innerHTML = hasComps ? '' : content;
-  },
+  }
 
   /**
    * Prevent default helper
@@ -323,7 +323,7 @@ export default Backbone.View.extend({
    */
   prevDef(e) {
     e.preventDefault();
-  },
+  }
 
   /**
    * Render component's script
@@ -333,7 +333,7 @@ export default Backbone.View.extend({
     const { model, em } = this;
     if (!model.get('script')) return;
     em && em.get('Canvas').getCanvasView().updateScript(this);
-  },
+  }
 
   /**
    * Return children container
@@ -369,7 +369,7 @@ export default Backbone.View.extend({
     }
 
     return container;
-  },
+  }
 
   /**
    * This returns rect informations not affected by the canvas zoom.
@@ -399,7 +399,7 @@ export default Backbone.View.extend({
     assignRect(target);
 
     return rect;
-  },
+  }
 
   isInViewport({ rect } = {}) {
     const { el } = this;
@@ -415,7 +415,7 @@ export default Backbone.View.extend({
       top <= frame.scrollBottom &&
       left <= frameElement.offsetWidth + body.scrollLeft
     );
-  },
+  }
 
   scrollIntoView(opts = {}) {
     const rect = this.getOffsetRect();
@@ -435,7 +435,7 @@ export default Backbone.View.extend({
         });
       }
     }
-  },
+  }
 
   /**
    * Recreate the element of the view
@@ -447,18 +447,18 @@ export default Backbone.View.extend({
     this._setData();
     replaceWith(el, this.el);
     this.render();
-  },
+  }
 
   _setData() {
     const { model } = this;
     const collection = model.components();
     const view = this;
     this.$el.data({ model, collection, view });
-  },
+  }
 
   _getFrame() {
     return this.config.frameView;
-  },
+  }
 
   /**
    * Render children components
@@ -482,14 +482,14 @@ export default Backbone.View.extend({
     for (var i = 0, len = childNodes.length; i < len; i++) {
       container.appendChild(childNodes.shift());
     }
-  },
+  }
 
   renderAttributes() {
     this.updateAttributes();
     this.updateClasses();
-  },
+  }
 
-  onAttrUpdate() {},
+  onAttrUpdate() {}
 
   render() {
     this.renderAttributes();
@@ -500,13 +500,13 @@ export default Backbone.View.extend({
     this.postRender();
 
     return this;
-  },
+  }
 
   postRender() {
     if (!this.modelOpt.temporary) {
       this.onRender(this._clbObj());
     }
-  },
+  }
 
-  onRender() {},
-});
+  onRender() {}
+}

src/dom_components/view/ComponentsView.js

@@ -2,7 +2,7 @@ import Backbone from 'backbone';
 import { isUndefined } from 'underscore';
 import { removeEl } from '../../utils/dom';
 
-export default Backbone.View.extend({
+export default class ComponentsView extends Backbone.View {
   initialize(o) {
     this.opts = o || {};
     this.config = o.config || {};
@@ -11,7 +11,7 @@ export default Backbone.View.extend({
     this.listenTo(coll, 'add', this.addTo);
     this.listenTo(coll, 'reset', this.resetChildren);
     this.listenTo(coll, 'remove', this.removeChildren);
-  },
+  }
 
   removeChildren(removed, coll, opts = {}) {
     removed.views.forEach(view => {
@@ -24,7 +24,7 @@ export default Backbone.View.extend({
 
     const inner = removed.components();
     inner.forEach(it => this.removeChildren(it, coll, opts));
-  },
+  }
 
   /**
    * Add to collection
@@ -45,7 +45,7 @@ export default Backbone.View.extend({
       };
       triggerAdd(model);
     }
-  },
+  }
 
   /**
    * Add new object to collection
@@ -120,13 +120,13 @@ export default Backbone.View.extend({
     }
 
     return rendered;
-  },
+  }
 
   resetChildren(models, { previousModels = [] } = {}) {
     this.parentEl.innerHTML = '';
     previousModels.forEach(md => this.removeChildren(md, this.collection));
     models.each(model => this.addToCollection(model));
-  },
+  }
 
   render(parent) {
     const el = this.el;
@@ -136,5 +136,5 @@ export default Backbone.View.extend({
     el.innerHTML = '';
     el.appendChild(frag);
     return this;
-  },
-});
+  }
+}

src/dom_components/view/ToolbarButtonView.js

@@ -1,23 +1,23 @@
 import Backbone from 'backbone';
 
-export default Backbone.View.extend({
+export default class ToolbarButtonView extends Backbone.View {
   events() {
     return (
       this.model.get('events') || {
         mousedown: 'handleClick',
       }
     );
-  },
+  }
 
   attributes() {
     return this.model.get('attributes');
-  },
+  }
 
   initialize(opts = {}) {
     const { config = {} } = opts;
     this.em = config.em;
     this.editor = config.editor;
-  },
+  }
 
   handleClick(event) {
     event.preventDefault();
@@ -48,7 +48,7 @@ export default Backbone.View.extend({
 
     em.trigger('toolbar:run:before');
     this.execCommand(calibrated);
-  },
+  }
 
   execCommand(event) {
     const opts = { event };
@@ -62,7 +62,7 @@ export default Backbone.View.extend({
     if (typeof command === 'string') {
       editor.runCommand(command, opts);
     }
-  },
+  }
 
   render() {
     const { editor, $el, model } = this;
@@ -73,5 +73,5 @@ export default Backbone.View.extend({
     id && $el.addClass(`${pfx}toolbar-item__${id}`);
     label && $el.append(label);
     return this;
-  },
-});
+  }
+}

src/editor/model/Editor.ts

@@ -98,10 +98,15 @@ export default class EditorModel extends Model {
   get toLoad(): any[] {
     return this.get('toLoad');
   }
+
   get selected(): Selected {
     return this.get('selected');
   }
 
+  get shallow(): EditorModel {
+    return this.get('shallow');
+  }
+
   constructor(conf = {}) {
     super();
     this._config = conf;
@@ -405,7 +410,7 @@ export default class EditorModel extends Model {
     const { event } = opts;
     const ctrlKey = event && (event.ctrlKey || event.metaKey);
     const { shiftKey } = event || {};
-    const els = (isArray(el) ? el : [el]).map(el => getModel(el, $));
+    const els = (isArray(el) ? el : [el]).map((el) => getModel(el, $));
     const selected = this.getSelectedAll();
     const mltSel = this.getConfig().multipleSelection;
     let added;
@@ -413,7 +418,7 @@ export default class EditorModel extends Model {
     // If an array is passed remove all selected
     // expect those yet to be selected
     const multiple = isArray(el);
-    multiple && this.removeSelected(selected.filter(s => !contains(els, s)));
+    multiple && this.removeSelected(selected.filter((s) => !contains(els, s)));
 
     els.forEach((el) => {
       let model = getModel(el, undefined);
@@ -491,7 +496,7 @@ export default class EditorModel extends Model {
     const model = getModel(el, $);
     const models = isArray(model) ? model : [model];
 
-    models.forEach(model => {
+    models.forEach((model) => {
       if (model && !model.get('selectable')) return;
       const { selected } = this;
       opts.forceChange && this.removeSelected(model, opts);
@@ -520,7 +525,7 @@ export default class EditorModel extends Model {
     const model = getModel(el, $);
     const models = isArray(model) ? model : [model];
 
-    models.forEach(model => {
+    models.forEach((model) => {
       if (this.selected.hasComponent(model)) {
         this.removeSelected(model, opts);
       } else {
@@ -897,7 +902,7 @@ export default class EditorModel extends Model {
     this.destroyed = true;
     ['_config', 'view', '_previousAttributes', '_events', '_listeners'].forEach(
       //@ts-ignore
-      i => (this[i] = {})
+      (i) => (this[i] = {})
     );
     editors.splice(editors.indexOf(editor), 1);
     //@ts-ignore

src/i18n/locale/ca.js

@@ -5,7 +5,7 @@ export default {
     addButton: 'Afegir imatge',
     inputPlh: 'http://ruta/a/la/imatge.jpg',
     modalTitle: 'Escollir imatge',
-    uploadTitle: 'Arrossega els fitxers aquí o fes clic per a pujar-ne'
+    uploadTitle: 'Arrossega els fitxers aquí o fes clic per a pujar-ne',
   },
   // Here just as a reference, GrapesJS core doesn't contain any block,
   // so this should be omitted from other local files
@@ -15,7 +15,7 @@ export default {
     },
     categories: {
       // 'category-id': 'Category Label',
-    }
+    },
   },
   domComponents: {
     names: {
@@ -33,8 +33,8 @@ export default {
       thead: 'Capçalera de la taula',
       table: 'Taula',
       row: 'Fila de la taula',
-      cell: 'Cel·la de la taula'
-    }
+      cell: 'Cel·la de la taula',
+    },
   },
   deviceManager: {
     device: 'Dispositius',
@@ -42,8 +42,8 @@ export default {
       desktop: 'Escriptori',
       tablet: 'Tauleta',
       mobileLandscape: 'Mòbil en horitzontal',
-      mobilePortrait: 'Mòbil en vertical'
-    }
+      mobilePortrait: 'Mòbil en vertical',
+    },
   },
   panels: {
     buttons: {
@@ -52,12 +52,12 @@ export default {
         fullscreen: 'Pantalla sencera',
         'sw-visibility': 'Veure components',
         'export-template': 'Veure codi',
-        'open-sm': 'Obrir Administrador d\'estils',
+        'open-sm': "Obrir Administrador d'estils",
         'open-tm': 'Configuració',
         'open-layers': 'Obrir Aministrador de capes',
-        'open-blocks': 'Obrir Blocs'
-      }
-    }
+        'open-blocks': 'Obrir Blocs',
+      },
+    },
   },
   selectorManager: {
     label: 'Classes',
@@ -66,11 +66,11 @@ export default {
     states: {
       hover: 'A sobre',
       active: 'Clic',
-      'nth-of-type(2n)': 'Parell/Senar'
-    }
+      'nth-of-type(2n)': 'Parell/Senar',
+    },
   },
   styleManager: {
-    empty: 'Escull un element abans d\'utilitzar l\'Administrador d\'estils',
+    empty: "Escull un element abans d'utilitzar l'Administrador d'estils",
     layer: 'Capa',
     fileButton: 'Imatges',
     sectors: {
@@ -80,7 +80,7 @@ export default {
       decorations: 'Decoracions',
       extra: 'Extres',
       flex: 'Flex',
-      dimension: 'Tamany'
+      dimension: 'Tamany',
     },
     // The core library generates the name by their `property` name
     properties: {
@@ -115,8 +115,8 @@ export default {
       'text-shadow': 'Ombra del text',
       'text-shadow-h': 'Ombra del text: horizontal',
       'text-shadow-v': 'Ombra del text: vertical',
-      'text-shadow-blur': 'Desenfocament de l\'ombra del text',
-      'text-shadow-color': 'Color de l\'ombra del text',
+      'text-shadow-blur': "Desenfocament de l'ombra del text",
+      'text-shadow-color': "Color de l'ombra del text",
       'border-top-left': 'Marc superior esquerra',
       'border-top-right': 'Marc superior dret',
       'border-bottom-left': 'Marc inferior esquerra',
@@ -133,10 +133,10 @@ export default {
       'box-shadow': 'Ombra de la capsa',
       'box-shadow-h': 'Ombra de la capsa: horizontal',
       'box-shadow-v': 'Ombra de la capsa: vertical',
-      'box-shadow-blur': 'Desenfocament de l\'ombra de la capsa',
-      'box-shadow-spread': 'Propagació de l\'ombra de la capsa',
-      'box-shadow-color': 'Color de l\'ombra de la capsa',
-      'box-shadow-type': 'Tipus de l\'ombra de la capsa',
+      'box-shadow-blur': "Desenfocament de l'ombra de la capsa",
+      'box-shadow-spread': "Propagació de l'ombra de la capsa",
+      'box-shadow-color': "Color de l'ombra de la capsa",
+      'box-shadow-type': "Tipus de l'ombra de la capsa",
       background: 'Fons',
       'background-image': 'Imatge de fons',
       'background-repeat': 'Repetir fons',
@@ -165,11 +165,11 @@ export default {
       'flex-grow': 'Creixement flex',
       'flex-shrink': 'Contracció flex',
       'align-self': 'Alineació pròpia',
-      'background-color': 'Color de fons'
-    }
+      'background-color': 'Color de fons',
+    },
   },
   traitManager: {
-    empty: 'Escull un element abans d\'usar l\'Administrador de característiques',
+    empty: "Escull un element abans d'usar l'Administrador de característiques",
     label: 'Configuració de components',
     traits: {
       // The core library generates the name by their `name` property
@@ -177,22 +177,22 @@ export default {
         id: 'Identificador',
         alt: 'Títol alternatiu',
         title: 'Títol',
-        href: 'Enllaç'
+        href: 'Enllaç',
       },
       // In a simple trait, like text input, these are used on input attributes
       attributes: {
         id: traitInputAttr,
         alt: traitInputAttr,
         title: traitInputAttr,
-        href: { placeholder: 'ex. https://google.com' }
+        href: { placeholder: 'ex. https://google.com' },
       },
       // In a trait like select, these are used to translate option names
       options: {
         target: {
           false: 'Mateixa pestanya/finestra',
-          _blank: 'Nova pestanya/finestra'
-        }
-      }
-    }
-  }
+          _blank: 'Nova pestanya/finestra',
+        },
+      },
+    },
+  },
 };

src/i18n/locale/el.js

@@ -5,7 +5,7 @@ export default {
     addButton: 'Προσθήκη Εικόνας',
     inputPlh: 'http://διαδρομή/μέχρι/την/εικόνα.jpg',
     modalTitle: 'Επιλογή Εικόνας',
-    uploadTitle: 'Αφήστε τα αρχεία εδώ ή κάντε κλικ για ανέβασμα'
+    uploadTitle: 'Αφήστε τα αρχεία εδώ ή κάντε κλικ για ανέβασμα',
   },
   // Εδώ υπάρχει απλά αναφορά, ο πυρήνας του GrapesJS δεν διαθέτει κανένα πλαίσιο,
   // οπότε αυτό θα πρέπει να αγνοηθεί από τα υπόλοιπα αρχεία μετάφρασης
@@ -15,7 +15,7 @@ export default {
     },
     categories: {
       // 'category-id': 'Ετικέτα Κατηγορίας',
-    }
+    },
   },
   domComponents: {
     names: {
@@ -33,8 +33,8 @@ export default {
       thead: 'Κεφαλίδα πίνακα',
       table: 'Πίνακας',
       row: 'Γραμμή πίνακα',
-      cell: 'Κελί πίνακα'
-    }
+      cell: 'Κελί πίνακα',
+    },
   },
   deviceManager: {
     device: 'Συσκευή',
@@ -42,8 +42,8 @@ export default {
       desktop: 'Σθαθερός Υπολογιστής',
       tablet: 'Τάμπλετ',
       mobileLandscape: 'Κινητό Οριζόντια',
-      mobilePortrait: 'Κινητό Κάθετα'
-    }
+      mobilePortrait: 'Κινητό Κάθετα',
+    },
   },
   panels: {
     buttons: {
@@ -55,9 +55,9 @@ export default {
         'open-sm': 'Άνοιγμα Του Διαχειριστή Μορφοποίησης',
         'open-tm': 'Ρυθμίσεις',
         'open-layers': 'Άνοιγμα Του Διαχειριστή Επιπέδων',
-        'open-blocks': 'Άνοιγμα Πλαισίων'
-      }
-    }
+        'open-blocks': 'Άνοιγμα Πλαισίων',
+      },
+    },
   },
   selectorManager: {
     label: 'Κλάσεις',
@@ -66,8 +66,8 @@ export default {
     states: {
       hover: 'Αιώρηση',
       active: 'Κλικ',
-      'nth-of-type(2n)': 'Μονές/Ζυγές'
-    }
+      'nth-of-type(2n)': 'Μονές/Ζυγές',
+    },
   },
   styleManager: {
     empty: 'Επιλέξτε ένα στοιχεία πριν χρησιμοποιήσετε τον διαχειριστή μορφοποίησης',
@@ -80,12 +80,12 @@ export default {
       decorations: 'Μορφοποίηση',
       extra: 'Επιπρόσθετα',
       flex: 'Φλεξ',
-      dimension: 'Διάσταση'
+      dimension: 'Διάσταση',
     },
     // Η βασική βιβλιοθήκη παράγει το όνομα από την δικού του `ιδιότητα` name
     properties: {
       // float: 'Float',
-    }
+    },
   },
   traitManager: {
     empty: 'Επιλέξτε ένα στοιχεία πριν χρησιμοποιήσετε τον Διαχειριστή Χαρακτηριστικών',
@@ -103,15 +103,15 @@ export default {
         id: traitInputAttr,
         alt: traitInputAttr,
         title: traitInputAttr,
-        href: { placeholder: 'πχ. https://google.gr' }
+        href: { placeholder: 'πχ. https://google.gr' },
       },
       // Σε χαρακτηριστικό όπως το select, αυτά χρησιμοποιούνται για την μετάφραση των ονομάτων των επιλογών
       options: {
         target: {
           false: 'Στο ίδιο παράθυρο',
-          _blank: 'Σε νέο παράθυρο'
-        }
-      }
-    }
-  }
+          _blank: 'Σε νέο παράθυρο',
+        },
+      },
+    },
+  },
 };

src/i18n/locale/es.js

@@ -5,7 +5,7 @@ export default {
     addButton: 'Añadir imagen',
     inputPlh: 'http://camino/a/la/imagen.jpg',
     modalTitle: 'Seleccionar imagen',
-    uploadTitle: 'Arrastre los archivos aquí o haga clic para cargar'
+    uploadTitle: 'Arrastre los archivos aquí o haga clic para cargar',
   },
   // Here just as a reference, GrapesJS core doesn't contain any block,
   // so this should be omitted from other local files
@@ -15,7 +15,7 @@ export default {
     },
     categories: {
       // 'category-id': 'Category Label',
-    }
+    },
   },
   domComponents: {
     names: {
@@ -33,8 +33,8 @@ export default {
       thead: 'Encabezado de lista',
       table: 'Lista',
       row: 'Fila de lista',
-      cell: 'Celda de lista'
-    }
+      cell: 'Celda de lista',
+    },
   },
   deviceManager: {
     device: 'Dispositivos',
@@ -42,8 +42,8 @@ export default {
       desktop: 'Escritorio',
       tablet: 'Tableta',
       mobileLandscape: 'Mobile Landscape',
-      mobilePortrait: 'Mobile Portrait'
-    }
+      mobilePortrait: 'Mobile Portrait',
+    },
   },
   panels: {
     buttons: {
@@ -55,9 +55,9 @@ export default {
         'open-sm': 'Abrir Administrador de estilos',
         'open-tm': 'Ajustes',
         'open-layers': 'Abrir Aministrador de capas',
-        'open-blocks': 'Abrir Bloques'
-      }
-    }
+        'open-blocks': 'Abrir Bloques',
+      },
+    },
   },
   selectorManager: {
     label: 'Clases',
@@ -66,8 +66,8 @@ export default {
     states: {
       hover: 'Hover',
       active: 'Click',
-      'nth-of-type(2n)': 'Par/Impar'
-    }
+      'nth-of-type(2n)': 'Par/Impar',
+    },
   },
   styleManager: {
     empty: 'Seleccione un elemento antes de usar el Administrador de estilos',
@@ -80,7 +80,7 @@ export default {
       decorations: 'Decoraciones',
       extra: 'Extras',
       flex: 'Flex',
-      dimension: 'Dimensión'
+      dimension: 'Dimensión',
     },
     // The core library generates the name by their `property` name
     properties: {
@@ -165,8 +165,8 @@ export default {
       'flex-grow': 'Crecimiento Flex',
       'flex-shrink': 'Contracción Flex',
       'align-self': 'Alinearse',
-      'background-color': 'Color de fondo'
-    }
+      'background-color': 'Color de fondo',
+    },
   },
   traitManager: {
     empty: 'Seleccione un elemento antes de usar el Administrador de rasgos',
@@ -177,22 +177,22 @@ export default {
         id: 'Identificador',
         alt: 'Título alterno',
         title: 'Título',
-        href: 'Vínculo'
+        href: 'Vínculo',
       },
       // In a simple trait, like text input, these are used on input attributes
       attributes: {
         id: traitInputAttr,
         alt: traitInputAttr,
         title: traitInputAttr,
-        href: { placeholder: 'ej. https://google.com' }
+        href: { placeholder: 'ej. https://google.com' },
       },
       // In a trait like select, these are used to translate option names
       options: {
         target: {
           false: 'Esta ventana',
-          _blank: 'Nueva ventana'
-        }
-      }
-    }
-  }
+          _blank: 'Nueva ventana',
+        },
+      },
+    },
+  },
 };

src/i18n/locale/fa.js

@@ -5,7 +5,7 @@ export default {
     addButton: 'افزودن تصویر',
     inputPlh: 'http://path/to/the/image.jpg',
     modalTitle: 'انتخاب تصویر',
-    uploadTitle: 'فایل را انتخاب کنید یا در این مکان رها کنید'
+    uploadTitle: 'فایل را انتخاب کنید یا در این مکان رها کنید',
   },
   // Here just as a reference, GrapesJS core doesn't contain any block,
   // so this should be omitted from other local files
@@ -15,7 +15,7 @@ export default {
     },
     categories: {
       // 'category-id': 'Category Label',
-    }
+    },
   },
   domComponents: {
     names: {
@@ -33,8 +33,8 @@ export default {
       thead: 'سر جدول',
       table: 'جدول',
       row: 'ردیف جدول',
-      cell: 'سلول جدول'
-    }
+      cell: 'سلول جدول',
+    },
   },
   deviceManager: {
     device: 'دستگاه',
@@ -42,8 +42,8 @@ export default {
       desktop: 'دسک تاپ',
       tablet: 'تبلت',
       mobileLandscape: 'موبایل خوابیده',
-      mobilePortrait: 'موبایل ایستاده'
-    }
+      mobilePortrait: 'موبایل ایستاده',
+    },
   },
   panels: {
     buttons: {
@@ -55,9 +55,9 @@ export default {
         'open-sm': 'باز کردن مدیریت استایل',
         'open-tm': 'تنظیمات',
         'open-layers': 'باز کردن مدیریت لایه‌ها',
-        'open-blocks': 'باز کردن مدیریت بلوک‌ها'
-      }
-    }
+        'open-blocks': 'باز کردن مدیریت بلوک‌ها',
+      },
+    },
   },
   selectorManager: {
     label: 'کلاس‌ها',
@@ -66,8 +66,8 @@ export default {
     states: {
       hover: 'هاور',
       active: 'کلیک',
-      'nth-of-type(2n)': 'زوج/فرد'
-    }
+      'nth-of-type(2n)': 'زوج/فرد',
+    },
   },
   styleManager: {
     empty: 'قبل از استفاده از مدیریت استایل یک عنصر را انتخاب کنید',
@@ -80,7 +80,7 @@ export default {
       decorations: 'تزئینات',
       extra: 'اضافی',
       flex: 'فلکس',
-      dimension: 'ابعاد'
+      dimension: 'ابعاد',
     },
     // The core library generates the name by their `property` name
     properties: {
@@ -102,16 +102,16 @@ export default {
           id: traitInputAttr,
           alt: traitInputAttr,
           title: traitInputAttr,
-          href: { placeholder: 'مثال: https://google.com' }
+          href: { placeholder: 'مثال: https://google.com' },
         },
         // In a trait like select, these are used to translate option names
         options: {
           target: {
             false: 'پنجره فعلی',
-            _blank: 'پنجره جدید'
-          }
-        }
-      }
-    }
-  }
+            _blank: 'پنجره جدید',
+          },
+        },
+      },
+    },
+  },
 };

src/i18n/locale/it.js

@@ -5,7 +5,7 @@ export default {
     addButton: 'Aggiungi immagine',
     inputPlh: 'http://percorso/immagine.jpg',
     modalTitle: 'Seleziona immagine',
-    uploadTitle: 'Trascina qui i tuoi file o clicca per caricarli'
+    uploadTitle: 'Trascina qui i tuoi file o clicca per caricarli',
   },
   domComponents: {
     names: {
@@ -23,8 +23,8 @@ export default {
       thead: 'Tabella testa',
       table: 'Tabella',
       row: 'Tabella riga',
-      cell: 'Tabella colonna'
-    }
+      cell: 'Tabella colonna',
+    },
   },
   deviceManager: {
     device: 'Dispositivo',
@@ -32,8 +32,8 @@ export default {
       desktop: 'Desktop',
       tablet: 'Tablet',
       mobileLandscape: 'Mobile panoramica',
-      mobilePortrait: 'Mobile'
-    }
+      mobilePortrait: 'Mobile',
+    },
   },
   panels: {
     buttons: {
@@ -45,9 +45,9 @@ export default {
         'open-sm': 'Mostra Style Manager',
         'open-tm': 'Configurazioni',
         'open-layers': 'Mostra Livelli',
-        'open-blocks': 'Mostra Blocchi'
-      }
-    }
+        'open-blocks': 'Mostra Blocchi',
+      },
+    },
   },
   selectorManager: {
     label: 'Classi',
@@ -56,8 +56,8 @@ export default {
     states: {
       hover: 'Hover',
       active: 'Click',
-      'nth-of-type(2n)': 'Pari/Dispari'
-    }
+      'nth-of-type(2n)': 'Pari/Dispari',
+    },
   },
   styleManager: {
     empty: 'Seleziona un elemento prima di usare il Style Manager',
@@ -70,12 +70,12 @@ export default {
       decorations: 'Decorazioni',
       extra: 'Extra',
       flex: 'Flex',
-      dimension: 'Dimensioni'
+      dimension: 'Dimensioni',
     },
     // The core library generates the name by their `property` name
     properties: {
       // float: 'Float',
-    }
+    },
   },
   traitManager: {
     empty: 'Seleziona un elemento prima di usare il Trait Manager',
@@ -84,20 +84,20 @@ export default {
       labels: {
         id: 'Id',
         alt: 'Alt',
-        title: 'Titolo'
+        title: 'Titolo',
       },
       attributes: {
         id: traitInputAttr,
         alt: traitInputAttr,
         title: traitInputAttr,
-        href: { placeholder: 'es. https://google.com' }
+        href: { placeholder: 'es. https://google.com' },
       },
       options: {
         target: {
           false: 'Questa finestra',
-          _blank: 'Nuova finestra'
-        }
-      }
-    }
-  }
+          _blank: 'Nuova finestra',
+        },
+      },
+    },
+  },
 };

src/i18n/locale/ko.js

@@ -1,117 +1,117 @@
-const traitInputAttr = { placeholder: 'eg. 텍스트 입력' };
-
-export default {
-  assetManager: {
-    addButton: '이미지 추가',
-    inputPlh: 'http://path/to/the/image.jpg',
-    modalTitle: '이미지 선택',
-    uploadTitle: '원하는 파일을 여기에 놓거나 업로드를 위해 클릭'
-  },
-  // Here just as a reference, GrapesJS core doesn't contain any block,
-  // so this should be omitted from other local files
-  blockManager: {
-    labels: {
-      // 'block-id': 'Block Label',
-    },
-    categories: {
-      // 'category-id': 'Category Label',
-    }
-  },
-  domComponents: {
-    names: {
-      '': '상자',
-      wrapper: 'Body',
-      text: '텍스트',
-      comment: 'Comment',
-      image: '이미지',
-      video: '동영상',
-      label: 'Label',
-      link: '링크',
-      map: '지도',
-      tfoot: 'Table foot',
-      tbody: 'Table body',
-      thead: 'Table head',
-      table: 'Table',
-      row: 'Table row',
-      cell: 'Table cell'
-    }
-  },
-  deviceManager: {
-    device: 'Device',
-    devices: {
-      desktop: '데스크탑',
-      tablet: '태블릿',
-      mobileLandscape: '모바일 환경',
-      mobilePortrait: '모바일 Portrait'
-    }
-  },
-  panels: {
-    buttons: {
-      titles: {
-        preview: '미리보기',
-        fullscreen: '전체화면',
-        'sw-visibility': 'components 보기',
-        'export-template': '코드 보기',
-        'open-sm': 'Style Manager 열기',
-        'open-tm': '설정',
-        'open-layers': 'Layer Manager 열기',
-        'open-blocks': 'Blocks 열기'
-      }
-    }
-  },
-  selectorManager: {
-    label: 'Classes',
-    selected: '선택된',
-    emptyState: '- 상태 -',
-    states: {
-      hover: 'Hover',
-      active: 'Click',
-      'nth-of-type(2n)': '짝수/홀수'
-    }
-  },
-  styleManager: {
-    empty: 'Style Manager 사용하려면, 먼저 element를 선택해주세요',
-    layer: '레이어',
-    fileButton: 'Images',
-    sectors: {
-      general: '기본설정',
-      layout: '레이아웃',
-      typography: '글꼴',
-      decorations: '꾸미기',
-      extra: 'Extra',
-      flex: 'Flex',
-      dimension: '크기 및 위치'
-    },
-    // The core library generates the name by their `property` name
-    properties: {
-      // float: 'Float',
-    }
-  },
-  traitManager: {
-    empty: 'Trait Manager 사용하려면, 먼저 element를 선택해주세요',
-    label: 'Component 설정',
-    traits: {
-      // The core library generates the name by their `name` property
-      labels: {
-        // id: 'Id',
-        // alt: 'Alt',
-        // title: 'Title',
-        // href: 'Href',
-      },
-      // In a simple trait, like text input, these are used on input attributes
-      attributes: {
-        id: traitInputAttr,
-        alt: traitInputAttr,
-        title: traitInputAttr,
-        href: { placeholder: 'eg. https://google.com' }
-      },
-      // In a trait like select, these are used to translate option names
-      options: {
-        target: {
-          false: '현재 창',
-          _blank: '새 창'
-        }
-      }
-    }
-  }
-};
+const traitInputAttr = { placeholder: 'eg. 텍스트 입력' };
+
+export default {
+  assetManager: {
+    addButton: '이미지 추가',
+    inputPlh: 'http://path/to/the/image.jpg',
+    modalTitle: '이미지 선택',
+    uploadTitle: '원하는 파일을 여기에 놓거나 업로드를 위해 클릭',
+  },
+  // Here just as a reference, GrapesJS core doesn't contain any block,
+  // so this should be omitted from other local files
+  blockManager: {
+    labels: {
+      // 'block-id': 'Block Label',
+    },
+    categories: {
+      // 'category-id': 'Category Label',
+    },
+  },
+  domComponents: {
+    names: {
+      '': '상자',
+      wrapper: 'Body',
+      text: '텍스트',
+      comment: 'Comment',
+      image: '이미지',
+      video: '동영상',
+      label: 'Label',
+      link: '링크',
+      map: '지도',
+      tfoot: 'Table foot',
+      tbody: 'Table body',
+      thead: 'Table head',
+      table: 'Table',
+      row: 'Table row',
+      cell: 'Table cell',
+    },
+  },
+  deviceManager: {
+    device: 'Device',
+    devices: {
+      desktop: '데스크탑',
+      tablet: '태블릿',
+      mobileLandscape: '모바일 환경',
+      mobilePortrait: '모바일 Portrait',
+    },
+  },
+  panels: {
+    buttons: {
+      titles: {
+        preview: '미리보기',
+        fullscreen: '전체화면',
+        'sw-visibility': 'components 보기',
+        'export-template': '코드 보기',
+        'open-sm': 'Style Manager 열기',
+        'open-tm': '설정',
+        'open-layers': 'Layer Manager 열기',
+        'open-blocks': 'Blocks 열기',
+      },
+    },
+  },
+  selectorManager: {
+    label: 'Classes',
+    selected: '선택된',
+    emptyState: '- 상태 -',
+    states: {
+      hover: 'Hover',
+      active: 'Click',
+      'nth-of-type(2n)': '짝수/홀수',
+    },
+  },
+  styleManager: {
+    empty: 'Style Manager 사용하려면, 먼저 element를 선택해주세요',
+    layer: '레이어',
+    fileButton: 'Images',
+    sectors: {
+      general: '기본설정',
+      layout: '레이아웃',
+      typography: '글꼴',
+      decorations: '꾸미기',
+      extra: 'Extra',
+      flex: 'Flex',
+      dimension: '크기 및 위치',
+    },
+    // The core library generates the name by their `property` name
+    properties: {
+      // float: 'Float',
+    },
+  },
+  traitManager: {
+    empty: 'Trait Manager 사용하려면, 먼저 element를 선택해주세요',
+    label: 'Component 설정',
+    traits: {
+      // The core library generates the name by their `name` property
+      labels: {
+        // id: 'Id',
+        // alt: 'Alt',
+        // title: 'Title',
+        // href: 'Href',
+      },
+      // In a simple trait, like text input, these are used on input attributes
+      attributes: {
+        id: traitInputAttr,
+        alt: traitInputAttr,
+        title: traitInputAttr,
+        href: { placeholder: 'eg. https://google.com' },
+      },
+      // In a trait like select, these are used to translate option names
+      options: {
+        target: {
+          false: '현재 창',
+          _blank: '새 창',
+        },
+      },
+    },
+  },
+};

src/i18n/locale/nl.js

@@ -5,7 +5,7 @@ export default {
     addButton: 'Afbeelding toevoegen',
     inputPlh: 'http://path/to/the/image.jpg',
     modalTitle: 'Selecteer afbeelding',
-    uploadTitle: 'Zet bestanden hier neer of klik om te uploaden'
+    uploadTitle: 'Zet bestanden hier neer of klik om te uploaden',
   },
   // Here just as a reference, GrapesJS core doesn't contain any block,
   // so this should be omitted from other local files
@@ -15,7 +15,7 @@ export default {
     },
     categories: {
       // 'category-id': 'Categorie Label',
-    }
+    },
   },
   domComponents: {
     names: {
@@ -33,8 +33,8 @@ export default {
       thead: 'Tabel head',
       table: 'Tabel',
       row: 'Tabel rij',
-      cell: 'Tabel cel'
-    }
+      cell: 'Tabel cel',
+    },
   },
   deviceManager: {
     device: 'Apparaat',
@@ -42,8 +42,8 @@ export default {
       desktop: 'Desktop',
       tablet: 'Tablet',
       mobileLandscape: 'Mobile Landscape',
-      mobilePortrait: 'Mobile Portrait'
-    }
+      mobilePortrait: 'Mobile Portrait',
+    },
   },
   panels: {
     buttons: {
@@ -55,9 +55,9 @@ export default {
         'open-sm': 'Open Stijl Manager',
         'open-tm': 'Instellingen',
         'open-layers': 'Open Laag Manager',
-        'open-blocks': 'Open Blocks'
-      }
-    }
+        'open-blocks': 'Open Blocks',
+      },
+    },
   },
   selectorManager: {
     label: 'Classes',
@@ -66,8 +66,8 @@ export default {
     states: {
       hover: 'Zweven',
       active: 'Klik',
-      'nth-of-type(2n)': 'Even/oneven'
-    }
+      'nth-of-type(2n)': 'Even/oneven',
+    },
   },
   styleManager: {
     empty: 'Selecteer een element voordat je Stijl Manager kan gebruiken.',
@@ -80,7 +80,7 @@ export default {
       decorations: 'Decoraties',
       extra: 'Extra',
       flex: 'Flex',
-      dimension: 'Afmetingen'
+      dimension: 'Afmetingen',
     },
     // The core library generates the name by their `property` name
     properties: {
@@ -165,8 +165,8 @@ export default {
       'flex-basis': 'Flex basis',
       'flex-grow': 'Flex groei',
       'flex-shrink': 'Flex krimp',
-      'align-self': 'Lijn jezelf uit'
-    }
+      'align-self': 'Lijn jezelf uit',
+    },
   },
   traitManager: {
     empty: 'Selecteer een element voordat je Trait Manager kan gebruiken.',
@@ -177,22 +177,22 @@ export default {
         id: 'ID',
         alt: 'Tekst alternatief',
         title: 'Titel',
-        href: 'Link'
+        href: 'Link',
       },
       // In a simple trait, like text input, these are used on input attributes
       attributes: {
         id: traitInputAttr,
         alt: traitInputAttr,
         title: traitInputAttr,
-        href: { placeholder: 'Bijv. https://google.com' }
+        href: { placeholder: 'Bijv. https://google.com' },
       },
       // In a trait like select, these are used to translate option names
       options: {
         target: {
           false: 'Dit scherm',
-          _blank: 'Nieuw scherm'
-        }
-      }
-    }
-  }
+          _blank: 'Nieuw scherm',
+        },
+      },
+    },
+  },
 };

src/i18n/locale/pl.js

@@ -5,7 +5,7 @@ export default {
     addButton: 'Dodaj obrazek',
     inputPlh: 'http://path/to/the/image.jpg',
     modalTitle: 'Wybierz obrazek',
-    uploadTitle: 'Wybierz lub przeciągnij plik z dysku'
+    uploadTitle: 'Wybierz lub przeciągnij plik z dysku',
   },
   // Here just as a reference, GrapesJS core doesn't contain any block,
   // so this should be omitted from other local files
@@ -15,7 +15,7 @@ export default {
     },
     categories: {
       // 'category-id': 'Category Label',
-    }
+    },
   },
   domComponents: {
     names: {
@@ -33,8 +33,8 @@ export default {
       thead: 'Nagłówek tabeli',
       table: 'Tabela',
       row: 'Wiersz',
-      cell: 'Komórka'
-    }
+      cell: 'Komórka',
+    },
   },
   deviceManager: {
     device: 'Urządzenie',
@@ -42,8 +42,8 @@ export default {
       desktop: 'Desktop',
       tablet: 'Tablet',
       mobileLandscape: 'Telefon Poziomo',
-      mobilePortrait: 'Telefon Pionowo'
-    }
+      mobilePortrait: 'Telefon Pionowo',
+    },
   },
   panels: {
     buttons: {
@@ -55,9 +55,9 @@ export default {
         'open-sm': 'Edytuj style i atrybuty CSS',
         'open-tm': 'Ustawienia elementu',
         'open-layers': 'Warstwy szablonu',
-        'open-blocks': 'Komponenty'
-      }
-    }
+        'open-blocks': 'Komponenty',
+      },
+    },
   },
   selectorManager: {
     label: 'Klasy CSS',
@@ -66,8 +66,8 @@ export default {
     states: {
       hover: 'Hover',
       active: 'Click',
-      'nth-of-type(2n)': 'Tylko parzyste'
-    }
+      'nth-of-type(2n)': 'Tylko parzyste',
+    },
   },
   styleManager: {
     empty: 'Wybierz element aby edytować jego atrybuty',
@@ -80,7 +80,7 @@ export default {
       decorations: 'Dekoracje',
       extra: 'Dodatki',
       flex: 'Flex',
-      dimension: 'Wymiary'
+      dimension: 'Wymiary',
     },
     // The core library generates the name by their `property` name
     properties: {
@@ -153,8 +153,8 @@ export default {
       'transform-rotate-z': 'Obrót osi Z',
       'transform-scale-x': 'Skala osi X',
       'transform-scale-y': 'Skala osi Y',
-      'transform-scale-z': 'Skala osi Z'
-    }
+      'transform-scale-z': 'Skala osi Z',
+    },
   },
   traitManager: {
     empty: 'Wybierz element aby edytować jego ustawienia',
@@ -166,22 +166,22 @@ export default {
         alt: 'Tekst alternatywny',
         title: 'Tytuł',
         href: 'Adres odnośnika',
-        target: 'Cel'
+        target: 'Cel',
       },
       // In a simple trait, like text input, these are used on input attributes
       attributes: {
         id: traitInputAttr,
         alt: traitInputAttr,
         title: traitInputAttr,
-        href: { placeholder: 'np. https://google.com' }
+        href: { placeholder: 'np. https://google.com' },
       },
       // In a trait like select, these are used to translate option names
       options: {
         target: {
           false: 'Te okno',
-          _blank: 'Nowe okno'
-        }
-      }
-    }
-  }
+          _blank: 'Nowe okno',
+        },
+      },
+    },
+  },
 };

src/i18n/locale/pt.js

@@ -1,200 +1,200 @@
 const traitInputAttr = { placeholder: 'ex: Insira o texto' };
 
 export default {
-	assetManager: {
-		addButton: 'Adicionar imagem',
-		inputPlh: 'http://caminho/para/a/imagem.jpg',
-		modalTitle: 'Selecionar imagem',
-		uploadTitle: 'Solte os arquivos aqui ou clique para enviar'
-	},
-	// Here just as a reference, GrapesJS core doesn't contain any block,
-	// so this should be omitted from other local files
-	blockManager: {
-		labels: {
-			// 'block-id': 'Block Label',
-		},
-		categories: {
-			// 'category-id': 'Category Label',
-		}
-	},
-	domComponents: {
-		names: {
-			'': 'Box',
-			wrapper: 'Corpo',
-			text: 'Texto',
-			comment: 'Comentário',
-			image: 'Imagem',
-			video: 'Vídeo',
-			label: 'Label',
-			link: 'Link',
-			map: 'Mapa',
-			tfoot: 'Rodapé da tabela',
-			tbody: 'Corpo da tabela',
-			thead: 'Cabeçalho da tabela',
-			table: 'Tabela',
-			row: 'Linha da tabela',
-			cell: 'Célula da tabela',
-			section: 'Seção',
-			body: 'Corpo'
-		}
-	},
-	deviceManager: {
-		device: 'Dispositivo',
-		devices: {
-			desktop: 'Desktop',
-			tablet: 'Tablet',
-			mobileLandscape: 'Celular, modo panorâmico',
-			mobilePortrait: 'Celular, modo retrato'
-		}
-	},
-	panels: {
-		buttons: {
-			titles: {
-				preview: 'Pré-visualização',
-				fullscreen: 'Tela cheia',
-				'sw-visibility': 'Ver componentes',
-				'export-template': 'Ver código',
-				'open-sm': 'Abrir gerenciador de estilos',
-				'open-tm': 'Configurações',
-				'open-layers': 'Abrir gerenciador de camadas',
-				'open-blocks': 'Abrir blocos'
-			}
-		}
-	},
-	selectorManager: {
-		label: 'Classes',
-		selected: 'Selecionado',
-		emptyState: '- Estado -',
-		states: {
-			hover: 'Hover',
-			active: 'Click',
-			'nth-of-type(2n)': 'Even/Odd'
-		}
-	},
-	styleManager: {
-		empty: 'Selecione um elemento para usar o gerenciador de estilos',
-		layer: 'Camada',
-		fileButton: 'Imagens',
-		sectors: {
-			general: 'Geral',
-			layout: 'Disposição',
-			typography: 'Tipografia',
-			decorations: 'Decorações',
-			extra: 'Extra',
-			flex: 'Flex',
-			dimension: 'Dimensão'
-		},
-		// The core library generates the name by their `property` name
-		properties: {
-			float: 'Float',
-			display: 'Exibição',
-			position: 'Posição',
-			top: 'Topo',
-			right: 'Direita',
-			left: 'Esquerda',
-			bottom: 'Inferior',
-			width: 'Largura',
-			height: 'Altura',
-			'max-width': 'Largura Max.',
-			'max-height': 'Altura Max.',
-			margin: 'Margem',
-			'margin-top': 'Margem Superior',
-			'margin-right': 'Margem a Direita',
-			'margin-left': 'Margem a Esquerda',
-			'margin-bottom': 'Margem Inferior',
-			padding: 'Padding',
-			'padding-top': 'Padding Superior',
-			'padding-left': 'Padding a Esquerda',
-			'padding-right': 'Padding a Direita',
-			'padding-bottom': 'Padding Inferior',
-			'font-family': 'Tipo de letra',
-			'font-size': 'Tamanho da fonte',
-			'font-weight': 'Espessura da fonte',
-			'letter-spacing': 'Espaço entre letras',
-			color: 'Cor',
-			'line-height': 'Altura da linha',
-			'text-align': 'Alinhamento do texto',
-			'text-shadow': 'Sombra do texto',
-			'text-shadow-h': 'Sombra do texto: horizontal',
-			'text-shadow-v': 'Sombra do texto: vertical',
-			'text-shadow-blur': 'Desfoque da sombra do texto',
-			'text-shadow-color': 'Cor da sombra da fonte',
-			'border-top-left': 'Borda superior a esquerda',
-			'border-top-right': 'Borda superior a direita',
-			'border-bottom-left': 'Borda inferior a esquerda',
-			'border-bottom-right': 'Borda inferior a direita',
-			'border-radius-top-left': 'Raio da borda superior esquerda',
-			'border-radius-top-right': 'Raio da borda superior direita',
-			'border-radius-bottom-left': 'Raio da borda inferior esquerda',
-			'border-radius-bottom-right': 'Raio da borda inferior direita',
-			'border-radius': 'Raio da borda',
-			border: 'Borda',
-			'border-width': 'Largura da borda',
-			'border-style': 'Estilo da borda',
-			'border-color': 'Cor da borda',
-			'box-shadow': 'Sombra da box',
-			'box-shadow-h': 'Sombra da box: horizontal',
-			'box-shadow-v': 'Sombra da box: vertical',
-			'box-shadow-blur': 'Desfoque da sombra da box',
-			'box-shadow-spread': 'Extensão da sombra da box',
-			'box-shadow-color': 'Cor da sombra da box',
-			'box-shadow-type': 'Tipo de sombra da box',
-			background: 'Fundo',
-			'background-color': 'Cor de fundo',
-			'background-image': 'Imagem de fundo',
-			'background-repeat': 'Repetir fundo',
-			'background-position': 'Posição do fundo',
-			'background-attachment': 'Plugin de fundo',
-			'background-size': 'Tamanho do fundo',
-			transition: 'Transição',
-			'transition-property': 'Tipo de transição',
-			'transition-duration': 'Tempo de transição',
-			'transition-timing-function': 'Função do tempo da transição',
-			perspective: 'Perspectiva',
-			transform: 'Transformação',
-			'transform-rotate-x': 'Rotacionar horizontalmente',
-			'transform-rotate-y': 'Rotacionar verticalmente',
-			'transform-rotate-z': 'Rotacionar profundidade',
-			'transform-scale-x': 'Escalar horizontalmente',
-			'transform-scale-y': 'Escalar verticalmente',
-			'transform-scale-z': 'Escalar profundidade',
-			'flex-direction': 'Direção Flex',
-			'flex-wrap': 'Flex wrap',
-			'justify-content': 'Ajustar conteúdo',
-			'align-items': 'Alinhar elementos',
-			'align-content': 'Alinhar conteúdo',
-			order: 'Ordem',
-			'flex-basis': 'Base Flex',
-			'flex-grow': 'Crescimento Flex',
-			'flex-shrink': 'Contração Flex',
-			'align-self': 'Alinhar-se',
-		}
-	},
-	traitManager: {
-		empty: 'Selecione um elemento para usar o gerenciador de características',
-		label: 'Configurações do componente',
-		traits: {
-			// The core library generates the name by their `name` property
-			labels: {
-				// id: 'Id',
-				// alt: 'Alt',
-				// title: 'Title',
-				// href: 'Href',
-			},
-			// In a simple trait, like text input, these are used on input attributes
-			attributes: {
-				id: traitInputAttr,
-				alt: traitInputAttr,
-				title: traitInputAttr,
-				href: { placeholder: 'ex: https://google.com' }
-			},
-			// In a trait like select, these are used to translate option names
-			options: {
-				target: {
-					false: 'Esta janela',
-					_blank: 'Nova janela'
-				}
-			}
-		}
-	}
+  assetManager: {
+    addButton: 'Adicionar imagem',
+    inputPlh: 'http://caminho/para/a/imagem.jpg',
+    modalTitle: 'Selecionar imagem',
+    uploadTitle: 'Solte os arquivos aqui ou clique para enviar',
+  },
+  // Here just as a reference, GrapesJS core doesn't contain any block,
+  // so this should be omitted from other local files
+  blockManager: {
+    labels: {
+      // 'block-id': 'Block Label',
+    },
+    categories: {
+      // 'category-id': 'Category Label',
+    },
+  },
+  domComponents: {
+    names: {
+      '': 'Box',
+      wrapper: 'Corpo',
+      text: 'Texto',
+      comment: 'Comentário',
+      image: 'Imagem',
+      video: 'Vídeo',
+      label: 'Label',
+      link: 'Link',
+      map: 'Mapa',
+      tfoot: 'Rodapé da tabela',
+      tbody: 'Corpo da tabela',
+      thead: 'Cabeçalho da tabela',
+      table: 'Tabela',
+      row: 'Linha da tabela',
+      cell: 'Célula da tabela',
+      section: 'Seção',
+      body: 'Corpo',
+    },
+  },
+  deviceManager: {
+    device: 'Dispositivo',
+    devices: {
+      desktop: 'Desktop',
+      tablet: 'Tablet',
+      mobileLandscape: 'Celular, modo panorâmico',
+      mobilePortrait: 'Celular, modo retrato',
+    },
+  },
+  panels: {
+    buttons: {
+      titles: {
+        preview: 'Pré-visualização',
+        fullscreen: 'Tela cheia',
+        'sw-visibility': 'Ver componentes',
+        'export-template': 'Ver código',
+        'open-sm': 'Abrir gerenciador de estilos',
+        'open-tm': 'Configurações',
+        'open-layers': 'Abrir gerenciador de camadas',
+        'open-blocks': 'Abrir blocos',
+      },
+    },
+  },
+  selectorManager: {
+    label: 'Classes',
+    selected: 'Selecionado',
+    emptyState: '- Estado -',
+    states: {
+      hover: 'Hover',
+      active: 'Click',
+      'nth-of-type(2n)': 'Even/Odd',
+    },
+  },
+  styleManager: {
+    empty: 'Selecione um elemento para usar o gerenciador de estilos',
+    layer: 'Camada',
+    fileButton: 'Imagens',
+    sectors: {
+      general: 'Geral',
+      layout: 'Disposição',
+      typography: 'Tipografia',
+      decorations: 'Decorações',
+      extra: 'Extra',
+      flex: 'Flex',
+      dimension: 'Dimensão',
+    },
+    // The core library generates the name by their `property` name
+    properties: {
+      float: 'Float',
+      display: 'Exibição',
+      position: 'Posição',
+      top: 'Topo',
+      right: 'Direita',
+      left: 'Esquerda',
+      bottom: 'Inferior',
+      width: 'Largura',
+      height: 'Altura',
+      'max-width': 'Largura Max.',
+      'max-height': 'Altura Max.',
+      margin: 'Margem',
+      'margin-top': 'Margem Superior',
+      'margin-right': 'Margem a Direita',
+      'margin-left': 'Margem a Esquerda',
+      'margin-bottom': 'Margem Inferior',
+      padding: 'Padding',
+      'padding-top': 'Padding Superior',
+      'padding-left': 'Padding a Esquerda',
+      'padding-right': 'Padding a Direita',
+      'padding-bottom': 'Padding Inferior',
+      'font-family': 'Tipo de letra',
+      'font-size': 'Tamanho da fonte',
+      'font-weight': 'Espessura da fonte',
+      'letter-spacing': 'Espaço entre letras',
+      color: 'Cor',
+      'line-height': 'Altura da linha',
+      'text-align': 'Alinhamento do texto',
+      'text-shadow': 'Sombra do texto',
+      'text-shadow-h': 'Sombra do texto: horizontal',
+      'text-shadow-v': 'Sombra do texto: vertical',
+      'text-shadow-blur': 'Desfoque da sombra do texto',
+      'text-shadow-color': 'Cor da sombra da fonte',
+      'border-top-left': 'Borda superior a esquerda',
+      'border-top-right': 'Borda superior a direita',
+      'border-bottom-left': 'Borda inferior a esquerda',
+      'border-bottom-right': 'Borda inferior a direita',
+      'border-radius-top-left': 'Raio da borda superior esquerda',
+      'border-radius-top-right': 'Raio da borda superior direita',
+      'border-radius-bottom-left': 'Raio da borda inferior esquerda',
+      'border-radius-bottom-right': 'Raio da borda inferior direita',
+      'border-radius': 'Raio da borda',
+      border: 'Borda',
+      'border-width': 'Largura da borda',
+      'border-style': 'Estilo da borda',
+      'border-color': 'Cor da borda',
+      'box-shadow': 'Sombra da box',
+      'box-shadow-h': 'Sombra da box: horizontal',
+      'box-shadow-v': 'Sombra da box: vertical',
+      'box-shadow-blur': 'Desfoque da sombra da box',
+      'box-shadow-spread': 'Extensão da sombra da box',
+      'box-shadow-color': 'Cor da sombra da box',
+      'box-shadow-type': 'Tipo de sombra da box',
+      background: 'Fundo',
+      'background-color': 'Cor de fundo',
+      'background-image': 'Imagem de fundo',
+      'background-repeat': 'Repetir fundo',
+      'background-position': 'Posição do fundo',
+      'background-attachment': 'Plugin de fundo',
+      'background-size': 'Tamanho do fundo',
+      transition: 'Transição',
+      'transition-property': 'Tipo de transição',
+      'transition-duration': 'Tempo de transição',
+      'transition-timing-function': 'Função do tempo da transição',
+      perspective: 'Perspectiva',
+      transform: 'Transformação',
+      'transform-rotate-x': 'Rotacionar horizontalmente',
+      'transform-rotate-y': 'Rotacionar verticalmente',
+      'transform-rotate-z': 'Rotacionar profundidade',
+      'transform-scale-x': 'Escalar horizontalmente',
+      'transform-scale-y': 'Escalar verticalmente',
+      'transform-scale-z': 'Escalar profundidade',
+      'flex-direction': 'Direção Flex',
+      'flex-wrap': 'Flex wrap',
+      'justify-content': 'Ajustar conteúdo',
+      'align-items': 'Alinhar elementos',
+      'align-content': 'Alinhar conteúdo',
+      order: 'Ordem',
+      'flex-basis': 'Base Flex',
+      'flex-grow': 'Crescimento Flex',
+      'flex-shrink': 'Contração Flex',
+      'align-self': 'Alinhar-se',
+    },
+  },
+  traitManager: {
+    empty: 'Selecione um elemento para usar o gerenciador de características',
+    label: 'Configurações do componente',
+    traits: {
+      // The core library generates the name by their `name` property
+      labels: {
+        // id: 'Id',
+        // alt: 'Alt',
+        // title: 'Title',
+        // href: 'Href',
+      },
+      // In a simple trait, like text input, these are used on input attributes
+      attributes: {
+        id: traitInputAttr,
+        alt: traitInputAttr,
+        title: traitInputAttr,
+        href: { placeholder: 'ex: https://google.com' },
+      },
+      // In a trait like select, these are used to translate option names
+      options: {
+        target: {
+          false: 'Esta janela',
+          _blank: 'Nova janela',
+        },
+      },
+    },
+  },
 };

src/i18n/locale/tr.js

@@ -2,7 +2,7 @@ export default {
   assetManager: {
     addButton: 'Görsel Ekle',
     modalTitle: 'Görsel Seçin',
-    uploadTitle: 'Dosya yüklemek için buraya sürükleyin veya tıklayın'
+    uploadTitle: 'Dosya yüklemek için buraya sürükleyin veya tıklayın',
   },
   deviceManager: {
     device: 'Cihaz',
@@ -10,8 +10,8 @@ export default {
       desktop: 'Masaüstü',
       tablet: 'Tablet',
       mobileLandscape: 'Mobil Yatay',
-      mobilePortrait: 'Mobil Dikey'
-    }
+      mobilePortrait: 'Mobil Dikey',
+    },
   },
   panels: {
     buttons: {
@@ -23,14 +23,14 @@ export default {
         'open-sm': 'Stil Düzenleyiciyi Aç',
         'open-tm': 'Ayarlar',
         'open-layers': 'Katmanlar',
-        'open-blocks': 'Bloklar'
-      }
-    }
+        'open-blocks': 'Bloklar',
+      },
+    },
   },
   selectorManager: {
     selected: 'Seçili',
     emptyState: '- DURUM -',
-    label: 'Sınıflar'
+    label: 'Sınıflar',
   },
   styleManager: {
     empty: 'Stilini düzenlemek istediğiniz öğeyi seçiniz',
@@ -42,7 +42,7 @@ export default {
       decorations: 'Dekorasyon',
       extra: 'Ekstra',
       flex: 'Flex',
-      dimension: 'Boyut'
+      dimension: 'Boyut',
     },
     properties: {
       float: 'Kaydır',
@@ -126,8 +126,8 @@ export default {
       'flex-grow': 'Flex Büyüme',
       'flex-shrink': 'Flex Küçülme',
       'align-self': 'Kendini Hizala',
-      'background-color': 'Arkaplan Rengi'
-    }
+      'background-color': 'Arkaplan Rengi',
+    },
   },
   traitManager: {
     empty: 'Özelliklerini düzenlemek istediğiniz öğeyi seçiniz',
@@ -135,7 +135,7 @@ export default {
     traits: {
       labels: {},
       attributes: {},
-      options: {}
-    }
-  }
+      options: {},
+    },
+  },
 };

src/i18n/locale/zh.js

@@ -5,7 +5,7 @@ export default {
     addButton: '添加图片',
     inputPlh: 'http://path/to/the/image.jpg',
     modalTitle: '选择图片',
-    uploadTitle: '点击或者拖拽图片上传'
+    uploadTitle: '点击或者拖拽图片上传',
   },
   domComponents: {
     names: {
@@ -23,8 +23,8 @@ export default {
       thead: '表头',
       table: '表格',
       row: '行',
-      cell: '单元格'
-    }
+      cell: '单元格',
+    },
   },
   deviceManager: {
     device: '设备',
@@ -32,8 +32,8 @@ export default {
       desktop: '桌面',
       tablet: '平板',
       mobileLandscape: 'Mobile Landscape',
-      mobilePortrait: 'Mobile Portrait'
-    }
+      mobilePortrait: 'Mobile Portrait',
+    },
   },
   panels: {
     buttons: {
@@ -45,9 +45,9 @@ export default {
         'open-sm': '打开样式管理器',
         'open-tm': '设置',
         'open-layers': '打开布局管理器',
-        'open-blocks': '打开块'
-      }
-    }
+        'open-blocks': '打开块',
+      },
+    },
   },
   selectorManager: {
     label: 'Classes',
@@ -56,8 +56,8 @@ export default {
     states: {
       hover: 'Hover',
       active: 'Click',
-      'nth-of-type(2n)': 'Even/Odd'
-    }
+      'nth-of-type(2n)': 'Even/Odd',
+    },
   },
   styleManager: {
     empty: '设置样式前选择请一个元素',
@@ -70,12 +70,12 @@ export default {
       decorations: '装饰',
       extra: '扩展',
       flex: '盒子模型',
-      dimension: '尺寸'
+      dimension: '尺寸',
     },
     // The core library generates the name by their `property` name
     properties: {
       // float: 'Float',
-    }
+    },
   },
   traitManager: {
     empty: '用设置项前选择一个组件',
@@ -86,15 +86,15 @@ export default {
         id: traitInputAttr,
         alt: traitInputAttr,
         title: traitInputAttr,
-        href: { placeholder: 'eg. https://google.com' }
+        href: { placeholder: 'eg. https://google.com' },
       },
       // In a trait like select, these are used to translate option names
       options: {
         target: {
           false: '本窗口',
-          _blank: '新窗口'
-        }
-      }
-    }
-  }
+          _blank: '新窗口',
+        },
+      },
+    },
+  },
 };

src/modal_dialog/config/config.js

@@ -19,5 +19,5 @@ export default {
    *   },
    * },
    */
-  extend: {}
+  extend: {},
 };

src/modal_dialog/index.js

@@ -67,7 +67,7 @@ export default () => {
     init(config = {}) {
       c = {
         ...defaults,
-        ...config
+        ...config,
       };
 
       const em = c.em;
@@ -99,7 +99,7 @@ export default () => {
         attributes,
         title: isString(titl) ? createText(titl) : titl,
         content: isString(cnt) ? createText(cnt) : cnt.get ? cnt.get(0) : cnt,
-        close: () => this.close()
+        close: () => this.close(),
       };
     },
 
@@ -269,7 +269,7 @@ export default () => {
       modal = new View({
         el,
         model,
-        config: c
+        config: c,
       });
       return modal.render().$el;
     },
@@ -278,6 +278,6 @@ export default () => {
       modal && modal.remove();
       [c, model, modal].forEach(i => (i = {}));
       this.em = {};
-    }
+    },
   };
 };

src/navigator/config/config.js

@@ -70,5 +70,5 @@ export default {
    *   },
    * },
    */
-  extend: {}
+  extend: {},
 };

src/panels/config/config.js

@@ -14,7 +14,7 @@ export default {
   defaults: [
     {
       id: 'commands',
-      buttons: [{}]
+      buttons: [{}],
     },
     {
       id: 'options',
@@ -25,29 +25,29 @@ export default {
           className: 'fa fa-square-o',
           command: swv,
           context: swv,
-          attributes: { title: 'View components' }
+          attributes: { title: 'View components' },
         },
         {
           id: prv,
           className: 'fa fa-eye',
           command: prv,
           context: prv,
-          attributes: { title: 'Preview' }
+          attributes: { title: 'Preview' },
         },
         {
           id: ful,
           className: 'fa fa-arrows-alt',
           command: ful,
           context: ful,
-          attributes: { title: 'Fullscreen' }
+          attributes: { title: 'Fullscreen' },
         },
         {
           id: expt,
           className: 'fa fa-code',
           command: expt,
-          attributes: { title: 'View code' }
-        }
-      ]
+          attributes: { title: 'View code' },
+        },
+      ],
     },
     {
       id: 'views',
@@ -58,36 +58,36 @@ export default {
           command: osm,
           active: true,
           togglable: 0,
-          attributes: { title: 'Open Style Manager' }
+          attributes: { title: 'Open Style Manager' },
         },
         {
           id: otm,
           className: 'fa fa-cog',
           command: otm,
           togglable: 0,
-          attributes: { title: 'Settings' }
+          attributes: { title: 'Settings' },
         },
         {
           id: ola,
           className: 'fa fa-bars',
           command: ola,
           togglable: 0,
-          attributes: { title: 'Open Layer Manager' }
+          attributes: { title: 'Open Layer Manager' },
         },
         {
           id: obl,
           className: 'fa fa-th-large',
           command: obl,
           togglable: 0,
-          attributes: { title: 'Open Blocks' }
-        }
-      ]
-    }
+          attributes: { title: 'Open Blocks' },
+        },
+      ],
+    },
   ],
 
   // Editor model
   em: null,
 
   // Delay before show children buttons (in milliseconds)
-  delayBtnsShow: 300
+  delayBtnsShow: 300,
 };

src/panels/index.js

@@ -204,7 +204,7 @@ export default () => {
       PanelsViewObj && PanelsViewObj.remove();
       PanelsViewObj = new PanelsView({
         collection: panels,
-        config: c
+        config: c,
       });
       return PanelsViewObj.render().el;
     },
@@ -240,6 +240,6 @@ export default () => {
       [c, panels, PanelsViewObj].forEach(i => (i = {}));
     },
 
-    Panel
+    Panel,
   };
 };

src/parser/model/BrowserParserCss.js

@@ -11,7 +11,7 @@ const atRules = {
   12: 'supports',
   13: 'document',
   14: 'font-feature-values',
-  15: 'viewport'
+  15: 'viewport',
 };
 const atRuleKeys = keys(atRules);
 const singleAtRules = ['5', '6', '11', '15'];
@@ -44,10 +44,7 @@ export const parseSelector = (str = '') => {
     // class might be with state (eg. :hover), nothing else.
     // Can also accept SINGLE ID selectors, eg. `#myid`, `#myid:hover`
     // Composed are not valid: `#myid.some-class`, `#myid.some-class:hover`
-    if (
-      /^(\.{1}[\w\-]+)+(:{1,2}[\w\-()]+)?$/gi.test(sel) ||
-      /^(#{1}[\w\-]+){1}(:{1,2}[\w\-()]+)?$/gi.test(sel)
-    ) {
+    if (/^(\.{1}[\w\-]+)+(:{1,2}[\w\-()]+)?$/gi.test(sel) || /^(#{1}[\w\-]+){1}(:{1,2}[\w\-()]+)?$/gi.test(sel)) {
       var cls = sel.split('.').filter(Boolean);
       result.push(cls);
     } else {
@@ -57,7 +54,7 @@ export const parseSelector = (str = '') => {
 
   return {
     result,
-    add
+    add,
   };
 };
 
@@ -86,12 +83,7 @@ export const parseStyle = node => {
  * @return {string}
  */
 export const parseCondition = node => {
-  const condition =
-    node.conditionText ||
-    (node.media && node.media.mediaText) ||
-    node.name ||
-    node.selectorText ||
-    '';
+  const condition = node.conditionText || (node.media && node.media.mediaText) || node.name || node.selectorText || '';
   return condition.trim();
 };
 
@@ -173,7 +165,7 @@ export const parseNode = el => {
     // For each group of selectors
     for (var k = 0, len3 = sels.length; k < len3; k++) {
       const model = createNode(sels[k], style, {
-        atRule: atRules[type]
+        atRule: atRules[type],
       });
       result.push(model);
       lastRule = model;
@@ -189,7 +181,7 @@ export const parseNode = el => {
         const model = {
           selectors: [],
           selectorsAdd: selsAddStr,
-          style
+          style,
         };
         singleAtRule && (model.singleAtRule = singleAtRule);
         atRuleType && (model.atRuleType = atRuleType);

src/parser/model/ParserCss.js

@@ -1,8 +1,5 @@
 import { isString } from 'underscore';
-import BrowserCssParser, {
-  parseSelector,
-  createNode
-} from './BrowserParserCss';
+import BrowserCssParser, { parseSelector, createNode } from './BrowserParserCss';
 
 export default (config = {}) => ({
   /**
@@ -36,7 +33,7 @@ export default (config = {}) => ({
       const selectorsAdd = selsParsed.add.join(', ');
       const opts = {
         atRule: node.atRule,
-        mediaText: node.params
+        mediaText: node.params,
       };
 
       if (classSets.length) {
@@ -56,5 +53,5 @@ export default (config = {}) => ({
     }
 
     return node;
-  }
+  },
 });

src/plugin_manager/config/config.js

@@ -1,3 +1,3 @@
 export default {
-  plugins: []
+  plugins: [],
 };

src/plugin_manager/index.js

@@ -52,6 +52,6 @@ export default config => {
      */
     getAll() {
       return plugins;
-    }
+    },
   };
 };

src/rich_text_editor/model/RichTextEditor.js

@@ -61,7 +61,9 @@ const defActions = {
       if (isValidTag(rte)) {
         rte.exec('unlink');
       } else {
-        rte.insertHTML(`<a href="" ${customElAttr}>${rte.selection()}</a>`, { select: true });
+        rte.insertHTML(`<a href="" ${customElAttr}>${rte.selection()}</a>`, {
+          select: true,
+        });
       }
     },
   },
@@ -74,7 +76,10 @@ const defActions = {
       return rte?.selection() && isValidTag(rte, 'SPAN') ? btnState.DISABLED : btnState.INACTIVE;
     },
     result: rte => {
-      !isValidTag(rte, 'SPAN') && rte.insertHTML(`<span ${customElAttr}>${rte.selection()}</span>`, { select: true });
+      !isValidTag(rte, 'SPAN') &&
+        rte.insertHTML(`<span ${customElAttr}>${rte.selection()}</span>`, {
+          select: true,
+        });
     },
   },
 };

src/style_manager/index.js

@@ -371,7 +371,10 @@ export default () => {
       targets = targets.map(t => this.getModelToStyle(t));
       const state = em.getState();
       const lastTarget = targets.slice().reverse()[0];
-      const lastTargetParents = this.getParentRules(lastTarget, { state, component });
+      const lastTargetParents = this.getParentRules(lastTarget, {
+        state,
+        component,
+      });
       let stateTarget = this.__getStateTarget();
 
       // Handle the creation and update of the state rule, if enabled.
@@ -379,7 +382,12 @@ export default () => {
         if (state && lastTarget?.getState?.()) {
           const style = lastTarget.getStyle();
           if (!stateTarget) {
-            stateTarget = cssc.getAll().add({ selectors: 'gjs-selected', style, shallow: true, important: true });
+            stateTarget = cssc.getAll().add({
+              selectors: 'gjs-selected',
+              style,
+              shallow: true,
+              important: true,
+            });
           } else {
             stateTarget.setStyle(style);
           }
@@ -389,7 +397,13 @@ export default () => {
         }
       });
 
-      this.model.set({ targets, lastTarget, lastTargetParents, stateTarget, component });
+      this.model.set({
+        targets,
+        lastTarget,
+        lastTargetParents,
+        stateTarget,
+        component,
+      });
       this.__upProps(opts);
 
       return targets;
@@ -691,7 +705,11 @@ export default () => {
       sectors.forEach(sector => {
         const props = sector.getProperties();
         props.forEach(prop => {
-          const isVisible = prop.__checkVisibility({ target: lastTarget, component, sectors });
+          const isVisible = prop.__checkVisibility({
+            target: lastTarget,
+            component,
+            sectors,
+          });
           prop.set('visible', isVisible);
         });
         const sectorVisible = props.some(p => p.isVisible());

src/style_manager/model/PropertyComposite.js

@@ -55,7 +55,10 @@ export default class PropertyComposite extends Property {
   initialize(props = {}, opts = {}) {
     Property.callParentInit(Property, this, props, opts);
     const { em } = this;
-    const properties = new Properties(this.get('properties') || [], { em, parentProp: this });
+    const properties = new Properties(this.get('properties') || [], {
+      em,
+      parentProp: this,
+    });
     this.set('properties', properties, { silent: 1 });
     this.listenTo(properties, 'change', this.__upProperties);
     Property.callInit(this, props, opts);

src/style_manager/model/PropertyFactory.js

@@ -196,7 +196,15 @@ export default class PropertyFactory {
       ['background-color', { default: 'none' }, 'color'],
 
       // File type
-      ['background-image', { type: this.typeFile, functionName: 'url', default: 'none', full: true }],
+      [
+        'background-image',
+        {
+          type: this.typeFile,
+          functionName: 'url',
+          default: 'none',
+          full: true,
+        },
+      ],
 
       // Slider type
       ['opacity', { type: this.typeSlider, default: '1', min: 0, max: 1, step: 0.01 }],
@@ -208,7 +216,15 @@ export default class PropertyFactory {
       ['justify-content', { default: 'flex-start', options: this.optsJustCont }, 'flex-wrap'],
       ['align-items', { default: 'stretch', options: this.optsFlexAlign }, 'flex-wrap'],
       ['align-content', { options: this.optsAlignCont }, 'align-items'],
-      ['align-self', { default: 'auto', options: this.optsAlignSelf, requiresParent: requireFlex }, 'display'],
+      [
+        'align-self',
+        {
+          default: 'auto',
+          options: this.optsAlignSelf,
+          requiresParent: requireFlex,
+        },
+        'display',
+      ],
       ['font-family', { default: 'Arial, Helvetica, sans-serif', options: this.optsFonts }, 'display'],
       ['font-weight', { default: '400', options: this.optsWeight }, 'display'],
       ['border-style', { default: 'solid', options: this.optsBorderStyle }, 'display'],
@@ -264,10 +280,22 @@ export default class PropertyFactory {
         'border-radius',
         {
           properties: this.__sub([
-            { extend: 'border-top-left-radius', id: 'border-top-left-radius-sub' },
-            { extend: 'border-top-right-radius', id: 'border-top-right-radius-sub' },
-            { extend: 'border-bottom-right-radius', id: 'border-bottom-right-radius-sub' },
-            { extend: 'border-bottom-left-radius', id: 'border-bottom-left-radius-sub' },
+            {
+              extend: 'border-top-left-radius',
+              id: 'border-top-left-radius-sub',
+            },
+            {
+              extend: 'border-top-right-radius',
+              id: 'border-top-right-radius-sub',
+            },
+            {
+              extend: 'border-bottom-right-radius',
+              id: 'border-bottom-right-radius-sub',
+            },
+            {
+              extend: 'border-bottom-left-radius',
+              id: 'border-bottom-left-radius-sub',
+            },
           ]),
         },
         'margin',
@@ -281,7 +309,10 @@ export default class PropertyFactory {
           properties: this.__sub([
             { extend: 'transition-property', id: 'transition-property-sub' },
             { extend: 'transition-duration', id: 'transition-duration-sub' },
-            { extend: 'transition-timing-function', id: 'transition-timing-function-sub' },
+            {
+              extend: 'transition-timing-function',
+              id: 'transition-timing-function-sub',
+            },
           ]),
         },
       ],
@@ -336,7 +367,10 @@ export default class PropertyFactory {
             { extend: 'background-image', id: 'background-image-sub' },
             { extend: 'background-repeat', id: 'background-repeat-sub' },
             { extend: 'background-position', id: 'background-position-sub' },
-            { extend: 'background-attachment', id: 'background-attachment-sub' },
+            {
+              extend: 'background-attachment',
+              id: 'background-attachment-sub',
+            },
             { extend: 'background-size', id: 'background-size-sub' },
           ]),
         },
@@ -371,11 +405,26 @@ export default class PropertyFactory {
                 { id: 'scaleX', propValue: { units: [''], step: 0.01 } },
                 { id: 'scaleY', propValue: { units: [''], step: 0.01 } },
                 { id: 'scaleZ', propValue: { units: [''], step: 0.01 } },
-                { id: 'rotateX', propValue: { units: this.unitsAngle, step: 1 } },
-                { id: 'rotateY', propValue: { units: this.unitsAngle, step: 1 } },
-                { id: 'rotateZ', propValue: { units: this.unitsAngle, step: 1 } },
-                { id: 'translateX', propValue: { units: this.unitsSize, step: 1 } },
-                { id: 'translateY', propValue: { units: this.unitsSize, step: 1 } },
+                {
+                  id: 'rotateX',
+                  propValue: { units: this.unitsAngle, step: 1 },
+                },
+                {
+                  id: 'rotateY',
+                  propValue: { units: this.unitsAngle, step: 1 },
+                },
+                {
+                  id: 'rotateZ',
+                  propValue: { units: this.unitsAngle, step: 1 },
+                },
+                {
+                  id: 'translateX',
+                  propValue: { units: this.unitsSize, step: 1 },
+                },
+                {
+                  id: 'translateY',
+                  propValue: { units: this.unitsSize, step: 1 },
+                },
               ],
               onChange({ property, to }) {
                 if (to.value) {

src/style_manager/model/PropertyStack.js

@@ -221,7 +221,13 @@ export default class PropertyStack extends PropertyComposite {
     let style;
 
     if (toStyle) {
-      style = toStyle(values, { join, joinLayers, name, layer, property: this });
+      style = toStyle(values, {
+        join,
+        joinLayers,
+        name,
+        layer,
+        property: this,
+      });
     } else {
       const result = this.getProperties().map(prop => {
         const name = prop.getName();

src/style_manager/view/PropertyColorView.js

@@ -3,7 +3,10 @@ import InputColor from '../../domain_abstract/ui/InputColor';
 
 export default class PropertyColorView extends PropertyNumberView {
   setValue(value) {
-    this.inputInst?.setValue(value, { fromTarget: 1, def: this.model.getDefaultValue() });
+    this.inputInst?.setValue(value, {
+      fromTarget: 1,
+      def: this.model.getDefaultValue(),
+    });
   }
 
   remove() {
@@ -21,7 +24,12 @@ export default class PropertyColorView extends PropertyNumberView {
     if (!this.inputInst) {
       this.__handleChange = this.__handleChange.bind(this);
       const { ppfx, model, em, el } = this;
-      const inputColor = new InputColor({ target: em, model, ppfx, onChange: this.__handleChange });
+      const inputColor = new InputColor({
+        target: em,
+        model,
+        ppfx,
+        onChange: this.__handleChange,
+      });
       const input = inputColor.render();
       el.querySelector(`.${ppfx}fields`).appendChild(input.el);
       this.input = input.inputEl.get(0);

src/trait_manager/config/config.js

@@ -6,5 +6,5 @@ export default {
   appendTo: '',
 
   // Default options for the target input
-  optionsTarget: [{ value: false }, { value: '_blank' }]
+  optionsTarget: [{ value: false }, { value: '_blank' }],
 };

src/trait_manager/model/TraitFactory.js

@@ -26,5 +26,5 @@ export default (config = {}) => ({
     }
 
     return objs;
-  }
+  },
 });

src/utils/Sorter.js

@@ -1137,7 +1137,9 @@ export default Backbone.View.extend({
         const canRemove = !sameCollection || !sameIndex || isTextable;
 
         if (canRemove) {
-          modelToDrop = srcModel.collection.remove(srcModel, { temporary: true });
+          modelToDrop = srcModel.collection.remove(srcModel, {
+            temporary: true,
+          });
           if (sameCollection && index > srcIndex) {
             opts.at = index - 1;
           }

src/utils/cash-dom.js

@@ -64,45 +64,49 @@ function cash(selector, context) {
 }
 /* PROTOTYPE */
 
-var fn = (cash.fn = cash.prototype = Cash.prototype = {
-  constructor: cash,
-  __cash: true,
-  length: 0,
-  splice: splice // Ensures a cash collection gets printed as array-like in Chrome
-}); // @require core/cash.js
+var fn =
+  (cash.fn =
+  cash.prototype =
+  Cash.prototype =
+    {
+      constructor: cash,
+      __cash: true,
+      length: 0,
+      splice: splice, // Ensures a cash collection gets printed as array-like in Chrome
+    }); // @require core/cash.js
 // @require core/variables.js
 
-fn.get = function(index) {
+fn.get = function (index) {
   if (index === undefined) return slice.call(this);
   return this[index < 0 ? index + this.length : index];
 }; // @require core/cash.js
 // @require ./get.js
 
-fn.eq = function(index) {
+fn.eq = function (index) {
   return cash(this.get(index));
 }; // @require core/cash.js
 // @require ./eq.js
 
-fn.first = function() {
+fn.first = function () {
   return this.eq(0);
 }; // @require core/cash.js
 // @require ./eq.js
 
-fn.last = function() {
+fn.last = function () {
   return this.eq(-1);
 }; // @require core/cash.js
 // @require core/variables.js
 
-fn.map = function(callback) {
+fn.map = function (callback) {
   return cash(
-    map.call(this, function(ele, i) {
+    map.call(this, function (ele, i) {
       return callback.call(ele, i, ele);
     })
   );
 }; // @require core/cash.js
 // @require core/variables.js
 
-fn.slice = function() {
+fn.slice = function () {
   return cash(slice.apply(this, arguments));
 }; // @require ./cash.js
 
@@ -111,7 +115,7 @@ var camelCaseRe = /(?:^\w|[A-Z]|\b\w)/g,
 
 function camelCase(str) {
   return str
-    .replace(camelCaseRe, function(letter, index) {
+    .replace(camelCaseRe, function (letter, index) {
       return letter[!index ? 'toLowerCase' : 'toUpperCase']();
     })
     .replace(camelCaseWhitespaceRe, '');
@@ -128,16 +132,16 @@ function each(arr, callback) {
 cash.each = each; // @require core/cash.js
 // @require core/each.js
 
-fn.each = function(callback) {
-  each(this, function(ele, i) {
+fn.each = function (callback) {
+  each(this, function (ele, i) {
     return callback.call(ele, i, ele);
   });
   return this;
 }; // @require core/cash.js
 // @require collection/each.js
 
-fn.removeProp = function(prop) {
-  return this.each(function(i, ele) {
+fn.removeProp = function (prop) {
+  return this.each(function (i, ele) {
     delete ele[prop];
   });
 }; // @require ./cash.js
@@ -199,12 +203,12 @@ cash.isArray = isArray; // @require core/cash.js
 // @require core/type_checking.js
 // @require collection/each.js
 
-fn.prop = function(prop, value) {
+fn.prop = function (prop, value) {
   if (!prop) return;
 
   if (isString(prop)) {
     if (arguments.length < 2) return this[0] && this[0][prop];
-    return this.each(function(i, ele) {
+    return this.each(function (i, ele) {
       ele[prop] = value;
     });
   }
@@ -219,14 +223,14 @@ fn.prop = function(prop, value) {
 
 function getCompareFunction(selector) {
   return isString(selector)
-    ? function(i, ele) {
+    ? function (i, ele) {
         return matches(ele, selector);
       }
     : selector.__cash
-    ? function(i, ele) {
+    ? function (i, ele) {
         return selector.is(ele);
       }
-    : function(i, ele, selector) {
+    : function (i, ele, selector) {
         return ele === selector;
       };
 } // @require core/cash.js
@@ -235,13 +239,11 @@ function getCompareFunction(selector) {
 // @require core/variables.js
 // @require collection/get.js
 
-fn.filter = function(selector) {
+fn.filter = function (selector) {
   if (!selector) return cash();
-  var comparator = isFunction(selector)
-    ? selector
-    : getCompareFunction(selector);
+  var comparator = isFunction(selector) ? selector : getCompareFunction(selector);
   return cash(
-    filter.call(this, function(ele, i) {
+    filter.call(this, function (ele, i) {
       return comparator.call(ele, i, ele, selector);
     })
   );
@@ -255,12 +257,12 @@ function getSplitValues(str) {
 // @require core/get_split_values.js
 // @require collection/each.js
 
-fn.hasClass = function(cls) {
+fn.hasClass = function (cls) {
   var classes = getSplitValues(cls);
   var check = false;
 
   if (classes.length) {
-    this.each(function(i, ele) {
+    this.each(function (i, ele) {
       check = ele.classList.contains(classes[0]);
       return !check;
     });
@@ -271,11 +273,11 @@ fn.hasClass = function(cls) {
 // @require core/get_split_values.js
 // @require collection/each.js
 
-fn.removeAttr = function(attr) {
+fn.removeAttr = function (attr) {
   var attrs = getSplitValues(attr);
   if (!attrs.length) return this;
-  return this.each(function(i, ele) {
-    each(attrs, function(a) {
+  return this.each(function (i, ele) {
+    each(attrs, function (a) {
       ele.removeAttribute(a);
     });
   });
@@ -284,7 +286,7 @@ fn.removeAttr = function(attr) {
 // @require collection/each.js
 // @require ./remove_attr.js
 
-fn.attr = function(attr, value) {
+fn.attr = function (attr, value) {
   if (!attr) return;
 
   if (isString(attr)) {
@@ -297,7 +299,7 @@ fn.attr = function(attr, value) {
     }
 
     if (value === null) return this.removeAttr(attr);
-    return this.each(function(i, ele) {
+    return this.each(function (i, ele) {
       ele.setAttribute(attr, value);
     });
   }
@@ -312,12 +314,12 @@ fn.attr = function(attr, value) {
 // @require core/get_split_values.js
 // @require collection/each.js
 
-fn.toggleClass = function(cls, force) {
+fn.toggleClass = function (cls, force) {
   var classes = getSplitValues(cls),
     isForce = force !== undefined;
   if (!classes.length) return this;
-  return this.each(function(i, ele) {
-    each(classes, function(c) {
+  return this.each(function (i, ele) {
+    each(classes, function (c) {
       if (isForce) {
         force ? ele.classList.add(c) : ele.classList.remove(c);
       } else {
@@ -328,16 +330,14 @@ fn.toggleClass = function(cls, force) {
 }; // @require core/cash.js
 // @require ./toggle_class.js
 
-fn.addClass = function(cls) {
+fn.addClass = function (cls) {
   return this.toggleClass(cls, true);
 }; // @require core/cash.js
 // @require ./attr.js
 // @require ./toggle_class.js
 
-fn.removeClass = function(cls) {
-  return !arguments.length
-    ? this.attr('class', '')
-    : this.toggleClass(cls, false);
+fn.removeClass = function (cls) {
+  return !arguments.length ? this.attr('class', '') : this.toggleClass(cls, false);
 }; // @optional ./add_class.js
 // @optional ./attr.js
 // @optional ./has_class.js
@@ -349,7 +349,7 @@ fn.removeClass = function(cls) {
 // @require ./cash.js
 
 function unique(arr) {
-  return arr.filter(function(item, index, self) {
+  return arr.filter(function (item, index, self) {
     return self.indexOf(item) === index;
   });
 }
@@ -358,18 +358,14 @@ cash.unique = unique; // @require core/cash.js
 // @require core/unique.js
 // @require ./get.js
 
-fn.add = function(selector, context) {
+fn.add = function (selector, context) {
   return cash(unique(this.get().concat(cash(selector, context).get())));
 }; // @require core/variables.js
 
 function computeStyle(ele, prop, isVariable) {
   if (ele.nodeType !== 1) return;
   var style = win.getComputedStyle(ele, null);
-  return prop
-    ? isVariable
-      ? style.getPropertyValue(prop)
-      : style[prop]
-    : style;
+  return prop ? (isVariable ? style.getPropertyValue(prop) : style[prop]) : style;
 } // @require ./compute_style.js
 
 function computeStyleInt(ele, prop) {
@@ -401,13 +397,8 @@ function getPrefixedProp(prop, isVariable) {
   if (!prefixedProps[prop]) {
     var propCC = camelCase(prop),
       propUC = '' + propCC.charAt(0).toUpperCase() + propCC.slice(1),
-      props = (
-        propCC +
-        ' ' +
-        vendorsPrefixes.join(propUC + ' ') +
-        propUC
-      ).split(' ');
-    each(props, function(p) {
+      props = (propCC + ' ' + vendorsPrefixes.join(propUC + ' ') + propUC).split(' ');
+    each(props, function (p) {
       if (p in style) {
         prefixedProps[prop] = p;
         return false;
@@ -432,7 +423,7 @@ var numericProps = {
   order: true,
   orphans: true,
   widows: true,
-  zIndex: true
+  zIndex: true,
 };
 
 function getSuffixedValue(prop, value, isVariable) {
@@ -440,9 +431,7 @@ function getSuffixedValue(prop, value, isVariable) {
     isVariable = isCSSVariable(prop);
   }
 
-  return !isVariable && !numericProps[prop] && isNumeric(value)
-    ? value + 'px'
-    : value;
+  return !isVariable && !numericProps[prop] && isNumeric(value) ? value + 'px' : value;
 } // @require core/cash.js
 // @require core/type_checking.js
 // @require collection/each.js
@@ -451,15 +440,14 @@ function getSuffixedValue(prop, value, isVariable) {
 // @require ./helpers/get_suffixed_value.js
 // @require ./helpers/is_css_variable.js
 
-fn.css = function(prop, value) {
+fn.css = function (prop, value) {
   if (isString(prop)) {
     var isVariable = isCSSVariable(prop);
     prop = getPrefixedProp(prop, isVariable);
-    if (arguments.length < 2)
-      return this[0] && computeStyle(this[0], prop, isVariable);
+    if (arguments.length < 2) return this[0] && computeStyle(this[0], prop, isVariable);
     if (!prop) return this;
     value = getSuffixedValue(prop, value, isVariable);
-    return this.each(function(i, ele) {
+    return this.each(function (i, ele) {
       if (ele.nodeType !== 1) return;
 
       if (isVariable) {
@@ -481,7 +469,7 @@ var dataNamespace = '__cashData',
   dataAttributeRe = /^data-(.*)/; // @require core/cash.js
 // @require ./helpers/variables.js
 
-cash.hasData = function(ele) {
+cash.hasData = function (ele) {
   return dataNamespace in ele;
 }; // @require ./variables.js
 
@@ -495,9 +483,7 @@ function getData(ele, key) {
 
   if (key) {
     if (!(key in cache)) {
-      var value = ele.dataset
-        ? ele.dataset[key] || ele.dataset[camelCase(key)]
-        : cash(ele).attr('data-' + key);
+      var value = ele.dataset ? ele.dataset[key] || ele.dataset[camelCase(key)] : cash(ele).attr('data-' + key);
 
       if (value !== undefined) {
         try {
@@ -532,12 +518,12 @@ function setData(ele, key, value) {
 // @require ./helpers/set_data.js
 // @require ./helpers/variables.js
 
-fn.data = function(name, value) {
+fn.data = function (name, value) {
   var _this = this;
 
   if (!name) {
     if (!this[0]) return;
-    each(this[0].attributes, function(attr) {
+    each(this[0].attributes, function (attr) {
       var match = attr.name.match(dataAttributeRe);
       if (!match) return;
 
@@ -548,7 +534,7 @@ fn.data = function(name, value) {
 
   if (isString(name)) {
     if (value === undefined) return this[0] && getData(this[0], name);
-    return this.each(function(i, ele) {
+    return this.each(function (i, ele) {
       return setData(ele, name, value);
     });
   }
@@ -562,8 +548,8 @@ fn.data = function(name, value) {
 // @require collection/each.js
 // @require ./helpers/remove_data.js
 
-fn.removeData = function(key) {
-  return this.each(function(i, ele) {
+fn.removeData = function (key) {
+  return this.each(function (i, ele) {
     return removeData(ele, key);
   });
 }; // @optional ./data.js
@@ -581,8 +567,8 @@ function getExtraSpace(ele, xAxis) {
 // @require core/each.js
 // @require core/variables.js
 
-each(['Width', 'Height'], function(prop) {
-  fn['inner' + prop] = function() {
+each(['Width', 'Height'], function (prop) {
+  fn['inner' + prop] = function () {
     if (!this[0]) return;
     if (this[0] === win) return win['inner' + prop];
     return this[0]['client' + prop];
@@ -595,25 +581,20 @@ each(['Width', 'Height'], function(prop) {
 // @require css/helpers/get_suffixed_value.js
 // @require ./helpers/get_extra_space.js
 
-each(['width', 'height'], function(prop, index) {
-  fn[prop] = function(value) {
+each(['width', 'height'], function (prop, index) {
+  fn[prop] = function (value) {
     if (!this[0]) return value === undefined ? undefined : this;
 
     if (!arguments.length) {
       if (this[0] === win) return this[0][camelCase('outer-' + prop)];
-      return (
-        this[0].getBoundingClientRect()[prop] - getExtraSpace(this[0], !index)
-      );
+      return this[0].getBoundingClientRect()[prop] - getExtraSpace(this[0], !index);
     }
 
     value = parseInt(value, 10);
-    return this.each(function(i, ele) {
+    return this.each(function (i, ele) {
       if (ele.nodeType !== 1) return;
       var boxSizing = computeStyle(ele, 'boxSizing');
-      ele.style[prop] = getSuffixedValue(
-        prop,
-        value + (boxSizing === 'border-box' ? getExtraSpace(ele, !index) : 0)
-      );
+      ele.style[prop] = getSuffixedValue(prop, value + (boxSizing === 'border-box' ? getExtraSpace(ele, !index) : 0));
     });
   };
 }); // @require core/cash.js
@@ -621,8 +602,8 @@ each(['width', 'height'], function(prop, index) {
 // @require core/variables.js
 // @require css/helpers/compute_style_int.js
 
-each(['Width', 'Height'], function(prop, index) {
-  fn['outer' + prop] = function(includeMargins) {
+each(['Width', 'Height'], function (prop, index) {
+  fn['outer' + prop] = function (includeMargins) {
     if (!this[0]) return;
     if (this[0] === win) return win['outer' + prop];
     return (
@@ -646,7 +627,7 @@ function hasNamespaces(ns1, ns2) {
 } // @require core/each.js
 
 function removeEventListeners(cache, ele, name) {
-  each(cache[name], function(_ref) {
+  each(cache[name], function (_ref) {
     var namespaces = _ref[0],
       callback = _ref[1];
     ele.removeEventListener(name, callback);
@@ -696,14 +677,10 @@ function removeEvent(ele, name, namespaces, callback) {
     var eventCache = cache[name];
     if (!eventCache) return;
     if (callback) callback.guid = callback.guid || guid++;
-    cache[name] = eventCache.filter(function(_ref2) {
+    cache[name] = eventCache.filter(function (_ref2) {
       var ns = _ref2[0],
         cb = _ref2[1];
-      if (
-        (callback && cb.guid !== callback.guid) ||
-        !hasNamespaces(ns, namespaces)
-      )
-        return true;
+      if ((callback && cb.guid !== callback.guid) || !hasNamespaces(ns, namespaces)) return true;
       ele.removeEventListener(name, cb);
     });
   }
@@ -713,20 +690,20 @@ function removeEvent(ele, name, namespaces, callback) {
 // @require ./helpers/parse_event_name.js
 // @require ./helpers/remove_event.js
 
-fn.off = function(eventFullName, callback) {
+fn.off = function (eventFullName, callback) {
   var _this2 = this;
 
   if (eventFullName === undefined) {
-    this.each(function(i, ele) {
+    this.each(function (i, ele) {
       return removeEvent(ele);
     });
   } else {
-    each(getSplitValues(eventFullName), function(eventFullName) {
+    each(getSplitValues(eventFullName), function (eventFullName) {
       var _parseEventName = parseEventName(eventFullName),
         name = _parseEventName[0],
         namespaces = _parseEventName[1];
 
-      _this2.each(function(i, ele) {
+      _this2.each(function (i, ele) {
         return removeEvent(ele, name, namespaces, callback);
       });
     });
@@ -745,7 +722,7 @@ fn.off = function(eventFullName, callback) {
 // @require ./helpers/parse_event_name.js
 // @require ./helpers/remove_event.js
 
-fn.on = function(eventFullName, selector, callback, _one) {
+fn.on = function (eventFullName, selector, callback, _one) {
   var _this3 = this;
 
   if (!isString(eventFullName)) {
@@ -761,21 +738,14 @@ fn.on = function(eventFullName, selector, callback, _one) {
     selector = false;
   }
 
-  each(getSplitValues(eventFullName), function(eventFullName) {
+  each(getSplitValues(eventFullName), function (eventFullName) {
     var _parseEventName2 = parseEventName(eventFullName),
       name = _parseEventName2[0],
       namespaces = _parseEventName2[1];
 
-    _this3.each(function(i, ele) {
+    _this3.each(function (i, ele) {
       var finalCallback = function finalCallback(event) {
-        if (
-          event.namespace &&
-          !hasNamespaces(
-            namespaces,
-            event.namespace.split(eventsNamespacesSeparator)
-          )
-        )
-          return;
+        if (event.namespace && !hasNamespaces(namespaces, event.namespace.split(eventsNamespacesSeparator))) return;
         var thisArg = ele;
 
         if (selector) {
@@ -811,12 +781,12 @@ fn.on = function(eventFullName, selector, callback, _one) {
 }; // @require core/cash.js
 // @require ./on.js
 
-fn.one = function(eventFullName, delegate, callback) {
+fn.one = function (eventFullName, delegate, callback) {
   return this.on(eventFullName, delegate, callback, true);
 }; // @require core/cash.js
 // @require core/variables.js
 
-fn.ready = function(callback) {
+fn.ready = function (callback) {
   var finalCallback = function finalCallback() {
     return callback(cash);
   };
@@ -835,7 +805,7 @@ fn.ready = function(callback) {
 // @require ./helpers/parse_event_name.js
 // @require ./helpers/variables.js
 
-fn.trigger = function(eventFullName, data) {
+fn.trigger = function (eventFullName, data) {
   var evt = eventFullName;
 
   if (isString(eventFullName)) {
@@ -849,7 +819,7 @@ fn.trigger = function(eventFullName, data) {
   }
 
   evt.data = data;
-  return this.each(function(i, ele) {
+  return this.each(function (i, ele) {
     ele.dispatchEvent(evt);
   });
 }; // @optional ./off.js
@@ -861,7 +831,7 @@ fn.trigger = function(eventFullName, data) {
 
 function getValueSelectMultiple(ele) {
   var values = [];
-  each(ele.options, function(option) {
+  each(ele.options, function (option) {
     if (option.selected && !option.disabled && !option.parentNode.disabled) {
       values.push(option.value);
     }
@@ -887,12 +857,7 @@ function getValue(ele) {
 var queryEncodeSpaceRe = /%20/g;
 
 function queryEncode(prop, value) {
-  return (
-    '&' +
-    encodeURIComponent(prop) +
-    '=' +
-    encodeURIComponent(value).replace(queryEncodeSpaceRe, '+')
-  );
+  return '&' + encodeURIComponent(prop) + '=' + encodeURIComponent(value).replace(queryEncodeSpaceRe, '+');
 } // @require core/cash.js
 // @require core/each.js
 // @require core/type_checking.js
@@ -902,17 +867,17 @@ function queryEncode(prop, value) {
 var skippableRe = /file|reset|submit|button|image/i,
   checkableRe = /radio|checkbox/i;
 
-fn.serialize = function() {
+fn.serialize = function () {
   var query = '';
-  this.each(function(i, ele) {
-    each(ele.elements || [ele], function(ele) {
+  this.each(function (i, ele) {
+    each(ele.elements || [ele], function (ele) {
       if (ele.disabled || !ele.name || ele.tagName === 'FIELDSET') return;
       if (skippableRe.test(ele.type)) return;
       if (checkableRe.test(ele.type) && !ele.checked) return;
       var value = getValue(ele);
       if (value === undefined) return;
       var values = isArray(value) ? value : [value];
-      each(values, function(value) {
+      each(values, function (value) {
         query += queryEncode(ele.name, value);
       });
     });
@@ -924,14 +889,14 @@ fn.serialize = function() {
 // @require collection/each.js
 // @require ./helpers/get_value.js
 
-fn.val = function(value) {
+fn.val = function (value) {
   if (value === undefined) return this[0] && getValue(this[0]);
-  return this.each(function(i, ele) {
+  return this.each(function (i, ele) {
     var isMultiple = selectMultipleRe.test(ele.type),
       eleValue = value === null ? (isMultiple ? [] : '') : value;
 
     if (isMultiple && isArray(eleValue)) {
-      each(ele.options, function(option) {
+      each(ele.options, function (option) {
         option.selected = eleValue.indexOf(option.value) >= 0;
       });
     } else {
@@ -943,15 +908,15 @@ fn.val = function(value) {
 // @require core/cash.js
 // @require collection/map.js
 
-fn.clone = function() {
-  return this.map(function(i, ele) {
+fn.clone = function () {
+  return this.map(function (i, ele) {
     return ele.cloneNode(true);
   });
 }; // @require core/cash.js
 // @require collection/each.js
 
-fn.detach = function() {
-  return this.each(function(i, ele) {
+fn.detach = function () {
+  return this.each(function (i, ele) {
     if (ele.parentNode) {
       ele.parentNode.removeChild(ele);
     }
@@ -977,7 +942,7 @@ function initContainers() {
     th: tr,
     thead: table,
     tbody: table,
-    tfoot: table
+    tfoot: table,
   };
 }
 
@@ -988,9 +953,7 @@ function parseHTML(html) {
   var fragment = fragmentRe.test(html) && RegExp.$1,
     container = containers[fragment] || containers['*'];
   container.innerHTML = html;
-  return cash(container.childNodes)
-    .detach()
-    .get();
+  return cash(container.childNodes).detach().get();
 }
 
 cash.parseHTML = parseHTML; // @optional ./camel_case.js
@@ -1009,7 +972,7 @@ cash.parseHTML = parseHTML; // @optional ./camel_case.js
 // @require ./type_checking.js
 // @require core/cash.js
 
-fn.empty = function() {
+fn.empty = function () {
   var ele = this[0];
 
   if (ele) {
@@ -1036,22 +999,18 @@ function insertContent(parent, child, prepend) {
   var isStr = isString(child);
 
   if (!isStr && child.length) {
-    each(child, function(ele) {
+    each(child, function (ele) {
       return insertContent(parent, ele, prepend);
     });
   } else {
     each(
       parent,
       isStr
-        ? function(ele) {
+        ? function (ele) {
             ele.insertAdjacentHTML(prepend ? 'afterbegin' : 'beforeend', child);
           }
-        : function(ele, index) {
-            return insertElement(
-              ele,
-              !index ? child : child.cloneNode(true),
-              prepend
-            );
+        : function (ele, index) {
+            return insertElement(ele, !index ? child : child.cloneNode(true), prepend);
           }
     );
   }
@@ -1059,38 +1018,38 @@ function insertContent(parent, child, prepend) {
 // @require core/each.js
 // @require ./helpers/insert_content.js
 
-fn.append = function() {
+fn.append = function () {
   var _this4 = this;
 
-  each(arguments, function(content) {
+  each(arguments, function (content) {
     insertContent(_this4, content);
   });
   return this;
 }; // @require core/cash.js
 // @require ./helpers/insert_content.js
 
-fn.appendTo = function(parent) {
+fn.appendTo = function (parent) {
   insertContent(cash(parent), this);
   return this;
 }; // @require core/cash.js
 // @require collection/each.js
 
-fn.html = function(content) {
+fn.html = function (content) {
   if (content === undefined) return this[0] && this[0].innerHTML;
   var source = content.nodeType ? content[0].outerHTML : content;
-  return this.each(function(i, ele) {
+  return this.each(function (i, ele) {
     ele.innerHTML = source;
   });
 }; // @require core/cash.js
 // @require collection/each.js
 
-fn.insertAfter = function(content) {
+fn.insertAfter = function (content) {
   var _this5 = this;
 
-  cash(content).each(function(index, ele) {
+  cash(content).each(function (index, ele) {
     var parent = ele.parentNode;
 
-    _this5.each(function(i, e) {
+    _this5.each(function (i, e) {
       parent.insertBefore(!index ? e : e.cloneNode(true), ele.nextSibling);
     });
   });
@@ -1101,23 +1060,23 @@ fn.insertAfter = function(content) {
 // @require collection/slice.js
 // @require ./insert_after.js
 
-fn.after = function() {
+fn.after = function () {
   var _this6 = this;
 
-  each(reverse.apply(arguments), function(content) {
+  each(reverse.apply(arguments), function (content) {
     reverse.apply(cash(content).slice()).insertAfter(_this6);
   });
   return this;
 }; // @require core/cash.js
 // @require collection/each.js
 
-fn.insertBefore = function(selector) {
+fn.insertBefore = function (selector) {
   var _this7 = this;
 
-  cash(selector).each(function(index, ele) {
+  cash(selector).each(function (index, ele) {
     var parent = ele.parentNode;
 
-    _this7.each(function(i, e) {
+    _this7.each(function (i, e) {
       parent.insertBefore(!index ? e : e.cloneNode(true), ele);
     });
   });
@@ -1126,10 +1085,10 @@ fn.insertBefore = function(selector) {
 // @require core/each.js
 // @require ./insert_before.js
 
-fn.before = function() {
+fn.before = function () {
   var _this8 = this;
 
-  each(arguments, function(content) {
+  each(arguments, function (content) {
     cash(content).insertBefore(_this8);
   });
   return this;
@@ -1137,10 +1096,10 @@ fn.before = function() {
 // @require core/each.js
 // @require ./helpers/insert_content.js
 
-fn.prepend = function() {
+fn.prepend = function () {
   var _this9 = this;
 
-  each(arguments, function(content) {
+  each(arguments, function (content) {
     insertContent(_this9, content, true);
   });
   return this;
@@ -1149,14 +1108,14 @@ fn.prepend = function() {
 // @require collection/slice.js
 // @require ./helpers/insert_content.js
 
-fn.prependTo = function(parent) {
+fn.prependTo = function (parent) {
   insertContent(cash(parent), reverse.apply(this.slice()), true);
   return this;
 }; // @require core/cash.js
 // @require events/off.js
 // @require ./detach.js
 
-fn.remove = function() {
+fn.remove = function () {
   return this.detach().off();
 }; // @require core/cash.js
 // @require collection/each.js
@@ -1164,10 +1123,10 @@ fn.remove = function() {
 // @require ./after.js
 // @require ./remove.js
 
-fn.replaceWith = function(content) {
+fn.replaceWith = function (content) {
   var _this10 = this;
 
-  return this.each(function(i, ele) {
+  return this.each(function (i, ele) {
     var parent = ele.parentNode;
     if (!parent) return;
     var $eles = i ? cash(content).clone() : cash(content);
@@ -1184,15 +1143,15 @@ fn.replaceWith = function(content) {
 }; // @require core/cash.js
 // @require ./replace_with.js
 
-fn.replaceAll = function(content) {
+fn.replaceAll = function (content) {
   cash(content).replaceWith(this);
   return this;
 }; // @require core/cash.js
 // @require collection/each.js
 
-fn.text = function(content) {
+fn.text = function (content) {
   if (content === undefined) return this[0] ? this[0].textContent : '';
-  return this.each(function(i, ele) {
+  return this.each(function (i, ele) {
     ele.textContent = content;
   });
 }; // @optional ./after.js
@@ -1216,26 +1175,26 @@ fn.text = function(content) {
 
 var docEle = doc && doc.documentElement;
 
-fn.offset = function() {
+fn.offset = function () {
   var ele = this[0];
   if (!ele) return;
   var rect = ele.getBoundingClientRect();
   return {
     top: rect.top + win.pageYOffset - docEle.clientTop,
-    left: rect.left + win.pageXOffset - docEle.clientLeft
+    left: rect.left + win.pageXOffset - docEle.clientLeft,
   };
 }; // @require core/cash.js
 
-fn.offsetParent = function() {
+fn.offsetParent = function () {
   return cash(this[0] && this[0].offsetParent);
 }; // @require core/cash.js
 
-fn.position = function() {
+fn.position = function () {
   var ele = this[0];
   if (!ele) return;
   return {
     left: ele.offsetLeft,
-    top: ele.offsetTop
+    top: ele.offsetTop,
   };
 }; // @optional ./offset.js
 // @optional ./offset_parent.js
@@ -1246,27 +1205,24 @@ fn.position = function() {
 // @require collection/each.js
 // @require collection/filter.js
 
-fn.children = function(selector) {
+fn.children = function (selector) {
   var result = [];
-  this.each(function(i, ele) {
+  this.each(function (i, ele) {
     push.apply(result, ele.children);
   });
   result = cash(unique(result));
   if (!selector) return result;
-  return result.filter(function(i, ele) {
+  return result.filter(function (i, ele) {
     return matches(ele, selector);
   });
 }; // @require core/cash.js
 // @require core/unique.js
 // @require collection/each.js
 
-fn.contents = function() {
+fn.contents = function () {
   var result = [];
-  this.each(function(i, ele) {
-    push.apply(
-      result,
-      ele.tagName === 'IFRAME' ? [ele.contentDocument] : ele.childNodes
-    );
+  this.each(function (i, ele) {
+    push.apply(result, ele.tagName === 'IFRAME' ? [ele.contentDocument] : ele.childNodes);
   });
   return cash(result.length && unique(result));
 }; // @require core/cash.js
@@ -1274,7 +1230,7 @@ fn.contents = function() {
 // @require core/find.js
 // @require core/variables.js
 
-fn.find = function(selector) {
+fn.find = function (selector) {
   var result = [];
 
   for (var i = 0, l = this.length; i < l; i++) {
@@ -1291,12 +1247,12 @@ fn.find = function(selector) {
 // @require core/type_checking.js
 // @require collection/filter.js
 
-fn.has = function(selector) {
+fn.has = function (selector) {
   var comparator = isString(selector)
-    ? function(i, ele) {
+    ? function (i, ele) {
         return !!find(selector, ele).length;
       }
-    : function(i, ele) {
+    : function (i, ele) {
         return ele.contains(selector);
       };
   return this.filter(comparator);
@@ -1304,36 +1260,36 @@ fn.has = function(selector) {
 // @require core/get_compare_function.js
 // @require collection/each.js
 
-fn.is = function(selector) {
+fn.is = function (selector) {
   if (!selector || !this[0]) return false;
   var comparator = getCompareFunction(selector);
   var check = false;
-  this.each(function(i, ele) {
+  this.each(function (i, ele) {
     check = comparator(i, ele, selector);
     return !check;
   });
   return check;
 }; // @require core/cash.js
 
-fn.next = function() {
+fn.next = function () {
   return cash(this[0] && this[0].nextElementSibling);
 }; // @require core/cash.js
 // @require core/get_compare_function.js
 // @require collection/filter.js
 
-fn.not = function(selector) {
+fn.not = function (selector) {
   if (!selector || !this[0]) return this;
   var comparator = getCompareFunction(selector);
-  return this.filter(function(i, ele) {
+  return this.filter(function (i, ele) {
     return !comparator(i, ele, selector);
   });
 }; // @require core/cash.js
 // @require core/unique.js
 // @require collection/each.js
 
-fn.parent = function() {
+fn.parent = function () {
   var result = [];
-  this.each(function(i, ele) {
+  this.each(function (i, ele) {
     if (ele && ele.parentNode) {
       result.push(ele.parentNode);
     }
@@ -1346,13 +1302,9 @@ fn.parent = function() {
 // @require ./get.js
 //FIXME Ugly file name, is there a better option?
 
-fn.index = function(ele) {
+fn.index = function (ele) {
   var child = ele ? cash(ele)[0] : this[0],
-    collection = ele
-      ? this
-      : cash(child)
-          .parent()
-          .children();
+    collection = ele ? this : cash(child).parent().children();
   return indexOf.call(collection, child);
 }; // @optional ./add.js
 // @optional ./each.js
@@ -1369,7 +1321,7 @@ fn.index = function(ele) {
 // @require ./is.js
 // @require ./parent.js
 
-fn.closest = function(selector) {
+fn.closest = function (selector) {
   if (!selector || !this[0]) return cash();
   if (this.is(selector)) return this.filter(selector);
   return this.parent().closest(selector);
@@ -1379,10 +1331,10 @@ fn.closest = function(selector) {
 // @require core/variables.js
 // @require collection/each.js
 
-fn.parents = function(selector) {
+fn.parents = function (selector) {
   var result = [];
   var last;
-  this.each(function(i, ele) {
+  this.each(function (i, ele) {
     last = ele;
 
     while (last && last.parentNode && last !== doc.body.parentNode) {
@@ -1396,18 +1348,18 @@ fn.parents = function(selector) {
   return cash(unique(result));
 }; // @require core/cash.js
 
-fn.prev = function() {
+fn.prev = function () {
   return cash(this[0] && this[0].previousElementSibling);
 }; // @require core/cash.js
 // @require collection/filter.js
 // @require ./children.js
 // @require ./parent.js
 
-fn.siblings = function() {
+fn.siblings = function () {
   var ele = this[0];
   return this.parent()
     .children()
-    .filter(function(i, child) {
+    .filter(function (i, child) {
       return child !== ele;
     });
 }; // @optional ./children.js

src/utils/dom.js

@@ -5,8 +5,7 @@ const KEY_TAG = 'tag';
 const KEY_ATTR = 'attributes';
 const KEY_CHILD = 'children';
 
-export const motionsEv =
-  'transitionend oTransitionEnd transitionend webkitTransitionEnd';
+export const motionsEv = 'transitionend oTransitionEnd transitionend webkitTransitionEnd';
 
 export const isDoc = el => el && el.nodeType === 9;
 
@@ -18,14 +17,10 @@ export const removeEl = el => {
 export const find = (el, query) => el.querySelectorAll(query);
 
 export const attrUp = (el, attrs = {}) =>
-  el &&
-  el.setAttribute &&
-  each(attrs, (value, key) => el.setAttribute(key, value));
+  el && el.setAttribute && each(attrs, (value, key) => el.setAttribute(key, value));
 
 export const isVisible = el => {
-  return (
-    el && !!(el.offsetWidth || el.offsetHeight || el.getClientRects().length)
-  );
+  return el && !!(el.offsetWidth || el.offsetHeight || el.getClientRects().length);
 };
 
 export const empty = node => {
@@ -90,7 +85,7 @@ export const createCustomEvent = (e, cls) => {
       Object.defineProperty(oEvent, prop, {
         get() {
           return this.keyCodeVal;
-        }
+        },
       });
     });
   }

src/utils/index.js

@@ -24,6 +24,6 @@ export default () => {
     Sorter,
     Resizer,
     Dragger,
-    helpers: { ...mixins }
+    helpers: { ...mixins },
   };
 };

src/utils/polyfills.js

@@ -16,7 +16,7 @@ export default () => {
       ['edge', /Edge\/([0-9\._]+)/],
       ['ie', /MSIE\s(7\.0)/],
       ['ie', /MSIE\s([0-9\.]+);.*Trident\/[4-7].0/],
-      ['ie', /Trident\/7\.0.*rv\:([0-9\.]+).*\).*Gecko$/]
+      ['ie', /Trident\/7\.0.*rv\:([0-9\.]+).*\).*Gecko$/],
     ];
 
     for (let i = 0; i < rules.length; i++) {
@@ -29,8 +29,7 @@ export default () => {
   };
 
   if (hasWin() && isIE()) {
-    const originalCreateHTMLDocument =
-      DOMImplementation.prototype.createHTMLDocument;
+    const originalCreateHTMLDocument = DOMImplementation.prototype.createHTMLDocument;
     DOMImplementation.prototype.createHTMLDocument = title => {
       if (!title) title = '';
       return originalCreateHTMLDocument.apply(document.implementation, [title]);

test/specs/asset_manager/view/AssetImageView.js

@@ -10,7 +10,7 @@ describe('AssetImageView', () => {
     obj = new AssetImageView({
       collection: new Assets(),
       config: {},
-      model
+      model,
     });
     document.body.innerHTML = '<div id="fixtures"></div>';
     document.body.querySelector('#fixtures').appendChild(obj.render().el);

test/specs/asset_manager/view/AssetView.js

@@ -13,12 +13,10 @@ describe('AssetView', () => {
     var model = coll.add({ src: 'test' });
     testContext.view = new AssetView({
       config: {},
-      model
+      model,
     });
     document.body.innerHTML = '<div id="fixtures"></div>';
-    document.body
-      .querySelector('#fixtures')
-      .appendChild(testContext.view.render().el);
+    document.body.querySelector('#fixtures').appendChild(testContext.view.render().el);
   });
 
   afterEach(() => {

test/specs/asset_manager/view/AssetsView.js

@@ -12,7 +12,7 @@ describe('AssetsView', () => {
       config: {},
       collection: coll,
       globalCollection: new Assets([]),
-      fu: new FileUploader({})
+      fu: new FileUploader({}),
     });
     document.body.innerHTML = '<div id="fixtures"></div>';
     obj.render();
@@ -74,14 +74,14 @@ describe('AssetsView', () => {
 
     beforeEach(() => {
       var config = {
-        showUrlInput: true
+        showUrlInput: true,
       };
 
       obj = new AssetsView({
         config: config,
         collection: coll,
         globalCollection: new Assets([]),
-        fu: new FileUploader({})
+        fu: new FileUploader({}),
       });
       document.body.innerHTML = '<div id="fixtures"></div>';
       obj.render();
@@ -95,7 +95,7 @@ describe('AssetsView', () => {
     test('Add image asset from input string', () => {
       obj.getAddInput().value = 'test';
       obj.handleSubmit({
-        preventDefault() {}
+        preventDefault() {},
       });
       var asset = obj.options.globalCollection.at(0);
       expect(asset.get('src')).toEqual('test');
@@ -108,7 +108,7 @@ describe('AssetsView', () => {
 
     beforeEach(() => {
       var config = {
-        showUrlInput: false
+        showUrlInput: false,
       };
 
       coll = new Assets([]);
@@ -116,7 +116,7 @@ describe('AssetsView', () => {
         config: config,
         collection: coll,
         globalCollection: new Assets([]),
-        fu: new FileUploader({})
+        fu: new FileUploader({}),
       });
       document.body.innerHTML = '<div id="fixtures"></div>';
       obj.render();

test/specs/asset_manager/view/FileUploader.js

@@ -44,8 +44,8 @@ describe('File Uploader', () => {
       var view = new FileUploader({
         config: {
           disableUpload: true,
-          upload: 'something'
-        }
+          upload: 'something',
+        },
       });
       view.render();
       expect(view.$el.find('input[type=file]').prop('disabled')).toEqual(true);
@@ -54,8 +54,8 @@ describe('File Uploader', () => {
     test('Handles multiUpload false', () => {
       var view = new FileUploader({
         config: {
-          multiUpload: false
-        }
+          multiUpload: false,
+        },
       });
       view.render();
       expect(view.$el.find('input[type=file]').prop('multiple')).toBeFalsy();
@@ -64,8 +64,8 @@ describe('File Uploader', () => {
     test('Handles embedAsBase64 parameter', () => {
       var view = new FileUploader({
         config: {
-          embedAsBase64: true
-        }
+          embedAsBase64: true,
+        },
       });
       view.render();
       expect(view.$el.find('input[type=file]').prop('disabled')).toEqual(false);

test/specs/block_manager/view/BlocksView.js

@@ -50,10 +50,10 @@ describe('BlocksView', () => {
       model = new Blocks([{ name: 'test1' }, { name: 'test2' }]);
       view = new BlocksView(
         {
-          collection: model
+          collection: model,
         },
         {
-          pStylePrefix: ppfx
+          pStylePrefix: ppfx,
         }
       );
       document.body.innerHTML = '<div id="fixtures"></div>';
@@ -65,9 +65,7 @@ describe('BlocksView', () => {
     });
 
     test('Render container', () => {
-      expect(view.getBlocksEl().getAttribute('class')).toEqual(
-        ppfx + 'blocks-c'
-      );
+      expect(view.getBlocksEl().getAttribute('class')).toEqual(ppfx + 'blocks-c');
     });
   });
 });

test/specs/code_manager/model/CodeModels.js

@@ -15,7 +15,7 @@ describe('HtmlGenerator', () => {
   beforeEach(() => {
     em = new Editor();
     obj = new HtmlGenerator();
-    dcomp = new DomComponents();
+    dcomp = new DomComponents(em);
     comp = new Component(
       {},
       {
@@ -73,7 +73,7 @@ describe('CssGenerator', () => {
 
     cc = em.get('CssComposer');
     obj = new CssGenerator();
-    dcomp = new DomComponents();
+    dcomp = new DomComponents(em);
     comp = new Component(
       {},
       {