@tmdjr/ngx-editor-js2 20.0.3 → 20.0.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tmdjr/ngx-editor-js2",
-  "version": "20.0.3",
+  "version": "20.0.5",
   "schematics": "./schematics/collection.json",
   "peerDependencies": {
     "@angular/animations": "^20.0.4",

package/schematics/ng-add/index.d.ts

@@ -1,2 +1,2 @@
 import { Rule } from '@angular-devkit/schematics';
-export declare function ngAdd(): Rule;
+export declare function ngAdd(options: any): Rule;

package/schematics/ng-add/index.js

@@ -29,19 +29,28 @@ const optionalBlocks = {
         name: 'ngx-editor-js2-mermaidjs',
         package: '@tmdjr/ngx-editor-js2-mermaidjs',
         stylePath: 'dist/ngx-editor-js2-mermaidjs',
-        peers: ['mermaid', '@ctrl/ngx-codemirror', '@types/codemirror'],
+        peers: [
+            { package: 'mermaid' },
+            { package: '@ctrl/ngx-codemirror' },
+            { package: '@types/codemirror' },
+            { package: 'codemirror', version: '5.65.9' },
+        ],
     },
     codemirror: {
         name: 'ngx-editor-js2-codemirror',
         package: '@tmdjr/ngx-editor-js2-codemirror',
         stylePath: 'dist/ngx-editor-js2-codemirror',
-        peers: ['@ctrl/ngx-codemirror', '@types/codemirror'],
+        peers: [
+            { package: '@ctrl/ngx-codemirror' },
+            { package: '@types/codemirror' },
+            { package: 'codemirror', version: '5.65.9' },
+        ],
     },
     mfeLoader: {
         name: 'ngx-editor-js2-mfe-loader',
         package: '@tmdjr/ngx-editor-js2-mfe-loader',
         stylePath: 'dist/ngx-editor-js2-mfe-loader',
-        peers: ['@angular-architects/module-federation'],
+        peers: [{ package: '@angular-architects/module-federation' }],
     },
     blockquotes: {
         name: 'ngx-editor-js2-blockquotes',
@@ -50,22 +59,10 @@ const optionalBlocks = {
         peers: [],
     },
 };
-function ngAdd() {
+function ngAdd(options) {
     return (tree, context) => __awaiter(this, void 0, void 0, function* () {
-        var _a, _b;
-        const response = (_b = (yield ((_a = context.prompt) === null || _a === void 0 ? void 0 : _a.call(context, [
-            {
-                type: 'checkbox',
-                name: 'blocks',
-                message: 'Select optional Ngx-Editor-JS2 blocks to install:',
-                choices: Object.keys(optionalBlocks).map((block) => ({
-                    name: block,
-                    message: block,
-                    checked: false,
-                })),
-            },
-        ])))) !== null && _b !== void 0 ? _b : { blocks: [] };
-        response.blocks.forEach((block) => {
+        const blocks = options.blocks || [];
+        blocks.forEach((block) => {
             const { package: pkg, peers } = optionalBlocks[block];
             (0, dependencies_1.addPackageJsonDependency)(tree, {
                 type: dependencies_1.NodeDependencyType.Default,
@@ -73,56 +70,28 @@ function ngAdd() {
                 version: 'latest',
             });
             peers.forEach((peer) => {
-                const type = peer.startsWith('@types/')
+                var _a;
+                const type = peer.package.startsWith('@types/')
                     ? dependencies_1.NodeDependencyType.Dev
                     : dependencies_1.NodeDependencyType.Default;
                 (0, dependencies_1.addPackageJsonDependency)(tree, {
                     type,
-                    name: peer,
-                    version: 'latest',
+                    name: peer.package,
+                    version: (_a = peer.version) !== null && _a !== void 0 ? _a : 'latest',
                 });
             });
         });
         context.addTask(new tasks_1.NodePackageInstallTask());
-        const sourceRoot = yield getSourceRoot(tree, context);
-        updateStylesScss(tree, response.blocks, context, sourceRoot);
-        updateAppConfig(tree, response.blocks, context, sourceRoot);
-        addCodeMirrorSetup(tree, response.blocks, context, sourceRoot);
+        const sourceRoot = options.project
+            ? getProjectSourceRoot(tree, options.project)
+            : 'src';
+        updateStylesScss(tree, blocks, context, sourceRoot);
+        updateAppConfig(tree, blocks, context, sourceRoot);
+        addCodeMirrorSetup(tree, blocks, context, sourceRoot);
         context.logger.info('✅ Installation setup complete.');
         return tree;
     });
 }
-function getSourceRoot(tree, context) {
-    return __awaiter(this, void 0, void 0, function* () {
-        var _a, _b;
-        const buffer = tree.read('/angular.json');
-        if (!buffer) {
-            context.logger.error('❌ angular.json not found.');
-            throw new Error('angular.json not found... get good');
-        }
-        const angularJson = JSON.parse(buffer.toString());
-        // We need to get every project in the workspace
-        const projects = Object.keys(angularJson.projects);
-        // We will prompt the user to select a project
-        const response = (_b = (yield ((_a = context.prompt) === null || _a === void 0 ? void 0 : _a.call(context, [
-            {
-                type: 'list',
-                name: 'project',
-                message: 'Select the Angular project to update:',
-                choices: projects.map((project) => ({
-                    name: project,
-                    message: project,
-                })),
-            },
-        ])))) !== null && _b !== void 0 ? _b : { project: projects[0] }; // fallback to first project
-        const project = response.project;
-        if (!project || !angularJson.projects[project]) {
-            context.logger.error(`❌ Project ${project} not found in angular.json.`);
-            throw new Error(`Project ${project} not found in angular.json`);
-        }
-        return angularJson.projects[project].sourceRoot;
-    });
-}
 function updateStylesScss(tree, blocks, context, sourceRoot) {
     const stylePath = `${sourceRoot}/styles.scss`;
     if (!tree.exists(stylePath)) {
@@ -183,7 +152,7 @@ function updateAppConfig(tree, blocks, context, sourceRoot) {
     context.logger.info('🚀 app.config.ts updated successfully.');
 }
 function addCodeMirrorSetup(tree, selectedBlocks, context, sourceRoot) {
-    const needsCodeMirror = selectedBlocks.some((block) => ['ngx-editor-js2-codemirror', 'ngx-editor-js2-mermaidjs'].includes(block));
+    const needsCodeMirror = selectedBlocks.some((block) => ['codemirror', 'mermaidjs'].includes(block));
     if (!needsCodeMirror) {
         context.logger.info('CodeMirror dependencies not selected; skipping setup.');
         return;
@@ -223,53 +192,13 @@ import 'codemirror/mode/xml/xml';
         context.logger.warn(`styles.scss not found at path: ${stylesPath}`);
     }
 }
-// async function updateAngularJson(
-//   tree: Tree,
-//   blocks: string[],
-//   context: SchematicContext
-// ): Promise<string> {
-//   const angularJsonPath = '/angular.json';
-//   const buffer = tree.read(angularJsonPath);
-//   if (!buffer) {
-//     context.logger.error('❌ angular.json not found.');
-//     throw new Error('angular.json not found... get good');
-//   }
-//   const angularJson = JSON.parse(buffer.toString());
-//   // const project = angularJson.defaultProject;
-//   // We need to get every project in the workspace
-//   const projects = Object.keys(angularJson.projects);
-//   // We will prompt the user to select a project
-//   const response = await prompt<{ project: string }>({
-//     type: 'select',
-//     name: 'project',
-//     message: 'Select the Angular project to update:',
-//     choices: projects.map((project) => ({
-//       name: project,
-//       message: project,
-//     })),
-//   });
-//   const project = response.project;
-//   if (!project || !angularJson.projects[project]) {
-//     context.logger.error(`❌ Project ${project} not found in angular.json.`);
-//     throw new Error(`Project ${project} not found in angular.json`);
-//   }
-//   const includePaths =
-//     angularJson.projects[project].architect.build.options
-//       .stylePreprocessorOptions?.includePaths || [];
-//   includePaths.push('dist/ngx-editor-js2');
-//   blocks.forEach((block) => {
-//     const stylePath = optionalBlocks[block].stylePath;
-//     if (!includePaths.includes(stylePath)) {
-//       includePaths.push(stylePath);
-//     }
-//   });
-//   angularJson.projects[
-//     project
-//   ].architect.build.options.stylePreprocessorOptions = { includePaths };
-//   tree.overwrite(angularJsonPath, JSON.stringify(angularJson, null, 2));
-//   context.logger.info('🔧 angular.json updated successfully.');
-//   return (
-//     angularJson.projects[project].sourceRoot ||
-//     angularJson.projects[project].root
-//   );
-// }
+function getProjectSourceRoot(tree, projectName) {
+    const buffer = tree.read('/angular.json');
+    if (!buffer)
+        throw new Error('angular.json not found');
+    const workspace = JSON.parse(buffer.toString());
+    const project = workspace.projects[projectName];
+    if (!project)
+        throw new Error(`Project ${projectName} not found`);
+    return project.sourceRoot || 'src';
+}

package/schematics/ng-add/index.ts

@@ -7,7 +7,12 @@ import {
 
 const optionalBlocks: Record<
   string,
-  { name: string; package: string; stylePath: string; peers: string[] }
+  {
+    name: string;
+    package: string;
+    stylePath: string;
+    peers: { package: string; version?: string }[];
+  }
 > = {
   image: {
     name: 'ngx-editor-js2-image',
@@ -25,19 +30,28 @@ const optionalBlocks: Record<
     name: 'ngx-editor-js2-mermaidjs',
     package: '@tmdjr/ngx-editor-js2-mermaidjs',
     stylePath: 'dist/ngx-editor-js2-mermaidjs',
-    peers: ['mermaid', '@ctrl/ngx-codemirror', '@types/codemirror'],
+    peers: [
+      { package: 'mermaid' },
+      { package: '@ctrl/ngx-codemirror' },
+      { package: '@types/codemirror' },
+      { package: 'codemirror', version: '5.65.9' },
+    ],
   },
   codemirror: {
     name: 'ngx-editor-js2-codemirror',
     package: '@tmdjr/ngx-editor-js2-codemirror',
     stylePath: 'dist/ngx-editor-js2-codemirror',
-    peers: ['@ctrl/ngx-codemirror', '@types/codemirror'],
+    peers: [
+      { package: '@ctrl/ngx-codemirror' },
+      { package: '@types/codemirror' },
+      { package: 'codemirror', version: '5.65.9' },
+    ],
   },
   mfeLoader: {
     name: 'ngx-editor-js2-mfe-loader',
     package: '@tmdjr/ngx-editor-js2-mfe-loader',
     stylePath: 'dist/ngx-editor-js2-mfe-loader',
-    peers: ['@angular-architects/module-federation'],
+    peers: [{ package: '@angular-architects/module-federation' }],
   },
   blockquotes: {
     name: 'ngx-editor-js2-blockquotes',
@@ -47,22 +61,11 @@ const optionalBlocks: Record<
   },
 };
 
-export function ngAdd(): Rule {
+export function ngAdd(options: any): Rule {
   return async (tree: Tree, context: SchematicContext) => {
-    const response = (await context.prompt?.([
-      {
-        type: 'checkbox',
-        name: 'blocks',
-        message: 'Select optional Ngx-Editor-JS2 blocks to install:',
-        choices: Object.keys(optionalBlocks).map((block) => ({
-          name: block,
-          message: block,
-          checked: false,
-        })),
-      },
-    ])) ?? { blocks: [] };
-
-    response.blocks.forEach((block) => {
+    const blocks: string[] = options.blocks || [];
+
+    blocks.forEach((block) => {
       const { package: pkg, peers } = optionalBlocks[block];
       addPackageJsonDependency(tree, {
         type: NodeDependencyType.Default,
@@ -70,26 +73,26 @@ export function ngAdd(): Rule {
         version: 'latest',
       });
       peers.forEach((peer) => {
-        const type = peer.startsWith('@types/')
+        const type = peer.package.startsWith('@types/')
           ? NodeDependencyType.Dev
           : NodeDependencyType.Default;
         addPackageJsonDependency(tree, {
           type,
-          name: peer,
-          version: 'latest',
+          name: peer.package,
+          version: peer.version ?? 'latest',
         });
       });
     });
 
     context.addTask(new NodePackageInstallTask());
 
-    const sourceRoot = await getSourceRoot(tree, context);
-
-    updateStylesScss(tree, response.blocks, context, sourceRoot);
+    const sourceRoot = options.project
+      ? getProjectSourceRoot(tree, options.project)
+      : 'src';
 
-    updateAppConfig(tree, response.blocks, context, sourceRoot);
-
-    addCodeMirrorSetup(tree, response.blocks, context, sourceRoot);
+    updateStylesScss(tree, blocks, context, sourceRoot);
+    updateAppConfig(tree, blocks, context, sourceRoot);
+    addCodeMirrorSetup(tree, blocks, context, sourceRoot);
 
     context.logger.info('✅ Installation setup complete.');
 
@@ -97,44 +100,6 @@ export function ngAdd(): Rule {
   };
 }
 
-async function getSourceRoot(
-  tree: Tree,
-  context: SchematicContext
-): Promise<string> {
-  const buffer = tree.read('/angular.json');
-
-  if (!buffer) {
-    context.logger.error('❌ angular.json not found.');
-    throw new Error('angular.json not found... get good');
-  }
-
-  const angularJson = JSON.parse(buffer.toString());
-
-  // We need to get every project in the workspace
-  const projects = Object.keys(angularJson.projects);
-  // We will prompt the user to select a project
-  const response = (await context.prompt?.([
-    {
-      type: 'list',
-      name: 'project',
-      message: 'Select the Angular project to update:',
-      choices: projects.map((project) => ({
-        name: project,
-        message: project,
-      })),
-    },
-  ])) ?? { project: projects[0] }; // fallback to first project
-
-  const project = response.project;
-
-  if (!project || !angularJson.projects[project]) {
-    context.logger.error(`❌ Project ${project} not found in angular.json.`);
-    throw new Error(`Project ${project} not found in angular.json`);
-  }
-
-  return angularJson.projects[project].sourceRoot;
-}
-
 function updateStylesScss(
   tree: Tree,
   blocks: string[],
@@ -242,7 +207,7 @@ function addCodeMirrorSetup(
   sourceRoot: string
 ): void {
   const needsCodeMirror = selectedBlocks.some((block) =>
-    ['ngx-editor-js2-codemirror', 'ngx-editor-js2-mermaidjs'].includes(block)
+    ['codemirror', 'mermaidjs'].includes(block)
   );
 
   if (!needsCodeMirror) {
@@ -292,62 +257,11 @@ import 'codemirror/mode/xml/xml';
   }
 }
 
-// async function updateAngularJson(
-//   tree: Tree,
-//   blocks: string[],
-//   context: SchematicContext
-// ): Promise<string> {
-//   const angularJsonPath = '/angular.json';
-//   const buffer = tree.read(angularJsonPath);
-
-//   if (!buffer) {
-//     context.logger.error('❌ angular.json not found.');
-//     throw new Error('angular.json not found... get good');
-//   }
-
-//   const angularJson = JSON.parse(buffer.toString());
-
-//   // const project = angularJson.defaultProject;
-//   // We need to get every project in the workspace
-//   const projects = Object.keys(angularJson.projects);
-//   // We will prompt the user to select a project
-//   const response = await prompt<{ project: string }>({
-//     type: 'select',
-//     name: 'project',
-//     message: 'Select the Angular project to update:',
-//     choices: projects.map((project) => ({
-//       name: project,
-//       message: project,
-//     })),
-//   });
-//   const project = response.project;
-
-//   if (!project || !angularJson.projects[project]) {
-//     context.logger.error(`❌ Project ${project} not found in angular.json.`);
-//     throw new Error(`Project ${project} not found in angular.json`);
-//   }
-
-//   const includePaths =
-//     angularJson.projects[project].architect.build.options
-//       .stylePreprocessorOptions?.includePaths || [];
-
-//   includePaths.push('dist/ngx-editor-js2');
-//   blocks.forEach((block) => {
-//     const stylePath = optionalBlocks[block].stylePath;
-//     if (!includePaths.includes(stylePath)) {
-//       includePaths.push(stylePath);
-//     }
-//   });
-
-//   angularJson.projects[
-//     project
-//   ].architect.build.options.stylePreprocessorOptions = { includePaths };
-//   tree.overwrite(angularJsonPath, JSON.stringify(angularJson, null, 2));
-
-//   context.logger.info('🔧 angular.json updated successfully.');
-
-//   return (
-//     angularJson.projects[project].sourceRoot ||
-//     angularJson.projects[project].root
-//   );
-// }
+function getProjectSourceRoot(tree: Tree, projectName: string): string {
+  const buffer = tree.read('/angular.json');
+  if (!buffer) throw new Error('angular.json not found');
+  const workspace = JSON.parse(buffer.toString());
+  const project = workspace.projects[projectName];
+  if (!project) throw new Error(`Project ${projectName} not found`);
+  return project.sourceRoot || 'src';
+}

package/schematics/ng-add/schema.json

@@ -1,7 +1,30 @@
 {
-  "$schema": "http://json-schema.org/schema",
+  "$schema": "http://json-schema.org/draft-07/schema",
   "$id": "NgAdd",
   "title": "Ng Add Options",
   "type": "object",
-  "properties": {}
+  "properties": {
+    "blocks": {
+      "type": "array",
+      "description": "Optional Ngx-Editor-JS2 blocks to install",
+      "x-prompt": {
+        "message": "Select optional Ngx-Editor-JS2 blocks to install:",
+        "type": "list",
+        "multiselect": true,
+        "items": [
+          { "value": "image", "label": "Image" },
+          { "value": "popQuiz", "label": "Pop Quiz" },
+          { "value": "mermaidjs", "label": "MermaidJS" },
+          { "value": "codemirror", "label": "CodeMirror" },
+          { "value": "mfeLoader", "label": "MFE Loader" },
+          { "value": "blockquotes", "label": "Blockquotes" }
+        ]
+      }
+    },
+    "project": {
+      "type": "string",
+      "description": "The Angular project to update",
+      "x-prompt": "Which Angular project would you like to update?"
+    }
+  }
 }