feat: add install schematic

Add the `ng add` schematic and create separate components for webpage and newsletter mode.

Closes #7

package.json

@@ -22,6 +22,7 @@
     "@angular/router": "~13.0.0",
     "grapesjs": "^0.17.29",
     "grapesjs-preset-newsletter": "^0.2.21",
+    "grapesjs-preset-webpage": "^0.1.11",
     "rxjs": "~7.4.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.11.4"

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

@@ -2,4 +2,4 @@ <h1>DEMO EDITOR</h1>
 <p>
   <button (click)="getInlinedHtml()">Export raw HTML</button>
 </p>
-<lib-ngx-grapesjs [template]="template" [placeholders]="placeholders"></lib-ngx-grapesjs>
+<lib-newsletter-editor [template]="template" [placeholders]="placeholders"></lib-newsletter-editor>

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

@@ -1,5 +1,5 @@
 import { Component, ViewChild } from '@angular/core';
-import { NgxGrapesjsComponent } from 'ngx-grapesjs';
+import { NgxNewsletterEditorComponent } from 'ngx-grapesjs';
 
 @Component({
   selector: 'app-root',
@@ -14,7 +14,7 @@ export class AppComponent {
     description: 'For Wings console only'
   }];
 
-  @ViewChild(NgxGrapesjsComponent) editor: NgxGrapesjsComponent | undefined;
+  @ViewChild(NgxNewsletterEditorComponent) editor: NgxNewsletterEditorComponent | undefined;
   getInlinedHtml(){
     console.log(this.editor?.getRawHtml());
   }

projects/ngx-grapesjs/package.json

@@ -10,7 +10,8 @@
     "@angular/common": "^13.0.0",
     "@angular/core": "^13.0.0",
     "grapesjs": "^0.17.29",
-    "grapesjs-preset-newsletter": "^0.2.21"
+    "grapesjs-preset-newsletter": "^0.2.21",
+    "grapesjs-preset-webpage": "^0.1.11"
   },
   "dependencies": {
     "tslib": "^2.3.0"

projects/ngx-grapesjs/schematics/collection.json

@@ -3,7 +3,8 @@
   "schematics": {
     "ng-add": {
       "description": "Add my library to the project.",
-      "factory": "./ng-add/index#ngAdd"
+      "factory": "./ng-add/index#ngAdd",
+      "schema": "./ng-add/schema.json"
     }
   }
 }

projects/ngx-grapesjs/schematics/ng-add/index.ts

@@ -1,10 +1,37 @@
-import { Rule, SchematicContext, Tree } from '@angular-devkit/schematics';
-import { NodePackageInstallTask } from '@angular-devkit/schematics/tasks';
-
-// Just return the tree
-export function ngAdd(): Rule {
-  return (tree: Tree, context: SchematicContext) => {
-    context.addTask(new NodePackageInstallTask());
-    return tree;
+import { chain } from '@angular-devkit/schematics';
+
+import { Schema } from './schema';
+import { addDependencies, addGrapesJsCssToTarget } from './utility';
+
+export const ngAdd =
+  (options: Schema) => async () => {
+
+    const baseGrapesjsPath = 'node_modules/grapesjs/dist';
+    const baseGrapesjsWebpagePath = 'node_modules/grapesjs-preset-webpage/dist';
+    const baseGrapesjsNewsletterPath = 'node_modules/grapesjs-preset-newsletter/dist';
+
+    const grapesCssAssetPaths = [`${baseGrapesjsPath}/grapes.min.css`];
+    const grapesJsAssetPaths = [`${baseGrapesjsPath}/grapes.min.js`];
+
+    if (options.editorType === 'webpageEditor') {
+
+      grapesCssAssetPaths.push(
+        `${baseGrapesjsWebpagePath}/grapesjs-preset-newsletter.css`
+      );
+      grapesJsAssetPaths.push(
+        `${baseGrapesjsWebpagePath}/grapesjs-preset-newsletter.min.js`
+      );
+    } else {
+      grapesCssAssetPaths.push(
+        `${baseGrapesjsNewsletterPath}/grapesjs-preset-webpage.min.css`
+      );
+      grapesJsAssetPaths.push(
+        `${baseGrapesjsNewsletterPath}/grapesjs-preset-webpage.min.js`
+      );
+    }
+    return chain([
+      addGrapesJsCssToTarget(options.project, grapesCssAssetPaths, 'styles'),
+      addGrapesJsCssToTarget(options.project, grapesJsAssetPaths, 'scripts'),
+      addDependencies()
+    ]);
   };
-}

projects/ngx-grapesjs/schematics/ng-add/schema.json

@@ -0,0 +1,28 @@
+{
+  "$schema": "http://json-schema.org/schema",
+  "$id": "GrapesjsSchematicsNgAdd",
+  "title": "ng add schematic",
+  "type": "object",
+  "description": "Adds appropriate css and js files to angular.json file",
+  "properties": {
+    "project": {
+      "type": "string",
+      "description": "Name of the project.",
+      "$default": {
+        "$source": "projectName"
+      }
+    },
+    "editorType": {
+        "type": "string",
+        "default": "webpageEditor",
+        "x-prompt": {
+          "message": "What type of editor would you like to use?",
+          "type": "list",
+          "items": [
+            { "value": "webpageEditor", "label": "Webpage Editor" },
+            { "value": "newsletterEditor", "label": "Newsletter Editor" }
+          ]
+        }
+    }
+  }
+}

projects/ngx-grapesjs/schematics/ng-add/schema.ts

@@ -0,0 +1,4 @@
+export interface Schema {
+  project: string;
+  editorType: 'webpageEditor' | 'newsletterEditor';
+}