diff --git a/index.d.ts b/index.d.ts
index 45a714640..7e2799603 100644
--- a/index.d.ts
+++ b/index.d.ts
@@ -1,1830 +1,1825 @@
 declare namespace Backbone {
-    interface ModelProperties {}
-
-    class Model<T extends ModelProperties> {
-      constructor(attr?:T, opt?:any)
-      attributes : T
-      collection: Collection<this>
-      cid: string
-      get<K extends keyof T>(prop:K) : T[K]
-      set<K extends keyof T>(prop:K , val:T[K]) : void
-      defaults() : T
-      on(eventName: string, callback: (...args: any[]) => void)
-      toJSON(options?: any): any
-    }
-
-    class Collection<TModel extends Model<ModelProperties>> {
-      models: TModel[];
-      length: number;
-
-      add(model: {} | TModel): TModel;
-      add(models: Array<{} | TModel>): TModel[];
-      find(iterator: (item : TModel) => boolean, context?: any): TModel;
-      remove(model: {} | TModel): TModel;
-      remove(models: Array<{} | TModel>): TModel[];
-      reset(models?: Array<{} | TModel>): TModel[];
-    }
-
-    interface GenericModel extends Model<{}> {}
+  interface ModelProperties {}
+
+  class Model<T extends ModelProperties> {
+    constructor(attr?: T, opt?: any);
+    attributes: T;
+    collection: Collection<this>;
+    cid: string;
+    get<K extends keyof T>(prop: K): T[K];
+    set<K extends keyof T>(prop: K, val: T[K]): void;
+    defaults(): T;
+    on(eventName: string, callback: (...args: any[]) => void): this;
+    toJSON(options?: any): any;
   }
 
-  declare module grapesjs {
-    interface EditorConfig {
-      /** Selector which indicates where render the editor */
-      container?: string | HTMLElement
+  class Collection<TModel extends Model<ModelProperties>> {
+    models: TModel[];
+    length: number;
 
-      /** If true, auto-render the content */
-      autorender? : boolean
+    add(model: {} | TModel): TModel;
+    add(models: Array<{} | TModel>): TModel[];
+    find(iterator: (item: TModel) => boolean, context?: any): TModel;
+    remove(model: {} | TModel): TModel;
+    remove(models: Array<{} | TModel>): TModel[];
+    reset(models?: Array<{} | TModel>): TModel[];
+  }
 
-      /** Array of plugins to execute on start */
-      plugins? : []
+  interface GenericModel extends Model<{}> {}
+}
 
-      /** Custom options for plugins */
-      pluginsOpts?: Record<string, any>
+declare module grapesjs {
+  interface EditorConfig {
+    /** Selector which indicates where render the editor */
+    container?: string | HTMLElement;
 
-      /** Init headless editor */
-      headless?: boolean
+    /** If true, auto-render the content */
+    autorender?: boolean;
 
-      /** Style prefix */
-      stylePrefix?: string
+    /** Array of plugins to execute on start */
+    plugins?: any[];
 
-      /** HTML string or object of components */
-      components?: string,
+    /** Custom options for plugins */
+    pluginsOpts?: Record<string, any>;
 
-      /** CSS string or object of rules */
-      style?: string,
+    /** Init headless editor */
+    headless?: boolean;
 
-      /** If true, will fetch HTML and CSS from selected container */
-      fromElement?: boolean,
+    /** Style prefix */
+    stylePrefix?: string;
 
-      /** Show an alert before unload the page with unsaved changes */
-      noticeOnUnload?: number,
+    /** HTML string or object of components */
+    components?: string;
 
-      /** Show paddings and margins */
-      showOffsets?: boolean,
+    /** CSS string or object of rules */
+    style?: string;
 
-      /** Show paddings and margins on selected component */
-      showOffsetsSelected?: boolean,
+    /** If true, will fetch HTML and CSS from selected container */
+    fromElement?: boolean;
 
-      /** On creation of a new Component (via object), if the 'style' attribute is not
-       * empty, all those roles will be moved in its new class */
-      forceClass?: boolean,
+    /** Show an alert before unload the page with unsaved changes */
+    noticeOnUnload?: number;
 
-      /** Height for the editor container */
-      height?: string,
+    /** Show paddings and margins */
+    showOffsets?: boolean;
 
-      /** Width for the editor container */
-      width?: string,
+    /** Show paddings and margins on selected component */
+    showOffsetsSelected?: boolean;
 
-      /** Type of logs to print with the logger (by default is used the devtool console).
-       * Available by default: debug, info, warning, error
-       * You can use `false` to disable all of them or `true` to print all of them */
-      log?: ('debug'|'info'|'warning'|'error')[]
+    /** On creation of a new Component (via object), if the 'style' attribute is not
+     * empty, all those roles will be moved in its new class */
+    forceClass?: boolean;
 
-      /** By default Grapes injects base CSS into the canvas. For example, it sets body margin to 0
-       * and sets a default background color of white. This CSS is desired in most cases.
-       * use this property if you wish to overwrite the base CSS to your own CSS. This is most
-       * useful if for example your template is not based off a document with 0 as body margin. */
-      baseCss?: string,
+    /** Height for the editor container */
+    height?: string;
 
-      /** CSS that could only be seen (for instance, inside the code viewer) */
-      protectedCss?: string,
+    /** Width for the editor container */
+    width?: string;
 
-      /** CSS for the iframe which containing the canvas, useful if you need to custom something inside
-       * (eg. the style of the selected component) */
-      canvasCss?: string,
+    /** Type of logs to print with the logger (by default is used the devtool console).
+     * Available by default: debug, info, warning, error
+     * You can use `false` to disable all of them or `true` to print all of them */
+    log?: ("debug" | "info" | "warning" | "error")[];
 
-      /** Default command */
-      defaultCommand?: string,
+    /** By default Grapes injects base CSS into the canvas. For example, it sets body margin to 0
+     * and sets a default background color of white. This CSS is desired in most cases.
+     * use this property if you wish to overwrite the base CSS to your own CSS. This is most
+     * useful if for example your template is not based off a document with 0 as body margin. */
+    baseCss?: string;
 
-      /** Show a toolbar when the component is selected */
-      showToolbar?: boolean,
+    /** CSS that could only be seen (for instance, inside the code viewer) */
+    protectedCss?: string;
 
-      // Allow script tag importing
-      // @deprecated in favor of `config.parser.optionsHtml.allowScripts`
-      // allowScripts: 0,
+    /** CSS for the iframe which containing the canvas, useful if you need to custom something inside
+     * (eg. the style of the selected component) */
+    canvasCss?: string;
 
-      /** If true render a select of available devices */
-      showDevices?: boolean,
+    /** Default command */
+    defaultCommand?: string;
 
-      /** When enabled, on device change media rules won't be created */
-      devicePreviewMode?: boolean,
+    /** Show a toolbar when the component is selected */
+    showToolbar?: boolean;
 
-      /** The condition to use for media queries, eg. 'max-width'
-       * Comes handy for mobile-first cases */
-      mediaCondition?: string,
+    // Allow script tag importing
+    // @deprecated in favor of `config.parser.optionsHtml.allowScripts`
+    // allowScripts: 0,
 
-      /** Starting tag for variable inside scripts in Components */
-      tagVarStart?: string,
+    /** If true render a select of available devices */
+    showDevices?: boolean;
 
-      /** Ending tag for variable inside scripts in Components */
-      tagVarEnd?: string,
+    /** When enabled, on device change media rules won't be created */
+    devicePreviewMode?: boolean;
 
-      /** When false, removes empty text nodes when parsed, unless they contain a space */
-      keepEmptyTextNodes?: boolean,
+    /** The condition to use for media queries, eg. 'max-width'
+     * Comes handy for mobile-first cases */
+    mediaCondition?: string;
 
-      /** Return JS of components inside HTML from 'editor.getHtml()' */
-      jsInHtml?: boolean,
+    /** Starting tag for variable inside scripts in Components */
+    tagVarStart?: string;
 
-      /** Enable native HTML5 drag and drop */
-      nativeDnD?: boolean,
+    /** Ending tag for variable inside scripts in Components */
+    tagVarEnd?: string;
 
-      /** Enable multiple selection */
-      multipleSelection?: boolean,
+    /** When false, removes empty text nodes when parsed, unless they contain a space */
+    keepEmptyTextNodes?: boolean;
 
-      /** Show the wrapper component in the final code, eg. in editor.getHtml() */
-      exportWrapper?: boolean,
+    /** Return JS of components inside HTML from 'editor.getHtml()' */
+    jsInHtml?: boolean;
 
-      /** The wrapper, if visible, will be shown as a `<body>` */
-      wrapperIsBody?: boolean,
+    /** Enable native HTML5 drag and drop */
+    nativeDnD?: boolean;
 
-      /** Pass default available options wherever `editor.getHtml()` is called */
-      optsHtml?: Record<string, any>,
+    /** Enable multiple selection */
+    multipleSelection?: boolean;
 
-      /** Pass default available options wherever `editor.getCss()` is called */
-      optsCss?: Record<string, any>,
+    /** Show the wrapper component in the final code, eg. in editor.getHtml() */
+    exportWrapper?: boolean;
 
-      /** Usually when you update the `style` of the component this changes the
-       * element's `style` attribute. Unfortunately, inline styling doesn't allow
-       * use of media queries (@media) or even pseudo selectors (eg. :hover).
-       * When `avoidInlineStyle` is true all styles are inserted inside the css rule
-       * @deprecated Don't use this option, we don't support inline styling anymore */
-      avoidInlineStyle?: boolean,
+    /** The wrapper, if visible, will be shown as a `<body>` */
+    wrapperIsBody?: boolean;
 
-      /** Avoid default properties from storable JSON data, like `components` and `styles`.
-       * With this option enabled your data will be smaller (usefull if need to
-       * save some storage space) */
-      avoidDefaults?: boolean,
+    /** Pass default available options wherever `editor.getHtml()` is called */
+    optsHtml?: Record<string, any>;
 
-      /** (experimental)
-       * The structure of components is always on the screen but it's not the same
-       * for style rules. When you delete a component you might leave a lot of styles
-       * which will never be used again, therefore they might be removed.
-       * With this option set to true, styles not used from the CSS generator (so in
-       * any case where `CssGenerator.build` is used) will be removed automatically.
-       * But be careful, not always leaving the style not used mean you wouldn't
-       * use it later, but this option comes really handy when deal with big templates. */
-      clearStyles?: boolean,
+    /** Pass default available options wherever `editor.getCss()` is called */
+    optsCss?: Record<string, any>;
 
-      /** Specify the global drag mode of components. By default, components are moved
-       * following the HTML flow. Two other options are available:
-       * 'absolute' - Move components absolutely (design tools way)
-       * 'translate' - Use translate CSS from transform property
-       * To get more about this feature read: https://github.com/artf/grapesjs/issues/1936 */
-      dragMode?: boolean,
+    /** Usually when you update the `style` of the component this changes the
+     * element's `style` attribute. Unfortunately, inline styling doesn't allow
+     * use of media queries (@media) or even pseudo selectors (eg. :hover).
+     * When `avoidInlineStyle` is true all styles are inserted inside the css rule
+     * @deprecated Don't use this option, we don't support inline styling anymore */
+    avoidInlineStyle?: boolean;
 
-      /** When the editor is placed in a scrollable container (eg. modals) this might
-       * cause elements inside the canvas (eg. floating toolbars) to be misaligned.
-       * To avoid that, you can specify an array of DOM elements on which their scroll will
-       * trigger the canvas update.
-       * Be default, if the array is empty, the first parent element will be appended.
-       * listenToEl: [document.querySelector('#scrollable-el')], */
-      listenToEl?: HTMLElement[],
-
-      /** Import asynchronously CSS to use as icons */
-      cssIcons?: string,
-
-      /** Dom element */
-      el?: string,
-
-      /** Configurations for I18n */
-      i18n?: Record<string, any>,
-
-      /** Configurations for Undo Manager */
-      undoManager?: Record<string, any> | boolean,
-
-      /** Configurations for Asset Manager */
-      assetManager?: AssetManagerConfig | boolean,
-
-      /** Configurations for Canvas */
-      canvas?: CanvasConfig | boolean,
-
-      /** Configurations for Layers */
-      layers?: Record<string, any> | boolean,
-
-      /** Configurations for Storage Manager */
-      storageManager?: StorageManagerConfig | boolean,
-
-      /** Configurations for Rich Text Editor */
-      richTextEditor?: RichTextEditorConfig | boolean,
-
-      /** Configurations for DomComponents */
-      domComponents?: DomComponentsConfig | boolean,
-
-      /** Configurations for Modal Dialog */
-      modal?: ModalConfig | boolean,
-
-      /** Configurations for Code Manager */
-      codeManager?: CodeManagerConfig | boolean,
-
-      /** Configurations for Panels */
-      panels?: PanelsConfig | boolean,
-
-      /** Configurations for Commands */
-      commands?: CommandsConfig | boolean,
-
-      /** Configurations for Css Composer */
-      cssComposer?: CssComposerConfig | boolean,
-
-      /** Configurations for Selector Manager */
-      selectorManager?: SelectorManagerConfig | boolean,
-
-      /** Configurations for Device Manager */
-      deviceManager?: DeviceManagerConfig | boolean,
-
-      /** Configurations for Style Manager */
-      styleManager?: StyleManagerConfig | boolean,
-
-      /** Configurations for Block Manager */
-      blockManager?: BlockManagerConfig | boolean,
-
-      /** Configurations for Trait Manager */
-      traitManager?: TraitManagerConfig | boolean,
-
-      /** Texts **/
-      textViewCode?: string,
-
-      /** Keep unused styles within the editor **/
-      keepUnusedStyles?: 0,
-    }
-
-    interface AssetManagerConfig {
-      assets?: Array<object>;
-      noAssets?: string;
-      stylePrefix?: string;
-      upload?: boolean;
-      uploadName?: string;
-      headers?: object;
-      params?: object;
-      credentials?: RequestCredentials;
-      multiUpload?: boolean;
-      autoAdd?: boolean;
-      uploadText?: string;
-      addBtnText?: string;
-      customFetch?: Function;
-      uploadFile?: Function;
-      embedAsBase64?: boolean;
-      handleAdd?: Function;
-      dropzone?: boolean;
-      openAssetsOnDrop?: number;
-      dropzoneContent?: string;
-      modalTitle?: string;
-      inputPlaceholder?: string;
-    }
-
-    interface CanvasConfig {
-      stylePrefix?: string;
-      scripts?: Array<string>;
-      styles?: Array<string>;
-      customBadgeLabel?: Function;
-      autoscrollLimit?: number;
-      notTextable?: Array<string>;
-    }
-
-    interface StyleManagerConfig {
-      stylePrefix?: string;
-      sectors?: Array<object>;
-      appendTo?: HTMLElement | string;
-      textNoElement?: string;
-      hideNotStylable?: boolean;
-      highlightChanged?: boolean;
-      highlightComputed?: boolean;
-      showComputed?: boolean;
-      clearProperties?: boolean;
-      avoidComputed?: Array<string>;
-    }
-
-    interface BlockManagerConfig {
-      appendTo?: HTMLElement | string;
-      blocks: Array<object>;
-    }
-
-    interface RichTextEditorConfig {
-      stylePrefix?: string;
-      adjustToolbar?: boolean;
-      actions?: Array<string>;
-    }
-
-    interface TraitManagerConfig {
-      stylePrefix?: string;
-      appendTo?: HTMLElement | string;
-      labelContainer?: string;
-      labelPlhText?: string;
-      labelPlhRef?: string;
-      optionsTarget?: Array<object>;
-      textNoElement?: string;
-    }
-
-    interface StorageManagerConfig {
-      id?: string;
-      autosave?: boolean;
-      autoload?: boolean;
-      type?: "local" | "remote";
-      stepsBeforeSave?: number;
-      storeComponents?: boolean;
-      storeStyles?: boolean;
-      storeHtml?: boolean;
-      storeCss?: boolean;
-      checkLocal?: boolean;
-      params?: object;
-      headers?: object;
-      urlStore?: string;
-      urlLoad?: string;
-      contentTypeJson?: boolean;
-      credentials?: RequestCredentials;
-
-      beforeSend(jqXHR: any, settings: object): void;
-      onComplete(jqXHR: any, status: any): void;
-    }
-
-    interface DomComponentsConfig {
-      stylePrefix?: string;
-      wrapperId?: string;
-      wrapperName?: string;
-      wrapper?: DomComponentsWrapperConfig;
-      components?: Array<object>;
-      imageCompClass?: string;
-      oAssetsOnCreate?: boolean;
-      storeWrapper?: boolean;
-      voidElements?: Array<string>;
-    }
-
-    interface DomComponentsWrapperConfig {
-      removable?: boolean,
-      copyable?: boolean,
-      draggable?: boolean,
-      // TODO: Type custom blocks and components
-      components?: Array<object>,
-      traits?: Array<object>,
-      stylable?: Array<string>
-    }
-
-    interface ModalConfig {
-      stylePrefix?: string;
-      title?: string;
-      content?: string;
-      backdrop?: boolean;
-    }
-
-    interface CodeManagerConfig {
-      stylePrefix?: string;
-      inlineCss?: boolean;
-    }
-
-    interface PanelsConfig {
-      stylePrefix?: string;
-      defaults?: Array<object>;
-      em?: object;
-      delayBtnsShow?: number;
-    }
-
-    interface CommandsConfig {
-      ESCAPE_KEY?: number;
-      stylePrefix?: string;
-      defaults?: Array<object>;
-      em?: object;
-      firstCentered?: boolean;
-      newFixedH?: boolean;
-      minComponentH?: number;
-      minComponentW?: number;
-    }
-
-    interface CssComposerConfig {
-      stylePrefix?: string;
-      staticRules?: string;
-      rules?: Array<string>;
-    }
-
-    interface SelectorManagerConfig {
-      stylePrefix?: string;
-      appendTo?: HTMLElement | string;
-      selectors?: Array<string>;
-      label?: string;
-      statesLabel?: string;
-      selectedLabel?: string;
-      states?: Array<object>;
-    }
-
-    interface DeviceManagerConfig {
-      devices?: Array<object>;
-      deviceLabel?: string;
-    }
-
-    function init(config : EditorConfig) : Editor;
-
-    interface Trait extends Backbone.Model<TraitOptions> {
-      target : Component
-
-      /** Return all the properties */
-      props() : TraitOptions;
-      targetUpdated() : void;
-      getValue(): string;
-      getTargetValue(): string;
-      setTargetValue(value: any, opts: object) : void
-      setValueFromInput(value : any, final: boolean, opts: object) : void
-      /**
-       * Get the initial value of the trait
-       */
-      getInitValue() : string
-    }
-
-    type TraitType = 'text'
-      | 'number'
-      | 'checkbox'
-      | 'select'
-      | string
-
-    interface TraitOptions {
-      type: TraitType;
-      label: string,
-      name: string,
-      min?: string,
-      max?: string,
-      unit?: string,
-      step?: number,
-      value?: string,
-      target?: Component,
-      default?: string,
-      placeholder?: string,
-      changeProp?: number,
-      options?: SelectOption[]
-      [key: string]: any
-    }
-
-    interface PanelOptions {
-      id: string,
-      content: string,
-      visible: boolean,
-      buttons: Button[],
-    }
+    /** Avoid default properties from storable JSON data, like `components` and `styles`.
+     * With this option enabled your data will be smaller (usefull if need to
+     * save some storage space) */
+    avoidDefaults?: boolean;
 
-    interface Panel extends Backbone.Model<PanelOptions> {
+    /** (experimental)
+     * The structure of components is always on the screen but it's not the same
+     * for style rules. When you delete a component you might leave a lot of styles
+     * which will never be used again, therefore they might be removed.
+     * With this option set to true, styles not used from the CSS generator (so in
+     * any case where `CssGenerator.build` is used) will be removed automatically.
+     * But be careful, not always leaving the style not used mean you wouldn't
+     * use it later, but this option comes really handy when deal with big templates. */
+    clearStyles?: boolean;
 
-    }
+    /** Specify the global drag mode of components. By default, components are moved
+     * following the HTML flow. Two other options are available:
+     * 'absolute' - Move components absolutely (design tools way)
+     * 'translate' - Use translate CSS from transform property
+     * To get more about this feature read: https://github.com/artf/grapesjs/issues/1936 */
+    dragMode?: boolean;
 
-    interface Button extends Backbone.Model<ButtonOptions> {
+    /** When the editor is placed in a scrollable container (eg. modals) this might
+     * cause elements inside the canvas (eg. floating toolbars) to be misaligned.
+     * To avoid that, you can specify an array of DOM elements on which their scroll will
+     * trigger the canvas update.
+     * Be default, if the array is empty, the first parent element will be appended.
+     * listenToEl: [document.querySelector('#scrollable-el')], */
+    listenToEl?: HTMLElement[];
 
-    }
+    /** Import asynchronously CSS to use as icons */
+    cssIcons?: string;
 
-    interface ButtonOptions {
-      id: string,
-      label: string,
-      tagName: 'span',
-      className: string,
-      command: string | ((editor : Editor, opts? : any) => void),
-      context: string,
-      buttons: any[],
-      attributes: object,
-      options: object,
-      active: boolean,
-      dragDrop: boolean,
-      togglable: boolean,
-      runDefaultCommand: boolean,
-      stopDefaultCommand: boolean,
-      disable: boolean
-    }
-
-    interface ComponentView {
-      model : Component
-
-      onRender(opts: {
-        editor?: Editor,
-        model? : Component,
-        el? : HTMLElement
-      }) : void;
-    }
-
-    interface View {}
-
-    interface LayerManager {
-      /**
-       * Set new root for layers
-       * @param el Component to be set as the root
-       */
-      setRoot(el : HTMLElement|Component|String) : this
-      /** Get the root of layers */
-      getRoot() : Component
-      /** Return the view of layers */
-      getAll() : View
-    }
-
-    interface TraitView {
-      noLabel?: boolean
-      templateInput?: string | ((options: {
-        trait : Trait
-      }) => string)
-      eventCapture? : string[]
-
-      onEvent? : (options: {
-        elInput : HTMLElement,
-        component : Component,
-        event : any
-      }) => void
-      onUpdate? : (options: {
-        elInput : HTMLElement,
-        component : Component
-      }) => void
-      createInput? : (options: {
-        trait : Trait
-      }) => HTMLElement
-      createLabel?: (options: {
-        label : string
-      }) => string
-    }
-
-    interface TraitManager {
-      /**
-       * Add new trait type
-       * @param name Type name
-       * @param methods Object representing the trait
-       */
-      addType(name : string, trait : TraitView) : void
-      /**
-       * Get trait type
-       * @param name Type name
-       */
-      getType(name : string) : Object
-      /**
-       * Get all trait types
-       */
-      getTypes() : Object
-    }
+    /** Dom element */
+    el?: string;
+
+    /** Configurations for I18n */
+    i18n?: Record<string, any>;
+
+    /** Configurations for Undo Manager */
+    undoManager?: Record<string, any> | boolean;
+
+    /** Configurations for Asset Manager */
+    assetManager?: AssetManagerConfig | boolean;
+
+    /** Configurations for Canvas */
+    canvas?: CanvasConfig | boolean;
+
+    /** Configurations for Layers */
+    layers?: Record<string, any> | boolean;
+
+    /** Configurations for Storage Manager */
+    storageManager?: StorageManagerConfig | boolean;
+
+    /** Configurations for Rich Text Editor */
+    richTextEditor?: RichTextEditorConfig | boolean;
+
+    /** Configurations for DomComponents */
+    domComponents?: DomComponentsConfig | boolean;
+
+    /** Configurations for Modal Dialog */
+    modal?: ModalConfig | boolean;
+
+    /** Configurations for Code Manager */
+    codeManager?: CodeManagerConfig | boolean;
+
+    /** Configurations for Panels */
+    panels?: PanelsConfig | boolean;
+
+    /** Configurations for Commands */
+    commands?: CommandsConfig | boolean;
+
+    /** Configurations for Css Composer */
+    cssComposer?: CssComposerConfig | boolean;
+
+    /** Configurations for Selector Manager */
+    selectorManager?: SelectorManagerConfig | boolean;
+
+    /** Configurations for Device Manager */
+    deviceManager?: DeviceManagerConfig | boolean;
+
+    /** Configurations for Style Manager */
+    styleManager?: StyleManagerConfig | boolean;
+
+    /** Configurations for Block Manager */
+    blockManager?: BlockManagerConfig | boolean;
+
+    /** Configurations for Trait Manager */
+    traitManager?: TraitManagerConfig | boolean;
+
+    /** Texts **/
+    textViewCode?: string;
+
+    /** Keep unused styles within the editor **/
+    keepUnusedStyles?: 0;
+  }
+
+  interface AssetManagerConfig {
+    assets?: Array<object>;
+    noAssets?: string;
+    stylePrefix?: string;
+    upload?: boolean;
+    uploadName?: string;
+    headers?: object;
+    params?: object;
+    credentials?: RequestCredentials;
+    multiUpload?: boolean;
+    autoAdd?: boolean;
+    uploadText?: string;
+    addBtnText?: string;
+    customFetch?: Function;
+    uploadFile?: Function;
+    embedAsBase64?: boolean;
+    handleAdd?: Function;
+    dropzone?: boolean;
+    openAssetsOnDrop?: number;
+    dropzoneContent?: string;
+    modalTitle?: string;
+    inputPlaceholder?: string;
+  }
+
+  interface CanvasConfig {
+    stylePrefix?: string;
+    scripts?: Array<string>;
+    styles?: Array<string>;
+    customBadgeLabel?: Function;
+    autoscrollLimit?: number;
+    notTextable?: Array<string>;
+  }
+
+  interface StyleManagerConfig {
+    stylePrefix?: string;
+    sectors?: Array<object>;
+    appendTo?: HTMLElement | string;
+    textNoElement?: string;
+    hideNotStylable?: boolean;
+    highlightChanged?: boolean;
+    highlightComputed?: boolean;
+    showComputed?: boolean;
+    clearProperties?: boolean;
+    avoidComputed?: Array<string>;
+  }
+
+  interface BlockManagerConfig {
+    appendTo?: HTMLElement | string;
+    blocks: Array<object>;
+  }
+
+  interface RichTextEditorConfig {
+    stylePrefix?: string;
+    adjustToolbar?: boolean;
+    actions?: Array<string>;
+  }
+
+  interface TraitManagerConfig {
+    stylePrefix?: string;
+    appendTo?: HTMLElement | string;
+    labelContainer?: string;
+    labelPlhText?: string;
+    labelPlhRef?: string;
+    optionsTarget?: Array<object>;
+    textNoElement?: string;
+  }
+
+  interface StorageManagerConfig {
+    id?: string;
+    autosave?: boolean;
+    autoload?: boolean;
+    type?: "local" | "remote";
+    stepsBeforeSave?: number;
+    storeComponents?: boolean;
+    storeStyles?: boolean;
+    storeHtml?: boolean;
+    storeCss?: boolean;
+    checkLocal?: boolean;
+    params?: object;
+    headers?: object;
+    urlStore?: string;
+    urlLoad?: string;
+    contentTypeJson?: boolean;
+    credentials?: RequestCredentials;
+
+    beforeSend(jqXHR: any, settings: object): void;
+    onComplete(jqXHR: any, status: any): void;
+  }
+
+  interface DomComponentsConfig {
+    stylePrefix?: string;
+    wrapperId?: string;
+    wrapperName?: string;
+    wrapper?: DomComponentsWrapperConfig;
+    components?: Array<object>;
+    imageCompClass?: string;
+    oAssetsOnCreate?: boolean;
+    storeWrapper?: boolean;
+    voidElements?: Array<string>;
+  }
+
+  interface DomComponentsWrapperConfig {
+    removable?: boolean;
+    copyable?: boolean;
+    draggable?: boolean;
+    // TODO: Type custom blocks and components
+    components?: Array<object>;
+    traits?: Array<object>;
+    stylable?: Array<string>;
+  }
+
+  interface ModalConfig {
+    stylePrefix?: string;
+    title?: string;
+    content?: string;
+    backdrop?: boolean;
+  }
+
+  interface CodeManagerConfig {
+    stylePrefix?: string;
+    inlineCss?: boolean;
+  }
+
+  interface PanelsConfig {
+    stylePrefix?: string;
+    defaults?: Array<object>;
+    em?: object;
+    delayBtnsShow?: number;
+  }
+
+  interface CommandsConfig {
+    ESCAPE_KEY?: number;
+    stylePrefix?: string;
+    defaults?: Array<object>;
+    em?: object;
+    firstCentered?: boolean;
+    newFixedH?: boolean;
+    minComponentH?: number;
+    minComponentW?: number;
+  }
+
+  interface CssComposerConfig {
+    stylePrefix?: string;
+    staticRules?: string;
+    rules?: Array<string>;
+  }
+
+  interface SelectorManagerConfig {
+    stylePrefix?: string;
+    appendTo?: HTMLElement | string;
+    selectors?: Array<string>;
+    label?: string;
+    statesLabel?: string;
+    selectedLabel?: string;
+    states?: Array<object>;
+  }
+
+  interface DeviceManagerConfig {
+    devices?: Array<object>;
+    deviceLabel?: string;
+  }
+
+  function init(config: EditorConfig): Editor;
 
+  interface Trait extends Backbone.Model<TraitOptions> {
+    target: Component;
+
+    /** Return all the properties */
+    props(): TraitOptions;
+    targetUpdated(): void;
+    getValue(): string;
+    getTargetValue(): string;
+    setTargetValue(value: any, opts: object): void;
+    setValueFromInput(value: any, final: boolean, opts: object): void;
     /**
-     * Editor contains the top level API which you'll probably use to customize the editor or extend it with plugins.
-     * You get the Editor instance on init method and you can pass options via its [Configuration Object](https://github.com/artf/grapesjs/blob/master/src/editor/config/config.js)
-     *
-     * ```js
-     * const editor = grapesjs.init({
-     *    // options
+     * Get the initial value of the trait
+     */
+    getInitValue(): string;
+  }
+
+  type TraitType = "text" | "number" | "checkbox" | "select" | string;
+
+  interface TraitOptions {
+    type: TraitType;
+    label: string;
+    name: string;
+    min?: string;
+    max?: string;
+    unit?: string;
+    step?: number;
+    value?: string;
+    target?: Component;
+    default?: string;
+    placeholder?: string;
+    changeProp?: number;
+    options?: SelectOption[];
+    [key: string]: any;
+  }
+
+  interface PanelOptions {
+    id: string;
+    content: string;
+    visible: boolean;
+    buttons: Button[];
+  }
+
+  interface Panel extends Backbone.Model<PanelOptions> {}
+
+  interface Button extends Backbone.Model<ButtonOptions> {}
+
+  interface ButtonOptions {
+    id: string;
+    label: string;
+    tagName: "span";
+    className: string;
+    command: string | ((editor: Editor, opts?: any) => void);
+    context: string;
+    buttons: any[];
+    attributes: object;
+    options: object;
+    active: boolean;
+    dragDrop: boolean;
+    togglable: boolean;
+    runDefaultCommand: boolean;
+    stopDefaultCommand: boolean;
+    disable: boolean;
+  }
+
+  interface ComponentView {
+    model: Component;
+
+    onRender(opts: {
+      editor?: Editor;
+      model?: Component;
+      el?: HTMLElement;
+    }): void;
+  }
+
+  interface View {}
+
+  interface LayerManager {
+    /**
+     * Set new root for layers
+     * @param el Component to be set as the root
+     */
+    setRoot(el: HTMLElement | Component | String): this;
+    /** Get the root of layers */
+    getRoot(): Component;
+    /** Return the view of layers */
+    getAll(): View;
+  }
+
+  interface TraitView {
+    noLabel?: boolean;
+    templateInput?: string | ((options: { trait: Trait }) => string);
+    eventCapture?: string[];
+
+    onEvent?: (options: {
+      elInput: HTMLElement;
+      component: Component;
+      event: any;
+    }) => void;
+    onUpdate?: (options: {
+      elInput: HTMLElement;
+      component: Component;
+    }) => void;
+    createInput?: (options: { trait: Trait }) => HTMLElement;
+    createLabel?: (options: { label: string }) => string;
+  }
+
+  interface TraitManager {
+    /**
+     * Add new trait type
+     * @param name Type name
+     * @param methods Object representing the trait
+     */
+    addType(name: string, trait: TraitView): void;
+    /**
+     * Get trait type
+     * @param name Type name
+     */
+    getType(name: string): Object;
+    /**
+     * Get all trait types
+     */
+    getTypes(): Object;
+  }
+
+  /**
+   * Editor contains the top level API which you'll probably use to customize the editor or extend it with plugins.
+   * You get the Editor instance on init method and you can pass options via its [Configuration Object](https://github.com/artf/grapesjs/blob/master/src/editor/config/config.js)
+   *
+   * ```js
+   * const editor = grapesjs.init({
+   *    // options
+   * });
+   * ```
+   *
+   * ## Available Events
+   *
+   * You can make use of available events in this way
+   * ```js
+   * editor.on('EVENT-NAME', (some, argument) => {
+   *    // do something
+   * })
+   * ```
+   *
+   * * `update` - The structure of the template is updated (its HTML/CSS)
+   * * `undo` - Undo executed
+   * * `redo` - Redo executed
+   * * `load` - Editor is loaded
+   *
+   * ### Components
+   * Check the [Components](/api/components.html) module.
+   * ### Keymaps
+   * Check the [Keymaps](/api/keymaps.html) module.
+   * ### Style Manager
+   * Check the [Style Manager](/api/style_manager.html) module.
+   * ### Storage
+   * Check the [Storage](/api/storage_manager.html) module.
+   * ### Canvas
+   * Check the [Canvas](/api/canvas.html) module.
+   * ### RTE
+   * Check the [Rich Text Editor](/api/rich_text_editor.html) module.
+   * ### Commands
+   * Check the [Commands](/api/commands.html) module.
+   * ### Selectors
+   * Check the [Selectors](/api/selector_manager.html) module.
+   * ### Blocks
+   * Check the [Blocks](/api/block_manager.html) module.
+   * ### Assets
+   * Check the [Assets](/api/assets.html) module.
+   * ### Modal
+   * Check the [Modal](/api/modal_dialog.html) module.
+   * ### Devices
+   * Check the [Devices](/api/device_manager.html) module.
+   * ### Parser
+   * Check the [Parser](/api/parser.html) module.
+   * ### Pages
+   * Check the [Pages](/api/pages.html) module.
+   *
+   * ## Methods
+   */
+  interface Editor {
+    DomComponents: Components;
+    LayerManager: LayerManager;
+    CssComposer: CssComposer;
+    StorageManager: StorageManager;
+    AssetManager: AssetManager;
+    BlockManager: BlockManager;
+    TraitManager: TraitManager;
+    SelectorManager: SelectorManager;
+    CodeManager: object;
+    Commands: Commands;
+    Keymaps: Keymaps;
+    Modal: Modal;
+    Panels: Panels;
+    StyleManager: StyleManager;
+    Canvas: Canvas;
+    UndoManager: UndoManager;
+    DeviceManager: object;
+    RichTextEditor: RichTextEditor;
+    Parser: Parser;
+    Utils: object;
+    Config: EditorConfig | object;
+
+    /**
+     * Returns configuration object
+     * @param [prop] - Property name
+     * @returns Returns the configuration object or
+     *  the value of the specified property
+     */
+    getConfig(prop?: string): EditorConfig | object;
+    /**
+     * Returns HTML built inside canvas
+     * @param [opts = {}] - Options
+     * @param [opts.component] - Return the HTML of a specific Component
+     * @param [opts.cleanId = false] - Remove unnecessary IDs (eg. those created automatically)
+     * @returns HTML string
+     */
+    getHtml(opts?: { component?: Component; cleanId?: boolean }): string;
+    /**
+     * Returns CSS built inside canvas
+     * @param [opts = {}] - Options
+     * @param [opts.component] - Return the CSS of a specific Component
+     * @param [opts.json = false] - Return an array of CssRules instead of the CSS string
+     * @param [opts.avoidProtected = false] - Don't include protected CSS
+     * @param [opts.onlyMatched = false] - Return only rules matched by the passed component.
+     * @returns CSS string or array of CssRules
+     */
+    getCss(opts?: {
+      component?: Component;
+      json?: boolean;
+      avoidProtected?: boolean;
+      onlyMatched?: boolean;
+    }): string | CssRule[];
+    /**
+     * Returns JS of all components
+     * @param [opts = {}] - Options
+     * @param [opts.component] - Get the JS of a specific component
+     * @returns JS string
+     */
+    getJs(opts?: { component?: Component }): string;
+    /**
+     * Return the complete tree of components. Use `getWrapper` to include also the wrapper
+     */
+    getComponents(): Components;
+    /**
+     * Return the wrapper and its all components
+     */
+    getWrapper(): Component;
+    /**
+     * Set components inside editor's canvas. This method overrides actual components
+     * @example
+     * editor.setComponents('<div class="cls">New component</div>');
+     * // or
+     * editor.setComponents({
+     *  type: 'text',
+     *   classes:['cls'],
+     *   content: 'New component'
+     * });
+     * @param components - HTML string or components model
+     * @param opt - the options object to be used by the [setComponents]{@link em#setComponents} method
+     */
+    setComponents(components: object[] | any | string, opt: any): any;
+    /**
+     * Add components
+     * @example
+     * editor.addComponents('<div class="cls">New component</div>');
+     * // or
+     * editor.addComponents({
+     *  type: 'text',
+     *   classes:['cls'],
+     *   content: 'New component'
+     * });
+     * @param components - HTML string or components model
+     * @param opts - Options
+     * @param [opts.avoidUpdateStyle = false] - If the HTML string contains styles,
+     * by default, they will be created and, if already exist, updated. When this option
+     * is true, styles already created will not be updated.
+     */
+    addComponents(
+      components: object[] | any | string,
+      opts: {
+        avoidUpdateStyle?: boolean;
+      }
+    ): Component[];
+    /**
+     * Returns style in JSON format object
+     */
+    getStyle(): any;
+    /**
+     * Set style inside editor's canvas. This method overrides actual style
+     * @example
+     * editor.setStyle('.cls{color: red}');
+     * //or
+     * editor.setStyle({
+     *   selectors: ['cls'],
+     *   style: { color: 'red' }
+     * });
+     * @param style - CSS string or style model
+     */
+    setStyle(style: object[] | any | string): Editor;
+    /**
+     * Add styles to the editor
+     * @example
+     * editor.addStyle('.cls{color: red}');
+     * @param style - CSS string or style model
+     * @returns Array of created CssRule instances
+     */
+    addStyle(style: object[] | any | string): CssRule[];
+    /**
+     * Returns the last selected component, if there is one
+     */
+    getSelected(): Component | null;
+    /**
+     * Returns an array of all selected components
+     */
+    getSelectedAll(): Component[];
+    /**
+     * Get a stylable entity from the selected component.
+     * If you select a component without classes the entity is the Component
+     * itself and all changes will go inside its 'style' attribute. Otherwise,
+     * if the selected component has one or more classes, the function will
+     * return the corresponding CSS Rule
+     */
+    getSelectedToStyle(): Component; // TODO: | CSSRule
+    /**
+     * Select a component
+     * @example
+     * // Select dropped block
+     * editor.on('block:drag:stop', function(model) {
+     *  editor.select(model);
      * });
-     * ```
+     * @param el - Component to select
+     * @param [opts] - Options
+     * @param [opts.scroll] - Scroll canvas to the selected element
+     */
+    select(
+      el: Component | HTMLElement,
+      opts?: {
+        scroll?: boolean;
+      }
+    ): Editor;
+    /**
+     * Add component to selection
+     * @example
+     * editor.selectAdd(model);
+     * @param el - Component to select
+     */
+    selectAdd(el: Component | HTMLElement | any[]): Editor;
+    /**
+     * Remove component from selection
+     * @example
+     * editor.selectRemove(model);
+     * @param el - Component to select
+     */
+    selectRemove(el: Component | HTMLElement | any[]): Editor;
+    /**
+     * Toggle component selection
+     * @example
+     * editor.selectToggle(model);
+     * @param el - Component to select
+     */
+    selectToggle(el: Component | HTMLElement | any[]): Editor;
+    /**
+     * Returns, if active, the Component enabled in rich text editing mode.
+     * @example
+     * const textComp = editor.getEditing();
+     * if (textComp) {
+     *  console.log('HTML: ', textComp.toHTML());
+     * }
+     */
+    getEditing(): Component | null;
+    /**
+     * Set device to the editor. If the device exists it will
+     * change the canvas to the proper width
+     * @example
+     * editor.setDevice('Tablet');
+     * @param name - Name of the device
+     */
+    setDevice(name: string): Editor;
+    /**
+     * Return the actual active device
+     * @example
+     * var device = editor.getDevice();
+     * console.log(device);
+     * // 'Tablet'
+     * @returns Device name
+     */
+    getDevice(): string;
+    /**
+     * Execute command
+     * @example
+     * editor.runCommand('myCommand', {someValue: 1});
+     * @param id - Command ID
+     * @param options - Custom options
+     * @returns The return is defined by the command
+     */
+    runCommand(id: string, options: any): any;
+    /**
+     * Stop the command if stop method was provided
+     * @example
+     * editor.stopCommand('myCommand', {someValue: 1});
+     * @param id - Command ID
+     * @param options - Custom options
+     * @returns The return is defined by the command
+     */
+    stopCommand(id: string, options: any): any;
+    /**
+     * Store data to the current storage
+     * @param clb - Callback function
+     * @returns Stored data
+     */
+    store(clb: (...params: any[]) => any): any;
+    /**
+     * Get the JSON data object, which could be stored and loaded back with `editor.loadData(json)`
+     * @example
+     * console.log(editor.storeData());
+     * // { pages: [...], styles: [...], ... }
+     */
+    storeData(): any;
+    /**
+     * Load data from the current storage
+     * @param clb - Callback function
+     * @returns Stored data
+     */
+    load(clb: (...params: any[]) => any): any;
+    /**
+     * Load data from the JSON data object
+     * @example
+     * editor.loadData({ pages: [...], styles: [...], ... })
+     * @param data - Data to load
+     * @returns Loaded object
+     */
+    loadData(data: any): any;
+    /**
+     * Returns container element. The one which was indicated as 'container'
+     * on init method
+     */
+    getContainer(): HTMLElement;
+    /**
+     * Return the count of changes made to the content and not yet stored.
+     * This count resets at any `store()`
+     */
+    getDirtyCount(): number;
+    /**
+     * Update editor dimension offsets
+     *
+     * This method could be useful when you update, for example, some position
+     * of the editor element (eg. canvas, panels, etc.) with CSS, where without
+     * refresh you'll get misleading position of tools
+     * @param [options] - Options
+     * @param [options.tools = false] - Update the position of tools (eg. rich text editor, component highlighter, etc.)
+     */
+    refresh(options?: { tools?: boolean }): void;
+    /**
+     * Replace the built-in Rich Text Editor with a custom one.
+     * @example
+     * editor.setCustomRte({
+     *   // Function for enabling custom RTE
+     *   // el is the HTMLElement of the double clicked Text Component
+     *   // rte is the same instance you have returned the first time you call
+     *   // enable(). This is useful if need to check if the RTE is already enabled so
+     *   // ion this case you'll need to return the RTE and the end of the function
+     *   enable: function(el, rte) {
+     *     rte = new MyCustomRte(el, {}); // this depends on the Custom RTE API
+     *     ...
+     *     return rte; // return the RTE instance
+     *   },
+     *
+     *   // Disable the editor, called for example when you unfocus the Text Component
+     *  disable: function(el, rte) {
+     *     rte.blur(); // this depends on the Custom RTE API
+     *  }
      *
-     * ## Available Events
+     * // Called when the Text Component is focused again. If you returned the RTE instance
+     * // from the enable function, the enable won't be called again instead will call focus,
+     * // in this case to avoid double binding of the editor
+     *  focus: function (el, rte) {
+     *   rte.focus(); // this depends on the Custom RTE API
+     *  }
+     * });
+     * @param obj - Custom RTE Interface
+     */
+    setCustomRte(obj: any): void;
+    /**
+     * Replace the default CSS parser with a custom one.
+     * The parser function receives a CSS string as a parameter and expects
+     * an array of CSSRule objects as a result. If you need to remove the
+     * custom parser, pass `null` as the argument
+     * @example
+     * editor.setCustomParserCss(css => {
+     *  const result = [];
+     *  // ... parse the CSS string
+     *  result.push({
+     *    selectors: '.someclass, div .otherclass',
+     *    style: { color: 'red' }
+     *  })
+     *  // ...
+     *  return result;
+     * });
+     * @param parser - Parser function
+     */
+    setCustomParserCss(parser: ((...params: any[]) => any) | null): Editor;
+    /**
+     * Change the global drag mode of components.
+     * To get more about this feature read: https://github.com/artf/grapesjs/issues/1936
+     * @param value - Drag mode, options: 'absolute' | 'translate'
+     */
+    setDragMode(value: string): Editor;
+    /**
+     * Trigger event log message
+     * @example
+     * editor.log('Something done!', { ns: 'from-plugin-x', level: 'info' });
+     * // This will trigger following events
+     * // `log`, `log:info`, `log-from-plugin-x`, `log-from-plugin-x:info`
+     * // Callbacks of those events will always receive the message and
+     * // options, as arguments, eg:
+     * // editor.on('log:info', (msg, opts) => console.info(msg, opts))
+     * @param msg - Message to log
+     * @param [opts = {}] - Custom options
+     * @param [opts.ns = ''] - Namespace of the log (eg. to use in plugins)
+     * @param [opts.level = 'debug'] - Level of the log, `debug`, `info`, `warning`, `error`
+     */
+    log(
+      msg: any,
+      opts?: {
+        ns?: string;
+        level?: string;
+      }
+    ): Editor;
+    /**
+     * Translate label
+     * @example
+     * editor.t('msg');
+     * // use params
+     * editor.t('msg2', { params: { test: 'hello' } });
+     * // custom local
+     * editor.t('msg2', { params: { test: 'hello' }, l: 'it' });
+     * @param key - Label to translate
+     * @param [opts] - Options for the translation
+     * @param [opts.params] - Params for the translation
+     * @param [opts.noWarn] - Avoid warnings in case of missing resources
+     */
+    t(
+      key: string,
+      opts?: {
+        params?: any;
+        noWarn?: boolean;
+      }
+    ): string;
+    /**
+     * Attach event
+     * @param event - Event name
+     * @param callback - Callback function
+     */
+    on(event: GrapesEvent, callback: (...params: any[]) => any): Editor;
+    /**
+     * Attach event and detach it after the first run
+     * @param event - Event name
+     * @param callback - Callback function
+     */
+    once(event: GrapesEvent, callback: (...params: any[]) => any): Editor;
+    /**
+     * Detach event
+     * @param event - Event name
+     * @param callback - Callback function
+     */
+    off(event: GrapesEvent, callback: (...params: any[]) => any): Editor;
+    /**
+     * Trigger event
+     * @param event - Event to trigger
+     */
+    trigger(event: GrapesEvent): Editor;
+    /**
+     * Destroy the editor
+     */
+    destroy(): void;
+    /**
+     * Render editor
+     */
+    render(): HTMLElement;
+    /**
+     * Trigger a callback once the editor is loaded and rendered.
+     * The callback will be executed immediately if the method is called on the already rendered editor.
+     * @example
+     * editor.onReady(() => {
+     *   // perform actions
+     * });
+     * @param clb - Callback to trigger
+     */
+    onReady(clb: (...params: any[]) => any): void;
+    /**
+     * Print safe HTML by using ES6 tagged template strings.
+     * @example
+     * const unsafeStr = '<script>....</script>';
+     * const safeStr = '<b>Hello</b>';
+     * // Use `$${var}` to avoid escaping
+     * const strHtml = editor.html`Escaped ${unsafeStr}, unescaped $${safeStr}`;
+     */
+    html(literals: string[], substs: string[]): string;
+  }
+
+  type GrapesEvent =
+    | ComponentEvent
+    | BlockEvent
+    | AssetEvent
+    | KeymapEvent
+    | StyleManagerEvent
+    | StorageEvent
+    | CanvasEvent
+    | SelectorEvent
+    | RichTextEditorEvent
+    | ModalEvent
+    | CommandEvent
+    | GeneralEvent;
+
+  type ComponentEvent =
+    | "component:create"
+    | "component:mount"
+    | "component:add"
+    | "component:remove"
+    | "component:remove:before"
+    | "component:clone"
+    | "component:update"
+    | "component:styleUpdate"
+    | "component:selected"
+    | "component:deselected"
+    | "component:toggled"
+    | "component:type:add"
+    | "component:type:update"
+    | "component:drag:start"
+    | "component:drag"
+    | "component:drag:end";
+
+  type BlockEvent =
+    | "block:add"
+    | "block:remove"
+    | "block:drag:start"
+    | "block:drag"
+    | "block:drag:stop";
+
+  type AssetEvent =
+    | "asset:add"
+    | "asset:remove"
+    | "asset:upload:start"
+    | "asset:upload:end"
+    | "asset:upload:error"
+    | "asset:upload:response";
+
+  type KeymapEvent =
+    | "keymap:add"
+    | "keymap:remove"
+    | "keymap:emit"
+    | "keymap:emit:{keymapId}";
+
+  type StyleManagerEvent =
+    | "styleManager:update:target"
+    | "styleManager:change"
+    | "styleManager:change:{propertyName}";
+
+  type StorageEvent =
+    | "storage:start"
+    | "storage:start:store"
+    | "storage:start:load"
+    | "storage:load"
+    | "storage:store"
+    | "storage:end"
+    | "storage:end:store"
+    | "storage:end:load"
+    | "storage:error"
+    | "storage:error:store"
+    | "storage:error:load";
+
+  type CanvasEvent =
+    | "canvas:dragenter"
+    | "canvas:dragover"
+    | "canvas:drop"
+    | "canvas:dragend"
+    | "canvas:dragdata";
+
+  type SelectorEvent = "selector:add";
+
+  type RichTextEditorEvent = "rte:enable" | "rte:disable";
+
+  type ModalEvent = "modal:open" | "modal:close";
+
+  type CommandEvent =
+    | "run:{commandName}"
+    | "stop:{commandName}"
+    | "run:{commandName}:before"
+    | "stop:{commandName}:before"
+    | "abort:{commandName}";
+
+  type GeneralEvent = "canvasScroll" | "undo" | "redo" | "load";
+
+  /**
+   * You can customize the initial state of the module from the editor initialization, by passing the following [Configuration Object](https://github.com/artf/grapesjs/blob/master/src/asset_manager/config/config.js)
+   * ```js
+   * const editor = grapesjs.init({
+   *  assetManager: {
+   *    // options
+   *  }
+   * })
+   * ```
+   *
+   * Once the editor is instantiated you can use its API. Before using these methods you should get the module from the instance
+   *
+   * ```js
+   * const assetManager = editor.AssetManager;
+   * ```
+   *
+   * ## Available Events
+   * * `asset:open` - Asset Manager opened.
+   * * `asset:close` - Asset Manager closed.
+   * * `asset:add` - Asset added. The [Asset] is passed as an argument to the callback.
+   * * `asset:remove` - Asset removed. The [Asset] is passed as an argument to the callback.
+   * * `asset:update` - Asset updated. The updated [Asset] and the object containing changes are passed as arguments to the callback.
+   * * `asset:upload:start` - Before the upload is started.
+   * * `asset:upload:end` - After the upload is ended.
+   * * `asset:upload:error` - On any error in upload, passes the error as an argument.
+   * * `asset:upload:response` - On upload response, passes the result as an argument.
+   * * `asset` - Catch-all event for all the events mentioned above. An object containing all the available data about the triggered event is passed as an argument to the callback.
+   * * `asset:custom` - Event for handling custom Asset Manager UI.
+   *
+   * ## Methods
+   * * [open](#open)
+   * * [close](#close)
+   * * [isOpen](#isopen)
+   * * [add](#add)
+   * * [get](#get)
+   * * [getAll](#getall)
+   * * [getAllVisible](#getallvisible)
+   * * [remove](#remove)
+   * * [store](#store)
+   * * [load](#load)
+   * * [getContainer](#getcontainer)
+   *
+   * [Asset]: asset.html
+   */
+  interface AssetManager {
+    /**
+     * Open the asset manager.
+     * @example
+     * assetManager.open({
+     *  select(asset, complete) {
+     *    const selected = editor.getSelected();
+     *    if (selected && selected.is('image')) {
+     *      selected.addAttributes({ src: asset.getSrc() });
+     *      // The default AssetManager UI will trigger `select(asset, false)` on asset click
+     *      // and `select(asset, true)` on double-click
+     *      complete && assetManager.close();
+     *    }
+     *  }
+     * });
+     * // with your custom types (you should have assets with those types declared)
+     * assetManager.open({ types: ['doc'], ... });
+     * @param [options] - Options for the asset manager.
+     * @param [options.types = ['image']] - Types of assets to show.
+     * @param [options.select] - Type of operation to perform on asset selection. If not specified, nothing will happen.
+     */
+    open(options?: {
+      types?: String[];
+      select?: (...params: any[]) => any;
+    }): void;
+    /**
+     * Close the asset manager.
+     * @example
+     * assetManager.close();
+     */
+    close(): void;
+    /**
+     * Checks if the asset manager is open
+     * @example
+     * assetManager.isOpen(); // true | false
+     */
+    isOpen(): boolean;
+    /**
+     * Add new asset/s to the collection. URLs are supposed to be unique
+     * @example
+     * // As strings
+     * assetManager.add('http://img.jpg');
+     * assetManager.add(['http://img.jpg', './path/to/img.png']);
      *
-     * You can make use of available events in this way
-     * ```js
-     * editor.on('EVENT-NAME', (some, argument) => {
-     *    // do something
+     * // Using objects you can indicate the type and other meta informations
+     * assetManager.add({
+     *  // type: 'image',	// image is default
+     * 	src: 'http://img.jpg',
+     * 	height: 300,
+     * 	width: 200,
+     * });
+     * assetManager.add([{ src: 'img2.jpg' }, { src: 'img2.png' }]);
+     * @param asset - URL strings or an objects representing the resource.
+     * @param [opts] - Options
+     */
+    add(asset: string | any | String[] | object[], opts?: any): any;
+    /**
+     * Return asset by URL
+     * @example
+     * const asset = assetManager.get('http://img.jpg');
+     * @param src - URL of the asset
+     */
+    get(src: string): any;
+    /**
+     * Return the global collection, containing all the assets
+     */
+    getAll(): any;
+    /**
+     * Return the visible collection, which contains assets actually rendered
+     */
+    getAllVisible(): any;
+    /**
+     * Remove asset
+     * @example
+     * const removed = assetManager.remove('http://img.jpg');
+     * // or by passing the Asset
+     * const asset = assetManager.get('http://img.jpg');
+     * assetManager.remove(asset);
+     */
+    remove(): any;
+    /**
+     * Store assets data to the selected storage
+     * @example
+     * var assets = assetManager.store();
+     * @param noStore - If true, won't store
+     * @returns Data to store
+     */
+    store(noStore: boolean): any;
+    /**
+     * Load data from the passed object.
+     * The fetched data will be added to the collection.
+     * @example
+     * var assets = assetManager.load({
+     * 	assets: [...]
      * })
-     * ```
+     * @param data - Object of data to load
+     * @returns Loaded assets
+     */
+    load(data: any): any;
+    /**
+     * Return the Asset Manager Container
+     */
+    getContainer(): HTMLElement;
+    /**
+     * Render assets
+     * @example
+     * // Render all assets
+     * assetManager.render();
      *
-     * * `update` - The structure of the template is updated (its HTML/CSS)
-     * * `undo` - Undo executed
-     * * `redo` - Redo executed
-     * * `load` - Editor is loaded
+     * // Render some of the assets
+     * const assets = assetManager.getAll();
+     * assetManager.render(assets.filter(
+     *  asset => asset.get('category') == 'cats'
+     * ));
+     * @param assets - Assets to render, without the argument will render all global assets
+     */
+    render(assets: any[]): HTMLElement;
+  }
+
+  interface AssetOptions {
+    /**
+     * Asset type, eg. 'image'.
+     */
+    type: string;
+    /**
+     * Asset URL, eg. 'https://.../image.png'.
+     */
+    src: string;
+  }
+
+  interface Asset extends Backbone.Model<AssetOptions> {
+    /**
+     * Get asset type.
+     * @example
+     * // Asset: { src: 'https://.../image.png', type: 'image' }
+     * asset.getType(); // -> 'image'
+     */
+    getType(): string;
+
+    /**
+     * Get asset URL.
+     * @example
+     * // Asset: { src: 'https://.../image.png'  }
+     * asset.getSrc(); // -> 'https://.../image.png'
+     */
+    getSrc(): string;
+
+    /**
+     * Get filename of the asset (based on `src`).
+     * @example
+     * // Asset: { src: 'https://.../image.png' }
+     * asset.getFilename(); // -> 'image.png'
+     * // Asset: { src: 'https://.../image' }
+     * asset.getFilename(); // -> 'image'
+     */
+    getFilename(): string;
+
+    /**
+     * Get extension of the asset (based on `src`).
+     * @example
+     * // Asset: { src: 'https://.../image.png' }
+     * asset.getExtension(); // -> 'png'
+     * // Asset: { src: 'https://.../image' }
+     * asset.getExtension(); // -> ''
+     */
+    getExtension(): string;
+  }
+
+  /**
+   * You can customize the initial state of the module from the editor initialization, by passing the following [Configuration Object](https://github.com/artf/grapesjs/blob/master/src/block_manager/config/config.js)
+   * ```js
+   * const editor = grapesjs.init({
+   *  blockManager: {
+   *    // options
+   *  }
+   * })
+   * ```
+   *
+   * Once the editor is instantiated you can use its API and listen to its events. Before using these methods, you should get the module from the instance.
+   *
+   * ```js
+   * // Listen to events
+   * editor.on('block:add', (block) => { ... });
+   *
+   * // Use the API
+   * const blockManager = editor.BlockManager;
+   * blockManager.add(...);
+   * ```
+   *
+   * ## Available Events
+   * * `block:add` - Block added. The [Block] is passed as an argument to the callback.
+   * * `block:remove` - Block removed. The [Block] is passed as an argument to the callback.
+   * * `block:update` - Block updated. The [Block] and the object containing changes are passed as arguments to the callback.
+   * * `block:drag:start` - Started dragging block, the [Block] is passed as an argument.
+   * * `block:drag` - Dragging block, the [Block] is passed as an argument.
+   * * `block:drag:stop` - Dragging of the block is stopped. The dropped [Component] (if dropped successfully) and the [Block] are passed as arguments.
+   * * `block` - Catch-all event for all the events mentioned above. An object containing all the available data about the triggered event is passed as an argument to the callback.
+   *
+   * ## Methods
+   * * [add](#add)
+   * * [get](#get)
+   * * [getAll](#getall)
+   * * [getAllVisible](#getallvisible)
+   * * [remove](#remove)
+   * * [getConfig](#getconfig)
+   * * [getCategories](#getcategories)
+   * * [getContainer](#getcontainer)
+   * * [render](#render)
+   *
+   * [Block]: block.html
+   * [Component]: component.html
+   */
+  interface BlockManager {
+    /**
+     * Get configuration object
+     */
+    getConfig(): BlockManagerConfig;
+    /**
+     * Add new block.
+     * @example
+     * blockManager.add('h1-block', {
+     *   label: 'Heading',
+     *   content: '<h1>Put your title here</h1>',
+     *   category: 'Basic',
+     *   attributes: {
+     *     title: 'Insert h1 block'
+     *   }
+     * });
+     * @param id - Block ID
+     */
+    add(id: string, block: BlockOptions): any;
+    /**
+     * Get the block by id.
+     * @example
+     * const block = blockManager.get('h1-block');
+     * console.log(JSON.stringify(block));
+     * // {label: 'Heading', content: '<h1>Put your ...', ...}
+     * @param id - Block id
+     */
+    get(id: string): any;
+    /**
+     * Return all blocks.
+     * @example
+     * const blocks = blockManager.getAll();
+     * console.log(JSON.stringify(blocks));
+     * // [{label: 'Heading', content: '<h1>Put your ...'}, ...]
+     */
+    getAll(): any;
+    /**
+     * Return the visible collection, which containes blocks actually rendered
+     */
+    getAllVisible(): any;
+    /**
+     * Remove block.
+     * @example
+     * const removed = blockManager.remove('BLOCK_ID');
+     * // or by passing the Block
+     * const block = blockManager.get('BLOCK_ID');
+     * blockManager.remove(block);
+     */
+    remove(): any;
+    /**
+     * Get all available categories.
+     * It's possible to add categories only within blocks via 'add()' method
+     */
+    getCategories(): any[] | Backbone.Collection<Backbone.Model<{}>>;
+    /**
+     * Return the Blocks container element
+     */
+    getContainer(): HTMLElement;
+    /**
+     * Render blocks
+     * @example
+     * // Render all blocks (inside the global collection)
+     * blockManager.render();
      *
-     * ### Components
-     * Check the [Components](/api/components.html) module.
-     * ### Keymaps
-     * Check the [Keymaps](/api/keymaps.html) module.
-     * ### Style Manager
-     * Check the [Style Manager](/api/style_manager.html) module.
-     * ### Storage
-     * Check the [Storage](/api/storage_manager.html) module.
-     * ### Canvas
-     * Check the [Canvas](/api/canvas.html) module.
-     * ### RTE
-     * Check the [Rich Text Editor](/api/rich_text_editor.html) module.
-     * ### Commands
-     * Check the [Commands](/api/commands.html) module.
-     * ### Selectors
-     * Check the [Selectors](/api/selector_manager.html) module.
-     * ### Blocks
-     * Check the [Blocks](/api/block_manager.html) module.
-     * ### Assets
-     * Check the [Assets](/api/assets.html) module.
-     * ### Modal
-     * Check the [Modal](/api/modal_dialog.html) module.
-     * ### Devices
-     * Check the [Devices](/api/device_manager.html) module.
-     * ### Parser
-     * Check the [Parser](/api/parser.html) module.
-     * ### Pages
-     * Check the [Pages](/api/pages.html) module.
+     * // Render new set of blocks
+     * const blocks = blockManager.getAll();
+     * const filtered = blocks.filter(block => block.get('category') == 'sections')
      *
-     * ## Methods
-     */
-    interface Editor {
-      DomComponents: Components;
-      LayerManager: LayerManager;
-      CssComposer: CssComposer;
-      StorageManager: StorageManager;
-      AssetManager: AssetManager;
-      BlockManager: BlockManager;
-      TraitManager: TraitManager;
-      SelectorManager: SelectorManager;
-      CodeManager: object;
-      Commands: Commands;
-      Keymaps: Keymaps;
-      Modal: Modal;
-      Panels: Panels;
-      StyleManager: StyleManager;
-      Canvas: Canvas;
-      UndoManager: UndoManager;
-      DeviceManager: object;
-      RichTextEditor: RichTextEditor;
-      Parser: Parser;
-      Utils: object;
-      Config: EditorConfig | object;
-
-      /**
-       * Returns configuration object
-       * @param [prop] - Property name
-       * @returns Returns the configuration object or
-       *  the value of the specified property
-       */
-      getConfig(prop?: string): EditorConfig | object;
-      /**
-       * Returns HTML built inside canvas
-       * @param [opts = {}] - Options
-       * @param [opts.component] - Return the HTML of a specific Component
-       * @param [opts.cleanId = false] - Remove unnecessary IDs (eg. those created automatically)
-       * @returns HTML string
-       */
-      getHtml(opts?: {
-          component?: Component;
-          cleanId?: boolean;
-      }): string;
-      /**
-       * Returns CSS built inside canvas
-       * @param [opts = {}] - Options
-       * @param [opts.component] - Return the CSS of a specific Component
-       * @param [opts.json = false] - Return an array of CssRules instead of the CSS string
-       * @param [opts.avoidProtected = false] - Don't include protected CSS
-       * @param [opts.onlyMatched = false] - Return only rules matched by the passed component.
-       * @returns CSS string or array of CssRules
-       */
-      getCss(opts?: {
-          component?: Component;
-          json?: boolean;
-          avoidProtected?: boolean;
-          onlyMatched?: boolean;
-      }): string | CssRule[];
-      /**
-       * Returns JS of all components
-       * @param [opts = {}] - Options
-       * @param [opts.component] - Get the JS of a specific component
-       * @returns JS string
-       */
-      getJs(opts?: {
-          component?: Component;
-      }): string;
-      /**
-       * Return the complete tree of components. Use `getWrapper` to include also the wrapper
-       */
-      getComponents(): Components;
-      /**
-       * Return the wrapper and its all components
-       */
-      getWrapper(): Component;
-      /**
-       * Set components inside editor's canvas. This method overrides actual components
-       * @example
-       * editor.setComponents('<div class="cls">New component</div>');
-       * // or
-       * editor.setComponents({
-       *  type: 'text',
-       *   classes:['cls'],
-       *   content: 'New component'
-       * });
-       * @param components - HTML string or components model
-       * @param opt - the options object to be used by the [setComponents]{@link em#setComponents} method
-       */
-      setComponents(components: object[] | any | string, opt: any): any;
-      /**
-       * Add components
-       * @example
-       * editor.addComponents('<div class="cls">New component</div>');
-       * // or
-       * editor.addComponents({
-       *  type: 'text',
-       *   classes:['cls'],
-       *   content: 'New component'
-       * });
-       * @param components - HTML string or components model
-       * @param opts - Options
-       * @param [opts.avoidUpdateStyle = false] - If the HTML string contains styles,
-       * by default, they will be created and, if already exist, updated. When this option
-       * is true, styles already created will not be updated.
-       */
-      addComponents(components: object[] | any | string, opts: {
-          avoidUpdateStyle?: boolean;
-      }): Component[];
-      /**
-       * Returns style in JSON format object
-       */
-      getStyle(): any;
-      /**
-       * Set style inside editor's canvas. This method overrides actual style
-       * @example
-       * editor.setStyle('.cls{color: red}');
-       * //or
-       * editor.setStyle({
-       *   selectors: ['cls'],
-       *   style: { color: 'red' }
-       * });
-       * @param style - CSS string or style model
-       */
-      setStyle(style: object[] | any | string): Editor;
-      /**
-       * Add styles to the editor
-       * @example
-       * editor.addStyle('.cls{color: red}');
-       * @param style - CSS string or style model
-       * @returns Array of created CssRule instances
-       */
-      addStyle(style: object[] | any | string): CssRule[];
-      /**
-       * Returns the last selected component, if there is one
-       */
-      getSelected(): Component | null;
-      /**
-       * Returns an array of all selected components
-       */
-      getSelectedAll(): Component[];
-      /**
-       * Get a stylable entity from the selected component.
-       * If you select a component without classes the entity is the Component
-       * itself and all changes will go inside its 'style' attribute. Otherwise,
-       * if the selected component has one or more classes, the function will
-       * return the corresponding CSS Rule
-       */
-      getSelectedToStyle(): Component; // TODO: | CSSRule
-      /**
-       * Select a component
-       * @example
-       * // Select dropped block
-       * editor.on('block:drag:stop', function(model) {
-       *  editor.select(model);
-       * });
-       * @param el - Component to select
-       * @param [opts] - Options
-       * @param [opts.scroll] - Scroll canvas to the selected element
-       */
-      select(el: Component | HTMLElement, opts?: {
-          scroll?: boolean;
-      }): Editor;
-      /**
-       * Add component to selection
-       * @example
-       * editor.selectAdd(model);
-       * @param el - Component to select
-       */
-      selectAdd(el: Component | HTMLElement | any[]): Editor;
-      /**
-       * Remove component from selection
-       * @example
-       * editor.selectRemove(model);
-       * @param el - Component to select
-       */
-      selectRemove(el: Component | HTMLElement | any[]): Editor;
-      /**
-       * Toggle component selection
-       * @example
-       * editor.selectToggle(model);
-       * @param el - Component to select
-       */
-      selectToggle(el: Component | HTMLElement | any[]): Editor;
-      /**
-       * Returns, if active, the Component enabled in rich text editing mode.
-       * @example
-       * const textComp = editor.getEditing();
-       * if (textComp) {
-       *  console.log('HTML: ', textComp.toHTML());
-       * }
-       */
-      getEditing(): Component | null;
-      /**
-       * Set device to the editor. If the device exists it will
-       * change the canvas to the proper width
-       * @example
-       * editor.setDevice('Tablet');
-       * @param name - Name of the device
-       */
-      setDevice(name: string): Editor;
-      /**
-       * Return the actual active device
-       * @example
-       * var device = editor.getDevice();
-       * console.log(device);
-       * // 'Tablet'
-       * @returns Device name
-       */
-      getDevice(): string;
-      /**
-       * Execute command
-       * @example
-       * editor.runCommand('myCommand', {someValue: 1});
-       * @param id - Command ID
-       * @param options - Custom options
-       * @returns The return is defined by the command
-       */
-      runCommand(id: string, options: any): any;
-      /**
-       * Stop the command if stop method was provided
-       * @example
-       * editor.stopCommand('myCommand', {someValue: 1});
-       * @param id - Command ID
-       * @param options - Custom options
-       * @returns The return is defined by the command
-       */
-      stopCommand(id: string, options: any): any;
-      /**
-       * Store data to the current storage
-       * @param clb - Callback function
-       * @returns Stored data
-       */
-      store(clb: (...params: any[]) => any): any;
-      /**
-       * Get the JSON data object, which could be stored and loaded back with `editor.loadData(json)`
-       * @example
-       * console.log(editor.storeData());
-       * // { pages: [...], styles: [...], ... }
-       */
-      storeData(): any;
-      /**
-       * Load data from the current storage
-       * @param clb - Callback function
-       * @returns Stored data
-       */
-      load(clb: (...params: any[]) => any): any;
-      /**
-       * Load data from the JSON data object
-       * @example
-       * editor.loadData({ pages: [...], styles: [...], ... })
-       * @param data - Data to load
-       * @returns Loaded object
-       */
-      loadData(data: any): any;
-      /**
-       * Returns container element. The one which was indicated as 'container'
-       * on init method
-       */
-      getContainer(): HTMLElement;
-      /**
-       * Return the count of changes made to the content and not yet stored.
-       * This count resets at any `store()`
-       */
-      getDirtyCount(): number;
-      /**
-       * Update editor dimension offsets
-       *
-       * This method could be useful when you update, for example, some position
-       * of the editor element (eg. canvas, panels, etc.) with CSS, where without
-       * refresh you'll get misleading position of tools
-       * @param [options] - Options
-       * @param [options.tools = false] - Update the position of tools (eg. rich text editor, component highlighter, etc.)
-       */
-      refresh(options?: {
-          tools?: boolean;
-      }): void;
-      /**
-       * Replace the built-in Rich Text Editor with a custom one.
-       * @example
-       * editor.setCustomRte({
-       *   // Function for enabling custom RTE
-       *   // el is the HTMLElement of the double clicked Text Component
-       *   // rte is the same instance you have returned the first time you call
-       *   // enable(). This is useful if need to check if the RTE is already enabled so
-       *   // ion this case you'll need to return the RTE and the end of the function
-       *   enable: function(el, rte) {
-       *     rte = new MyCustomRte(el, {}); // this depends on the Custom RTE API
-       *     ...
-       *     return rte; // return the RTE instance
-       *   },
-       *
-       *   // Disable the editor, called for example when you unfocus the Text Component
-       *  disable: function(el, rte) {
-       *     rte.blur(); // this depends on the Custom RTE API
-       *  }
-       *
-       * // Called when the Text Component is focused again. If you returned the RTE instance
-       * // from the enable function, the enable won't be called again instead will call focus,
-       * // in this case to avoid double binding of the editor
-       *  focus: function (el, rte) {
-       *   rte.focus(); // this depends on the Custom RTE API
-       *  }
-       * });
-       * @param obj - Custom RTE Interface
-       */
-      setCustomRte(obj: any): void;
-      /**
-       * Replace the default CSS parser with a custom one.
-       * The parser function receives a CSS string as a parameter and expects
-       * an array of CSSRule objects as a result. If you need to remove the
-       * custom parser, pass `null` as the argument
-       * @example
-       * editor.setCustomParserCss(css => {
-       *  const result = [];
-       *  // ... parse the CSS string
-       *  result.push({
-       *    selectors: '.someclass, div .otherclass',
-       *    style: { color: 'red' }
-       *  })
-       *  // ...
-       *  return result;
-       * });
-       * @param parser - Parser function
-       */
-      setCustomParserCss(parser: ((...params: any[]) => any) | null): Editor;
-      /**
-       * Change the global drag mode of components.
-       * To get more about this feature read: https://github.com/artf/grapesjs/issues/1936
-       * @param value - Drag mode, options: 'absolute' | 'translate'
-       */
-      setDragMode(value: string): Editor;
-      /**
-       * Trigger event log message
-       * @example
-       * editor.log('Something done!', { ns: 'from-plugin-x', level: 'info' });
-       * // This will trigger following events
-       * // `log`, `log:info`, `log-from-plugin-x`, `log-from-plugin-x:info`
-       * // Callbacks of those events will always receive the message and
-       * // options, as arguments, eg:
-       * // editor.on('log:info', (msg, opts) => console.info(msg, opts))
-       * @param msg - Message to log
-       * @param [opts = {}] - Custom options
-       * @param [opts.ns = ''] - Namespace of the log (eg. to use in plugins)
-       * @param [opts.level = 'debug'] - Level of the log, `debug`, `info`, `warning`, `error`
-       */
-      log(msg: any, opts?: {
-          ns?: string;
-          level?: string;
-      }): Editor;
-      /**
-       * Translate label
-       * @example
-       * editor.t('msg');
-       * // use params
-       * editor.t('msg2', { params: { test: 'hello' } });
-       * // custom local
-       * editor.t('msg2', { params: { test: 'hello' }, l: 'it' });
-       * @param key - Label to translate
-       * @param [opts] - Options for the translation
-       * @param [opts.params] - Params for the translation
-       * @param [opts.noWarn] - Avoid warnings in case of missing resources
-       */
-      t(key: string, opts?: {
-          params?: any;
-          noWarn?: boolean;
-      }): string;
-      /**
-       * Attach event
-       * @param event - Event name
-       * @param callback - Callback function
-       */
-      on(event: GrapesEvent, callback: (...params: any[]) => any): Editor;
-      /**
-       * Attach event and detach it after the first run
-       * @param event - Event name
-       * @param callback - Callback function
-       */
-      once(event: GrapesEvent, callback: (...params: any[]) => any): Editor;
-      /**
-       * Detach event
-       * @param event - Event name
-       * @param callback - Callback function
-       */
-      off(event: GrapesEvent, callback: (...params: any[]) => any): Editor;
-      /**
-       * Trigger event
-       * @param event - Event to trigger
-       */
-      trigger(event: GrapesEvent): Editor;
-      /**
-       * Destroy the editor
-       */
-      destroy(): void;
-      /**
-       * Render editor
-       */
-      render(): HTMLElement;
-      /**
-       * Trigger a callback once the editor is loaded and rendered.
-       * The callback will be executed immediately if the method is called on the already rendered editor.
-       * @example
-       * editor.onReady(() => {
-       *   // perform actions
-       * });
-       * @param clb - Callback to trigger
-       */
-      onReady(clb: (...params: any[]) => any): void;
-      /**
-       * Print safe HTML by using ES6 tagged template strings.
-       * @example
-       * const unsafeStr = '<script>....</script>';
-       * const safeStr = '<b>Hello</b>';
-       * // Use `$${var}` to avoid escaping
-       * const strHtml = editor.html`Escaped ${unsafeStr}, unescaped $${safeStr}`;
-       */
-      html(literals: string[], substs: string[]): string;
-    }
-
-    type GrapesEvent = ComponentEvent
-      | BlockEvent
-      | AssetEvent
-      | KeymapEvent
-      | StyleManagerEvent
-      | StorageEvent
-      | CanvasEvent
-      | SelectorEvent
-      | RichTextEditorEvent
-      | ModalEvent
-      | CommandEvent
-      | GeneralEvent;
-
-    type ComponentEvent =
-      'component:create'
-      | 'component:mount'
-      | 'component:add'
-      | 'component:remove'
-      | 'component:remove:before'
-      | 'component:clone'
-      | 'component:update'
-      | 'component:styleUpdate'
-      | 'component:selected'
-      | 'component:deselected'
-      | 'component:toggled'
-      | 'component:type:add'
-      | 'component:type:update'
-      | 'component:drag:start'
-      | 'component:drag'
-      | 'component:drag:end';
-
-    type BlockEvent =
-      "block:add"
-      | "block:remove"
-      | "block:drag:start"
-      | "block:drag"
-      | "block:drag:stop";
-
-    type AssetEvent =
-      "asset:add"
-      | "asset:remove"
-      | "asset:upload:start"
-      | "asset:upload:end"
-      | "asset:upload:error"
-      | "asset:upload:response";
-
-    type KeymapEvent =
-      "keymap:add"
-      | "keymap:remove"
-      | "keymap:emit"
-      | "keymap:emit:{keymapId}";
-
-    type StyleManagerEvent =
-      "styleManager:update:target"
-      | "styleManager:change"
-      | "styleManager:change:{propertyName}";
-
-    type StorageEvent =
-      "storage:start"
-      | "storage:start:store"
-      | "storage:start:load"
-      | "storage:load"
-      | "storage:store"
-      | "storage:end"
-      | "storage:end:store"
-      | "storage:end:load"
-      | "storage:error"
-      | "storage:error:store"
-      | "storage:error:load";
-
-    type CanvasEvent =
-      "canvas:dragenter"
-      | "canvas:dragover"
-      | "canvas:drop"
-      | "canvas:dragend"
-      | "canvas:dragdata";
-
-    type SelectorEvent = "selector:add";
-
-    type RichTextEditorEvent = "rte:enable" | "rte:disable";
-
-    type ModalEvent = "modal:open" | "modal:close";
-
-    type CommandEvent =
-      "run:{commandName}"
-      | "stop:{commandName}"
-      | "run:{commandName}:before"
-      | "stop:{commandName}:before"
-      | "abort:{commandName}";
-
-    type GeneralEvent =
-      "canvasScroll"
-      | "undo"
-      | "redo"
-      | "load";
-
-    /**
-     * You can customize the initial state of the module from the editor initialization, by passing the following [Configuration Object](https://github.com/artf/grapesjs/blob/master/src/asset_manager/config/config.js)
-     * ```js
-     * const editor = grapesjs.init({
-     *  assetManager: {
-     *    // options
-     *  }
-     * })
-     * ```
-     *
-     * Once the editor is instantiated you can use its API. Before using these methods you should get the module from the instance
-     *
-     * ```js
-     * const assetManager = editor.AssetManager;
-     * ```
-     *
-     * ## Available Events
-     * * `asset:open` - Asset Manager opened.
-     * * `asset:close` - Asset Manager closed.
-     * * `asset:add` - Asset added. The [Asset] is passed as an argument to the callback.
-     * * `asset:remove` - Asset removed. The [Asset] is passed as an argument to the callback.
-     * * `asset:update` - Asset updated. The updated [Asset] and the object containing changes are passed as arguments to the callback.
-     * * `asset:upload:start` - Before the upload is started.
-     * * `asset:upload:end` - After the upload is ended.
-     * * `asset:upload:error` - On any error in upload, passes the error as an argument.
-     * * `asset:upload:response` - On upload response, passes the result as an argument.
-     * * `asset` - Catch-all event for all the events mentioned above. An object containing all the available data about the triggered event is passed as an argument to the callback.
-     * * `asset:custom` - Event for handling custom Asset Manager UI.
+     * blockManager.render(filtered);
+     * // Or a new set from an array
+     * blockManager.render([
+     *  {label: 'Label text', content: '<div>Content</div>'}
+     * ]);
      *
-     * ## Methods
-     * * [open](#open)
-     * * [close](#close)
-     * * [isOpen](#isopen)
-     * * [add](#add)
-     * * [get](#get)
-     * * [getAll](#getall)
-     * * [getAllVisible](#getallvisible)
-     * * [remove](#remove)
-     * * [store](#store)
-     * * [load](#load)
-     * * [getContainer](#getcontainer)
+     * // Back to blocks from the global collection
+     * blockManager.render();
      *
-     * [Asset]: asset.html
-     */
-    interface AssetManager {
-      /**
-       * Open the asset manager.
-       * @example
-       * assetManager.open({
-       *  select(asset, complete) {
-       *    const selected = editor.getSelected();
-       *    if (selected && selected.is('image')) {
-       *      selected.addAttributes({ src: asset.getSrc() });
-       *      // The default AssetManager UI will trigger `select(asset, false)` on asset click
-       *      // and `select(asset, true)` on double-click
-       *      complete && assetManager.close();
-       *    }
-       *  }
-       * });
-       * // with your custom types (you should have assets with those types declared)
-       * assetManager.open({ types: ['doc'], ... });
-       * @param [options] - Options for the asset manager.
-       * @param [options.types = ['image']] - Types of assets to show.
-       * @param [options.select] - Type of operation to perform on asset selection. If not specified, nothing will happen.
-       */
-      open(options?: {
-          types?: String[];
-          select?: (...params: any[]) => any;
-      }): void;
-      /**
-       * Close the asset manager.
-       * @example
-       * assetManager.close();
-       */
-      close(): void;
-      /**
-       * Checks if the asset manager is open
-       * @example
-       * assetManager.isOpen(); // true | false
-       */
-      isOpen(): boolean;
-      /**
-       * Add new asset/s to the collection. URLs are supposed to be unique
-       * @example
-       * // As strings
-       * assetManager.add('http://img.jpg');
-       * assetManager.add(['http://img.jpg', './path/to/img.png']);
-       *
-       * // Using objects you can indicate the type and other meta informations
-       * assetManager.add({
-       *  // type: 'image',	// image is default
-       * 	src: 'http://img.jpg',
-       * 	height: 300,
-       * 	width: 200,
-       * });
-       * assetManager.add([{ src: 'img2.jpg' }, { src: 'img2.png' }]);
-       * @param asset - URL strings or an objects representing the resource.
-       * @param [opts] - Options
-       */
-      add(asset: string | any | String[] | object[], opts?: any): any;
-      /**
-       * Return asset by URL
-       * @example
-       * const asset = assetManager.get('http://img.jpg');
-       * @param src - URL of the asset
-       */
-      get(src: string): any;
-      /**
-       * Return the global collection, containing all the assets
-       */
-      getAll(): any;
-      /**
-       * Return the visible collection, which contains assets actually rendered
-       */
-      getAllVisible(): any;
-      /**
-       * Remove asset
-       * @example
-       * const removed = assetManager.remove('http://img.jpg');
-       * // or by passing the Asset
-       * const asset = assetManager.get('http://img.jpg');
-       * assetManager.remove(asset);
-       */
-      remove(): any;
-      /**
-       * Store assets data to the selected storage
-       * @example
-       * var assets = assetManager.store();
-       * @param noStore - If true, won't store
-       * @returns Data to store
-       */
-      store(noStore: boolean): any;
-      /**
-       * Load data from the passed object.
-       * The fetched data will be added to the collection.
-       * @example
-       * var assets = assetManager.load({
-       * 	assets: [...]
-       * })
-       * @param data - Object of data to load
-       * @returns Loaded assets
-       */
-      load(data: any): any;
-      /**
-       * Return the Asset Manager Container
-       */
-      getContainer(): HTMLElement;
-      /**
-       * Render assets
-       * @example
-       * // Render all assets
-       * assetManager.render();
-       *
-       * // Render some of the assets
-       * const assets = assetManager.getAll();
-       * assetManager.render(assets.filter(
-       *  asset => asset.get('category') == 'cats'
-       * ));
-       * @param assets - Assets to render, without the argument will render all global assets
-       */
-      render(assets: any[]): HTMLElement;
-    }
+     * // You can also render your blocks outside of the main block container
+     * const newBlocksEl = blockManager.render(filtered, { external: true });
+     * document.getElementById('some-id').appendChild(newBlocksEl);
+     * @param blocks - Blocks to render, without the argument will render all global blocks
+     * @param [opts = {}] - Options
+     * @param [opts.external] - Render blocks in a new container (HTMLElement will be returned)
+     * @param [opts.ignoreCategories] - Render blocks without categories
+     * @returns Rendered element
+     */
+    render(
+      blocks: any[],
+      opts?: {
+        external?: boolean;
+        ignoreCategories?: boolean;
+      }
+    ): HTMLElement;
+  }
 
-    interface AssetOptions {
-      /**
-       * Asset type, eg. 'image'.
-       */
-       type: string;
-       /**
-        * Asset URL, eg. 'https://.../image.png'.
-        */
-       src: string;
-    }
-
-    interface Asset extends Backbone.Model<AssetOptions> {
-      /**
-      * Get asset type.
-      * @example
-      * // Asset: { src: 'https://.../image.png', type: 'image' }
-      * asset.getType(); // -> 'image'
-      */
-      getType(): string;
-
-      /**
-      * Get asset URL.
-      * @example
-      * // Asset: { src: 'https://.../image.png'  }
-      * asset.getSrc(); // -> 'https://.../image.png'
-      */
-      getSrc(): string;
-
-      /**
-      * Get filename of the asset (based on `src`).
-      * @example
-      * // Asset: { src: 'https://.../image.png' }
-      * asset.getFilename(); // -> 'image.png'
-      * // Asset: { src: 'https://.../image' }
-      * asset.getFilename(); // -> 'image'
-      */
-      getFilename(): string;
-
-      /**
-      * Get extension of the asset (based on `src`).
-      * @example
-      * // Asset: { src: 'https://.../image.png' }
-      * asset.getExtension(); // -> 'png'
-      * // Asset: { src: 'https://.../image' }
-      * asset.getExtension(); // -> ''
-      */
-      getExtension(): string;
-    }
-
-    /**
-    * You can customize the initial state of the module from the editor initialization, by passing the following [Configuration Object](https://github.com/artf/grapesjs/blob/master/src/block_manager/config/config.js)
-    * ```js
-    * const editor = grapesjs.init({
-    *  blockManager: {
-    *    // options
-    *  }
-    * })
-    * ```
-    *
-    * Once the editor is instantiated you can use its API and listen to its events. Before using these methods, you should get the module from the instance.
-    *
-    * ```js
-    * // Listen to events
-    * editor.on('block:add', (block) => { ... });
-    *
-    * // Use the API
-    * const blockManager = editor.BlockManager;
-    * blockManager.add(...);
-    * ```
-    *
-    * ## Available Events
-    * * `block:add` - Block added. The [Block] is passed as an argument to the callback.
-    * * `block:remove` - Block removed. The [Block] is passed as an argument to the callback.
-    * * `block:update` - Block updated. The [Block] and the object containing changes are passed as arguments to the callback.
-    * * `block:drag:start` - Started dragging block, the [Block] is passed as an argument.
-    * * `block:drag` - Dragging block, the [Block] is passed as an argument.
-    * * `block:drag:stop` - Dragging of the block is stopped. The dropped [Component] (if dropped successfully) and the [Block] are passed as arguments.
-    * * `block` - Catch-all event for all the events mentioned above. An object containing all the available data about the triggered event is passed as an argument to the callback.
-    *
-    * ## Methods
-    * * [add](#add)
-    * * [get](#get)
-    * * [getAll](#getall)
-    * * [getAllVisible](#getallvisible)
-    * * [remove](#remove)
-    * * [getConfig](#getconfig)
-    * * [getCategories](#getcategories)
-    * * [getContainer](#getcontainer)
-    * * [render](#render)
-    *
-    * [Block]: block.html
-    * [Component]: component.html
-    */
-    interface BlockManager {
-      /**
-       * Get configuration object
-       */
-      getConfig(): BlockManagerConfig;
-      /**
-       * Add new block.
-       * @example
-       * blockManager.add('h1-block', {
-       *   label: 'Heading',
-       *   content: '<h1>Put your title here</h1>',
-       *   category: 'Basic',
-       *   attributes: {
-       *     title: 'Insert h1 block'
-       *   }
-       * });
-       * @param id - Block ID
-       */
-      add(id: string, block : BlockOptions): any;
-      /**
-       * Get the block by id.
-       * @example
-       * const block = blockManager.get('h1-block');
-       * console.log(JSON.stringify(block));
-       * // {label: 'Heading', content: '<h1>Put your ...', ...}
-       * @param id - Block id
-       */
-      get(id: string): any;
-      /**
-       * Return all blocks.
-       * @example
-       * const blocks = blockManager.getAll();
-       * console.log(JSON.stringify(blocks));
-       * // [{label: 'Heading', content: '<h1>Put your ...'}, ...]
-       */
-      getAll(): any;
-      /**
-       * Return the visible collection, which containes blocks actually rendered
-       */
-      getAllVisible(): any;
-      /**
-       * Remove block.
-       * @example
-       * const removed = blockManager.remove('BLOCK_ID');
-       * // or by passing the Block
-       * const block = blockManager.get('BLOCK_ID');
-       * blockManager.remove(block);
-       */
-      remove(): any;
-      /**
-       * Get all available categories.
-       * It's possible to add categories only within blocks via 'add()' method
-       */
-      getCategories(): any[] | Backbone.Collection<Backbone.Model<{}>>;
-      /**
-       * Return the Blocks container element
-       */
-      getContainer(): HTMLElement;
-      /**
-       * Render blocks
-       * @example
-       * // Render all blocks (inside the global collection)
-       * blockManager.render();
-       *
-       * // Render new set of blocks
-       * const blocks = blockManager.getAll();
-       * const filtered = blocks.filter(block => block.get('category') == 'sections')
-       *
-       * blockManager.render(filtered);
-       * // Or a new set from an array
-       * blockManager.render([
-       *  {label: 'Label text', content: '<div>Content</div>'}
-       * ]);
-       *
-       * // Back to blocks from the global collection
-       * blockManager.render();
-       *
-       * // You can also render your blocks outside of the main block container
-       * const newBlocksEl = blockManager.render(filtered, { external: true });
-       * document.getElementById('some-id').appendChild(newBlocksEl);
-       * @param blocks - Blocks to render, without the argument will render all global blocks
-       * @param [opts = {}] - Options
-       * @param [opts.external] - Render blocks in a new container (HTMLElement will be returned)
-       * @param [opts.ignoreCategories] - Render blocks without categories
-       * @returns Rendered element
-       */
-      render(blocks: any[], opts?: {
-          external?: boolean;
-          ignoreCategories?: boolean;
-      }): HTMLElement;
-    }
-
-    interface BlockOptions {
-      /**
-       * Block label, eg. `My block`
-       */
-      label: string;
-      /**
-       * The content of the block. Might be an HTML string or a [Component Defintion](/modules/Components.html#component-definition)
-       */
-      content: string | any;
-      /**
-       * HTML string for the media/icon of the block, eg. `<svg ...`, `<img ...`, etc.
-       * @defaultValue ''
-       */
-      media?: string;
-      /**
-       * Block category, eg. `Basic blocks`
-       * @defaultValue ''
-       */
-      category?: string;
-      /**
-       * If true, triggers the `active` event on the dropped component.
-       */
-      activate?: boolean;
-      /**
-       * If true, the dropped component will be selected.
-       */
-      select?: boolean;
-      /**
-       * If true, all IDs of dropped components and their styles will be changed.
-       */
-      resetId?: boolean;
-      /**
-       * Disable the block from being interacted
-       */
-      disable?: boolean;
-      /**
-       * Custom behavior on click, eg. `(block, editor) => editor.getWrapper().append(block.get('content'))`
-       */
-      onClick?: (...params: any[]) => any;
-    }
-    interface Block extends Backbone.Model<BlockOptions> {
-      /**
-      * Get block id
-      */
-      getId(): string;
-
-      /**
-      * Get block label
-      */
-      getLabel(): string;
-
-      /**
-      * Get block media
-      */
-      getMedia(): string;
-
-      /**
-      * Get block content
-      * @returns Component definition | HTML string
-      */
-      getContent(): any | string | (object | String)[];
-
-      /**
-      * Get block category label
-      */
-      getCategoryLabel(): string;
-
-      self(): Block;
-    }
-
-    /**
-    * You can customize the initial state of the module from the editor initialization, by passing the following [Configuration Object](https://github.com/artf/grapesjs/blob/master/src/commands/config/config.js)
-    * ```js
-    * const editor = grapesjs.init({
-    *  commands: {
-    *    // options
-    *  }
-    * })
-    * ```
-    *
-    * Once the editor is instantiated you can use its API and listen to its events. Before using these methods, you should get the module from the instance.
-    *
-    * ```js
-    * // Listen to events
-    * editor.on('run', () => { ... });
-    *
-    * // Use the API
-    * const commands = editor.Commands;
-    * commands.add(...);
-    * ```
-    *
-    * * ## Available Events
-    * * `run:{commandName}` - Triggered when some command is called to run (eg. editor.runCommand('preview'))
-    * * `stop:{commandName}` - Triggered when some command is called to stop (eg. editor.stopCommand('preview'))
-    * * `run:{commandName}:before` - Triggered before the command is called
-    * * `stop:{commandName}:before` - Triggered before the command is called to stop
-    * * `abort:{commandName}` - Triggered when the command execution is aborted (`editor.on(`run:preview:before`, opts => opts.abort = 1);`)
-    * * `run` - Triggered on run of any command. The id and the result are passed as arguments to the callback
-    * * `stop` - Triggered on stop of any command. The id and the result are passed as arguments to the callback
-    *
-    * ## Methods
-    * * [add](#add)
-    * * [get](#get)
-    * * [getAll](#getall)
-    * * [extend](#extend)
-    * * [has](#has)
-    * * [run](#run)
-    * * [stop](#stop)
-    * * [isActive](#isactive)
-    * * [getActive](#getactive)
-    */
-    interface Commands {
-      /**
-       * Add new command to the collection
-       * @example
-       * commands.add('myCommand', {
-       * 	run(editor, sender) {
-       * 		alert('Hello world!');
-       * 	},
-       * 	stop(editor, sender) {
-       * 	},
-       * });
-       * // As a function
-       * commands.add('myCommand2', editor => { ... });
-       */
-      add(id : string, command : (editor : Editor) => void | {
-        run: (editor: Editor, sender? : any) => void;
-        stop: (editor: Editor, sender? : any) => void;
-      }) : void
-      /**
-       * Get command by ID
-       * @example
-       * var myCommand = commands.get('myCommand');
-       * myCommand.run();
-       * @param id - Command's ID
-       * @returns Object representing the command
-       */
-      get(id: string): any;
-      /**
-       * Extend the command. The command to extend should be defined as an object
-       * @example
-       * commands.extend('old-command', {
-       *  someInnerFunction() {
-       *  // ...
-       *  }
-       * });
-       * @param id - Command's ID
-       * @param Object - with the new command functions
-       */
-      extend(id: string, Object: any): Commands;
-      /**
-       * Check if command exists
-       * @param id - Command's ID
-       */
-      has(id: string): boolean;
-      /**
-       * Get an object containing all the commands
-       */
-      getAll(): any;
-      /**
-       * Execute the command
-       * @example
-       * commands.run('myCommand', { someOption: 1 });
-       * @param id - Command ID
-       * @param [options = {}] - Options
-       * @returns The return is defined by the command
-       */
-      run(id: string, options?: any): any;
-      /**
-       * Stop the command
-       * @example
-       * commands.stop('myCommand', { someOption: 1 });
-       * @param id - Command ID
-       * @param [options = {}] - Options
-       * @returns The return is defined by the command
-       */
-      stop(id: string, options?: any): any;
-      /**
-       * Check if the command is active. You activate commands with `run`
-       * and disable them with `stop`. If the command was created without `stop`
-       * method it can't be registered as active
-       * @example
-       * const cId = 'some-command';
-       * commands.run(cId);
-       * commands.isActive(cId);
-       * // -> true
-       * commands.stop(cId);
-       * commands.isActive(cId);
-       * // -> false
-       * @param id - Command id
-       */
-      isActive(id: string): boolean;
-      /**
-       * Get all active commands
-       * @example
-       * console.log(commands.getActive());
-       * // -> { someCommand: itsLastReturn, anotherOne: ... };
-       */
-      getActive(): any;
-    }
-
-    interface AddComponentOptions {
-      isComponent?: (el : HTMLElement) => boolean | ComponentProperties,
-      model?: ComponentModelDefinition
-      view?: ComponentViewDefinition
-    }
-
-    interface ComponentModelDefinition {
-      defaults?: ComponentProperties
-      init?: (this: Component) => void
-      handlePropChange?: (this: Component) => void
-      handleAttrChange?: (this: Component) => void
-      handleTitleChange?: (this: Component) => void
-    }
-
-    interface ComponentViewDefinition {
-      tagName : string,
-      events: Record<string, string>
-      init?: (options: {model: Component}) => void
-      removed?: () => void
-      onRender?: (options: {el : HTMLElement, model: Component}) => void
-    }
-
-    /**
-    * With this module is possible to manage components inside the canvas. You can customize the initial state of the module from the editor initialization, by passing the following [Configuration Object](https://github.com/artf/grapesjs/blob/master/src/dom_components/config/config.js)
-    * ```js
-    * const editor = grapesjs.init({
-    *  domComponents: {
-    *    // options
-    *  }
-    * })
-    * ```
-    *
-    * Once the editor is instantiated you can use its API and listen to its events. Before using these methods, you should get the module from the instance.
-    *
-    * ```js
-    * // Listen to events
-    * editor.on('component:create', () => { ... });
-    *
-    * // Use the API
-    * const cmp = editor.Components;
-    * cmp.addType(...);
-    * ```
-    *
-    * ## Available Events
-    * * `component:create` - Component is created (only the model, is not yet mounted in the canvas), called after the init() method
-    * * `component:mount` - Component is mounted to an element and rendered in canvas
-    * * `component:add` - Triggered when a new component is added to the editor, the model is passed as an argument to the callback
-    * * `component:remove` - Triggered when a component is removed, the model is passed as an argument to the callback
-    * * `component:remove:before` - Triggered before the remove of the component, the model, remove function (if aborted via options, with this function you can complete the remove) and options (use options.abort = true to prevent remove), are passed as arguments to the callback
-    * * `component:clone` - Triggered when a component is cloned, the new model is passed as an argument to the callback
-    * * `component:update` - Triggered when a component is updated (moved, styled, etc.), the model is passed as an argument to the callback
-    * * `component:update:{propertyName}` - Listen any property change, the model is passed as an argument to the callback
-    * * `component:styleUpdate` - Triggered when the style of the component is updated, the model is passed as an argument to the callback
-    * * `component:styleUpdate:{propertyName}` - Listen for a specific style property change, the model is passed as an argument to the callback
-    * * `component:selected` - New component selected, the selected model is passed as an argument to the callback
-    * * `component:deselected` - Component deselected, the deselected model is passed as an argument to the callback
-    * * `component:toggled` - Component selection changed, toggled model is passed as an argument to the callback
-    * * `component:type:add` - New component type added, the new type is passed as an argument to the callback
-    * * `component:type:update` - Component type updated, the updated type is passed as an argument to the callback
-    * * `component:drag:start` - Component drag started. Passed an object, to the callback, containing the `target` (component to drag), `parent` (parent of the component) and `index` (component index in the parent)
-    * * `component:drag` - During component drag. Passed the same object as in `component:drag:start` event, but in this case, `parent` and `index` are updated by the current pointer
-    * * `component:drag:end` - Component drag ended. Passed the same object as in `component:drag:start` event, but in this case, `parent` and `index` are updated by the final pointer
-    *
-    * ## Methods
-    * * [getWrapper](#getwrapper)
-    * * [getComponents](#getcomponents)
-    * * [addComponent](#addcomponent)
-    * * [clear](#clear)
-    * * [load](#load)
-    * * [store](#store)
-    * * [addType](#addtype)
-    * * [getType](#gettype)
-    * * [getTypes](#gettypes)
-    * * [render](#render)
-    */
-    interface Components {
-      /**
-       * Load components from the passed object, if the object is empty will try to fetch them
-       * autonomously from the selected storage
-       * The fetched data will be added to the collection
-       * @param data - Object of data to load
-       * @returns Loaded data
-       */
-      load(data: any): any;
-      /**
-       * Store components on the selected storage
-       * @param noStore - If true, won't store
-       * @returns Data to store
-       */
-      store(noStore: boolean): any;
-      /**
-       * Returns root component inside the canvas. Something like `<body>` inside HTML page
-       * The wrapper doesn't differ from the original Component Model
-       * @example
-       * // Change background of the wrapper and set some attribute
-       * var wrapper = cmp.getWrapper();
-       * wrapper.set('style', {'background-color': 'red'});
-       * wrapper.set('attributes', {'title': 'Hello!'});
-       * @returns Root Component
-       */
-      getWrapper(): Component;
-      /**
-       * Returns wrapper's children collection. Once you have the collection you can
-       * add other Components(Models) inside. Each component can have several nested
-       * components inside and you can nest them as more as you wish.
-       * @example
-       * // Let's add some component
-       * var wrapperChildren = cmp.getComponents();
-       * var comp1 = wrapperChildren.add({
-       *   style: { 'background-color': 'red'}
-       * });
-       * var comp2 = wrapperChildren.add({
-       *   tagName: 'span',
-       *   attributes: { title: 'Hello!'}
-       * });
-       * // Now let's add an other one inside first component
-       * // First we have to get the collection inside. Each
-       * // component has 'components' property
-       * var comp1Children = comp1.get('components');
-       * // Procede as before. You could also add multiple objects
-       * comp1Children.add([
-       *   { style: { 'background-color': 'blue'}},
-       *   { style: { height: '100px', width: '100px'}}
-       * ]);
-       * // Remove comp2
-       * wrapperChildren.remove(comp2);
-       * @returns Collection of components
-       */
-      getComponents(): Components;
-      /**
-       * Add new components to the wrapper's children. It's the same
-       * as 'cmp.getComponents().add(...)'
-       * @example
-       * // Example of a new component with some extra property
-       * var comp1 = cmp.addComponent({
-       *   tagName: 'div',
-       *   removable: true, // Can't remove it
-       *   draggable: true, // Can't move it
-       *   copyable: true, // Disable copy/past
-       *   content: 'Content text', // Text inside component
-       *   style: { color: 'red'},
-       *   attributes: { title: 'here' }
-       * });
-       * @param component - Component/s to add
-       * @param [component.tagName = 'div'] - Tag name
-       * @param [component.type = ''] - Type of the component. Available: ''(default), 'text', 'image'
-       * @param [component.removable = true] - If component is removable
-       * @param [component.draggable = true] - If is possible to move the component around the structure
-       * @param [component.droppable = true] - If is possible to drop inside other components
-       * @param [component.badgable = true] - If the badge is visible when the component is selected
-       * @param [component.stylable = true] - If is possible to style component
-       * @param [component.copyable = true] - If is possible to copy&paste the component
-       * @param [component.content = ''] - String inside component
-       * @param [component.style = {}] - Style object
-       * @param [component.attributes = {}] - Attribute object
-       * @param opt - the options object to be used by the [Components.add]{@link getComponents} method
-       * @returns Component/s added
-       */
-      addComponent(component: {
+  interface BlockOptions {
+    /**
+     * Block label, eg. `My block`
+     */
+    label: string;
+    /**
+     * The content of the block. Might be an HTML string or a [Component Defintion](/modules/Components.html#component-definition)
+     */
+    content: string | any;
+    /**
+     * HTML string for the media/icon of the block, eg. `<svg ...`, `<img ...`, etc.
+     * @defaultValue ''
+     */
+    media?: string;
+    /**
+     * Block category, eg. `Basic blocks`
+     * @defaultValue ''
+     */
+    category?: string;
+    /**
+     * If true, triggers the `active` event on the dropped component.
+     */
+    activate?: boolean;
+    /**
+     * If true, the dropped component will be selected.
+     */
+    select?: boolean;
+    /**
+     * If true, all IDs of dropped components and their styles will be changed.
+     */
+    resetId?: boolean;
+    /**
+     * Disable the block from being interacted
+     */
+    disable?: boolean;
+    /**
+     * Custom behavior on click, eg. `(block, editor) => editor.getWrapper().append(block.get('content'))`
+     */
+    onClick?: (...params: any[]) => any;
+  }
+  interface Block extends Backbone.Model<BlockOptions> {
+    /**
+     * Get block id
+     */
+    getId(): string;
+
+    /**
+     * Get block label
+     */
+    getLabel(): string;
+
+    /**
+     * Get block media
+     */
+    getMedia(): string;
+
+    /**
+     * Get block content
+     * @returns Component definition | HTML string
+     */
+    getContent(): any | string | (object | String)[];
+
+    /**
+     * Get block category label
+     */
+    getCategoryLabel(): string;
+
+    self(): Block;
+  }
+
+  /**
+   * You can customize the initial state of the module from the editor initialization, by passing the following [Configuration Object](https://github.com/artf/grapesjs/blob/master/src/commands/config/config.js)
+   * ```js
+   * const editor = grapesjs.init({
+   *  commands: {
+   *    // options
+   *  }
+   * })
+   * ```
+   *
+   * Once the editor is instantiated you can use its API and listen to its events. Before using these methods, you should get the module from the instance.
+   *
+   * ```js
+   * // Listen to events
+   * editor.on('run', () => { ... });
+   *
+   * // Use the API
+   * const commands = editor.Commands;
+   * commands.add(...);
+   * ```
+   *
+   * * ## Available Events
+   * * `run:{commandName}` - Triggered when some command is called to run (eg. editor.runCommand('preview'))
+   * * `stop:{commandName}` - Triggered when some command is called to stop (eg. editor.stopCommand('preview'))
+   * * `run:{commandName}:before` - Triggered before the command is called
+   * * `stop:{commandName}:before` - Triggered before the command is called to stop
+   * * `abort:{commandName}` - Triggered when the command execution is aborted (`editor.on(`run:preview:before`, opts => opts.abort = 1);`)
+   * * `run` - Triggered on run of any command. The id and the result are passed as arguments to the callback
+   * * `stop` - Triggered on stop of any command. The id and the result are passed as arguments to the callback
+   *
+   * ## Methods
+   * * [add](#add)
+   * * [get](#get)
+   * * [getAll](#getall)
+   * * [extend](#extend)
+   * * [has](#has)
+   * * [run](#run)
+   * * [stop](#stop)
+   * * [isActive](#isactive)
+   * * [getActive](#getactive)
+   */
+  interface Commands {
+    /**
+     * Add new command to the collection
+     * @example
+     * commands.add('myCommand', {
+     * 	run(editor, sender) {
+     * 		alert('Hello world!');
+     * 	},
+     * 	stop(editor, sender) {
+     * 	},
+     * });
+     * // As a function
+     * commands.add('myCommand2', editor => { ... });
+     */
+    add(
+      id: string,
+      command: (editor: Editor) => void | {
+        run: (editor: Editor, sender?: any) => void;
+        stop: (editor: Editor, sender?: any) => void;
+      }
+    ): void;
+    /**
+     * Get command by ID
+     * @example
+     * var myCommand = commands.get('myCommand');
+     * myCommand.run();
+     * @param id - Command's ID
+     * @returns Object representing the command
+     */
+    get(id: string): any;
+    /**
+     * Extend the command. The command to extend should be defined as an object
+     * @example
+     * commands.extend('old-command', {
+     *  someInnerFunction() {
+     *  // ...
+     *  }
+     * });
+     * @param id - Command's ID
+     * @param Object - with the new command functions
+     */
+    extend(id: string, Object: any): Commands;
+    /**
+     * Check if command exists
+     * @param id - Command's ID
+     */
+    has(id: string): boolean;
+    /**
+     * Get an object containing all the commands
+     */
+    getAll(): any;
+    /**
+     * Execute the command
+     * @example
+     * commands.run('myCommand', { someOption: 1 });
+     * @param id - Command ID
+     * @param [options = {}] - Options
+     * @returns The return is defined by the command
+     */
+    run(id: string, options?: any): any;
+    /**
+     * Stop the command
+     * @example
+     * commands.stop('myCommand', { someOption: 1 });
+     * @param id - Command ID
+     * @param [options = {}] - Options
+     * @returns The return is defined by the command
+     */
+    stop(id: string, options?: any): any;
+    /**
+     * Check if the command is active. You activate commands with `run`
+     * and disable them with `stop`. If the command was created without `stop`
+     * method it can't be registered as active
+     * @example
+     * const cId = 'some-command';
+     * commands.run(cId);
+     * commands.isActive(cId);
+     * // -> true
+     * commands.stop(cId);
+     * commands.isActive(cId);
+     * // -> false
+     * @param id - Command id
+     */
+    isActive(id: string): boolean;
+    /**
+     * Get all active commands
+     * @example
+     * console.log(commands.getActive());
+     * // -> { someCommand: itsLastReturn, anotherOne: ... };
+     */
+    getActive(): any;
+  }
+
+  interface AddComponentOptions {
+    isComponent?: (el: HTMLElement) => boolean | ComponentProperties;
+    model?: ComponentModelDefinition;
+    view?: ComponentViewDefinition;
+  }
+
+  interface ComponentModelDefinition {
+    defaults?: ComponentProperties;
+    init?: (this: Component) => void;
+    handlePropChange?: (this: Component) => void;
+    handleAttrChange?: (this: Component) => void;
+    handleTitleChange?: (this: Component) => void;
+  }
+
+  interface ComponentViewDefinition {
+    tagName: string;
+    events: Record<string, string>;
+    init?: (options: { model: Component }) => void;
+    removed?: () => void;
+    onRender?: (options: { el: HTMLElement; model: Component }) => void;
+  }
+
+  /**
+   * With this module is possible to manage components inside the canvas. You can customize the initial state of the module from the editor initialization, by passing the following [Configuration Object](https://github.com/artf/grapesjs/blob/master/src/dom_components/config/config.js)
+   * ```js
+   * const editor = grapesjs.init({
+   *  domComponents: {
+   *    // options
+   *  }
+   * })
+   * ```
+   *
+   * Once the editor is instantiated you can use its API and listen to its events. Before using these methods, you should get the module from the instance.
+   *
+   * ```js
+   * // Listen to events
+   * editor.on('component:create', () => { ... });
+   *
+   * // Use the API
+   * const cmp = editor.Components;
+   * cmp.addType(...);
+   * ```
+   *
+   * ## Available Events
+   * * `component:create` - Component is created (only the model, is not yet mounted in the canvas), called after the init() method
+   * * `component:mount` - Component is mounted to an element and rendered in canvas
+   * * `component:add` - Triggered when a new component is added to the editor, the model is passed as an argument to the callback
+   * * `component:remove` - Triggered when a component is removed, the model is passed as an argument to the callback
+   * * `component:remove:before` - Triggered before the remove of the component, the model, remove function (if aborted via options, with this function you can complete the remove) and options (use options.abort = true to prevent remove), are passed as arguments to the callback
+   * * `component:clone` - Triggered when a component is cloned, the new model is passed as an argument to the callback
+   * * `component:update` - Triggered when a component is updated (moved, styled, etc.), the model is passed as an argument to the callback
+   * * `component:update:{propertyName}` - Listen any property change, the model is passed as an argument to the callback
+   * * `component:styleUpdate` - Triggered when the style of the component is updated, the model is passed as an argument to the callback
+   * * `component:styleUpdate:{propertyName}` - Listen for a specific style property change, the model is passed as an argument to the callback
+   * * `component:selected` - New component selected, the selected model is passed as an argument to the callback
+   * * `component:deselected` - Component deselected, the deselected model is passed as an argument to the callback
+   * * `component:toggled` - Component selection changed, toggled model is passed as an argument to the callback
+   * * `component:type:add` - New component type added, the new type is passed as an argument to the callback
+   * * `component:type:update` - Component type updated, the updated type is passed as an argument to the callback
+   * * `component:drag:start` - Component drag started. Passed an object, to the callback, containing the `target` (component to drag), `parent` (parent of the component) and `index` (component index in the parent)
+   * * `component:drag` - During component drag. Passed the same object as in `component:drag:start` event, but in this case, `parent` and `index` are updated by the current pointer
+   * * `component:drag:end` - Component drag ended. Passed the same object as in `component:drag:start` event, but in this case, `parent` and `index` are updated by the final pointer
+   *
+   * ## Methods
+   * * [getWrapper](#getwrapper)
+   * * [getComponents](#getcomponents)
+   * * [addComponent](#addcomponent)
+   * * [clear](#clear)
+   * * [load](#load)
+   * * [store](#store)
+   * * [addType](#addtype)
+   * * [getType](#gettype)
+   * * [getTypes](#gettypes)
+   * * [render](#render)
+   */
+  interface Components {
+    /**
+     * Load components from the passed object, if the object is empty will try to fetch them
+     * autonomously from the selected storage
+     * The fetched data will be added to the collection
+     * @param data - Object of data to load
+     * @returns Loaded data
+     */
+    load(data: any): any;
+    /**
+     * Store components on the selected storage
+     * @param noStore - If true, won't store
+     * @returns Data to store
+     */
+    store(noStore: boolean): any;
+    /**
+     * Returns root component inside the canvas. Something like `<body>` inside HTML page
+     * The wrapper doesn't differ from the original Component Model
+     * @example
+     * // Change background of the wrapper and set some attribute
+     * var wrapper = cmp.getWrapper();
+     * wrapper.set('style', {'background-color': 'red'});
+     * wrapper.set('attributes', {'title': 'Hello!'});
+     * @returns Root Component
+     */
+    getWrapper(): Component;
+    /**
+     * Returns wrapper's children collection. Once you have the collection you can
+     * add other Components(Models) inside. Each component can have several nested
+     * components inside and you can nest them as more as you wish.
+     * @example
+     * // Let's add some component
+     * var wrapperChildren = cmp.getComponents();
+     * var comp1 = wrapperChildren.add({
+     *   style: { 'background-color': 'red'}
+     * });
+     * var comp2 = wrapperChildren.add({
+     *   tagName: 'span',
+     *   attributes: { title: 'Hello!'}
+     * });
+     * // Now let's add an other one inside first component
+     * // First we have to get the collection inside. Each
+     * // component has 'components' property
+     * var comp1Children = comp1.get('components');
+     * // Procede as before. You could also add multiple objects
+     * comp1Children.add([
+     *   { style: { 'background-color': 'blue'}},
+     *   { style: { height: '100px', width: '100px'}}
+     * ]);
+     * // Remove comp2
+     * wrapperChildren.remove(comp2);
+     * @returns Collection of components
+     */
+    getComponents(): Components;
+    /**
+     * Add new components to the wrapper's children. It's the same
+     * as 'cmp.getComponents().add(...)'
+     * @example
+     * // Example of a new component with some extra property
+     * var comp1 = cmp.addComponent({
+     *   tagName: 'div',
+     *   removable: true, // Can't remove it
+     *   draggable: true, // Can't move it
+     *   copyable: true, // Disable copy/past
+     *   content: 'Content text', // Text inside component
+     *   style: { color: 'red'},
+     *   attributes: { title: 'here' }
+     * });
+     * @param component - Component/s to add
+     * @param [component.tagName = 'div'] - Tag name
+     * @param [component.type = ''] - Type of the component. Available: ''(default), 'text', 'image'
+     * @param [component.removable = true] - If component is removable
+     * @param [component.draggable = true] - If is possible to move the component around the structure
+     * @param [component.droppable = true] - If is possible to drop inside other components
+     * @param [component.badgable = true] - If the badge is visible when the component is selected
+     * @param [component.stylable = true] - If is possible to style component
+     * @param [component.copyable = true] - If is possible to copy&paste the component
+     * @param [component.content = ''] - String inside component
+     * @param [component.style = {}] - Style object
+     * @param [component.attributes = {}] - Attribute object
+     * @param opt - the options object to be used by the [Components.add]{@link getComponents} method
+     * @returns Component/s added
+     */
+    addComponent(
+      component: {
         tagName?: string;
         type?: string;
         removable?: boolean;
@@ -1836,3453 +1831,3508 @@ declare namespace Backbone {
         content?: string;
         style?: any;
         attributes?: any;
-      }, opt: any): Component;
-      /**
-       * Render and returns wrapper element with all components inside.
-       * Once the wrapper is rendered, and it's what happens when you init the editor,
-       * the all new components will be added automatically and property changes are all
-       * updated immediately
-       */
-      render(): HTMLElement;
-      /**
-       * Remove all components
-       */
-      clear(): Components;
-      /**
-       * Add new component type.
-       * Read more about this in [Define New Component](https://grapesjs.com/docs/modules/Components.html#define-new-component)
-       * @param type - Component ID
-       * @param methods - Component methods
-       */
-      addType(type: string, methods: AddComponentOptions): Components;
-      /**
-       * Get component type.
-       * Read more about this in [Define New Component](https://grapesjs.com/docs/modules/Components.html#define-new-component)
-       * @param type - Component ID
-       * @returns Component type definition, eg. `{ model: ..., view: ... }`
-       */
-      getType(type: string): any;
-      /**
-       * Remove component type
-       * @param type - Component ID
-       * @returns Removed component type, undefined otherwise
-       */
-      removeType(type: string): any | undefined;
-      /**
-       * Return the array of all types
-       */
-      getTypes(): any[];
-    }
+      },
+      opt: any
+    ): Component;
+    /**
+     * Render and returns wrapper element with all components inside.
+     * Once the wrapper is rendered, and it's what happens when you init the editor,
+     * the all new components will be added automatically and property changes are all
+     * updated immediately
+     */
+    render(): HTMLElement;
+    /**
+     * Remove all components
+     */
+    clear(): Components;
+    /**
+     * Add new component type.
+     * Read more about this in [Define New Component](https://grapesjs.com/docs/modules/Components.html#define-new-component)
+     * @param type - Component ID
+     * @param methods - Component methods
+     */
+    addType(type: string, methods: AddComponentOptions): Components;
+    /**
+     * Get component type.
+     * Read more about this in [Define New Component](https://grapesjs.com/docs/modules/Components.html#define-new-component)
+     * @param type - Component ID
+     * @returns Component type definition, eg. `{ model: ..., view: ... }`
+     */
+    getType(type: string): any;
+    /**
+     * Remove component type
+     * @param type - Component ID
+     * @returns Removed component type, undefined otherwise
+     */
+    removeType(type: string): any | undefined;
+    /**
+     * Return the array of all types
+     */
+    getTypes(): any[];
+  }
 
-    interface ComponentProperties {
-      /**
-       * Component type, eg. `text`, `image`, `video`, etc.
-       * @defaultValue ''
-       */
-      type?: string;
-      /**
-       * HTML tag of the component, eg. `span`. Default: `div`
-       * @defaultValue 'div'
-       */
-      tagName?: string;
-      /**
-       * Key-value object of the component's attributes, eg. `{ title: 'Hello' }` Default: `{}`
-       * @defaultValue {}
-       */
-      attributes?: Record<string, any>;
-      /**
-       * Name of the component. Will be used, for example, in Layers and badges
-       * @defaultValue ''
-       */
-      name?: string;
-      /**
-       * When `true` the component is removable from the canvas, default: `true`
-       * @defaultValue true
-       */
-      removable?: boolean;
-      /**
+  interface ComponentProperties {
+    /**
+     * Component type, eg. `text`, `image`, `video`, etc.
+     * @defaultValue ''
+     */
+    type?: string;
+    /**
+     * HTML tag of the component, eg. `span`. Default: `div`
+     * @defaultValue 'div'
+     */
+    tagName?: string;
+    /**
+     * Key-value object of the component's attributes, eg. `{ title: 'Hello' }` Default: `{}`
+     * @defaultValue {}
+     */
+    attributes?: Record<string, any>;
+    /**
+     * Name of the component. Will be used, for example, in Layers and badges
+     * @defaultValue ''
+     */
+    name?: string;
+    /**
+     * When `true` the component is removable from the canvas, default: `true`
+     * @defaultValue true
+     */
+    removable?: boolean;
+    /**
        * Indicates if it's possible to drag the component inside others.
        You can also specify a query string to indentify elements,
        eg. `'.some-class[title=Hello], [data-gjs-type=column]'` means you can drag the component only inside elements
        containing `some-class` class and `Hello` title, and `column` components. In the case of a function, target and destination components are passed as arguments, return a Boolean to indicate if the drag is possible. Default: `true`
        * @defaultValue true
        */
-      draggable?: boolean | string | ((...params: any[]) => any);
-      /**
+    draggable?: boolean | string | ((...params: any[]) => any);
+    /**
        * Indicates if it's possible to drop other components inside. You can use
       a query string as with `draggable`. In the case of a function, target and destination components are passed as arguments, return a Boolean to indicate if the drop is possible. Default: `true`
        * @defaultValue true
        */
-      droppable?: boolean | string | ((...params: any[]) => any);
-      /**
-       * Set to false if you don't want to see the badge (with the name) over the component. Default: `true`
-       * @defaultValue true
-       */
-      badgable?: boolean;
-      /**
+    droppable?: boolean | string | ((...params: any[]) => any);
+    /**
+     * Set to false if you don't want to see the badge (with the name) over the component. Default: `true`
+     * @defaultValue true
+     */
+    badgable?: boolean;
+    /**
        * True if it's possible to style the component.
       You can also indicate an array of CSS properties which is possible to style, eg. `['color', 'width']`, all other properties
       will be hidden from the style manager. Default: `true`
        * @defaultValue true
        */
-      stylable?: boolean | String[];
-      ///**
-      // * Indicate an array of style properties to show up which has been marked as `toRequire`. Default: `[]`
-      // * @defaultValue []
-      // */
-      //`stylable-require`?: String[];
-      /**
-       * Indicate an array of style properties which should be hidden from the style manager. Default: `[]`
+    stylable?: boolean | String[];
+    ///**
+    // * Indicate an array of style properties to show up which has been marked as `toRequire`. Default: `[]`
+    // * @defaultValue []
+    // */
+    //`stylable-require`?: String[];
+    /**
+     * Indicate an array of style properties which should be hidden from the style manager. Default: `[]`
+     * @defaultValue []
+     */
+    unstylable?: String[];
+    /**
+     * It can be highlighted with 'dotted' borders if true. Default: `true`
+     * @defaultValue true
+     */
+    highlightable?: boolean;
+    /**
+     * True if it's possible to clone the component. Default: `true`
+     * @defaultValue true
+     */
+    copyable?: boolean;
+    /**
+     * Indicates if it's possible to resize the component. It's also possible to pass an object as [options for the Resizer](https://github.com/artf/grapesjs/blob/master/src/utils/Resizer.js). Default: `false`
+     */
+    resizable?: boolean;
+    /**
+     * Allow to edit the content of the component (used on Text components). Default: `false`
+     */
+    editable?: boolean;
+    /**
+     * Set to `false` if you need to hide the component inside Layers. Default: `true`
+     * @defaultValue true
+     */
+    layerable?: boolean;
+    /**
+     * Allow component to be selected when clicked. Default: `true`
+     * @defaultValue true
+     */
+    selectable?: boolean;
+    /**
+     * Shows a highlight outline when hovering on the element if `true`. Default: `true`
+     * @defaultValue true
+     */
+    hoverable?: boolean;
+    /**
+     * This property is used by the HTML exporter as void elements don't have closing tags, eg. `<br/>`, `<hr/>`, etc. Default: `false`
+     */
+    void?: boolean;
+    /**
+     * Component default style, eg. `{ width: '100px', height: '100px', 'background-color': 'red' }`
+     * @defaultValue {}
+     */
+    style?: any;
+    /**
+     * Component related styles, eg. `.my-component-class { color: red }`
+     * @defaultValue ''
+     */
+    styles?: string;
+    /**
+     * Content of the component (not escaped) which will be appended before children rendering. Default: `''`
+     * @defaultValue ''
+     */
+    content?: string;
+    /**
+     * Component's icon, this string will be inserted before the name (in Layers and badge), eg. it can be an HTML string '<i class="fa fa-square-o"></i>'. Default: `''`
+     * @defaultValue ''
+     */
+    icon?: string;
+    /**
+     * Component's javascript. More about it [here](/modules/Components-js.html). Default: `''`
+     * @defaultValue ''
+     */
+    script?: string | ((...params: any[]) => any);
+    ///**
+    // * You can specify javascript available only in export functions (eg. when you get the HTML).
+    //If this property is defined it will overwrite the `script` one (in export functions). Default: `''`
+    // * @defaultValue ''
+    // */
+    //script-export?: string | ((...params: any[]) => any);
+    /**
+     * Component's traits. More about it [here](/modules/Traits.html). Default: `['id', 'title']`
+     * @defaultValue ''
+     */
+    traits?: TraitOptions[] | String[] | Backbone.Collection<Trait>;
+    /**
+       * Indicates an array of properties which will be inhereted by all NEW appended children.
+       For example if you create a component likes this: `{ removable: false, draggable: false, propagate: ['removable', 'draggable'] }`
+       and append some new component inside, the new added component will get the exact same properties indicated in the `propagate` array (and the `propagate` property itself). Default: `[]`
        * @defaultValue []
        */
-      unstylable?: String[];
-      /**
-       * It can be highlighted with 'dotted' borders if true. Default: `true`
-       * @defaultValue true
+    propagate?: String[];
+    /**
+       * Set an array of items to show up inside the toolbar when the component is selected (move, clone, delete).
+      Eg. `toolbar: [ { attributes: {class: 'fa fa-arrows'}, command: 'tlb-move' }, ... ]`.
+      By default, when `toolbar` property is falsy the editor will add automatically commands `core:component-exit` (select parent component, added if there is one), `tlb-move` (added if `draggable`) , `tlb-clone` (added if `copyable`), `tlb-delete` (added if `removable`).
        */
-      highlightable?: boolean;
-      /**
-       * True if it's possible to clone the component. Default: `true`
-       * @defaultValue true
-       */
-      copyable?: boolean;
-      /**
-       * Indicates if it's possible to resize the component. It's also possible to pass an object as [options for the Resizer](https://github.com/artf/grapesjs/blob/master/src/utils/Resizer.js). Default: `false`
-       */
-      resizable?: boolean;
-      /**
-       * Allow to edit the content of the component (used on Text components). Default: `false`
-       */
-      editable?: boolean;
-      /**
-       * Set to `false` if you need to hide the component inside Layers. Default: `true`
-       * @defaultValue true
-       */
-      layerable?: boolean;
-      /**
-       * Allow component to be selected when clicked. Default: `true`
-       * @defaultValue true
-       */
-      selectable?: boolean;
-      /**
-       * Shows a highlight outline when hovering on the element if `true`. Default: `true`
-       * @defaultValue true
-       */
-      hoverable?: boolean;
-      /**
-       * This property is used by the HTML exporter as void elements don't have closing tags, eg. `<br/>`, `<hr/>`, etc. Default: `false`
-       */
-      void?: boolean;
-      /**
-       * Component default style, eg. `{ width: '100px', height: '100px', 'background-color': 'red' }`
-       * @defaultValue {}
-       */
-      style?: any;
-      /**
-       * Component related styles, eg. `.my-component-class { color: red }`
-       * @defaultValue ''
-       */
-      styles?: string;
-      /**
-       * Content of the component (not escaped) which will be appended before children rendering. Default: `''`
-       * @defaultValue ''
-       */
-      content?: string;
-      /**
-       * Component's icon, this string will be inserted before the name (in Layers and badge), eg. it can be an HTML string '<i class="fa fa-square-o"></i>'. Default: `''`
-       * @defaultValue ''
-       */
-      icon?: string;
-      /**
-       * Component's javascript. More about it [here](/modules/Components-js.html). Default: `''`
-       * @defaultValue ''
-       */
-      script?: string | ((...params: any[]) => any);
-      ///**
-      // * You can specify javascript available only in export functions (eg. when you get the HTML).
-      //If this property is defined it will overwrite the `script` one (in export functions). Default: `''`
-      // * @defaultValue ''
-      // */
-      //script-export?: string | ((...params: any[]) => any);
-      /**
-       * Component's traits. More about it [here](/modules/Traits.html). Default: `['id', 'title']`
-       * @defaultValue ''
-       */
-      traits?: TraitOptions[] | String[] | Backbone.Collection<Trait>;
-      /**
-       * Indicates an array of properties which will be inhereted by all NEW appended children.
-       For example if you create a component likes this: `{ removable: false, draggable: false, propagate: ['removable', 'draggable'] }`
-       and append some new component inside, the new added component will get the exact same properties indicated in the `propagate` array (and the `propagate` property itself). Default: `[]`
-       * @defaultValue []
-       */
-      propagate?: String[];
-      /**
-       * Set an array of items to show up inside the toolbar when the component is selected (move, clone, delete).
-      Eg. `toolbar: [ { attributes: {class: 'fa fa-arrows'}, command: 'tlb-move' }, ... ]`.
-      By default, when `toolbar` property is falsy the editor will add automatically commands `core:component-exit` (select parent component, added if there is one), `tlb-move` (added if `draggable`) , `tlb-clone` (added if `copyable`), `tlb-delete` (added if `removable`).
-       */
-      toolbar?: object[];
-      ///**
-      // * Children components. Default: `null`
-      // */
-      components?: Backbone.Collection<Component>;
-      [key: string]: any
-    }
-
-    /**
-    * The Component object represents a single node of our template structure, so when you update its properties the changes are
-    * immediately reflected on the canvas and in the code to export (indeed, when you ask to export the code we just go through all
-    * the tree of nodes).
-    * An example on how to update properties:
-    * ```js
-    * component.set({
-    *  tagName: 'span',
-    *  attributes: { ... },
-    *  removable: false,
-    * });
-    * component.get('tagName');
-    * // -> 'span'
-    * ```
-    *
-    * [Component]: component.html
-    */
-    interface Component extends Backbone.Model<ComponentProperties> {
-      view?: ComponentView
-
-      /**
-      * Hook method, called once the model is created
-      */
-      init(): void;
-
-      /**
-      * Hook method, called when the model has been updated (eg. updated some model's property)
-      * @param property - Property name, if triggered after some property update
-      * @param value - Property value, if triggered after some property update
-      * @param previous - Property previous value, if triggered after some property update
-      */
-      updated(property: string, value: any, previous: any): void;
-
-      /**
-      * Hook method, called once the model has been removed
-      */
-      removed(): void;
-
-      /**
-      * Check component's type
-      * @example
-      * component.is('image')
-      * // -> false
-      * @param type - Component type
-      */
-      is(type: string): boolean;
-
-      /**
-      * Return all the propeties
-      */
-      props(): ComponentProperties;
-
-      /**
-      * Get the index of the component in the parent collection.
-      */
-      index(): number;
-
-      /**
-      * Change the drag mode of the component.
-      * To get more about this feature read: https://github.com/artf/grapesjs/issues/1936
-      * @param value - Drag mode, options: 'absolute' | 'translate'
-      */
-      setDragMode(value: string): this;
-
-      /**
-      * Find inner components by query string.
-      * **ATTENTION**: this method works only with already rendered component
-      * @example
-      * component.find('div > .class');
-      * // -> [Component, Component, ...]
-      * @param query - Query string
-      * @returns Array of components
-      */
-      find(query: string): Component[];
-
-      /**
-      * Find all inner components by component type.
-      * The advantage of this method over `find` is that you can use it
-      * also before rendering the component
-      * @example
-      * const allImages = component.findType('image');
-      * console.log(allImages[0]) // prints the first found component
-      * @param type - Component type
-      */
-      findType(type: string): Component[];
-
-      /**
-      * Find the closest parent component by query string.
-      * **ATTENTION**: this method works only with already rendered component
-      * @example
-      * component.closest('div.some-class');
-      * // -> Component
-      * @param query - Query string
-      */
-      closest(query: string): Component;
-
-      /**
-      * Find the closest parent component by its type.
-      * The advantage of this method over `closest` is that you can use it
-      * also before rendering the component
-      * @example
-      * const Section = component.closestType('section');
-      * console.log(Section);
-      * @param type - Component type
-      * @returns Found component, otherwise `undefined`
-      */
-      closestType(type: string): Component;
-
-      /**
-      * The method returns a Boolean value indicating whether the passed
-      * component is a descendant of a given component
-      * @param component - Component to check
-      */
-      contains(component: Component): boolean;
-
-      /**
-      * Replace a component with another one
-      * @example
-      * component.replaceWith('<div>Some new content</div>');
-      * // -> Component
-      * @param el - Component or HTML string
-      * @returns New added component/s
-      */
-      replaceWith(el: string | Component): Component | Component[];
-
-      /**
-      * Update attributes of the component
-      * @example
-      * component.setAttributes({ id: 'test', 'data-key': 'value' });
-      * @param attrs - Key value attributes
-      * @param options - Options for the model update
-      */
-      setAttributes(attrs: any, options: any): this;
-
-      /**
-      * Add attributes to the component
-      * @example
-      * component.addAttributes({ 'data-key': 'value' });
-      * @param attrs - Key value attributes
-      * @param options - Options for the model update
-      */
-      addAttributes(attrs: any, options: any): this;
-
-      /**
-      * Remove attributes from the component
-      * @example
-      * component.removeAttributes('some-attr');
-      * component.removeAttributes(['some-attr1', 'some-attr2']);
-      * @param attrs - Array of attributes to remove
-      * @param options - Options for the model update
-      */
-      removeAttributes(attrs: string | String[], options: any): this;
-
-      /**
-      * Get the style of the component
-      */
-      getStyle(): any;
-
-      /**
-      * Set the style on the component
-      * @example
-      * component.setStyle({ color: 'red' });
-      * @param prop - Key value style object
-      */
-      setStyle(prop: any): any;
-
-      /**
-      * Return all component's attributes
-      */
-      getAttributes(): Record<string, any>;
-
-      /**
-      * Add classes
-      * @example
-      * model.addClass('class1');
-      * model.addClass('class1 class2');
-      * model.addClass(['class1', 'class2']);
-      * // -> [SelectorObject, ...]
-      * @param classes - Array or string of classes
-      * @returns Array of added selectors
-      */
-      addClass(classes: String[] | string): any[];
-
-      /**
-      * Set classes (resets current collection)
-      * @example
-      * model.setClass('class1');
-      * model.setClass('class1 class2');
-      * model.setClass(['class1', 'class2']);
-      * // -> [SelectorObject, ...]
-      * @param classes - Array or string of classes
-      * @returns Array of added selectors
-      */
-      setClass(classes: String[] | string): any[];
-
-      /**
-      * Remove classes
-      * @example
-      * model.removeClass('class1');
-      * model.removeClass('class1 class2');
-      * model.removeClass(['class1', 'class2']);
-      * // -> [SelectorObject, ...]
-      * @param classes - Array or string of classes
-      * @returns Array of removed selectors
-      */
-      removeClass(classes: String[] | string): any[];
-
-      /**
-      * Returns component's classes as an array of strings
-      */
-      getClasses(): any[];
-
-      /**
-      * Add new component children
-      * @example
-      * someComponent.get('components').length // -> 0
-      * const videoComponent = someComponent.append('<video></video><div></div>')[0];
-      * // This will add 2 components (`video` and `div`) to your `someComponent`
-      * someComponent.get('components').length // -> 2
-      * // You can pass components directly
-      * otherComponent.append(otherComponent2);
-      * otherComponent.append([otherComponent3, otherComponent4]);
-      * // append at specific index (eg. at the beginning)
-      * someComponent.append(otherComponent, { at: 0 });
-      * @param components - Component to add
-      * @param [opts = {}] - Options for the append action
-      * @returns Array of appended components
-      */
-      append(components: Component | string, opts?: any): any[];
-
-      /**
-      * Set new collection if `components` are provided, otherwise the
-      * current collection is returned
-      * @example
-      * // Set new collection
-      * component.components('<span></span><div></div>');
-      * // Get current collection
-      * const collection = component.components();
-      * console.log(collection.length);
-      * // -> 2
-      * @param [components] - Component Definitions or HTML string
-      * @param [opts = {}] - Options, same as in `Component.append()`
-      */
-      components(components?: Component | string, opts?: any): Backbone.Collection<Component>;
-
-      /**
-      * If exists, returns the child component at specific index.
-      * @example
-      * // Return first child
-      * component.getChildAt(0);
-      * // Return second child
-      * component.getChildAt(1);
-      * @param index - Index of the component to return
-      */
-      getChildAt(index: number): any;
-
-      /**
-      * If exists, returns the last child component.
-      * @example
-      * const lastChild = component.getLastChild();
-      */
-      getLastChild(): any;
-
-      /**
-      * Remove all inner components
-      * * @return {this}
-      */
-      empty(): void;
-
-      /**
-      * Get the parent component, if exists
-      * @example
-      * component.parent();
-      * // -> Component
-      */
-      parent(): Component | null;
-
-      /**
-      * Get traits.
-      * @example
-      * const traits = component.getTraits();
-      * console.log(traits);
-      * // [Trait, Trait, Trait, ...]
-      */
-      getTraits(): Trait[];
-
-      /**
-      * Replace current collection of traits with a new one.
-      * @example
-      * const traits = component.setTraits([{ type: 'checkbox', name: 'disabled'}, ...]);
-      * console.log(traits);
-      * // [Trait, ...]
-      * @param traits - Array of trait definitions
-      */
-      setTraits(traits: object[]): Trait[];
-
-      /**
-      * Get the trait by id/name.
-      * @example
-      * const traitTitle = component.getTrait('title');
-      * traitTitle && traitTitle.set('label', 'New label');
-      * @param id - The `id` or `name` of the trait
-      * @returns Trait getModelToStyle
-      */
-      getTrait(id: string): Trait | null;
-
-      /**
-      * Update a trait.
-      * @example
-      * component.updateTrait('title', {
-      *  type: 'select',
-      *  options: [ 'Option 1', 'Option 2' ],
-      * });
-      * @param id - The `id` or `name` of the trait
-      * @param props - Object with the props to update
-      */
-      updateTrait(id: string, props: any): this;
-
-      /**
-      * Get the trait position index by id/name. Useful in case you want to
-      * replace some trait, at runtime, with something else.
-      * @example
-      * const traitTitle = component.getTraitIndex('title');
-      * console.log(traitTitle); // 1
-      * @param id - The `id` or `name` of the trait
-      * @returns Index position of the current trait
-      */
-      getTraitIndex(id: string): number;
-
-      /**
-      * Remove trait/s by id/s.
-      * @example
-      * component.removeTrait('title');
-      * component.removeTrait(['title', 'id']);
-      * @param id - The `id`/`name` of the trait (or an array)
-      * @returns Array of removed traits
-      */
-      removeTrait(id: string | String[]): Trait[];
-
-      /**
-      * Add new trait/s.
-      * @example
-      * component.addTrait('title', { at: 1 }); // Add title trait (`at` option is the position index)
-      * component.addTrait({
-      *  type: 'checkbox',
-      *  name: 'disabled',
-      * });
-      * component.addTrait(['title', {...}, ...]);
-      * @param trait - Trait to add (or an array of traits)
-      * @param opts - Options for the add
-      * @returns Array of added traits
-      */
-      addTrait(trait: string | any | (String | object)[], opts: Record<string, any>): Trait[];
-
-      /**
-      * Get the name of the component
-      */
-      getName(): string;
-
-      /**
-      * Get the icon string
-      */
-      getIcon(): string;
-
-      /**
-      * Return HTML string of the component
-      * @example
-      * // Simple HTML return
-      * component.set({ tagName: 'span' });
-      * component.setAttributes({ title: 'Hello' });
-      * component.toHTML();
-      * // -> <span title="Hello"></span>
-      *
-      * // Custom attributes
-      * component.toHTML({ attributes: { 'data-test': 'Hello' } });
-      * // -> <span data-test="Hello"></span>
-      *
-      * // Custom dynamic attributes
-      * component.toHTML({
-      *  attributes(component, attributes) {
-      *    if (component.get('tagName') == 'span') {
-      *      attributes.title = 'Custom attribute';
-      *    }
-      *    return attributes;
-      *  },
-      * });
-      * // -> <span title="Custom attribute"></span>
-      * @param [opts = {}] - Options
-      * @param [opts.tag] - Custom tagName
-      * @param [opts.attributes = null] - You can pass an object of custom attributes to replace with the current ones or you can even pass a function to generate attributes dynamically.
-      * @param [opts.withProps] - Include component properties as `data-gjs-*` attributes. This allows you to have re-importable HTML.
-      * @param [opts.altQuoteAttr] - In case the attribute value contains a `"` char, instead of escaping it (`attr="value &quot;"`), the attribute will be quoted using single quotes (`attr='value "'`).
-      * @returns HTML string
-      */
-      toHTML(opts?: {
-        tag?: string;
-        attributes?: any | ((...params: any[]) => any);
-        withProps?: boolean;
-        altQuoteAttr?: boolean;
-      }): string;
-
-      /**
-      * Get inner HTML of the component
-      * @param [opts = {}] - Same options of `toHTML`
-      * @returns HTML string
-      */
-      getInnerHTML(opts?: any): string;
-
-      /**
-      * Return an object containing only changed props
-      */
-      getChangedProps(): void;
-
-      /**
-      * Get block id
-      */
-      getId(): string;
-
-      /**
-      * Set new id on the component
-      */
-      setId(id: string): this;
-
-      /**
-      * Get the DOM element of the component.
-      * This works only if the component is already rendered
-      * @param frame - Specific frame from which taking the element
-      */
-      getEl(frame?: Frame): HTMLElement;
-
-      /**
-      * Get the View of the component.
-      * This works only if the component is already rendered
-      * @param frame - Get View of a specific frame
-      */
-      getView(frame?: Frame): ComponentView;
-
-      /**
-      * Execute callback function on itself and all inner components
-      * @example
-      * component.onAll(component => {
-      *  // do something with component
-      * })
-      * @param clb - Callback function, the model is passed as an argument
-      */
-      onAll(clb: (...params: any[]) => any): this;
-
-      /**
-      * Remove the component
-      */
-      remove(): this;
-
-      /**
-      * Move the component to another destination component
-      * @example
-      * // Move the selected component on top of the wrapper
-      * const dest = editor.getWrapper();
-      * editor.getSelected().move(dest, { at: 0 });
-      * @param component - Destination component (so the current one will be appended as a child)
-      * @param opts - Options for the append action
-      */
-      move(component: Component, opts: any): this;
-    }
-
-    /**
-    * You can customize the initial state of the module from the editor initialization, by passing the following [Configuration Object](https://github.com/artf/grapesjs/blob/master/src/panels/config/config.js)
-    * ```js
-    * const editor = grapesjs.init({
-    *  panels: {
-    *    // options
-    *  }
-    * })
-    * ```
-    *
-    * Once the editor is instantiated you can use its API. Before using these methods you should get the module from the instance
-    *
-    * ```js
-    * const panelManager = editor.Panels;
-    * ```
-    *
-    * * [addPanel](#addpanel)
-    * * [addButton](#addbutton)
-    * * [getButton](#getbutton)
-    * * [getPanel](#getpanel)
-    * * [getPanels](#getpanels)
-    * * [getPanelsEl](#getpanelsel)
-    * * [removePanel](#removepanel)
-    * * [removeButton](#removebutton)
-    */
-    interface Panels {
-      /**
-       * Returns the collection of panels
-       * @returns Collection of panel
-       */
-      getPanels(): Backbone.Collection<Panel>;
-      /**
-       * Returns panels element
-       */
-      getPanelsEl(): HTMLElement;
-      /**
-       * Add new panel to the collection
-       * @example
-       * var newPanel = panelManager.addPanel({
-       *   id: 'myNewPanel',
-       *  visible  : true,
-       *  buttons  : [...],
-       * });
-       * @param panel - Object with right properties or an instance of Panel
-       * @returns Added panel. Useful in case passed argument was an Object
-       */
-      addPanel(panel: any | Panel): Panel;
-      /**
-       * Remove a panel from the collection
-       * @example
-       * const newPanel = panelManager.removePanel({
-       *   id: 'myNewPanel',
-       *  visible  : true,
-       *  buttons  : [...],
-       * });
-       *
-       * const newPanel = panelManager.removePanel('myNewPanel');
-       * @param panel - Object with right properties or an instance of Panel or Painel id
-       * @returns Removed panel. Useful in case passed argument was an Object
-       */
-      removePanel(panel: any | Panel | string): Panel;
-      /**
-       * Get panel by ID
-       * @example
-       * var myPanel = panelManager.getPanel('myNewPanel');
-       * @param id - Id string
-       */
-      getPanel(id: string): Panel | null;
-      /**
-       * Add button to the panel
-       * @example
-       * var newButton = panelManager.addButton('myNewPanel',{
-       *   id: 'myNewButton',
-       *   className: 'someClass',
-       *   command: 'someCommand',
-       *   attributes: { title: 'Some title'},
-       *   active: false,
-       * });
-       * // It's also possible to pass the command as an object
-       * // with .run and .stop methods
-       * ...
-       * command: {
-       *   run: function(editor) {
-       *     ...
-       *   },
-       *   stop: function(editor) {
-       *     ...
-       *   }
-       * },
-       * // Or simply like a which will be evaluated as a single .run command
-       * ...
-       * command: function(editor) {
-       *   ...
-       * }
-       * @param panelId - Panel's ID
-       * @param button - Button object or instance of Button
-       * @returns Added button. Useful in case passed button was an Object
-       */
-      addButton(panelId: string, button: ButtonOptions | Button): Button | null;
-      /**
-       * Remove button from the panel
-       * @example
-       * const removedButton = panelManager.addButton('myNewPanel',{
-       *   id: 'myNewButton',
-       *   className: 'someClass',
-       *   command: 'someCommand',
-       *   attributes: { title: 'Some title'},
-       *   active: false,
-       * });
-       *
-       * const removedButton = panelManager.removeButton('myNewPanel', 'myNewButton');
-       * @param panelId - Panel's ID
-       * @param buttonId - Button's ID
-       * @returns Removed button.
-       */
-      removeButton(panelId: string, buttonId: string): Button | null;
-      /**
-       * Get button from the panel
-       * @example
-       * var button = panelManager.getButton('myPanel','myButton');
-       * @param panelId - Panel's ID
-       * @param id - Button's ID
-       */
-      getButton(panelId: string, id: string): Button | null;
-    }
-
-    /**
-    * With Style Manager you build categories (called sectors) of CSS properties which could be used to customize the style of components.
-    * You can customize the initial state of the module from the editor initialization, by passing the following [Configuration Object](https://github.com/artf/grapesjs/blob/master/src/style_manager/config/config.js)
-    * ```js
-    * const editor = grapesjs.init({
-    *  styleManager: {
-    *    // options
-    *  }
-    * })
-    * ```
-    *
-    * Once the editor is instantiated you can use its API and listen to its events. Before using these methods, you should get the module from the instance.
-    *
-    * ```js
-    * // Listen to events
-    * editor.on('style:sector:add', (sector) => { ... });
-    *
-    * // Use the API
-    * const styleManager = editor.StyleManager;
-    * styleManager.addSector(...);
-    * ```
-    * ## Available Events
-    * * `style:sector:add` - Sector added. The [Sector] is passed as an argument to the callback.
-    * * `style:sector:remove` - Sector removed. The [Sector] is passed as an argument to the callback.
-    * * `style:sector:update` - Sector updated. The [Sector] and the object containing changes are passed as arguments to the callback.
-    * * `style:property:add` - Property added. The [Property] is passed as an argument to the callback.
-    * * `style:property:remove` - Property removed. The [Property] is passed as an argument to the callback.
-    * * `style:property:update` - Property updated. The [Property] and the object containing changes are passed as arguments to the callback.
-    * * `style:target` - Target selection changed. The target (or `null` in case the target is deselected) is passed as an argument to the callback.
-    * <!--
-    * * `styleManager:update:target` - The target (Component or CSSRule) is changed
-    * * `styleManager:change` - Triggered on style property change from new selected component, the view of the property is passed as an argument to the callback
-    * * `styleManager:change:{propertyName}` - As above but for a specific style property
-    * -->
-    *
-    * ## Methods
-    * * [getConfig](#getconfig)
-    * * [addSector](#addsector)
-    * * [getSector](#getsector)
-    * * [getSectors](#getsectors)
-    * * [removeSector](#removesector)
-    * * [addProperty](#addproperty)
-    * * [getProperty](#getproperty)
-    * * [getProperties](#getproperties)
-    * * [removeProperty](#removeproperty)
-    * * [select](#select)
-    * * [getSelected](#getselected)
-    * * [getSelectedAll](#getselectedall)
-    * * [getSelectedParents](#getselectedparents)
-    * * [addStyleTargets](#addstyletargets)
-    * * [getBuiltIn](#getbuiltin)
-    * * [getBuiltInAll](#getbuiltinall)
-    * * [addBuiltIn](#addbuiltin)
-    * * [addType](#addtype)
-    * * [getType](#gettype)
-    * * [getTypes](#gettypes)
-    *
-    * [Sector]: sector.html
-    * [CssRule]: css_rule.html
-    * [Component]: component.html
-    * [Property]: property.html
-    */
-    interface StyleManager {
-      /**
-       * Get configuration object
-       */
-      getConfig(): StyleManagerConfig;
-      /**
-       * Add new sector. If the sector with the same id already exists, that one will be returned.
-       * @example
-       * const sector = styleManager.addSector('mySector',{
-       *   name: 'My sector',
-       *   open: true,
-       *   properties: [{ name: 'My property'}]
-       * }, { at: 0 });
-       * // With `at: 0` we place the new sector at the beginning of the list
-       * @param id - Sector id
-       * @param sector - Sector definition. Check the [available properties](sector.html#properties)
-       * @param [options = {}] - Options
-       * @param [options.at] - Position index (by default, will be appended at the end).
-       */
-      addSector(id: string, sector: any, options?: {
-          at?: number;
-      }): any;
-      /**
-       * Get sector by id.
-       * @example
-       * const sector = styleManager.getSector('mySector');
-       * @param id - Sector id
-       */
-      getSector(id: string): any;
-      /**
-       * Get all sectors.
-       * @example
-       * const sectors = styleManager.getSectors();
-       * @param [opts = {}] - Options
-       * @param [opts.visible] - Returns only visible sectors
-       */
-      getSectors(opts?: {
-          visible?: boolean;
-      }): any;
-      /**
-       * Remove sector by id.
-       * @example
-       * const removed = styleManager.removeSector('mySector');
-       * @param id - Sector id
-       */
-      removeSector(id: string): any;
-      /**
-       * Add new property to the sector.
-       * @example
-       * const property = styleManager.addProperty('mySector', {
-       *   label: 'Minimum height',
-       *   property: 'min-height',
-       *   type: 'select',
-       *   default: '100px',
-       *   options: [
-       *    { id: '100px', label: '100' },
-       *    { id: '200px', label: '200' },
-       *   ],
-       * }, { at: 0 });
-       * @param sectorId - Sector id.
-       * @param property - Property definition. Check the [base available properties](property.html#properties) + others based on the `type` of your property.
-       * @param [opts = {}] - Options
-       * @param [opts.at] - Position index (by default, will be appended at the end).
-       */
-      addProperty(sectorId: string, property: any, opts?: {
-          at?: number;
-      }): any;
-      /**
-       * Get the property.
-       * @example
-       * const property = styleManager.getProperty('mySector', 'min-height');
-       * @param sectorId - Sector id.
-       * @param id - Property id.
-       */
-      getProperty(sectorId: string, id: string): any;
-      /**
-       * Get all properties of the sector.
-       * @example
-       * const properties = styleManager.getProperties('mySector');
-       * @param sectorId - Sector id.
-       */
-      getProperties(sectorId: string): any;
-      /**
-       * Remove the property.
-       * @example
-       * const property = styleManager.removeProperty('mySector', 'min-height');
-       * @param sectorId - Sector id.
-       * @param id - Property id.
-       */
-      removeProperty(sectorId: string, id: string): any;
-      /**
-       * Select new target.
-       * The target could be a Component, CSSRule, or a CSS selector string.
-       * @example
-       * // Select the first button in the current page
-       * const wrapperCmp = editor.Pages.getSelected().getMainComponent();
-       * const btnCmp = wrapperCmp.find('button')[0];
-       * btnCmp && styleManager.select(btnCmp);
-       *
-       * // Set as a target the CSS selector
-       * styleManager.select('.btn > span');
-       */
-      select(): any;
-      /**
-       * Get the last selected target.
-       * By default, the Style Manager shows styles of the last selected target.
-       */
-      getSelected(): any;
-      /**
-       * Get the array of selected targets.
-       */
-      getSelectedAll(): any;
-      /**
-       * Get parent rules of the last selected target.
-       */
-      getSelectedParents(): any;
-      /**
-       * Update selected targets with a custom style.
-       * @example
-       * styleManager.addStyleTargets({ color: 'red' });
-       * @param style - Style object
-       * @param [opts = {}] - Options
-       */
-      addStyleTargets(style: any, opts?: any): void;
-      /**
-       * Return built-in property definition
-       * @example
-       * const widthPropDefinition = styleManager.getBuiltIn('width');
-       * @param prop - Property name.
-       * @returns Property definition.
-       */
-      getBuiltIn(prop: string): any | null;
-      /**
-       * Get all the available built-in property definitions.
-       */
-      getBuiltInAll(): any;
-      /**
-       * Add built-in property definition.
-       * If the property exists already, it will extend it.
-       * @example
-       * const sector = styleManager.addBuiltIn('new-property', {
-       *  type: 'select',
-       *  default: 'value1',
-       *  options: [{ id: 'value1', label: 'Some label' }, ...],
-       * })
-       * @param prop - Property name.
-       * @param definition - Property definition.
-       * @returns Added property definition.
-       */
-      addBuiltIn(prop: string, definition: any): any;
-      /**
-       * Add new property type
-       * @example
-       * styleManager.addType('my-custom-prop', {
-       *    // Create UI
-       *    create({ props, change }) {
-       *      const el = document.createElement('div');
-       *      el.innerHTML = '<input type="range" class="my-input" min="10" max="50"/>';
-       *      const inputEl = el.querySelector('.my-input');
-       *      inputEl.addEventListener('change', event => change({ event }));
-       *      inputEl.addEventListener('input', event => change({ event, partial: true }));
-       *      return el;
-       *    },
-       *    // Propagate UI changes up to the targets
-       *    emit({ props, updateStyle }, { event, partial }) {
-       *      const { value } = event.target;
-       *      updateStyle(`${value}px`, { partial });
-       *    },
-       *    // Update UI (eg. when the target is changed)
-       *    update({ value, el }) {
-       *      el.querySelector('.my-input').value = parseInt(value, 10);
-       *    },
-       *    // Clean the memory from side effects if necessary (eg. global event listeners, etc.)
-       *    destroy() {}
-       * })
-       * @param id - Type ID
-       * @param definition - Definition of the type.
-       */
-      addType(id: string, definition: any): void;
-      /**
-       * Get type
-       * @param id - Type ID
-       * @returns Type definition
-       */
-      getType(id: string): any;
-      /**
-       * Get all types
-       */
-      getTypes(): any[];
-    }
+    toolbar?: object[];
+    ///**
+    // * Children components. Default: `null`
+    // */
+    components?: Backbone.Collection<Component>;
+    [key: string]: any;
+  }
 
-    interface SectorOptions {
-      /**
-       * Sector id, eg. `typography`
-       */
-      id: string;
-      /**
-       * Sector name, eg. `Typography`
-       */
-      name: string;
-      /**
-       * Indicates the open state.
-       * @defaultValue true
-       */
-      open?: boolean;
-      /**
-       * Indicate an array of Property defintions.
-       * @defaultValue []
-       */
-      properties?: AnyProperty[];
-    }
-
-    interface Sector extends Backbone.Model<SectorOptions> {
-      /**
-      * Get sector id
-      */
-      getId(): string;
-
-      /**
-      * Get sector name
-      */
-      getName(): string;
-
-      /**
-      * Update sector name.
-      * @param value - New sector name
-      */
-      setName(value: string): void;
-
-      /**
-      * Check if the sector is open
-      */
-      isOpen(): boolean;
-
-      /**
-      * Update Sector open state
-      */
-      setOpen(value: boolean): void;
-
-      /**
-      * Check if the sector is visible
-      */
-      isVisible(): boolean;
-
-      /**
-      * Get sector properties.
-      * @param [opts = {}] - Options
-      * @param [opts.withValue = false] - Get only properties with value
-      * @param [opts.withParentValue = false] - Get only properties with parent value
-      */
-      getProperties(opts?: {
-        withValue?: boolean;
-        withParentValue?: boolean;
-      }): AnyProperty[];
-    }
-
-    interface PropertyOptions {
-
-      /**
-       * Property id, eg. `my-property-id`.
-       */
-      id: string;
-      /**
-       * Related CSS property name, eg. `text-align`.
-       */
-      property: string;
-      /**
-       * Defaul value of the property.
-       */
-      default: string;
-      /**
-       * Label to use in UI, eg. `Text Align`.
-       */
-      label: string;
-      /**
-       * Change callback.
-      \n
-      ```js
-       onChange: ({ property, from, to }) => {
-         console.log(`Changed property`, property.getName(), { from, to });
-       }
-      ```
-       */
-      onChange?: (...params: any[]) => any;
-    }
-
-    interface Property<T extends PropertyOptions> extends Backbone.Model<T> {
-      /**
-      * Get property id
-      */
-      getId(): string;
-
-      /**
-       * Get the property type.
-       * The type of the property is defined on property creation and based on its value the proper Property class is assigned.
-       * The default type is `base`.
-       */
-      getType(): string;
+  /**
+   * The Component object represents a single node of our template structure, so when you update its properties the changes are
+   * immediately reflected on the canvas and in the code to export (indeed, when you ask to export the code we just go through all
+   * the tree of nodes).
+   * An example on how to update properties:
+   * ```js
+   * component.set({
+   *  tagName: 'span',
+   *  attributes: { ... },
+   *  removable: false,
+   * });
+   * component.get('tagName');
+   * // -> 'span'
+   * ```
+   *
+   * [Component]: component.html
+   */
+  interface Component extends Backbone.Model<ComponentProperties> {
+    view?: ComponentView;
 
-      /**
-       * Get name (the CSS property name).
-       */
-      getName(): string;
+    /**
+     * Hook method, called once the model is created
+     */
+    init(): void;
 
-      /**
-       * Get property label.
-       * @param {Object} [opts={}] Options
-       * @param {Boolean} [opts.locale=true] Use the locale string from i18n module
-       */
-      getLabel(opts?: {locale?: boolean}): string;
-
-      /**
-      * Get property value.
-      * @param [opts = {}] - Options
-      * @param [opts.noDefault = false] - Avoid returning the default value
-      */
-      getValue(opts?: {
-        noDefault?: boolean;
-      }): string;
-
-      /**
-      * Check if the property has value.
-      * @param [opts = {}] - Options
-      * @param [opts.noParent = false] - Ignore the value if it comes from the parent target.
-      */
-      hasValue(opts?: {
-        noParent?: boolean;
-      }): boolean;
-
-      /**
-      * Indicates if the current value is coming from a parent target (eg. another CSSRule).
-      */
-      hasValueParent(): boolean;
-
-      /**
-       * Get the CSS style object of the property.
-       * @param {Object} [opts={}] Options
-       * @param {Boolean} [opts.camelCase] Return property name in camelCase.
-       * @example
-       * // In case the property is `color` with a value of `red`.
-       * console.log(property.getStyle());
-       * // { color: 'red' };
-       */
-      getStyle(opts?: {camelCase?: boolean}): any;
-
-      /**
-      * Get the default value.
-      */
-      getDefaultValue(): string;
-
-      /**
-      * Update the value.
-      * The change is also propagated to the selected targets (eg. CSS rule).
-      * @param value - New value
-      * @param [opts = {}] - Options
-      * @param [opts.partial = false] - If `true` the update on targets won't be considered complete (not stored in UndoManager)
-      * @param [opts.noTarget = false] - If `true` the change won't be propagated to selected targets.
-      */
-      upValue(value: string, opts?: {
-        partial?: boolean;
-        noTarget?: boolean;
-      }): void;
-
-      /**
-      * Check if the sector is visible
-      */
-      isVisible(): boolean;
-
-      /**
-      * Clear the value.
-      * The change is also propagated to the selected targets (eg. the css property is cleared).
-      * @param [opts = {}] - Options
-      * @param [opts.noTarget = false] - If `true` the change won't be propagated to selected targets.
-      */
-      clear(opts?: {
-        noTarget?: boolean;
-      }): void;
-
-      /**
-      * Indicates if the current value comes directly from the selected target and so can be cleared.
-      */
-      canClear(): boolean;
-
-      /**
-      * If the current property is a sub-property, this will return the parent Property.
-      */
-      getParent(): any;
-
-      /**
-      * Indicates if the property is full-width in UI.
-      */
-      isFull(): boolean;
-    }
-
-    interface PropertyNumberOptions extends PropertyOptions {
-      /**
-       * Array of units, eg. `['px', '%']`
-       */
-      units: String[];
-      /**
-       * Minimum value.
-       */
-      min: number;
-      /**
-       * Maximum value.
-       */
-      max: number;
-      /**
-       * Step value.
-       */
-      step: number;
-    }
-
-    interface PropertyNumber extends Property<PropertyNumberOptions> {
-      /**
-      * Get property units.
-      */
-      getUnits(): String[];
-
-      /**
-      * Get property unit value.
-      */
-      getUnit(): string;
-
-      /**
-      * Get min value.
-      */
-      getMin(): number;
-
-      /**
-      * Get max value.
-      */
-      getMax(): number;
-
-      /**
-      * Get step value.
-      */
-      getStep(): number;
-
-      /**
-      * Update property unit value.
-      * The change is also propagated to the selected targets.
-      * @param unit - New unit value
-      * @param [opts = {}] - Options
-      * @param [opts.noTarget = false] - If `true` the change won't be propagated to selected targets.
-      */
-      upUnit(unit: string, opts?: {
-        noTarget?: boolean;
-      }): string;
-    }
-
-    interface SelectOption {
-      id?: string
-      value?: string
-      label? : string
-      name?: string
-    }
-
-    interface PropertySelectOptions extends PropertyOptions {
-      /**
-       * Array of option definitions.
-      \n
-      ```js
-      options: [
-       { id: '100', label: 'Set 100' },
-       { id: '200', label: 'Set 200' },
-      ]
-      ```
-       */
-      options: SelectOption[];
-    }
-
-    interface PropertySelect extends Property<PropertySelectOptions> {
-      /**
-      * Get available options.
-      * @returns Array of options
-      */
-      getOptions(): SelectOption[];
-
-      /**
-      * Get current selected option or by id.
-      * @param [id] - Option id.
-      */
-      getOption(id?: string): any | null;
-
-      /**
-      * Update options.
-      * @param value - New array of options, eg. `[{ id: 'val-1', label: 'Value 1' }]`
-      */
-      setOptions(value: SelectOption[]): void;
-
-      /**
-      * Add new option.
-      * @param value - Option object, eg. `{ id: 'val-1', label: 'Value 1' }`
-      */
-      addOption(value: SelectOption): void;
-
-      /**
-      * Get the option id from the option object.
-      * @param option - Option object
-      * @returns Option id
-      */
-      getOptionId(option: SelectOption): string;
-
-      /**
-      * Get option label.
-      * @param id - Option id or the option object
-      * @param [opts = {}] - Options
-      * @param [opts.locale = true] - Use the locale string from i18n module
-      * @returns Option label
-      */
-      getOptionLabel(id: string | any, opts?: {
-        locale?: boolean;
-      }): string;
-    }
+    /**
+     * Hook method, called when the model has been updated (eg. updated some model's property)
+     * @param property - Property name, if triggered after some property update
+     * @param value - Property value, if triggered after some property update
+     * @param previous - Property previous value, if triggered after some property update
+     */
+    updated(property: string, value: any, previous: any): void;
 
-    interface PropertyCompositeOptions extends PropertyOptions {
+    /**
+     * Hook method, called once the model has been removed
+     */
+    removed(): void;
 
-      /**
-       * Array of sub properties, eg. `[{ type: 'number', property: 'margin-top' }, ...]`
-       */
-      properties: AnyProperty[];
-      /**
-       * Indicate if the final CSS property is splitted (detached: `margin-top: X; margin-right: Y; ...`) or combined (not detached: `margin: X Y ...;`)
-       */
-      detached?: boolean;
-      /**
-       * Value used to split property values, default `" "`.
-       * @defaultValue ' '
-       */
-      separator?: string | RegExp;
-      /**
-       * Value used to join property values, default `" "`.
-       * @defaultValue ' '
-       */
-      join?: string;
-      /**
-       * Custom logic for getting property values from the target style object.
-      \n
-      ```js
-       fromStyle: (style) => {
-         const margins = parseMarginShorthand(style.margin);
-         return {
-           'margin-top': margins.top,
-           // ...
-         };
-       }
-      ```
-       */
-      fromStyle?: (style : Record<string, any>) => Record<string, any>;
-      /**
-       * Custom logic for creating the CSS style object to apply on selected targets.
-      \n
-      ```js
-       toStyle: (values) => {
-         const top = values['margin-top'] || 0;
-         const right = values['margin-right'] || 0;
-         // ...
-         return {
-           margin: `${top} ${right} ...`,
-         };
-       }
-      ```
-       */
-      toStyle?: (values : Record<string, any>) => Record<string, any>;
-    }
-    interface PropertyComposite<T extends PropertyCompositeOptions> extends Property<T> {
-      /**
-       * Get properties.
-       */
-      getProperties(): AnyProperty[];
+    /**
+     * Check component's type
+     * @example
+     * component.is('image')
+     * // -> false
+     * @param type - Component type
+     */
+    is(type: string): boolean;
 
-      /**
-       * Get property by id.
-       * @param id - Property id.
-       */
-      getProperty(id: string): any;
+    /**
+     * Return all the propeties
+     */
+    props(): ComponentProperties;
 
-      /**
-       * Get property at index.
-       */
-      getPropertyAt(index: number): any;
+    /**
+     * Get the index of the component in the parent collection.
+     */
+    index(): number;
 
-      /**
-       * Check if the property is detached.
-       */
-      isDetached(): boolean;
-
-      /**
-       * Get current values of properties.
-       * @example
-       * // In case the property is `margin` with sub properties like `margin-top`, `margin-right`, etc.
-       * console.log(property.getValues());
-       * // { 'margin-top': '10px', 'margin-right': '20px', ... };
-       * @param [opts = {}] - Options
-       * @param [opts.byName = false] - Use property names as a key instead of the id.
-       */
-      getValues(opts?: {
-        byName?: boolean;
-      }): any;
+    /**
+     * Change the drag mode of the component.
+     * To get more about this feature read: https://github.com/artf/grapesjs/issues/1936
+     * @param value - Drag mode, options: 'absolute' | 'translate'
+     */
+    setDragMode(value: string): this;
 
-      /**
-       * Get property separator.
-       */
-      getSeparator(): RegExp;
+    /**
+     * Find inner components by query string.
+     * **ATTENTION**: this method works only with already rendered component
+     * @example
+     * component.find('div > .class');
+     * // -> [Component, Component, ...]
+     * @param query - Query string
+     * @returns Array of components
+     */
+    find(query: string): Component[];
 
-      /**
-       * Get the join value.
-       */
-      getJoin(): string;
-    }
+    /**
+     * Find all inner components by component type.
+     * The advantage of this method over `find` is that you can use it
+     * also before rendering the component
+     * @example
+     * const allImages = component.findType('image');
+     * console.log(allImages[0]) // prints the first found component
+     * @param type - Component type
+     */
+    findType(type: string): Component[];
 
-    type AnyProperty = Property<PropertyOptions> | PropertyNumber | PropertySelect | PropertyComposite<PropertyCompositeOptions> | PropertyStack;
+    /**
+     * Find the closest parent component by query string.
+     * **ATTENTION**: this method works only with already rendered component
+     * @example
+     * component.closest('div.some-class');
+     * // -> Component
+     * @param query - Query string
+     */
+    closest(query: string): Component;
 
-    interface Layer extends Backbone.Model<{}> {
-      /**
-       * Get layer id.
-       */
-      getId() : string
+    /**
+     * Find the closest parent component by its type.
+     * The advantage of this method over `closest` is that you can use it
+     * also before rendering the component
+     * @example
+     * const Section = component.closestType('section');
+     * console.log(Section);
+     * @param type - Component type
+     * @returns Found component, otherwise `undefined`
+     */
+    closestType(type: string): Component;
 
-      /**
-       * Get layer index.
-       */
-      getIndex() : number
+    /**
+     * The method returns a Boolean value indicating whether the passed
+     * component is a descendant of a given component
+     * @param component - Component to check
+     */
+    contains(component: Component): boolean;
 
-      /**
-       * Get layer values.
-       * @param {Object} [opts={}] Options
-       * @param {Boolean} [opts.camelCase] Return property names in camelCase.
-       */
-      getValues(opts?: {camelCase? : boolean}) : any
+    /**
+     * Replace a component with another one
+     * @example
+     * component.replaceWith('<div>Some new content</div>');
+     * // -> Component
+     * @param el - Component or HTML string
+     * @returns New added component/s
+     */
+    replaceWith(el: string | Component): Component | Component[];
 
-      /**
-       * Get layer label.
-       */
-      getLabel() : string
+    /**
+     * Update attributes of the component
+     * @example
+     * component.setAttributes({ id: 'test', 'data-key': 'value' });
+     * @param attrs - Key value attributes
+     * @param options - Options for the model update
+     */
+    setAttributes(attrs: any, options: any): this;
 
-      /**
-       * Check if the layer is selected.
-       */
-      isSelected() : boolean
+    /**
+     * Add attributes to the component
+     * @example
+     * component.addAttributes({ 'data-key': 'value' });
+     * @param attrs - Key value attributes
+     * @param options - Options for the model update
+     */
+    addAttributes(attrs: any, options: any): this;
 
-      /**
-       * Select the layer.
-       */
-      select() : any
+    /**
+     * Remove attributes from the component
+     * @example
+     * component.removeAttributes('some-attr');
+     * component.removeAttributes(['some-attr1', 'some-attr2']);
+     * @param attrs - Array of attributes to remove
+     * @param options - Options for the model update
+     */
+    removeAttributes(attrs: string | String[], options: any): this;
 
-      /**
-       * Remove the layer.
-       */
-      remove() : any
+    /**
+     * Get the style of the component
+     */
+    getStyle(): any;
 
-      /**
-       * Move layer to a new index.
-       * @param index New index
-       */
-      move(index : number) : any
+    /**
+     * Set the style on the component
+     * @example
+     * component.setStyle({ color: 'red' });
+     * @param prop - Key value style object
+     */
+    setStyle(prop: any): any;
 
-      /**
-       * Get style object for the preview.
-       * @param [opts={}] Options. Same of `PropertyStack.getStyleFromLayer`
-       * @returns Style object
-       */
-      getStylePreview(opts: object) : any
+    /**
+     * Return all component's attributes
+     */
+    getAttributes(): Record<string, any>;
 
-      /**
-       * Check if the property has the preview enabled for this layer.
-       */
-      hasPreview() : boolean
-    }
+    /**
+     * Add classes
+     * @example
+     * model.addClass('class1');
+     * model.addClass('class1 class2');
+     * model.addClass(['class1', 'class2']);
+     * // -> [SelectorObject, ...]
+     * @param classes - Array or string of classes
+     * @returns Array of added selectors
+     */
+    addClass(classes: String[] | string): any[];
 
-    interface PropertyStackOptions extends PropertyCompositeOptions {
-      /**
-       * Indicate if the layer should display a preview.
-       */
-      preview?: boolean;
-      /**
-       * The separator used to split layer values.
-       * @defaultValue ', '
-       */
-      layerSeparator?: string | RegExp;
-      /**
-       * Value used to join layer values.
-       * @defaultValue ', '
-       */
-      layerJoin?: string;
-      /**
-       * Custom logic for creating layer labels.
-      \n
-      ```js
-       layerLabel: (layer) => {
-         const values = layer.getValues();
-         return `A: ${values['prop-a']} B: ${values['prop-b']}`;
-       }
-       ```
-       */
-      layerLabel?: (...params: any[]) => any;
-    }
+    /**
+     * Set classes (resets current collection)
+     * @example
+     * model.setClass('class1');
+     * model.setClass('class1 class2');
+     * model.setClass(['class1', 'class2']);
+     * // -> [SelectorObject, ...]
+     * @param classes - Array or string of classes
+     * @returns Array of added selectors
+     */
+    setClass(classes: String[] | string): any[];
 
-    interface PropertyStack extends PropertyComposite<PropertyStackOptions> {
-      /**
-       * Get all available layers.
-       */
-      getLayers(): Layer[];
-
-      /**
-       * Get layer by index.
-       * @example
-       * // Get the first layer
-       * const layerFirst = property.getLayer(0);
-       * // Get the last layer
-       * const layers = this.getLayers();
-       * const layerLast = property.getLayer(layers.length - 1);
-       * @param [index = 0] - Layer index position.
-       */
-      getLayer(index?: number): Layer | null;
-
-      /**
-       * Get selected layer.
-      */
-      getSelectedLayer(): Layer | null;
-
-      /**
-       * Select layer.
-       * Without a selected layer any update made on inner properties has no effect.
-       * @example
-       * const layer = property.getLayer(0);
-       * property.selectLayer(layer);
-       * @param layer Layer to select
-       */
-      selectLayer(layer: Layer): void;
+    /**
+     * Remove classes
+     * @example
+     * model.removeClass('class1');
+     * model.removeClass('class1 class2');
+     * model.removeClass(['class1', 'class2']);
+     * // -> [SelectorObject, ...]
+     * @param classes - Array or string of classes
+     * @returns Array of removed selectors
+     */
+    removeClass(classes: String[] | string): any[];
 
-      /**
-       * Select layer by index.
-       * @example
-       * property.selectLayerAt(1);
-       * @param index - Index of the layer to select.
-       */
-      selectLayerAt(index: number): void;
-
-      /**
-       * Move layer by index.
-       * @example
-       * const layer = property.getLayer(1);
-       * property.moveLayer(layer, 0);
-       * @param index - New layer index.
-       */
-      moveLayer(layer: Layer, index: number): void;
-
-      /**
-       * Add new layer to the stack.
-       * @example
-       * // Add new layer at the beginning of the stack with custom values
-       * property.addLayer({ 'sub-prop1': 'value1', 'sub-prop2': 'value2' }, { at: 0 });
-       * @param [props = {}] - Custom property values to use in a new layer.
-       * @param [opts = {}] - Options
-       * @param [opts.at] - Position index (by default the layer will be appended at the end).
-       */
-      addLayer(props?: any, opts?: {
-        at?: number;
-      }): Layer;
+    /**
+     * Returns component's classes as an array of strings
+     */
+    getClasses(): any[];
 
-      /**
-       * Remove layer.
-       * @example
-       * const layer = property.getLayer(0);
-       * property.removeLayer(layer);
-       */
-      removeLayer(layer: Layer): Layer;
+    /**
+     * Add new component children
+     * @example
+     * someComponent.get('components').length // -> 0
+     * const videoComponent = someComponent.append('<video></video><div></div>')[0];
+     * // This will add 2 components (`video` and `div`) to your `someComponent`
+     * someComponent.get('components').length // -> 2
+     * // You can pass components directly
+     * otherComponent.append(otherComponent2);
+     * otherComponent.append([otherComponent3, otherComponent4]);
+     * // append at specific index (eg. at the beginning)
+     * someComponent.append(otherComponent, { at: 0 });
+     * @param components - Component to add
+     * @param [opts = {}] - Options for the append action
+     * @returns Array of appended components
+     */
+    append(components: Component | string, opts?: any): any[];
 
-      /**
-       * Remove layer by index.
-       * @example
-       * property.removeLayerAt(0);
-       * @param index - Index of the layer to remove
-       */
-      removeLayerAt(index: number): Layer | null;
+    /**
+     * Set new collection if `components` are provided, otherwise the
+     * current collection is returned
+     * @example
+     * // Set new collection
+     * component.components('<span></span><div></div>');
+     * // Get current collection
+     * const collection = component.components();
+     * console.log(collection.length);
+     * // -> 2
+     * @param [components] - Component Definitions or HTML string
+     * @param [opts = {}] - Options, same as in `Component.append()`
+     */
+    components(
+      components?: Component | string,
+      opts?: any
+    ): Backbone.Collection<Component>;
 
-      /**
-       * Get the layer label. The label can be customized with the `layerLabel` property.
-       * @example
-       * const layer = this.getLayer(1);
-       * const label = this.getLayerLabel(layer);
-       */
-      getLayerLabel(layer: Layer): string;
-
-      /**
-       * Get style object from the layer.
-       * @param [opts = {}] - Options
-       * @param [opts.camelCase] - Return property names in camelCase.
-       * @param [opts.number] - Limit the result of the number types, eg. `number: { min: -3, max: 3 }`
-       * @returns Style object
-       */
-      getStyleFromLayer(layer: Layer, opts?: {
-        camelCase?: boolean;
-        number?: any;
-      }): any;
+    /**
+     * If exists, returns the child component at specific index.
+     * @example
+     * // Return first child
+     * component.getChildAt(0);
+     * // Return second child
+     * component.getChildAt(1);
+     * @param index - Index of the component to return
+     */
+    getChildAt(index: number): any;
 
-      /**
-       * Get preview style object from the layer.
-       * If the property has `preview: false` the returned object will be empty.
-       * @param [opts = {}] - Options. Same of `getStyleFromLayer`
-       * @returns Style object
-       */
-      getStylePreview(layer: Layer, opts?: any): any;
-
-      /**
-      * Get layer separator.
-      */
-      getLayerSeparator(): RegExp;
-    }
-
-    /**
-    * You can customize the initial state of the module from the editor initialization, by passing the following [Configuration Object](https://github.com/artf/grapesjs/blob/master/src/storage_manager/config/config.js)
-    * ```js
-    * const editor = grapesjs.init({
-    *  storageManager: {
-    *    // options
-    *  }
-    * })
-    * ```
-    *
-    * Once the editor is instantiated you can use its API and listen to its events. Before using these methods, you should get the module from the instance.
-    *
-    * ```js
-    * // Listen to events
-    * editor.on('storage:start', () => { ... });
-    *
-    * // Use the API
-    * const storageManager = editor.StorageManager;
-    * storageManager.add(...);
-    * ```
-    *
-    * ## Available Events
-    * * `storage:start` - Before the storage request is started
-    * * `storage:start:store` - Before the store request. The object to store is passed as an argumnet (which you can edit)
-    * * `storage:start:load` - Before the load request. Items to load are passed as an argumnet (which you can edit)
-    * * `storage:load` - Triggered when something was loaded from the storage, loaded object passed as an argumnet
-    * * `storage:store` - Triggered when something is stored to the storage, stored object passed as an argumnet
-    * * `storage:end` - After the storage request is ended
-    * * `storage:end:store` - After the store request
-    * * `storage:end:load` - After the load request
-    * * `storage:error` - On any error on storage request, passes the error as an argument
-    * * `storage:error:store` - Error on store request, passes the error as an argument
-    * * `storage:error:load` - Error on load request, passes the error as an argument
-    *
-    * ## Methods
-    * * [getConfig](#getconfig)
-    * * [isAutosave](#isautosave)
-    * * [setAutosave](#setautosave)
-    * * [getStepsBeforeSave](#getstepsbeforesave)
-    * * [setStepsBeforeSave](#setstepsbeforesave)
-    * * [setStepsBeforeSave](#setstepsbeforesave)
-    * * [getStorages](#getstorages)
-    * * [getCurrent](#getcurrent)
-    * * [getCurrentStorage](#getcurrentstorage)
-    * * [setCurrent](#setcurrent)
-    * * [add](#add)
-    * * [get](#get)
-    * * [store](#store)
-    * * [load](#load)
-    */
-    interface StorageManager {
-      /**
-       * Get configuration object
-       */
-      getConfig(): StorageManagerConfig;
-      /**
-       * Checks if autosave is enabled
-       */
-      isAutosave(): boolean;
-      /**
-       * Set autosave value
-       */
-      setAutosave(v: boolean): this;
-      /**
-       * Returns number of steps required before trigger autosave
-       */
-      getStepsBeforeSave(): number;
-      /**
-       * Set steps required before trigger autosave
-       */
-      setStepsBeforeSave(v: number): this;
-      /**
-       * Add new storage
-       * @example
-       * storageManager.add('local2', {
-       *   load: function(keys, clb, clbErr) {
-       *     var res = {};
-       *     for (var i = 0, len = keys.length; i < len; i++){
-       *       var v = localStorage.getItem(keys[i]);
-       *       if(v) res[keys[i]] = v;
-       *     }
-       *     clb(res); // might be called inside some async method
-       *     // In case of errors...
-       *     // clbErr('Went something wrong');
-       *   },
-       *   store: function(data, clb, clbErr) {
-       *     for(var key in data)
-       *       localStorage.setItem(key, data[key]);
-       *     clb(); // might be called inside some async method
-       *   }
-       * });
-       * @param id - Storage ID
-       * @param storage - Storage wrapper
-       * @param storage.load - Load method
-       * @param storage.store - Store method
-       */
-      add(id: string, storage: {
-          load: (...params: any[]) => any;
-          store: (...params: any[]) => any;
-      }): this;
-      /**
-       * Returns storage by id
-       * @param id - Storage ID
-       */
-      get(id: string): any | null;
-      /**
-       * Returns all storages
-       */
-      getStorages(): any[];
-      /**
-       * Returns current storage type
-       */
-      getCurrent(): string;
-      /**
-       * Set current storage type
-       * @param id - Storage ID
-       */
-      setCurrent(id: string): this;
-      /**
-       * Store key-value resources in the current storage
-       * @example
-       * storageManager.store({item1: value1, item2: value2});
-       * @param data - Data in key-value format, eg. {item1: value1, item2: value2}
-       * @param clb - Callback function
-       */
-      store(data: any, clb: (...params: any[]) => any): any | null;
-      /**
-       * Load resource from the current storage by keys
-       * @example
-       * storageManager.load(['item1', 'item2'], res => {
-       *  // res -> {item1: value1, item2: value2}
-       * });
-       * storageManager.load('item1', res => {
-       * // res -> {item1: value1}
-       * });
-       * @param keys - Keys to load
-       * @param clb - Callback function
-       */
-      load(keys: string | string[], clb: (...params: any[]) => any): void;
-      /**
-       * Get current storage
-       */
-      getCurrentStorage(): Storage;
-    }
-
-    /**
-    * You can customize the initial state of the module from the editor initialization, by passing the following [Configuration Object](https://github.com/artf/grapesjs/blob/master/src/device_manager/config/config.js)
-    * ```js
-    * const editor = grapesjs.init({
-    *  deviceManager: {
-    *    // options
-    *  }
-    * })
-    * ```
-    *
-    * Once the editor is instantiated you can use its API. Before using these methods you should get the module from the instance
-    *
-    * ```js
-    * const deviceManager = editor.Devices;
-    * ```
-    * ## Available Events
-    * * `device:add` - Added new device. The [Device] is passed as an argument to the callback
-    * * `device:remove` - Device removed. The [Device] is passed as an argument to the callback
-    * * `device:select` - New device selected. The newly selected [Device] and the previous one, are passed as arguments to the callback
-    * * `device:update` - Device updated. The updated [Device] and the object containing changes are passed as arguments to the callback
-    * * `device` - Catch-all event for all the events mentioned above. An object containing all the available data about the triggered event is passed as an argument to the callback
-    *
-    * ## Methods
-    * * [add](#add)
-    * * [get](#get)
-    * * [getDevices](#getdevices)
-    * * [remove](#remove)
-    * * [select](#select)
-    * * [getSelected](#getselected)
-    *
-    * [Device]: device.html
-    */
-    interface Devices {
-      /**
-       * Add new device
-       * @example
-       * const device1 = deviceManager.add({
-       *  // Without an explicit ID, the `name` will be taken. In case of missing `name`, a random ID will be created.
-       *  id: 'tablet',
-       *  name: 'Tablet',
-       *  width: '900px', // This width will be applied on the canvas frame and for the CSS media
-       * });
-       * const device2 = deviceManager.add({
-       *  id: 'tablet2',
-       *  name: 'Tablet 2',
-       *  width: '800px', // This width will be applied on the canvas frame
-       *  widthMedia: '810px', // This width that will be used for the CSS media
-       *  height: '600px', // Height will be applied on the canvas frame
-       * });
-       * @param props - Device properties
-       */
-      add(props: any): any;
-      /**
-       * Return device by ID
-       * @example
-       * const device = deviceManager.get('Tablet');
-       * console.log(JSON.stringify(device));
-       * // {name: 'Tablet', width: '900px'}
-       * @param id - ID of the device
-       */
-      get(id: string): any;
-      /**
-       * Remove device
-       * @example
-       * const removed = deviceManager.remove('device-id');
-       * // or by passing the Device
-       * const device = deviceManager.get('device-id');
-       * deviceManager.remove(device);
-       */
-      remove(): any;
-      /**
-       * Return all devices
-       * @example
-       * const devices = deviceManager.getDevices();
-       * console.log(JSON.stringify(devices));
-       * // [{name: 'Desktop', width: ''}, ...]
-       */
-      getDevices(): any;
-      /**
-       * Change the selected device. This will update the frame in the canvas
-       * @example
-       * deviceManager.select('some-id');
-       * // or by passing the page
-       * const device = deviceManager.get('some-id');
-       * deviceManager.select(device);
-       */
-      select(): void;
-      /**
-       * Get the selected device
-       * @example
-       * const selected = deviceManager.getSelected();
-       */
-      getSelected(): any;
-    }
+    /**
+     * If exists, returns the last child component.
+     * @example
+     * const lastChild = component.getLastChild();
+     */
+    getLastChild(): any;
 
-    interface DeviceOptions {
-      /**
-       * Device type, eg. `Mobile`
-       * @defaultValue ''
-       */
-      name?: string;
-      /**
-       * Width to set for the editor iframe, eg. '900px'
-       */
-      width?: string;
-      /**
-       * Height to set for the editor iframe, eg. '600px'
-       * @defaultValue ''
-       */
-      height?: string;
-      /**
-       * The width which will be used in media queries, If empty the width will be used
-       * @defaultValue ''
-       */
-      widthMedia?: string;
-      /**
-       * Setup the order of media queries
-       */
-      priority?: number;
-    }
-
-    interface Device extends Backbone.Model<DeviceOptions> {
-      getName() : string
-      getWidthMedia() : string
-    }
-
-    /**
-    * Selectors in GrapesJS are used in CSS Composer inside Rules and in Components as classes. To illustrate this concept let's take
-    * a look at this code:
-    *
-    * ```css
-    * span > #send-btn.btn{
-    *  ...
-    * }
-    * ```
-    * ```html
-    * <span>
-    *   <button id="send-btn" class="btn"></button>
-    * </span>
-    * ```
-    *
-    * In this scenario we get:
-    * * span     -> selector of type `tag`
-    * * send-btn -> selector of type `id`
-    * * btn      -> selector of type `class`
-    *
-    * So, for example, being `btn` the same class entity it'll be easier to refactor and track things.
-    *
-    * You can customize the initial state of the module from the editor initialization, by passing the following [Configuration Object](https://github.com/artf/grapesjs/blob/master/src/selector_manager/config/config.js)
-    * ```js
-    * const editor = grapesjs.init({
-    *  selectorManager: {
-    *    // options
-    *  }
-    * })
-    * ```
-    *
-    * Once the editor is instantiated you can use its API and listen to its events. Before using these methods, you should get the module from the instance.
-    *
-    * ```js
-    * // Listen to events
-    * editor.on('selector:add', (selector) => { ... });
-    *
-    * // Use the API
-    * const sm = editor.Selectors;
-    * sm.add(...);
-    * ```
-    *
-    * ## Available Events
-    * * `selector:add` - Selector added. The [Selector] is passed as an argument to the callback.
-    * * `selector:remove` - Selector removed. The [Selector] is passed as an argument to the callback.
-    * * `selector:update` - Selector updated. The [Selector] and the object containing changes are passed as arguments to the callback.
-    * * `selector:state` - States changed. An object containing all the available data about the triggered event is passed as an argument to the callback.
-    * * `selector` - Catch-all event for all the events mentioned above. An object containing all the available data about the triggered event is passed as an argument to the callback.
-    *
-    * ## Methods
-    * * [getConfig](#getconfig)
-    * * [add](#add)
-    * * [get](#get)
-    * * [remove](#remove)
-    * * [getAll](#getall)
-    * * [setState](#setstate)
-    * * [getState](#getstate)
-    * * [getStates](#getstates)
-    * * [setStates](#setstates)
-    * * [getSelected](#getselected)
-    * * [addSelected](#addselected)
-    * * [removeSelected](#removeselected)
-    * * [getSelectedTargets](#getselectedtargets)
-    * * [setComponentFirst](#setcomponentfirst)
-    * * [getComponentFirst](#getcomponentfirst)
-    *
-    * [Selector]: selector.html
-    * [State]: state.html
-    * [Component]: component.html
-    * [CssRule]: css_rule.html
-    */
-    interface SelectorManager {
-      /**
-       * Get configuration object
-       */
-      getConfig(): SelectorManagerConfig;
-      /**
-       * Add a new selector to the collection if it does not already exist.
-       * You can pass selectors properties or string identifiers.
-       * @example
-       * const selector = selectorManager.add({ name: 'my-class', label: 'My class' });
-       * console.log(selector.toString()) // `.my-class`
-       * // Same as
-       * const selector = selectorManager.add('.my-class');
-       * console.log(selector.toString()) // `.my-class`
-       * @param props - Selector properties or string identifiers, eg. `{ name: 'my-class', label: 'My class' }`, `.my-cls`
-       * @param [opts] - Selector options
-       */
-      add(props: any | string, opts?: SelectorOptions): any;
-      /**
-       * Get the selector by its name/type
-       * @example
-       * const selector = selectorManager.get('.my-class');
-       * // Get Id
-       * const selectorId = selectorManager.get('#my-id');
-       * @param name - Selector name or string identifier
-       */
-      get(name: string): any;
-      /**
-       * Remove Selector.
-       * @example
-       * const removed = selectorManager.remove('.myclass');
-       * // or by passing the Selector
-       * selectorManager.remove(selectorManager.get('.myclass'));
-       */
-      remove(): any;
-      /**
-       * Change the selector state
-       * @example
-       * selectorManager.setState('hover');
-       * @param value - State value
-       */
-      setState(value: string): this;
-      /**
-       * Get the current selector state value
-       */
-      getState(): string;
-      /**
-       * Get states
-       */
-      getStates(): any;
-      /**
-       * Set a new collection of states
-       * @example
-       * const states = selectorManager.setStates([
-       *   { name: 'hover', label: 'Hover' },
-       *   { name: 'nth-of-type(2n)', label: 'Even/Odd' }
-       * ]);
-       * @param states - Array of new states
-       */
-      setStates(states: object[]): any;
-      /**
-       * Get commonly selected selectors, based on all selected components.
-       * @example
-       * const selected = selectorManager.getSelected();
-       * console.log(selected.map(s => s.toString()))
-       */
-      getSelected(): any;
-      /**
-       * Add new selector to all selected components.
-       * @example
-       * selectorManager.addSelected('.new-class');
-       * @param props - Selector properties or string identifiers, eg. `{ name: 'my-class', label: 'My class' }`, `.my-cls`
-       */
-      addSelected(props: any | string): void;
-      /**
-       * Remove a common selector from all selected components.
-       * @example
-       * selectorManager.removeSelected('.myclass');
-       */
-      removeSelected(): void;
-      /**
-       * Get the array of currently selected targets.
-       * @example
-       * const targetsToStyle = selectorManager.getSelectedTargets();
-       * console.log(targetsToStyle.map(target => target.getSelectorsString()))
-       */
-      getSelectedTargets(): any;
-      /**
-       * Update component-first option.
-       * If the component-first is enabled, all the style changes will be applied on selected components (ID rules) instead
-       * of selectors (which would change styles on all components with those classes).
-       */
-      setComponentFirst(value: boolean): void;
-      /**
-       * Get the value of component-first option.
-       */
-      getComponentFirst(): boolean;
-      /**
-       * Get all selectors
-       */
-      getAll(): any;
-    }
+    /**
+     * Remove all inner components
+     * * @return {this}
+     */
+    empty(): void;
 
-    interface SelectorOptions {
-      /**
-       * Selector name, eg. `my-class`
-       */
-      name: string;
-      /**
-       * Selector label, eg. `My Class`
-       */
-      label: string;
-      /**
-       * Type of the selector. 1 (class) | 2 (id)
-       * @defaultValue 1
-       */
-      type?: number;
-      /**
-       * If not active, it's not selectable by the Style Manager.
-       * @defaultValue true
-       */
-      active?: boolean;
-      /**
-       * If true, it can't be seen by the Style Manager, but it will be rendered in the canvas and in export code.
-       */
-      private?: boolean;
-      /**
-       * If true, it can't be removed from the attacched component.
-       */
-      protected?: boolean;
-    }
-
-    interface Selector extends Backbone.Model<SelectorOptions> {
-      /**
-       * Get selector label.
-       * @example
-       * // Given such selector: { name: 'my-selector', label: 'My selector' }
-       * console.log(selector.getLabel());
-       * // -> `My selector`
-       */
-      getLabel(): string;
-
-      /**
-       * Update selector label.
-       * @param {String} label New label
-       * @example
-       * // Given such selector: { name: 'my-selector', label: 'My selector' }
-       * selector.setLabel('New Label')
-       * console.log(selector.getLabel());
-       * // -> `New Label`
-       */
-      setLabel(label: string): void;
+    /**
+     * Get the parent component, if exists
+     * @example
+     * component.parent();
+     * // -> Component
+     */
+    parent(): Component | null;
 
-      /**
-       * Get selector active state.
-       */
-      getActive(): boolean;
+    /**
+     * Get traits.
+     * @example
+     * const traits = component.getTraits();
+     * console.log(traits);
+     * // [Trait, Trait, Trait, ...]
+     */
+    getTraits(): Trait[];
 
-      /**
-       * Update selector active state.
-       * @param value - New active state
-       */
-      setActive(value: boolean): void;
-    }
+    /**
+     * Replace current collection of traits with a new one.
+     * @example
+     * const traits = component.setTraits([{ type: 'checkbox', name: 'disabled'}, ...]);
+     * console.log(traits);
+     * // [Trait, ...]
+     * @param traits - Array of trait definitions
+     */
+    setTraits(traits: object[]): Trait[];
 
-    interface StateOptions {
-      /**
-       * State name, eg. `hover`, `nth-of-type(2n)`
-       */
-      name: string;
-      /**
-       * State label, eg. `Hover`, `Even/Odd`
-       */
-      label: string;
-    }
+    /**
+     * Get the trait by id/name.
+     * @example
+     * const traitTitle = component.getTrait('title');
+     * traitTitle && traitTitle.set('label', 'New label');
+     * @param id - The `id` or `name` of the trait
+     * @returns Trait getModelToStyle
+     */
+    getTrait(id: string): Trait | null;
 
-    interface State extends Backbone.Model<StateOptions> {
+    /**
+     * Update a trait.
+     * @example
+     * component.updateTrait('title', {
+     *  type: 'select',
+     *  options: [ 'Option 1', 'Option 2' ],
+     * });
+     * @param id - The `id` or `name` of the trait
+     * @param props - Object with the props to update
+     */
+    updateTrait(id: string, props: any): this;
 
-      /**
-       * Get state name
-       */
-      getName(): string;
+    /**
+     * Get the trait position index by id/name. Useful in case you want to
+     * replace some trait, at runtime, with something else.
+     * @example
+     * const traitTitle = component.getTraitIndex('title');
+     * console.log(traitTitle); // 1
+     * @param id - The `id` or `name` of the trait
+     * @returns Index position of the current trait
+     */
+    getTraitIndex(id: string): number;
 
-      /**
-       * Get state label. If label was not provided, the name will be returned.
-       */
-      getLabel(): string;
-    }
-
-    /**
-    * This module manages CSS rules in the canvas.
-    * You can customize the initial state of the module from the editor initialization, by passing the following [Configuration Object](https://github.com/artf/grapesjs/blob/master/src/css_composer/config/config.js)
-    * ```js
-    * const editor = grapesjs.init({
-    *  cssComposer: {
-    *    // options
-    *  }
-    * })
-    * ```
-    *
-    * Once the editor is instantiated you can use its API. Before using these methods you should get the module from the instance
-    *
-    * ```js
-    * const css = editor.Css;
-    * ```
-    *
-    * * [addRules](#addrules)
-    * * [setRule](#setrule)
-    * * [getRule](#getrule)
-    * * [getRules](#getrules)
-    * * [remove](#remove)
-    * * [clear](#clear)
-    *
-    * [CssRule]: css_rule.html
-    */
-    interface CssComposer {
-      /**
-       * Add CssRules via CSS string.
-       * @example
-       * const addedRules = css.addRules('.my-cls{ color: red } @media (max-width: 992px) { .my-cls{ color: darkred } }');
-       * // Check rules
-       * console.log(addedRules.map(rule => rule.toCSS()));
-       * @param css - CSS string of rules to add.
-       */
-      addRules(css: string): any;
-      /**
-       * Add/update the CssRule.
-       * @example
-       * // Simple class-based rule
-       * const rule = css.setRule('.class1.class2', { color: 'red' });
-       * console.log(rule.toCSS()) // output: .class1.class2 { color: red }
-       * // With state and other mixed selector
-       * const rule = css.setRule('.class1.class2:hover, div#myid', { color: 'red' });
-       * // output: .class1.class2:hover, div#myid { color: red }
-       * // With media
-       * const rule = css.setRule('.class1:hover', { color: 'red' }, {
-       *  atRuleType: 'media',
-       *  atRuleParams: '(min-width: 500px)',
-       * });
-       * // output: @media (min-width: 500px) { .class1:hover { color: red } }
-       * @param selectors - Selector string, eg. `.myclass`
-       * @param style - Style properties and values
-       * @param [opts = {}] - Additional properties
-       * @param [opts.atRuleType = ''] - At-rule type, eg. `media`
-       * @param [opts.atRuleParams = ''] - At-rule parameters, eg. `(min-width: 500px)`
-       */
-      setRule(selectors: string, style: any, opts?: {
-          atRuleType?: string;
-          atRuleParams?: string;
-      }): any;
-      /**
-       * Get the CssRule.
-       * @example
-       * const rule = css.getRule('.myclass1:hover');
-       * const rule2 = css.getRule('.myclass1:hover, div#myid');
-       * const rule3 = css.getRule('.myclass1', {
-       *  atRuleType: 'media',
-       *  atRuleParams: '(min-width: 500px)',
-       * });
-       * @param selectors - Selector string, eg. `.myclass:hover`
-       * @param [opts = {}] - Additional properties
-       * @param [opts.atRuleType = ''] - At-rule type, eg. `media`
-       * @param [opts.atRuleParams = ''] - At-rule parameters, eg. '(min-width: 500px)'
-       */
-      getRule(selectors: string, opts?: {
-          atRuleType?: string;
-          atRuleParams?: string;
-      }): any;
-      /**
-       * Get all rules or filtered by a matching selector.
-       * @example
-       * // Take all the component specific rules
-       * const id = someComponent.getId();
-       * const rules = css.getRules(`#${id}`);
-       * console.log(rules.map(rule => rule.toCSS()))
-       * // All rules in the project
-       * console.log(css.getRules())
-       * @param [selector = ''] - Selector, eg. `.myclass`
-       */
-      getRules(selector?: string): any;
-      /**
-       * Remove rule, by CssRule or matching selector (eg. the selector will match also at-rules like `@media`)
-       * @example
-       * // Remove by CssRule
-       * const toRemove = css.getRules('.my-cls');
-       * css.remove(toRemove);
-       * // Remove by selector
-       * css.remove('.my-cls-2');
-       */
-      remove(): any;
-      /**
-       * Remove all rules
-       */
-      clear(): this;
-    }
-
-    interface Styleable {
-      /**
-       * To trigger the style change event on models I have to
-       * pass a new object instance
-       * @param prop
-       */
-      extendStyle(prop : object) : object
+    /**
+     * Remove trait/s by id/s.
+     * @example
+     * component.removeTrait('title');
+     * component.removeTrait(['title', 'id']);
+     * @param id - The `id`/`name` of the trait (or an array)
+     * @returns Array of removed traits
+     */
+    removeTrait(id: string | String[]): Trait[];
 
-      /**
-       * Get style object
-       */
-      getStyle(prop? : string) : object
+    /**
+     * Add new trait/s.
+     * @example
+     * component.addTrait('title', { at: 1 }); // Add title trait (`at` option is the position index)
+     * component.addTrait({
+     *  type: 'checkbox',
+     *  name: 'disabled',
+     * });
+     * component.addTrait(['title', {...}, ...]);
+     * @param trait - Trait to add (or an array of traits)
+     * @param opts - Options for the add
+     * @returns Array of added traits
+     */
+    addTrait(
+      trait: string | any | (String | object)[],
+      opts: Record<string, any>
+    ): Trait[];
 
-      /**
-       * Set new style object
-       * @return {Object} Applied properties
-       */
-      setStyle(prop : object | string, opts?: object) : object
+    /**
+     * Get the name of the component
+     */
+    getName(): string;
 
-      /**
-       * Add style property
-       * @example
-       * this.addStyle({color: 'red'});
-       * this.addStyle('color', 'blue');
-       */
-      addStyle(prop : object | string, value?: string, opts?: object) : void
+    /**
+     * Get the icon string
+     */
+    getIcon(): string;
 
-      /**
-       * Remove style property
-       */
-      removeStyle(prop : string) : void
+    /**
+     * Return HTML string of the component
+     * @example
+     * // Simple HTML return
+     * component.set({ tagName: 'span' });
+     * component.setAttributes({ title: 'Hello' });
+     * component.toHTML();
+     * // -> <span title="Hello"></span>
+     *
+     * // Custom attributes
+     * component.toHTML({ attributes: { 'data-test': 'Hello' } });
+     * // -> <span data-test="Hello"></span>
+     *
+     * // Custom dynamic attributes
+     * component.toHTML({
+     *  attributes(component, attributes) {
+     *    if (component.get('tagName') == 'span') {
+     *      attributes.title = 'Custom attribute';
+     *    }
+     *    return attributes;
+     *  },
+     * });
+     * // -> <span title="Custom attribute"></span>
+     * @param [opts = {}] - Options
+     * @param [opts.tag] - Custom tagName
+     * @param [opts.attributes = null] - You can pass an object of custom attributes to replace with the current ones or you can even pass a function to generate attributes dynamically.
+     * @param [opts.withProps] - Include component properties as `data-gjs-*` attributes. This allows you to have re-importable HTML.
+     * @param [opts.altQuoteAttr] - In case the attribute value contains a `"` char, instead of escaping it (`attr="value &quot;"`), the attribute will be quoted using single quotes (`attr='value "'`).
+     * @returns HTML string
+     */
+    toHTML(opts?: {
+      tag?: string;
+      attributes?: any | ((...params: any[]) => any);
+      withProps?: boolean;
+      altQuoteAttr?: boolean;
+    }): string;
 
-      /**
-       * Returns string of style properties
-       */
-      styleToString(opts?: object) : string
-    }
+    /**
+     * Get inner HTML of the component
+     * @param [opts = {}] - Same options of `toHTML`
+     * @returns HTML string
+     */
+    getInnerHTML(opts?: any): string;
 
-    interface CssRuleOptions {
-      /**
-       * Array of selectors
-       */
-      selectors: Selector[];
-      /**
-       * Object containing style definitions
-       */
-      style: any;
-      /**
-       * Additional string css selectors
-       * @defaultValue ''
-       */
-      selectorsAdd?: string;
-      /**
-       * Type of at-rule, eg. `media`, 'font-face'
-       * @defaultValue ''
-       */
-      atRuleType?: string;
-      /**
-       * At-rule value, eg. `(max-width: 1000px)`
-       * @defaultValue ''
-       */
-      mediaText?: string;
-      /**
-       * This property is used only on at-rules, like 'page' or 'font-face', where the block containes only style declarations
-       */
-      singleAtRule?: boolean;
-      /**
-       * State of the rule, eg: `hover`, `focused`
-       * @defaultValue ''
-       */
-      state?: string;
-      /**
-       * If true, sets `!important` on all properties. You can also pass an array to specify properties on which use important
-       */
-      important?: boolean | String[];
-      /**
-       * Indicates if the rule is stylable from the editor
+    /**
+     * Return an object containing only changed props
+     */
+    getChangedProps(): void;
 
-      [Device]: device.html
-      [State]: state.html
-      [Component]: component.html
-       * @defaultValue true
-       */
-      stylable?: boolean;
-    }
-    interface CssRule extends Backbone.Model<CssRuleOptions>, Styleable {
-      /**
-       * Returns the at-rule statement when exists, eg. `@media (...)`, `@keyframes`
-       * @example
-       * const cssRule = editor.Css.setRule('.class1', { color: 'red' }, {
-       *  atRuleType: 'media',
-       *  atRuleParams: '(min-width: 500px)'
-       * });
-       * cssRule.getAtRule(); // "@media (min-width: 500px)"
-       */
-      getAtRule(): string;
-
-      /**
-       * Return selectors of the rule as a string
-       * @example
-       * const cssRule = editor.Css.setRule('.class1:hover', { color: 'red' });
-       * cssRule.selectorsToString(); // ".class1:hover"
-       * cssRule.selectorsToString({ skipState: true }); // ".class1"
-       * @param [opts] - Options
-       * @param [opts.skipState] - Skip state from the result
-       */
-      selectorsToString(opts?: {
-        skipState?: boolean;
-      }): string;
-
-      /**
-       * Get declaration block (without the at-rule statement)
-       * @example
-       * const cssRule = editor.Css.setRule('.class1', { color: 'red' }, {
-       *  atRuleType: 'media',
-       *  atRuleParams: '(min-width: 500px)'
-       * });
-       * cssRule.getDeclaration() // ".class1{color:red;}"
-       * @param [opts = {}] - Options (same as in `selectorsToString`)
-       */
-      getDeclaration(opts?: any): string;
+    /**
+     * Get block id
+     */
+    getId(): string;
 
-      /**
-       * Get the Device the rule is related to.
-       * @example
-       * const device = rule.getDevice();
-       * console.log(device?.getName());
-       */
-      getDevice(): Device | null;
+    /**
+     * Set new id on the component
+     */
+    setId(id: string): this;
 
-      /**
-       * Get the State the rule is related to.
-       * @example
-       * const state = rule.getState();
-       * console.log(state?.getLabel());
-       */
-      getState(): State | null;
+    /**
+     * Get the DOM element of the component.
+     * This works only if the component is already rendered
+     * @param frame - Specific frame from which taking the element
+     */
+    getEl(frame?: Frame): HTMLElement;
 
-      /**
-       * Returns the related Component (valid only for component-specific rules).
-       * @example
-       * const cmp = rule.getComponent();
-       * console.log(cmp?.toHTML());
-       */
-      getComponent(): Component | null;
-
-      /**
-       * Return the CSS string of the rule
-       * @example
-       * const cssRule = editor.Css.setRule('.class1', { color: 'red' }, {
-       *  atRuleType: 'media',
-       *  atRuleParams: '(min-width: 500px)'
-       * });
-       * cssRule.toCSS() // "@media (min-width: 500px){.class1{color:red;}}"
-       * @param [opts = {}] - Options (same as in `getDeclaration`)
-       * @returns CSS string
-       */
-      toCSS(opts?: any): string;
-    }
-
-    /**
-    * You can customize the initial state of the module from the editor initialization, by passing the following [Configuration Object](https://github.com/artf/grapesjs/blob/master/src/modal_dialog/config/config.js)
-    * ```js
-    * const editor = grapesjs.init({
-    *  modal: {
-    *    // options
-    *  }
-    * })
-    * ```
-    *
-    * Once the editor is instantiated you can use its API. Before using these methods you should get the module from the instance
-    *
-    * ```js
-    * const modal = editor.Modal;
-    * ```
-    *
-    * ## Available Events
-    * * `modal:open` - Modal is opened
-    * * `modal:close` - Modal is closed
-    * * `modal` - Event triggered on any change related to the modal. An object containing all the available data about the triggered event is passed as an argument to the callback.
-    *
-    * ## Methods
-    * * [open](#open)
-    * * [close](#close)
-    * * [isOpen](#isopen)
-    * * [setTitle](#settitle)
-    * * [getTitle](#gettitle)
-    * * [setContent](#setcontent)
-    * * [getContent](#getcontent)
-    * * [onceClose](#onceclose)
-    * * [onceOpen](#onceopen)
-    */
-    interface Modal {
-      /**
-       * Open the modal window
-       * @example
-       * modal.open({
-       *   title: 'My title',
-       *   content: 'My content',
-       *   attributes: { class: 'my-class' },
-       * });
-       * @param [opts = {}] - Options
-       * @param [opts.title] - Title to set for the modal
-       * @param [opts.content] - Content to set for the modal
-       * @param [opts.attributes] - Updates the modal wrapper with custom attributes
-       */
-      open(opts?: {
-          title?: string | HTMLElement;
-          content?: string | HTMLElement;
-          attributes?: any;
-      }): this;
-      /**
-       * Close the modal window
-       * @example
-       * modal.close();
-       */
-      close(): this;
-      /**
-       * Execute callback when the modal will be closed.
-       * The callback will be called one only time
-       * @example
-       * modal.onceClose(() => {
-       *  console.log('The modal is closed');
-       * });
-       * @param clb - Callback to call
-       */
-      onceClose(clb: (...params: any[]) => any): this;
-      /**
-       * Execute callback when the modal will be opened.
-       * The callback will be called one only time
-       * @example
-       * modal.onceOpen(() => {
-       *  console.log('The modal is opened');
-       * });
-       * @param clb - Callback to call
-       */
-      onceOpen(clb: (...params: any[]) => any): this;
-      /**
-       * Checks if the modal window is open
-       * @example
-       * modal.isOpen(); // true | false
-       */
-      isOpen(): boolean;
-      /**
-       * Set the title to the modal window
-       * @example
-       * // pass a string
-       * modal.setTitle('Some title');
-       * // or an HTMLElement
-       * const el = document.createElement('div');
-       * el.innerText =  'New title';
-       * modal.setTitle(el);
-       * @param title - Title
-       */
-      setTitle(title: string | HTMLElement): this;
-      /**
-       * Returns the title of the modal window
-       * @example
-       * modal.getTitle();
-       */
-      getTitle(): string | HTMLElement;
-      /**
-       * Set the content of the modal window
-       * @example
-       * // pass a string
-       * modal.setContent('Some content');
-       * // or an HTMLElement
-       * const el = document.createElement('div');
-       * el.innerText =  'New content';
-       * modal.setContent(el);
-       * @param content - Content
-       */
-      setContent(content: string | HTMLElement): this;
-      /**
-       * Get the content of the modal window
-       * @example
-       * modal.getContent();
-       */
-      getContent(): string | HTMLElement;
-    }
-
-    /**
-    * This module allows to customize the built-in toolbar of the Rich Text Editor and use commands from the [HTML Editing APIs](https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand).
-    * It's highly recommended to keep this toolbar as small as possible, especially from styling commands (eg. 'fontSize') and leave this task to the Style Manager
-    *
-    * You can customize the initial state of the module from the editor initialization, by passing the following [Configuration Object](https://github.com/artf/grapesjs/blob/master/src/rich_text_editor/config/config.js)
-    * ```js
-    * const editor = grapesjs.init({
-    *  richTextEditor: {
-    *    // options
-    *  }
-    * })
-    * ```
-    *
-    * Once the editor is instantiated you can use its API and listen to its events. Before using these methods, you should get the module from the instance.
-    *
-    * ```js
-    * // Listen to events
-    * editor.on('rte:enable', () => { ... });
-    *
-    * // Use the API
-    * const rte = editor.RichTextEditor;
-    * rte.add(...);
-    * ```
-    *
-    * ## Available Events
-    * * `rte:enable` - RTE enabled. The view, on which RTE is enabled, is passed as an argument
-    * * `rte:disable` - RTE disabled. The view, on which RTE is disabled, is passed as an argument
-    *
-    * ## Methods
-    * * [add](#add)
-    * * [get](#get)
-    * * [getAll](#getall)
-    * * [remove](#remove)
-    * * [getToolbarEl](#gettoolbarel)
-    */
-    interface RichTextEditor {
-      /**
-       * Add a new action to the built-in RTE toolbar
-       * @example
-       * rte.add('bold', {
-       *   icon: '<b>B</b>',
-       *   attributes: {title: 'Bold'},
-       *   result: rte => rte.exec('bold')
-       * });
-       * rte.add('link', {
-       *   icon: document.getElementById('t'),
-       *   attributes: {title: 'Link',}
-       *   // Example on it's easy to wrap a selected content
-       *   result: rte => rte.insertHTML(`<a href="#">${rte.selection()}</a>`)
-       * });
-       * // An example with fontSize
-       * rte.add('fontSize', {
-       *   icon: `<select class="gjs-field">
-       *         <option>1</option>
-       *         <option>4</option>
-       *         <option>7</option>
-       *       </select>`,
-       *     // Bind the 'result' on 'change' listener
-       *   event: 'change',
-       *   result: (rte, action) => rte.exec('fontSize', action.btn.firstChild.value),
-       *   // Callback on any input change (mousedown, keydown, etc..)
-       *   update: (rte, action) => {
-       *     const value = rte.doc.queryCommandValue(action.name);
-       *     if (value != 'false') { // value is a string
-       *       action.btn.firstChild.value = value;
-       *     }
-       *    }
-       *   })
-       * // An example with state
-       * const isValidAnchor = (rte) => {
-       *   // a utility function to help determine if the selected is a valid anchor node
-       *   const anchor = rte.selection().anchorNode;
-       *   const parentNode  = anchor && anchor.parentNode;
-       *   const nextSibling = anchor && anchor.nextSibling;
-       *   return (parentNode && parentNode.nodeName == 'A') || (nextSibling && nextSibling.nodeName == 'A')
-       * }
-       * rte.add('toggleAnchor', {
-       *   icon: `<span style="transform:rotate(45deg)">&supdsub;</span>`,
-       *   state: (rte, doc) => {
-       *    if (rte && rte.selection()) {
-       *      // `btnState` is a integer, -1 for disabled, 0 for inactive, 1 for active
-       *      return isValidAnchor(rte) ? btnState.ACTIVE : btnState.INACTIVE;
-       *    } else {
-       *      return btnState.INACTIVE;
-       *    }
-       *   },
-       *   result: (rte, action) => {
-       *     if (isValidAnchor(rte)) {
-       *       rte.exec('unlink');
-       *     } else {
-       *       rte.insertHTML(`<a class="link" href="">${rte.selection()}</a>`);
-       *     }
-       *   }
-       * })
-       * @param name - Action name
-       * @param action - Action options
-       */
-      add(name: string, action: any): void;
-      /**
-       * Get the action by its name
-       * @example
-       * const action = rte.get('bold');
-       * // {name: 'bold', ...}
-       * @param name - Action name
-       */
-      get(name: string): any;
-      /**
-       * Get all actions
-       */
-      getAll(): any[];
-      /**
-       * Remove the action from the toolbar
-       * @example
-       * const action = rte.remove('bold');
-       * // {name: 'bold', ...}
-       * @returns Removed action
-       */
-      remove(name: string): any;
-      /**
-       * Get the toolbar element
-       */
-      getToolbarEl(): HTMLElement;
-    }
-
-    /**
-    * You can customize the initial state of the module from the editor initialization
-    * ```js
-    * const editor = grapesjs.init({
-    *  keymaps: {
-    *     // Object of keymaps
-    *    defaults: {
-    *      'your-namespace:keymap-name' {
-    *        keys: '⌘+z, ctrl+z',
-    *        handler: 'some-command-id'
-    *      },
-    *      ...
-    *    }
-    *  }
-    * })
-    * ```
-    *
-    * Once the editor is instantiated you can use its API and listen to its events. Before using these methods, you should get the module from the instance.
-    *
-    * ```js
-    * // Listen to events
-    * editor.on('keymap:add', () => { ... });
-    *
-    * // Use the API
-    * const keymaps = editor.Keymaps;
-    * keymaps.add(...);
-    * ```
-    *
-    * ## Available Events
-    * * `keymap:add` - New keymap added. The new keyamp object is passed as an argument
-    * * `keymap:remove` - Keymap removed. The removed keyamp object is passed as an argument
-    * * `keymap:emit` - Some keymap emitted, in arguments you get keymapId, shortcutUsed, Event
-    * * `keymap:emit:{keymapId}` - `keymapId` emitted, in arguments you get keymapId, shortcutUsed, Event
-    *
-    * ## Methods
-    * * [getConfig](#getconfig)
-    * * [add](#add)
-    * * [get](#get)
-    * * [getAll](#getAll)
-    * * [remove](#remove)
-    * * [removeAll](#removeall)
-    */
-    interface Keymaps {
-      /**
-       * Get module configurations
-       * @returns Configuration object
-       */
-      getConfig(): any;
-      /**
-       * Add new keymap
-       * @example
-       * // 'ns' is just a custom namespace
-       * keymaps.add('ns:my-keymap', '⌘+j, ⌘+u, ctrl+j, alt+u', editor => {
-       *  console.log('do stuff');
-       * });
-       * // or
-       * keymaps.add('ns:my-keymap', '⌘+s, ctrl+s', 'some-gjs-command');
-       *
-       * // listen to events
-       * editor.on('keymap:emit', (id, shortcut, e) => {
-       *  // ...
-       * })
-       * @param id - Keymap id
-       * @param keys - Keymap keys, eg. `ctrl+a`, `⌘+z, ctrl+z`
-       * @param handler - Keymap handler, might be a function
-       * @param [opts = {}] - Options
-       * @returns Added keymap
-       *  or just a command id as a string
-       */
-      add(id: string, keys: string, handler: ((...params: any[]) => any) | string, opts?: any): any;
-      /**
-       * Get the keymap by id
-       * @example
-       * keymaps.get('ns:my-keymap');
-       * // -> {keys, handler};
-       * @param id - Keymap id
-       * @returns Keymap object
-       */
-      get(id: string): any;
-      /**
-       * Get all keymaps
-       * @example
-       * keymaps.getAll();
-       * // -> {id1: {}, id2: {}};
-       */
-      getAll(): any;
-      /**
-       * Remove the keymap by id
-       * @example
-       * keymaps.remove('ns:my-keymap');
-       * // -> {keys, handler};
-       * @param id - Keymap id
-       * @returns Removed keymap
-       */
-      remove(id: string): any;
-      /**
-       * Remove all binded keymaps
-       */
-      removeAll(): Keymaps;
-    }
-
-    /**
-    * This module allows to manage the stack of changes applied in canvas.
-    * Once the editor is instantiated you can use its API. Before using these methods you should get the module from the instance
-    *
-    * ```js
-    * const um = editor.UndoManager;
-    * ```
-    *
-    * * [getConfig](#getconfig)
-    * * [add](#add)
-    * * [remove](#remove)
-    * * [removeAll](#removeall)
-    * * [start](#start)
-    * * [stop](#stop)
-    * * [undo](#undo)
-    * * [undoAll](#undoall)
-    * * [redo](#redo)
-    * * [redoAll](#redoall)
-    * * [hasUndo](#hasundo)
-    * * [hasRedo](#hasredo)
-    * * [getStack](#getstack)
-    * * [clear](#clear)
-    */
-    interface UndoManager {
-      /**
-       * Get module configurations
-       * @example
-       * const config = um.getConfig();
-       * // { ... }
-       * @returns Configuration object
-       */
-      getConfig(): any;
-      /**
-       * Add an entity (Model/Collection) to track
-       * Note: New Components and CSSRules will be added automatically
-       * @example
-       * um.add(someModelOrCollection);
-       * @param entity - Entity to track
-       */
-      add(entity: Backbone.GenericModel | Backbone.Collection<Backbone.GenericModel>): UndoManager;
-      /**
-       * Remove and stop tracking the entity (Model/Collection)
-       * @example
-       * um.remove(someModelOrCollection);
-       * @param entity - Entity to remove
-       */
-      remove(entity: Backbone.GenericModel | Backbone.Collection<Backbone.GenericModel>): UndoManager;
-      /**
-       * Remove all entities
-       * @example
-       * um.removeAll();
-       */
-      removeAll(): UndoManager;
-      /**
-       * Start/resume tracking changes
-       * @example
-       * um.start();
-       */
-      start(): UndoManager;
-      /**
-       * Stop tracking changes
-       * @example
-       * um.stop();
-       */
-      stop(): UndoManager;
-      /**
-       * Undo last change
-       * @example
-       * um.undo();
-       */
-      undo(): UndoManager;
-      /**
-       * Undo all changes
-       * @example
-       * um.undoAll();
-       */
-      undoAll(): UndoManager;
-      /**
-       * Redo last change
-       * @example
-       * um.redo();
-       */
-      redo(): UndoManager;
-      /**
-       * Redo all changes
-       * @example
-       * um.redoAll();
-       */
-      redoAll(): UndoManager;
-      /**
-       * Checks if exists an available undo
-       * @example
-       * um.hasUndo();
-       */
-      hasUndo(): boolean;
-      /**
-       * Checks if exists an available redo
-       * @example
-       * um.hasRedo();
-       */
-      hasRedo(): boolean;
-      /**
-       * Check if the entity (Model/Collection) to tracked
-       * Note: New Components and CSSRules will be added automatically
-       * @param entity - Entity to track
-       */
-      isRegistered(entity: Backbone.GenericModel | Backbone.Collection<Backbone.GenericModel>): boolean;
-      /**
-       * Get stack of changes
-       * @example
-       * const stack = um.getStack();
-       * stack.each(item => ...);
-       */
-      getStack(): Backbone.Collection<Backbone.GenericModel>;
-      /**
-       * Get grouped undo manager stack.
-       * The difference between `getStack` is when you do multiple operations at a time,
-       * like appending multiple components:
-       * `editor.getWrapper().append(`<div>C1</div><div>C2</div>`);`
-       * `getStack` will return a collection length of 2.
-       *  `getStackGroup` instead will group them as a single operation (the first
-       * inserted component will be returned in the list) by returning an array length of 1.
-       */
-      getStackGroup(): any[];
-      /**
-       * Clear the stack
-       * @example
-       * um.clear();
-       */
-      clear(): UndoManager;
-    }
-
-    /**
-    * You can customize the initial state of the module from the editor initialization, by passing the following [Configuration Object](https://github.com/artf/grapesjs/blob/master/src/canvas/config/config.js)
-    * ```js
-    * const editor = grapesjs.init({
-    *  canvas: {
-    *    // options
-    *  }
-    * })
-    * ```
-    *
-    * Once the editor is instantiated you can use its API and listen to its events. Before using these methods, you should get the module from the instance.
-    *
-    * ```js
-    * // Listen to events
-    * editor.on('canvas:drop', () => { ... });
-    *
-    * // Use the API
-    * const canvas = editor.Canvas;
-    * canvas.setCoords(...);
-    * ```
-    * ## Available Events
-    * * `canvas:dragenter` - When something is dragged inside the canvas, `DataTransfer` instance passed as an argument
-    * * `canvas:dragover` - When something is dragging on canvas, `DataTransfer` instance passed as an argument
-    * * `canvas:drop` - Something is dropped in canvas, `DataTransfer` instance and the dropped model are passed as arguments
-    * * `canvas:dragend` - When a drag operation is ended, `DataTransfer` instance passed as an argument
-    * * `canvas:dragdata` - On any dataTransfer parse, `DataTransfer` instance and the `result` are passed as arguments.
-    *  By changing `result.content` you're able to customize what is dropped
-    *
-    * ## Methods
-    * * [getConfig](#getconfig)
-    * * [getElement](#getelement)
-    * * [getFrameEl](#getframeel)
-    * * [getWindow](#getwindow)
-    * * [getDocument](#getdocument)
-    * * [getBody](#getbody)
-    * * [setCustomBadgeLabel](#setcustombadgelabel)
-    * * [hasFocus](#hasfocus)
-    * * [scrollTo](#scrollto)
-    * * [setZoom](#setzoom)
-    * * [getZoom](#getzoom)
-    * * [getCoords](#getcoords)
-    * * [setCoords](#setcoords)
-    *
-    * [Component]: component.html
-    * [Frame]: frame.html
-    */
-    interface Canvas  {
-      /**
-       * Get the configuration object
-       * @example
-       * console.log(canvas.getConfig())
-       * @returns Configuration object
-       */
-      getConfig(): CanvasConfig;
-      /**
-       * Get the canvas element
-       */
-      getElement(): HTMLElement;
-      /**
-       * Get the main frame element of the canvas
-       */
-      getFrameEl(): HTMLIFrameElement;
-      /**
-       * Get the main frame window instance
-       */
-      getWindow(): Window;
-      /**
-       * Get the main frame document element
-       */
-      getDocument(): HTMLDocument;
-      /**
-       * Get the main frame body element
-       */
-      getBody(): HTMLBodyElement;
-      /**
-       * Set custom badge naming strategy
-       * @example
-       * canvas.setCustomBadgeLabel(function(component){
-       *  return component.getName();
-       * });
-       */
-      setCustomBadgeLabel(f: (...params: any[]) => any): void;
-      /**
-       * Get canvas rectangular data
-       */
-      getRect(): any;
-      /**
-       * Check if the canvas is focused
-       */
-      hasFocus(): boolean;
-      /**
-       * Scroll canvas to the element if it's not visible. The scrolling is
-       * executed via `scrollIntoView` API and options of this method are
-       * passed to it. For instance, you can scroll smoothly by using
-       * `{ behavior: 'smooth' }`.
-       * @example
-       * const selected = editor.getSelected();
-       * // Scroll smoothly (this behavior can be polyfilled)
-       * canvas.scrollTo(selected, { behavior: 'smooth' });
-       * // Force the scroll, even if the element is alredy visible
-       * canvas.scrollTo(selected, { force: true });
-       * @param [opts = {}] - Options, same as options for `scrollIntoView`
-       * @param [opts.force = false] - Force the scroll, even if the element is already visible
-       */
-      scrollTo(el: HTMLElement | Component, opts?: {
-        force?: boolean;
-      }): void;
-      /**
-       * Set canvas zoom value
-       * @example
-       * canvas.setZoom(50); // set zoom to 50%
-       * @param value - The zoom value, from 0 to 100
-       */
-      setZoom(value: number): this;
-      /**
-       * Get canvas zoom value
-       * @example
-       * canvas.setZoom(50); // set zoom to 50%
-       * const zoom = canvas.getZoom(); // 50
-       */
-      getZoom(): number;
-      /**
-       * Set canvas position coordinates
-       * @example
-       * canvas.setCoords(100, 100);
-       * @param x - Horizontal position
-       * @param y - Vertical position
-       */
-      setCoords(x: number, y: number): this;
-      /**
-       * Get canvas position coordinates
-       * @example
-       * canvas.setCoords(100, 100);
-       * const coords = canvas.getCoords();
-       * // { x: 100, y: 100 }
-       * @returns Object containing coordinates
-       */
-      getCoords(): any;
-      /**
-       * Add new frame to the canvas
-       * @example
-       * canvas.addFrame({
-       *   name: 'Mobile home page',
-       *   x: 100, // Position in canvas
-       *   y: 100,
-       *   width: 500, // Frame dimensions
-       *   height: 600,
-       *   // device: 'DEVICE-ID',
-       *   components: [
-       *     '<h1 class="testh">Title frame</h1>',
-       *     '<p class="testp">Paragraph frame</p>',
-       *   ],
-       *   styles: `
-       *     .testh { color: red; }
-       *     .testp { color: blue; }
-       *   `,
-       * });
-       * @param props - Frame properties
-       */
-      addFrame(props: any): any;
-    }
+    /**
+     * Get the View of the component.
+     * This works only if the component is already rendered
+     * @param frame - Get View of a specific frame
+     */
+    getView(frame?: Frame): ComponentView;
 
-    interface FrameOptions {
-      /**
-       * Wrapper component definition. You can also pass an HTML string as components of the default wrapper component.
-       */
-      component: any | string;
-      /**
-       * Width of the frame. By default, the canvas width will be taken.
-       * @defaultValue ''
-       */
-      width?: string;
-      /**
-       * Height of the frame. By default, the canvas height will be taken.
-       * @defaultValue ''
-       */
-      height?: string;
-      /**
-       * Horizontal position of the frame in the canvas.
-       */
-      x?: number;
-      /**
-       * Vertical position of the frame in the canvas.
-       */
-      y?: number;
-    }
-
-    interface Frame extends Backbone.Model<FrameOptions> {
-
-    }
-
-    /**
-    * You can customize the initial state of the module from the editor initialization, by passing the following [Configuration Object](https://github.com/artf/grapesjs/blob/master/src/i18n/config.js)
-    * ```js
-    * const editor = grapesjs.init({
-    *  i18n: {
-    *    locale: 'en',
-    *    localeFallback: 'en',
-    *    messages: {
-    *      it: { hello: 'Ciao', ... },
-    *      ...
-    *    }
-    *  }
-    * })
-    * ```
-    *
-    * Once the editor is instantiated you can use its API. Before using these methods you should get the module from the instance
-    *
-    * ```js
-    * const i18n = editor.I18n;
-    * ```
-    *
-    * ### Events
-    * * `i18n:add` - New set of messages is added
-    * * `i18n:update` - The set of messages is updated
-    * * `i18n:locale` - Locale changed
-    */
-    interface I18n {
-      /**
-       * Get module configurations
-       * @returns Configuration object
-       */
-      getConfig(): any;
-      /**
-       * Update current locale
-       * @example
-       * i18n.setLocale('it');
-       * @param locale - Locale value
-       */
-      setLocale(locale: string): this;
-      /**
-       * Get current locale
-       * @returns Current locale value
-       */
-      getLocale(): string;
-      /**
-       * Get all messages
-       * @example
-       * i18n.getMessages();
-       * // -> { en: { hello: '...' }, ... }
-       * i18n.getMessages('en');
-       * // -> { hello: '...' }
-       * @param [lang] - Specify the language of messages to return
-       * @param [opts] - Options
-       * @param [opts.debug] - Show warnings in case of missing language
-       */
-      getMessages(lang?: string, opts?: {
-          debug?: boolean;
-      }): any;
-      /**
-       * Set new set of messages
-       * @example
-       * i18n.getMessages();
-       * // -> { en: { msg1: 'Msg 1', msg2: 'Msg 2', } }
-       * i18n.setMessages({ en: { msg2: 'Msg 2 up', msg3: 'Msg 3', } });
-       * // Set replaced
-       * i18n.getMessages();
-       * // -> { en: { msg2: 'Msg 2 up', msg3: 'Msg 3', } }
-       * @param msg - Set of messages
-       */
-      setMessages(msg: any): this;
-      /**
-       * Update messages
-       * @example
-       * i18n.getMessages();
-       * // -> { en: { msg1: 'Msg 1', msg2: 'Msg 2', } }
-       * i18n.addMessages({ en: { msg2: 'Msg 2 up', msg3: 'Msg 3', } });
-       * // Set updated
-       * i18n.getMessages();
-       * // -> { en: { msg1: 'Msg 1', msg2: 'Msg 2 up', msg3: 'Msg 3', } }
-       * @param msg - Set of messages to add
-       */
-      addMessages(msg: any): this;
-      /**
-       * Translate the locale message
-       * @example
-       * obj.setMessages({
-       *  en: { msg: 'Msg', msg2: 'Msg {test}'},
-       *  it: { msg2: 'Msg {test} it'},
-       * });
-       * obj.t('msg');
-       * // -> outputs `Msg`
-       * obj.t('msg2', { params: { test: 'hello' } });  // use params
-       * // -> outputs `Msg hello`
-       * obj.t('msg2', { l: 'it', params: { test: 'hello' } });  // custom local
-       * // -> outputs `Msg hello it`
-       * @param key - Label to translate
-       * @param [opts] - Options for the translation
-       * @param [opts.params] - Params for the translation
-       * @param [opts.debug] - Show warnings in case of missing resources
-       */
-      t(key: string, opts?: {
-          params?: any;
-          debug?: boolean;
-      }): string;
-    }
-
-    /**
-    * You can customize the initial state of the module from the editor initialization
-    * ```js
-    * const editor = grapesjs.init({
-    *  ....
-    *  pageManager: {
-    *    pages: [
-    *      {
-    *        id: 'page-id',
-    *        styles: `.my-class { color: red }`, // or a JSON of styles
-    *        component: '<div class="my-class">My element</div>', // or a JSON of components
-    *      }
-    *   ]
-    *  },
-    * })
-    * ```
-    *
-    * Once the editor is instantiated you can use its API. Before using these methods you should get the module from the instance
-    *
-    * ```js
-    * const pageManager = editor.Pages;
-    * ```
-    *
-    * ## Available Events
-    * * `page:add` - Added new page. The page is passed as an argument to the callback
-    * * `page:remove` - Page removed. The page is passed as an argument to the callback
-    * * `page:select` - New page selected. The newly selected page and the previous one, are passed as arguments to the callback
-    * * `page:update` - Page updated. The updated page and the object containing changes are passed as arguments to the callback
-    * * `page` - Catch-all event for all the events mentioned above. An object containing all the available data about the triggered event is passed as an argument to the callback
-    *
-    * ## Methods
-    * * [add](#add)
-    * * [get](#get)
-    * * [getAll](#getall)
-    * * [getAllWrappers](#getallwrappers)
-    * * [getMain](#getmain)
-    * * [remove](#remove)
-    * * [select](#select)
-    * * [getSelected](#getselected)
-    *
-    * [Page]: page.html
-    * [Component]: component.html
-    */
-    interface Pages {
-      /**
-       * Add new page
-       * @example
-       * const newPage = pageManager.add({
-       *  id: 'new-page-id', // without an explicit ID, a random one will be created
-       *  styles: `.my-class { color: red }`, // or a JSON of styles
-       *  component: '<div class="my-class">My element</div>', // or a JSON of components
-       * });
-       * @param props - Page properties
-       * @param [opts] - Options
-       */
-      add(props: any, opts?: any): any;
-      /**
-       * Remove page
-       * @example
-       * const removedPage = pageManager.remove('page-id');
-       * // or by passing the page
-       * const somePage = pageManager.get('page-id');
-       * pageManager.remove(somePage);
-       */
-      remove(): any;
-      /**
-       * Get page by id
-       * @example
-       * const somePage = pageManager.get('page-id');
-       * @param id - Page id
-       */
-      get(id: string): any;
-      /**
-       * Get main page (the first one available)
-       * @example
-       * const mainPage = pageManager.getMain();
-       */
-      getMain(): any;
-      /**
-       * Get all pages
-       * @example
-       * const arrayOfPages = pageManager.getAll();
-       */
-      getAll(): any;
-      /**
-       * Get wrapper components (aka body) from all pages and frames.
-       * @example
-       * const wrappers = pageManager.getAllWrappers();
-       * // Get all `image` components from the project
-       * const allImages = wrappers.map(wrp => wrp.findType('image')).flat();
-       */
-      getAllWrappers(): any;
-      /**
-       * Change the selected page. This will switch the page rendered in canvas
-       * @example
-       * pageManager.select('page-id');
-       * // or by passing the page
-       * const somePage = pageManager.get('page-id');
-       * pageManager.select(somePage);
-       */
-      select(): this;
-      /**
-       * Get the selected page
-       * @example
-       * const selectedPage = pageManager.getSelected();
-       */
-      getSelected(): any;
-    }
-
-    interface PageOptions {
-      frames : Frame[]
-    }
-
-    interface Page extends Backbone.Model<PageOptions> {
-      /**
-      * Get page id
-      */
-      getId(): string;
-
-      /**
-      * Get page name
-      */
-      getName(): string;
-
-      /**
-      * Update page name
-      * @param value - New page name
-      */
-      setName(value: string): void;
-
-      /**
-      * Get all frames
-      * @example
-      * const arrayOfFrames = page.getAllFrames();
-      */
-      getAllFrames(): Frame[];
-
-      /**
-      * Get the first frame of the page (identified always as the main one)
-      * @example
-      * const mainFrame = page.getMainFrame();
-      */
-      getMainFrame(): Frame;
-
-      /**
-      * Get the root component (usually is the `wrapper` component) from the main frame
-      * @example
-      * const rootComponent = page.getMainComponent();
-      * console.log(rootComponent.toHTML());
-      */
-      getMainComponent(): Component;
-    }
-
-    /**
-    * You can customize the initial state of the module from the editor initialization, by passing the following [Configuration Object](https://github.com/artf/grapesjs/blob/master/src/parser/config/config.js)
-    * ```js
-    * const editor = grapesjs.init({
-    *  parser: {
-    *    // options
-    *  }
-    * })
-    * ```
-    *
-    * Once the editor is instantiated you can use its API. Before using these methods you should get the module from the instance
-    *
-    * ```js
-    * const { Parser } = editor;
-    * ```
-    * ## Available Events
-    * * `parse:html` - On HTML parse, an object containing the input and the output of the parser is passed as an argument
-    * * `parse:css` - On CSS parse, an object containing the input and the output of the parser is passed as an argument
-    *
-    * ## Methods
-    * * [getConfig](#getconfig)
-    * * [parseHtml](#parsehtml)
-    * * [parseCss](#parsecss)
-    */
-    interface Parser {
-      /**
-       * Get the configuration object
-       * @example
-       * console.log(Parser.getConfig())
-       * @returns Configuration object
-       */
-      getConfig(): any;
-      /**
-       * Parse HTML string and return the object containing the Component Definition
-       * @example
-       * const resHtml = Parser.parseHtml(`<table><div>Hi</div></table>`, {
-       *   htmlType: 'text/html', // default
-       * });
-       * // By using the `text/html`, this will fix automatically all the HTML syntax issues
-       * // Indeed the final representation, in this case, will be `<div>Hi</div><table></table>`
-       * const resXml = Parser.parseHtml(`<table><div>Hi</div></table>`, {
-       *   htmlType: 'application/xml',
-       * });
-       * // This will preserve the original format as, from the XML point of view, is a valid format
-       * @param input - HTML string to parse
-       * @param [options] - Options
-       * @param [options.htmlType] - [HTML mime type](https://developer.mozilla.org/en-US/docs/Web/API/DOMParser/parseFromString#Argument02) to parse
-       * @param [options.allowScripts = false] - Allow `<script>` tags
-       * @param [options.allowUnsafeAttr = false] - Allow unsafe HTML attributes (eg. `on*` inline event handlers)
-       * @returns Object containing the result `{ html: ..., css: ... }`
-       */
-      parseHtml(input: string, options?: {
-          htmlType?: string;
-          allowScripts?: boolean;
-          allowUnsafeAttr?: boolean;
-      }): any;
-      /**
-       * Parse CSS string and return an array of valid definition objects for CSSRules
-       * @example
-       * const res = Parser.parseCss('.cls { color: red }');
-       * // [{ ... }]
-       * @param input - CSS string to parse
-       * @returns Array containing the result
-       */
-      parseCss(input: string): object[];
-    }
-  }
\ No newline at end of file
+    /**
+     * Execute callback function on itself and all inner components
+     * @example
+     * component.onAll(component => {
+     *  // do something with component
+     * })
+     * @param clb - Callback function, the model is passed as an argument
+     */
+    onAll(clb: (...params: any[]) => any): this;
+
+    /**
+     * Remove the component
+     */
+    remove(): this;
+
+    /**
+     * Move the component to another destination component
+     * @example
+     * // Move the selected component on top of the wrapper
+     * const dest = editor.getWrapper();
+     * editor.getSelected().move(dest, { at: 0 });
+     * @param component - Destination component (so the current one will be appended as a child)
+     * @param opts - Options for the append action
+     */
+    move(component: Component, opts: any): this;
+  }
+
+  /**
+   * You can customize the initial state of the module from the editor initialization, by passing the following [Configuration Object](https://github.com/artf/grapesjs/blob/master/src/panels/config/config.js)
+   * ```js
+   * const editor = grapesjs.init({
+   *  panels: {
+   *    // options
+   *  }
+   * })
+   * ```
+   *
+   * Once the editor is instantiated you can use its API. Before using these methods you should get the module from the instance
+   *
+   * ```js
+   * const panelManager = editor.Panels;
+   * ```
+   *
+   * * [addPanel](#addpanel)
+   * * [addButton](#addbutton)
+   * * [getButton](#getbutton)
+   * * [getPanel](#getpanel)
+   * * [getPanels](#getpanels)
+   * * [getPanelsEl](#getpanelsel)
+   * * [removePanel](#removepanel)
+   * * [removeButton](#removebutton)
+   */
+  interface Panels {
+    /**
+     * Returns the collection of panels
+     * @returns Collection of panel
+     */
+    getPanels(): Backbone.Collection<Panel>;
+    /**
+     * Returns panels element
+     */
+    getPanelsEl(): HTMLElement;
+    /**
+     * Add new panel to the collection
+     * @example
+     * var newPanel = panelManager.addPanel({
+     *   id: 'myNewPanel',
+     *  visible  : true,
+     *  buttons  : [...],
+     * });
+     * @param panel - Object with right properties or an instance of Panel
+     * @returns Added panel. Useful in case passed argument was an Object
+     */
+    addPanel(panel: any | Panel): Panel;
+    /**
+     * Remove a panel from the collection
+     * @example
+     * const newPanel = panelManager.removePanel({
+     *   id: 'myNewPanel',
+     *  visible  : true,
+     *  buttons  : [...],
+     * });
+     *
+     * const newPanel = panelManager.removePanel('myNewPanel');
+     * @param panel - Object with right properties or an instance of Panel or Painel id
+     * @returns Removed panel. Useful in case passed argument was an Object
+     */
+    removePanel(panel: any | Panel | string): Panel;
+    /**
+     * Get panel by ID
+     * @example
+     * var myPanel = panelManager.getPanel('myNewPanel');
+     * @param id - Id string
+     */
+    getPanel(id: string): Panel | null;
+    /**
+     * Add button to the panel
+     * @example
+     * var newButton = panelManager.addButton('myNewPanel',{
+     *   id: 'myNewButton',
+     *   className: 'someClass',
+     *   command: 'someCommand',
+     *   attributes: { title: 'Some title'},
+     *   active: false,
+     * });
+     * // It's also possible to pass the command as an object
+     * // with .run and .stop methods
+     * ...
+     * command: {
+     *   run: function(editor) {
+     *     ...
+     *   },
+     *   stop: function(editor) {
+     *     ...
+     *   }
+     * },
+     * // Or simply like a which will be evaluated as a single .run command
+     * ...
+     * command: function(editor) {
+     *   ...
+     * }
+     * @param panelId - Panel's ID
+     * @param button - Button object or instance of Button
+     * @returns Added button. Useful in case passed button was an Object
+     */
+    addButton(panelId: string, button: ButtonOptions | Button): Button | null;
+    /**
+     * Remove button from the panel
+     * @example
+     * const removedButton = panelManager.addButton('myNewPanel',{
+     *   id: 'myNewButton',
+     *   className: 'someClass',
+     *   command: 'someCommand',
+     *   attributes: { title: 'Some title'},
+     *   active: false,
+     * });
+     *
+     * const removedButton = panelManager.removeButton('myNewPanel', 'myNewButton');
+     * @param panelId - Panel's ID
+     * @param buttonId - Button's ID
+     * @returns Removed button.
+     */
+    removeButton(panelId: string, buttonId: string): Button | null;
+    /**
+     * Get button from the panel
+     * @example
+     * var button = panelManager.getButton('myPanel','myButton');
+     * @param panelId - Panel's ID
+     * @param id - Button's ID
+     */
+    getButton(panelId: string, id: string): Button | null;
+  }
+
+  /**
+   * With Style Manager you build categories (called sectors) of CSS properties which could be used to customize the style of components.
+   * You can customize the initial state of the module from the editor initialization, by passing the following [Configuration Object](https://github.com/artf/grapesjs/blob/master/src/style_manager/config/config.js)
+   * ```js
+   * const editor = grapesjs.init({
+   *  styleManager: {
+   *    // options
+   *  }
+   * })
+   * ```
+   *
+   * Once the editor is instantiated you can use its API and listen to its events. Before using these methods, you should get the module from the instance.
+   *
+   * ```js
+   * // Listen to events
+   * editor.on('style:sector:add', (sector) => { ... });
+   *
+   * // Use the API
+   * const styleManager = editor.StyleManager;
+   * styleManager.addSector(...);
+   * ```
+   * ## Available Events
+   * * `style:sector:add` - Sector added. The [Sector] is passed as an argument to the callback.
+   * * `style:sector:remove` - Sector removed. The [Sector] is passed as an argument to the callback.
+   * * `style:sector:update` - Sector updated. The [Sector] and the object containing changes are passed as arguments to the callback.
+   * * `style:property:add` - Property added. The [Property] is passed as an argument to the callback.
+   * * `style:property:remove` - Property removed. The [Property] is passed as an argument to the callback.
+   * * `style:property:update` - Property updated. The [Property] and the object containing changes are passed as arguments to the callback.
+   * * `style:target` - Target selection changed. The target (or `null` in case the target is deselected) is passed as an argument to the callback.
+   * <!--
+   * * `styleManager:update:target` - The target (Component or CSSRule) is changed
+   * * `styleManager:change` - Triggered on style property change from new selected component, the view of the property is passed as an argument to the callback
+   * * `styleManager:change:{propertyName}` - As above but for a specific style property
+   * -->
+   *
+   * ## Methods
+   * * [getConfig](#getconfig)
+   * * [addSector](#addsector)
+   * * [getSector](#getsector)
+   * * [getSectors](#getsectors)
+   * * [removeSector](#removesector)
+   * * [addProperty](#addproperty)
+   * * [getProperty](#getproperty)
+   * * [getProperties](#getproperties)
+   * * [removeProperty](#removeproperty)
+   * * [select](#select)
+   * * [getSelected](#getselected)
+   * * [getSelectedAll](#getselectedall)
+   * * [getSelectedParents](#getselectedparents)
+   * * [addStyleTargets](#addstyletargets)
+   * * [getBuiltIn](#getbuiltin)
+   * * [getBuiltInAll](#getbuiltinall)
+   * * [addBuiltIn](#addbuiltin)
+   * * [addType](#addtype)
+   * * [getType](#gettype)
+   * * [getTypes](#gettypes)
+   *
+   * [Sector]: sector.html
+   * [CssRule]: css_rule.html
+   * [Component]: component.html
+   * [Property]: property.html
+   */
+  interface StyleManager {
+    /**
+     * Get configuration object
+     */
+    getConfig(): StyleManagerConfig;
+    /**
+     * Add new sector. If the sector with the same id already exists, that one will be returned.
+     * @example
+     * const sector = styleManager.addSector('mySector',{
+     *   name: 'My sector',
+     *   open: true,
+     *   properties: [{ name: 'My property'}]
+     * }, { at: 0 });
+     * // With `at: 0` we place the new sector at the beginning of the list
+     * @param id - Sector id
+     * @param sector - Sector definition. Check the [available properties](sector.html#properties)
+     * @param [options = {}] - Options
+     * @param [options.at] - Position index (by default, will be appended at the end).
+     */
+    addSector(
+      id: string,
+      sector: any,
+      options?: {
+        at?: number;
+      }
+    ): any;
+    /**
+     * Get sector by id.
+     * @example
+     * const sector = styleManager.getSector('mySector');
+     * @param id - Sector id
+     */
+    getSector(id: string): any;
+    /**
+     * Get all sectors.
+     * @example
+     * const sectors = styleManager.getSectors();
+     * @param [opts = {}] - Options
+     * @param [opts.visible] - Returns only visible sectors
+     */
+    getSectors(opts?: { visible?: boolean }): any;
+    /**
+     * Remove sector by id.
+     * @example
+     * const removed = styleManager.removeSector('mySector');
+     * @param id - Sector id
+     */
+    removeSector(id: string): any;
+    /**
+     * Add new property to the sector.
+     * @example
+     * const property = styleManager.addProperty('mySector', {
+     *   label: 'Minimum height',
+     *   property: 'min-height',
+     *   type: 'select',
+     *   default: '100px',
+     *   options: [
+     *    { id: '100px', label: '100' },
+     *    { id: '200px', label: '200' },
+     *   ],
+     * }, { at: 0 });
+     * @param sectorId - Sector id.
+     * @param property - Property definition. Check the [base available properties](property.html#properties) + others based on the `type` of your property.
+     * @param [opts = {}] - Options
+     * @param [opts.at] - Position index (by default, will be appended at the end).
+     */
+    addProperty(
+      sectorId: string,
+      property: any,
+      opts?: {
+        at?: number;
+      }
+    ): any;
+    /**
+     * Get the property.
+     * @example
+     * const property = styleManager.getProperty('mySector', 'min-height');
+     * @param sectorId - Sector id.
+     * @param id - Property id.
+     */
+    getProperty(sectorId: string, id: string): any;
+    /**
+     * Get all properties of the sector.
+     * @example
+     * const properties = styleManager.getProperties('mySector');
+     * @param sectorId - Sector id.
+     */
+    getProperties(sectorId: string): any;
+    /**
+     * Remove the property.
+     * @example
+     * const property = styleManager.removeProperty('mySector', 'min-height');
+     * @param sectorId - Sector id.
+     * @param id - Property id.
+     */
+    removeProperty(sectorId: string, id: string): any;
+    /**
+     * Select new target.
+     * The target could be a Component, CSSRule, or a CSS selector string.
+     * @example
+     * // Select the first button in the current page
+     * const wrapperCmp = editor.Pages.getSelected().getMainComponent();
+     * const btnCmp = wrapperCmp.find('button')[0];
+     * btnCmp && styleManager.select(btnCmp);
+     *
+     * // Set as a target the CSS selector
+     * styleManager.select('.btn > span');
+     */
+    select(): any;
+    /**
+     * Get the last selected target.
+     * By default, the Style Manager shows styles of the last selected target.
+     */
+    getSelected(): any;
+    /**
+     * Get the array of selected targets.
+     */
+    getSelectedAll(): any;
+    /**
+     * Get parent rules of the last selected target.
+     */
+    getSelectedParents(): any;
+    /**
+     * Update selected targets with a custom style.
+     * @example
+     * styleManager.addStyleTargets({ color: 'red' });
+     * @param style - Style object
+     * @param [opts = {}] - Options
+     */
+    addStyleTargets(style: any, opts?: any): void;
+    /**
+     * Return built-in property definition
+     * @example
+     * const widthPropDefinition = styleManager.getBuiltIn('width');
+     * @param prop - Property name.
+     * @returns Property definition.
+     */
+    getBuiltIn(prop: string): any | null;
+    /**
+     * Get all the available built-in property definitions.
+     */
+    getBuiltInAll(): any;
+    /**
+     * Add built-in property definition.
+     * If the property exists already, it will extend it.
+     * @example
+     * const sector = styleManager.addBuiltIn('new-property', {
+     *  type: 'select',
+     *  default: 'value1',
+     *  options: [{ id: 'value1', label: 'Some label' }, ...],
+     * })
+     * @param prop - Property name.
+     * @param definition - Property definition.
+     * @returns Added property definition.
+     */
+    addBuiltIn(prop: string, definition: any): any;
+    /**
+     * Add new property type
+     * @example
+     * styleManager.addType('my-custom-prop', {
+     *    // Create UI
+     *    create({ props, change }) {
+     *      const el = document.createElement('div');
+     *      el.innerHTML = '<input type="range" class="my-input" min="10" max="50"/>';
+     *      const inputEl = el.querySelector('.my-input');
+     *      inputEl.addEventListener('change', event => change({ event }));
+     *      inputEl.addEventListener('input', event => change({ event, partial: true }));
+     *      return el;
+     *    },
+     *    // Propagate UI changes up to the targets
+     *    emit({ props, updateStyle }, { event, partial }) {
+     *      const { value } = event.target;
+     *      updateStyle(`${value}px`, { partial });
+     *    },
+     *    // Update UI (eg. when the target is changed)
+     *    update({ value, el }) {
+     *      el.querySelector('.my-input').value = parseInt(value, 10);
+     *    },
+     *    // Clean the memory from side effects if necessary (eg. global event listeners, etc.)
+     *    destroy() {}
+     * })
+     * @param id - Type ID
+     * @param definition - Definition of the type.
+     */
+    addType(id: string, definition: any): void;
+    /**
+     * Get type
+     * @param id - Type ID
+     * @returns Type definition
+     */
+    getType(id: string): any;
+    /**
+     * Get all types
+     */
+    getTypes(): any[];
+  }
+
+  interface SectorOptions {
+    /**
+     * Sector id, eg. `typography`
+     */
+    id: string;
+    /**
+     * Sector name, eg. `Typography`
+     */
+    name: string;
+    /**
+     * Indicates the open state.
+     * @defaultValue true
+     */
+    open?: boolean;
+    /**
+     * Indicate an array of Property defintions.
+     * @defaultValue []
+     */
+    properties?: AnyProperty[];
+  }
+
+  interface Sector extends Backbone.Model<SectorOptions> {
+    /**
+     * Get sector id
+     */
+    getId(): string;
+
+    /**
+     * Get sector name
+     */
+    getName(): string;
+
+    /**
+     * Update sector name.
+     * @param value - New sector name
+     */
+    setName(value: string): void;
+
+    /**
+     * Check if the sector is open
+     */
+    isOpen(): boolean;
+
+    /**
+     * Update Sector open state
+     */
+    setOpen(value: boolean): void;
+
+    /**
+     * Check if the sector is visible
+     */
+    isVisible(): boolean;
+
+    /**
+     * Get sector properties.
+     * @param [opts = {}] - Options
+     * @param [opts.withValue = false] - Get only properties with value
+     * @param [opts.withParentValue = false] - Get only properties with parent value
+     */
+    getProperties(opts?: {
+      withValue?: boolean;
+      withParentValue?: boolean;
+    }): AnyProperty[];
+  }
+
+  interface PropertyOptions {
+    /**
+     * Property id, eg. `my-property-id`.
+     */
+    id: string;
+    /**
+     * Related CSS property name, eg. `text-align`.
+     */
+    property: string;
+    /**
+     * Defaul value of the property.
+     */
+    default: string;
+    /**
+     * Label to use in UI, eg. `Text Align`.
+     */
+    label: string;
+    /**
+       * Change callback.
+      \n
+      ```js
+       onChange: ({ property, from, to }) => {
+         console.log(`Changed property`, property.getName(), { from, to });
+       }
+      ```
+       */
+    onChange?: (...params: any[]) => any;
+  }
+
+  interface Property<T extends PropertyOptions> extends Backbone.Model<T> {
+    /**
+     * Get property id
+     */
+    getId(): string;
+
+    /**
+     * Get the property type.
+     * The type of the property is defined on property creation and based on its value the proper Property class is assigned.
+     * The default type is `base`.
+     */
+    getType(): string;
+
+    /**
+     * Get name (the CSS property name).
+     */
+    getName(): string;
+
+    /**
+     * Get property label.
+     * @param {Object} [opts={}] Options
+     * @param {Boolean} [opts.locale=true] Use the locale string from i18n module
+     */
+    getLabel(opts?: { locale?: boolean }): string;
+
+    /**
+     * Get property value.
+     * @param [opts = {}] - Options
+     * @param [opts.noDefault = false] - Avoid returning the default value
+     */
+    getValue(opts?: { noDefault?: boolean }): string;
+
+    /**
+     * Check if the property has value.
+     * @param [opts = {}] - Options
+     * @param [opts.noParent = false] - Ignore the value if it comes from the parent target.
+     */
+    hasValue(opts?: { noParent?: boolean }): boolean;
+
+    /**
+     * Indicates if the current value is coming from a parent target (eg. another CSSRule).
+     */
+    hasValueParent(): boolean;
+
+    /**
+     * Get the CSS style object of the property.
+     * @param {Object} [opts={}] Options
+     * @param {Boolean} [opts.camelCase] Return property name in camelCase.
+     * @example
+     * // In case the property is `color` with a value of `red`.
+     * console.log(property.getStyle());
+     * // { color: 'red' };
+     */
+    getStyle(opts?: { camelCase?: boolean }): any;
+
+    /**
+     * Get the default value.
+     */
+    getDefaultValue(): string;
+
+    /**
+     * Update the value.
+     * The change is also propagated to the selected targets (eg. CSS rule).
+     * @param value - New value
+     * @param [opts = {}] - Options
+     * @param [opts.partial = false] - If `true` the update on targets won't be considered complete (not stored in UndoManager)
+     * @param [opts.noTarget = false] - If `true` the change won't be propagated to selected targets.
+     */
+    upValue(
+      value: string,
+      opts?: {
+        partial?: boolean;
+        noTarget?: boolean;
+      }
+    ): void;
+
+    /**
+     * Check if the sector is visible
+     */
+    isVisible(): boolean;
+
+    /**
+     * Clear the value.
+     * The change is also propagated to the selected targets (eg. the css property is cleared).
+     * @param [opts = {}] - Options
+     * @param [opts.noTarget = false] - If `true` the change won't be propagated to selected targets.
+     */
+    clear(opts?: { noTarget?: boolean }): void;
+
+    /**
+     * Indicates if the current value comes directly from the selected target and so can be cleared.
+     */
+    canClear(): boolean;
+
+    /**
+     * If the current property is a sub-property, this will return the parent Property.
+     */
+    getParent(): any;
+
+    /**
+     * Indicates if the property is full-width in UI.
+     */
+    isFull(): boolean;
+  }
+
+  interface PropertyNumberOptions extends PropertyOptions {
+    /**
+     * Array of units, eg. `['px', '%']`
+     */
+    units: String[];
+    /**
+     * Minimum value.
+     */
+    min: number;
+    /**
+     * Maximum value.
+     */
+    max: number;
+    /**
+     * Step value.
+     */
+    step: number;
+  }
+
+  interface PropertyNumber extends Property<PropertyNumberOptions> {
+    /**
+     * Get property units.
+     */
+    getUnits(): String[];
+
+    /**
+     * Get property unit value.
+     */
+    getUnit(): string;
+
+    /**
+     * Get min value.
+     */
+    getMin(): number;
+
+    /**
+     * Get max value.
+     */
+    getMax(): number;
+
+    /**
+     * Get step value.
+     */
+    getStep(): number;
+
+    /**
+     * Update property unit value.
+     * The change is also propagated to the selected targets.
+     * @param unit - New unit value
+     * @param [opts = {}] - Options
+     * @param [opts.noTarget = false] - If `true` the change won't be propagated to selected targets.
+     */
+    upUnit(
+      unit: string,
+      opts?: {
+        noTarget?: boolean;
+      }
+    ): string;
+  }
+
+  interface SelectOption {
+    id?: string;
+    value?: string;
+    label?: string;
+    name?: string;
+  }
+
+  interface PropertySelectOptions extends PropertyOptions {
+    /**
+       * Array of option definitions.
+      \n
+      ```js
+      options: [
+       { id: '100', label: 'Set 100' },
+       { id: '200', label: 'Set 200' },
+      ]
+      ```
+       */
+    options: SelectOption[];
+  }
+
+  interface PropertySelect extends Property<PropertySelectOptions> {
+    /**
+     * Get available options.
+     * @returns Array of options
+     */
+    getOptions(): SelectOption[];
+
+    /**
+     * Get current selected option or by id.
+     * @param [id] - Option id.
+     */
+    getOption(id?: string): any | null;
+
+    /**
+     * Update options.
+     * @param value - New array of options, eg. `[{ id: 'val-1', label: 'Value 1' }]`
+     */
+    setOptions(value: SelectOption[]): void;
+
+    /**
+     * Add new option.
+     * @param value - Option object, eg. `{ id: 'val-1', label: 'Value 1' }`
+     */
+    addOption(value: SelectOption): void;
+
+    /**
+     * Get the option id from the option object.
+     * @param option - Option object
+     * @returns Option id
+     */
+    getOptionId(option: SelectOption): string;
+
+    /**
+     * Get option label.
+     * @param id - Option id or the option object
+     * @param [opts = {}] - Options
+     * @param [opts.locale = true] - Use the locale string from i18n module
+     * @returns Option label
+     */
+    getOptionLabel(
+      id: string | any,
+      opts?: {
+        locale?: boolean;
+      }
+    ): string;
+  }
+
+  interface PropertyCompositeOptions extends PropertyOptions {
+    /**
+     * Array of sub properties, eg. `[{ type: 'number', property: 'margin-top' }, ...]`
+     */
+    properties: AnyProperty[];
+    /**
+     * Indicate if the final CSS property is splitted (detached: `margin-top: X; margin-right: Y; ...`) or combined (not detached: `margin: X Y ...;`)
+     */
+    detached?: boolean;
+    /**
+     * Value used to split property values, default `" "`.
+     * @defaultValue ' '
+     */
+    separator?: string | RegExp;
+    /**
+     * Value used to join property values, default `" "`.
+     * @defaultValue ' '
+     */
+    join?: string;
+    /**
+       * Custom logic for getting property values from the target style object.
+      \n
+      ```js
+       fromStyle: (style) => {
+         const margins = parseMarginShorthand(style.margin);
+         return {
+           'margin-top': margins.top,
+           // ...
+         };
+       }
+      ```
+       */
+    fromStyle?: (style: Record<string, any>) => Record<string, any>;
+    /**
+       * Custom logic for creating the CSS style object to apply on selected targets.
+      \n
+      ```js
+       toStyle: (values) => {
+         const top = values['margin-top'] || 0;
+         const right = values['margin-right'] || 0;
+         // ...
+         return {
+           margin: `${top} ${right} ...`,
+         };
+       }
+      ```
+       */
+    toStyle?: (values: Record<string, any>) => Record<string, any>;
+  }
+  interface PropertyComposite<T extends PropertyCompositeOptions>
+    extends Property<T> {
+    /**
+     * Get properties.
+     */
+    getProperties(): AnyProperty[];
+
+    /**
+     * Get property by id.
+     * @param id - Property id.
+     */
+    getProperty(id: string): any;
+
+    /**
+     * Get property at index.
+     */
+    getPropertyAt(index: number): any;
+
+    /**
+     * Check if the property is detached.
+     */
+    isDetached(): boolean;
+
+    /**
+     * Get current values of properties.
+     * @example
+     * // In case the property is `margin` with sub properties like `margin-top`, `margin-right`, etc.
+     * console.log(property.getValues());
+     * // { 'margin-top': '10px', 'margin-right': '20px', ... };
+     * @param [opts = {}] - Options
+     * @param [opts.byName = false] - Use property names as a key instead of the id.
+     */
+    getValues(opts?: { byName?: boolean }): any;
+
+    /**
+     * Get property separator.
+     */
+    getSeparator(): RegExp;
+
+    /**
+     * Get the join value.
+     */
+    getJoin(): string;
+  }
+
+  type AnyProperty =
+    | Property<PropertyOptions>
+    | PropertyNumber
+    | PropertySelect
+    | PropertyComposite<PropertyCompositeOptions>
+    | PropertyStack;
+
+  interface Layer extends Backbone.Model<{}> {
+    /**
+     * Get layer id.
+     */
+    getId(): string;
+
+    /**
+     * Get layer index.
+     */
+    getIndex(): number;
+
+    /**
+     * Get layer values.
+     * @param {Object} [opts={}] Options
+     * @param {Boolean} [opts.camelCase] Return property names in camelCase.
+     */
+    getValues(opts?: { camelCase?: boolean }): any;
+
+    /**
+     * Get layer label.
+     */
+    getLabel(): string;
+
+    /**
+     * Check if the layer is selected.
+     */
+    isSelected(): boolean;
+
+    /**
+     * Select the layer.
+     */
+    select(): any;
+
+    /**
+     * Remove the layer.
+     */
+    remove(): any;
+
+    /**
+     * Move layer to a new index.
+     * @param index New index
+     */
+    move(index: number): any;
+
+    /**
+     * Get style object for the preview.
+     * @param [opts={}] Options. Same of `PropertyStack.getStyleFromLayer`
+     * @returns Style object
+     */
+    getStylePreview(opts: object): any;
+
+    /**
+     * Check if the property has the preview enabled for this layer.
+     */
+    hasPreview(): boolean;
+  }
+
+  interface PropertyStackOptions extends PropertyCompositeOptions {
+    /**
+     * Indicate if the layer should display a preview.
+     */
+    preview?: boolean;
+    /**
+     * The separator used to split layer values.
+     * @defaultValue ', '
+     */
+    layerSeparator?: string | RegExp;
+    /**
+     * Value used to join layer values.
+     * @defaultValue ', '
+     */
+    layerJoin?: string;
+    /**
+       * Custom logic for creating layer labels.
+      \n
+      ```js
+       layerLabel: (layer) => {
+         const values = layer.getValues();
+         return `A: ${values['prop-a']} B: ${values['prop-b']}`;
+       }
+       ```
+       */
+    layerLabel?: (...params: any[]) => any;
+  }
+
+  interface PropertyStack extends PropertyComposite<PropertyStackOptions> {
+    /**
+     * Get all available layers.
+     */
+    getLayers(): Layer[];
+
+    /**
+     * Get layer by index.
+     * @example
+     * // Get the first layer
+     * const layerFirst = property.getLayer(0);
+     * // Get the last layer
+     * const layers = this.getLayers();
+     * const layerLast = property.getLayer(layers.length - 1);
+     * @param [index = 0] - Layer index position.
+     */
+    getLayer(index?: number): Layer | null;
+
+    /**
+     * Get selected layer.
+     */
+    getSelectedLayer(): Layer | null;
+
+    /**
+     * Select layer.
+     * Without a selected layer any update made on inner properties has no effect.
+     * @example
+     * const layer = property.getLayer(0);
+     * property.selectLayer(layer);
+     * @param layer Layer to select
+     */
+    selectLayer(layer: Layer): void;
+
+    /**
+     * Select layer by index.
+     * @example
+     * property.selectLayerAt(1);
+     * @param index - Index of the layer to select.
+     */
+    selectLayerAt(index: number): void;
+
+    /**
+     * Move layer by index.
+     * @example
+     * const layer = property.getLayer(1);
+     * property.moveLayer(layer, 0);
+     * @param index - New layer index.
+     */
+    moveLayer(layer: Layer, index: number): void;
+
+    /**
+     * Add new layer to the stack.
+     * @example
+     * // Add new layer at the beginning of the stack with custom values
+     * property.addLayer({ 'sub-prop1': 'value1', 'sub-prop2': 'value2' }, { at: 0 });
+     * @param [props = {}] - Custom property values to use in a new layer.
+     * @param [opts = {}] - Options
+     * @param [opts.at] - Position index (by default the layer will be appended at the end).
+     */
+    addLayer(
+      props?: any,
+      opts?: {
+        at?: number;
+      }
+    ): Layer;
+
+    /**
+     * Remove layer.
+     * @example
+     * const layer = property.getLayer(0);
+     * property.removeLayer(layer);
+     */
+    removeLayer(layer: Layer): Layer;
+
+    /**
+     * Remove layer by index.
+     * @example
+     * property.removeLayerAt(0);
+     * @param index - Index of the layer to remove
+     */
+    removeLayerAt(index: number): Layer | null;
+
+    /**
+     * Get the layer label. The label can be customized with the `layerLabel` property.
+     * @example
+     * const layer = this.getLayer(1);
+     * const label = this.getLayerLabel(layer);
+     */
+    getLayerLabel(layer: Layer): string;
+
+    /**
+     * Get style object from the layer.
+     * @param [opts = {}] - Options
+     * @param [opts.camelCase] - Return property names in camelCase.
+     * @param [opts.number] - Limit the result of the number types, eg. `number: { min: -3, max: 3 }`
+     * @returns Style object
+     */
+    getStyleFromLayer(
+      layer: Layer,
+      opts?: {
+        camelCase?: boolean;
+        number?: any;
+      }
+    ): any;
+
+    /**
+     * Get preview style object from the layer.
+     * If the property has `preview: false` the returned object will be empty.
+     * @param [opts = {}] - Options. Same of `getStyleFromLayer`
+     * @returns Style object
+     */
+    getStylePreview(layer: Layer, opts?: any): any;
+
+    /**
+     * Get layer separator.
+     */
+    getLayerSeparator(): RegExp;
+  }
+
+  /**
+   * You can customize the initial state of the module from the editor initialization, by passing the following [Configuration Object](https://github.com/artf/grapesjs/blob/master/src/storage_manager/config/config.js)
+   * ```js
+   * const editor = grapesjs.init({
+   *  storageManager: {
+   *    // options
+   *  }
+   * })
+   * ```
+   *
+   * Once the editor is instantiated you can use its API and listen to its events. Before using these methods, you should get the module from the instance.
+   *
+   * ```js
+   * // Listen to events
+   * editor.on('storage:start', () => { ... });
+   *
+   * // Use the API
+   * const storageManager = editor.StorageManager;
+   * storageManager.add(...);
+   * ```
+   *
+   * ## Available Events
+   * * `storage:start` - Before the storage request is started
+   * * `storage:start:store` - Before the store request. The object to store is passed as an argumnet (which you can edit)
+   * * `storage:start:load` - Before the load request. Items to load are passed as an argumnet (which you can edit)
+   * * `storage:load` - Triggered when something was loaded from the storage, loaded object passed as an argumnet
+   * * `storage:store` - Triggered when something is stored to the storage, stored object passed as an argumnet
+   * * `storage:end` - After the storage request is ended
+   * * `storage:end:store` - After the store request
+   * * `storage:end:load` - After the load request
+   * * `storage:error` - On any error on storage request, passes the error as an argument
+   * * `storage:error:store` - Error on store request, passes the error as an argument
+   * * `storage:error:load` - Error on load request, passes the error as an argument
+   *
+   * ## Methods
+   * * [getConfig](#getconfig)
+   * * [isAutosave](#isautosave)
+   * * [setAutosave](#setautosave)
+   * * [getStepsBeforeSave](#getstepsbeforesave)
+   * * [setStepsBeforeSave](#setstepsbeforesave)
+   * * [setStepsBeforeSave](#setstepsbeforesave)
+   * * [getStorages](#getstorages)
+   * * [getCurrent](#getcurrent)
+   * * [getCurrentStorage](#getcurrentstorage)
+   * * [setCurrent](#setcurrent)
+   * * [add](#add)
+   * * [get](#get)
+   * * [store](#store)
+   * * [load](#load)
+   */
+  interface StorageManager {
+    /**
+     * Get configuration object
+     */
+    getConfig(): StorageManagerConfig;
+    /**
+     * Checks if autosave is enabled
+     */
+    isAutosave(): boolean;
+    /**
+     * Set autosave value
+     */
+    setAutosave(v: boolean): this;
+    /**
+     * Returns number of steps required before trigger autosave
+     */
+    getStepsBeforeSave(): number;
+    /**
+     * Set steps required before trigger autosave
+     */
+    setStepsBeforeSave(v: number): this;
+    /**
+     * Add new storage
+     * @example
+     * storageManager.add('local2', {
+     *   load: function(keys, clb, clbErr) {
+     *     var res = {};
+     *     for (var i = 0, len = keys.length; i < len; i++){
+     *       var v = localStorage.getItem(keys[i]);
+     *       if(v) res[keys[i]] = v;
+     *     }
+     *     clb(res); // might be called inside some async method
+     *     // In case of errors...
+     *     // clbErr('Went something wrong');
+     *   },
+     *   store: function(data, clb, clbErr) {
+     *     for(var key in data)
+     *       localStorage.setItem(key, data[key]);
+     *     clb(); // might be called inside some async method
+     *   }
+     * });
+     * @param id - Storage ID
+     * @param storage - Storage wrapper
+     * @param storage.load - Load method
+     * @param storage.store - Store method
+     */
+    add(
+      id: string,
+      storage: {
+        load: (...params: any[]) => any;
+        store: (...params: any[]) => any;
+      }
+    ): this;
+    /**
+     * Returns storage by id
+     * @param id - Storage ID
+     */
+    get(id: string): any | null;
+    /**
+     * Returns all storages
+     */
+    getStorages(): any[];
+    /**
+     * Returns current storage type
+     */
+    getCurrent(): string;
+    /**
+     * Set current storage type
+     * @param id - Storage ID
+     */
+    setCurrent(id: string): this;
+    /**
+     * Store key-value resources in the current storage
+     * @example
+     * storageManager.store({item1: value1, item2: value2});
+     * @param data - Data in key-value format, eg. {item1: value1, item2: value2}
+     * @param clb - Callback function
+     */
+    store(data: any, clb: (...params: any[]) => any): any | null;
+    /**
+     * Load resource from the current storage by keys
+     * @example
+     * storageManager.load(['item1', 'item2'], res => {
+     *  // res -> {item1: value1, item2: value2}
+     * });
+     * storageManager.load('item1', res => {
+     * // res -> {item1: value1}
+     * });
+     * @param keys - Keys to load
+     * @param clb - Callback function
+     */
+    load(keys: string | string[], clb: (...params: any[]) => any): void;
+    /**
+     * Get current storage
+     */
+    getCurrentStorage(): Storage;
+  }
+
+  /**
+   * You can customize the initial state of the module from the editor initialization, by passing the following [Configuration Object](https://github.com/artf/grapesjs/blob/master/src/device_manager/config/config.js)
+   * ```js
+   * const editor = grapesjs.init({
+   *  deviceManager: {
+   *    // options
+   *  }
+   * })
+   * ```
+   *
+   * Once the editor is instantiated you can use its API. Before using these methods you should get the module from the instance
+   *
+   * ```js
+   * const deviceManager = editor.Devices;
+   * ```
+   * ## Available Events
+   * * `device:add` - Added new device. The [Device] is passed as an argument to the callback
+   * * `device:remove` - Device removed. The [Device] is passed as an argument to the callback
+   * * `device:select` - New device selected. The newly selected [Device] and the previous one, are passed as arguments to the callback
+   * * `device:update` - Device updated. The updated [Device] and the object containing changes are passed as arguments to the callback
+   * * `device` - Catch-all event for all the events mentioned above. An object containing all the available data about the triggered event is passed as an argument to the callback
+   *
+   * ## Methods
+   * * [add](#add)
+   * * [get](#get)
+   * * [getDevices](#getdevices)
+   * * [remove](#remove)
+   * * [select](#select)
+   * * [getSelected](#getselected)
+   *
+   * [Device]: device.html
+   */
+  interface Devices {
+    /**
+     * Add new device
+     * @example
+     * const device1 = deviceManager.add({
+     *  // Without an explicit ID, the `name` will be taken. In case of missing `name`, a random ID will be created.
+     *  id: 'tablet',
+     *  name: 'Tablet',
+     *  width: '900px', // This width will be applied on the canvas frame and for the CSS media
+     * });
+     * const device2 = deviceManager.add({
+     *  id: 'tablet2',
+     *  name: 'Tablet 2',
+     *  width: '800px', // This width will be applied on the canvas frame
+     *  widthMedia: '810px', // This width that will be used for the CSS media
+     *  height: '600px', // Height will be applied on the canvas frame
+     * });
+     * @param props - Device properties
+     */
+    add(props: any): any;
+    /**
+     * Return device by ID
+     * @example
+     * const device = deviceManager.get('Tablet');
+     * console.log(JSON.stringify(device));
+     * // {name: 'Tablet', width: '900px'}
+     * @param id - ID of the device
+     */
+    get(id: string): any;
+    /**
+     * Remove device
+     * @example
+     * const removed = deviceManager.remove('device-id');
+     * // or by passing the Device
+     * const device = deviceManager.get('device-id');
+     * deviceManager.remove(device);
+     */
+    remove(): any;
+    /**
+     * Return all devices
+     * @example
+     * const devices = deviceManager.getDevices();
+     * console.log(JSON.stringify(devices));
+     * // [{name: 'Desktop', width: ''}, ...]
+     */
+    getDevices(): any;
+    /**
+     * Change the selected device. This will update the frame in the canvas
+     * @example
+     * deviceManager.select('some-id');
+     * // or by passing the page
+     * const device = deviceManager.get('some-id');
+     * deviceManager.select(device);
+     */
+    select(): void;
+    /**
+     * Get the selected device
+     * @example
+     * const selected = deviceManager.getSelected();
+     */
+    getSelected(): any;
+  }
+
+  interface DeviceOptions {
+    /**
+     * Device type, eg. `Mobile`
+     * @defaultValue ''
+     */
+    name?: string;
+    /**
+     * Width to set for the editor iframe, eg. '900px'
+     */
+    width?: string;
+    /**
+     * Height to set for the editor iframe, eg. '600px'
+     * @defaultValue ''
+     */
+    height?: string;
+    /**
+     * The width which will be used in media queries, If empty the width will be used
+     * @defaultValue ''
+     */
+    widthMedia?: string;
+    /**
+     * Setup the order of media queries
+     */
+    priority?: number;
+  }
+
+  interface Device extends Backbone.Model<DeviceOptions> {
+    getName(): string;
+    getWidthMedia(): string;
+  }
+
+  /**
+   * Selectors in GrapesJS are used in CSS Composer inside Rules and in Components as classes. To illustrate this concept let's take
+   * a look at this code:
+   *
+   * ```css
+   * span > #send-btn.btn{
+   *  ...
+   * }
+   * ```
+   * ```html
+   * <span>
+   *   <button id="send-btn" class="btn"></button>
+   * </span>
+   * ```
+   *
+   * In this scenario we get:
+   * * span     -> selector of type `tag`
+   * * send-btn -> selector of type `id`
+   * * btn      -> selector of type `class`
+   *
+   * So, for example, being `btn` the same class entity it'll be easier to refactor and track things.
+   *
+   * You can customize the initial state of the module from the editor initialization, by passing the following [Configuration Object](https://github.com/artf/grapesjs/blob/master/src/selector_manager/config/config.js)
+   * ```js
+   * const editor = grapesjs.init({
+   *  selectorManager: {
+   *    // options
+   *  }
+   * })
+   * ```
+   *
+   * Once the editor is instantiated you can use its API and listen to its events. Before using these methods, you should get the module from the instance.
+   *
+   * ```js
+   * // Listen to events
+   * editor.on('selector:add', (selector) => { ... });
+   *
+   * // Use the API
+   * const sm = editor.Selectors;
+   * sm.add(...);
+   * ```
+   *
+   * ## Available Events
+   * * `selector:add` - Selector added. The [Selector] is passed as an argument to the callback.
+   * * `selector:remove` - Selector removed. The [Selector] is passed as an argument to the callback.
+   * * `selector:update` - Selector updated. The [Selector] and the object containing changes are passed as arguments to the callback.
+   * * `selector:state` - States changed. An object containing all the available data about the triggered event is passed as an argument to the callback.
+   * * `selector` - Catch-all event for all the events mentioned above. An object containing all the available data about the triggered event is passed as an argument to the callback.
+   *
+   * ## Methods
+   * * [getConfig](#getconfig)
+   * * [add](#add)
+   * * [get](#get)
+   * * [remove](#remove)
+   * * [getAll](#getall)
+   * * [setState](#setstate)
+   * * [getState](#getstate)
+   * * [getStates](#getstates)
+   * * [setStates](#setstates)
+   * * [getSelected](#getselected)
+   * * [addSelected](#addselected)
+   * * [removeSelected](#removeselected)
+   * * [getSelectedTargets](#getselectedtargets)
+   * * [setComponentFirst](#setcomponentfirst)
+   * * [getComponentFirst](#getcomponentfirst)
+   *
+   * [Selector]: selector.html
+   * [State]: state.html
+   * [Component]: component.html
+   * [CssRule]: css_rule.html
+   */
+  interface SelectorManager {
+    /**
+     * Get configuration object
+     */
+    getConfig(): SelectorManagerConfig;
+    /**
+     * Add a new selector to the collection if it does not already exist.
+     * You can pass selectors properties or string identifiers.
+     * @example
+     * const selector = selectorManager.add({ name: 'my-class', label: 'My class' });
+     * console.log(selector.toString()) // `.my-class`
+     * // Same as
+     * const selector = selectorManager.add('.my-class');
+     * console.log(selector.toString()) // `.my-class`
+     * @param props - Selector properties or string identifiers, eg. `{ name: 'my-class', label: 'My class' }`, `.my-cls`
+     * @param [opts] - Selector options
+     */
+    add(props: any | string, opts?: SelectorOptions): any;
+    /**
+     * Get the selector by its name/type
+     * @example
+     * const selector = selectorManager.get('.my-class');
+     * // Get Id
+     * const selectorId = selectorManager.get('#my-id');
+     * @param name - Selector name or string identifier
+     */
+    get(name: string): any;
+    /**
+     * Remove Selector.
+     * @example
+     * const removed = selectorManager.remove('.myclass');
+     * // or by passing the Selector
+     * selectorManager.remove(selectorManager.get('.myclass'));
+     */
+    remove(): any;
+    /**
+     * Change the selector state
+     * @example
+     * selectorManager.setState('hover');
+     * @param value - State value
+     */
+    setState(value: string): this;
+    /**
+     * Get the current selector state value
+     */
+    getState(): string;
+    /**
+     * Get states
+     */
+    getStates(): any;
+    /**
+     * Set a new collection of states
+     * @example
+     * const states = selectorManager.setStates([
+     *   { name: 'hover', label: 'Hover' },
+     *   { name: 'nth-of-type(2n)', label: 'Even/Odd' }
+     * ]);
+     * @param states - Array of new states
+     */
+    setStates(states: object[]): any;
+    /**
+     * Get commonly selected selectors, based on all selected components.
+     * @example
+     * const selected = selectorManager.getSelected();
+     * console.log(selected.map(s => s.toString()))
+     */
+    getSelected(): any;
+    /**
+     * Add new selector to all selected components.
+     * @example
+     * selectorManager.addSelected('.new-class');
+     * @param props - Selector properties or string identifiers, eg. `{ name: 'my-class', label: 'My class' }`, `.my-cls`
+     */
+    addSelected(props: any | string): void;
+    /**
+     * Remove a common selector from all selected components.
+     * @example
+     * selectorManager.removeSelected('.myclass');
+     */
+    removeSelected(): void;
+    /**
+     * Get the array of currently selected targets.
+     * @example
+     * const targetsToStyle = selectorManager.getSelectedTargets();
+     * console.log(targetsToStyle.map(target => target.getSelectorsString()))
+     */
+    getSelectedTargets(): any;
+    /**
+     * Update component-first option.
+     * If the component-first is enabled, all the style changes will be applied on selected components (ID rules) instead
+     * of selectors (which would change styles on all components with those classes).
+     */
+    setComponentFirst(value: boolean): void;
+    /**
+     * Get the value of component-first option.
+     */
+    getComponentFirst(): boolean;
+    /**
+     * Get all selectors
+     */
+    getAll(): any;
+  }
+
+  interface SelectorOptions {
+    /**
+     * Selector name, eg. `my-class`
+     */
+    name: string;
+    /**
+     * Selector label, eg. `My Class`
+     */
+    label: string;
+    /**
+     * Type of the selector. 1 (class) | 2 (id)
+     * @defaultValue 1
+     */
+    type?: number;
+    /**
+     * If not active, it's not selectable by the Style Manager.
+     * @defaultValue true
+     */
+    active?: boolean;
+    /**
+     * If true, it can't be seen by the Style Manager, but it will be rendered in the canvas and in export code.
+     */
+    private?: boolean;
+    /**
+     * If true, it can't be removed from the attacched component.
+     */
+    protected?: boolean;
+  }
+
+  interface Selector extends Backbone.Model<SelectorOptions> {
+    /**
+     * Get selector label.
+     * @example
+     * // Given such selector: { name: 'my-selector', label: 'My selector' }
+     * console.log(selector.getLabel());
+     * // -> `My selector`
+     */
+    getLabel(): string;
+
+    /**
+     * Update selector label.
+     * @param {String} label New label
+     * @example
+     * // Given such selector: { name: 'my-selector', label: 'My selector' }
+     * selector.setLabel('New Label')
+     * console.log(selector.getLabel());
+     * // -> `New Label`
+     */
+    setLabel(label: string): void;
+
+    /**
+     * Get selector active state.
+     */
+    getActive(): boolean;
+
+    /**
+     * Update selector active state.
+     * @param value - New active state
+     */
+    setActive(value: boolean): void;
+  }
+
+  interface StateOptions {
+    /**
+     * State name, eg. `hover`, `nth-of-type(2n)`
+     */
+    name: string;
+    /**
+     * State label, eg. `Hover`, `Even/Odd`
+     */
+    label: string;
+  }
+
+  interface State extends Backbone.Model<StateOptions> {
+    /**
+     * Get state name
+     */
+    getName(): string;
+
+    /**
+     * Get state label. If label was not provided, the name will be returned.
+     */
+    getLabel(): string;
+  }
+
+  /**
+   * This module manages CSS rules in the canvas.
+   * You can customize the initial state of the module from the editor initialization, by passing the following [Configuration Object](https://github.com/artf/grapesjs/blob/master/src/css_composer/config/config.js)
+   * ```js
+   * const editor = grapesjs.init({
+   *  cssComposer: {
+   *    // options
+   *  }
+   * })
+   * ```
+   *
+   * Once the editor is instantiated you can use its API. Before using these methods you should get the module from the instance
+   *
+   * ```js
+   * const css = editor.Css;
+   * ```
+   *
+   * * [addRules](#addrules)
+   * * [setRule](#setrule)
+   * * [getRule](#getrule)
+   * * [getRules](#getrules)
+   * * [remove](#remove)
+   * * [clear](#clear)
+   *
+   * [CssRule]: css_rule.html
+   */
+  interface CssComposer {
+    /**
+     * Add CssRules via CSS string.
+     * @example
+     * const addedRules = css.addRules('.my-cls{ color: red } @media (max-width: 992px) { .my-cls{ color: darkred } }');
+     * // Check rules
+     * console.log(addedRules.map(rule => rule.toCSS()));
+     * @param css - CSS string of rules to add.
+     */
+    addRules(css: string): any;
+    /**
+     * Add/update the CssRule.
+     * @example
+     * // Simple class-based rule
+     * const rule = css.setRule('.class1.class2', { color: 'red' });
+     * console.log(rule.toCSS()) // output: .class1.class2 { color: red }
+     * // With state and other mixed selector
+     * const rule = css.setRule('.class1.class2:hover, div#myid', { color: 'red' });
+     * // output: .class1.class2:hover, div#myid { color: red }
+     * // With media
+     * const rule = css.setRule('.class1:hover', { color: 'red' }, {
+     *  atRuleType: 'media',
+     *  atRuleParams: '(min-width: 500px)',
+     * });
+     * // output: @media (min-width: 500px) { .class1:hover { color: red } }
+     * @param selectors - Selector string, eg. `.myclass`
+     * @param style - Style properties and values
+     * @param [opts = {}] - Additional properties
+     * @param [opts.atRuleType = ''] - At-rule type, eg. `media`
+     * @param [opts.atRuleParams = ''] - At-rule parameters, eg. `(min-width: 500px)`
+     */
+    setRule(
+      selectors: string,
+      style: any,
+      opts?: {
+        atRuleType?: string;
+        atRuleParams?: string;
+      }
+    ): any;
+    /**
+     * Get the CssRule.
+     * @example
+     * const rule = css.getRule('.myclass1:hover');
+     * const rule2 = css.getRule('.myclass1:hover, div#myid');
+     * const rule3 = css.getRule('.myclass1', {
+     *  atRuleType: 'media',
+     *  atRuleParams: '(min-width: 500px)',
+     * });
+     * @param selectors - Selector string, eg. `.myclass:hover`
+     * @param [opts = {}] - Additional properties
+     * @param [opts.atRuleType = ''] - At-rule type, eg. `media`
+     * @param [opts.atRuleParams = ''] - At-rule parameters, eg. '(min-width: 500px)'
+     */
+    getRule(
+      selectors: string,
+      opts?: {
+        atRuleType?: string;
+        atRuleParams?: string;
+      }
+    ): any;
+    /**
+     * Get all rules or filtered by a matching selector.
+     * @example
+     * // Take all the component specific rules
+     * const id = someComponent.getId();
+     * const rules = css.getRules(`#${id}`);
+     * console.log(rules.map(rule => rule.toCSS()))
+     * // All rules in the project
+     * console.log(css.getRules())
+     * @param [selector = ''] - Selector, eg. `.myclass`
+     */
+    getRules(selector?: string): any;
+    /**
+     * Remove rule, by CssRule or matching selector (eg. the selector will match also at-rules like `@media`)
+     * @example
+     * // Remove by CssRule
+     * const toRemove = css.getRules('.my-cls');
+     * css.remove(toRemove);
+     * // Remove by selector
+     * css.remove('.my-cls-2');
+     */
+    remove(): any;
+    /**
+     * Remove all rules
+     */
+    clear(): this;
+  }
+
+  interface Styleable {
+    /**
+     * To trigger the style change event on models I have to
+     * pass a new object instance
+     * @param prop
+     */
+    extendStyle(prop: object): object;
+
+    /**
+     * Get style object
+     */
+    getStyle(prop?: string): object;
+
+    /**
+     * Set new style object
+     * @return {Object} Applied properties
+     */
+    setStyle(prop: object | string, opts?: object): object;
+
+    /**
+     * Add style property
+     * @example
+     * this.addStyle({color: 'red'});
+     * this.addStyle('color', 'blue');
+     */
+    addStyle(prop: object | string, value?: string, opts?: object): void;
+
+    /**
+     * Remove style property
+     */
+    removeStyle(prop: string): void;
+
+    /**
+     * Returns string of style properties
+     */
+    styleToString(opts?: object): string;
+  }
+
+  interface CssRuleOptions {
+    /**
+     * Array of selectors
+     */
+    selectors: Selector[];
+    /**
+     * Object containing style definitions
+     */
+    style: any;
+    /**
+     * Additional string css selectors
+     * @defaultValue ''
+     */
+    selectorsAdd?: string;
+    /**
+     * Type of at-rule, eg. `media`, 'font-face'
+     * @defaultValue ''
+     */
+    atRuleType?: string;
+    /**
+     * At-rule value, eg. `(max-width: 1000px)`
+     * @defaultValue ''
+     */
+    mediaText?: string;
+    /**
+     * This property is used only on at-rules, like 'page' or 'font-face', where the block containes only style declarations
+     */
+    singleAtRule?: boolean;
+    /**
+     * State of the rule, eg: `hover`, `focused`
+     * @defaultValue ''
+     */
+    state?: string;
+    /**
+     * If true, sets `!important` on all properties. You can also pass an array to specify properties on which use important
+     */
+    important?: boolean | String[];
+    /**
+       * Indicates if the rule is stylable from the editor
+
+      [Device]: device.html
+      [State]: state.html
+      [Component]: component.html
+       * @defaultValue true
+       */
+    stylable?: boolean;
+  }
+  interface CssRule extends Backbone.Model<CssRuleOptions>, Styleable {
+    /**
+     * Returns the at-rule statement when exists, eg. `@media (...)`, `@keyframes`
+     * @example
+     * const cssRule = editor.Css.setRule('.class1', { color: 'red' }, {
+     *  atRuleType: 'media',
+     *  atRuleParams: '(min-width: 500px)'
+     * });
+     * cssRule.getAtRule(); // "@media (min-width: 500px)"
+     */
+    getAtRule(): string;
+
+    /**
+     * Return selectors of the rule as a string
+     * @example
+     * const cssRule = editor.Css.setRule('.class1:hover', { color: 'red' });
+     * cssRule.selectorsToString(); // ".class1:hover"
+     * cssRule.selectorsToString({ skipState: true }); // ".class1"
+     * @param [opts] - Options
+     * @param [opts.skipState] - Skip state from the result
+     */
+    selectorsToString(opts?: { skipState?: boolean }): string;
+
+    /**
+     * Get declaration block (without the at-rule statement)
+     * @example
+     * const cssRule = editor.Css.setRule('.class1', { color: 'red' }, {
+     *  atRuleType: 'media',
+     *  atRuleParams: '(min-width: 500px)'
+     * });
+     * cssRule.getDeclaration() // ".class1{color:red;}"
+     * @param [opts = {}] - Options (same as in `selectorsToString`)
+     */
+    getDeclaration(opts?: any): string;
+
+    /**
+     * Get the Device the rule is related to.
+     * @example
+     * const device = rule.getDevice();
+     * console.log(device?.getName());
+     */
+    getDevice(): Device | null;
+
+    /**
+     * Get the State the rule is related to.
+     * @example
+     * const state = rule.getState();
+     * console.log(state?.getLabel());
+     */
+    getState(): State | null;
+
+    /**
+     * Returns the related Component (valid only for component-specific rules).
+     * @example
+     * const cmp = rule.getComponent();
+     * console.log(cmp?.toHTML());
+     */
+    getComponent(): Component | null;
+
+    /**
+     * Return the CSS string of the rule
+     * @example
+     * const cssRule = editor.Css.setRule('.class1', { color: 'red' }, {
+     *  atRuleType: 'media',
+     *  atRuleParams: '(min-width: 500px)'
+     * });
+     * cssRule.toCSS() // "@media (min-width: 500px){.class1{color:red;}}"
+     * @param [opts = {}] - Options (same as in `getDeclaration`)
+     * @returns CSS string
+     */
+    toCSS(opts?: any): string;
+  }
+
+  /**
+   * You can customize the initial state of the module from the editor initialization, by passing the following [Configuration Object](https://github.com/artf/grapesjs/blob/master/src/modal_dialog/config/config.js)
+   * ```js
+   * const editor = grapesjs.init({
+   *  modal: {
+   *    // options
+   *  }
+   * })
+   * ```
+   *
+   * Once the editor is instantiated you can use its API. Before using these methods you should get the module from the instance
+   *
+   * ```js
+   * const modal = editor.Modal;
+   * ```
+   *
+   * ## Available Events
+   * * `modal:open` - Modal is opened
+   * * `modal:close` - Modal is closed
+   * * `modal` - Event triggered on any change related to the modal. An object containing all the available data about the triggered event is passed as an argument to the callback.
+   *
+   * ## Methods
+   * * [open](#open)
+   * * [close](#close)
+   * * [isOpen](#isopen)
+   * * [setTitle](#settitle)
+   * * [getTitle](#gettitle)
+   * * [setContent](#setcontent)
+   * * [getContent](#getcontent)
+   * * [onceClose](#onceclose)
+   * * [onceOpen](#onceopen)
+   */
+  interface Modal {
+    /**
+     * Open the modal window
+     * @example
+     * modal.open({
+     *   title: 'My title',
+     *   content: 'My content',
+     *   attributes: { class: 'my-class' },
+     * });
+     * @param [opts = {}] - Options
+     * @param [opts.title] - Title to set for the modal
+     * @param [opts.content] - Content to set for the modal
+     * @param [opts.attributes] - Updates the modal wrapper with custom attributes
+     */
+    open(opts?: {
+      title?: string | HTMLElement;
+      content?: string | HTMLElement;
+      attributes?: any;
+    }): this;
+    /**
+     * Close the modal window
+     * @example
+     * modal.close();
+     */
+    close(): this;
+    /**
+     * Execute callback when the modal will be closed.
+     * The callback will be called one only time
+     * @example
+     * modal.onceClose(() => {
+     *  console.log('The modal is closed');
+     * });
+     * @param clb - Callback to call
+     */
+    onceClose(clb: (...params: any[]) => any): this;
+    /**
+     * Execute callback when the modal will be opened.
+     * The callback will be called one only time
+     * @example
+     * modal.onceOpen(() => {
+     *  console.log('The modal is opened');
+     * });
+     * @param clb - Callback to call
+     */
+    onceOpen(clb: (...params: any[]) => any): this;
+    /**
+     * Checks if the modal window is open
+     * @example
+     * modal.isOpen(); // true | false
+     */
+    isOpen(): boolean;
+    /**
+     * Set the title to the modal window
+     * @example
+     * // pass a string
+     * modal.setTitle('Some title');
+     * // or an HTMLElement
+     * const el = document.createElement('div');
+     * el.innerText =  'New title';
+     * modal.setTitle(el);
+     * @param title - Title
+     */
+    setTitle(title: string | HTMLElement): this;
+    /**
+     * Returns the title of the modal window
+     * @example
+     * modal.getTitle();
+     */
+    getTitle(): string | HTMLElement;
+    /**
+     * Set the content of the modal window
+     * @example
+     * // pass a string
+     * modal.setContent('Some content');
+     * // or an HTMLElement
+     * const el = document.createElement('div');
+     * el.innerText =  'New content';
+     * modal.setContent(el);
+     * @param content - Content
+     */
+    setContent(content: string | HTMLElement): this;
+    /**
+     * Get the content of the modal window
+     * @example
+     * modal.getContent();
+     */
+    getContent(): string | HTMLElement;
+  }
+
+  /**
+   * This module allows to customize the built-in toolbar of the Rich Text Editor and use commands from the [HTML Editing APIs](https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand).
+   * It's highly recommended to keep this toolbar as small as possible, especially from styling commands (eg. 'fontSize') and leave this task to the Style Manager
+   *
+   * You can customize the initial state of the module from the editor initialization, by passing the following [Configuration Object](https://github.com/artf/grapesjs/blob/master/src/rich_text_editor/config/config.js)
+   * ```js
+   * const editor = grapesjs.init({
+   *  richTextEditor: {
+   *    // options
+   *  }
+   * })
+   * ```
+   *
+   * Once the editor is instantiated you can use its API and listen to its events. Before using these methods, you should get the module from the instance.
+   *
+   * ```js
+   * // Listen to events
+   * editor.on('rte:enable', () => { ... });
+   *
+   * // Use the API
+   * const rte = editor.RichTextEditor;
+   * rte.add(...);
+   * ```
+   *
+   * ## Available Events
+   * * `rte:enable` - RTE enabled. The view, on which RTE is enabled, is passed as an argument
+   * * `rte:disable` - RTE disabled. The view, on which RTE is disabled, is passed as an argument
+   *
+   * ## Methods
+   * * [add](#add)
+   * * [get](#get)
+   * * [getAll](#getall)
+   * * [remove](#remove)
+   * * [getToolbarEl](#gettoolbarel)
+   */
+  interface RichTextEditor {
+    /**
+     * Add a new action to the built-in RTE toolbar
+     * @example
+     * rte.add('bold', {
+     *   icon: '<b>B</b>',
+     *   attributes: {title: 'Bold'},
+     *   result: rte => rte.exec('bold')
+     * });
+     * rte.add('link', {
+     *   icon: document.getElementById('t'),
+     *   attributes: {title: 'Link',}
+     *   // Example on it's easy to wrap a selected content
+     *   result: rte => rte.insertHTML(`<a href="#">${rte.selection()}</a>`)
+     * });
+     * // An example with fontSize
+     * rte.add('fontSize', {
+     *   icon: `<select class="gjs-field">
+     *         <option>1</option>
+     *         <option>4</option>
+     *         <option>7</option>
+     *       </select>`,
+     *     // Bind the 'result' on 'change' listener
+     *   event: 'change',
+     *   result: (rte, action) => rte.exec('fontSize', action.btn.firstChild.value),
+     *   // Callback on any input change (mousedown, keydown, etc..)
+     *   update: (rte, action) => {
+     *     const value = rte.doc.queryCommandValue(action.name);
+     *     if (value != 'false') { // value is a string
+     *       action.btn.firstChild.value = value;
+     *     }
+     *    }
+     *   })
+     * // An example with state
+     * const isValidAnchor = (rte) => {
+     *   // a utility function to help determine if the selected is a valid anchor node
+     *   const anchor = rte.selection().anchorNode;
+     *   const parentNode  = anchor && anchor.parentNode;
+     *   const nextSibling = anchor && anchor.nextSibling;
+     *   return (parentNode && parentNode.nodeName == 'A') || (nextSibling && nextSibling.nodeName == 'A')
+     * }
+     * rte.add('toggleAnchor', {
+     *   icon: `<span style="transform:rotate(45deg)">&supdsub;</span>`,
+     *   state: (rte, doc) => {
+     *    if (rte && rte.selection()) {
+     *      // `btnState` is a integer, -1 for disabled, 0 for inactive, 1 for active
+     *      return isValidAnchor(rte) ? btnState.ACTIVE : btnState.INACTIVE;
+     *    } else {
+     *      return btnState.INACTIVE;
+     *    }
+     *   },
+     *   result: (rte, action) => {
+     *     if (isValidAnchor(rte)) {
+     *       rte.exec('unlink');
+     *     } else {
+     *       rte.insertHTML(`<a class="link" href="">${rte.selection()}</a>`);
+     *     }
+     *   }
+     * })
+     * @param name - Action name
+     * @param action - Action options
+     */
+    add(name: string, action: any): void;
+    /**
+     * Get the action by its name
+     * @example
+     * const action = rte.get('bold');
+     * // {name: 'bold', ...}
+     * @param name - Action name
+     */
+    get(name: string): any;
+    /**
+     * Get all actions
+     */
+    getAll(): any[];
+    /**
+     * Remove the action from the toolbar
+     * @example
+     * const action = rte.remove('bold');
+     * // {name: 'bold', ...}
+     * @returns Removed action
+     */
+    remove(name: string): any;
+    /**
+     * Get the toolbar element
+     */
+    getToolbarEl(): HTMLElement;
+  }
+
+  /**
+   * You can customize the initial state of the module from the editor initialization
+   * ```js
+   * const editor = grapesjs.init({
+   *  keymaps: {
+   *     // Object of keymaps
+   *    defaults: {
+   *      'your-namespace:keymap-name' {
+   *        keys: '⌘+z, ctrl+z',
+   *        handler: 'some-command-id'
+   *      },
+   *      ...
+   *    }
+   *  }
+   * })
+   * ```
+   *
+   * Once the editor is instantiated you can use its API and listen to its events. Before using these methods, you should get the module from the instance.
+   *
+   * ```js
+   * // Listen to events
+   * editor.on('keymap:add', () => { ... });
+   *
+   * // Use the API
+   * const keymaps = editor.Keymaps;
+   * keymaps.add(...);
+   * ```
+   *
+   * ## Available Events
+   * * `keymap:add` - New keymap added. The new keyamp object is passed as an argument
+   * * `keymap:remove` - Keymap removed. The removed keyamp object is passed as an argument
+   * * `keymap:emit` - Some keymap emitted, in arguments you get keymapId, shortcutUsed, Event
+   * * `keymap:emit:{keymapId}` - `keymapId` emitted, in arguments you get keymapId, shortcutUsed, Event
+   *
+   * ## Methods
+   * * [getConfig](#getconfig)
+   * * [add](#add)
+   * * [get](#get)
+   * * [getAll](#getAll)
+   * * [remove](#remove)
+   * * [removeAll](#removeall)
+   */
+  interface Keymaps {
+    /**
+     * Get module configurations
+     * @returns Configuration object
+     */
+    getConfig(): any;
+    /**
+     * Add new keymap
+     * @example
+     * // 'ns' is just a custom namespace
+     * keymaps.add('ns:my-keymap', '⌘+j, ⌘+u, ctrl+j, alt+u', editor => {
+     *  console.log('do stuff');
+     * });
+     * // or
+     * keymaps.add('ns:my-keymap', '⌘+s, ctrl+s', 'some-gjs-command');
+     *
+     * // listen to events
+     * editor.on('keymap:emit', (id, shortcut, e) => {
+     *  // ...
+     * })
+     * @param id - Keymap id
+     * @param keys - Keymap keys, eg. `ctrl+a`, `⌘+z, ctrl+z`
+     * @param handler - Keymap handler, might be a function
+     * @param [opts = {}] - Options
+     * @returns Added keymap
+     *  or just a command id as a string
+     */
+    add(
+      id: string,
+      keys: string,
+      handler: ((...params: any[]) => any) | string,
+      opts?: any
+    ): any;
+    /**
+     * Get the keymap by id
+     * @example
+     * keymaps.get('ns:my-keymap');
+     * // -> {keys, handler};
+     * @param id - Keymap id
+     * @returns Keymap object
+     */
+    get(id: string): any;
+    /**
+     * Get all keymaps
+     * @example
+     * keymaps.getAll();
+     * // -> {id1: {}, id2: {}};
+     */
+    getAll(): any;
+    /**
+     * Remove the keymap by id
+     * @example
+     * keymaps.remove('ns:my-keymap');
+     * // -> {keys, handler};
+     * @param id - Keymap id
+     * @returns Removed keymap
+     */
+    remove(id: string): any;
+    /**
+     * Remove all binded keymaps
+     */
+    removeAll(): Keymaps;
+  }
+
+  /**
+   * This module allows to manage the stack of changes applied in canvas.
+   * Once the editor is instantiated you can use its API. Before using these methods you should get the module from the instance
+   *
+   * ```js
+   * const um = editor.UndoManager;
+   * ```
+   *
+   * * [getConfig](#getconfig)
+   * * [add](#add)
+   * * [remove](#remove)
+   * * [removeAll](#removeall)
+   * * [start](#start)
+   * * [stop](#stop)
+   * * [undo](#undo)
+   * * [undoAll](#undoall)
+   * * [redo](#redo)
+   * * [redoAll](#redoall)
+   * * [hasUndo](#hasundo)
+   * * [hasRedo](#hasredo)
+   * * [getStack](#getstack)
+   * * [clear](#clear)
+   */
+  interface UndoManager {
+    /**
+     * Get module configurations
+     * @example
+     * const config = um.getConfig();
+     * // { ... }
+     * @returns Configuration object
+     */
+    getConfig(): any;
+    /**
+     * Add an entity (Model/Collection) to track
+     * Note: New Components and CSSRules will be added automatically
+     * @example
+     * um.add(someModelOrCollection);
+     * @param entity - Entity to track
+     */
+    add(
+      entity: Backbone.GenericModel | Backbone.Collection<Backbone.GenericModel>
+    ): UndoManager;
+    /**
+     * Remove and stop tracking the entity (Model/Collection)
+     * @example
+     * um.remove(someModelOrCollection);
+     * @param entity - Entity to remove
+     */
+    remove(
+      entity: Backbone.GenericModel | Backbone.Collection<Backbone.GenericModel>
+    ): UndoManager;
+    /**
+     * Remove all entities
+     * @example
+     * um.removeAll();
+     */
+    removeAll(): UndoManager;
+    /**
+     * Start/resume tracking changes
+     * @example
+     * um.start();
+     */
+    start(): UndoManager;
+    /**
+     * Stop tracking changes
+     * @example
+     * um.stop();
+     */
+    stop(): UndoManager;
+    /**
+     * Undo last change
+     * @example
+     * um.undo();
+     */
+    undo(): UndoManager;
+    /**
+     * Undo all changes
+     * @example
+     * um.undoAll();
+     */
+    undoAll(): UndoManager;
+    /**
+     * Redo last change
+     * @example
+     * um.redo();
+     */
+    redo(): UndoManager;
+    /**
+     * Redo all changes
+     * @example
+     * um.redoAll();
+     */
+    redoAll(): UndoManager;
+    /**
+     * Checks if exists an available undo
+     * @example
+     * um.hasUndo();
+     */
+    hasUndo(): boolean;
+    /**
+     * Checks if exists an available redo
+     * @example
+     * um.hasRedo();
+     */
+    hasRedo(): boolean;
+    /**
+     * Check if the entity (Model/Collection) to tracked
+     * Note: New Components and CSSRules will be added automatically
+     * @param entity - Entity to track
+     */
+    isRegistered(
+      entity: Backbone.GenericModel | Backbone.Collection<Backbone.GenericModel>
+    ): boolean;
+    /**
+     * Get stack of changes
+     * @example
+     * const stack = um.getStack();
+     * stack.each(item => ...);
+     */
+    getStack(): Backbone.Collection<Backbone.GenericModel>;
+    /**
+     * Get grouped undo manager stack.
+     * The difference between `getStack` is when you do multiple operations at a time,
+     * like appending multiple components:
+     * `editor.getWrapper().append(`<div>C1</div><div>C2</div>`);`
+     * `getStack` will return a collection length of 2.
+     *  `getStackGroup` instead will group them as a single operation (the first
+     * inserted component will be returned in the list) by returning an array length of 1.
+     */
+    getStackGroup(): any[];
+    /**
+     * Clear the stack
+     * @example
+     * um.clear();
+     */
+    clear(): UndoManager;
+  }
+
+  /**
+   * You can customize the initial state of the module from the editor initialization, by passing the following [Configuration Object](https://github.com/artf/grapesjs/blob/master/src/canvas/config/config.js)
+   * ```js
+   * const editor = grapesjs.init({
+   *  canvas: {
+   *    // options
+   *  }
+   * })
+   * ```
+   *
+   * Once the editor is instantiated you can use its API and listen to its events. Before using these methods, you should get the module from the instance.
+   *
+   * ```js
+   * // Listen to events
+   * editor.on('canvas:drop', () => { ... });
+   *
+   * // Use the API
+   * const canvas = editor.Canvas;
+   * canvas.setCoords(...);
+   * ```
+   * ## Available Events
+   * * `canvas:dragenter` - When something is dragged inside the canvas, `DataTransfer` instance passed as an argument
+   * * `canvas:dragover` - When something is dragging on canvas, `DataTransfer` instance passed as an argument
+   * * `canvas:drop` - Something is dropped in canvas, `DataTransfer` instance and the dropped model are passed as arguments
+   * * `canvas:dragend` - When a drag operation is ended, `DataTransfer` instance passed as an argument
+   * * `canvas:dragdata` - On any dataTransfer parse, `DataTransfer` instance and the `result` are passed as arguments.
+   *  By changing `result.content` you're able to customize what is dropped
+   *
+   * ## Methods
+   * * [getConfig](#getconfig)
+   * * [getElement](#getelement)
+   * * [getFrameEl](#getframeel)
+   * * [getWindow](#getwindow)
+   * * [getDocument](#getdocument)
+   * * [getBody](#getbody)
+   * * [setCustomBadgeLabel](#setcustombadgelabel)
+   * * [hasFocus](#hasfocus)
+   * * [scrollTo](#scrollto)
+   * * [setZoom](#setzoom)
+   * * [getZoom](#getzoom)
+   * * [getCoords](#getcoords)
+   * * [setCoords](#setcoords)
+   *
+   * [Component]: component.html
+   * [Frame]: frame.html
+   */
+  interface Canvas {
+    /**
+     * Get the configuration object
+     * @example
+     * console.log(canvas.getConfig())
+     * @returns Configuration object
+     */
+    getConfig(): CanvasConfig;
+    /**
+     * Get the canvas element
+     */
+    getElement(): HTMLElement;
+    /**
+     * Get the main frame element of the canvas
+     */
+    getFrameEl(): HTMLIFrameElement;
+    /**
+     * Get the main frame window instance
+     */
+    getWindow(): Window;
+    /**
+     * Get the main frame document element
+     */
+    getDocument(): HTMLDocument;
+    /**
+     * Get the main frame body element
+     */
+    getBody(): HTMLBodyElement;
+    /**
+     * Set custom badge naming strategy
+     * @example
+     * canvas.setCustomBadgeLabel(function(component){
+     *  return component.getName();
+     * });
+     */
+    setCustomBadgeLabel(f: (...params: any[]) => any): void;
+    /**
+     * Get canvas rectangular data
+     */
+    getRect(): any;
+    /**
+     * Check if the canvas is focused
+     */
+    hasFocus(): boolean;
+    /**
+     * Scroll canvas to the element if it's not visible. The scrolling is
+     * executed via `scrollIntoView` API and options of this method are
+     * passed to it. For instance, you can scroll smoothly by using
+     * `{ behavior: 'smooth' }`.
+     * @example
+     * const selected = editor.getSelected();
+     * // Scroll smoothly (this behavior can be polyfilled)
+     * canvas.scrollTo(selected, { behavior: 'smooth' });
+     * // Force the scroll, even if the element is alredy visible
+     * canvas.scrollTo(selected, { force: true });
+     * @param [opts = {}] - Options, same as options for `scrollIntoView`
+     * @param [opts.force = false] - Force the scroll, even if the element is already visible
+     */
+    scrollTo(
+      el: HTMLElement | Component,
+      opts?: {
+        force?: boolean;
+      }
+    ): void;
+    /**
+     * Set canvas zoom value
+     * @example
+     * canvas.setZoom(50); // set zoom to 50%
+     * @param value - The zoom value, from 0 to 100
+     */
+    setZoom(value: number): this;
+    /**
+     * Get canvas zoom value
+     * @example
+     * canvas.setZoom(50); // set zoom to 50%
+     * const zoom = canvas.getZoom(); // 50
+     */
+    getZoom(): number;
+    /**
+     * Set canvas position coordinates
+     * @example
+     * canvas.setCoords(100, 100);
+     * @param x - Horizontal position
+     * @param y - Vertical position
+     */
+    setCoords(x: number, y: number): this;
+    /**
+     * Get canvas position coordinates
+     * @example
+     * canvas.setCoords(100, 100);
+     * const coords = canvas.getCoords();
+     * // { x: 100, y: 100 }
+     * @returns Object containing coordinates
+     */
+    getCoords(): any;
+    /**
+     * Add new frame to the canvas
+     * @example
+     * canvas.addFrame({
+     *   name: 'Mobile home page',
+     *   x: 100, // Position in canvas
+     *   y: 100,
+     *   width: 500, // Frame dimensions
+     *   height: 600,
+     *   // device: 'DEVICE-ID',
+     *   components: [
+     *     '<h1 class="testh">Title frame</h1>',
+     *     '<p class="testp">Paragraph frame</p>',
+     *   ],
+     *   styles: `
+     *     .testh { color: red; }
+     *     .testp { color: blue; }
+     *   `,
+     * });
+     * @param props - Frame properties
+     */
+    addFrame(props: any): any;
+  }
+
+  interface FrameOptions {
+    /**
+     * Wrapper component definition. You can also pass an HTML string as components of the default wrapper component.
+     */
+    component: any | string;
+    /**
+     * Width of the frame. By default, the canvas width will be taken.
+     * @defaultValue ''
+     */
+    width?: string;
+    /**
+     * Height of the frame. By default, the canvas height will be taken.
+     * @defaultValue ''
+     */
+    height?: string;
+    /**
+     * Horizontal position of the frame in the canvas.
+     */
+    x?: number;
+    /**
+     * Vertical position of the frame in the canvas.
+     */
+    y?: number;
+  }
+
+  interface Frame extends Backbone.Model<FrameOptions> {}
+
+  /**
+   * You can customize the initial state of the module from the editor initialization, by passing the following [Configuration Object](https://github.com/artf/grapesjs/blob/master/src/i18n/config.js)
+   * ```js
+   * const editor = grapesjs.init({
+   *  i18n: {
+   *    locale: 'en',
+   *    localeFallback: 'en',
+   *    messages: {
+   *      it: { hello: 'Ciao', ... },
+   *      ...
+   *    }
+   *  }
+   * })
+   * ```
+   *
+   * Once the editor is instantiated you can use its API. Before using these methods you should get the module from the instance
+   *
+   * ```js
+   * const i18n = editor.I18n;
+   * ```
+   *
+   * ### Events
+   * * `i18n:add` - New set of messages is added
+   * * `i18n:update` - The set of messages is updated
+   * * `i18n:locale` - Locale changed
+   */
+  interface I18n {
+    /**
+     * Get module configurations
+     * @returns Configuration object
+     */
+    getConfig(): any;
+    /**
+     * Update current locale
+     * @example
+     * i18n.setLocale('it');
+     * @param locale - Locale value
+     */
+    setLocale(locale: string): this;
+    /**
+     * Get current locale
+     * @returns Current locale value
+     */
+    getLocale(): string;
+    /**
+     * Get all messages
+     * @example
+     * i18n.getMessages();
+     * // -> { en: { hello: '...' }, ... }
+     * i18n.getMessages('en');
+     * // -> { hello: '...' }
+     * @param [lang] - Specify the language of messages to return
+     * @param [opts] - Options
+     * @param [opts.debug] - Show warnings in case of missing language
+     */
+    getMessages(
+      lang?: string,
+      opts?: {
+        debug?: boolean;
+      }
+    ): any;
+    /**
+     * Set new set of messages
+     * @example
+     * i18n.getMessages();
+     * // -> { en: { msg1: 'Msg 1', msg2: 'Msg 2', } }
+     * i18n.setMessages({ en: { msg2: 'Msg 2 up', msg3: 'Msg 3', } });
+     * // Set replaced
+     * i18n.getMessages();
+     * // -> { en: { msg2: 'Msg 2 up', msg3: 'Msg 3', } }
+     * @param msg - Set of messages
+     */
+    setMessages(msg: any): this;
+    /**
+     * Update messages
+     * @example
+     * i18n.getMessages();
+     * // -> { en: { msg1: 'Msg 1', msg2: 'Msg 2', } }
+     * i18n.addMessages({ en: { msg2: 'Msg 2 up', msg3: 'Msg 3', } });
+     * // Set updated
+     * i18n.getMessages();
+     * // -> { en: { msg1: 'Msg 1', msg2: 'Msg 2 up', msg3: 'Msg 3', } }
+     * @param msg - Set of messages to add
+     */
+    addMessages(msg: any): this;
+    /**
+     * Translate the locale message
+     * @example
+     * obj.setMessages({
+     *  en: { msg: 'Msg', msg2: 'Msg {test}'},
+     *  it: { msg2: 'Msg {test} it'},
+     * });
+     * obj.t('msg');
+     * // -> outputs `Msg`
+     * obj.t('msg2', { params: { test: 'hello' } });  // use params
+     * // -> outputs `Msg hello`
+     * obj.t('msg2', { l: 'it', params: { test: 'hello' } });  // custom local
+     * // -> outputs `Msg hello it`
+     * @param key - Label to translate
+     * @param [opts] - Options for the translation
+     * @param [opts.params] - Params for the translation
+     * @param [opts.debug] - Show warnings in case of missing resources
+     */
+    t(
+      key: string,
+      opts?: {
+        params?: any;
+        debug?: boolean;
+      }
+    ): string;
+  }
+
+  /**
+   * You can customize the initial state of the module from the editor initialization
+   * ```js
+   * const editor = grapesjs.init({
+   *  ....
+   *  pageManager: {
+   *    pages: [
+   *      {
+   *        id: 'page-id',
+   *        styles: `.my-class { color: red }`, // or a JSON of styles
+   *        component: '<div class="my-class">My element</div>', // or a JSON of components
+   *      }
+   *   ]
+   *  },
+   * })
+   * ```
+   *
+   * Once the editor is instantiated you can use its API. Before using these methods you should get the module from the instance
+   *
+   * ```js
+   * const pageManager = editor.Pages;
+   * ```
+   *
+   * ## Available Events
+   * * `page:add` - Added new page. The page is passed as an argument to the callback
+   * * `page:remove` - Page removed. The page is passed as an argument to the callback
+   * * `page:select` - New page selected. The newly selected page and the previous one, are passed as arguments to the callback
+   * * `page:update` - Page updated. The updated page and the object containing changes are passed as arguments to the callback
+   * * `page` - Catch-all event for all the events mentioned above. An object containing all the available data about the triggered event is passed as an argument to the callback
+   *
+   * ## Methods
+   * * [add](#add)
+   * * [get](#get)
+   * * [getAll](#getall)
+   * * [getAllWrappers](#getallwrappers)
+   * * [getMain](#getmain)
+   * * [remove](#remove)
+   * * [select](#select)
+   * * [getSelected](#getselected)
+   *
+   * [Page]: page.html
+   * [Component]: component.html
+   */
+  interface Pages {
+    /**
+     * Add new page
+     * @example
+     * const newPage = pageManager.add({
+     *  id: 'new-page-id', // without an explicit ID, a random one will be created
+     *  styles: `.my-class { color: red }`, // or a JSON of styles
+     *  component: '<div class="my-class">My element</div>', // or a JSON of components
+     * });
+     * @param props - Page properties
+     * @param [opts] - Options
+     */
+    add(props: any, opts?: any): any;
+    /**
+     * Remove page
+     * @example
+     * const removedPage = pageManager.remove('page-id');
+     * // or by passing the page
+     * const somePage = pageManager.get('page-id');
+     * pageManager.remove(somePage);
+     */
+    remove(): any;
+    /**
+     * Get page by id
+     * @example
+     * const somePage = pageManager.get('page-id');
+     * @param id - Page id
+     */
+    get(id: string): any;
+    /**
+     * Get main page (the first one available)
+     * @example
+     * const mainPage = pageManager.getMain();
+     */
+    getMain(): any;
+    /**
+     * Get all pages
+     * @example
+     * const arrayOfPages = pageManager.getAll();
+     */
+    getAll(): any;
+    /**
+     * Get wrapper components (aka body) from all pages and frames.
+     * @example
+     * const wrappers = pageManager.getAllWrappers();
+     * // Get all `image` components from the project
+     * const allImages = wrappers.map(wrp => wrp.findType('image')).flat();
+     */
+    getAllWrappers(): any;
+    /**
+     * Change the selected page. This will switch the page rendered in canvas
+     * @example
+     * pageManager.select('page-id');
+     * // or by passing the page
+     * const somePage = pageManager.get('page-id');
+     * pageManager.select(somePage);
+     */
+    select(): this;
+    /**
+     * Get the selected page
+     * @example
+     * const selectedPage = pageManager.getSelected();
+     */
+    getSelected(): any;
+  }
+
+  interface PageOptions {
+    frames: Frame[];
+  }
+
+  interface Page extends Backbone.Model<PageOptions> {
+    /**
+     * Get page id
+     */
+    getId(): string;
+
+    /**
+     * Get page name
+     */
+    getName(): string;
+
+    /**
+     * Update page name
+     * @param value - New page name
+     */
+    setName(value: string): void;
+
+    /**
+     * Get all frames
+     * @example
+     * const arrayOfFrames = page.getAllFrames();
+     */
+    getAllFrames(): Frame[];
+
+    /**
+     * Get the first frame of the page (identified always as the main one)
+     * @example
+     * const mainFrame = page.getMainFrame();
+     */
+    getMainFrame(): Frame;
+
+    /**
+     * Get the root component (usually is the `wrapper` component) from the main frame
+     * @example
+     * const rootComponent = page.getMainComponent();
+     * console.log(rootComponent.toHTML());
+     */
+    getMainComponent(): Component;
+  }
+
+  /**
+   * You can customize the initial state of the module from the editor initialization, by passing the following [Configuration Object](https://github.com/artf/grapesjs/blob/master/src/parser/config/config.js)
+   * ```js
+   * const editor = grapesjs.init({
+   *  parser: {
+   *    // options
+   *  }
+   * })
+   * ```
+   *
+   * Once the editor is instantiated you can use its API. Before using these methods you should get the module from the instance
+   *
+   * ```js
+   * const { Parser } = editor;
+   * ```
+   * ## Available Events
+   * * `parse:html` - On HTML parse, an object containing the input and the output of the parser is passed as an argument
+   * * `parse:css` - On CSS parse, an object containing the input and the output of the parser is passed as an argument
+   *
+   * ## Methods
+   * * [getConfig](#getconfig)
+   * * [parseHtml](#parsehtml)
+   * * [parseCss](#parsecss)
+   */
+  interface Parser {
+    /**
+     * Get the configuration object
+     * @example
+     * console.log(Parser.getConfig())
+     * @returns Configuration object
+     */
+    getConfig(): any;
+    /**
+     * Parse HTML string and return the object containing the Component Definition
+     * @example
+     * const resHtml = Parser.parseHtml(`<table><div>Hi</div></table>`, {
+     *   htmlType: 'text/html', // default
+     * });
+     * // By using the `text/html`, this will fix automatically all the HTML syntax issues
+     * // Indeed the final representation, in this case, will be `<div>Hi</div><table></table>`
+     * const resXml = Parser.parseHtml(`<table><div>Hi</div></table>`, {
+     *   htmlType: 'application/xml',
+     * });
+     * // This will preserve the original format as, from the XML point of view, is a valid format
+     * @param input - HTML string to parse
+     * @param [options] - Options
+     * @param [options.htmlType] - [HTML mime type](https://developer.mozilla.org/en-US/docs/Web/API/DOMParser/parseFromString#Argument02) to parse
+     * @param [options.allowScripts = false] - Allow `<script>` tags
+     * @param [options.allowUnsafeAttr = false] - Allow unsafe HTML attributes (eg. `on*` inline event handlers)
+     * @returns Object containing the result `{ html: ..., css: ... }`
+     */
+    parseHtml(
+      input: string,
+      options?: {
+        htmlType?: string;
+        allowScripts?: boolean;
+        allowUnsafeAttr?: boolean;
+      }
+    ): any;
+    /**
+     * Parse CSS string and return an array of valid definition objects for CSSRules
+     * @example
+     * const res = Parser.parseCss('.cls { color: red }');
+     * // [{ ... }]
+     * @param input - CSS string to parse
+     * @returns Array containing the result
+     */
+    parseCss(input: string): object[];
+  }
+}
+
+export default grapesjs;