@tmdjr/ngx-editor-js2 20.1.0 → 20.1.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +50 -30
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,12 +1,13 @@
|
|
|
1
1
|
# Ngx-EditorJs2
|
|
2
2
|
|
|
3
|
+
DEMO - With blocks: [https://ba5ik7.github.io/ngx-editor-js2-blocks](https://ba5ik7.github.io/ngx-editor-js2-blocks)
|
|
3
4
|
DEMO: [https://ba5ik7.github.io/ngx-editorjs2](https://ba5ik7.github.io/ngx-editorjs2)
|
|
4
5
|
|
|
5
6
|
## Overview
|
|
6
7
|
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.
|
|
7
8
|
|
|
8
9
|
### Supports
|
|
9
|
-
- Angular
|
|
10
|
+
- Angular 20+
|
|
10
11
|
- For legacy Angular support, use [ngx-editorjs](https://github.com/Ba5ik7/ngx-editorjs)
|
|
11
12
|
|
|
12
13
|
## Features
|
|
@@ -23,6 +24,17 @@ To install Ngx-EditorJs2, run:
|
|
|
23
24
|
npm install @tmdjr/ngx-editor-js2
|
|
24
25
|
```
|
|
25
26
|
|
|
27
|
+
### Adding via Angular CLI (Recommended)
|
|
28
|
+
|
|
29
|
+
To quickly set up Ngx-EditorJs2 with optional blocks, use Angular's `ng add` command:
|
|
30
|
+
|
|
31
|
+
```sh
|
|
32
|
+
ng add @tmdjr/ngx-editor-js2
|
|
33
|
+
```
|
|
34
|
+
|
|
35
|
+
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`).
|
|
36
|
+
|
|
37
|
+
|
|
26
38
|
## Usage
|
|
27
39
|
Import the Component into your Angular Standalone Component:
|
|
28
40
|
|
|
@@ -43,34 +55,6 @@ import { NgxEditorJs2Component } from '@tmdjr/ngx-editor-js2';
|
|
|
43
55
|
```
|
|
44
56
|
- Implementation found in the [Demo Src](https://github.com/Ba5ik7/ngx-editor-js2-blocks/blob/main/projects/demo/src/app/app.component.ts)
|
|
45
57
|
|
|
46
|
-
Css is required for the editor to function properly. Add the following to your global styles:
|
|
47
|
-
|
|
48
|
-
```css
|
|
49
|
-
// ! I Need to fix this!!
|
|
50
|
-
// The consumer should not have to incude this in their styles.scss
|
|
51
|
-
.cdk-drag-preview {
|
|
52
|
-
color: var(--mat-sys-on-secondary-container);
|
|
53
|
-
background-color: var(--mat-sys-secondary-container);
|
|
54
|
-
border-radius: 8px;
|
|
55
|
-
box-sizing: border-box;
|
|
56
|
-
overflow: visible;
|
|
57
|
-
box-shadow: var(--mat-sys-level4);
|
|
58
|
-
|
|
59
|
-
& *:not(toolbar) {
|
|
60
|
-
padding: 0 !important;
|
|
61
|
-
margin: 0 !important;
|
|
62
|
-
}
|
|
63
|
-
}
|
|
64
|
-
|
|
65
|
-
.cdk-drag-placeholder {
|
|
66
|
-
opacity: 0;
|
|
67
|
-
}
|
|
68
|
-
|
|
69
|
-
.cdk-drag-animating {
|
|
70
|
-
transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
|
|
71
|
-
}
|
|
72
|
-
```
|
|
73
|
-
|
|
74
58
|
|
|
75
59
|
## API
|
|
76
60
|
### **Inputs**
|
|
@@ -155,7 +139,43 @@ Embed syntax-highlighted code snippets using CodeMirror.
|
|
|
155
139
|
|
|
156
140
|
---
|
|
157
141
|
|
|
158
|
-
|
|
142
|
+
### 🌐 MFE Loader Block
|
|
143
|
+
Dynamically load and embed micro-frontends using Module Federation.
|
|
144
|
+
|
|
145
|
+
- **Component:** `NgxEditorJs2MfeLoaderComponent`
|
|
146
|
+
- **Install:**
|
|
147
|
+
```sh
|
|
148
|
+
npm install @tmdjr/ngx-editor-js2-mfe-loader
|
|
149
|
+
```
|
|
150
|
+
- **Package:** [@tmdjr/ngx-editor-js2-mfe-loader](https://www.npmjs.com/package/@tmdjr/ngx-editor-js2-mfe-loader)
|
|
151
|
+
|
|
152
|
+
---
|
|
153
|
+
|
|
154
|
+
### 🧩 MermaidJS Block
|
|
155
|
+
Embed interactive Mermaid diagrams for flowcharts, graphs, and more.
|
|
156
|
+
|
|
157
|
+
- **Component:** `NgxEditorJs2MermaidjsComponent`
|
|
158
|
+
- **Install:**
|
|
159
|
+
```sh
|
|
160
|
+
npm install @tmdjr/ngx-editor-js2-mermaidjs
|
|
161
|
+
```
|
|
162
|
+
- **Package:** [@tmdjr/ngx-editor-js2-mermaidjs](https://www.npmjs.com/package/@tmdjr/ngx-editor-js2-mermaidjs)
|
|
163
|
+
|
|
164
|
+
---
|
|
165
|
+
|
|
166
|
+
### 🧐 Pop Quiz Block
|
|
167
|
+
Create engaging quizzes within your content for interactive learning.
|
|
168
|
+
|
|
169
|
+
- **Component:** `NgxEditorJs2PopQuizComponent`
|
|
170
|
+
- **Install:**
|
|
171
|
+
```sh
|
|
172
|
+
npm install @tmdjr/ngx-editor-js2-pop-quiz
|
|
173
|
+
```
|
|
174
|
+
- **Package:** [@tmdjr/ngx-editor-js2-pop-quiz](https://www.npmjs.com/package/@tmdjr/ngx-editor-js2-pop-quiz)
|
|
175
|
+
|
|
176
|
+
---
|
|
177
|
+
|
|
178
|
+
For more details and documentation, visit the [official repository](https://github.com/Ba5ik7/ngx-editor-js2-blocks).
|
|
159
179
|
|
|
160
180
|
|
|
161
181
|
|