feat: add schematics and split editors to web and newletter

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/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,36 @@
-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 { addDependencies, addGrapesJsCssToTarget } from './utility';
+
+export const ngAdd =
+  (options: any) => async () => {
+
+    const grapesCssAssetPaths = [];
+    const grapesJsAssetPaths = [];
+
+    if (options.editorType === 'webpage editor') {
+
+      grapesCssAssetPaths.push(
+        'node_modules/grapesjs/dist/css/grapes.min.css',
+        'node_modules/grapesjs-preset-newsletter/dist/grapesjs-preset-newsletter.css'
+      );
+      grapesJsAssetPaths.push(
+        'node_modules/grapesjs/dist/grapes.min.js',
+        'node_modules/grapesjs-preset-newsletter/dist/grapesjs-preset-newsletter.min.js'
+      );
+    } else {
+      grapesCssAssetPaths.push(
+        'node_modules/grapesjs/dist/css/grapes.min.css',
+        'node_modules/grapesjs-preset-webpage/dist/grapesjs-preset-webpage.min.css'
+      );
+      grapesJsAssetPaths.push(
+        'node_modules/grapesjs/dist/grapes.min.js',
+        'node_modules/grapesjs-preset-webpage/dist/grapesjs-preset-webpage.min.js'
+      );
+    }
+    return chain([
+      addGrapesJsCssToTarget(options.project, 'build', grapesCssAssetPaths, 'styles'),
+      addGrapesJsCssToTarget(options.project, 'build', 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": "webpage editor",
+        "x-prompt": {
+          "message": "What type of editor would you like to use?",
+          "type": "list",
+          "items": [
+            { "value": "webpage editor",       "label": "Webpage Editor" },
+            { "value": "newsletter editor",  "label": "Newsletter Editor" }
+          ]
+        }
+    }
+  }
+}

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

@@ -0,0 +1,63 @@
+import { JsonValue } from '@angular-devkit/core';
+import { ProjectDefinition } from '@angular-devkit/core/src/workspace';
+import { SchematicsException, Rule, Tree, SchematicContext } from '@angular-devkit/schematics';
+import { NodePackageInstallTask } from '@angular-devkit/schematics/tasks';
+import { updateWorkspace } from '@schematics/angular/utility/workspace';
+
+export function getProjectTargetOptions(
+  project: ProjectDefinition,
+  buildTarget: string
+): Record<string, JsonValue | undefined> {
+  const options = project.targets?.get(buildTarget)?.options;
+
+  if (!options) {
+    throw new SchematicsException(
+      `Cannot determine project target configuration for: ${buildTarget}.`
+    );
+  }
+
+  return options;
+}
+
+export function addGrapesJsCssToTarget(
+  projectName: string,
+  targetName: 'test' | 'build',
+  assetPaths: string [],
+  targetAsset: 'styles' | 'scripts'
+) {
+  return updateWorkspace(workspace => {
+
+    const project = workspace.projects.get(projectName);
+
+    if (!projectName && typeof workspace.extensions['defaultProject'] === 'string') {
+      projectName = workspace.extensions['defaultProject'];
+    }
+
+    if (!project) {
+      return;
+    }
+
+    const targetOptions = getProjectTargetOptions(project, targetName);
+    const formattedExistingAssets = targetOptions[targetAsset] as (string | {input: string})[];
+
+    if (!formattedExistingAssets) {
+      targetOptions[targetAsset] = assetPaths;
+    } else {
+      const existingStyles = formattedExistingAssets.map(s => (typeof s === 'string' ? s : s.input));
+
+      assetPaths.forEach(assetPath => {
+        if (!existingStyles.includes(assetPath)) {
+          formattedExistingAssets.push(assetPath);
+        }
+      });
+
+    }
+  });
+}
+
+export function addDependencies(): Rule {
+  return (tree: Tree, context: SchematicContext) => {
+    context.addTask(new NodePackageInstallTask());
+    return tree;
+  };
+}

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

@@ -0,0 +1,12 @@
+export interface Editor {
+}
+
+export interface Config {
+  container: string;
+  plugins: string[];
+  components: string;
+  pluginsOpts: Record<string, any>;
+  storageManager: {
+    id: string
+  };
+}