Add extra plugins to the editor

Closes #23

Author: bampakoa

projects/demo-editor/src/app/app.component.ts

@@ -14,7 +14,7 @@ import { NgxNewsletterEditorComponent, NgxWebpageEditorComponent } from 'ngx-gra
 })
 export class AppComponent {
   editorMode = '';
-  template = '<span>This is a test content</span>'
+  template = '<span>This is a test content</span>';
   placeholders = [{
     value: 'MyPlaceholder',
     name: 'Custom placeholder',

projects/ngx-grapesjs/README.md

@@ -52,6 +52,7 @@ Both editors support passing the following input properties:
 
  - `template`: the HTML content of the editor in string format
  - `storagePrefix`: the prefix that GrapesJS will use for persisting data to the local storage. By default it uses the `gjs-` prefix.
+ - `plugins`: additional GrapesJS plugins to use. It requires that the respective npm package of the plugins must have been installed previously.
 
 >It is recommended to use a custom prefix when running multiple instances of the editor such as when opening or editing content in different tabs.
 

projects/ngx-grapesjs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ngx-grapesjs",
-  "version": "19.0.0",
+  "version": "19.1.0",
   "description": "Angular wrapper library for GrapesJS",
   "scripts": {
     "build": "tsc -p tsconfig.schematics.json",

projects/ngx-grapesjs/src/lib/editor.component.ts

@@ -11,6 +11,7 @@ export class NgxEditorComponent {
 
   readonly template = input('');
   readonly storagePrefix = input('gjs-');
+  readonly plugins = input<string[]>([]);
 
   setup(customConfig: Partial<Config>) {
     const config: Partial<Config> = {
@@ -22,7 +23,8 @@ export class NgxEditorComponent {
 
     return grapesjs.init({
       ...config,
-      ...customConfig
+      ...customConfig,
+      plugins: [...customConfig.plugins!, ...this.plugins()]
     });
   }