diff --git a/src/code_manager/model/CssGenerator.ts b/src/code_manager/model/CssGenerator.ts index b4c68b5a3..c45b70fee 100644 --- a/src/code_manager/model/CssGenerator.ts +++ b/src/code_manager/model/CssGenerator.ts @@ -63,7 +63,7 @@ export default class CssGenerator extends Model { const em = this.em; const avoidInline = em && em.getConfig().avoidInlineStyle; const style = model.styleToString(); - const classes = model.get('classes'); + const classes = model.classes; this.ids.push(`#${model.getId()}`); // Let's know what classes I've found @@ -197,7 +197,7 @@ export default class CssGenerator extends Model { rule .selectorsToString() .split(',') - .some(selector => el.matches(this.__cleanSelector(selector))) + .some(selector => el?.matches(this.__cleanSelector(selector))) ) { result.push(rule); } diff --git a/src/commands/view/MoveComponent.ts b/src/commands/view/MoveComponent.ts index fb111bbc7..7791a77eb 100644 --- a/src/commands/view/MoveComponent.ts +++ b/src/commands/view/MoveComponent.ts @@ -95,7 +95,7 @@ export default extend({}, SelectPosition, SelectComponent, { this.cacheEl = null; const lastModel = models[models.length - 1]; const frame = (this.em.get('currentFrame') || {}).model; - const el = lastModel.getEl(frame); + const el = lastModel.getEl(frame)!; const doc = el.ownerDocument; this.startSelectPosition(el, doc, { onStart: this.onStart }); this.sorter.draggable = lastModel.get('draggable'); diff --git a/src/dom_components/index.ts b/src/dom_components/index.ts index dc7b19e41..dc8751e27 100644 --- a/src/dom_components/index.ts +++ b/src/dom_components/index.ts @@ -342,7 +342,7 @@ export default class ComponentManager extends ItemManagerModule { */ getComponents(): Components { const wrp = this.getWrapper(); - return wrp && wrp.get('components'); + return wrp?.get('components')!; } /** @@ -617,7 +617,7 @@ export default class ComponentManager extends ItemManagerModule { if (!srcModel) { const wrapper = this.getShallowWrapper(); - srcModel = wrapper?.append(source)[0]; + srcModel = wrapper?.append(source)[0] || null; } //@ts-ignore diff --git a/src/dom_components/model/Components.ts b/src/dom_components/model/Components.ts index 5e31ef003..54501db44 100644 --- a/src/dom_components/model/Components.ts +++ b/src/dom_components/model/Components.ts @@ -323,6 +323,7 @@ export default class Components extends Collection { const avoidInline = em && em.getConfig().avoidInlineStyle; domc && domc.Component.ensureInList(model); + // @ts-ignore if (!isEmpty(style) && !avoidInline && em && em.get && em.getConfig().forceClass && !opts.temporary) { const name = model.cid; const rule = em.get('CssComposer').setClassRule(name, style); diff --git a/src/dom_components/model/types.ts b/src/dom_components/model/types.ts index 573bf447f..1ae622122 100644 --- a/src/dom_components/model/types.ts +++ b/src/dom_components/model/types.ts @@ -3,6 +3,7 @@ import EditorModel from '../../editor/model/Editor'; import Selectors from '../../selector_manager/model/Selectors'; import { TraitProperties } from '../../trait_manager/model/Trait'; import Traits from '../../trait_manager/model/Traits'; +import { ResizerOptions } from '../../utils/Resizer'; import { DomComponentsConfig } from '../config/config'; import Component from './Component'; import Components from './Components'; @@ -84,7 +85,7 @@ export interface ComponentProperties { /** * 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; + resizable?: boolean | ResizerOptions; /** * Allow to edit the content of the component (used on Text components). Default: `false` */ diff --git a/src/navigator/index.ts b/src/navigator/index.ts index 8989bfc7a..934a35ee3 100644 --- a/src/navigator/index.ts +++ b/src/navigator/index.ts @@ -367,7 +367,7 @@ export default class LayerManager extends Module { const hideText = this.config.hideTextnode; const isValid = !hideText || (!cmp.is('textnode') && tag !== 'br'); - return isValid && cmp.get('layerable'); + return isValid && cmp.get('layerable')!; } __trgCustom(opts?: any) { diff --git a/src/navigator/view/ItemView.ts b/src/navigator/view/ItemView.ts index fc5a0e141..f768d6496 100644 --- a/src/navigator/view/ItemView.ts +++ b/src/navigator/view/ItemView.ts @@ -274,7 +274,7 @@ export default class ItemView extends View { const { model, module } = this; ev?.stopImmediatePropagation(); - if (!model.get('components').length) return; + if (!model.get('components')!.length) return; module.setOpen(model, !module.isOpen(model)); } diff --git a/src/trait_manager/model/Trait.ts b/src/trait_manager/model/Trait.ts index 029a61562..4642e52f1 100644 --- a/src/trait_manager/model/Trait.ts +++ b/src/trait_manager/model/Trait.ts @@ -242,7 +242,7 @@ export default class Trait extends Model { let value; if (target) { - const attrs = target.get('attributes'); + const attrs = target.get('attributes')!; value = this.get('changeProp') ? target.get(name) : attrs[name]; } diff --git a/src/trait_manager/view/TraitView.ts b/src/trait_manager/view/TraitView.ts index 068df3316..da593a817 100644 --- a/src/trait_manager/view/TraitView.ts +++ b/src/trait_manager/view/TraitView.ts @@ -223,7 +223,7 @@ export default class TraitView extends View { if (model.get('changeProp')) { value = target.get(name); } else { - const attrs = target.get('attributes'); + const attrs = target.get('attributes')!; value = model.get('value') || attrs[name]; } diff --git a/src/trait_manager/view/TraitsView.ts b/src/trait_manager/view/TraitsView.ts index 82d381d44..fd2616b9a 100644 --- a/src/trait_manager/view/TraitsView.ts +++ b/src/trait_manager/view/TraitsView.ts @@ -31,7 +31,8 @@ export default class TraitsView extends DomainViews { const { ppfx, className, em } = this; const comp = em.getSelected(); this.el.className = `${className} ${ppfx}one-bg ${ppfx}two-color`; - this.collection = comp ? comp.get('traits') : []; + // @ts-ignore + this.collection = comp ? comp.traits : []; this.render(); } } diff --git a/src/utils/Droppable.ts b/src/utils/Droppable.ts index 6f6d15c83..fb8ffa4ab 100644 --- a/src/utils/Droppable.ts +++ b/src/utils/Droppable.ts @@ -30,7 +30,7 @@ export default class Droppable { constructor(em: EditorModel, rootEl?: HTMLElement) { this.em = em; this.canvas = em.get('Canvas'); - const el = rootEl || this.canvas.getFrames().map(frame => frame.getComponent().getEl()); + const el = rootEl || this.canvas.getFrames().map(frame => frame.getComponent().getEl()!); const els = Array.isArray(el) ? el : [el]; this.el = els[0]; this.counter = 0; diff --git a/src/utils/Resizer.ts b/src/utils/Resizer.ts index d30dece4a..479d2606c 100644 --- a/src/utils/Resizer.ts +++ b/src/utils/Resizer.ts @@ -27,7 +27,7 @@ type CallbackOptions = { resizer: Resizer; }; -interface ResizerOptions { +export interface ResizerOptions { /** * Function which returns custom X and Y coordinates of the mouse. */