@tmdjr/ngx-editor-js2 20.0.14 → 20.1.1

package/README.md

@@ -6,7 +6,7 @@ DEMO: [https://ba5ik7.github.io/ngx-editorjs2](https://ba5ik7.github.io/ngx-edit
 Ngx-EditorJs2 is an Angular-based, highly extensible block-style editor inspired by Editor.js. It allows users to create and manage rich text content using a variety of customizable blocks while leveraging Angular's reactive capabilities.
 
 ### Supports
-- Angular 19+
+- Angular 20+
 - For legacy Angular support, use [ngx-editorjs](https://github.com/Ba5ik7/ngx-editorjs)
 
 ## Features
@@ -23,6 +23,17 @@ To install Ngx-EditorJs2, run:
 npm install @tmdjr/ngx-editor-js2
 ```
 
+### Adding via Angular CLI (Recommended)
+
+To quickly set up Ngx-EditorJs2 with optional blocks, use Angular's `ng add` command:
+
+```sh
+ng add @tmdjr/ngx-editor-js2
+```
+
+This command will prompt you to select optional blocks and will handle the installation, configuration updates to `angular.json`, global styles, and your application's configuration (`app.config.ts`).
+
+
 ## Usage
 Import the Component into your Angular Standalone Component:
 
@@ -43,34 +54,6 @@ import { NgxEditorJs2Component } from '@tmdjr/ngx-editor-js2';
 ```
 - Implementation found in the [Demo Src](https://github.com/Ba5ik7/ngx-editor-js2-blocks/blob/main/projects/demo/src/app/app.component.ts)
 
-Css is required for the editor to function properly. Add the following to your global styles:
-
-```css
-// ! I Need to fix this!!
-// The consumer should not have to incude this in their styles.scss
-.cdk-drag-preview {
-  color: var(--mat-sys-on-secondary-container);
-  background-color: var(--mat-sys-secondary-container);
-  border-radius: 8px;
-  box-sizing: border-box;
-  overflow: visible;
-  box-shadow: var(--mat-sys-level4);
-
-  & *:not(toolbar) {
-    padding: 0 !important;
-    margin: 0 !important;
-  }
-}
-
-.cdk-drag-placeholder {
-  opacity: 0;
-}
-
-.cdk-drag-animating {
-  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
-}
-```
-
 
 ## API
 ### **Inputs**
@@ -155,7 +138,43 @@ Embed syntax-highlighted code snippets using CodeMirror.
 
 ---
 
-For more details and documentation, visit the official repository.
+### 🌐 MFE Loader Block
+Dynamically load and embed micro-frontends using Module Federation.
+
+- **Component:** `NgxEditorJs2MfeLoaderComponent`
+- **Install:**
+  ```sh
+  npm install @tmdjr/ngx-editor-js2-mfe-loader
+  ```
+- **Package:** [@tmdjr/ngx-editor-js2-mfe-loader](https://www.npmjs.com/package/@tmdjr/ngx-editor-js2-mfe-loader)
+
+---
+
+### 🧩 MermaidJS Block
+Embed interactive Mermaid diagrams for flowcharts, graphs, and more.
+
+- **Component:** `NgxEditorJs2MermaidjsComponent`
+- **Install:**
+  ```sh
+  npm install @tmdjr/ngx-editor-js2-mermaidjs
+  ```
+- **Package:** [@tmdjr/ngx-editor-js2-mermaidjs](https://www.npmjs.com/package/@tmdjr/ngx-editor-js2-mermaidjs)
+
+---
+
+### 🧐 Pop Quiz Block
+Create engaging quizzes within your content for interactive learning.
+
+- **Component:** `NgxEditorJs2PopQuizComponent`
+- **Install:**
+  ```sh
+  npm install @tmdjr/ngx-editor-js2-pop-quiz
+  ```
+- **Package:** [@tmdjr/ngx-editor-js2-pop-quiz](https://www.npmjs.com/package/@tmdjr/ngx-editor-js2-pop-quiz)
+
+---
+
+For more details and documentation, visit the [official repository](https://github.com/Ba5ik7/ngx-editor-js2-blocks).
 
 
 

package/package.json

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

package/schematics/ng-add/files/demo/services/ngx-editor-js2.ts.template

@@ -4,78 +4,188 @@ import { BehaviorSubject, lastValueFrom, Observable, tap } from 'rxjs';
 
 export const TEST_DATA: NgxEditorJsBlock[] = [
   {
-    blockId: 'n177d7',
+    blockId: 'iovlbzgosf',
     sortIndex: 0,
-    componentInstanceName: 'NgxEditorJs2BlockquotesComponent',
-    savedAction: 'display-large',
-    dataClean:
-      '`Design is not just what it looks like and feels like. Design is how it works.',
+    componentInstanceName: 'HeaderBlockComponent',
+    savedAction: 'h1',
+    dataClean: '🚀 Ready to Explore?',
   },
   {
-    blockId: 'n177dsd',
+    blockId: '6ldk3i',
     sortIndex: 1,
-    componentInstanceName: 'NgxEditorJs2ImageComponent',
-    savedAction: 'stretch',
+    componentInstanceName: 'ParagraphBlockComponent',
+    savedAction: 'large',
     dataClean:
-      '{"url":"https://res.cloudinary.com/dowdpiikk/image/upload/w_650,q_auto:best,f_auto/v1709445782/lnyst5aqppuin8wt73ci.webp","title":"test"}',
+      'This demo showcases the core concept of Ngx-EditorJs2 — a flexible, block-based content editor built with Angular. Each section of content is a self-contained block that can be rearranged via drag and drop, making it easy to structure and reorganize complex content visually.<div><br></div><div>Blocks aren’t just static — they can be configured through block-specific settings. For example, the Header block allows you to choose between multiple heading levels (H1–H6), and the Image block supports captions and alignment settings.</div><div><br></div><div>In addition, when selecting text within blocks that support inline formatting, a contextual inline toolbar appears. This toolbar enables quick formatting actions such as <b>bold</b>, <i>italic</i>, and text alignment (left, center, right) — allowing for a more expressive and intuitive editing experience.</div><div><br></div><div>Use this page to explore how each block behaves, how they can be customized, and how the editor adapts to your content needs in a modular and scalable way.</div>',
   },
   {
-    blockId: 'iovlbzgosf',
+    blockId: 'pkm1k',
     sortIndex: 2,
     componentInstanceName: 'HeaderBlockComponent',
-    savedAction: 'h1',
-    dataClean: 'Prerequisites',
+    savedAction: 'h3',
+    dataClean: '✍️ Paragraph + Header',
   },
   {
-    blockId: '8u3uiij5vyj',
+    blockId: 'wpg67v',
     sortIndex: 3,
     componentInstanceName: 'ParagraphBlockComponent',
     savedAction: 'large',
     dataClean:
-      '<ul><li><a href="https://www.typescriptlang.org/">TypeScript</a> and HTML5 programming</li><li>Angular app-design fundamentals, as described in <a href="https://angular.io/guide/architecture">Angular Concepts</a><br></li><li>The basics of <a href="https://angular.io/guide/architecture-components#template-syntax">Angular template syntax</a><br></li></ul>',
+      'The bread and butter of any editor. Use paragraphs for flowing content, and headers to create structure and hierarchy. <b>Clear</b>. <i>Clean</i>. <u>Essential</u>.',
   },
   {
-    blockId: 'bu23hwyltss',
+    blockId: '8u3uiij5vyj',
     sortIndex: 4,
     componentInstanceName: 'ParagraphBlockComponent',
     savedAction: 'large',
     dataClean:
-      'Evaluation of a template expression should have no visible side effects. Use the syntax for template expressions to help avoid side effects. In general, the correct syntax prevents you from assigning a value to anything in a property binding expression. The syntax also prevents you from using increment and decrement operators.',
+      '<ul><li><a href="https://www.typescriptlang.org/">TypeScript</a> and HTML5 programming</li><li>Angular app-design fundamentals, as described in <a href="https://angular.io/guide/architecture">Angular Concepts</a><br></li><li>The basics of <a href="https://angular.io/guide/architecture-components#template-syntax">Angular template syntax</a><br></li></ul>',
   },
   {
-    blockId: 'uapf2',
+    blockId: '2rdtwb',
     sortIndex: 5,
-    componentInstanceName: 'NgxEditorJs2MermaidjsComponent',
-    savedAction: 'center',
-    dataClean:
-      'flowchart TD\n    A[Christmas] -->|Get money| B(Go shopping)\n    B --> C{Let me think}\n    C -->|One| D[Laptop]\n    C -->|Two| E[Hello World iPhone]\n    C -->|Three| F[fa:fa-car Car]',
+    componentInstanceName: 'ParagraphBlockComponent',
+    savedAction: 'medium',
+    dataClean: '',
   },
   {
-    blockId: 'bu23hwyltsww',
+    blockId: '8w37us',
     sortIndex: 6,
+    componentInstanceName: 'HeaderBlockComponent',
+    savedAction: 'h3',
+    dataClean: '💡 Quote',
+  },
+  {
+    blockId: '31tbry',
+    sortIndex: 7,
     componentInstanceName: 'ParagraphBlockComponent',
-    savedAction: 'small',
+    savedAction: 'large',
     dataClean:
-      'Material Design uses color to create accessible, personal color schemes that communicate your products hierarchy, state, and brand. See Material Designs Color System page to learn more about its use and purpose.',
+      'Craft your favorite inspiration, callouts, or even markdown-style blockquotes using the Quote block.',
+  },
+  {
+    blockId: 'n177d7',
+    sortIndex: 8,
+    componentInstanceName: 'NgxEditorJs2BlockquotesComponent',
+    savedAction: 'display-large',
+    dataClean:
+      '“A quote block is like a spotlight — simple, elegant, and perfect for making a point.”',
+  },
+  {
+    blockId: 'dq5uat',
+    sortIndex: 9,
+    componentInstanceName: 'ParagraphBlockComponent',
+    savedAction: 'medium',
+    dataClean: '',
+  },
+  {
+    blockId: 'mq9i9m',
+    sortIndex: 10,
+    componentInstanceName: 'HeaderBlockComponent',
+    savedAction: 'h3',
+    dataClean: '📷 Image Block',
+  },
+  {
+    blockId: '4xkw3s',
+    sortIndex: 11,
+    componentInstanceName: 'ParagraphBlockComponent',
+    savedAction: 'large',
+    dataClean:
+      'A picture says a thousand words. The Image block supports captions and even alignment options to make your visuals shine.',
+  },
+  {
+    blockId: 'n177dsd',
+    sortIndex: 12,
+    componentInstanceName: 'NgxEditorJs2ImageComponent',
+    savedAction: 'stretch',
+    dataClean:
+      '{"url":"https://res.cloudinary.com/dowdpiikk/image/upload/w_650,q_auto:best,f_auto/v1709445782/lnyst5aqppuin8wt73ci.webp","title":"test"}',
+  },
+  {
+    blockId: 'gt9e9s',
+    sortIndex: 13,
+    componentInstanceName: 'ParagraphBlockComponent',
+    savedAction: 'medium',
+    dataClean: '',
+  },
+  {
+    blockId: 'b3t74',
+    sortIndex: 14,
+    componentInstanceName: 'HeaderBlockComponent',
+    savedAction: 'h3',
+    dataClean: '🎨 CodeMirror Block',
+  },
+  {
+    blockId: '9qls1d',
+    sortIndex: 15,
+    componentInstanceName: 'ParagraphBlockComponent',
+    savedAction: 'large',
+    dataClean:
+      'Embed rich, theme-able code editors right inside your documents. Great for live code samples or collaborative coding.',
   },
   {
     blockId: 'asdfasdf',
-    sortIndex: 7,
+    sortIndex: 16,
     componentInstanceName: 'NgxEditorJs2CodemirrorComponent',
     savedAction: 'text/typescript',
     dataClean:
       "export class SimpleFormGroup {\n  form = new FormGroup({\n    first: new FormControl('Nancy', Validators.minLength(2)),\n    last: new FormControl('Drew'),\n  });\n\n  get first(): any {\n    return this.form.get('first');\n  }\n\n  onSubmit(): void {\n    console.log(this.form.value); // {first: 'Nancy', last: 'Drew'}\n  }\n\n  setValue() {\n    this.form.setValue({first: 'Carson', last: 'Drew'});\n  }\n}",
   },
   {
-    blockId: 'l13u3k',
-    sortIndex: 8,
+    blockId: 'hduds',
+    sortIndex: 17,
+    componentInstanceName: 'ParagraphBlockComponent',
+    savedAction: 'medium',
+    dataClean: '',
+  },
+  {
+    blockId: '8npajb',
+    sortIndex: 18,
     componentInstanceName: 'HeaderBlockComponent',
-    savedAction: 'h1',
-    dataClean: 'New way of learning...',
+    savedAction: 'h3',
+    dataClean: '🔥 Mermaid.js Block',
+  },
+  {
+    blockId: 'su45ai',
+    sortIndex: 19,
+    componentInstanceName: 'ParagraphBlockComponent',
+    savedAction: 'large',
+    dataClean:
+      'Need to include a flowchart, sequence diagram, or Gantt chart? The Mermaid.js block brings technical diagrams to life using simple syntax.',
+  },
+  {
+    blockId: 'uapf2',
+    sortIndex: 20,
+    componentInstanceName: 'NgxEditorJs2MermaidjsComponent',
+    savedAction: 'center',
+    dataClean:
+      'flowchart TD\n    A[Christmas] -->|Get money| B(Go shopping)\n    B --> C{Let me think}\n    C -->|One| D[Laptop]\n    C -->|Two| E[Hello World iPhone]\n    C -->|Three| F[fa:fa-car Car]',
+  },
+  {
+    blockId: 'y3r4xs',
+    sortIndex: 21,
+    componentInstanceName: 'ParagraphBlockComponent',
+    savedAction: 'medium',
+    dataClean: '<div><br></div>',
+  },
+  {
+    blockId: 'q5m0u',
+    sortIndex: 22,
+    componentInstanceName: 'HeaderBlockComponent',
+    savedAction: 'h3',
+    dataClean: '🧠 Pop Quiz Block',
+  },
+  {
+    blockId: 'ubo23s',
+    sortIndex: 23,
+    componentInstanceName: 'ParagraphBlockComponent',
+    savedAction: 'large',
+    dataClean:
+      'Test your knowledge or embed interactive quiz questions inline with your content. Great for workshops, tutorials, or even just friendly challenges.',
   },
   {
     blockId: '9bqhk',
-    sortIndex: 9,
+    sortIndex: 24,
     componentInstanceName: 'NgxEditorJs2PopQuizComponent',
     savedAction: 'display-large',
     dataClean: