From bafd5d49e45af4c406c6cf2a0c300fee2f6b5d81 Mon Sep 17 00:00:00 2001 From: Artur Arseniev Date: Sat, 5 Nov 2022 13:45:59 +0400 Subject: [PATCH] Update EditorModel getConfig --- src/abstract/Module.ts | 7 ++++--- src/css_composer/index.ts | 1 + src/editor/config/config.ts | 11 +++++++++-- src/editor/index.ts | 6 +++--- src/editor/model/Editor.ts | 22 ++++++++++++++-------- src/editor/view/EditorView.ts | 8 ++++++-- src/navigator/view/ItemView.ts | 4 ++-- 7 files changed, 39 insertions(+), 20 deletions(-) diff --git a/src/abstract/Module.ts b/src/abstract/Module.ts index ba9dd547b..7ca5f12f9 100644 --- a/src/abstract/Module.ts +++ b/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 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 cfgParent = !isUndefined(em.config[name]) ? em.config[name] : em.config[this.name]; - const cfg = cfgParent === true ? {} : cfgParent || {}; + 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 as EditorConfigKeys]; + const cfg = (cfgParent === true ? {} : cfgParent || {}) as Record; cfg.pStylePrefix = em.config.pStylePrefix || ''; if (!isUndefined(cfgParent) && !cfgParent) { diff --git a/src/css_composer/index.ts b/src/css_composer/index.ts index ab0637173..b8fad7bb7 100644 --- a/src/css_composer/index.ts +++ b/src/css_composer/index.ts @@ -67,6 +67,7 @@ export default class CssComposer extends ItemManagerModule { 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'); diff --git a/src/editor/model/Editor.ts b/src/editor/model/Editor.ts index 560d4cdfa..6d88ceaa7 100644 --- a/src/editor/model/Editor.ts +++ b/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) : ''; // 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) { - const config = this.config; + getConfig< + 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 cfgParent = !isUndefined(config[name]) ? config[name] : config[Mod.name]; - const cfg = cfgParent === true ? {} : cfgParent || {}; + const name = (Mod.name.charAt(0).toLowerCase() + Mod.name.slice(1)) as EditorConfigKeys; + const cfgParent = !isUndefined(config[name]) ? config[name] : config[Mod.name as EditorConfigKeys]; + const cfg = (cfgParent === true ? {} : cfgParent || {}) as Record; 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(); diff --git a/src/editor/view/EditorView.ts b/src/editor/view/EditorView.ts index 82004a053..0d7e05d8d 100644 --- a/src/editor/view/EditorView.ts +++ b/src/editor/view/EditorView.ts @@ -7,7 +7,7 @@ const $ = Backbone.$; export default class EditorView extends View { 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 { 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 { $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)); diff --git a/src/navigator/view/ItemView.ts b/src/navigator/view/ItemView.ts index f1d6d9bc5..fc5a0e141 100644 --- a/src/navigator/view/ItemView.ts +++ b/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 {