Update EditorModel getConfig

src/abstract/Module.ts

@@ -1,5 +1,6 @@
 import { isElement, isUndefined, isString } from 'underscore';
 import { Collection, View } from '../common';
+import { EditorConfigKeys } from '../editor/config/config';
 import EditorModel from '../editor/model/Editor';
 import { createId, isDef, deepMerge } from '../utils/mixins';
 
@@ -43,9 +44,9 @@ export default abstract class Module<T extends ModuleConfig = ModuleConfig> impl
   constructor(em: EditorModel, moduleName: string, defaults?: T) {
     this._em = em;
     this._name = moduleName;
-    const name = this.name.charAt(0).toLowerCase() + this.name.slice(1);
+    const name = (this.name.charAt(0).toLowerCase() + this.name.slice(1)) as EditorConfigKeys;
-    const cfgParent = !isUndefined(em.config[name]) ? em.config[name] : em.config[this.name];
+    const cfgParent = !isUndefined(em.config[name]) ? em.config[name] : em.config[this.name as EditorConfigKeys];
-    const cfg = cfgParent === true ? {} : cfgParent || {};
+    const cfg = (cfgParent === true ? {} : cfgParent || {}) as Record<string, any>;
     cfg.pStylePrefix = em.config.pStylePrefix || '';
 
     if (!isUndefined(cfgParent) && !cfgParent) {

src/css_composer/index.ts

@@ -67,6 +67,7 @@ export default class CssComposer extends ItemManagerModule<CssComposerConfig & {
     const ppfx = config.pStylePrefix;
     if (ppfx) config.stylePrefix = ppfx + config.stylePrefix;
 
+    // @ts-ignore
     config.rules = this.em.config.style || config.rules || '';
 
     this.rules = new CssRules([], config);

src/editor/config/config.ts

@@ -116,7 +116,7 @@ export interface EditorConfig {
    * You can use `false` to disable all of them or `true` to print all of them.
    * @default ['warning', 'error']
    */
-  log?: ('debug' | 'info' | 'warning' | 'error')[];
+  log?: ('debug' | 'info' | 'warning' | 'error')[] | boolean;
 
   /**
    * By default Grapes injects base CSS into the canvas. For example, it sets body margin to 0
@@ -380,7 +380,7 @@ export interface EditorConfig {
   /**
    * Configurations for Block Manager.
    */
-  blockManager?: BlockManagerConfig | boolean;
+  blockManager?: BlockManagerConfig;
 
   // TODO
   /**
@@ -421,8 +421,15 @@ export interface EditorConfig {
   customUI?: boolean;
   el?: HTMLElement;
   multiFrames?: boolean;
+  /**
+   * Color picker options.
+   */
+  colorPicker?: AnyObject;
+  pStylePrefix?: string;
 }
 
+export type EditorConfigKeys = keyof EditorConfig;
+
 const config: EditorConfig = {
   stylePrefix: 'gjs-',
   components: '',

src/editor/index.ts

@@ -113,15 +113,15 @@ export default class EditorModule implements IBaseModule<EditorConfig> {
     this.editor = this.em;
   }
 
+  get Config() {
+    return this.em.config;
+  }
   get I18n(): I18nModule {
     return this.em.get('I18n');
   }
   get Utils(): UtilsModule {
     return this.em.get('Utils');
   }
-  get Config(): any {
-    return this.em.config;
-  }
   //@ts-ignore
   get Commands(): CommandsModule {
     return this.em.get('Commands');

src/editor/model/Editor.ts

@@ -12,6 +12,7 @@ import { IModule } from '../../abstract/Module';
 import CanvasModule from '../../canvas';
 import ComponentManager from '../../dom_components';
 import CssComposer from '../../css_composer';
+import { EditorConfig, EditorConfigKeys } from '../config/config';
 
 //@ts-ignore
 Backbone.$ = $;
@@ -77,7 +78,7 @@ export default class EditorModel extends Model {
   __skip = false;
   defaultRunning = false;
   destroyed = false;
-  _config: any;
+  _config: EditorConfig;
   attrsOrig: any;
   timedInterval?: number;
   updateItr?: number;
@@ -119,7 +120,7 @@ export default class EditorModel extends Model {
     return this.get('CssComposer');
   }
 
-  constructor(conf = {}) {
+  constructor(conf: EditorConfig = {}) {
     super();
     this._config = conf;
     const { config } = this;
@@ -141,7 +142,7 @@ export default class EditorModel extends Model {
       ? toArray(el.attributes).reduce((res, next) => {
           res[next.nodeName] = next.nodeValue;
           return res;
-        }, {})
+        }, {} as Record<string, any>)
       : '';
 
     // Move components to pages
@@ -193,8 +194,12 @@ export default class EditorModel extends Model {
    * @return {any} Returns the configuration object or
    *  the value of the specified property
    */
-  getConfig(prop?: string) {
+  getConfig<
-    const config = this.config;
+    P extends EditorConfigKeys | undefined = undefined,
+    R = P extends EditorConfigKeys ? EditorConfig[P] : EditorConfig
+  >(prop?: P): R {
+    const { config } = this;
+    // @ts-ignore
     return isUndefined(prop) ? config : config[prop];
   }
 
@@ -277,9 +282,9 @@ export default class EditorModel extends Model {
     const { config } = this;
     const Module = moduleName.default || moduleName;
     const Mod = new Module(this);
-    const name = Mod.name.charAt(0).toLowerCase() + Mod.name.slice(1);
+    const name = (Mod.name.charAt(0).toLowerCase() + Mod.name.slice(1)) as EditorConfigKeys;
-    const cfgParent = !isUndefined(config[name]) ? config[name] : config[Mod.name];
+    const cfgParent = !isUndefined(config[name]) ? config[name] : config[Mod.name as EditorConfigKeys];
-    const cfg = cfgParent === true ? {} : cfgParent || {};
+    const cfg = (cfgParent === true ? {} : cfgParent || {}) as Record<string, any>;
     cfg.pStylePrefix = config.pStylePrefix || '';
 
     if (!isUndefined(cfgParent) && !cfgParent) {
@@ -881,6 +886,7 @@ export default class EditorModel extends Model {
   destroyAll() {
     const { config, view } = this;
     const editor = this.getEditor();
+    // @ts-ignore
     const { editors = [] } = config.grapesjs || {};
     const shallow = this.get('shallow');
     shallow?.destroyAll();

src/editor/view/EditorView.ts

@@ -7,7 +7,7 @@ const $ = Backbone.$;
 
 export default class EditorView extends View<EditorModel> {
   constructor(model: EditorModel) {
-    super({model})
+    super({ model });
     //const { model } = this;
     const { Panels, UndoManager } = model.attributes;
     model.view = this;
@@ -27,11 +27,14 @@ export default class EditorView extends View<EditorModel> {
     const { Panels, Canvas } = model.attributes;
     const { config, modules } = model;
     const pfx = config.stylePrefix;
+    // @ts-ignore
     const contEl = $(config.el || `body ${config.container}`);
-    appendStyles(config.cssIcons, { unique: true, prepand: true });
+    config.cssIcons && appendStyles(config.cssIcons, { unique: true, prepand: true });
     $el.empty();
 
+    // @ts-ignore
     if (config.width) contEl.css('width', config.width);
+    // @ts-ignore
     if (config.height) contEl.css('height', config.height);
 
     $el.append(Canvas.render());
@@ -44,6 +47,7 @@ export default class EditorView extends View<EditorModel> {
     $el.append(shallowCanvasEl);
 
     $el.attr('class', `${pfx}editor ${pfx}one-bg ${pfx}two-color`);
+    // @ts-ignore
     contEl.addClass(`${pfx}editor-cont`).empty().append($el);
     modules.forEach(md => md.postRender && md.postRender(this));
 

src/navigator/view/ItemView.ts

@@ -50,7 +50,7 @@ export default class ItemView extends View {
     const icon = model.getIcon();
     const clsBase = `${pfx}layer`;
     const { icons } = em?.getConfig();
-    const { move, eye, eyeOff, chevron } = icons;
+    const { move, eye, eyeOff, chevron } = icons!;
 
     return `
       ${
@@ -80,7 +80,7 @@ export default class ItemView extends View {
   }
 
   public get ppfx(): string {
-    return this.em.getConfig().stylePrefix;
+    return this.em.getConfig().stylePrefix!;
   }
 
   public get pfx(): string {