@tmdjr/ngx-editor-js2 21.0.5 → 21.0.7

package/README.md

@@ -5,13 +5,16 @@ DEMO - With blocks: [https://ba5ik7.github.io/ngx-editor-js2-blocks](https://ba5
 DEMO: [https://ba5ik7.github.io/ngx-editorjs2](https://ba5ik7.github.io/ngx-editorjs2)
 
 ## Overview
+
 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 20+
 - For legacy Angular support, use [ngx-editorjs](https://github.com/Ba5ik7/ngx-editorjs)
 
 ## Features
+
 - 📝 **Modular Block System** – Supports paragraph, header, and other content blocks.
 - 🔄 **Reactive Data Streams** – Uses RxJS for efficient state management.
 - 🎛 **Drag & Drop** – Easily reorder blocks with smooth animations.
@@ -19,6 +22,7 @@ Ngx-EditorJs2 is an Angular-based, highly extensible block-style editor inspired
 - 🔧 **Customizable** – Easily extendable with new block types and actions.
 
 ## Installation
+
 To install Ngx-EditorJs2, run:
 
 ```sh
@@ -35,8 +39,8 @@ 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:
 
 ```ts
@@ -54,31 +58,36 @@ 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)
 
+- Implementation found in the [Demo Src](https://github.com/Ba5ik7/ngx-editor-js2-blocks/blob/main/projects/demo/src/app/app.component.ts)
 
 ## API
+
 ### **Inputs**
-| Property      | Type                        | Description |
-|--------------|----------------------------|-------------|
-| `blocks`     | `NgxEditorJsBlock[]` \| `null`      | List of blocks to initialize the editor with. |
-| `requestBlocks` | `any` | When the value changes `blocksRequested` will emit the current state of the blocks. |
+
+| Property        | Type                           | Description                                                                         |
+| --------------- | ------------------------------ | ----------------------------------------------------------------------------------- |
+| `blocks`        | `NgxEditorJsBlock[]` \| `null` | List of blocks to initialize the editor with.                                       |
+| `requestBlocks` | `any`                          | When the value changes `blocksRequested` will emit the current state of the blocks. |
 
 ### **Outputs**
-| Property      | Type                        | Description |
-|--------------|----------------------------|-------------|
-| `blocksRequested` | `NgxEditorJsBlock[]` | Emits the current state of blocks in the Form Group. Trigger when the `requestBlocks` value changes
+
+| Property          | Type                 | Description                                                                                         |
+| ----------------- | -------------------- | --------------------------------------------------------------------------------------------------- |
+| `blocksRequested` | `NgxEditorJsBlock[]` | Emits the current state of blocks in the Form Group. Trigger when the `requestBlocks` value changes |
 
 ## Block Components
+
 Ngx-EditorJs2 comes with built-in block components:
+
 - **ParagraphBlockComponent** – Standard text block.
 - **HeaderBlockComponent** – Allows different heading levels.
 
 You can also add custom blocks by implementing the `NGX_EDITORJS_OPTIONS` provider:
 
 ```ts
-import { NGX_EDITORJS_OPTIONS } from '@tmdjr/ngx-editor-js2';
-import { NgxEditorJs2ImageComponent } from '@tmdjr/ngx-editor-js2-image';
+import { NGX_EDITORJS_OPTIONS } from "@tmdjr/ngx-editor-js2";
+import { NgxEditorJs2ImageComponent } from "@tmdjr/ngx-editor-js2-image";
 
 export const appConfig: ApplicationConfig = {
   providers: [
@@ -88,10 +97,10 @@ export const appConfig: ApplicationConfig = {
         consumerSupportedBlocks: [
           {
             // Customize the block name.
-            name: 'Image',
+            name: "Image",
             component: NgxEditorJs2ImageComponent,
             // Must match the component name.
-            componentInstanceName: 'NgxEditorJs2ImageComponent',
+            componentInstanceName: "NgxEditorJs2ImageComponent",
           },
         ],
       },
@@ -105,6 +114,7 @@ export const appConfig: ApplicationConfig = {
 Ngx-EditorJs2 allows you to extend its functionality with custom blocks. Below are some additional components that can be installed separately to enhance the editor with images, blockquotes, and code blocks.
 
 ### 🖼️ Image Block
+
 Easily add and manage images within the editor.
 
 - **Component:** `NgxEditorJs2ImageComponent`
@@ -117,6 +127,7 @@ Easily add and manage images within the editor.
 ---
 
 ### 📝 Blockquotes Block
+
 Insert styled blockquotes to emphasize key points in the content.
 
 - **Component:** `NgxEditorJs2BlockquotesComponent`
@@ -129,6 +140,7 @@ Insert styled blockquotes to emphasize key points in the content.
 ---
 
 ### 💻 Code Block
+
 Embed syntax-highlighted code snippets using CodeMirror.
 
 - **Component:** `NgxEditorJs2CodemirrorComponent`
@@ -141,6 +153,7 @@ Embed syntax-highlighted code snippets using CodeMirror.
 ---
 
 ### 🌐 MFE Loader Block
+
 Dynamically load and embed micro-frontends using Module Federation.
 
 - **Component:** `NgxEditorJs2MfeLoaderComponent`
@@ -153,6 +166,7 @@ Dynamically load and embed micro-frontends using Module Federation.
 ---
 
 ### 🧩 MermaidJS Block
+
 Embed interactive Mermaid diagrams for flowcharts, graphs, and more.
 
 - **Component:** `NgxEditorJs2MermaidjsComponent`
@@ -165,6 +179,7 @@ Embed interactive Mermaid diagrams for flowcharts, graphs, and more.
 ---
 
 ### 🧐 Pop Quiz Block
+
 Create engaging quizzes within your content for interactive learning.
 
 - **Component:** `NgxEditorJs2PopQuizComponent`
@@ -178,9 +193,8 @@ Create engaging quizzes within your content for interactive learning.
 
 For more details and documentation, visit the [official repository](https://github.com/Ba5ik7/ngx-editor-js2-blocks).
 
-
-
 ## Development
+
 To contribute, clone the repository and install dependencies:
 
 ```sh
@@ -203,11 +217,12 @@ npm run watch-ngx-editor-js2 // Important to run 1st
 npm run start-demo
 ```
 
-*Custom Block development should be done in the [Ngx-Editor-Js2-Blocks](https://github.com/Ba5ik7/ngx-editor-js2-blocks) MonoRepo.*
-
+_Custom Block development should be done in the [Ngx-Editor-Js2-Blocks](https://github.com/Ba5ik7/ngx-editor-js2-blocks) MonoRepo._
 
 ## Architecture Overview
+
 Ngx-EditorJs2 is built on Angular's reactive architecture, using RxJS to manage state and data streams. The library is composed of several Services and Directives that handle different aspects of the editor:
+
 ```mermaid
 graph TD;
   NgxEditorJs2Component -->|Contains| EditorJsComponent;
@@ -224,29 +239,34 @@ graph TD;
 ```
 
 ## Services
-| Service                   | Purpose |
-|---------------------------|---------|
-| `NgxEditorJs2Service`     | Manages available block types and loaded blocks. |
-| `EditorJsService`         | Handles block rendering and form controls. |
-| `BlockMovementService`    | Manages drag-and-drop & reordering. |
-| `ToolbarInlineService`    | Manages inline text formatting. |
-| `ToolFabService`          | Provides contextual toolbars for block actions. |
+
+| Service                | Purpose                                          |
+| ---------------------- | ------------------------------------------------ |
+| `NgxEditorJs2Service`  | Manages available block types and loaded blocks. |
+| `EditorJsService`      | Handles block rendering and form controls.       |
+| `BlockMovementService` | Manages drag-and-drop & reordering.              |
+| `ToolbarInlineService` | Manages inline text formatting.                  |
+| `ToolFabService`       | Provides contextual toolbars for block actions.  |
 
 ## Creating a Custom Block Component
+
 Ngx-EditorJs2 follows a structured approach where each block component:
+
 - **Implements the `BlockComponent` interface** to ensure consistency.
 - **Uses `hostDirectives`** to inherit required behaviors such as drag-and-drop.
 - **Uses `host` CSS classes** to apply styling and animations.
 - **Uses a `formGroup`**, which integrates with the larger form structure that holds all blocks.
 
 ### **How Blocks Work in Ngx-EditorJs2**
+
 Each block in Ngx-EditorJs2 is part of a larger **`formGroup`**, allowing seamless state management across the entire editor. This design ensures that:
+
 - Each block maintains its own **FormControl**, enabling real-time data binding.
 - The **editor-level formGroup** acts as a centralized store, making it easier to retrieve or modify block data.
 - Blocks can **interact with services and directives**, enhancing their capabilities dynamically.
 
-*Custom Block development should be done in the [Ngx-Editor-Js2-Blocks](https://github.com/Ba5ik7/ngx-editor-js2-blocks) MonoRepo.*
+_Custom Block development should be done in the [Ngx-Editor-Js2-Blocks](https://github.com/Ba5ik7/ngx-editor-js2-blocks) MonoRepo._
 
 ## License
-MIT License © 2025 [Wesley DuSell](https://github.com/ba5ik7)
 
+MIT License © 2025 [Wesley DuSell](https://github.com/ba5ik7)