From f386203b26af38d87a94708c6a2f3ec5e835c244 Mon Sep 17 00:00:00 2001
From: Alex <ritt.alex@gmail.com>
Date: Sat, 7 May 2022 23:11:31 +0200
Subject: [PATCH 1/5] Convert DomComponent Module to ts

---
 src/abstract/Module.ts                        |  43 +--
 src/dom_components/{index.js => index.ts}     | 326 ++++++++++--------
 src/dom_components/model/Component.js         |   4 +-
 src/dom_components/model/Components.js        |  26 +-
 src/editor/model/Editor.ts                    | 293 ++++++++--------
 test/specs/code_manager/model/CodeModels.js   |   4 +-
 test/specs/dom_components/index.js            |   2 +-
 test/specs/dom_components/model/Component.js  |   2 +-
 test/specs/dom_components/view/ComponentV.js  |   2 +-
 .../dom_components/view/ComponentsView.js     |   6 +-
 test/specs/parser/model/ParserHtml.js         |   4 +-
 .../style_manager/view/PropertyColorView.js   |   2 +-
 .../view/PropertyCompositeView.js             |   2 +-
 .../style_manager/view/PropertyIntegerView.js |   2 +-
 .../style_manager/view/PropertyRadioView.js   |   2 +-
 .../style_manager/view/PropertySelectView.js  |   2 +-
 .../style_manager/view/PropertyStackView.js   |   2 +-
 test/specs/style_manager/view/PropertyView.js |   2 +-
 18 files changed, 386 insertions(+), 340 deletions(-)
 rename src/dom_components/{index.js => index.ts} (67%)

diff --git a/src/abstract/Module.ts b/src/abstract/Module.ts
index 5e1a5f074..9ef6022b6 100644
--- a/src/abstract/Module.ts
+++ b/src/abstract/Module.ts
@@ -1,14 +1,14 @@
-import { isElement, isUndefined } from 'underscore';
-import { Collection } from '../common';
-import EditorModel from '../editor/model/Editor';
-import { createId, isDef } from '../utils/mixins';
+import { isElement, isUndefined } from "underscore";
+import { Collection, View } from "../common";
+import EditorModel from "../editor/model/Editor";
+import { createId, isDef } from "../utils/mixins";
 
 export interface IModule<TConfig extends any = any>
   extends IBaseModule<TConfig> {
   init(cfg: any): void;
   destroy(): void;
   postLoad(key: any): any;
-  getConfig(): ModuleConfig;
+  config: TConfig;
   onLoad?(): void;
   name: string;
   postRender?(view: any): void;
@@ -48,7 +48,7 @@ export default abstract class Module<T extends ModuleConfig = ModuleConfig>
       ? em.config[name]
       : em.config[this.name];
     const cfg = cfgParent === true ? {} : cfgParent || {};
-    cfg.pStylePrefix = em.config.pStylePrefix || '';
+    cfg.pStylePrefix = em.config.pStylePrefix || "";
 
     if (!isUndefined(cfgParent) && !cfgParent) {
       cfg._disable = 1;
@@ -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;
@@ -120,15 +121,15 @@ export abstract class ItemManagerModule<
   ) {
     const { all, onResult, reset } = param;
     const key = this.storageKey;
-    const opts: any = { action: 'load' };
+    const opts: any = { action: "load" };
     const coll = all || this.all;
     let result = data[key];
 
-    if (typeof result == 'string') {
+    if (typeof result == "string") {
       try {
         result = JSON.parse(result);
       } catch (err) {
-        this.__logWarn('Data parsing failed', { input: result });
+        this.__logWarn("Data parsing failed", { input: result });
       }
     }
 
@@ -167,19 +168,19 @@ export abstract class ItemManagerModule<
     all &&
       em &&
       all
-        .on('add', (m: any, c: any, o: any) => em.trigger(events.add, m, o))
-        .on('remove', (m: any, c: any, o: any) =>
+        .on("add", (m: any, c: any, o: any) => em.trigger(events.add, m, o))
+        .on("remove", (m: any, c: any, o: any) =>
           em.trigger(events.remove, m, o)
         )
-        .on('change', (p: any, c: any) =>
+        .on("change", (p: any, c: any) =>
           em.trigger(events.update, p, p.changedAttributes(), c)
         )
-        .on('all', this.__catchAllEvent, this);
+        .on("all", this.__catchAllEvent, this);
     // Register collections
     this.cls = [all].concat(opts.collections || []);
     // Propagate events
     ((opts.propagate as any[]) || []).forEach(({ entity, event }) => {
-      entity.on('all', (ev: any, model: any, coll: any, opts: any) => {
+      entity.on("all", (ev: any, model: any, coll: any, opts: any) => {
         const options = opts || coll;
         const opt = { event: ev, ...options };
         [em, all].map((md) => md.trigger(event, model, opt));
@@ -233,15 +234,15 @@ export abstract class ItemManagerModule<
   }
 
   __listenAdd(model: TCollection, event: string) {
-    model.on('add', (m, c, o) => this.em.trigger(event, m, o));
+    model.on("add", (m, c, o) => this.em.trigger(event, m, o));
   }
 
   __listenRemove(model: TCollection, event: string) {
-    model.on('remove', (m, c, o) => this.em.trigger(event, m, o));
+    model.on("remove", (m, c, o) => this.em.trigger(event, m, o));
   }
 
   __listenUpdate(model: TCollection, event: string) {
-    model.on('change', (p, c) =>
+    model.on("change", (p, c) =>
       this.em.trigger(event, p, p.changedAttributes(), c)
     );
   }
@@ -251,5 +252,7 @@ export abstract class ItemManagerModule<
       coll.stopListening();
       coll.reset();
     });
+    this.view?.remove();
+    this.view = undefined;
   }
 }
diff --git a/src/dom_components/index.js b/src/dom_components/index.ts
similarity index 67%
rename from src/dom_components/index.js
rename to src/dom_components/index.ts
index 6b007e431..b4ac38f7b 100644
--- a/src/dom_components/index.js
+++ b/src/dom_components/index.ts
@@ -53,156 +53,167 @@
  *
  * @module Components
  */
-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';
-import ComponentView from './view/ComponentView';
-import ComponentWrapperView from './view/ComponentWrapperView';
-import ComponentsView from './view/ComponentsView';
-import ComponentTableCell from './model/ComponentTableCell';
-import ComponentTableCellView from './view/ComponentTableCellView';
-import ComponentTableRow from './model/ComponentTableRow';
-import ComponentTableRowView from './view/ComponentTableRowView';
-import ComponentTable from './model/ComponentTable';
-import ComponentTableView from './view/ComponentTableView';
-import ComponentTableHead from './model/ComponentTableHead';
-import ComponentTableHeadView from './view/ComponentTableHeadView';
-import ComponentTableBody from './model/ComponentTableBody';
-import ComponentTableBodyView from './view/ComponentTableBodyView';
-import ComponentTableFoot from './model/ComponentTableFoot';
-import ComponentTableFootView from './view/ComponentTableFootView';
-import ComponentMap from './model/ComponentMap';
-import ComponentMapView from './view/ComponentMapView';
-import ComponentLink from './model/ComponentLink';
-import ComponentLinkView from './view/ComponentLinkView';
-import ComponentLabel from './model/ComponentLabel';
-import ComponentLabelView from './view/ComponentLabelView';
-import ComponentVideo from './model/ComponentVideo';
-import ComponentVideoView from './view/ComponentVideoView';
-import ComponentImage from './model/ComponentImage';
-import ComponentImageView from './view/ComponentImageView';
-import ComponentScript from './model/ComponentScript';
-import ComponentScriptView from './view/ComponentScriptView';
-import ComponentSvg from './model/ComponentSvg';
-import ComponentSvgIn from './model/ComponentSvgIn';
-import ComponentSvgView from './view/ComponentSvgView';
-import ComponentComment from './model/ComponentComment';
-import ComponentCommentView from './view/ComponentCommentView';
-import ComponentTextNode from './model/ComponentTextNode';
-import ComponentTextNodeView from './view/ComponentTextNodeView';
-import ComponentText from './model/ComponentText';
-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';
-
-export default class ComponentManager extends Module {
+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";
+import ComponentView from "./view/ComponentView";
+import ComponentWrapperView from "./view/ComponentWrapperView";
+import ComponentsView from "./view/ComponentsView";
+import ComponentTableCell from "./model/ComponentTableCell";
+import ComponentTableCellView from "./view/ComponentTableCellView";
+import ComponentTableRow from "./model/ComponentTableRow";
+import ComponentTableRowView from "./view/ComponentTableRowView";
+import ComponentTable from "./model/ComponentTable";
+import ComponentTableView from "./view/ComponentTableView";
+import ComponentTableHead from "./model/ComponentTableHead";
+import ComponentTableHeadView from "./view/ComponentTableHeadView";
+import ComponentTableBody from "./model/ComponentTableBody";
+import ComponentTableBodyView from "./view/ComponentTableBodyView";
+import ComponentTableFoot from "./model/ComponentTableFoot";
+import ComponentTableFootView from "./view/ComponentTableFootView";
+import ComponentMap from "./model/ComponentMap";
+import ComponentMapView from "./view/ComponentMapView";
+import ComponentLink from "./model/ComponentLink";
+import ComponentLinkView from "./view/ComponentLinkView";
+import ComponentLabel from "./model/ComponentLabel";
+import ComponentLabelView from "./view/ComponentLabelView";
+import ComponentVideo from "./model/ComponentVideo";
+import ComponentVideoView from "./view/ComponentVideoView";
+import ComponentImage from "./model/ComponentImage";
+import ComponentImageView from "./view/ComponentImageView";
+import ComponentScript from "./model/ComponentScript";
+import ComponentScriptView from "./view/ComponentScriptView";
+import ComponentSvg from "./model/ComponentSvg";
+import ComponentSvgIn from "./model/ComponentSvgIn";
+import ComponentSvgView from "./view/ComponentSvgView";
+import ComponentComment from "./model/ComponentComment";
+import ComponentCommentView from "./view/ComponentCommentView";
+import ComponentTextNode from "./model/ComponentTextNode";
+import ComponentTextNodeView from "./view/ComponentTextNodeView";
+import ComponentText from "./model/ComponentText";
+import ComponentTextView from "./view/ComponentTextView";
+import ComponentWrapper from "./model/ComponentWrapper";
+import ComponentFrame from "./model/ComponentFrame";
+import ComponentFrameView from "./view/ComponentFrameView";
+import { ItemManagerModule } from "../abstract/Module";
+import EditorModel from "../editor/model/Editor";
+import { Model } from "backbone";
+
+export default class ComponentManager extends ItemManagerModule {
   componentTypes = [
     {
-      id: 'cell',
+      id: "cell",
       model: ComponentTableCell,
       view: ComponentTableCellView,
     },
     {
-      id: 'row',
+      id: "row",
       model: ComponentTableRow,
       view: ComponentTableRowView,
     },
     {
-      id: 'table',
+      id: "table",
       model: ComponentTable,
       view: ComponentTableView,
     },
     {
-      id: 'thead',
+      id: "thead",
       model: ComponentTableHead,
       view: ComponentTableHeadView,
     },
     {
-      id: 'tbody',
+      id: "tbody",
       model: ComponentTableBody,
       view: ComponentTableBodyView,
     },
     {
-      id: 'tfoot',
+      id: "tfoot",
       model: ComponentTableFoot,
       view: ComponentTableFootView,
     },
     {
-      id: 'map',
+      id: "map",
       model: ComponentMap,
       view: ComponentMapView,
     },
     {
-      id: 'link',
+      id: "link",
       model: ComponentLink,
       view: ComponentLinkView,
     },
     {
-      id: 'label',
+      id: "label",
       model: ComponentLabel,
       view: ComponentLabelView,
     },
     {
-      id: 'video',
+      id: "video",
       model: ComponentVideo,
       view: ComponentVideoView,
     },
     {
-      id: 'image',
+      id: "image",
       model: ComponentImage,
       view: ComponentImageView,
     },
     {
-      id: 'script',
+      id: "script",
       model: ComponentScript,
       view: ComponentScriptView,
     },
     {
-      id: 'svg-in',
+      id: "svg-in",
       model: ComponentSvgIn,
       view: ComponentSvgView,
     },
     {
-      id: 'svg',
+      id: "svg",
       model: ComponentSvg,
       view: ComponentSvgView,
     },
     {
-      id: 'iframe',
+      id: "iframe",
       model: ComponentFrame,
       view: ComponentFrameView,
     },
     {
-      id: 'comment',
+      id: "comment",
       model: ComponentComment,
       view: ComponentCommentView,
     },
     {
-      id: 'textnode',
+      id: "textnode",
       model: ComponentTextNode,
       view: ComponentTextNodeView,
     },
     {
-      id: 'text',
+      id: "text",
       model: ComponentText,
       view: ComponentTextView,
     },
     {
-      id: 'wrapper',
+      id: "wrapper",
       model: ComponentWrapper,
       view: ComponentWrapperView,
     },
     {
-      id: 'default',
+      id: "default",
       model: Component,
       view: ComponentView,
     },
   ];
 
-  componentsById = {};
+  componentsById: { [id: string]: Component } = {};
+  componentView?: ComponentWrapperView;
 
   Component = Component;
 
@@ -215,18 +226,11 @@ export default class ComponentManager extends Module {
    * @type {String}
    * @private
    */
-  name = 'DomComponents';
+  //name = "DomComponents";
 
-  storageKey = 'components';
+  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
@@ -234,44 +238,47 @@ 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') || '';
-      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));
+      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)
+      );
     }
 
     return this;
   }
 
-  load(data) {
+  load(data: any) {
     return this.loadProjectData(data, {
-      onResult: result => {
+      onResult: (result: Component) => {
         let wrapper = this.getWrapper();
 
         if (!wrapper) {
-          this.em.get('PageManager').add({}, { select: true });
+          this.em.get("PageManager").add({}, { select: true });
           wrapper = this.getWrapper();
         }
 
@@ -280,6 +287,7 @@ export default class ComponentManager extends Module {
         } else {
           const { components = [], ...rest } = result;
           wrapper.set(rest);
+          //@ts-ignore
           wrapper.components(components);
         }
       },
@@ -295,8 +303,8 @@ export default class ComponentManager extends Module {
    * @return {Object}
    * @private
    */
-  getComponent() {
-    const sel = this.em.get('PageManager').getSelected();
+  getComponent(): Component {
+    const sel = this.em.get("PageManager").getSelected();
     const frame = sel && sel.getMainFrame();
     return frame && frame.getComponent();
   }
@@ -342,9 +350,9 @@ export default class ComponentManager extends Module {
    * // Remove comp2
    * wrapperChildren.remove(comp2);
    */
-  getComponents() {
+  getComponents(): Components {
     const wrp = this.getWrapper();
-    return wrp && wrp.get('components');
+    return wrp && wrp.get("components");
   }
 
   /**
@@ -376,7 +384,7 @@ export default class ComponentManager extends Module {
    *   attributes: { title: 'here' }
    * });
    */
-  addComponent(component, opt = {}) {
+  addComponent(component: Component, opt = {}) {
     return this.getComponents().add(component, opt);
   }
 
@@ -388,7 +396,7 @@ export default class ComponentManager extends Module {
    * @return {HTMLElement}
    */
   render() {
-    return this.componentView.render().el;
+    return this.componentView?.render().el;
   }
 
   /**
@@ -397,7 +405,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;
   }
 
@@ -408,7 +417,7 @@ export default class ComponentManager extends Module {
    * @return {this}
    * @private
    */
-  setComponents(components, opt = {}) {
+  setComponents(components: Component, opt = {}) {
     this.clear(opt).addComponent(components, opt);
   }
 
@@ -419,23 +428,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);
           };
@@ -444,23 +465,26 @@ export default class ComponentManager extends Module {
       }, {});
 
     // If the model/view is a simple object I need to extend it
-    if (typeof model === 'object') {
+    if (typeof model === "object") {
       methods.model = modelToExt.extend(
         {
           ...model,
           ...getExtendedObj(extendFn, model, modelToExt),
           defaults: {
-            ...(result(modelToExt.prototype, 'defaults') || {}),
-            ...(result(model, 'defaults') || {}),
+            ...(result(modelToExt.prototype, "defaults") || {}),
+            ...(result(model, "defaults") || {}),
           },
         },
         {
-          isComponent: compType && !extendType && !isComponent ? modelToExt.isComponent : isComponent || (() => 0),
+          isComponent:
+            compType && !extendType && !isComponent
+              ? modelToExt.isComponent
+              : isComponent || (() => 0),
         }
       );
     }
 
-    if (typeof view === 'object') {
+    if (typeof view === "object") {
       methods.view = viewToExt.extend({
         ...view,
         ...getExtendedObj(extendFnView, view, viewToExt),
@@ -475,7 +499,7 @@ export default class ComponentManager extends Module {
       this.componentTypes.unshift(methods);
     }
 
-    const event = `component:type:${compType ? 'update' : 'add'}`;
+    const event = `component:type:${compType ? "update" : "add"}`;
     em?.trigger(event, compType || methods);
 
     return this;
@@ -487,7 +511,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++) {
@@ -504,7 +530,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;
@@ -521,23 +547,27 @@ export default class ComponentManager extends Module {
     return this.componentTypes;
   }
 
-  selectAdd(component, opts = {}) {
+  selectAdd(component: Component, opts = {}) {
     if (component) {
       component.set({
-        status: 'selected',
+        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: '',
+        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)
+      );
     }
   }
 
@@ -547,35 +577,35 @@ export default class ComponentManager extends Module {
    */
   componentHovered() {
     const { em } = this;
-    const model = em.get('componentHovered');
-    const previous = em.previous('componentHovered');
-    const state = 'hovered';
+    const model = em.get("componentHovered");
+    const previous = em.previous("componentHovered");
+    const state = "hovered";
 
     // Deselect the previous component
     previous &&
-      previous.get('status') == state &&
+      previous.get("status") == state &&
       previous.set({
-        status: '',
-        state: '',
+        status: "",
+        state: "",
       });
 
-    model && isEmpty(model.get('status')) && model.set('status', state);
+    model && isEmpty(model.get("status")) && model.set("status", state);
   }
 
   getShallowWrapper() {
     let { shallow, em } = this;
 
     if (!shallow && em) {
-      const shallowEm = em.get('shallow');
+      const shallowEm = em.shallow;
       if (!shallowEm) return;
-      const domc = shallowEm.get('DomComponents');
+      const domc = shallowEm.get("DomComponents");
       domc.componentTypes = this.componentTypes;
       shallow = domc.getWrapper();
       if (shallow) {
-        const events = [keyUpdate, keyUpdateInside].join(' ');
+        const events = [keyUpdate, keyUpdateInside].join(" ");
         shallow.on(
           events,
-          debounce(() => shallow.components(''), 100)
+          debounce(() => shallow?.components(""), 100)
         );
       }
       this.shallow = shallow;
@@ -595,7 +625,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,
@@ -606,41 +636,47 @@ 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;
 
     // Check if the source is draggable in the target
-    let draggable = srcModel.get('draggable');
+    let draggable = srcModel.get("draggable");
 
     if (isFunction(draggable)) {
       draggable = !!draggable(srcModel, target, at);
     } else {
       const el = target.getEl();
-      draggable = isArray(draggable) ? draggable.join(',') : draggable;
+      draggable = isArray(draggable) ? draggable.join(",") : draggable;
       draggable = isString(draggable) ? el?.matches(draggable) : draggable;
     }
 
     if (!draggable) return { ...result, reason: 1 };
 
     // Check if the target accepts the source
-    let droppable = target.get('droppable');
+    let droppable = target.get("droppable");
 
     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();
-        droppable = isArray(droppable) ? droppable.join(',') : droppable;
+        droppable = isArray(droppable) ? droppable.join(",") : droppable;
         droppable = isString(droppable) ? el?.matches(droppable) : droppable;
       }
     }
@@ -654,14 +690,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 = {}));
   }
 }
diff --git a/src/dom_components/model/Component.js b/src/dom_components/model/Component.js
index 1c6feac5f..0206049f4 100644
--- a/src/dom_components/model/Component.js
+++ b/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;
   }
diff --git a/src/dom_components/model/Components.js b/src/dom_components/model/Components.js
index bbf039546..0ccb91565 100644
--- a/src/dom_components/model/Components.js
+++ b/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);
-  }),
-});
+  });
+}
diff --git a/src/editor/model/Editor.ts b/src/editor/model/Editor.ts
index ed12e06d5..a1dc3dd06 100644
--- a/src/editor/model/Editor.ts
+++ b/src/editor/model/Editor.ts
@@ -5,44 +5,44 @@ import {
   toArray,
   keys,
   bindAll,
-} from 'underscore';
-import Backbone from 'backbone';
-import $ from '../../utils/cash-dom';
-import Extender from '../../utils/extender';
-import { getModel, hasWin, isEmptyObj } from '../../utils/mixins';
-import { Model } from '../../common';
-import Selected from './Selected';
-import FrameView from '../../canvas/view/FrameView';
-import EditorModule from '..';
-import EditorView from '../view/EditorView';
-import { IModule } from '../../abstract/Module';
+} from "underscore";
+import Backbone from "backbone";
+import $ from "../../utils/cash-dom";
+import Extender from "../../utils/extender";
+import { getModel, hasWin, isEmptyObj } from "../../utils/mixins";
+import { Model } from "../../common";
+import Selected from "./Selected";
+import FrameView from "../../canvas/view/FrameView";
+import EditorModule from "..";
+import EditorView from "../view/EditorView";
+import { IModule } from "../../abstract/Module";
 
 //@ts-ignore
 Backbone.$ = $;
 
 const deps = [
-  require('utils'),
-  require('i18n'),
-  require('keymaps'),
-  require('undo_manager'),
-  require('storage_manager'),
-  require('device_manager'),
-  require('parser'),
-  require('style_manager'),
-  require('selector_manager'),
-  require('modal_dialog'),
-  require('code_manager'),
-  require('panels'),
-  require('rich_text_editor'),
-  require('asset_manager'),
-  require('css_composer'),
-  require('pages'),
-  require('trait_manager'),
-  require('dom_components'),
-  require('navigator'),
-  require('canvas'),
-  require('commands'),
-  require('block_manager'),
+  require("utils"),
+  require("i18n"),
+  require("keymaps"),
+  require("undo_manager"),
+  require("storage_manager"),
+  require("device_manager"),
+  require("parser"),
+  require("style_manager"),
+  require("selector_manager"),
+  require("modal_dialog"),
+  require("code_manager"),
+  require("panels"),
+  require("rich_text_editor"),
+  require("asset_manager"),
+  require("css_composer"),
+  require("pages"),
+  require("trait_manager"),
+  require("dom_components"),
+  require("navigator"),
+  require("canvas"),
+  require("commands"),
+  require("block_manager"),
 ];
 
 const ts_deps: any[] = [];
@@ -74,7 +74,7 @@ export default class EditorModel extends Model {
       modules: [],
       toLoad: [],
       opened: {},
-      device: '',
+      device: "",
     };
   }
 
@@ -88,33 +88,38 @@ export default class EditorModel extends Model {
   view?: EditorView;
 
   get storables(): any[] {
-    return this.get('storables');
+    return this.get("storables");
   }
 
   get modules(): IModule[] {
-    return this.get('modules');
+    return this.get("modules");
   }
 
   get toLoad(): any[] {
-    return this.get('toLoad');
+    return this.get("toLoad");
   }
+
   get selected(): Selected {
-    return this.get('selected');
+    return this.get("selected");
+  }
+
+  get shallow(): EditorModel {
+    return this.get("shallow");
   }
 
   constructor(conf = {}) {
     super();
     this._config = conf;
     const { config } = this;
-    this.set('Config', conf);
-    this.set('modules', []);
-    this.set('toLoad', []);
-    this.set('storables', []);
-    this.set('selected', new Selected());
-    this.set('dmode', config.dragMode);
+    this.set("Config", conf);
+    this.set("modules", []);
+    this.set("toLoad", []);
+    this.set("storables", []);
+    this.set("selected", new Selected());
+    this.set("dmode", config.dragMode);
     const { el, log } = config;
     const toLog = log === true ? keys(logs) : isArray(log) ? log : [];
-    bindAll(this, 'initBaseColorPicker');
+    bindAll(this, "initBaseColorPicker");
 
     if (el && config.fromElement) {
       config.components = el.innerHTML;
@@ -125,7 +130,7 @@ export default class EditorModel extends Model {
           res[next.nodeName] = next.nodeValue;
           return res;
         }, {})
-      : '';
+      : "";
 
     // Move components to pages
     if (config.components && !config.pageManager) {
@@ -135,13 +140,13 @@ export default class EditorModel extends Model {
     // Load modules
     deps.forEach((name) => this.loadModule(name));
     ts_deps.forEach((name) => this.tsLoadModule(name));
-    this.on('change:componentHovered', this.componentHovered, this);
-    this.on('change:changesCount', this.updateChanges, this);
-    this.on('change:readyLoad change:readyCanvas', this._checkReady, this);
+    this.on("change:componentHovered", this.componentHovered, this);
+    this.on("change:changesCount", this.updateChanges, this);
+    this.on("change:readyLoad change:readyCanvas", this._checkReady, this);
     toLog.forEach((e) => this.listenLog(e));
 
     // Deprecations
-    [{ from: 'change:selectedComponent', to: 'component:toggled' }].forEach(
+    [{ from: "change:selectedComponent", to: "component:toggled" }].forEach(
       (event) => {
         const eventFrom = event.from;
         const eventTo = event.to;
@@ -157,11 +162,11 @@ export default class EditorModel extends Model {
 
   _checkReady() {
     if (
-      this.get('readyLoad') &&
-      this.get('readyCanvas') &&
-      !this.get('ready')
+      this.get("readyLoad") &&
+      this.get("readyCanvas") &&
+      !this.get("ready")
     ) {
-      this.set('ready', true);
+      this.set("ready", true);
     }
   }
 
@@ -195,7 +200,7 @@ export default class EditorModel extends Model {
    */
   loadOnStart() {
     const { projectData, headless } = this.config;
-    const sm = this.get('StorageManager');
+    const sm = this.get("StorageManager");
 
     // In `onLoad`, the module will try to load the data from its configurations.
     this.toLoad.forEach((mdl) => mdl.onLoad());
@@ -203,7 +208,7 @@ export default class EditorModel extends Model {
     // Stuff to do post load
     const postLoad = () => {
       this.modules.forEach((mdl) => mdl.postLoad && mdl.postLoad(this));
-      this.set('readyLoad', 1);
+      this.set("readyLoad", 1);
     };
 
     if (headless) {
@@ -233,8 +238,8 @@ export default class EditorModel extends Model {
       undoManager: false,
     });
     // We only need to load a few modules
-    ['PageManager', 'Canvas'].forEach((key) => shallow.get(key).onLoad());
-    this.set('shallow', shallow);
+    ["PageManager", "Canvas"].forEach((key) => shallow.get(key).onLoad());
+    this.set("shallow", shallow);
   }
 
   /**
@@ -243,11 +248,11 @@ export default class EditorModel extends Model {
    * @private
    */
   updateChanges() {
-    const stm = this.get('StorageManager');
+    const stm = this.get("StorageManager");
     const changes = this.getDirtyCount();
     this.updateItr && clearTimeout(this.updateItr);
     //@ts-ignore
-    this.updateItr = setTimeout(() => this.trigger('update'));
+    this.updateItr = setTimeout(() => this.trigger("update"));
 
     if (this.config.noticeOnUnload) {
       window.onbeforeunload = changes ? () => true : null;
@@ -273,7 +278,7 @@ export default class EditorModel extends Model {
       ? config[name]
       : config[Mod.name];
     const cfg = cfgParent === true ? {} : cfgParent || {};
-    cfg.pStylePrefix = config.pStylePrefix || '';
+    cfg.pStylePrefix = config.pStylePrefix || "";
 
     if (!isUndefined(cfgParent) && !cfgParent) {
       cfg._disable = 1;
@@ -324,11 +329,11 @@ export default class EditorModel extends Model {
       this.initialize(opts);
       this.destroyed = false;
     }
-    this.set('Editor', editor);
+    this.set("Editor", editor);
   }
 
   getEditor() {
-    return this.get('Editor');
+    return this.get("Editor");
   }
 
   /**
@@ -346,7 +351,7 @@ export default class EditorModel extends Model {
       opt.temporary ||
       opt.noCount ||
       opt.avoidStore ||
-      !this.get('ready')
+      !this.get("ready")
     ) {
       return;
     }
@@ -356,7 +361,7 @@ export default class EditorModel extends Model {
     this.timedInterval = setTimeout(() => {
       const curr = this.getDirtyCount() || 0;
       const { unset, ...opts } = opt;
-      this.set('changesCount', curr + 1, opts);
+      this.set("changesCount", curr + 1, opts);
     }, 0);
   }
 
@@ -372,9 +377,9 @@ export default class EditorModel extends Model {
    * @private
    * */
   componentHovered(editor: any, component: any, options: any) {
-    const prev = this.previous('componentHovered');
-    prev && this.trigger('component:unhovered', prev, options);
-    component && this.trigger('component:hovered', component, options);
+    const prev = this.previous("componentHovered");
+    prev && this.trigger("component:unhovered", prev, options);
+    component && this.trigger("component:hovered", component, options);
   }
 
   /**
@@ -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,19 +418,19 @@ 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);
 
       if (model) {
-        this.trigger('component:select:before', model, opts);
+        this.trigger("component:select:before", model, opts);
 
         // Check for valid selectable
-        if (!model.get('selectable') || opts.abort) {
+        if (!model.get("selectable") || opts.abort) {
           if (opts.useValid) {
             let parent = model.parent();
-            while (parent && !parent.get('selectable'))
+            while (parent && !parent.get("selectable"))
               parent = parent.parent();
             model = parent;
           } else {
@@ -438,7 +443,7 @@ export default class EditorModel extends Model {
       if (ctrlKey && mltSel) {
         return this.toggleSelected(model);
       } else if (shiftKey && mltSel) {
-        this.clearSelection(this.get('Canvas').getWindow());
+        this.clearSelection(this.get("Canvas").getWindow());
         const coll = model.collection;
         const index = model.index();
         let min: number | undefined, max: number | undefined;
@@ -491,12 +496,12 @@ export default class EditorModel extends Model {
     const model = getModel(el, $);
     const models = isArray(model) ? model : [model];
 
-    models.forEach(model => {
-      if (model && !model.get('selectable')) return;
+    models.forEach((model) => {
+      if (model && !model.get("selectable")) return;
       const { selected } = this;
       opts.forceChange && this.removeSelected(model, opts);
       selected.addComponent(model, opts);
-      model && this.trigger('component:select', model, opts);
+      model && this.trigger("component:select", 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 {
@@ -536,21 +541,21 @@ export default class EditorModel extends Model {
    * @private
    */
   setHovered(el: any, opts: any = {}) {
-    if (!el) return this.set('componentHovered', '');
+    if (!el) return this.set("componentHovered", "");
 
-    const ev = 'component:hover';
+    const ev = "component:hover";
     let model = getModel(el, undefined);
 
     if (!model) return;
 
-    opts.forceChange && this.set('componentHovered', '');
+    opts.forceChange && this.set("componentHovered", "");
     this.trigger(`${ev}:before`, model, opts);
 
     // Check for valid hoverable
-    if (!model.get('hoverable')) {
+    if (!model.get("hoverable")) {
       if (opts.useValid && !opts.abort) {
         let parent = model && model.parent();
-        while (parent && !parent.get('hoverable')) parent = parent.parent();
+        while (parent && !parent.get("hoverable")) parent = parent.parent();
         model = parent;
       } else {
         return;
@@ -558,13 +563,13 @@ export default class EditorModel extends Model {
     }
 
     if (!opts.abort) {
-      this.set('componentHovered', model, opts);
+      this.set("componentHovered", model, opts);
       this.trigger(ev, model, opts);
     }
   }
 
   getHovered() {
-    return this.get('componentHovered');
+    return this.get("componentHovered");
   }
 
   /**
@@ -575,7 +580,7 @@ export default class EditorModel extends Model {
    * @public
    */
   setComponents(components: any, opt = {}) {
-    return this.get('DomComponents').setComponents(components, opt);
+    return this.get("DomComponents").setComponents(components, opt);
   }
 
   /**
@@ -584,13 +589,13 @@ export default class EditorModel extends Model {
    * @private
    */
   getComponents() {
-    var cmp = this.get('DomComponents');
-    var cm = this.get('CodeManager');
+    var cmp = this.get("DomComponents");
+    var cm = this.get("CodeManager");
 
     if (!cmp || !cm) return;
 
     var wrp = cmp.getComponents();
-    return cm.getCode(wrp, 'json');
+    return cm.getCode(wrp, "json");
   }
 
   /**
@@ -601,7 +606,7 @@ export default class EditorModel extends Model {
    * @public
    */
   setStyle(style: any, opt = {}) {
-    const cssc = this.get('CssComposer');
+    const cssc = this.get("CssComposer");
     cssc.clear(opt);
     cssc.getAll().add(style, opt);
     return this;
@@ -624,7 +629,7 @@ export default class EditorModel extends Model {
    * @private
    */
   getStyle() {
-    return this.get('CssComposer').getAll();
+    return this.get("CssComposer").getAll();
   }
 
   /**
@@ -633,7 +638,7 @@ export default class EditorModel extends Model {
    * @returns {this}
    */
   setState(value: string) {
-    this.set('state', value);
+    this.set("state", value);
     return this;
   }
 
@@ -642,7 +647,7 @@ export default class EditorModel extends Model {
    * @returns {String}
    */
   getState() {
-    return this.get('state') || '';
+    return this.get("state") || "";
   }
 
   /**
@@ -654,15 +659,15 @@ export default class EditorModel extends Model {
   getHtml(opts: any = {}) {
     const { config } = this;
     const { optsHtml } = config;
-    const js = config.jsInHtml ? this.getJs(opts) : '';
-    const cmp = opts.component || this.get('DomComponents').getComponent();
+    const js = config.jsInHtml ? this.getJs(opts) : "";
+    const cmp = opts.component || this.get("DomComponents").getComponent();
     let html = cmp
-      ? this.get('CodeManager').getCode(cmp, 'html', {
+      ? this.get("CodeManager").getCode(cmp, "html", {
           ...optsHtml,
           ...opts,
         })
-      : '';
-    html += js ? `<script>${js}</script>` : '';
+      : "";
+    html += js ? `<script>${js}</script>` : "";
     return html;
   }
 
@@ -679,18 +684,18 @@ export default class EditorModel extends Model {
     const keepUnusedStyles = !isUndefined(opts.keepUnusedStyles)
       ? opts.keepUnusedStyles
       : config.keepUnusedStyles;
-    const cssc = this.get('CssComposer');
-    const wrp = opts.component || this.get('DomComponents').getComponent();
-    const protCss = !avoidProt ? config.protectedCss : '';
+    const cssc = this.get("CssComposer");
+    const wrp = opts.component || this.get("DomComponents").getComponent();
+    const protCss = !avoidProt ? config.protectedCss : "";
     const css =
       wrp &&
-      this.get('CodeManager').getCode(wrp, 'css', {
+      this.get("CodeManager").getCode(wrp, "css", {
         cssc,
         keepUnusedStyles,
         ...optsCss,
         ...opts,
       });
-    return wrp ? (opts.json ? css : protCss + css) : '';
+    return wrp ? (opts.json ? css : protCss + css) : "";
   }
 
   /**
@@ -699,8 +704,8 @@ export default class EditorModel extends Model {
    * @public
    */
   getJs(opts: any = {}) {
-    var wrp = opts.component || this.get('DomComponents').getWrapper();
-    return wrp ? this.get('CodeManager').getCode(wrp, 'js').trim() : '';
+    var wrp = opts.component || this.get("DomComponents").getWrapper();
+    return wrp ? this.get("CodeManager").getCode(wrp, "js").trim() : "";
   }
 
   /**
@@ -709,7 +714,7 @@ export default class EditorModel extends Model {
    */
   async store(options?: any) {
     const data = this.storeData();
-    await this.get('StorageManager').store(data, options);
+    await this.get("StorageManager").store(data, options);
     this.clearDirtyCount();
     return data;
   }
@@ -719,7 +724,7 @@ export default class EditorModel extends Model {
    * @public
    */
   async load(options?: any) {
-    const result = await this.get('StorageManager').load(options);
+    const result = await this.get("StorageManager").load(options);
     this.loadData(result);
     return result;
   }
@@ -728,7 +733,7 @@ export default class EditorModel extends Model {
     let result = {};
     // Sync content if there is an active RTE
     const editingCmp = this.getEditing();
-    editingCmp && editingCmp.trigger('sync:content', { noCount: true });
+    editingCmp && editingCmp.trigger("sync:content", { noCount: true });
 
     this.storables.forEach((m) => {
       result = { ...result, ...m.store(1) };
@@ -750,8 +755,8 @@ export default class EditorModel extends Model {
    * @private
    */
   getDeviceModel() {
-    var name = this.get('device');
-    return this.get('DeviceManager').get(name);
+    var name = this.get("device");
+    return this.get("DeviceManager").get(name);
   }
 
   /**
@@ -760,7 +765,7 @@ export default class EditorModel extends Model {
    * @private
    */
   runDefault(opts = {}) {
-    var command = this.get('Commands').get(this.config.defaultCommand);
+    var command = this.get("Commands").get(this.config.defaultCommand);
     if (!command || this.defaultRunning) return;
     command.stop(this, this, opts);
     command.run(this, this, opts);
@@ -773,7 +778,7 @@ export default class EditorModel extends Model {
    * @private
    */
   stopDefault(opts = {}) {
-    const commands = this.get('Commands');
+    const commands = this.get("Commands");
     const command = commands.get(this.config.defaultCommand);
     if (!command || !this.defaultRunning) return;
     command.stop(this, this, opts);
@@ -785,9 +790,9 @@ export default class EditorModel extends Model {
    * @public
    */
   refreshCanvas(opts: any = {}) {
-    this.set('canvasOffset', null);
-    this.set('canvasOffset', this.get('Canvas').getOffset());
-    opts.tools && this.trigger('canvas:updateTools');
+    this.set("canvasOffset", null);
+    this.set("canvasOffset", this.get("Canvas").getOffset());
+    opts.tools && this.trigger("canvas:updateTools");
   }
 
   /**
@@ -810,8 +815,8 @@ export default class EditorModel extends Model {
     const device = this.getDeviceModel();
     const condition = config.mediaCondition;
     const preview = config.devicePreviewMode;
-    const width = device && device.get('widthMedia');
-    return device && width && !preview ? `(${condition}: ${width})` : '';
+    const width = device && device.get("widthMedia");
+    return device && width && !preview ? `(${condition}: ${width})` : "";
   }
 
   /**
@@ -819,15 +824,15 @@ export default class EditorModel extends Model {
    * @return {Component}
    */
   getWrapper() {
-    return this.get('DomComponents').getWrapper();
+    return this.get("DomComponents").getWrapper();
   }
 
   setCurrentFrame(frameView: FrameView) {
-    return this.set('currentFrame', frameView);
+    return this.set("currentFrame", frameView);
   }
 
   getCurrentFrame(): FrameView {
-    return this.get('currentFrame');
+    return this.get("currentFrame");
   }
 
   getCurrentFrameModel() {
@@ -836,7 +841,7 @@ export default class EditorModel extends Model {
 
   getIcon(icon: string) {
     const icons = this.config.icons || {};
-    return icons[icon] || '';
+    return icons[icon] || "";
   }
 
   /**
@@ -845,27 +850,27 @@ export default class EditorModel extends Model {
    * @return {number}
    */
   getDirtyCount(): number {
-    return this.get('changesCount');
+    return this.get("changesCount");
   }
 
   clearDirtyCount() {
-    return this.set('changesCount', 0);
+    return this.set("changesCount", 0);
   }
 
   getZoomDecimal() {
-    return this.get('Canvas').getZoomDecimal();
+    return this.get("Canvas").getZoomDecimal();
   }
 
   getZoomMultiplier() {
-    return this.get('Canvas').getZoomMultiplier();
+    return this.get("Canvas").getZoomMultiplier();
   }
 
   setDragMode(value: string) {
-    return this.set('dmode', value);
+    return this.set("dmode", value);
   }
 
   t(...args: any[]) {
-    const i18n = this.get('I18n');
+    const i18n = this.get("I18n");
     return i18n?.t(...args);
   }
 
@@ -874,7 +879,7 @@ export default class EditorModel extends Model {
    * @returns {Boolean}
    */
   inAbsoluteMode() {
-    return this.get('dmode') === 'absolute';
+    return this.get("dmode") === "absolute";
   }
 
   /**
@@ -884,7 +889,7 @@ export default class EditorModel extends Model {
     const { config, view } = this;
     const editor = this.getEditor();
     const { editors = [] } = config.grapesjs || {};
-    const shallow = this.get('shallow');
+    const shallow = this.get("shallow");
     shallow?.destroyAll();
     this.stopListening();
     this.stopDefault();
@@ -895,9 +900,9 @@ export default class EditorModel extends Model {
     view && view.remove();
     this.clear({ silent: true });
     this.destroyed = true;
-    ['_config', 'view', '_previousAttributes', '_events', '_listeners'].forEach(
+    ["_config", "view", "_previousAttributes", "_events", "_listeners"].forEach(
       //@ts-ignore
-      i => (this[i] = {})
+      (i) => (this[i] = {})
     );
     editors.splice(editors.indexOf(editor), 1);
     //@ts-ignore
@@ -905,22 +910,22 @@ export default class EditorModel extends Model {
   }
 
   getEditing() {
-    const res = this.get('editing');
+    const res = this.get("editing");
     return (res && res.model) || null;
   }
 
   setEditing(value: boolean) {
-    this.set('editing', value);
+    this.set("editing", value);
     return this;
   }
 
   isEditing() {
-    return !!this.get('editing');
+    return !!this.get("editing");
   }
 
   log(msg: string, opts: any = {}) {
-    const { ns, level = 'debug' } = opts;
-    this.trigger('log', msg, opts);
+    const { ns, level = "debug" } = opts;
+    this.trigger("log", msg, opts);
     level && this.trigger(`log:${level}`, msg, opts);
 
     if (ns) {
@@ -931,15 +936,15 @@ export default class EditorModel extends Model {
   }
 
   logInfo(msg: string, opts?: any) {
-    this.log(msg, { ...opts, level: 'info' });
+    this.log(msg, { ...opts, level: "info" });
   }
 
   logWarning(msg: string, opts?: any) {
-    this.log(msg, { ...opts, level: 'warning' });
+    this.log(msg, { ...opts, level: "warning" });
   }
 
   logError(msg: string, opts?: any) {
-    this.log(msg, { ...opts, level: 'error' });
+    this.log(msg, { ...opts, level: "error" });
   }
 
   initBaseColorPicker(el: any, opts = {}) {
@@ -951,13 +956,13 @@ export default class EditorModel extends Model {
     //@ts-ignore
     return $(el).spectrum({
       containerClassName: `${ppfx}one-bg ${ppfx}two-color`,
-      appendTo: elToAppend || 'body',
+      appendTo: elToAppend || "body",
       maxSelectionSize: 8,
       showPalette: true,
       palette: [],
       showAlpha: true,
-      chooseText: 'Ok',
-      cancelText: '⨯',
+      chooseText: "Ok",
+      cancelText: "⨯",
       ...opts,
       ...colorPicker,
     });
@@ -970,7 +975,7 @@ export default class EditorModel extends Model {
    */
   skip(clb: Function) {
     this.__skip = true;
-    const um = this.get('UndoManager');
+    const um = this.get("UndoManager");
     um ? um.skip(clb) : clb();
     this.__skip = false;
   }
@@ -984,7 +989,7 @@ export default class EditorModel extends Model {
    * @private
    */
   data(el: any, name: string, value: any) {
-    const varName = '_gjs-data';
+    const varName = "_gjs-data";
 
     if (!el[varName]) {
       el[varName] = {};
diff --git a/test/specs/code_manager/model/CodeModels.js b/test/specs/code_manager/model/CodeModels.js
index 09d8387f4..b0fe419b1 100644
--- a/test/specs/code_manager/model/CodeModels.js
+++ b/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(
       {},
       {
diff --git a/test/specs/dom_components/index.js b/test/specs/dom_components/index.js
index d77d0fe36..eacc81924 100644
--- a/test/specs/dom_components/index.js
+++ b/test/specs/dom_components/index.js
@@ -54,7 +54,7 @@ describe('DOM Components', () => {
         storeWrapper: 1,
       };
       obj = em.get('DomComponents');
-      // obj = new DomComponents().init(config);
+      // obj = new DomComponents(em).init(config);
     });
 
     afterEach(() => {
diff --git a/test/specs/dom_components/model/Component.js b/test/specs/dom_components/model/Component.js
index e67ec2a01..46bcbe922 100644
--- a/test/specs/dom_components/model/Component.js
+++ b/test/specs/dom_components/model/Component.js
@@ -21,7 +21,7 @@ describe('Component', () => {
     em = new Editor({ avoidDefaults: true });
     dcomp = em.get('DomComponents');
     em.get('PageManager').onLoad();
-    // dcomp = new DomComponents();
+    // dcomp = new DomComponents(em);
     compOpts = {
       em,
       componentTypes: dcomp.componentTypes,
diff --git a/test/specs/dom_components/view/ComponentV.js b/test/specs/dom_components/view/ComponentV.js
index ef066bdb8..a2690273d 100644
--- a/test/specs/dom_components/view/ComponentV.js
+++ b/test/specs/dom_components/view/ComponentV.js
@@ -14,7 +14,7 @@ describe('ComponentView', () => {
 
   beforeEach(() => {
     em = new Editor({});
-    dcomp = new DomComponents();
+    dcomp = new DomComponents(em);
     compOpts = {
       em,
       componentTypes: dcomp.componentTypes,
diff --git a/test/specs/dom_components/view/ComponentsView.js b/test/specs/dom_components/view/ComponentsView.js
index e9525d9e2..27a19afbb 100644
--- a/test/specs/dom_components/view/ComponentsView.js
+++ b/test/specs/dom_components/view/ComponentsView.js
@@ -11,16 +11,16 @@ describe('ComponentsView', () => {
   const em = new Editor();
 
   beforeEach(() => {
-    dcomp = new DomComponents();
+    dcomp = new DomComponents(em);
     compOpts = {
       em,
-      componentTypes: dcomp.componentTypes
+      componentTypes: dcomp.componentTypes,
     };
     model = new Components([], compOpts);
     view = new ComponentsView({
       collection: model,
       componentTypes: dcomp.componentTypes,
-      config: { em }
+      config: { em },
     });
     document.body.innerHTML = '<div id="fixtures"></div>';
     document.body.querySelector('#fixtures').appendChild(view.render().el);
diff --git a/test/specs/parser/model/ParserHtml.js b/test/specs/parser/model/ParserHtml.js
index 6e5e6a3d3..9fbc04407 100644
--- a/test/specs/parser/model/ParserHtml.js
+++ b/test/specs/parser/model/ParserHtml.js
@@ -1,12 +1,14 @@
 import ParserHtml from 'parser/model/ParserHtml';
 import ParserCss from 'parser/model/ParserCss';
 import DomComponents from 'dom_components';
+import Editor from 'editor/model/Editor';
 
 describe('ParserHtml', () => {
   var obj;
 
   beforeEach(() => {
-    var dom = new DomComponents();
+    const em = new Editor({});
+    var dom = new DomComponents(em);
     obj = new ParserHtml({
       textTags: ['br', 'b', 'i', 'u'],
       pStylePrefix: 'gjs-',
diff --git a/test/specs/style_manager/view/PropertyColorView.js b/test/specs/style_manager/view/PropertyColorView.js
index 7531eccaf..65ca0493c 100644
--- a/test/specs/style_manager/view/PropertyColorView.js
+++ b/test/specs/style_manager/view/PropertyColorView.js
@@ -24,7 +24,7 @@ describe('PropertyColorView', () => {
 
   beforeEach(() => {
     em = new Editor({});
-    dcomp = new DomComponents();
+    dcomp = new DomComponents(em);
     compOpts = { em, componentTypes: dcomp.componentTypes };
     target = new Component({}, compOpts);
     component = new Component({}, compOpts);
diff --git a/test/specs/style_manager/view/PropertyCompositeView.js b/test/specs/style_manager/view/PropertyCompositeView.js
index fceaaa41e..17bf0056e 100644
--- a/test/specs/style_manager/view/PropertyCompositeView.js
+++ b/test/specs/style_manager/view/PropertyCompositeView.js
@@ -34,7 +34,7 @@ describe('PropertyCompositeView', () => {
 
   beforeEach(() => {
     em = new Editor({});
-    dcomp = new DomComponents();
+    dcomp = new DomComponents(em);
     compOpts = { em, componentTypes: dcomp.componentTypes };
     target = new Component({}, compOpts);
     component = new Component({}, compOpts);
diff --git a/test/specs/style_manager/view/PropertyIntegerView.js b/test/specs/style_manager/view/PropertyIntegerView.js
index 1c285fa3b..581b0ac36 100644
--- a/test/specs/style_manager/view/PropertyIntegerView.js
+++ b/test/specs/style_manager/view/PropertyIntegerView.js
@@ -24,7 +24,7 @@ describe('PropertyNumberView', () => {
 
   beforeEach(() => {
     em = new Editor({});
-    dcomp = new DomComponents();
+    dcomp = new DomComponents(em);
     compOpts = { em, componentTypes: dcomp.componentTypes };
     target = new Component({}, compOpts);
     component = new Component({}, compOpts);
diff --git a/test/specs/style_manager/view/PropertyRadioView.js b/test/specs/style_manager/view/PropertyRadioView.js
index 95d67c80d..40009fd2e 100644
--- a/test/specs/style_manager/view/PropertyRadioView.js
+++ b/test/specs/style_manager/view/PropertyRadioView.js
@@ -28,7 +28,7 @@ describe('PropertyRadioView', () => {
 
   beforeEach(() => {
     em = new Editor({});
-    dcomp = new DomComponents();
+    dcomp = new DomComponents(em);
     compOpts = { em, componentTypes: dcomp.componentTypes };
     target = new Component({}, compOpts);
     component = new Component({}, compOpts);
diff --git a/test/specs/style_manager/view/PropertySelectView.js b/test/specs/style_manager/view/PropertySelectView.js
index 26090681b..ae239a656 100644
--- a/test/specs/style_manager/view/PropertySelectView.js
+++ b/test/specs/style_manager/view/PropertySelectView.js
@@ -24,7 +24,7 @@ describe('PropertySelectView', () => {
 
   beforeEach(() => {
     em = new Editor({});
-    dcomp = new DomComponents();
+    dcomp = new DomComponents(em);
     compOpts = { em, componentTypes: dcomp.componentTypes };
     target = new Component({}, compOpts);
     component = new Component({}, compOpts);
diff --git a/test/specs/style_manager/view/PropertyStackView.js b/test/specs/style_manager/view/PropertyStackView.js
index 1943f44e5..a92fcc742 100644
--- a/test/specs/style_manager/view/PropertyStackView.js
+++ b/test/specs/style_manager/view/PropertyStackView.js
@@ -32,7 +32,7 @@ describe('PropertyStackView', () => {
 
   beforeEach(() => {
     em = new Editor({});
-    dcomp = new DomComponents();
+    dcomp = new DomComponents(em);
     compOpts = { em, componentTypes: dcomp.componentTypes };
     target = new Component({}, compOpts);
     component = new Component({}, compOpts);
diff --git a/test/specs/style_manager/view/PropertyView.js b/test/specs/style_manager/view/PropertyView.js
index 68043fe44..72aba93ec 100644
--- a/test/specs/style_manager/view/PropertyView.js
+++ b/test/specs/style_manager/view/PropertyView.js
@@ -19,7 +19,7 @@ describe('PropertyView', () => {
 
   beforeEach(() => {
     em = new Editor({});
-    dcomp = new DomComponents();
+    dcomp = new DomComponents(em);
     compOpts = { em, componentTypes: dcomp.componentTypes };
     target = new Component({}, compOpts);
     component = new Component({}, compOpts);

From c21b3a568e27cb2819769c80ce3ab4d548ad2065 Mon Sep 17 00:00:00 2001
From: Alex <ritt.alex@gmail.com>
Date: Sat, 7 May 2022 23:51:25 +0200
Subject: [PATCH 2/5] Convert ComponentViews to classes

---
 src/dom_components/model/ToolbarButton.js     | 10 +--
 .../view/ComponentCommentView.js              |  4 +-
 src/dom_components/view/ComponentFrameView.js | 14 ++--
 src/dom_components/view/ComponentImageView.js | 26 +++---
 src/dom_components/view/ComponentLabelView.js |  6 +-
 src/dom_components/view/ComponentLinkView.js  |  4 +-
 src/dom_components/view/ComponentMapView.js   | 15 ++--
 .../view/ComponentScriptView.js               |  8 +-
 src/dom_components/view/ComponentSvgView.js   |  6 +-
 .../view/ComponentTableBodyView.js            |  2 +-
 .../view/ComponentTextNodeView.js             | 26 +++---
 src/dom_components/view/ComponentTextView.js  | 32 ++++----
 src/dom_components/view/ComponentVideoView.js | 38 ++++-----
 src/dom_components/view/ComponentView.js      | 80 +++++++++----------
 src/dom_components/view/ComponentsView.js     | 16 ++--
 src/dom_components/view/ToolbarButtonView.js  | 16 ++--
 16 files changed, 147 insertions(+), 156 deletions(-)

diff --git a/src/dom_components/model/ToolbarButton.js b/src/dom_components/model/ToolbarButton.js
index bed924070..74eaf7da1 100644
--- a/src/dom_components/model/ToolbarButton.js
+++ b/src/dom_components/model/ToolbarButton.js
@@ -1,8 +1,8 @@
 import Backbone from 'backbone';
 
-export default Backbone.Model.extend({
-  defaults: {
+export default class ToolbarButton extends Backbone.Model {
+  defaults = {
     command: '',
-    attributes: {}
-  }
-});
+    attributes: {},
+  };
+}
diff --git a/src/dom_components/view/ComponentCommentView.js b/src/dom_components/view/ComponentCommentView.js
index 9677fb171..74b4323ba 100644
--- a/src/dom_components/view/ComponentCommentView.js
+++ b/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'));
   }
-});
+}
diff --git a/src/dom_components/view/ComponentFrameView.js b/src/dom_components/view/ComponentFrameView.js
index 27b1d028e..437b6949c 100644
--- a/src/dom_components/view/ComponentFrameView.js
+++ b/src/dom_components/view/ComponentFrameView.js
@@ -1,31 +1,31 @@
 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 = '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 || '';
   }
-});
+}
diff --git a/src/dom_components/view/ComponentImageView.js b/src/dom_components/view/ComponentImageView.js
index 570ba6243..e80c0b79f 100644
--- a/src/dom_components/view/ComponentImageView.js
+++ b/src/dom_components/view/ComponentImageView.js
@@ -1,23 +1,23 @@
 import { isString } from 'underscore';
 import ComponentView from './ComponentView';
 
-export default ComponentView.extend({
-  tagName: 'img',
+export default class ComponentImageView extends ComponentView {
+  tagName = 'img';
 
-  events: {
+  events = {
     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 +36,7 @@ export default ComponentView.extend({
       });
       model.set('file', '');
     }
-  },
+  }
 
   /**
    * Update src attribute
@@ -48,7 +48,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 +71,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 +98,5 @@ export default ComponentView.extend({
     this.postRender();
 
     return this;
-  },
-});
+  }
+}
diff --git a/src/dom_components/view/ComponentLabelView.js b/src/dom_components/view/ComponentLabelView.js
index ead6161ad..5593309b7 100644
--- a/src/dom_components/view/ComponentLabelView.js
+++ b/src/dom_components/view/ComponentLabelView.js
@@ -1,5 +1,5 @@
 import ComponentLinkView from './ComponentLinkView';
 
-export default ComponentLinkView.extend({
-  tagName: 'span' // Avoid Firefox bug with label editing #2332
-});
+export default class ComponentLabelView extends ComponentLinkView {
+  tagName = 'span'; // Avoid Firefox bug with label editing #2332
+}
diff --git a/src/dom_components/view/ComponentLinkView.js b/src/dom_components/view/ComponentLinkView.js
index d20222b82..ef552ae7f 100644
--- a/src/dom_components/view/ComponentLinkView.js
+++ b/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;
   }
-});
+}
diff --git a/src/dom_components/view/ComponentMapView.js b/src/dom_components/view/ComponentMapView.js
index eda50c23d..e5227b884 100644
--- a/src/dom_components/view/ComponentMapView.js
+++ b/src/dom_components/view/ComponentMapView.js
@@ -1,15 +1,14 @@
-import Backbone from 'backbone';
 import ComponentView from './ComponentImageView';
 
-export default ComponentView.extend({
-  tagName: 'div',
+export default class ComponentMapView extends ComponentView {
+  tagName = 'div';
 
-  events: {},
+  events = {};
 
   initialize(o) {
     ComponentView.prototype.initialize.apply(this, arguments);
     this.classEmpty = this.ppfx + 'plh-map';
-  },
+  }
 
   /**
    * Update the map on the canvas
@@ -17,7 +16,7 @@ export default ComponentView.extend({
    */
   updateSrc() {
     this.getIframe().src = this.model.get('src');
-  },
+  }
 
   getIframe() {
     if (!this.iframe) {
@@ -30,7 +29,7 @@ export default ComponentView.extend({
       this.iframe = ifrm;
     }
     return this.iframe;
-  },
+  }
 
   render(...args) {
     ComponentView.prototype.render.apply(this, args);
@@ -38,4 +37,4 @@ export default ComponentView.extend({
     this.el.appendChild(this.getIframe());
     return this;
   }
-});
+}
diff --git a/src/dom_components/view/ComponentScriptView.js b/src/dom_components/view/ComponentScriptView.js
index 5291f403c..99061285b 100644
--- a/src/dom_components/view/ComponentScriptView.js
+++ b/src/dom_components/view/ComponentScriptView.js
@@ -1,9 +1,9 @@
 import ComponentView from './ComponentImageView';
 
-export default ComponentView.extend({
-  tagName: 'script',
+export default class ComponentScriptView extends ComponentView {
+  tagName = 'script';
 
-  events: {},
+  events = {};
 
   render() {
     const { model, em } = this;
@@ -39,4 +39,4 @@ export default ComponentView.extend({
     this.postRender();
     return this;
   }
-});
+}
diff --git a/src/dom_components/view/ComponentSvgView.js b/src/dom_components/view/ComponentSvgView.js
index 2b9163d6a..befbc0597 100644
--- a/src/dom_components/view/ComponentSvgView.js
+++ b/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);
   }
-});
+}
diff --git a/src/dom_components/view/ComponentTableBodyView.js b/src/dom_components/view/ComponentTableBodyView.js
index 8791a8841..55f896cd3 100644
--- a/src/dom_components/view/ComponentTableBodyView.js
+++ b/src/dom_components/view/ComponentTableBodyView.js
@@ -1,3 +1,3 @@
 import ComponentView from './ComponentView';
 
-export default ComponentView.extend({});
+export default class ComponentTableBodyView extends ComponentView {}
diff --git a/src/dom_components/view/ComponentTextNodeView.js b/src/dom_components/view/ComponentTextNodeView.js
index 21bbbbdb2..7229a43ee 100644
--- a/src/dom_components/view/ComponentTextNodeView.js
+++ b/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;
   }
-});
+}
diff --git a/src/dom_components/view/ComponentTextView.js b/src/dom_components/view/ComponentTextView.js
index eb76bd390..5c5a97906 100644
--- a/src/dom_components/view/ComponentTextView.js
+++ b/src/dom_components/view/ComponentTextView.js
@@ -4,11 +4,11 @@ import { bindAll } from 'underscore';
 
 const compProt = ComponentView.prototype;
 
-export default ComponentView.extend({
-  events: {
+export default class ComponentTextView extends ComponentView {
+  events = {
     dblclick: 'onActive',
     input: 'onInput',
-  },
+  };
 
   initialize(o) {
     compProt.initialize.apply(this, arguments);
@@ -19,11 +19,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 +52,7 @@ export default ComponentView.extend({
     }
 
     return { result, delegate };
-  },
+  }
 
   /**
    * Enable element content editing
@@ -85,11 +85,11 @@ export default ComponentView.extend({
     }
 
     this.toggleEvents(1);
-  },
+  }
 
   onDisable() {
     this.disableEditing();
-  },
+  }
 
   /**
    * Disable element content editing
@@ -115,7 +115,7 @@ export default ComponentView.extend({
     }
 
     this.toggleEvents();
-  },
+  }
 
   /**
    * get content from RTE
@@ -126,7 +126,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 +147,7 @@ export default ComponentView.extend({
     } else {
       comps.resetFromString(content, opts);
     }
-  },
+  }
 
   insertComponent(content, opts = {}) {
     const { model, el } = this;
@@ -184,7 +184,7 @@ export default ComponentView.extend({
     }
 
     return model.append(content, opts);
-  },
+  }
 
   /**
    * Callback on input event
@@ -197,7 +197,7 @@ export default ComponentView.extend({
 
     // Update toolbars
     em && em.trigger(ev, this.model);
-  },
+  }
 
   /**
    * Isolate disable propagation method
@@ -206,7 +206,7 @@ export default ComponentView.extend({
    * */
   disablePropagation(e) {
     e.stopPropagation();
-  },
+  }
 
   /**
    * Enable/Disable events
@@ -245,5 +245,5 @@ export default ComponentView.extend({
         el && el.tagName == 'BODY' && (el = 0);
       }
     }
-  },
-});
+  }
+}
diff --git a/src/dom_components/view/ComponentVideoView.js b/src/dom_components/view/ComponentVideoView.js
index bee01e27b..e62d0b070 100644
--- a/src/dom_components/view/ComponentVideoView.js
+++ b/src/dom_components/view/ComponentVideoView.js
@@ -1,28 +1,20 @@
 import ComponentView from './ComponentImageView';
 import OComponentView from './ComponentView';
 
-export default ComponentView.extend({
-  tagName: 'div',
+export default class ComponentVideoView extends ComponentView {
+  tagName = 'div';
 
-  events: {},
+  events = {};
 
   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 +24,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 +49,7 @@ export default ComponentView.extend({
     }
 
     videoEl.src = src;
-  },
+  }
 
   /**
    * Update video parameters
@@ -79,7 +71,7 @@ export default ComponentView.extend({
         videoEl.controls = md.get('controls');
         videoEl.poster = md.get('poster');
     }
-  },
+  }
 
   renderByProvider(prov) {
     var videoEl;
@@ -98,14 +90,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 +106,7 @@ export default ComponentView.extend({
     el.setAttribute('allowfullscreen', true);
     this.initVideoEl(el);
     return el;
-  },
+  }
 
   renderYoutubeNoCookie() {
     var el = document.createElement('iframe');
@@ -123,7 +115,7 @@ export default ComponentView.extend({
     el.setAttribute('allowfullscreen', true);
     this.initVideoEl(el);
     return el;
-  },
+  }
 
   renderVimeo() {
     var el = document.createElement('iframe');
@@ -132,13 +124,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 +140,4 @@ export default ComponentView.extend({
     this.updateVideo();
     return this;
   }
-});
+}
diff --git a/src/dom_components/view/ComponentView.js b/src/dom_components/view/ComponentView.js
index 3c1e3d43e..db589d255 100644
--- a/src/dom_components/view/ComponentView.js
+++ b/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() {}
+}
diff --git a/src/dom_components/view/ComponentsView.js b/src/dom_components/view/ComponentsView.js
index 890bf212c..413ac4b21 100644
--- a/src/dom_components/view/ComponentsView.js
+++ b/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;
-  },
-});
+  }
+}
diff --git a/src/dom_components/view/ToolbarButtonView.js b/src/dom_components/view/ToolbarButtonView.js
index fa1c89d4e..78fad3064 100644
--- a/src/dom_components/view/ToolbarButtonView.js
+++ b/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;
-  },
-});
+  }
+}

From cf86ded06fbb18b55ac0460ff1984261c89aba8f Mon Sep 17 00:00:00 2001
From: Alex Ritter <alex@undo.app>
Date: Fri, 13 May 2022 11:13:51 +0200
Subject: [PATCH 3/5] Fix lint style

---
 src/abstract/Module.ts                        |  32 +-
 src/asset_manager/config/config.js            |   2 +-
 src/asset_manager/model/AssetImage.js         |   2 +-
 src/block_manager/config/config.js            |   2 +-
 src/code_manager/config/config.js             |   2 +-
 src/code_manager/index.js                     |   6 +-
 src/commands/config/config.js                 |   2 +-
 src/commands/view/CanvasClear.js              |   2 +-
 src/commands/view/ComponentEnter.js           |   2 +-
 src/commands/view/ComponentExit.js            |   2 +-
 src/commands/view/ComponentNext.js            |   2 +-
 src/commands/view/ComponentPrev.js            |   2 +-
 src/commands/view/CopyComponent.js            |   2 +-
 src/commands/view/DeleteComponent.js          |   8 +-
 src/commands/view/ExportTemplate.js           |   8 +-
 src/commands/view/Fullscreen.js               |  13 +-
 src/commands/view/OpenAssets.js               |   8 +-
 src/commands/view/OpenBlocks.js               |   4 +-
 src/commands/view/OpenLayers.js               |   2 +-
 src/commands/view/OpenTraitManager.js         |  19 +-
 src/commands/view/Preview.js                  |   2 +-
 src/commands/view/SelectPosition.js           |  21 +-
 src/commands/view/SwitchVisibility.js         |   2 +-
 src/css_composer/config/config.js             |   2 +-
 src/dom_components/index.ts                   | 212 +++++-----
 src/dom_components/model/ComponentComment.js  |   8 +-
 src/dom_components/model/ComponentFrame.js    |   6 +-
 src/dom_components/model/ComponentImage.js    |  10 +-
 src/dom_components/model/ComponentLabel.js    |   6 +-
 src/dom_components/model/ComponentMap.js      |  27 +-
 src/dom_components/model/ComponentScript.js   |   6 +-
 src/dom_components/model/ComponentSvg.js      |   6 +-
 src/dom_components/model/ComponentSvgIn.js    |   6 +-
 src/dom_components/model/ComponentTable.js    |   6 +-
 .../model/ComponentTableBody.js               |  10 +-
 .../model/ComponentTableCell.js               |   6 +-
 .../model/ComponentTableFoot.js               |   6 +-
 .../model/ComponentTableHead.js               |   6 +-
 src/dom_components/model/ComponentTableRow.js |   6 +-
 src/dom_components/model/ComponentTextNode.js |   8 +-
 src/dom_components/model/ComponentVideo.js    |  41 +-
 src/dom_components/view/ComponentTableView.js |   2 +-
 src/editor/model/Editor.ts                    | 280 ++++++-------
 src/i18n/locale/ca.js                         |  60 +--
 src/i18n/locale/el.js                         |  38 +-
 src/i18n/locale/es.js                         |  42 +-
 src/i18n/locale/fa.js                         |  38 +-
 src/i18n/locale/it.js                         |  38 +-
 src/i18n/locale/ko.js                         | 234 +++++------
 src/i18n/locale/nl.js                         |  42 +-
 src/i18n/locale/pl.js                         |  42 +-
 src/i18n/locale/pt.js                         | 392 +++++++++---------
 src/i18n/locale/tr.js                         |  26 +-
 src/i18n/locale/zh.js                         |  36 +-
 src/modal_dialog/config/config.js             |   2 +-
 src/modal_dialog/index.js                     |   8 +-
 src/navigator/config/config.js                |   2 +-
 src/panels/config/config.js                   |  30 +-
 src/panels/index.js                           |   4 +-
 src/parser/model/BrowserParserCss.js          |  20 +-
 src/parser/model/ParserCss.js                 |   9 +-
 src/plugin_manager/config/config.js           |   2 +-
 src/plugin_manager/index.js                   |   2 +-
 src/rich_text_editor/model/RichTextEditor.js  |   9 +-
 src/style_manager/index.js                    |  26 +-
 src/style_manager/model/PropertyComposite.js  |   5 +-
 src/style_manager/model/PropertyFactory.js    |  75 +++-
 src/style_manager/model/PropertyStack.js      |   8 +-
 src/style_manager/view/PropertyColorView.js   |  12 +-
 src/trait_manager/config/config.js            |   2 +-
 src/trait_manager/model/TraitFactory.js       |   2 +-
 src/utils/Sorter.js                           |   4 +-
 src/utils/cash-dom.js                         | 364 +++++++---------
 src/utils/dom.js                              |  13 +-
 src/utils/index.js                            |   2 +-
 src/utils/polyfills.js                        |   5 +-
 .../asset_manager/view/AssetImageView.js      |   2 +-
 test/specs/asset_manager/view/AssetView.js    |   6 +-
 test/specs/asset_manager/view/AssetsView.js   |  12 +-
 test/specs/asset_manager/view/FileUploader.js |  12 +-
 test/specs/block_manager/view/BlocksView.js   |   8 +-
 test/specs/commands/index.js                  |   8 +-
 test/specs/commands/view/CommandAbstract.js   |  36 +-
 test/specs/commands/view/SwitchVisibility.js  |   6 +-
 test/specs/css_composer/e2e/CssComposer.js    |  36 +-
 test/specs/css_composer/view/CssRuleView.js   |  10 +-
 test/specs/css_composer/view/CssRulesView.js  |  26 +-
 test/specs/device_manager/view/DevicesView.js |   8 +-
 test/specs/dom_components/index.js            |   1 -
 .../dom_components/view/ComponentImageView.js |   2 +-
 test/specs/modal/view/ModalView.js            |   2 +-
 test/specs/panels/e2e/PanelsE2e.js            |  18 +-
 test/specs/panels/model/PanelModels.js        |   4 +-
 test/specs/panels/view/ButtonView.js          |   8 +-
 test/specs/panels/view/ButtonsView.js         |   2 +-
 test/specs/panels/view/PanelView.js           |   6 +-
 test/specs/panels/view/PanelsView.js          |   2 +-
 .../selector_manager/e2e/ClassManager.js      |  37 +-
 test/specs/selector_manager/index.js          |  41 +-
 .../selector_manager/model/SelectorModels.js  |   8 +-
 .../style_manager/view/PropertyColorView.js   |   5 +-
 .../style_manager/view/PropertyRadioView.js   |   5 +-
 .../style_manager/view/PropertySelectView.js  |   5 +-
 test/specs/style_manager/view/PropertyView.js |   5 +-
 test/specs/style_manager/view/SectorsView.js  |   2 +-
 test/specs/trait_manager/model/TraitsModel.js |   2 +-
 test/specs/trait_manager/view/TraitsView.js   |   8 +-
 test/test_utils.js                            |   4 +-
 108 files changed, 1324 insertions(+), 1414 deletions(-)

diff --git a/src/abstract/Module.ts b/src/abstract/Module.ts
index 9ef6022b6..0bbea25a7 100644
--- a/src/abstract/Module.ts
+++ b/src/abstract/Module.ts
@@ -1,7 +1,7 @@
-import { isElement, isUndefined } from "underscore";
-import { Collection, View } from "../common";
-import EditorModel from "../editor/model/Editor";
-import { createId, isDef } from "../utils/mixins";
+import { isElement, isUndefined } from 'underscore';
+import { Collection, View } from '../common';
+import EditorModel from '../editor/model/Editor';
+import { createId, isDef } from '../utils/mixins';
 
 export interface IModule<TConfig extends any = any>
   extends IBaseModule<TConfig> {
@@ -48,7 +48,7 @@ export default abstract class Module<T extends ModuleConfig = ModuleConfig>
       ? em.config[name]
       : em.config[this.name];
     const cfg = cfgParent === true ? {} : cfgParent || {};
-    cfg.pStylePrefix = em.config.pStylePrefix || "";
+    cfg.pStylePrefix = em.config.pStylePrefix || '';
 
     if (!isUndefined(cfgParent) && !cfgParent) {
       cfg._disable = 1;
@@ -121,15 +121,15 @@ export abstract class ItemManagerModule<
   ) {
     const { all, onResult, reset } = param;
     const key = this.storageKey;
-    const opts: any = { action: "load" };
+    const opts: any = { action: 'load' };
     const coll = all || this.all;
     let result = data[key];
 
-    if (typeof result == "string") {
+    if (typeof result == 'string') {
       try {
         result = JSON.parse(result);
       } catch (err) {
-        this.__logWarn("Data parsing failed", { input: result });
+        this.__logWarn('Data parsing failed', { input: result });
       }
     }
 
@@ -168,19 +168,19 @@ export abstract class ItemManagerModule<
     all &&
       em &&
       all
-        .on("add", (m: any, c: any, o: any) => em.trigger(events.add, m, o))
-        .on("remove", (m: any, c: any, o: any) =>
+        .on('add', (m: any, c: any, o: any) => em.trigger(events.add, m, o))
+        .on('remove', (m: any, c: any, o: any) =>
           em.trigger(events.remove, m, o)
         )
-        .on("change", (p: any, c: any) =>
+        .on('change', (p: any, c: any) =>
           em.trigger(events.update, p, p.changedAttributes(), c)
         )
-        .on("all", this.__catchAllEvent, this);
+        .on('all', this.__catchAllEvent, this);
     // Register collections
     this.cls = [all].concat(opts.collections || []);
     // Propagate events
     ((opts.propagate as any[]) || []).forEach(({ entity, event }) => {
-      entity.on("all", (ev: any, model: any, coll: any, opts: any) => {
+      entity.on('all', (ev: any, model: any, coll: any, opts: any) => {
         const options = opts || coll;
         const opt = { event: ev, ...options };
         [em, all].map((md) => md.trigger(event, model, opt));
@@ -234,15 +234,15 @@ export abstract class ItemManagerModule<
   }
 
   __listenAdd(model: TCollection, event: string) {
-    model.on("add", (m, c, o) => this.em.trigger(event, m, o));
+    model.on('add', (m, c, o) => this.em.trigger(event, m, o));
   }
 
   __listenRemove(model: TCollection, event: string) {
-    model.on("remove", (m, c, o) => this.em.trigger(event, m, o));
+    model.on('remove', (m, c, o) => this.em.trigger(event, m, o));
   }
 
   __listenUpdate(model: TCollection, event: string) {
-    model.on("change", (p, c) =>
+    model.on('change', (p, c) =>
       this.em.trigger(event, p, p.changedAttributes(), c)
     );
   }
diff --git a/src/asset_manager/config/config.js b/src/asset_manager/config/config.js
index 62a11024b..cc6f6c4ec 100644
--- a/src/asset_manager/config/config.js
+++ b/src/asset_manager/config/config.js
@@ -106,5 +106,5 @@ export default {
   openAssetsOnDrop: 1,
 
   // Any dropzone content to append inside dropzone element
-  dropzoneContent: ''
+  dropzoneContent: '',
 };
diff --git a/src/asset_manager/model/AssetImage.js b/src/asset_manager/model/AssetImage.js
index 82695a239..36db133c9 100644
--- a/src/asset_manager/model/AssetImage.js
+++ b/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,
     };
   }
 }
diff --git a/src/block_manager/config/config.js b/src/block_manager/config/config.js
index c88adb5e7..a9011c443 100644
--- a/src/block_manager/config/config.js
+++ b/src/block_manager/config/config.js
@@ -20,5 +20,5 @@ export default {
   blocks: [],
 
   // Avoid rendering the default block manager.
-  custom: false
+  custom: false,
 };
diff --git a/src/code_manager/config/config.js b/src/code_manager/config/config.js
index cacca1898..3ef0ef72e 100644
--- a/src/code_manager/config/config.js
+++ b/src/code_manager/config/config.js
@@ -2,5 +2,5 @@ export default {
   // Style prefix
   stylePrefix: 'cm-',
 
-  inlineCss: false
+  inlineCss: false,
 };
diff --git a/src/code_manager/index.js b/src/code_manager/index.js
index dce2d97d9..b9e6ae3ec 100644
--- a/src/code_manager/index.js
+++ b/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 = {}));
+    },
   };
 };
diff --git a/src/commands/config/config.js b/src/commands/config/config.js
index c604b5697..394a23c7c 100644
--- a/src/commands/config/config.js
+++ b/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,
 };
diff --git a/src/commands/view/CanvasClear.js b/src/commands/view/CanvasClear.js
index 662f60ebd..960bba626 100644
--- a/src/commands/view/CanvasClear.js
+++ b/src/commands/view/CanvasClear.js
@@ -2,5 +2,5 @@ export default {
   run(ed) {
     ed.DomComponents.clear();
     ed.CssComposer.clear();
-  }
+  },
 };
diff --git a/src/commands/view/ComponentEnter.js b/src/commands/view/ComponentEnter.js
index f1cf528b4..bdc81e1b4 100644
--- a/src/commands/view/ComponentEnter.js
+++ b/src/commands/view/ComponentEnter.js
@@ -10,5 +10,5 @@ export default {
     });
 
     toSelect.length && ed.select(toSelect);
-  }
+  },
 };
diff --git a/src/commands/view/ComponentExit.js b/src/commands/view/ComponentExit.js
index 9cdafba35..97b3c18f9 100644
--- a/src/commands/view/ComponentExit.js
+++ b/src/commands/view/ComponentExit.js
@@ -15,5 +15,5 @@ export default {
     });
 
     toSelect.length && ed.select(toSelect);
-  }
+  },
 };
diff --git a/src/commands/view/ComponentNext.js b/src/commands/view/ComponentNext.js
index f99d64aa9..5df942176 100644
--- a/src/commands/view/ComponentNext.js
+++ b/src/commands/view/ComponentNext.js
@@ -23,5 +23,5 @@ export default {
     });
 
     toSelect.length && ed.select(toSelect);
-  }
+  },
 };
diff --git a/src/commands/view/ComponentPrev.js b/src/commands/view/ComponentPrev.js
index f466ce2d9..d2631d301 100644
--- a/src/commands/view/ComponentPrev.js
+++ b/src/commands/view/ComponentPrev.js
@@ -22,5 +22,5 @@ export default {
     });
 
     toSelect.length && ed.select(toSelect);
-  }
+  },
 };
diff --git a/src/commands/view/CopyComponent.js b/src/commands/view/CopyComponent.js
index 49e98be60..23e99f0ee 100644
--- a/src/commands/view/CopyComponent.js
+++ b/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);
-  }
+  },
 };
diff --git a/src/commands/view/DeleteComponent.js b/src/commands/view/DeleteComponent.js
index 5b470edc9..a2a29bb09 100644
--- a/src/commands/view/DeleteComponent.js
+++ b/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());
-  }
+  },
 });
diff --git a/src/commands/view/ExportTemplate.js b/src/commands/view/ExportTemplate.js
index 44dd7ef7b..ebdc8bd40 100644
--- a/src/commands/view/ExportTemplate.js
+++ b/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 };
-  }
+  },
 };
diff --git a/src/commands/view/Fullscreen.js b/src/commands/view/Fullscreen.js
index c24215840..b9934a5f5 100644
--- a/src/commands/view/Fullscreen.js
+++ b/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');
-  }
+  },
 };
diff --git a/src/commands/view/OpenAssets.js b/src/commands/view/OpenAssets.js
index 0c18d9f5e..a797b4a4f 100644
--- a/src/commands/view/OpenAssets.js
+++ b/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);
-  }
+  },
 };
diff --git a/src/commands/view/OpenBlocks.js b/src/commands/view/OpenBlocks.js
index 6471ad426..5add637be 100644
--- a/src/commands/view/OpenBlocks.js
+++ b/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();
-  }
+  },
 };
diff --git a/src/commands/view/OpenLayers.js b/src/commands/view/OpenLayers.js
index c1f07fca9..d9045594f 100644
--- a/src/commands/view/OpenLayers.js
+++ b/src/commands/view/OpenLayers.js
@@ -20,5 +20,5 @@ export default {
   stop() {
     const { layers } = this;
     layers && (layers.style.display = 'none');
-  }
+  },
 };
diff --git a/src/commands/view/OpenTraitManager.js b/src/commands/view/OpenTraitManager.js
index 85d37af89..ca528ac0f 100644
--- a/src/commands/view/OpenTraitManager.js
+++ b/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();
-  }
+  },
 };
diff --git a/src/commands/view/Preview.js b/src/commands/view/Preview.js
index 15a6f2db7..b59a2bb1f 100644
--- a/src/commands/view/Preview.js
+++ b/src/commands/view/Preview.js
@@ -93,5 +93,5 @@ export default {
 
     editor.refresh();
     this.tglEffects();
-  }
+  },
 };
diff --git a/src/commands/view/SelectPosition.js b/src/commands/view/SelectPosition.js
index 44b8b0d9a..e39fd5bf7 100644
--- a/src/commands/view/SelectPosition.js
+++ b/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();
-  }
+  },
 };
diff --git a/src/commands/view/SwitchVisibility.js b/src/commands/view/SwitchVisibility.js
index 6f58639c1..d2a3fb134 100644
--- a/src/commands/view/SwitchVisibility.js
+++ b/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`);
-  }
+  },
 };
diff --git a/src/css_composer/config/config.js b/src/css_composer/config/config.js
index 568ff190d..fac604c5a 100644
--- a/src/css_composer/config/config.js
+++ b/src/css_composer/config/config.js
@@ -18,5 +18,5 @@ export default {
    *    return style;
    * }
    */
-  onBeforeStyle: null
+  onBeforeStyle: null,
 };
diff --git a/src/dom_components/index.ts b/src/dom_components/index.ts
index 307137574..7520681a6 100644
--- a/src/dom_components/index.ts
+++ b/src/dom_components/index.ts
@@ -59,152 +59,152 @@ import {
   isString,
   result,
   debounce,
-} from "underscore";
-import defaults from "./config/config";
-import Component, { keyUpdate, keyUpdateInside } from "./model/Component";
-import Components from "./model/Components";
-import ComponentView from "./view/ComponentView";
-import ComponentWrapperView from "./view/ComponentWrapperView";
-import ComponentsView from "./view/ComponentsView";
-import ComponentTableCell from "./model/ComponentTableCell";
-import ComponentTableCellView from "./view/ComponentTableCellView";
-import ComponentTableRow from "./model/ComponentTableRow";
-import ComponentTableRowView from "./view/ComponentTableRowView";
-import ComponentTable from "./model/ComponentTable";
-import ComponentTableView from "./view/ComponentTableView";
-import ComponentTableHead from "./model/ComponentTableHead";
-import ComponentTableHeadView from "./view/ComponentTableHeadView";
-import ComponentTableBody from "./model/ComponentTableBody";
-import ComponentTableBodyView from "./view/ComponentTableBodyView";
-import ComponentTableFoot from "./model/ComponentTableFoot";
-import ComponentTableFootView from "./view/ComponentTableFootView";
-import ComponentMap from "./model/ComponentMap";
-import ComponentMapView from "./view/ComponentMapView";
-import ComponentLink from "./model/ComponentLink";
-import ComponentLinkView from "./view/ComponentLinkView";
-import ComponentLabel from "./model/ComponentLabel";
-import ComponentLabelView from "./view/ComponentLabelView";
-import ComponentVideo from "./model/ComponentVideo";
-import ComponentVideoView from "./view/ComponentVideoView";
-import ComponentImage from "./model/ComponentImage";
-import ComponentImageView from "./view/ComponentImageView";
-import ComponentScript from "./model/ComponentScript";
-import ComponentScriptView from "./view/ComponentScriptView";
-import ComponentSvg from "./model/ComponentSvg";
-import ComponentSvgIn from "./model/ComponentSvgIn";
-import ComponentSvgView from "./view/ComponentSvgView";
-import ComponentComment from "./model/ComponentComment";
-import ComponentCommentView from "./view/ComponentCommentView";
-import ComponentTextNode from "./model/ComponentTextNode";
-import ComponentTextNodeView from "./view/ComponentTextNodeView";
-import ComponentText from "./model/ComponentText";
-import ComponentTextView from "./view/ComponentTextView";
-import ComponentWrapper from "./model/ComponentWrapper";
-import ComponentFrame from "./model/ComponentFrame";
-import ComponentFrameView from "./view/ComponentFrameView";
-import { ItemManagerModule } from "../abstract/Module";
-import EditorModel from "../editor/model/Editor";
-import { Model } from "backbone";
+} from 'underscore';
+import defaults from './config/config';
+import Component, { keyUpdate, keyUpdateInside } from './model/Component';
+import Components from './model/Components';
+import ComponentView from './view/ComponentView';
+import ComponentWrapperView from './view/ComponentWrapperView';
+import ComponentsView from './view/ComponentsView';
+import ComponentTableCell from './model/ComponentTableCell';
+import ComponentTableCellView from './view/ComponentTableCellView';
+import ComponentTableRow from './model/ComponentTableRow';
+import ComponentTableRowView from './view/ComponentTableRowView';
+import ComponentTable from './model/ComponentTable';
+import ComponentTableView from './view/ComponentTableView';
+import ComponentTableHead from './model/ComponentTableHead';
+import ComponentTableHeadView from './view/ComponentTableHeadView';
+import ComponentTableBody from './model/ComponentTableBody';
+import ComponentTableBodyView from './view/ComponentTableBodyView';
+import ComponentTableFoot from './model/ComponentTableFoot';
+import ComponentTableFootView from './view/ComponentTableFootView';
+import ComponentMap from './model/ComponentMap';
+import ComponentMapView from './view/ComponentMapView';
+import ComponentLink from './model/ComponentLink';
+import ComponentLinkView from './view/ComponentLinkView';
+import ComponentLabel from './model/ComponentLabel';
+import ComponentLabelView from './view/ComponentLabelView';
+import ComponentVideo from './model/ComponentVideo';
+import ComponentVideoView from './view/ComponentVideoView';
+import ComponentImage from './model/ComponentImage';
+import ComponentImageView from './view/ComponentImageView';
+import ComponentScript from './model/ComponentScript';
+import ComponentScriptView from './view/ComponentScriptView';
+import ComponentSvg from './model/ComponentSvg';
+import ComponentSvgIn from './model/ComponentSvgIn';
+import ComponentSvgView from './view/ComponentSvgView';
+import ComponentComment from './model/ComponentComment';
+import ComponentCommentView from './view/ComponentCommentView';
+import ComponentTextNode from './model/ComponentTextNode';
+import ComponentTextNodeView from './view/ComponentTextNodeView';
+import ComponentText from './model/ComponentText';
+import ComponentTextView from './view/ComponentTextView';
+import ComponentWrapper from './model/ComponentWrapper';
+import ComponentFrame from './model/ComponentFrame';
+import ComponentFrameView from './view/ComponentFrameView';
+import { ItemManagerModule } from '../abstract/Module';
+import EditorModel from '../editor/model/Editor';
+import { Model } from 'backbone';
 
 export default class ComponentManager extends ItemManagerModule {
   componentTypes = [
     {
-      id: "cell",
+      id: 'cell',
       model: ComponentTableCell,
       view: ComponentTableCellView,
     },
     {
-      id: "row",
+      id: 'row',
       model: ComponentTableRow,
       view: ComponentTableRowView,
     },
     {
-      id: "table",
+      id: 'table',
       model: ComponentTable,
       view: ComponentTableView,
     },
     {
-      id: "thead",
+      id: 'thead',
       model: ComponentTableHead,
       view: ComponentTableHeadView,
     },
     {
-      id: "tbody",
+      id: 'tbody',
       model: ComponentTableBody,
       view: ComponentTableBodyView,
     },
     {
-      id: "tfoot",
+      id: 'tfoot',
       model: ComponentTableFoot,
       view: ComponentTableFootView,
     },
     {
-      id: "map",
+      id: 'map',
       model: ComponentMap,
       view: ComponentMapView,
     },
     {
-      id: "link",
+      id: 'link',
       model: ComponentLink,
       view: ComponentLinkView,
     },
     {
-      id: "label",
+      id: 'label',
       model: ComponentLabel,
       view: ComponentLabelView,
     },
     {
-      id: "video",
+      id: 'video',
       model: ComponentVideo,
       view: ComponentVideoView,
     },
     {
-      id: "image",
+      id: 'image',
       model: ComponentImage,
       view: ComponentImageView,
     },
     {
-      id: "script",
+      id: 'script',
       model: ComponentScript,
       view: ComponentScriptView,
     },
     {
-      id: "svg-in",
+      id: 'svg-in',
       model: ComponentSvgIn,
       view: ComponentSvgView,
     },
     {
-      id: "svg",
+      id: 'svg',
       model: ComponentSvg,
       view: ComponentSvgView,
     },
     {
-      id: "iframe",
+      id: 'iframe',
       model: ComponentFrame,
       view: ComponentFrameView,
     },
     {
-      id: "comment",
+      id: 'comment',
       model: ComponentComment,
       view: ComponentCommentView,
     },
     {
-      id: "textnode",
+      id: 'textnode',
       model: ComponentTextNode,
       view: ComponentTextNodeView,
     },
     {
-      id: "text",
+      id: 'text',
       model: ComponentText,
       view: ComponentTextView,
     },
     {
-      id: "wrapper",
+      id: 'wrapper',
       model: ComponentWrapper,
       view: ComponentWrapperView,
     },
     {
-      id: "default",
+      id: 'default',
       model: Component,
       view: ComponentView,
     },
@@ -226,7 +226,7 @@ export default class ComponentManager extends ItemManagerModule {
    */
   //name = "DomComponents";
 
-  storageKey = "components";
+  storageKey = 'components';
 
   shallow?: Component;
 
@@ -237,7 +237,7 @@ export default class ComponentManager extends ItemManagerModule {
    * @private
    */
   constructor(em: EditorModel) {
-    super(em, "DomComponents", new Components(undefined, { em }));
+    super(em, 'DomComponents', new Components(undefined, { em }));
 
     if (em) {
       this.config.components = em.config.components || this.config.components;
@@ -253,16 +253,16 @@ export default class ComponentManager extends ItemManagerModule {
 
     // Load dependencies
     if (em) {
-      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);
+      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) =>
+      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) =>
+      em.listenTo(selected, 'remove', (sel, c, opts) =>
         this.selectRemove(selected.getComponent(sel), opts)
       );
     }
@@ -276,7 +276,7 @@ export default class ComponentManager extends ItemManagerModule {
         let wrapper = this.getWrapper();
 
         if (!wrapper) {
-          this.em.get("PageManager").add({}, { select: true });
+          this.em.get('PageManager').add({}, { select: true });
           wrapper = this.getWrapper();
         }
 
@@ -302,7 +302,7 @@ export default class ComponentManager extends ItemManagerModule {
    * @private
    */
   getComponent(): Component {
-    const sel = this.em.get("PageManager").getSelected();
+    const sel = this.em.get('PageManager').getSelected();
     const frame = sel && sel.getMainFrame();
     return frame && frame.getComponent();
   }
@@ -350,7 +350,7 @@ export default class ComponentManager extends ItemManagerModule {
    */
   getComponents(): Components {
     const wrp = this.getWrapper();
-    return wrp && wrp.get("components");
+    return wrp && wrp.get('components');
   }
 
   /**
@@ -444,7 +444,7 @@ export default class ComponentManager extends ItemManagerModule {
       ? extendType
       : compType
       ? compType
-      : this.getType("default");
+      : this.getType('default');
     const modelToExt = typeToExtend.model;
     const viewToExt = extendViewType ? extendViewType.view : typeToExtend.view;
 
@@ -463,14 +463,14 @@ export default class ComponentManager extends ItemManagerModule {
       }, {});
 
     // If the model/view is a simple object I need to extend it
-    if (typeof model === "object") {
+    if (typeof model === 'object') {
       methods.model = modelToExt.extend(
         {
           ...model,
           ...getExtendedObj(extendFn, model, modelToExt),
           defaults: {
-            ...(result(modelToExt.prototype, "defaults") || {}),
-            ...(result(model, "defaults") || {}),
+            ...(result(modelToExt.prototype, 'defaults') || {}),
+            ...(result(model, 'defaults') || {}),
           },
         },
         {
@@ -482,7 +482,7 @@ export default class ComponentManager extends ItemManagerModule {
       );
     }
 
-    if (typeof view === "object") {
+    if (typeof view === 'object') {
       methods.view = viewToExt.extend({
         ...view,
         ...getExtendedObj(extendFnView, view, viewToExt),
@@ -497,7 +497,7 @@ export default class ComponentManager extends ItemManagerModule {
       this.componentTypes.unshift(methods);
     }
 
-    const event = `component:type:${compType ? "update" : "add"}`;
+    const event = `component:type:${compType ? 'update' : 'add'}`;
     em?.trigger(event, compType || methods);
 
     return this;
@@ -509,7 +509,7 @@ export default class ComponentManager extends ItemManagerModule {
    * @param {string} type Component ID
    * @return {Object} Component type definition, eg. `{ model: ..., view: ... }`
    */
-  getType(type: "default"): { id: string; model: any; view: any };
+  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;
@@ -548,9 +548,9 @@ export default class ComponentManager extends ItemManagerModule {
   selectAdd(component: Component, opts = {}) {
     if (component) {
       component.set({
-        status: "selected",
+        status: 'selected',
       });
-      ["component:selected", "component:toggled"].forEach((event) =>
+      ['component:selected', 'component:toggled'].forEach((event) =>
         this.em.trigger(event, component, opts)
       );
     }
@@ -560,10 +560,10 @@ export default class ComponentManager extends ItemManagerModule {
     if (component) {
       const { em } = this;
       component.set({
-        status: "",
-        state: "",
+        status: '',
+        state: '',
       });
-      ["component:deselected", "component:toggled"].forEach((event) =>
+      ['component:deselected', 'component:toggled'].forEach((event) =>
         this.em.trigger(event, component, opts)
       );
     }
@@ -575,19 +575,19 @@ export default class ComponentManager extends ItemManagerModule {
    */
   componentHovered() {
     const { em } = this;
-    const model = em.get("componentHovered");
-    const previous = em.previous("componentHovered");
-    const state = "hovered";
+    const model = em.get('componentHovered');
+    const previous = em.previous('componentHovered');
+    const state = 'hovered';
 
     // Deselect the previous component
     previous &&
-      previous.get("status") == state &&
+      previous.get('status') == state &&
       previous.set({
-        status: "",
-        state: "",
+        status: '',
+        state: '',
       });
 
-    model && isEmpty(model.get("status")) && model.set("status", state);
+    model && isEmpty(model.get('status')) && model.set('status', state);
   }
 
   getShallowWrapper() {
@@ -596,14 +596,14 @@ export default class ComponentManager extends ItemManagerModule {
     if (!shallow && em) {
       const shallowEm = em.shallow;
       if (!shallowEm) return;
-      const domc = shallowEm.get("DomComponents");
+      const domc = shallowEm.get('DomComponents');
       domc.componentTypes = this.componentTypes;
       shallow = domc.getWrapper();
       if (shallow) {
-        const events = [keyUpdate, keyUpdateInside].join(" ");
+        const events = [keyUpdate, keyUpdateInside].join(' ');
         shallow.on(
           events,
-          debounce(() => shallow?.components(""), 100)
+          debounce(() => shallow?.components(''), 100)
         );
       }
       this.shallow = shallow;
@@ -648,33 +648,33 @@ export default class ComponentManager extends ItemManagerModule {
     if (!srcModel) return result;
 
     // Check if the source is draggable in the target
-    let draggable = srcModel.get("draggable");
+    let draggable = srcModel.get('draggable');
 
     if (isFunction(draggable)) {
       draggable = !!draggable(srcModel, target, at);
     } else {
       const el = target.getEl();
-      draggable = isArray(draggable) ? draggable.join(",") : draggable;
+      draggable = isArray(draggable) ? draggable.join(',') : draggable;
       draggable = isString(draggable) ? el?.matches(draggable) : draggable;
     }
 
     if (!draggable) return { ...result, reason: 1 };
 
     // Check if the target accepts the source
-    let droppable = target.get("droppable");
+    let droppable = target.get('droppable');
 
     if (isFunction(droppable)) {
       droppable = !!droppable(srcModel, target, at);
     } else {
       if (
         droppable === false &&
-        target.isInstanceOf("text") &&
-        srcModel.get("textable")
+        target.isInstanceOf('text') &&
+        srcModel.get('textable')
       ) {
         droppable = true;
       } else {
         const el = srcModel.getEl();
-        droppable = isArray(droppable) ? droppable.join(",") : droppable;
+        droppable = isArray(droppable) ? droppable.join(',') : droppable;
         droppable = isString(droppable) ? el?.matches(droppable) : droppable;
       }
     }
diff --git a/src/dom_components/model/ComponentComment.js b/src/dom_components/model/ComponentComment.js
index 845d3439c..020e86b92 100644
--- a/src/dom_components/model/ComponentComment.js
+++ b/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,
         };
       }
-    }
+    },
   }
 );
diff --git a/src/dom_components/model/ComponentFrame.js b/src/dom_components/model/ComponentFrame.js
index b7098bbcb..82bb0cc9f 100644
--- a/src/dom_components/model/ComponentFrame.js
+++ b/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,
   }
 );
diff --git a/src/dom_components/model/ComponentImage.js b/src/dom_components/model/ComponentImage.js
index 9596272eb..f8d9a5271 100644
--- a/src/dom_components/model/ComponentImage.js
+++ b/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',
   }
 );
diff --git a/src/dom_components/model/ComponentLabel.js b/src/dom_components/model/ComponentLabel.js
index 7df2cd773..39d28e3f7 100644
--- a/src/dom_components/model/ComponentLabel.js
+++ b/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,
   }
 );
diff --git a/src/dom_components/model/ComponentMap.js b/src/dom_components/model/ComponentMap.js
index b597d049a..05896b3fc 100644
--- a/src/dom_components/model/ComponentMap.js
+++ b/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;
-    }
+    },
   }
 );
diff --git a/src/dom_components/model/ComponentScript.js b/src/dom_components/model/ComponentScript.js
index 483a2dab0..57f767d75 100644
--- a/src/dom_components/model/ComponentScript.js
+++ b/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;
       }
-    }
+    },
   }
 );
diff --git a/src/dom_components/model/ComponentSvg.js b/src/dom_components/model/ComponentSvg.js
index 1d7714c2b..862c0ca4f 100644
--- a/src/dom_components/model/ComponentSvg.js
+++ b/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,
   }
 );
diff --git a/src/dom_components/model/ComponentSvgIn.js b/src/dom_components/model/ComponentSvgIn.js
index f10a40bd7..72778c459 100644
--- a/src/dom_components/model/ComponentSvgIn.js
+++ b/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,
   }
 );
diff --git a/src/dom_components/model/ComponentTable.js b/src/dom_components/model/ComponentTable.js
index 220d13f2c..733e2d637 100644
--- a/src/dom_components/model/ComponentTable.js
+++ b/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,
   }
 );
diff --git a/src/dom_components/model/ComponentTableBody.js b/src/dom_components/model/ComponentTableBody.js
index f3cd41103..2f13a836e 100644
--- a/src/dom_components/model/ComponentTableBody.js
+++ b/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,
   }
 );
diff --git a/src/dom_components/model/ComponentTableCell.js b/src/dom_components/model/ComponentTableCell.js
index 3fe597e89..20209b482 100644
--- a/src/dom_components/model/ComponentTableCell.js
+++ b/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,
   }
 );
diff --git a/src/dom_components/model/ComponentTableFoot.js b/src/dom_components/model/ComponentTableFoot.js
index 861224a7b..8171a53b3 100644
--- a/src/dom_components/model/ComponentTableFoot.js
+++ b/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,
   }
 );
diff --git a/src/dom_components/model/ComponentTableHead.js b/src/dom_components/model/ComponentTableHead.js
index 070479da6..e3b19ce76 100644
--- a/src/dom_components/model/ComponentTableHead.js
+++ b/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,
   }
 );
diff --git a/src/dom_components/model/ComponentTableRow.js b/src/dom_components/model/ComponentTableRow.js
index 50c796edc..fd862f313 100644
--- a/src/dom_components/model/ComponentTableRow.js
+++ b/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,
   }
 );
diff --git a/src/dom_components/model/ComponentTextNode.js b/src/dom_components/model/ComponentTextNode.js
index 921640b97..8ee5589d9 100644
--- a/src/dom_components/model/ComponentTextNode.js
+++ b/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;
-    }
+    },
   }
 );
diff --git a/src/dom_components/model/ComponentVideo.js b/src/dom_components/model/ComponentVideo.js
index 7f193e639..f64e303f5 100644
--- a/src/dom_components/model/ComponentVideo.js
+++ b/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;
-    }
+    },
   }
 );
diff --git a/src/dom_components/view/ComponentTableView.js b/src/dom_components/view/ComponentTableView.js
index 9d566d616..ea061697d 100644
--- a/src/dom_components/view/ComponentTableView.js
+++ b/src/dom_components/view/ComponentTableView.js
@@ -1,5 +1,5 @@
 import ComponentView from './ComponentView';
 
 export default ComponentView.extend({
-  events: {}
+  events: {},
 });
diff --git a/src/editor/model/Editor.ts b/src/editor/model/Editor.ts
index a1dc3dd06..49e27f094 100644
--- a/src/editor/model/Editor.ts
+++ b/src/editor/model/Editor.ts
@@ -5,44 +5,44 @@ import {
   toArray,
   keys,
   bindAll,
-} from "underscore";
-import Backbone from "backbone";
-import $ from "../../utils/cash-dom";
-import Extender from "../../utils/extender";
-import { getModel, hasWin, isEmptyObj } from "../../utils/mixins";
-import { Model } from "../../common";
-import Selected from "./Selected";
-import FrameView from "../../canvas/view/FrameView";
-import EditorModule from "..";
-import EditorView from "../view/EditorView";
-import { IModule } from "../../abstract/Module";
+} from 'underscore';
+import Backbone from 'backbone';
+import $ from '../../utils/cash-dom';
+import Extender from '../../utils/extender';
+import { getModel, hasWin, isEmptyObj } from '../../utils/mixins';
+import { Model } from '../../common';
+import Selected from './Selected';
+import FrameView from '../../canvas/view/FrameView';
+import EditorModule from '..';
+import EditorView from '../view/EditorView';
+import { IModule } from '../../abstract/Module';
 
 //@ts-ignore
 Backbone.$ = $;
 
 const deps = [
-  require("utils"),
-  require("i18n"),
-  require("keymaps"),
-  require("undo_manager"),
-  require("storage_manager"),
-  require("device_manager"),
-  require("parser"),
-  require("style_manager"),
-  require("selector_manager"),
-  require("modal_dialog"),
-  require("code_manager"),
-  require("panels"),
-  require("rich_text_editor"),
-  require("asset_manager"),
-  require("css_composer"),
-  require("pages"),
-  require("trait_manager"),
-  require("dom_components"),
-  require("navigator"),
-  require("canvas"),
-  require("commands"),
-  require("block_manager"),
+  require('utils'),
+  require('i18n'),
+  require('keymaps'),
+  require('undo_manager'),
+  require('storage_manager'),
+  require('device_manager'),
+  require('parser'),
+  require('style_manager'),
+  require('selector_manager'),
+  require('modal_dialog'),
+  require('code_manager'),
+  require('panels'),
+  require('rich_text_editor'),
+  require('asset_manager'),
+  require('css_composer'),
+  require('pages'),
+  require('trait_manager'),
+  require('dom_components'),
+  require('navigator'),
+  require('canvas'),
+  require('commands'),
+  require('block_manager'),
 ];
 
 const ts_deps: any[] = [];
@@ -74,7 +74,7 @@ export default class EditorModel extends Model {
       modules: [],
       toLoad: [],
       opened: {},
-      device: "",
+      device: '',
     };
   }
 
@@ -88,38 +88,38 @@ export default class EditorModel extends Model {
   view?: EditorView;
 
   get storables(): any[] {
-    return this.get("storables");
+    return this.get('storables');
   }
 
   get modules(): IModule[] {
-    return this.get("modules");
+    return this.get('modules');
   }
 
   get toLoad(): any[] {
-    return this.get("toLoad");
+    return this.get('toLoad');
   }
 
   get selected(): Selected {
-    return this.get("selected");
+    return this.get('selected');
   }
 
   get shallow(): EditorModel {
-    return this.get("shallow");
+    return this.get('shallow');
   }
 
   constructor(conf = {}) {
     super();
     this._config = conf;
     const { config } = this;
-    this.set("Config", conf);
-    this.set("modules", []);
-    this.set("toLoad", []);
-    this.set("storables", []);
-    this.set("selected", new Selected());
-    this.set("dmode", config.dragMode);
+    this.set('Config', conf);
+    this.set('modules', []);
+    this.set('toLoad', []);
+    this.set('storables', []);
+    this.set('selected', new Selected());
+    this.set('dmode', config.dragMode);
     const { el, log } = config;
     const toLog = log === true ? keys(logs) : isArray(log) ? log : [];
-    bindAll(this, "initBaseColorPicker");
+    bindAll(this, 'initBaseColorPicker');
 
     if (el && config.fromElement) {
       config.components = el.innerHTML;
@@ -130,7 +130,7 @@ export default class EditorModel extends Model {
           res[next.nodeName] = next.nodeValue;
           return res;
         }, {})
-      : "";
+      : '';
 
     // Move components to pages
     if (config.components && !config.pageManager) {
@@ -140,13 +140,13 @@ export default class EditorModel extends Model {
     // Load modules
     deps.forEach((name) => this.loadModule(name));
     ts_deps.forEach((name) => this.tsLoadModule(name));
-    this.on("change:componentHovered", this.componentHovered, this);
-    this.on("change:changesCount", this.updateChanges, this);
-    this.on("change:readyLoad change:readyCanvas", this._checkReady, this);
+    this.on('change:componentHovered', this.componentHovered, this);
+    this.on('change:changesCount', this.updateChanges, this);
+    this.on('change:readyLoad change:readyCanvas', this._checkReady, this);
     toLog.forEach((e) => this.listenLog(e));
 
     // Deprecations
-    [{ from: "change:selectedComponent", to: "component:toggled" }].forEach(
+    [{ from: 'change:selectedComponent', to: 'component:toggled' }].forEach(
       (event) => {
         const eventFrom = event.from;
         const eventTo = event.to;
@@ -162,11 +162,11 @@ export default class EditorModel extends Model {
 
   _checkReady() {
     if (
-      this.get("readyLoad") &&
-      this.get("readyCanvas") &&
-      !this.get("ready")
+      this.get('readyLoad') &&
+      this.get('readyCanvas') &&
+      !this.get('ready')
     ) {
-      this.set("ready", true);
+      this.set('ready', true);
     }
   }
 
@@ -200,7 +200,7 @@ export default class EditorModel extends Model {
    */
   loadOnStart() {
     const { projectData, headless } = this.config;
-    const sm = this.get("StorageManager");
+    const sm = this.get('StorageManager');
 
     // In `onLoad`, the module will try to load the data from its configurations.
     this.toLoad.forEach((mdl) => mdl.onLoad());
@@ -208,7 +208,7 @@ export default class EditorModel extends Model {
     // Stuff to do post load
     const postLoad = () => {
       this.modules.forEach((mdl) => mdl.postLoad && mdl.postLoad(this));
-      this.set("readyLoad", 1);
+      this.set('readyLoad', 1);
     };
 
     if (headless) {
@@ -238,8 +238,8 @@ export default class EditorModel extends Model {
       undoManager: false,
     });
     // We only need to load a few modules
-    ["PageManager", "Canvas"].forEach((key) => shallow.get(key).onLoad());
-    this.set("shallow", shallow);
+    ['PageManager', 'Canvas'].forEach((key) => shallow.get(key).onLoad());
+    this.set('shallow', shallow);
   }
 
   /**
@@ -248,11 +248,11 @@ export default class EditorModel extends Model {
    * @private
    */
   updateChanges() {
-    const stm = this.get("StorageManager");
+    const stm = this.get('StorageManager');
     const changes = this.getDirtyCount();
     this.updateItr && clearTimeout(this.updateItr);
     //@ts-ignore
-    this.updateItr = setTimeout(() => this.trigger("update"));
+    this.updateItr = setTimeout(() => this.trigger('update'));
 
     if (this.config.noticeOnUnload) {
       window.onbeforeunload = changes ? () => true : null;
@@ -278,7 +278,7 @@ export default class EditorModel extends Model {
       ? config[name]
       : config[Mod.name];
     const cfg = cfgParent === true ? {} : cfgParent || {};
-    cfg.pStylePrefix = config.pStylePrefix || "";
+    cfg.pStylePrefix = config.pStylePrefix || '';
 
     if (!isUndefined(cfgParent) && !cfgParent) {
       cfg._disable = 1;
@@ -329,11 +329,11 @@ export default class EditorModel extends Model {
       this.initialize(opts);
       this.destroyed = false;
     }
-    this.set("Editor", editor);
+    this.set('Editor', editor);
   }
 
   getEditor() {
-    return this.get("Editor");
+    return this.get('Editor');
   }
 
   /**
@@ -351,7 +351,7 @@ export default class EditorModel extends Model {
       opt.temporary ||
       opt.noCount ||
       opt.avoidStore ||
-      !this.get("ready")
+      !this.get('ready')
     ) {
       return;
     }
@@ -361,7 +361,7 @@ export default class EditorModel extends Model {
     this.timedInterval = setTimeout(() => {
       const curr = this.getDirtyCount() || 0;
       const { unset, ...opts } = opt;
-      this.set("changesCount", curr + 1, opts);
+      this.set('changesCount', curr + 1, opts);
     }, 0);
   }
 
@@ -377,9 +377,9 @@ export default class EditorModel extends Model {
    * @private
    * */
   componentHovered(editor: any, component: any, options: any) {
-    const prev = this.previous("componentHovered");
-    prev && this.trigger("component:unhovered", prev, options);
-    component && this.trigger("component:hovered", component, options);
+    const prev = this.previous('componentHovered');
+    prev && this.trigger('component:unhovered', prev, options);
+    component && this.trigger('component:hovered', component, options);
   }
 
   /**
@@ -424,13 +424,13 @@ export default class EditorModel extends Model {
       let model = getModel(el, undefined);
 
       if (model) {
-        this.trigger("component:select:before", model, opts);
+        this.trigger('component:select:before', model, opts);
 
         // Check for valid selectable
-        if (!model.get("selectable") || opts.abort) {
+        if (!model.get('selectable') || opts.abort) {
           if (opts.useValid) {
             let parent = model.parent();
-            while (parent && !parent.get("selectable"))
+            while (parent && !parent.get('selectable'))
               parent = parent.parent();
             model = parent;
           } else {
@@ -443,7 +443,7 @@ export default class EditorModel extends Model {
       if (ctrlKey && mltSel) {
         return this.toggleSelected(model);
       } else if (shiftKey && mltSel) {
-        this.clearSelection(this.get("Canvas").getWindow());
+        this.clearSelection(this.get('Canvas').getWindow());
         const coll = model.collection;
         const index = model.index();
         let min: number | undefined, max: number | undefined;
@@ -497,11 +497,11 @@ export default class EditorModel extends Model {
     const models = isArray(model) ? model : [model];
 
     models.forEach((model) => {
-      if (model && !model.get("selectable")) return;
+      if (model && !model.get('selectable')) return;
       const { selected } = this;
       opts.forceChange && this.removeSelected(model, opts);
       selected.addComponent(model, opts);
-      model && this.trigger("component:select", model, opts);
+      model && this.trigger('component:select', model, opts);
     });
   }
 
@@ -541,21 +541,21 @@ export default class EditorModel extends Model {
    * @private
    */
   setHovered(el: any, opts: any = {}) {
-    if (!el) return this.set("componentHovered", "");
+    if (!el) return this.set('componentHovered', '');
 
-    const ev = "component:hover";
+    const ev = 'component:hover';
     let model = getModel(el, undefined);
 
     if (!model) return;
 
-    opts.forceChange && this.set("componentHovered", "");
+    opts.forceChange && this.set('componentHovered', '');
     this.trigger(`${ev}:before`, model, opts);
 
     // Check for valid hoverable
-    if (!model.get("hoverable")) {
+    if (!model.get('hoverable')) {
       if (opts.useValid && !opts.abort) {
         let parent = model && model.parent();
-        while (parent && !parent.get("hoverable")) parent = parent.parent();
+        while (parent && !parent.get('hoverable')) parent = parent.parent();
         model = parent;
       } else {
         return;
@@ -563,13 +563,13 @@ export default class EditorModel extends Model {
     }
 
     if (!opts.abort) {
-      this.set("componentHovered", model, opts);
+      this.set('componentHovered', model, opts);
       this.trigger(ev, model, opts);
     }
   }
 
   getHovered() {
-    return this.get("componentHovered");
+    return this.get('componentHovered');
   }
 
   /**
@@ -580,7 +580,7 @@ export default class EditorModel extends Model {
    * @public
    */
   setComponents(components: any, opt = {}) {
-    return this.get("DomComponents").setComponents(components, opt);
+    return this.get('DomComponents').setComponents(components, opt);
   }
 
   /**
@@ -589,13 +589,13 @@ export default class EditorModel extends Model {
    * @private
    */
   getComponents() {
-    var cmp = this.get("DomComponents");
-    var cm = this.get("CodeManager");
+    var cmp = this.get('DomComponents');
+    var cm = this.get('CodeManager');
 
     if (!cmp || !cm) return;
 
     var wrp = cmp.getComponents();
-    return cm.getCode(wrp, "json");
+    return cm.getCode(wrp, 'json');
   }
 
   /**
@@ -606,7 +606,7 @@ export default class EditorModel extends Model {
    * @public
    */
   setStyle(style: any, opt = {}) {
-    const cssc = this.get("CssComposer");
+    const cssc = this.get('CssComposer');
     cssc.clear(opt);
     cssc.getAll().add(style, opt);
     return this;
@@ -629,7 +629,7 @@ export default class EditorModel extends Model {
    * @private
    */
   getStyle() {
-    return this.get("CssComposer").getAll();
+    return this.get('CssComposer').getAll();
   }
 
   /**
@@ -638,7 +638,7 @@ export default class EditorModel extends Model {
    * @returns {this}
    */
   setState(value: string) {
-    this.set("state", value);
+    this.set('state', value);
     return this;
   }
 
@@ -647,7 +647,7 @@ export default class EditorModel extends Model {
    * @returns {String}
    */
   getState() {
-    return this.get("state") || "";
+    return this.get('state') || '';
   }
 
   /**
@@ -659,15 +659,15 @@ export default class EditorModel extends Model {
   getHtml(opts: any = {}) {
     const { config } = this;
     const { optsHtml } = config;
-    const js = config.jsInHtml ? this.getJs(opts) : "";
-    const cmp = opts.component || this.get("DomComponents").getComponent();
+    const js = config.jsInHtml ? this.getJs(opts) : '';
+    const cmp = opts.component || this.get('DomComponents').getComponent();
     let html = cmp
-      ? this.get("CodeManager").getCode(cmp, "html", {
+      ? this.get('CodeManager').getCode(cmp, 'html', {
           ...optsHtml,
           ...opts,
         })
-      : "";
-    html += js ? `<script>${js}</script>` : "";
+      : '';
+    html += js ? `<script>${js}</script>` : '';
     return html;
   }
 
@@ -684,18 +684,18 @@ export default class EditorModel extends Model {
     const keepUnusedStyles = !isUndefined(opts.keepUnusedStyles)
       ? opts.keepUnusedStyles
       : config.keepUnusedStyles;
-    const cssc = this.get("CssComposer");
-    const wrp = opts.component || this.get("DomComponents").getComponent();
-    const protCss = !avoidProt ? config.protectedCss : "";
+    const cssc = this.get('CssComposer');
+    const wrp = opts.component || this.get('DomComponents').getComponent();
+    const protCss = !avoidProt ? config.protectedCss : '';
     const css =
       wrp &&
-      this.get("CodeManager").getCode(wrp, "css", {
+      this.get('CodeManager').getCode(wrp, 'css', {
         cssc,
         keepUnusedStyles,
         ...optsCss,
         ...opts,
       });
-    return wrp ? (opts.json ? css : protCss + css) : "";
+    return wrp ? (opts.json ? css : protCss + css) : '';
   }
 
   /**
@@ -704,8 +704,8 @@ export default class EditorModel extends Model {
    * @public
    */
   getJs(opts: any = {}) {
-    var wrp = opts.component || this.get("DomComponents").getWrapper();
-    return wrp ? this.get("CodeManager").getCode(wrp, "js").trim() : "";
+    var wrp = opts.component || this.get('DomComponents').getWrapper();
+    return wrp ? this.get('CodeManager').getCode(wrp, 'js').trim() : '';
   }
 
   /**
@@ -714,7 +714,7 @@ export default class EditorModel extends Model {
    */
   async store(options?: any) {
     const data = this.storeData();
-    await this.get("StorageManager").store(data, options);
+    await this.get('StorageManager').store(data, options);
     this.clearDirtyCount();
     return data;
   }
@@ -724,7 +724,7 @@ export default class EditorModel extends Model {
    * @public
    */
   async load(options?: any) {
-    const result = await this.get("StorageManager").load(options);
+    const result = await this.get('StorageManager').load(options);
     this.loadData(result);
     return result;
   }
@@ -733,7 +733,7 @@ export default class EditorModel extends Model {
     let result = {};
     // Sync content if there is an active RTE
     const editingCmp = this.getEditing();
-    editingCmp && editingCmp.trigger("sync:content", { noCount: true });
+    editingCmp && editingCmp.trigger('sync:content', { noCount: true });
 
     this.storables.forEach((m) => {
       result = { ...result, ...m.store(1) };
@@ -755,8 +755,8 @@ export default class EditorModel extends Model {
    * @private
    */
   getDeviceModel() {
-    var name = this.get("device");
-    return this.get("DeviceManager").get(name);
+    var name = this.get('device');
+    return this.get('DeviceManager').get(name);
   }
 
   /**
@@ -765,7 +765,7 @@ export default class EditorModel extends Model {
    * @private
    */
   runDefault(opts = {}) {
-    var command = this.get("Commands").get(this.config.defaultCommand);
+    var command = this.get('Commands').get(this.config.defaultCommand);
     if (!command || this.defaultRunning) return;
     command.stop(this, this, opts);
     command.run(this, this, opts);
@@ -778,7 +778,7 @@ export default class EditorModel extends Model {
    * @private
    */
   stopDefault(opts = {}) {
-    const commands = this.get("Commands");
+    const commands = this.get('Commands');
     const command = commands.get(this.config.defaultCommand);
     if (!command || !this.defaultRunning) return;
     command.stop(this, this, opts);
@@ -790,9 +790,9 @@ export default class EditorModel extends Model {
    * @public
    */
   refreshCanvas(opts: any = {}) {
-    this.set("canvasOffset", null);
-    this.set("canvasOffset", this.get("Canvas").getOffset());
-    opts.tools && this.trigger("canvas:updateTools");
+    this.set('canvasOffset', null);
+    this.set('canvasOffset', this.get('Canvas').getOffset());
+    opts.tools && this.trigger('canvas:updateTools');
   }
 
   /**
@@ -815,8 +815,8 @@ export default class EditorModel extends Model {
     const device = this.getDeviceModel();
     const condition = config.mediaCondition;
     const preview = config.devicePreviewMode;
-    const width = device && device.get("widthMedia");
-    return device && width && !preview ? `(${condition}: ${width})` : "";
+    const width = device && device.get('widthMedia');
+    return device && width && !preview ? `(${condition}: ${width})` : '';
   }
 
   /**
@@ -824,15 +824,15 @@ export default class EditorModel extends Model {
    * @return {Component}
    */
   getWrapper() {
-    return this.get("DomComponents").getWrapper();
+    return this.get('DomComponents').getWrapper();
   }
 
   setCurrentFrame(frameView: FrameView) {
-    return this.set("currentFrame", frameView);
+    return this.set('currentFrame', frameView);
   }
 
   getCurrentFrame(): FrameView {
-    return this.get("currentFrame");
+    return this.get('currentFrame');
   }
 
   getCurrentFrameModel() {
@@ -841,7 +841,7 @@ export default class EditorModel extends Model {
 
   getIcon(icon: string) {
     const icons = this.config.icons || {};
-    return icons[icon] || "";
+    return icons[icon] || '';
   }
 
   /**
@@ -850,27 +850,27 @@ export default class EditorModel extends Model {
    * @return {number}
    */
   getDirtyCount(): number {
-    return this.get("changesCount");
+    return this.get('changesCount');
   }
 
   clearDirtyCount() {
-    return this.set("changesCount", 0);
+    return this.set('changesCount', 0);
   }
 
   getZoomDecimal() {
-    return this.get("Canvas").getZoomDecimal();
+    return this.get('Canvas').getZoomDecimal();
   }
 
   getZoomMultiplier() {
-    return this.get("Canvas").getZoomMultiplier();
+    return this.get('Canvas').getZoomMultiplier();
   }
 
   setDragMode(value: string) {
-    return this.set("dmode", value);
+    return this.set('dmode', value);
   }
 
   t(...args: any[]) {
-    const i18n = this.get("I18n");
+    const i18n = this.get('I18n');
     return i18n?.t(...args);
   }
 
@@ -879,7 +879,7 @@ export default class EditorModel extends Model {
    * @returns {Boolean}
    */
   inAbsoluteMode() {
-    return this.get("dmode") === "absolute";
+    return this.get('dmode') === 'absolute';
   }
 
   /**
@@ -889,7 +889,7 @@ export default class EditorModel extends Model {
     const { config, view } = this;
     const editor = this.getEditor();
     const { editors = [] } = config.grapesjs || {};
-    const shallow = this.get("shallow");
+    const shallow = this.get('shallow');
     shallow?.destroyAll();
     this.stopListening();
     this.stopDefault();
@@ -900,7 +900,7 @@ export default class EditorModel extends Model {
     view && view.remove();
     this.clear({ silent: true });
     this.destroyed = true;
-    ["_config", "view", "_previousAttributes", "_events", "_listeners"].forEach(
+    ['_config', 'view', '_previousAttributes', '_events', '_listeners'].forEach(
       //@ts-ignore
       (i) => (this[i] = {})
     );
@@ -910,22 +910,22 @@ export default class EditorModel extends Model {
   }
 
   getEditing() {
-    const res = this.get("editing");
+    const res = this.get('editing');
     return (res && res.model) || null;
   }
 
   setEditing(value: boolean) {
-    this.set("editing", value);
+    this.set('editing', value);
     return this;
   }
 
   isEditing() {
-    return !!this.get("editing");
+    return !!this.get('editing');
   }
 
   log(msg: string, opts: any = {}) {
-    const { ns, level = "debug" } = opts;
-    this.trigger("log", msg, opts);
+    const { ns, level = 'debug' } = opts;
+    this.trigger('log', msg, opts);
     level && this.trigger(`log:${level}`, msg, opts);
 
     if (ns) {
@@ -936,15 +936,15 @@ export default class EditorModel extends Model {
   }
 
   logInfo(msg: string, opts?: any) {
-    this.log(msg, { ...opts, level: "info" });
+    this.log(msg, { ...opts, level: 'info' });
   }
 
   logWarning(msg: string, opts?: any) {
-    this.log(msg, { ...opts, level: "warning" });
+    this.log(msg, { ...opts, level: 'warning' });
   }
 
   logError(msg: string, opts?: any) {
-    this.log(msg, { ...opts, level: "error" });
+    this.log(msg, { ...opts, level: 'error' });
   }
 
   initBaseColorPicker(el: any, opts = {}) {
@@ -956,13 +956,13 @@ export default class EditorModel extends Model {
     //@ts-ignore
     return $(el).spectrum({
       containerClassName: `${ppfx}one-bg ${ppfx}two-color`,
-      appendTo: elToAppend || "body",
+      appendTo: elToAppend || 'body',
       maxSelectionSize: 8,
       showPalette: true,
       palette: [],
       showAlpha: true,
-      chooseText: "Ok",
-      cancelText: "⨯",
+      chooseText: 'Ok',
+      cancelText: '⨯',
       ...opts,
       ...colorPicker,
     });
@@ -975,7 +975,7 @@ export default class EditorModel extends Model {
    */
   skip(clb: Function) {
     this.__skip = true;
-    const um = this.get("UndoManager");
+    const um = this.get('UndoManager');
     um ? um.skip(clb) : clb();
     this.__skip = false;
   }
@@ -989,7 +989,7 @@ export default class EditorModel extends Model {
    * @private
    */
   data(el: any, name: string, value: any) {
-    const varName = "_gjs-data";
+    const varName = '_gjs-data';
 
     if (!el[varName]) {
       el[varName] = {};
diff --git a/src/i18n/locale/ca.js b/src/i18n/locale/ca.js
index 33fde5c5a..590d9c331 100644
--- a/src/i18n/locale/ca.js
+++ b/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',
+        },
+      },
+    },
+  },
 };
diff --git a/src/i18n/locale/el.js b/src/i18n/locale/el.js
index 0ea78d637..5db694a79 100644
--- a/src/i18n/locale/el.js
+++ b/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: 'Σε νέο παράθυρο',
+        },
+      },
+    },
+  },
 };
diff --git a/src/i18n/locale/es.js b/src/i18n/locale/es.js
index 296ff51f6..3829b7be6 100644
--- a/src/i18n/locale/es.js
+++ b/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',
+        },
+      },
+    },
+  },
 };
diff --git a/src/i18n/locale/fa.js b/src/i18n/locale/fa.js
index df648ec94..868a06bc8 100644
--- a/src/i18n/locale/fa.js
+++ b/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: 'پنجره جدید',
+          },
+        },
+      },
+    },
+  },
 };
diff --git a/src/i18n/locale/it.js b/src/i18n/locale/it.js
index be107df61..370ef8d4e 100644
--- a/src/i18n/locale/it.js
+++ b/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',
+        },
+      },
+    },
+  },
 };
diff --git a/src/i18n/locale/ko.js b/src/i18n/locale/ko.js
index 1634874f9..12bb49024 100644
--- a/src/i18n/locale/ko.js
+++ b/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: '새 창',
+        },
+      },
+    },
+  },
+};
diff --git a/src/i18n/locale/nl.js b/src/i18n/locale/nl.js
index 61dcf5621..4b7e0e44d 100644
--- a/src/i18n/locale/nl.js
+++ b/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',
+        },
+      },
+    },
+  },
 };
diff --git a/src/i18n/locale/pl.js b/src/i18n/locale/pl.js
index 1aa2c3e13..3cb0b4687 100644
--- a/src/i18n/locale/pl.js
+++ b/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',
+        },
+      },
+    },
+  },
 };
diff --git a/src/i18n/locale/pt.js b/src/i18n/locale/pt.js
index f238757bc..bb28414bf 100644
--- a/src/i18n/locale/pt.js
+++ b/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',
+        },
+      },
+    },
+  },
 };
diff --git a/src/i18n/locale/tr.js b/src/i18n/locale/tr.js
index 2937fa749..3bff78f68 100644
--- a/src/i18n/locale/tr.js
+++ b/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: {},
+    },
+  },
 };
diff --git a/src/i18n/locale/zh.js b/src/i18n/locale/zh.js
index f582d6938..d869b8916 100644
--- a/src/i18n/locale/zh.js
+++ b/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: '新窗口',
+        },
+      },
+    },
+  },
 };
diff --git a/src/modal_dialog/config/config.js b/src/modal_dialog/config/config.js
index b2fbd9f43..cc4f56d73 100644
--- a/src/modal_dialog/config/config.js
+++ b/src/modal_dialog/config/config.js
@@ -19,5 +19,5 @@ export default {
    *   },
    * },
    */
-  extend: {}
+  extend: {},
 };
diff --git a/src/modal_dialog/index.js b/src/modal_dialog/index.js
index 82a943ec6..2230e4e29 100644
--- a/src/modal_dialog/index.js
+++ b/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 = {};
-    }
+    },
   };
 };
diff --git a/src/navigator/config/config.js b/src/navigator/config/config.js
index 36a95ae76..7c895bbb3 100644
--- a/src/navigator/config/config.js
+++ b/src/navigator/config/config.js
@@ -70,5 +70,5 @@ export default {
    *   },
    * },
    */
-  extend: {}
+  extend: {},
 };
diff --git a/src/panels/config/config.js b/src/panels/config/config.js
index b24a24315..266f3b211 100644
--- a/src/panels/config/config.js
+++ b/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,
 };
diff --git a/src/panels/index.js b/src/panels/index.js
index 7946d3942..11ef50db1 100644
--- a/src/panels/index.js
+++ b/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,
   };
 };
diff --git a/src/parser/model/BrowserParserCss.js b/src/parser/model/BrowserParserCss.js
index 5bedabbd5..9d8e7ab9c 100644
--- a/src/parser/model/BrowserParserCss.js
+++ b/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);
diff --git a/src/parser/model/ParserCss.js b/src/parser/model/ParserCss.js
index 15a34a836..9a200bd05 100644
--- a/src/parser/model/ParserCss.js
+++ b/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;
-  }
+  },
 });
diff --git a/src/plugin_manager/config/config.js b/src/plugin_manager/config/config.js
index e74673aaf..4ed8f62dd 100644
--- a/src/plugin_manager/config/config.js
+++ b/src/plugin_manager/config/config.js
@@ -1,3 +1,3 @@
 export default {
-  plugins: []
+  plugins: [],
 };
diff --git a/src/plugin_manager/index.js b/src/plugin_manager/index.js
index 015e3c4f4..b3883be09 100644
--- a/src/plugin_manager/index.js
+++ b/src/plugin_manager/index.js
@@ -52,6 +52,6 @@ export default config => {
      */
     getAll() {
       return plugins;
-    }
+    },
   };
 };
diff --git a/src/rich_text_editor/model/RichTextEditor.js b/src/rich_text_editor/model/RichTextEditor.js
index a8d13ac76..918b3a420 100644
--- a/src/rich_text_editor/model/RichTextEditor.js
+++ b/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,
+        });
     },
   },
 };
diff --git a/src/style_manager/index.js b/src/style_manager/index.js
index 89b0911aa..6409aa6cd 100644
--- a/src/style_manager/index.js
+++ b/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());
diff --git a/src/style_manager/model/PropertyComposite.js b/src/style_manager/model/PropertyComposite.js
index 74d05236b..e7bd6a9c3 100644
--- a/src/style_manager/model/PropertyComposite.js
+++ b/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);
diff --git a/src/style_manager/model/PropertyFactory.js b/src/style_manager/model/PropertyFactory.js
index 489a320d5..458f3ae2e 100644
--- a/src/style_manager/model/PropertyFactory.js
+++ b/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) {
diff --git a/src/style_manager/model/PropertyStack.js b/src/style_manager/model/PropertyStack.js
index 44c908734..11c6a9d0c 100644
--- a/src/style_manager/model/PropertyStack.js
+++ b/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();
diff --git a/src/style_manager/view/PropertyColorView.js b/src/style_manager/view/PropertyColorView.js
index 820b37e69..112ee08ff 100644
--- a/src/style_manager/view/PropertyColorView.js
+++ b/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);
diff --git a/src/trait_manager/config/config.js b/src/trait_manager/config/config.js
index 62409ca00..f73e8ef6f 100644
--- a/src/trait_manager/config/config.js
+++ b/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' }],
 };
diff --git a/src/trait_manager/model/TraitFactory.js b/src/trait_manager/model/TraitFactory.js
index 397becd0b..019122738 100644
--- a/src/trait_manager/model/TraitFactory.js
+++ b/src/trait_manager/model/TraitFactory.js
@@ -26,5 +26,5 @@ export default (config = {}) => ({
     }
 
     return objs;
-  }
+  },
 });
diff --git a/src/utils/Sorter.js b/src/utils/Sorter.js
index b4e83169f..a4029f7a7 100644
--- a/src/utils/Sorter.js
+++ b/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;
           }
diff --git a/src/utils/cash-dom.js b/src/utils/cash-dom.js
index 1dbfb1d9a..457389811 100644
--- a/src/utils/cash-dom.js
+++ b/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
diff --git a/src/utils/dom.js b/src/utils/dom.js
index 01d718649..b8b0108e6 100644
--- a/src/utils/dom.js
+++ b/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;
-        }
+        },
       });
     });
   }
diff --git a/src/utils/index.js b/src/utils/index.js
index c1931d98c..34c43df7f 100644
--- a/src/utils/index.js
+++ b/src/utils/index.js
@@ -24,6 +24,6 @@ export default () => {
     Sorter,
     Resizer,
     Dragger,
-    helpers: { ...mixins }
+    helpers: { ...mixins },
   };
 };
diff --git a/src/utils/polyfills.js b/src/utils/polyfills.js
index 928fe6ce8..9843e337f 100644
--- a/src/utils/polyfills.js
+++ b/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]);
diff --git a/test/specs/asset_manager/view/AssetImageView.js b/test/specs/asset_manager/view/AssetImageView.js
index bb6e532c9..09c1a98a7 100644
--- a/test/specs/asset_manager/view/AssetImageView.js
+++ b/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);
diff --git a/test/specs/asset_manager/view/AssetView.js b/test/specs/asset_manager/view/AssetView.js
index 65a81b930..743ac87c4 100644
--- a/test/specs/asset_manager/view/AssetView.js
+++ b/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(() => {
diff --git a/test/specs/asset_manager/view/AssetsView.js b/test/specs/asset_manager/view/AssetsView.js
index 853e8edb2..090ab8a91 100644
--- a/test/specs/asset_manager/view/AssetsView.js
+++ b/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();
diff --git a/test/specs/asset_manager/view/FileUploader.js b/test/specs/asset_manager/view/FileUploader.js
index ff78d3950..5321c1c46 100644
--- a/test/specs/asset_manager/view/FileUploader.js
+++ b/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);
diff --git a/test/specs/block_manager/view/BlocksView.js b/test/specs/block_manager/view/BlocksView.js
index f1178f068..66bba2e54 100644
--- a/test/specs/block_manager/view/BlocksView.js
+++ b/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');
     });
   });
 });
diff --git a/test/specs/commands/index.js b/test/specs/commands/index.js
index c5be839a2..733c44f17 100644
--- a/test/specs/commands/index.js
+++ b/test/specs/commands/index.js
@@ -21,7 +21,7 @@ describe('Commands', () => {
               getWrapperEl: () => ({}),
               getFrameEl: () => ({}),
               getToolsEl: () => ({}),
-              getBody: () => ({})
+              getBody: () => ({}),
             };
           case 'Editor':
             return { ...Backbone.Events };
@@ -29,16 +29,16 @@ describe('Commands', () => {
         }
         return null;
       },
-      logWarning() {}
+      logWarning() {},
     };
 
     beforeEach(() => {
       commSimple = {
         run: () => commResultRun,
-        stop: () => commResultStop
+        stop: () => commResultStop,
       };
       commRunOnly = {
-        run: () => commResultRun
+        run: () => commResultRun,
       };
       commFunc = () => commResultRun;
       obj = new Commands().init({ em: mockEditor });
diff --git a/test/specs/commands/view/CommandAbstract.js b/test/specs/commands/view/CommandAbstract.js
index 095dab294..e9c1e38dc 100644
--- a/test/specs/commands/view/CommandAbstract.js
+++ b/test/specs/commands/view/CommandAbstract.js
@@ -24,17 +24,8 @@ describe('CommandAbstract', () => {
     const result = command.callRun(editor);
     expect(editorTriggerSpy.callCount).toEqual(3);
     expect(editorTriggerSpy.getCall(0).args).toEqual(['run:test:before', {}]);
-    expect(editorTriggerSpy.getCall(1).args).toEqual([
-      'run:test',
-      'result',
-      {}
-    ]);
-    expect(editorTriggerSpy.getCall(2).args).toEqual([
-      'run',
-      'test',
-      'result',
-      {}
-    ]);
+    expect(editorTriggerSpy.getCall(1).args).toEqual(['run:test', 'result', {}]);
+    expect(editorTriggerSpy.getCall(2).args).toEqual(['run', 'test', 'result', {}]);
 
     expect(result).toEqual('result');
     expect(runStub.calledOnce).toEqual(true);
@@ -46,14 +37,8 @@ describe('CommandAbstract', () => {
     const result = command.callRun(editor, { abort: true });
 
     expect(editorTriggerSpy.calledTwice).toEqual(true);
-    expect(editorTriggerSpy.getCall(0).args).toEqual([
-      'run:test:before',
-      { abort: true }
-    ]);
-    expect(editorTriggerSpy.getCall(1).args).toEqual([
-      'abort:test',
-      { abort: true }
-    ]);
+    expect(editorTriggerSpy.getCall(0).args).toEqual(['run:test:before', { abort: true }]);
+    expect(editorTriggerSpy.getCall(1).args).toEqual(['abort:test', { abort: true }]);
 
     expect(result).toEqual(undefined);
     expect(runStub.notCalled).toEqual(true);
@@ -66,17 +51,8 @@ describe('CommandAbstract', () => {
 
     expect(editorTriggerSpy.callCount).toEqual(3);
     expect(editorTriggerSpy.getCall(0).args).toEqual(['stop:test:before', {}]);
-    expect(editorTriggerSpy.getCall(1).args).toEqual([
-      'stop:test',
-      'stopped',
-      {}
-    ]);
-    expect(editorTriggerSpy.getCall(2).args).toEqual([
-      'stop',
-      'test',
-      'stopped',
-      {}
-    ]);
+    expect(editorTriggerSpy.getCall(1).args).toEqual(['stop:test', 'stopped', {}]);
+    expect(editorTriggerSpy.getCall(2).args).toEqual(['stop', 'test', 'stopped', {}]);
 
     expect(result).toEqual('stopped');
     expect(stopStub.calledOnce).toEqual(true);
diff --git a/test/specs/commands/view/SwitchVisibility.js b/test/specs/commands/view/SwitchVisibility.js
index 439a9f9d7..5f5a9b555 100644
--- a/test/specs/commands/view/SwitchVisibility.js
+++ b/test/specs/commands/view/SwitchVisibility.js
@@ -9,12 +9,12 @@ describe('SwitchVisibility command', () => {
 
     fakeEditor = {
       Canvas: {
-        getFrames: jest.fn(() => fakeFrames)
+        getFrames: jest.fn(() => fakeFrames),
       },
 
       Commands: {
-        isActive: jest.fn(() => fakeIsActive)
-      }
+        isActive: jest.fn(() => fakeIsActive),
+      },
     };
   });
 
diff --git a/test/specs/css_composer/e2e/CssComposer.js b/test/specs/css_composer/e2e/CssComposer.js
index a000104d6..9360ddf6c 100644
--- a/test/specs/css_composer/e2e/CssComposer.js
+++ b/test/specs/css_composer/e2e/CssComposer.js
@@ -21,7 +21,7 @@ describe('E2E tests', () => {
       stylePrefix: '',
       storageManager: { autoload: 0, type: 'none' },
       assetManager: { storageType: 'none' },
-      container: 'csscomposer-fixture'
+      container: 'csscomposer-fixture',
     });
     cssc = gjs.CssComposer;
     clsm = gjs.SelectorManager;
@@ -30,15 +30,15 @@ describe('E2E tests', () => {
     rulesSet = [
       { selectors: [{ name: 'test1' }, { name: 'test2' }] },
       { selectors: [{ name: 'test2' }, { name: 'test3' }] },
-      { selectors: [{ name: 'test3' }] }
+      { selectors: [{ name: 'test3' }] },
     ];
     rulesSet2 = [
       {
         selectors: [{ name: 'test1' }, { name: 'test2' }],
-        state: ':active'
+        state: ':active',
       },
       { selectors: [{ name: 'test2' }, { name: 'test3' }] },
-      { selectors: [{ name: 'test3' }], mediaText: '(max-width: 900px)' }
+      { selectors: [{ name: 'test3' }], mediaText: '(max-width: 900px)' },
     ];
     done();
   });
@@ -58,7 +58,7 @@ describe('E2E tests', () => {
       stylePrefix: '',
       storageManager: { autoload: 0, type: 'none' },
       cssComposer: { rules: rulesSet },
-      container: 'csscomposer-fixture'
+      container: 'csscomposer-fixture',
     });
     var cssc = gj.editor.get('CssComposer');
     expect(cssc.getAll().length).toEqual(rulesSet.length);
@@ -89,9 +89,7 @@ describe('E2E tests', () => {
   test('Add rules from the new component added as a string with style tag', () => {
     var comps = domc.getComponents();
     var rules = cssc.getAll();
-    comps.add(
-      '<div>Test</div><style>.test{color: red} .test2{color: blue}</style>'
-    );
+    comps.add('<div>Test</div><style>.test{color: red} .test2{color: blue}</style>');
     expect(comps.length).toEqual(1);
     expect(rules.length).toEqual(2);
   });
@@ -116,11 +114,11 @@ describe('E2E tests', () => {
     var style2 = { height: '20px', width: '20px' };
     var rule1 = {
       selectors: ['test1'],
-      style: style1
+      style: style1,
     };
     var rule2 = {
       selectors: ['test1'],
-      style: style2
+      style: style2,
     };
     var ruleOut = cssc.addCollection(rule1)[0];
     // ruleOut is a Model
@@ -129,8 +127,8 @@ describe('E2E tests', () => {
       selectors: ['test1'],
       style: {
         color: 'red',
-        width: '10px'
-      }
+        width: '10px',
+      },
     };
     expect(ruleOut).toEqual(ruleResult);
     var ruleOut = cssc.addCollection(rule2, { extend: 1 })[0];
@@ -138,7 +136,7 @@ describe('E2E tests', () => {
     ruleResult.style = {
       color: 'red',
       height: '20px',
-      width: '20px'
+      width: '20px',
     };
     expect(ruleOut).toEqual(ruleResult);
   });
@@ -149,12 +147,12 @@ describe('E2E tests', () => {
     var rule1 = {
       selectors: [],
       selectorsAdd: '*',
-      style: style1
+      style: style1,
     };
     var rule2 = {
       selectors: [],
       selectorsAdd: 'p',
-      style: style2
+      style: style2,
     };
     var rule1Out = cssc.addCollection(rule1, { extend: 1 })[0];
     var rule2Out = cssc.addCollection(rule2, { extend: 1 })[0];
@@ -165,16 +163,16 @@ describe('E2E tests', () => {
       selectorsAdd: '*',
       style: {
         color: 'red',
-        width: '10px'
-      }
+        width: '10px',
+      },
     };
     var rule2Result = {
       selectors: [],
       selectorsAdd: 'p',
       style: {
         height: '20px',
-        width: '20px'
-      }
+        width: '20px',
+      },
     };
     expect(rule1Out).toEqual(rule1Result);
     expect(rule2Out).toEqual(rule2Result);
diff --git a/test/specs/css_composer/view/CssRuleView.js b/test/specs/css_composer/view/CssRuleView.js
index c992b64d9..a19108000 100644
--- a/test/specs/css_composer/view/CssRuleView.js
+++ b/test/specs/css_composer/view/CssRuleView.js
@@ -8,7 +8,7 @@ describe('CssRuleView', () => {
   beforeEach(() => {
     var m = new CssRule();
     obj = new CssRuleView({
-      model: m
+      model: m,
     });
     document.body.innerHTML = '<div id="fixtures"></div>';
     fixtures = document.body.querySelector('#fixtures');
@@ -37,10 +37,10 @@ describe('CssRuleView', () => {
 
     beforeEach(() => {
       var m = new CssRule({
-        selectors: [{ name: 'test1' }, { name: 'test2' }]
+        selectors: [{ name: 'test1' }, { name: 'test2' }],
       });
       objReg = new CssRuleView({
-        model: m
+        model: m,
       });
       objReg.render();
       document.body.innerHTML = '<div id="fixtures"></div>';
@@ -77,9 +77,7 @@ describe('CssRuleView', () => {
     test('Render media queries', () => {
       objReg.model.set('style', { prop: 'value' });
       objReg.model.set('mediaText', '(max-width: 999px)');
-      expect(objReg.$el.html()).toEqual(
-        '@media (max-width: 999px){.test1.test2{prop:value;}}'
-      );
+      expect(objReg.$el.html()).toEqual('@media (max-width: 999px){.test1.test2{prop:value;}}');
     });
 
     test('Empty on clear', () => {
diff --git a/test/specs/css_composer/view/CssRulesView.js b/test/specs/css_composer/view/CssRulesView.js
index 3c40fa64d..7b309d12b 100644
--- a/test/specs/css_composer/view/CssRulesView.js
+++ b/test/specs/css_composer/view/CssRulesView.js
@@ -9,18 +9,18 @@ describe('CssRulesView', () => {
     {
       name: 'Mobile portrait',
       width: '320px',
-      widthMedia: '480px'
+      widthMedia: '480px',
     },
     {
       name: 'Tablet',
       width: '768px',
-      widthMedia: '992px'
+      widthMedia: '992px',
     },
     {
       name: 'Desktop',
       width: '',
-      widthMedia: ''
-    }
+      widthMedia: '',
+    },
   ];
 
   beforeEach(() => {
@@ -30,10 +30,10 @@ describe('CssRulesView', () => {
       config: {
         em: new Editor({
           deviceManager: {
-            devices
-          }
-        })
-      }
+            devices,
+          },
+        }),
+      },
     });
     document.body.innerHTML = '<div id="fixtures"></div>';
     document.body.querySelector('#fixtures').appendChild(obj.render().el);
@@ -78,20 +78,20 @@ describe('CssRulesView', () => {
     const foundStylesContainers = obj.$el.find('div');
     const rules = [
       {
-        selectorsAdd: '#testid'
+        selectorsAdd: '#testid',
       },
       {
         selectorsAdd: '#testid2',
-        mediaText: '(max-width: 1000px)'
+        mediaText: '(max-width: 1000px)',
       },
       {
         selectorsAdd: '#testid3',
-        mediaText: '(min-width: 900px)'
+        mediaText: '(min-width: 900px)',
       },
       {
         selectorsAdd: '#testid4',
-        mediaText: 'screen and (max-width: 900px) and (min-width: 600px)'
-      }
+        mediaText: 'screen and (max-width: 900px) and (min-width: 600px)',
+      },
     ];
     obj.collection.add(rules);
     const stylesCont = obj.el.querySelector(`#${obj.className}`);
diff --git a/test/specs/device_manager/view/DevicesView.js b/test/specs/device_manager/view/DevicesView.js
index 6a0ba7111..78596041b 100644
--- a/test/specs/device_manager/view/DevicesView.js
+++ b/test/specs/device_manager/view/DevicesView.js
@@ -12,7 +12,7 @@ describe('DevicesView', () => {
     model = new Devices([]);
     view = new DevicesView({
       collection: model,
-      config: { em: new Model() }
+      config: { em: new Model() },
     });
     document.body.innerHTML = '<div id="fixtures"></div>';
     document.body.querySelector('#fixtures').appendChild(view.render().el);
@@ -41,7 +41,7 @@ describe('DevicesView', () => {
       model = new Devices([{ name: 'test1' }, { name: 'test2' }]);
       view = new DevicesView({
         collection: model,
-        config: { em: editorModel }
+        config: { em: editorModel },
       });
       document.body.innerHTML = '<div id="fixtures"></div>';
       document.body.querySelector('#fixtures').appendChild(view.render().el);
@@ -54,9 +54,7 @@ describe('DevicesView', () => {
     });
 
     test('Render options', () => {
-      expect(view.getOptions()).toEqual(
-        '<option value="test1">test1</option><option value="test2">test2</option>'
-      );
+      expect(view.getOptions()).toEqual('<option value="test1">test1</option><option value="test2">test2</option>');
     });
   });
 });
diff --git a/test/specs/dom_components/index.js b/test/specs/dom_components/index.js
index 9b66f3b0c..74b3d2d6a 100644
--- a/test/specs/dom_components/index.js
+++ b/test/specs/dom_components/index.js
@@ -56,7 +56,6 @@ describe('DOM Components', () => {
       obj = em.get('DomComponents');
       // obj = new DomComponents(em).init(config);
     });
-
     afterEach(() => {
       obj = null;
     });
diff --git a/test/specs/dom_components/view/ComponentImageView.js b/test/specs/dom_components/view/ComponentImageView.js
index 5caa08297..e216028ac 100644
--- a/test/specs/dom_components/view/ComponentImageView.js
+++ b/test/specs/dom_components/view/ComponentImageView.js
@@ -8,7 +8,7 @@ describe('ComponentImageView', () => {
   beforeEach(() => {
     model = new Component();
     view = new ComponentImageView({
-      model
+      model,
     });
     document.body.innerHTML = '<div id="fixtures"></div>';
     document.body.querySelector('#fixtures').appendChild(view.render().el);
diff --git a/test/specs/modal/view/ModalView.js b/test/specs/modal/view/ModalView.js
index 3d473861f..b6156814c 100644
--- a/test/specs/modal/view/ModalView.js
+++ b/test/specs/modal/view/ModalView.js
@@ -9,7 +9,7 @@ describe('ModalView', () => {
   beforeEach(() => {
     model = new Modal();
     view = new ModalView({
-      model
+      model,
     });
     document.body.innerHTML = '<div id="fixtures"></div>';
     document.body.querySelector('#fixtures').appendChild(view.render().el);
diff --git a/test/specs/panels/e2e/PanelsE2e.js b/test/specs/panels/e2e/PanelsE2e.js
index 1bf061f91..f893d2b26 100644
--- a/test/specs/panels/e2e/PanelsE2e.js
+++ b/test/specs/panels/e2e/PanelsE2e.js
@@ -13,7 +13,7 @@ describe('E2E tests', () => {
     obj = grapesjs;
     config = {
       container: '#' + editorName,
-      storageManager: { autoload: 0, type: 'none' }
+      storageManager: { autoload: 0, type: 'none' },
     };
     fixture = $('<div id="' + editorName + '"></div>');
     fixture.empty().appendTo(fixtures);
@@ -38,9 +38,9 @@ describe('E2E tests', () => {
           run(ed, caller) {
             ed.testValue = 'testValue';
             caller.set('active', false);
-          }
-        }
-      ]
+          },
+        },
+      ],
     };
     config.panels = {
       defaults: [
@@ -50,11 +50,11 @@ describe('E2E tests', () => {
             {
               id: 'button-test',
               className: 'fa fa-smile-o',
-              command: commandId
-            }
-          ]
-        }
-      ]
+              command: commandId,
+            },
+          ],
+        },
+      ],
     };
     var editor = obj.init(config);
     editor.testValue = '';
diff --git a/test/specs/panels/model/PanelModels.js b/test/specs/panels/model/PanelModels.js
index 40630c828..2d7b87aa3 100644
--- a/test/specs/panels/model/PanelModels.js
+++ b/test/specs/panels/model/PanelModels.js
@@ -23,7 +23,7 @@ describe('Button', () => {
 
   test('Init with other buttons inside correctly', () => {
     obj = new Button({
-      buttons: [{}]
+      buttons: [{}],
     });
     expect(obj.get('buttons') instanceof Buttons).toEqual(true);
     expect(obj.get('buttons').length).toEqual(1);
@@ -110,7 +110,7 @@ describe('Panel', () => {
 
   test('Init with buttons inside correctly', () => {
     obj = new Panel({
-      buttons: [{}]
+      buttons: [{}],
     });
     expect(obj.get('buttons') instanceof Buttons).toEqual(true);
     expect(obj.get('buttons').length).toEqual(1);
diff --git a/test/specs/panels/view/ButtonView.js b/test/specs/panels/view/ButtonView.js
index 4f1f5bb80..dcf2a4c91 100644
--- a/test/specs/panels/view/ButtonView.js
+++ b/test/specs/panels/view/ButtonView.js
@@ -10,7 +10,7 @@ describe('ButtonView', () => {
   beforeEach(() => {
     model = new Button({ command: 'fake-command' });
     view = new ButtonView({
-      model: model
+      model: model,
     });
     document.body.innerHTML = '<div id="fixtures"></div>';
     fixtures = document.body.querySelector('#fixtures');
@@ -22,9 +22,7 @@ describe('ButtonView', () => {
   });
 
   test('Button empty', () => {
-    expect(fixtures.innerHTML).toEqual(
-      '<span class="' + btnClass + '"></span>'
-    );
+    expect(fixtures.innerHTML).toEqual('<span class="' + btnClass + '"></span>');
   });
 
   test('Update class', () => {
@@ -34,7 +32,7 @@ describe('ButtonView', () => {
 
   test('Update attributes', () => {
     model.set('attributes', {
-      'data-test': 'test-value'
+      'data-test': 'test-value',
     });
     expect(view.el.getAttribute('data-test')).toEqual('test-value');
   });
diff --git a/test/specs/panels/view/ButtonsView.js b/test/specs/panels/view/ButtonsView.js
index 19976542c..9022a5647 100644
--- a/test/specs/panels/view/ButtonsView.js
+++ b/test/specs/panels/view/ButtonsView.js
@@ -9,7 +9,7 @@ describe('ButtonsView', () => {
   beforeEach(() => {
     model = new Buttons([]);
     view = new ButtonsView({
-      collection: model
+      collection: model,
     });
     document.body.innerHTML = '<div id="fixtures"></div>';
     fixtures = document.body.querySelector('#fixtures');
diff --git a/test/specs/panels/view/PanelView.js b/test/specs/panels/view/PanelView.js
index de21409e2..3ed18179d 100644
--- a/test/specs/panels/view/PanelView.js
+++ b/test/specs/panels/view/PanelView.js
@@ -9,7 +9,7 @@ describe('PanelView', () => {
   beforeEach(() => {
     model = new Panel();
     view = new PanelView({
-      model
+      model,
     });
     document.body.innerHTML = '<div id="fixtures"></div>';
     fixtures = document.body.querySelector('#fixtures');
@@ -53,10 +53,10 @@ describe('PanelView', () => {
   describe('Init with options', () => {
     beforeEach(() => {
       model = new Panel({
-        buttons: [{}]
+        buttons: [{}],
       });
       view = new PanelView({
-        model
+        model,
       });
       document.body.innerHTML = '<div id="fixtures"></div>';
       fixtures = document.body.querySelector('#fixtures');
diff --git a/test/specs/panels/view/PanelsView.js b/test/specs/panels/view/PanelsView.js
index b2ef9f60f..b9f3c5547 100644
--- a/test/specs/panels/view/PanelsView.js
+++ b/test/specs/panels/view/PanelsView.js
@@ -10,7 +10,7 @@ describe('PanelsView', () => {
   beforeEach(() => {
     model = new Panels([]);
     view = new PanelsView({
-      collection: model
+      collection: model,
     });
     document.body.innerHTML = '<div id="fixtures"></div>';
     fixtures = document.body.querySelector('#fixtures');
diff --git a/test/specs/selector_manager/e2e/ClassManager.js b/test/specs/selector_manager/e2e/ClassManager.js
index 11da1f490..2c568e9ae 100644
--- a/test/specs/selector_manager/e2e/ClassManager.js
+++ b/test/specs/selector_manager/e2e/ClassManager.js
@@ -9,14 +9,13 @@ describe('E2E tests', () => {
 
   describe('Interaction with Components', () => {
     beforeEach(() => {
-      document.body.innerHTML =
-        '<div id="fixtures"><div id="SelectorManager-fixture"></div></div>';
+      document.body.innerHTML = '<div id="fixtures"><div id="SelectorManager-fixture"></div></div>';
       fixtures = document.body.firstChild;
       gjs = grapesjs.init({
         stylePrefix: '',
         storageManager: { autoload: 0, type: 0 },
         assetManager: { storageType: 'none' },
-        container: '#SelectorManager-fixture'
+        container: '#SelectorManager-fixture',
       });
       components = gjs.getComponents();
       module = gjs.Selectors;
@@ -34,18 +33,13 @@ describe('E2E tests', () => {
       gjs.select(model);
       tagEl.addNewTag('test');
       expect(model.get('classes').length).toEqual(1);
-      expect(
-        model
-          .get('classes')
-          .at(0)
-          .get('name')
-      ).toEqual('test');
+      expect(model.get('classes').at(0).get('name')).toEqual('test');
     });
 
     test('Classes from components are correctly imported inside main container', () => {
       var model = components.add([
         { classes: ['test11', 'test12', 'test13'] },
-        { classes: ['test11', 'test22', 'test22'] }
+        { classes: ['test11', 'test22', 'test22'] },
       ]);
       expect(gjs.editor.get('SelectorManager').getAll().length).toEqual(4);
     });
@@ -53,10 +47,7 @@ describe('E2E tests', () => {
     test('Class imported into component is the same model from main container', () => {
       var model = components.add({ classes: ['test1'] });
       var clModel = model.get('classes').at(0);
-      var clModel2 = gjs.editor
-        .get('SelectorManager')
-        .getAll()
-        .at(0);
+      var clModel2 = gjs.editor.get('SelectorManager').getAll().at(0);
       expect(clModel).toEqual(clModel2);
     });
 
@@ -71,22 +62,14 @@ describe('E2E tests', () => {
       expect(sels.at(0).get('name')).toEqual('test');
       // One only selector added
       expect(module.getAll().length).toEqual(1);
-      expect(
-        module
-          .getAll()
-          .at(0)
-          .get('name')
-      ).toEqual('test');
+      expect(module.getAll().at(0).get('name')).toEqual('test');
     });
 
     test('Removing from container removes also from selected component', () => {
       var model = components.add({});
       gjs.editor.setSelected(model);
       tagEl.addNewTag('test');
-      tagEl
-        .getClasses()
-        .find('.tag #close')
-        .trigger('click');
+      tagEl.getClasses().find('.tag #close').trigger('click');
       setTimeout(() => expect(model.get('classes').length).toEqual(0));
     });
 
@@ -117,8 +100,8 @@ describe('E2E tests', () => {
           { name: 'test9', type: Selector.TYPE_ID, protected: 1 },
           { label: 'test10' },
           { label: 'test11', type: Selector.TYPE_ID },
-          { label: 'test12', protected: 1 }
-        ]
+          { label: 'test12', protected: 1 },
+        ],
       });
 
       const modelTr = JSON.parse(JSON.stringify(model));
@@ -135,7 +118,7 @@ describe('E2E tests', () => {
         { name: 'test9', type: Selector.TYPE_ID, protected: 1 },
         'test10',
         '#test11',
-        { name: 'test12', protected: 1 }
+        { name: 'test12', protected: 1 },
       ]);
     });
   });
diff --git a/test/specs/selector_manager/index.js b/test/specs/selector_manager/index.js
index e6d464231..fca199aeb 100644
--- a/test/specs/selector_manager/index.js
+++ b/test/specs/selector_manager/index.js
@@ -28,7 +28,7 @@ describe('SelectorManager', () => {
     test('Able to add default selectors', () => {
       var cm = new SelectorManager().init({
         em,
-        selectors: ['test1', 'test2', 'test3']
+        selectors: ['test1', 'test2', 'test3'],
       });
       expect(cm.getAll().length).toEqual(3);
     });
@@ -81,16 +81,7 @@ describe('SelectorManager', () => {
     });
 
     test('Add multiple selectors', () => {
-      const cls = [
-        '.test1',
-        'test1',
-        '.test2',
-        '.test2',
-        '#test3',
-        'test3',
-        'test3',
-        '#test3'
-      ];
+      const cls = ['.test1', 'test1', '.test2', '.test2', '#test3', 'test3', 'test3', '#test3'];
       const result = obj.add(cls);
       expect(Array.isArray(result)).toEqual(true);
       const concat = obj
@@ -99,30 +90,10 @@ describe('SelectorManager', () => {
         .join('');
       expect(concat).toEqual('.test1.test2#test3.test3');
       expect(obj.getAll().length).toEqual(4);
-      expect(
-        obj
-          .getAll()
-          .at(0)
-          .getFullName()
-      ).toEqual('.test1');
-      expect(
-        obj
-          .getAll()
-          .at(1)
-          .getFullName()
-      ).toEqual('.test2');
-      expect(
-        obj
-          .getAll()
-          .at(2)
-          .getFullName()
-      ).toEqual('#test3');
-      expect(
-        obj
-          .getAll()
-          .at(3)
-          .getFullName()
-      ).toEqual('.test3');
+      expect(obj.getAll().at(0).getFullName()).toEqual('.test1');
+      expect(obj.getAll().at(1).getFullName()).toEqual('.test2');
+      expect(obj.getAll().at(2).getFullName()).toEqual('#test3');
+      expect(obj.getAll().at(3).getFullName()).toEqual('.test3');
 
       expect(obj.get(cls).length).toEqual(4);
       expect(
diff --git a/test/specs/selector_manager/model/SelectorModels.js b/test/specs/selector_manager/model/SelectorModels.js
index 74c2ec486..b81f29979 100644
--- a/test/specs/selector_manager/model/SelectorModels.js
+++ b/test/specs/selector_manager/model/SelectorModels.js
@@ -67,7 +67,7 @@ describe('Selectors', () => {
     expect(
       obj.getFullName({
         combination: true,
-        array: true
+        array: true,
       })
     ).toEqual(['.a', '.a.b', '.b']);
 
@@ -81,7 +81,7 @@ describe('Selectors', () => {
     expect(
       obj.getFullName({
         combination: true,
-        array: true
+        array: true,
       })
     ).toEqual(['.a', '.a.b', '.a.b.c', '.a.c', '.b', '.b.c', '.c']);
   });
@@ -91,7 +91,7 @@ describe('Selectors', () => {
     expect(
       obj.getFullName({
         combination: true,
-        array: true
+        array: true,
       })
     ).toEqual([
       '.a',
@@ -108,7 +108,7 @@ describe('Selectors', () => {
       '.b.d',
       '.c',
       '.c.d',
-      '.d'
+      '.d',
     ]);
   });
 });
diff --git a/test/specs/style_manager/view/PropertyColorView.js b/test/specs/style_manager/view/PropertyColorView.js
index 8769e8583..e359c45ee 100644
--- a/test/specs/style_manager/view/PropertyColorView.js
+++ b/test/specs/style_manager/view/PropertyColorView.js
@@ -80,7 +80,10 @@ describe('PropertyColorView', () => {
 
   test('Update model on input change', () => {
     view.getInputEl().value = propValue;
-    view.inputValueChanged({ target: { value: propValue }, stopPropagation() {} });
+    view.inputValueChanged({
+      target: { value: propValue },
+      stopPropagation() {},
+    });
     expect(view.model.get('value')).toEqual(propValue);
   });
 
diff --git a/test/specs/style_manager/view/PropertyRadioView.js b/test/specs/style_manager/view/PropertyRadioView.js
index 40009fd2e..a40174fc3 100644
--- a/test/specs/style_manager/view/PropertyRadioView.js
+++ b/test/specs/style_manager/view/PropertyRadioView.js
@@ -92,7 +92,10 @@ describe('PropertyRadioView', () => {
 
   test('Update model on input change', () => {
     view.setValue(propValue);
-    view.inputValueChanged({ target: { value: propValue }, stopPropagation() {} });
+    view.inputValueChanged({
+      target: { value: propValue },
+      stopPropagation() {},
+    });
     expect(view.model.get('value')).toEqual(propValue);
   });
 
diff --git a/test/specs/style_manager/view/PropertySelectView.js b/test/specs/style_manager/view/PropertySelectView.js
index ae239a656..aa6c3aa7c 100644
--- a/test/specs/style_manager/view/PropertySelectView.js
+++ b/test/specs/style_manager/view/PropertySelectView.js
@@ -89,7 +89,10 @@ describe('PropertySelectView', () => {
 
   test('Update model on input change', () => {
     view.getInputEl().value = propValue;
-    view.inputValueChanged({ target: { value: propValue }, stopPropagation() {} });
+    view.inputValueChanged({
+      target: { value: propValue },
+      stopPropagation() {},
+    });
     expect(view.model.get('value')).toEqual(propValue);
   });
 
diff --git a/test/specs/style_manager/view/PropertyView.js b/test/specs/style_manager/view/PropertyView.js
index 72aba93ec..9d09436a2 100644
--- a/test/specs/style_manager/view/PropertyView.js
+++ b/test/specs/style_manager/view/PropertyView.js
@@ -65,7 +65,10 @@ describe('PropertyView', () => {
 
   test('Update model on input change', () => {
     view.getInputEl().value = propValue;
-    view.inputValueChanged({ target: { value: propValue }, stopPropagation() {} });
+    view.inputValueChanged({
+      target: { value: propValue },
+      stopPropagation() {},
+    });
     expect(view.model.get('value')).toEqual(propValue);
   });
 
diff --git a/test/specs/style_manager/view/SectorsView.js b/test/specs/style_manager/view/SectorsView.js
index eb26d56fc..0b9fe9df7 100644
--- a/test/specs/style_manager/view/SectorsView.js
+++ b/test/specs/style_manager/view/SectorsView.js
@@ -9,7 +9,7 @@ describe('SectorsView', () => {
   beforeEach(() => {
     model = new Sectors([]);
     view = new SectorsView({
-      collection: model
+      collection: model,
     });
     document.body.innerHTML = '<div id="fixtures"></div>';
     fixtures = document.body.firstChild;
diff --git a/test/specs/trait_manager/model/TraitsModel.js b/test/specs/trait_manager/model/TraitsModel.js
index 1a844e037..703395cf6 100644
--- a/test/specs/trait_manager/model/TraitsModel.js
+++ b/test/specs/trait_manager/model/TraitsModel.js
@@ -10,7 +10,7 @@ describe('TraitModels', () => {
     target = new Component();
     obj = new Trait({
       name: modelName,
-      target
+      target,
     });
   });
 
diff --git a/test/specs/trait_manager/view/TraitsView.js b/test/specs/trait_manager/view/TraitsView.js
index c6b3b47ff..324333d03 100644
--- a/test/specs/trait_manager/view/TraitsView.js
+++ b/test/specs/trait_manager/view/TraitsView.js
@@ -12,10 +12,10 @@ describe('TraitView', () => {
     target = new Component();
     model = new Trait({
       name: modelName,
-      target
+      target,
     });
     obj = new TraitView({
-      model
+      model,
     });
   });
 
@@ -45,11 +45,11 @@ describe('TraitView', () => {
     var target2 = new Component();
     var model1 = new Trait({
       name: modelName,
-      target: target1
+      target: target1,
     });
     var model2 = new Trait({
       name: modelName,
-      target: target2
+      target: target2,
     });
     var obj1 = new TraitView({ model: model1 });
     var obj2 = new TraitView({ model: model2 });
diff --git a/test/test_utils.js b/test/test_utils.js
index 039686ef2..415c73b29 100644
--- a/test/test_utils.js
+++ b/test/test_utils.js
@@ -11,7 +11,7 @@ module.exports = {
       },
       getDb() {
         return db;
-      }
+      },
     };
-  }
+  },
 };

From 9dd879ac232e2e4d0b9baf46f111a8124f97920a Mon Sep 17 00:00:00 2001
From: Alex Ritter <alex@undo.app>
Date: Fri, 13 May 2022 11:15:39 +0200
Subject: [PATCH 4/5] run format script

---
 src/dom_components/model/ToolbarButton.js | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/dom_components/model/ToolbarButton.js b/src/dom_components/model/ToolbarButton.js
index 74eaf7da1..c8703ee76 100644
--- a/src/dom_components/model/ToolbarButton.js
+++ b/src/dom_components/model/ToolbarButton.js
@@ -1,8 +1,10 @@
 import Backbone from 'backbone';
 
 export default class ToolbarButton extends Backbone.Model {
-  defaults = {
-    command: '',
-    attributes: {},
-  };
+  defaults() {
+    return {
+      command: '',
+      attributes: {},
+    };
+  }
 }

From f0c7d9920be2f574b6791446ce557674a62cd668 Mon Sep 17 00:00:00 2001
From: Alex Ritter <alex@undo.app>
Date: Fri, 13 May 2022 11:21:54 +0200
Subject: [PATCH 5/5] Change to the requested format

---
 src/dom_components/view/ComponentFrameView.js |  4 +++-
 src/dom_components/view/ComponentImageView.js | 21 +++++++++++--------
 src/dom_components/view/ComponentLabelView.js |  4 +++-
 src/dom_components/view/ComponentMapView.js   |  8 +++++--
 .../view/ComponentScriptView.js               |  8 +++++--
 src/dom_components/view/ComponentTextView.js  | 10 +++++----
 src/dom_components/view/ComponentVideoView.js |  8 +++++--
 7 files changed, 42 insertions(+), 21 deletions(-)

diff --git a/src/dom_components/view/ComponentFrameView.js b/src/dom_components/view/ComponentFrameView.js
index 437b6949c..580982df7 100644
--- a/src/dom_components/view/ComponentFrameView.js
+++ b/src/dom_components/view/ComponentFrameView.js
@@ -2,7 +2,9 @@ import ComponentView from './ComponentView';
 import { createEl, find, attrUp } from 'utils/dom';
 
 export default class ComponentFrameView extends ComponentView.extend {
-  tagName = 'div';
+  tagName() {
+    return 'div';
+  }
 
   initialize(...args) {
     ComponentView.prototype.initialize.apply(this, args);
diff --git a/src/dom_components/view/ComponentImageView.js b/src/dom_components/view/ComponentImageView.js
index e80c0b79f..ae67f3c1c 100644
--- a/src/dom_components/view/ComponentImageView.js
+++ b/src/dom_components/view/ComponentImageView.js
@@ -2,15 +2,18 @@ import { isString } from 'underscore';
 import ComponentView from './ComponentView';
 
 export default class ComponentImageView extends ComponentView {
-  tagName = 'img';
-
-  events = {
-    dblclick: 'onActive',
-    click: 'initResize',
-    error: 'onError',
-    load: 'onLoad',
-    dragstart: 'noDrag',
-  };
+  tagName() {
+    return 'img';
+  }
+  events() {
+    return {
+      dblclick: 'onActive',
+      click: 'initResize',
+      error: 'onError',
+      load: 'onLoad',
+      dragstart: 'noDrag',
+    };
+  }
 
   initialize(o) {
     ComponentView.prototype.initialize.apply(this, arguments);
diff --git a/src/dom_components/view/ComponentLabelView.js b/src/dom_components/view/ComponentLabelView.js
index 5593309b7..ae32a7929 100644
--- a/src/dom_components/view/ComponentLabelView.js
+++ b/src/dom_components/view/ComponentLabelView.js
@@ -1,5 +1,7 @@
 import ComponentLinkView from './ComponentLinkView';
 
 export default class ComponentLabelView extends ComponentLinkView {
-  tagName = 'span'; // Avoid Firefox bug with label editing #2332
+  tagName() {
+    return 'span';
+  } // Avoid Firefox bug with label editing #2332
 }
diff --git a/src/dom_components/view/ComponentMapView.js b/src/dom_components/view/ComponentMapView.js
index e5227b884..c0ecb0057 100644
--- a/src/dom_components/view/ComponentMapView.js
+++ b/src/dom_components/view/ComponentMapView.js
@@ -1,9 +1,13 @@
 import ComponentView from './ComponentImageView';
 
 export default class ComponentMapView extends ComponentView {
-  tagName = 'div';
+  tagName() {
+    return 'div';
+  }
 
-  events = {};
+  events() {
+    return {};
+  }
 
   initialize(o) {
     ComponentView.prototype.initialize.apply(this, arguments);
diff --git a/src/dom_components/view/ComponentScriptView.js b/src/dom_components/view/ComponentScriptView.js
index 99061285b..8fc9200f2 100644
--- a/src/dom_components/view/ComponentScriptView.js
+++ b/src/dom_components/view/ComponentScriptView.js
@@ -1,9 +1,13 @@
 import ComponentView from './ComponentImageView';
 
 export default class ComponentScriptView extends ComponentView {
-  tagName = 'script';
+  tagName() {
+    return 'script';
+  }
 
-  events = {};
+  events() {
+    return {};
+  }
 
   render() {
     const { model, em } = this;
diff --git a/src/dom_components/view/ComponentTextView.js b/src/dom_components/view/ComponentTextView.js
index 5c5a97906..02a5b5eb6 100644
--- a/src/dom_components/view/ComponentTextView.js
+++ b/src/dom_components/view/ComponentTextView.js
@@ -5,10 +5,12 @@ import { bindAll } from 'underscore';
 const compProt = ComponentView.prototype;
 
 export default class ComponentTextView extends ComponentView {
-  events = {
-    dblclick: 'onActive',
-    input: 'onInput',
-  };
+  events() {
+    return {
+      dblclick: 'onActive',
+      input: 'onInput',
+    };
+  }
 
   initialize(o) {
     compProt.initialize.apply(this, arguments);
diff --git a/src/dom_components/view/ComponentVideoView.js b/src/dom_components/view/ComponentVideoView.js
index e62d0b070..3f1b75b10 100644
--- a/src/dom_components/view/ComponentVideoView.js
+++ b/src/dom_components/view/ComponentVideoView.js
@@ -2,9 +2,13 @@ import ComponentView from './ComponentImageView';
 import OComponentView from './ComponentView';
 
 export default class ComponentVideoView extends ComponentView {
-  tagName = 'div';
+  tagName() {
+    return 'div';
+  }
 
-  events = {};
+  events() {
+    return {};
+  }
 
   initialize(o) {
     OComponentView.prototype.initialize.apply(this, arguments);