Merge branch 'dev' of https://github.com/amirrahmani76/grapesjs into dev

README.md

@@ -151,6 +151,8 @@ $ yarn test
 
 ## Plugins
 
+[Official Plugins](https://github.com/orgs/GrapesJS/repositories?q=-repo%3Agrapesjs%2Fgrapesjs&type=source) | [Community Plugins](https://github.com/topics/grapesjs-plugin)
+
 ### Wrappers
 
 * [@grapesjs/react](https://github.com/GrapesJS/react) - GrapesJS wrapper for React that allows you to build custom and declarative UI for your editor.
@@ -161,7 +163,6 @@ $ yarn test
 * [grapesjs-plugin-export](https://github.com/GrapesJS/export) - Export GrapesJS templates in a zip archive
 * [grapesjs-plugin-filestack](https://github.com/GrapesJS/filestack) - Add Filestack uploader in Asset Manager
 * [grapesjs-plugin-ckeditor](https://github.com/GrapesJS/ckeditor) - Replaces the built-in RTE with CKEditor
-* [grapesjs-aviary](https://github.com/GrapesJS/aviary) - Add the Aviary Image Editor (dismissed, use the plugin below instead)
 * [grapesjs-tui-image-editor](https://github.com/GrapesJS/tui-image-editor) - GrapesJS TOAST UI Image Editor
 * [grapesjs-blocks-basic](https://github.com/GrapesJS/blocks-basic) - Basic set of blocks
 * [grapesjs-plugin-forms](https://github.com/GrapesJS/components-forms) - Set of form components and blocks

docs/api/canvas.md

@@ -90,6 +90,30 @@ editor.on('canvas:pointer', () => {
 });
 ```
 
+* `canvas:frame:load` Frame loaded in canvas.
The event is triggered right after iframe's `onload`.
+
+```javascript
+editor.on('canvas:frame:load', ({ window }) => {
+ console.log('Frame loaded', window);
+});
+```
+
+* `canvas:frame:load:head` Frame head loaded in canvas.
The event is triggered right after iframe's finished to load the head elemenets (eg. scripts)
+
+```javascript
+editor.on('canvas:frame:load:head', ({ window }) => {
+ console.log('Frame head loaded', window);
+});
+```
+
+* `canvas:frame:load:body` Frame body loaded in canvas.
The event is triggered when the body is rendered with components.
+
+```javascript
+editor.on('canvas:frame:load:body', ({ window }) => {
+ console.log('Frame completed the body render', window);
+});
+```
+
 [Component]: component.html
 
 [Frame]: frame.html

docs/api/component.md

@@ -62,6 +62,7 @@ component.get('tagName');
     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`).
 *   `components` **Collection\<Component>?** Children components. Default: `null`
+*   `delegate` **[Object][2]?** Delegate commands to other components. Available commands `remove` | `move` | `copy` | `select`. eg. `{ remove: (cmp) => cmp.closestType('other-type') }`
 
 ## init
 
@@ -219,15 +220,16 @@ Replace a component with another one
 ### Parameters
 
 *   `el` **([String][1] | Component)** Component or HTML string
+*   `opts` **[Object][2]** Options for the append action (optional, default `{}`)
 
 ### Examples
 
 ```javascript
-component.replaceWith('<div>Some new content</div>');
-// -> Component
+const result = component.replaceWith('<div>Some new content</div>');
+// result -> [Component]
 ```
 
-Returns **(Component | [Array][5]\<Component>)** New added component/s
+Returns **[Array][5]\<Component>** New replaced components
 
 ## setAttributes
 

docs/api/selector.md

@@ -27,6 +27,20 @@ console.log(selector.toString());
 
 Returns **[String][1]** 
 
+### getName
+
+Get selector name.
+
+#### Examples
+
+```javascript
+// Given such selector: { name: 'my-selector', label: 'My selector' }
+console.log(selector.getName());
+// -> `my-selector`
+```
+
+Returns **[String][1]** 
+
 ### getLabel
 
 Get selector label.

docs/api/storage_manager.md

@@ -24,18 +24,101 @@ storageManager.add(...);
 ```
 
 ## Available Events
+* `storage:start` Storage request start.
 
-*   `storage:start` - Before the storage request is started
-*   `storage:start:store` - Before the store request. The object to store is passed as an argument (which you can edit)
-*   `storage:start:load` - Before the load request. Items to load are passed as an argument (which you can edit)
-*   `storage:load` - Triggered when something was loaded from the storage, loaded object passed as an argument
-*   `storage:store` - Triggered when something is stored to the storage, stored object passed as an argument
-*   `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
+```javascript
+editor.on('storage:start', (type) => {
+ console.log('Storage start');
+});
+```
+
+* `storage:start:store` Storage store request start.
The project JSON object to store is passed as an argument (which you can edit).
+
+```javascript
+editor.on('storage:start:store', (data) => {
+ console.log('Storage start store');
+});
+```
+
+* `storage:start:load` Storage load request start.
+
+```javascript
+editor.on('storage:start:load', () => {
+ console.log('Storage start load');
+});
+```
+
+* `storage:load` Storage loaded the project.
The loaded project is passed as an argument.
+
+```javascript
+editor.on('storage:load', (data, res) => {
+ console.log('Storage loaded the project');
+});
+```
+
+* `storage:store` Storage stored the project.
The stored project is passed as an argument.
+
+```javascript
+editor.on('storage:store', (data, res) => {
+ console.log('Storage stored the project');
+});
+```
+
+* `storage:after` Storage request completed.
Triggered right after `storage:load`/`storage:store`.
+
+```javascript
+editor.on('storage:after', (type) => {
+ console.log('Storage request completed');
+});
+```
+
+* `storage:end` Storage request ended.
This event triggers also in case of errors.
+
+```javascript
+editor.on('storage:end', (type) => {
+ console.log('Storage request ended');
+});
+```
+
+* `storage:end:store` Storage store request ended.
This event triggers also in case of errors.
+
+```javascript
+editor.on('storage:end:store', () => {
+ console.log('Storage store request ended');
+});
+```
+
+* `storage:end:load` Storage load request ended.
This event triggers also in case of errors.
+
+```javascript
+editor.on('storage:end:load', () => {
+ console.log('Storage load request ended');
+});
+```
+
+* `storage:error` Error on storage request.
+
+```javascript
+editor.on('storage:error', (err, type) => {
+ console.log('Storage error');
+});
+```
+
+* `storage:error:store` Error on store request.
+
+```javascript
+editor.on('storage:error:store', (err) => {
+ console.log('Error on store');
+});
+```
+
+* `storage:error:load` Error on load request.
+
+```javascript
+editor.on('storage:error:load', (err) => {
+ console.log('Error on load');
+});
+```
 
 ## Methods
 
@@ -160,7 +243,7 @@ Store data in the current storage.
 ### Parameters
 
 *   `data` **[Object][16]** Project data.
-*   `options` **[Object][16]?** Storage options. (optional, default `{}`)
+*   `options` **[Object][16]?** Storage options. (optional, default `{}as T`)
 
 ### Examples
 
@@ -177,7 +260,7 @@ Load resource from the current storage by keys
 
 ### Parameters
 
-*   `options` **[Object][16]?** Storage options. (optional, default `{}`)
+*   `options` **[Object][16]?** Storage options. (optional, default `{}as T`)
 
 ### Examples
 

package.json

@@ -1,7 +1,7 @@
 {
   "name": "grapesjs",
   "description": "Free and Open Source Web Builder Framework",
-  "version": "0.21.7",
+  "version": "0.21.8",
   "author": "Artur Arseniev",
   "license": "BSD-3-Clause",
   "homepage": "http://grapesjs.com",

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() {

src/storage_manager/index.ts

@@ -49,7 +49,7 @@ import EditorModel from '../editor/model/Editor';
 import IStorage, { StorageOptions, ProjectData } from './model/IStorage';
 import StorageEvents from './types';
 
-export type * from './model/IStorage';
+export type { StorageOptions, ProjectData } from './model/IStorage';
 
 export type StorageEvent = `${StorageEvents}`;