Merge branch 'component-view' of https://github.com/xQwexx/grapesjs into xQwexx-component-view

src/dom_components/model/types.ts

@@ -18,7 +18,7 @@ export type DraggableDroppableFn = (source: Component, target: Component, index?
 export interface ComponentStackItem {
   id: string;
   model: typeof Component;
-  view: typeof ComponentView;
+  view: typeof ComponentView<any>;
 }
 
 /**

src/dom_components/view/ComponentFrameView.ts

@@ -1,7 +1,8 @@
 import ComponentView from './ComponentView';
 import { createEl, find, attrUp } from '../../utils/dom';
+import ComponentFrame from '../model/ComponentFrame';
 
-export default class ComponentFrameView extends ComponentView {
+export default class ComponentFrameView extends ComponentView<ComponentFrame> {
   tagName() {
     return 'div';
   }

src/dom_components/view/ComponentImageView.ts

@@ -3,9 +3,8 @@ import { ObjectAny } from '../../common';
 import ComponentImage from '../model/ComponentImage';
 import ComponentView from './ComponentView';
 
-export default class ComponentImageView extends ComponentView {
+export default class ComponentImageView<TComp extends ComponentImage = ComponentImage> extends ComponentView<TComp> {
   classEmpty!: string;
-  model!: ComponentImage;
   el!: HTMLImageElement;
 
   tagName() {

src/dom_components/view/ComponentLabelView.ts

@@ -1,3 +1,4 @@
-import ComponentLinkView from './ComponentLinkView';
+import ComponentLabel from '../model/ComponentLabel';
+import ComponentView from './ComponentView';
 
-export default class ComponentLabelView extends ComponentLinkView {}
+export default class ComponentLabelView extends ComponentView<ComponentLabel> {}

src/dom_components/view/ComponentLinkView.ts

@@ -1,6 +1,7 @@
-import ComponentTextView from './ComponentTextView';
+import ComponentLink from '../model/ComponentLink';
+import ComponentView from './ComponentView';
 
-export default class ComponentLinkView extends ComponentTextView {
+export default class ComponentLinkView extends ComponentView<ComponentLink> {
   render() {
     super.render();
     // I need capturing instead of bubbling as bubbled clicks from other

src/dom_components/view/ComponentScriptView.ts

@@ -1,6 +1,7 @@
+import ComponentScript from '../model/ComponentScript';
 import ComponentView from './ComponentView';
 
-export default class ComponentScriptView extends ComponentView {
+export default class ComponentScriptView extends ComponentView<ComponentScript> {
   tagName() {
     return 'script';
   }

src/dom_components/view/ComponentSvgView.ts

@@ -1,6 +1,7 @@
+import ComponentSvg from '../model/ComponentSvg';
 import ComponentView from './ComponentView';
 
-export default class ComponentSvgView extends ComponentView {
+export default class ComponentSvgView extends ComponentView<ComponentSvg> {
   _createElement(tagName: string) {
     return document.createElementNS('http://www.w3.org/2000/svg', tagName);
   }

src/dom_components/view/ComponentTableBodyView.ts

@@ -1,3 +1,4 @@
+import ComponentTableBody from '../model/ComponentTableBody';
 import ComponentView from './ComponentView';
 
-export default class ComponentTableBodyView extends ComponentView {}
+export default class ComponentTableBodyView extends ComponentView<ComponentTableBody> {}

src/dom_components/view/ComponentTableCellView.ts

@@ -1,3 +1,4 @@
+import ComponentTableCell from '../model/ComponentTableCell';
 import ComponentView from './ComponentView';
 
-export default class ComponentTableCellView extends ComponentView {}
+export default class ComponentTableCellView extends ComponentView<ComponentTableCell> {}

src/dom_components/view/ComponentTableFootView.ts

@@ -1,3 +1,4 @@
+import ComponentTableFoot from '../model/ComponentTableFoot';
 import ComponentView from './ComponentView';
 
-export default class ComponentTableFootView extends ComponentView {}
+export default class ComponentTableFootView extends ComponentView<ComponentTableFoot> {}

src/dom_components/view/ComponentTableHeadView.ts

@@ -1,3 +1,4 @@
+import ComponentTableHead from '../model/ComponentTableHead';
 import ComponentView from './ComponentView';
 
-export default class ComponentTableHeadView extends ComponentView {}
+export default class ComponentTableHeadView extends ComponentView<ComponentTableHead> {}

src/dom_components/view/ComponentTableRowView.ts

@@ -1,3 +1,4 @@
+import ComponentTableRow from '../model/ComponentTableRow';
 import ComponentView from './ComponentView';
 
-export default class ComponentTableRowView extends ComponentView {}
+export default class ComponentTableRowView extends ComponentView<ComponentTableRow> {}

src/dom_components/view/ComponentTableView.ts

@@ -1,5 +1,8 @@
+import ComponentTable from '../model/ComponentTable';
 import ComponentView from './ComponentView';
 
-export default ComponentView.extend({
-  events: {},
-});
+export default class ComponentTableView extends ComponentView<ComponentTable> {
+  events() {
+    return {};
+  }
+}

src/dom_components/view/ComponentTextNodeView.ts

@@ -1,6 +1,9 @@
+import ComponentTextNode from '../model/ComponentTextNode';
 import ComponentView from './ComponentView';
 
-export default class ComponentTextNodeView extends ComponentView {
+export default class ComponentTextNodeView<
+  TComp extends ComponentTextNode = ComponentTextNode
+> extends ComponentView<TComp> {
   // Clear methods used on Nodes with attributes
   _setAttributes() {}
   renderAttributes() {}

src/dom_components/view/ComponentTextView.ts

@@ -6,10 +6,11 @@ import { off, on } from '../../utils/dom';
 import { getComponentModel } from '../../utils/mixins';
 import Component from '../model/Component';
 import { getComponentIds } from '../model/Components';
+import ComponentText from '../model/ComponentText';
 import { ComponentDefinition } from '../model/types';
 import ComponentView from './ComponentView';
 
-export default class ComponentTextView extends ComponentView {
+export default class ComponentTextView extends ComponentView<ComponentText> {
   rte?: RichTextEditorModule;
   rteEnabled?: boolean;
   activeRte?: RichTextEditor;

src/dom_components/view/ComponentVideoView.ts

@@ -2,9 +2,8 @@ import ComponentVideo from '../model/ComponentVideo';
 import ComponentImageView from './ComponentImageView';
 import ComponentView from './ComponentView';
 
-export default class ComponentVideoView extends ComponentImageView {
+export default class ComponentVideoView extends ComponentImageView<ComponentVideo> {
   videoEl?: HTMLVideoElement | HTMLIFrameElement;
-  model!: ComponentVideo;
 
   tagName() {
     return 'div';

src/dom_components/view/ComponentView.ts

@@ -18,12 +18,12 @@ type ClbObj = ReturnType<ComponentView['_clbObj']>;
 
 export interface IComponentView extends ExtractMethods<ComponentView> {}
 
-export default class ComponentView extends View</**
+export default class ComponentView<TComp extends Component = Component> extends View</**
  * Keep this format to avoid errors in TS bundler */
 /** @ts-ignore */
-Component> {
+TComp> {
   /** @ts-ignore */
-  model!: Component;
+  model!: TComp;
 
   /** @ts-ignore */
   className() {