ngx-lexical-editor 1.0.0
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 +64 -0
- package/fesm2022/ngx-lexical-editor.mjs +196 -0
- package/fesm2022/ngx-lexical-editor.mjs.map +1 -0
- package/package.json +39 -0
- package/types/ngx-lexical-editor.d.ts +47 -0
package/README.md
ADDED
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
# NgxLexicalEditor
|
|
2
|
+
|
|
3
|
+
This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 21.2.0.
|
|
4
|
+
|
|
5
|
+
## Code scaffolding
|
|
6
|
+
|
|
7
|
+
Angular CLI includes powerful code scaffolding tools. To generate a new component, run:
|
|
8
|
+
|
|
9
|
+
```bash
|
|
10
|
+
ng generate component component-name
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:
|
|
14
|
+
|
|
15
|
+
```bash
|
|
16
|
+
ng generate --help
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
## Building
|
|
20
|
+
|
|
21
|
+
To build the library, run:
|
|
22
|
+
|
|
23
|
+
```bash
|
|
24
|
+
ng build ngx-lexical-editor
|
|
25
|
+
```
|
|
26
|
+
|
|
27
|
+
This command will compile your project, and the build artifacts will be placed in the `dist/` directory.
|
|
28
|
+
|
|
29
|
+
### Publishing the Library
|
|
30
|
+
|
|
31
|
+
Once the project is built, you can publish your library by following these steps:
|
|
32
|
+
|
|
33
|
+
1. Navigate to the `dist` directory:
|
|
34
|
+
|
|
35
|
+
```bash
|
|
36
|
+
cd dist/ngx-lexical-editor
|
|
37
|
+
```
|
|
38
|
+
|
|
39
|
+
2. Run the `npm publish` command to publish your library to the npm registry:
|
|
40
|
+
```bash
|
|
41
|
+
npm publish
|
|
42
|
+
```
|
|
43
|
+
|
|
44
|
+
## Running unit tests
|
|
45
|
+
|
|
46
|
+
To execute unit tests with the [Karma](https://karma-runner.github.io) test runner, use the following command:
|
|
47
|
+
|
|
48
|
+
```bash
|
|
49
|
+
ng test
|
|
50
|
+
```
|
|
51
|
+
|
|
52
|
+
## Running end-to-end tests
|
|
53
|
+
|
|
54
|
+
For end-to-end (e2e) testing, run:
|
|
55
|
+
|
|
56
|
+
```bash
|
|
57
|
+
ng e2e
|
|
58
|
+
```
|
|
59
|
+
|
|
60
|
+
Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.
|
|
61
|
+
|
|
62
|
+
## Additional Resources
|
|
63
|
+
|
|
64
|
+
For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.
|
|
@@ -0,0 +1,196 @@
|
|
|
1
|
+
import * as i0 from '@angular/core';
|
|
2
|
+
import { inject, PLATFORM_ID, signal, Injectable, ViewChild, Component, input, computed } from '@angular/core';
|
|
3
|
+
import { isPlatformBrowser, CommonModule } from '@angular/common';
|
|
4
|
+
import { ParagraphNode, TextNode, createEditor, FORMAT_TEXT_COMMAND, $getSelection, $isRangeSelection, $createParagraphNode } from 'lexical';
|
|
5
|
+
import { HeadingNode, QuoteNode, registerRichText, $createHeadingNode } from '@lexical/rich-text';
|
|
6
|
+
import { ListNode, ListItemNode, $insertList } from '@lexical/list';
|
|
7
|
+
import { CodeNode, CodeHighlightNode, $createCodeNode } from '@lexical/code';
|
|
8
|
+
import { TableNode, TableRowNode, TableCellNode, INSERT_TABLE_COMMAND } from '@lexical/table';
|
|
9
|
+
import { $setBlocksType } from '@lexical/selection';
|
|
10
|
+
import { $generateHtmlFromNodes } from '@lexical/html';
|
|
11
|
+
import { DomSanitizer } from '@angular/platform-browser';
|
|
12
|
+
|
|
13
|
+
class EditorService {
|
|
14
|
+
editor;
|
|
15
|
+
platformId = inject(PLATFORM_ID);
|
|
16
|
+
editorState = signal(null, ...(ngDevMode ? [{ debugName: "editorState" }] : /* istanbul ignore next */ []));
|
|
17
|
+
constructor() {
|
|
18
|
+
const editorConfig = {
|
|
19
|
+
namespace: 'NgxLexicalEditor',
|
|
20
|
+
theme: {
|
|
21
|
+
// Your existing theme...
|
|
22
|
+
paragraph: 'lexical-paragraph',
|
|
23
|
+
heading: {
|
|
24
|
+
h1: 'lexical-h1',
|
|
25
|
+
h2: 'lexical-h2',
|
|
26
|
+
h3: 'lexical-h3',
|
|
27
|
+
},
|
|
28
|
+
list: {
|
|
29
|
+
ul: 'lexical-ul',
|
|
30
|
+
ol: 'lexical-ol',
|
|
31
|
+
listitem: 'lexical-listitem',
|
|
32
|
+
},
|
|
33
|
+
code: 'lexical-code-block',
|
|
34
|
+
table: 'lexical-table',
|
|
35
|
+
tableCell: 'lexical-table-cell',
|
|
36
|
+
tableRow: 'lexical-table-row',
|
|
37
|
+
text: {
|
|
38
|
+
bold: 'lexical-bold',
|
|
39
|
+
italic: 'lexical-italic',
|
|
40
|
+
underline: 'lexical-underline',
|
|
41
|
+
strikethrough: 'lexical-strikethrough',
|
|
42
|
+
code: 'lexical-inline-code',
|
|
43
|
+
},
|
|
44
|
+
},
|
|
45
|
+
nodes: [
|
|
46
|
+
HeadingNode,
|
|
47
|
+
QuoteNode,
|
|
48
|
+
ListNode,
|
|
49
|
+
ListItemNode,
|
|
50
|
+
CodeNode,
|
|
51
|
+
CodeHighlightNode,
|
|
52
|
+
TableNode,
|
|
53
|
+
TableRowNode,
|
|
54
|
+
TableCellNode,
|
|
55
|
+
ParagraphNode, // Ensure ParagraphNode is here if not default
|
|
56
|
+
TextNode, // Ensure TextNode is here if not default
|
|
57
|
+
],
|
|
58
|
+
onError: (error) => {
|
|
59
|
+
console.error('Lexical Error:', error);
|
|
60
|
+
},
|
|
61
|
+
editable: true,
|
|
62
|
+
};
|
|
63
|
+
if (isPlatformBrowser(this.platformId)) {
|
|
64
|
+
this.initEditor(editorConfig);
|
|
65
|
+
}
|
|
66
|
+
}
|
|
67
|
+
getEditor() {
|
|
68
|
+
return this.editor;
|
|
69
|
+
}
|
|
70
|
+
getEditorState() {
|
|
71
|
+
return this.editorState.asReadonly();
|
|
72
|
+
}
|
|
73
|
+
async initEditor(editorConfig) {
|
|
74
|
+
this.editor = createEditor(editorConfig);
|
|
75
|
+
this.editor.registerUpdateListener(({ editorState }) => {
|
|
76
|
+
this.editorState.set(editorState);
|
|
77
|
+
});
|
|
78
|
+
}
|
|
79
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: EditorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
80
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: EditorService, providedIn: 'root' });
|
|
81
|
+
}
|
|
82
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: EditorService, decorators: [{
|
|
83
|
+
type: Injectable,
|
|
84
|
+
args: [{
|
|
85
|
+
providedIn: 'root',
|
|
86
|
+
}]
|
|
87
|
+
}], ctorParameters: () => [] });
|
|
88
|
+
|
|
89
|
+
class LexicalEditorComponent {
|
|
90
|
+
editorContent;
|
|
91
|
+
editorService = inject(EditorService);
|
|
92
|
+
editor;
|
|
93
|
+
constructor() {
|
|
94
|
+
this.editor = this.editorService.getEditor();
|
|
95
|
+
if (this.editor) {
|
|
96
|
+
registerRichText(this.editor);
|
|
97
|
+
}
|
|
98
|
+
}
|
|
99
|
+
ngAfterViewInit() {
|
|
100
|
+
this.editor?.setRootElement(this.editorContent.nativeElement);
|
|
101
|
+
}
|
|
102
|
+
ngOnDestroy() {
|
|
103
|
+
this.editor?.setRootElement(null);
|
|
104
|
+
}
|
|
105
|
+
formatText(type) {
|
|
106
|
+
this.editor?.dispatchCommand(FORMAT_TEXT_COMMAND, type);
|
|
107
|
+
}
|
|
108
|
+
formatHeading(headingSize) {
|
|
109
|
+
this.editor?.update(() => {
|
|
110
|
+
const selection = $getSelection();
|
|
111
|
+
if ($isRangeSelection(selection)) {
|
|
112
|
+
$setBlocksType(selection, () => $createHeadingNode(headingSize));
|
|
113
|
+
}
|
|
114
|
+
});
|
|
115
|
+
}
|
|
116
|
+
formatParagraph() {
|
|
117
|
+
this.editor?.update(() => {
|
|
118
|
+
const selection = $getSelection();
|
|
119
|
+
if ($isRangeSelection(selection)) {
|
|
120
|
+
$setBlocksType(selection, () => $createParagraphNode());
|
|
121
|
+
}
|
|
122
|
+
});
|
|
123
|
+
}
|
|
124
|
+
formatList(listType) {
|
|
125
|
+
this.editor?.update(() => {
|
|
126
|
+
$insertList(listType);
|
|
127
|
+
});
|
|
128
|
+
}
|
|
129
|
+
formatCodeBlock() {
|
|
130
|
+
this.editor?.update(() => {
|
|
131
|
+
const selection = $getSelection();
|
|
132
|
+
if ($isRangeSelection(selection)) {
|
|
133
|
+
$setBlocksType(selection, () => $createCodeNode());
|
|
134
|
+
}
|
|
135
|
+
});
|
|
136
|
+
}
|
|
137
|
+
insertTable() {
|
|
138
|
+
this.editor?.dispatchCommand(INSERT_TABLE_COMMAND, {
|
|
139
|
+
rows: '3',
|
|
140
|
+
columns: '3',
|
|
141
|
+
});
|
|
142
|
+
}
|
|
143
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: LexicalEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
144
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.13", type: LexicalEditorComponent, isStandalone: true, selector: "lexical-editor", viewQueries: [{ propertyName: "editorContent", first: true, predicate: ["editorContent"], descendants: true }], ngImport: i0, template: "<div class=\"toolbar\">\n <!-- Inline formats -->\n <button (click)=\"formatText('bold')\">Bold</button>\n <button (click)=\"formatText('italic')\">Italic</button>\n <button (click)=\"formatText('underline')\">Underline</button>\n\n <span class=\"divider\">|</span>\n\n <!-- Block formats -->\n <button (click)=\"formatHeading('h1')\">H1</button>\n <button (click)=\"formatHeading('h2')\">H2</button>\n <button (click)=\"formatParagraph()\">Paragraph</button>\n\n <span class=\"divider\">|</span>\n\n <!-- Lists -->\n <button (click)=\"formatList('bullet')\">Bullet List</button>\n <button (click)=\"formatList('number')\">Number List</button>\n <button (click)=\"formatList('check')\">Check List</button>\n\n <span class=\"divider\">|</span>\n\n <!-- Code Block -->\n <button (click)=\"formatCodeBlock()\">Code Block</button>\n\n <span class=\"divider\">|</span>\n\n <!-- Table (Basic insertion) -->\n <button (click)=\"insertTable()\">Insert Table</button>\n</div>\n<div class=\"lexical-editor-container\">\n <div #editorContent class=\"lexical-content-editable\" contenteditable=\"true\"></div>\n</div>\n", styles: [".toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:4px;margin-bottom:8px;padding:8px;background-color:#f5f5f5;border-radius:4px;border:1px solid #ddd}.toolbar button{padding:4px 8px;cursor:pointer;background-color:#fff;border:1px solid #ccc;border-radius:3px;font-size:14px}.toolbar button:hover{background-color:#e9e9e9}.divider{color:#ccc;margin:0 4px}.lexical-editor-container{border:1px solid #ccc;border-radius:4px;position:relative;background-color:#fff}.lexical-content-editable{min-height:300px;padding:16px;outline:none}.lexical-paragraph{margin:0 0 10px}.lexical-bold{font-weight:700}.lexical-italic{font-style:italic}.lexical-underline{text-decoration:underline}.lexical-strikethrough{text-decoration:line-through}.lexical-inline-code{font-family:monospace;background-color:#f0f0f0;padding:2px 4px;border-radius:2px}.lexical-h1{font-size:2em;margin-top:20px;margin-bottom:10px}.lexical-h2{font-size:1.5em;margin-top:15px;margin-bottom:10px}.lexical-h3{font-size:1.17em;margin-top:10px;margin-bottom:10px}.lexical-ul{padding-left:30px;list-style-type:disc}.lexical-ol{padding-left:30px;list-style-type:decimal}.lexical-listitem{margin-bottom:4px}.lexical-code-block{background-color:#282c34;color:#abb2bf;font-family:Fira Code,monospace;display:block;padding:16px;line-height:1.5;font-size:14px;margin:10px 0;overflow-x:auto;border-radius:6px;tab-size:2}.lexical-table{border-collapse:collapse;border-spacing:0;max-width:100%;overflow-y:scroll;table-layout:fixed;width:100%;margin:10px 0}.lexical-table-row{border-bottom:1px solid #ddd}.lexical-table-cell{border:1px solid #ddd;padding:8px;vertical-align:top;text-align:left}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
|
|
145
|
+
}
|
|
146
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: LexicalEditorComponent, decorators: [{
|
|
147
|
+
type: Component,
|
|
148
|
+
args: [{ selector: 'lexical-editor', standalone: true, imports: [CommonModule], template: "<div class=\"toolbar\">\n <!-- Inline formats -->\n <button (click)=\"formatText('bold')\">Bold</button>\n <button (click)=\"formatText('italic')\">Italic</button>\n <button (click)=\"formatText('underline')\">Underline</button>\n\n <span class=\"divider\">|</span>\n\n <!-- Block formats -->\n <button (click)=\"formatHeading('h1')\">H1</button>\n <button (click)=\"formatHeading('h2')\">H2</button>\n <button (click)=\"formatParagraph()\">Paragraph</button>\n\n <span class=\"divider\">|</span>\n\n <!-- Lists -->\n <button (click)=\"formatList('bullet')\">Bullet List</button>\n <button (click)=\"formatList('number')\">Number List</button>\n <button (click)=\"formatList('check')\">Check List</button>\n\n <span class=\"divider\">|</span>\n\n <!-- Code Block -->\n <button (click)=\"formatCodeBlock()\">Code Block</button>\n\n <span class=\"divider\">|</span>\n\n <!-- Table (Basic insertion) -->\n <button (click)=\"insertTable()\">Insert Table</button>\n</div>\n<div class=\"lexical-editor-container\">\n <div #editorContent class=\"lexical-content-editable\" contenteditable=\"true\"></div>\n</div>\n", styles: [".toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:4px;margin-bottom:8px;padding:8px;background-color:#f5f5f5;border-radius:4px;border:1px solid #ddd}.toolbar button{padding:4px 8px;cursor:pointer;background-color:#fff;border:1px solid #ccc;border-radius:3px;font-size:14px}.toolbar button:hover{background-color:#e9e9e9}.divider{color:#ccc;margin:0 4px}.lexical-editor-container{border:1px solid #ccc;border-radius:4px;position:relative;background-color:#fff}.lexical-content-editable{min-height:300px;padding:16px;outline:none}.lexical-paragraph{margin:0 0 10px}.lexical-bold{font-weight:700}.lexical-italic{font-style:italic}.lexical-underline{text-decoration:underline}.lexical-strikethrough{text-decoration:line-through}.lexical-inline-code{font-family:monospace;background-color:#f0f0f0;padding:2px 4px;border-radius:2px}.lexical-h1{font-size:2em;margin-top:20px;margin-bottom:10px}.lexical-h2{font-size:1.5em;margin-top:15px;margin-bottom:10px}.lexical-h3{font-size:1.17em;margin-top:10px;margin-bottom:10px}.lexical-ul{padding-left:30px;list-style-type:disc}.lexical-ol{padding-left:30px;list-style-type:decimal}.lexical-listitem{margin-bottom:4px}.lexical-code-block{background-color:#282c34;color:#abb2bf;font-family:Fira Code,monospace;display:block;padding:16px;line-height:1.5;font-size:14px;margin:10px 0;overflow-x:auto;border-radius:6px;tab-size:2}.lexical-table{border-collapse:collapse;border-spacing:0;max-width:100%;overflow-y:scroll;table-layout:fixed;width:100%;margin:10px 0}.lexical-table-row{border-bottom:1px solid #ddd}.lexical-table-cell{border:1px solid #ddd;padding:8px;vertical-align:top;text-align:left}\n"] }]
|
|
149
|
+
}], ctorParameters: () => [], propDecorators: { editorContent: [{
|
|
150
|
+
type: ViewChild,
|
|
151
|
+
args: ['editorContent']
|
|
152
|
+
}] } });
|
|
153
|
+
|
|
154
|
+
class PreviewComponent {
|
|
155
|
+
debug = input(false, ...(ngDevMode ? [{ debugName: "debug" }] : /* istanbul ignore next */ []));
|
|
156
|
+
editorService = inject(EditorService);
|
|
157
|
+
sanitizer = inject(DomSanitizer);
|
|
158
|
+
editorState = this.editorService.getEditorState();
|
|
159
|
+
renderedContent = computed(() => {
|
|
160
|
+
const state = this.editorState();
|
|
161
|
+
if (!state) {
|
|
162
|
+
return this.sanitizer.bypassSecurityTrustHtml('');
|
|
163
|
+
}
|
|
164
|
+
let html = '';
|
|
165
|
+
const editor = this.editorService.getEditor();
|
|
166
|
+
// Use a read-only transaction to generate the HTML
|
|
167
|
+
editor?.getEditorState().read(() => {
|
|
168
|
+
html = $generateHtmlFromNodes(editor, null);
|
|
169
|
+
});
|
|
170
|
+
return this.sanitizer.bypassSecurityTrustHtml(html);
|
|
171
|
+
}, ...(ngDevMode ? [{ debugName: "renderedContent" }] : /* istanbul ignore next */ []));
|
|
172
|
+
debugJson = computed(() => {
|
|
173
|
+
if (!this.debug()) {
|
|
174
|
+
return null;
|
|
175
|
+
}
|
|
176
|
+
const state = this.editorState();
|
|
177
|
+
return state ? JSON.stringify(state.toJSON(), null, 2) : 'No state available';
|
|
178
|
+
}, ...(ngDevMode ? [{ debugName: "debugJson" }] : /* istanbul ignore next */ []));
|
|
179
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: PreviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
180
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: PreviewComponent, isStandalone: true, selector: "lexical-preview", inputs: { debug: { classPropertyName: "debug", publicName: "debug", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"lexical-preview-container\">\n <!-- Render the visual HTML representation -->\n <div class=\"rendered-content\" [innerHTML]=\"renderedContent()\"></div>\n\n <!-- Render the debug JSON conditionally -->\n @if (debug()) {\n <div class=\"debug-container\">\n <h4>Editor State JSON (Preview)</h4>\n <pre>{{ debugJson() }}</pre>\n </div>\n }\n</div>\n", styles: [".lexical-preview-container{padding:10px}b,strong{font-weight:700}i,em{font-style:italic}u{text-decoration:underline}s{text-decoration:line-through}code{font-family:monospace;background-color:#f0f0f0;padding:2px 4px;border-radius:2px}.debug-container{margin-top:20px;padding:10px;background-color:#f9f9f9;border:1px solid #ddd;border-radius:4px}pre{white-space:pre-wrap;word-wrap:break-word;font-size:12px;margin:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
|
|
181
|
+
}
|
|
182
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: PreviewComponent, decorators: [{
|
|
183
|
+
type: Component,
|
|
184
|
+
args: [{ selector: 'lexical-preview', standalone: true, imports: [CommonModule], template: "<div class=\"lexical-preview-container\">\n <!-- Render the visual HTML representation -->\n <div class=\"rendered-content\" [innerHTML]=\"renderedContent()\"></div>\n\n <!-- Render the debug JSON conditionally -->\n @if (debug()) {\n <div class=\"debug-container\">\n <h4>Editor State JSON (Preview)</h4>\n <pre>{{ debugJson() }}</pre>\n </div>\n }\n</div>\n", styles: [".lexical-preview-container{padding:10px}b,strong{font-weight:700}i,em{font-style:italic}u{text-decoration:underline}s{text-decoration:line-through}code{font-family:monospace;background-color:#f0f0f0;padding:2px 4px;border-radius:2px}.debug-container{margin-top:20px;padding:10px;background-color:#f9f9f9;border:1px solid #ddd;border-radius:4px}pre{white-space:pre-wrap;word-wrap:break-word;font-size:12px;margin:0}\n"] }]
|
|
185
|
+
}], propDecorators: { debug: [{ type: i0.Input, args: [{ isSignal: true, alias: "debug", required: false }] }] } });
|
|
186
|
+
|
|
187
|
+
/*
|
|
188
|
+
* Public API Surface of ngx-lexical-editor
|
|
189
|
+
*/
|
|
190
|
+
|
|
191
|
+
/**
|
|
192
|
+
* Generated bundle index. Do not edit.
|
|
193
|
+
*/
|
|
194
|
+
|
|
195
|
+
export { EditorService, LexicalEditorComponent, PreviewComponent };
|
|
196
|
+
//# sourceMappingURL=ngx-lexical-editor.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ngx-lexical-editor.mjs","sources":["../../../projects/ngx-lexical-editor/src/lib/services/editor.service.ts","../../../projects/ngx-lexical-editor/src/lib/components/editor/editor.component.ts","../../../projects/ngx-lexical-editor/src/lib/components/editor/editor.component.html","../../../projects/ngx-lexical-editor/src/lib/components/preview/preview.component.ts","../../../projects/ngx-lexical-editor/src/lib/components/preview/preview.component.html","../../../projects/ngx-lexical-editor/src/public-api.ts","../../../projects/ngx-lexical-editor/src/ngx-lexical-editor.ts"],"sourcesContent":["import { inject, Injectable, PLATFORM_ID, signal } from '@angular/core';\nimport {\n createEditor,\n CreateEditorArgs,\n EditorState,\n LexicalEditor,\n ParagraphNode,\n TextNode,\n} from 'lexical';\nimport { HeadingNode, QuoteNode } from '@lexical/rich-text';\nimport { ListItemNode, ListNode } from '@lexical/list';\nimport { CodeHighlightNode, CodeNode } from '@lexical/code';\nimport { TableCellNode, TableNode, TableRowNode } from '@lexical/table';\nimport { isPlatformBrowser } from '@angular/common';\n\n@Injectable({\n providedIn: 'root',\n})\nexport class EditorService {\n private editor?: LexicalEditor;\n private platformId = inject(PLATFORM_ID);\n private readonly editorState = signal<EditorState | null>(null);\n\n constructor() {\n const editorConfig: CreateEditorArgs = {\n namespace: 'NgxLexicalEditor',\n theme: {\n // Your existing theme...\n paragraph: 'lexical-paragraph',\n heading: {\n h1: 'lexical-h1',\n h2: 'lexical-h2',\n h3: 'lexical-h3',\n },\n list: {\n ul: 'lexical-ul',\n ol: 'lexical-ol',\n listitem: 'lexical-listitem',\n },\n code: 'lexical-code-block',\n table: 'lexical-table',\n tableCell: 'lexical-table-cell',\n tableRow: 'lexical-table-row',\n text: {\n bold: 'lexical-bold',\n italic: 'lexical-italic',\n underline: 'lexical-underline',\n strikethrough: 'lexical-strikethrough',\n code: 'lexical-inline-code',\n },\n },\n nodes: [\n HeadingNode,\n QuoteNode,\n ListNode,\n ListItemNode,\n CodeNode,\n CodeHighlightNode,\n TableNode,\n TableRowNode,\n TableCellNode,\n ParagraphNode, // Ensure ParagraphNode is here if not default\n TextNode, // Ensure TextNode is here if not default\n ],\n onError: (error: Error) => {\n console.error('Lexical Error:', error);\n },\n editable: true,\n };\n\n if (isPlatformBrowser(this.platformId)) {\n this.initEditor(editorConfig);\n }\n }\n\n getEditor(): LexicalEditor | undefined {\n return this.editor;\n }\n\n getEditorState() {\n return this.editorState.asReadonly();\n }\n\n private async initEditor(editorConfig: CreateEditorArgs) {\n this.editor = createEditor(editorConfig);\n\n this.editor.registerUpdateListener(({ editorState }) => {\n this.editorState.set(editorState);\n });\n }\n}\n","import { AfterViewInit, Component, ElementRef, inject, OnDestroy, ViewChild } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { EditorService } from '../../services/editor.service';\nimport {\n $createParagraphNode,\n $getSelection,\n $isRangeSelection,\n FORMAT_TEXT_COMMAND,\n LexicalEditor,\n} from 'lexical';\nimport { $setBlocksType } from '@lexical/selection';\nimport { $createHeadingNode, HeadingTagType, registerRichText } from '@lexical/rich-text';\nimport { $insertList } from '@lexical/list';\nimport { $createCodeNode } from '@lexical/code';\nimport { INSERT_TABLE_COMMAND } from '@lexical/table';\n\n@Component({\n selector: 'lexical-editor',\n standalone: true,\n imports: [CommonModule],\n templateUrl: './editor.component.html',\n styleUrl: './editor.component.css',\n})\nexport class LexicalEditorComponent implements AfterViewInit, OnDestroy {\n @ViewChild('editorContent') editorContent!: ElementRef<HTMLDivElement>;\n private readonly editorService = inject(EditorService);\n private readonly editor?: LexicalEditor;\n\n constructor() {\n this.editor = this.editorService.getEditor();\n if (this.editor) {\n registerRichText(this.editor);\n }\n }\n\n ngAfterViewInit(): void {\n this.editor?.setRootElement(this.editorContent.nativeElement);\n }\n\n ngOnDestroy(): void {\n this.editor?.setRootElement(null);\n }\n\n formatText(type: 'bold' | 'italic' | 'underline'): void {\n this.editor?.dispatchCommand(FORMAT_TEXT_COMMAND, type);\n }\n\n formatHeading(headingSize: HeadingTagType): void {\n this.editor?.update(() => {\n const selection = $getSelection();\n if ($isRangeSelection(selection)) {\n $setBlocksType(selection, () => $createHeadingNode(headingSize));\n }\n });\n }\n\n formatParagraph(): void {\n this.editor?.update(() => {\n const selection = $getSelection();\n if ($isRangeSelection(selection)) {\n $setBlocksType(selection, () => $createParagraphNode());\n }\n });\n }\n\n formatList(listType: 'bullet' | 'number' | 'check'): void {\n this.editor?.update(() => {\n $insertList(listType);\n });\n }\n\n formatCodeBlock(): void {\n this.editor?.update(() => {\n const selection = $getSelection();\n if ($isRangeSelection(selection)) {\n $setBlocksType(selection, () => $createCodeNode());\n }\n });\n }\n\n insertTable(): void {\n this.editor?.dispatchCommand(INSERT_TABLE_COMMAND, {\n rows: '3',\n columns: '3',\n });\n }\n}\n","<div class=\"toolbar\">\n <!-- Inline formats -->\n <button (click)=\"formatText('bold')\">Bold</button>\n <button (click)=\"formatText('italic')\">Italic</button>\n <button (click)=\"formatText('underline')\">Underline</button>\n\n <span class=\"divider\">|</span>\n\n <!-- Block formats -->\n <button (click)=\"formatHeading('h1')\">H1</button>\n <button (click)=\"formatHeading('h2')\">H2</button>\n <button (click)=\"formatParagraph()\">Paragraph</button>\n\n <span class=\"divider\">|</span>\n\n <!-- Lists -->\n <button (click)=\"formatList('bullet')\">Bullet List</button>\n <button (click)=\"formatList('number')\">Number List</button>\n <button (click)=\"formatList('check')\">Check List</button>\n\n <span class=\"divider\">|</span>\n\n <!-- Code Block -->\n <button (click)=\"formatCodeBlock()\">Code Block</button>\n\n <span class=\"divider\">|</span>\n\n <!-- Table (Basic insertion) -->\n <button (click)=\"insertTable()\">Insert Table</button>\n</div>\n<div class=\"lexical-editor-container\">\n <div #editorContent class=\"lexical-content-editable\" contenteditable=\"true\"></div>\n</div>\n","import { Component, computed, inject, input } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { EditorService } from '../../services/editor.service';\nimport { $generateHtmlFromNodes } from '@lexical/html';\nimport { DomSanitizer, SafeHtml } from '@angular/platform-browser';\n\n@Component({\n selector: 'lexical-preview',\n standalone: true,\n imports: [CommonModule],\n templateUrl: './preview.component.html',\n styleUrl: './preview.component.css',\n})\nexport class PreviewComponent {\n debug = input<boolean>(false);\n\n private readonly editorService = inject(EditorService);\n private readonly sanitizer = inject(DomSanitizer);\n\n private readonly editorState = this.editorService.getEditorState();\n\n readonly renderedContent = computed<SafeHtml>(() => {\n const state = this.editorState();\n if (!state) {\n return this.sanitizer.bypassSecurityTrustHtml('');\n }\n\n let html = '';\n const editor = this.editorService.getEditor();\n\n // Use a read-only transaction to generate the HTML\n editor?.getEditorState().read(() => {\n html = $generateHtmlFromNodes(editor, null);\n });\n\n return this.sanitizer.bypassSecurityTrustHtml(html);\n });\n\n readonly debugJson = computed(() => {\n if (!this.debug()) {\n return null;\n }\n const state = this.editorState();\n return state ? JSON.stringify(state.toJSON(), null, 2) : 'No state available';\n });\n}\n","<div class=\"lexical-preview-container\">\n <!-- Render the visual HTML representation -->\n <div class=\"rendered-content\" [innerHTML]=\"renderedContent()\"></div>\n\n <!-- Render the debug JSON conditionally -->\n @if (debug()) {\n <div class=\"debug-container\">\n <h4>Editor State JSON (Preview)</h4>\n <pre>{{ debugJson() }}</pre>\n </div>\n }\n</div>\n","/*\n * Public API Surface of ngx-lexical-editor\n */\n\nexport * from './lib/index';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
|
package/package.json
ADDED
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "ngx-lexical-editor",
|
|
3
|
+
"version": "1.0.0",
|
|
4
|
+
"peerDependencies": {
|
|
5
|
+
"@angular/common": "^21.2.0",
|
|
6
|
+
"@angular/core": "^21.2.0",
|
|
7
|
+
"@angular/aria": "^21.2.11",
|
|
8
|
+
"@lexical/code": "^0.44.0",
|
|
9
|
+
"@lexical/html": "^0.44.0",
|
|
10
|
+
"@lexical/list": "^0.44.0",
|
|
11
|
+
"@lexical/rich-text": "^0.44.0",
|
|
12
|
+
"@lexical/selection": "^0.44.0",
|
|
13
|
+
"@lexical/table": "^0.44.0",
|
|
14
|
+
"@lexical/clipboard": "^0.44.0",
|
|
15
|
+
"@lexical/extension": "^0.44.0",
|
|
16
|
+
"@lexical/utils": "^0.44.0",
|
|
17
|
+
"@lexical/code-prism": "^0.44.0",
|
|
18
|
+
"@lexical/code-core": "^0.44.0",
|
|
19
|
+
"@lexical/dragon": "^0.44.0",
|
|
20
|
+
"lexical": "^0.44.0",
|
|
21
|
+
"prismjs": "^1.30.0"
|
|
22
|
+
},
|
|
23
|
+
"dependencies": {
|
|
24
|
+
"tslib": "^2.3.0"
|
|
25
|
+
},
|
|
26
|
+
"sideEffects": false,
|
|
27
|
+
"module": "fesm2022/ngx-lexical-editor.mjs",
|
|
28
|
+
"typings": "types/ngx-lexical-editor.d.ts",
|
|
29
|
+
"exports": {
|
|
30
|
+
"./package.json": {
|
|
31
|
+
"default": "./package.json"
|
|
32
|
+
},
|
|
33
|
+
".": {
|
|
34
|
+
"types": "./types/ngx-lexical-editor.d.ts",
|
|
35
|
+
"default": "./fesm2022/ngx-lexical-editor.mjs"
|
|
36
|
+
}
|
|
37
|
+
},
|
|
38
|
+
"type": "module"
|
|
39
|
+
}
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
import * as i0 from '@angular/core';
|
|
2
|
+
import { AfterViewInit, OnDestroy, ElementRef } from '@angular/core';
|
|
3
|
+
import { HeadingTagType } from '@lexical/rich-text';
|
|
4
|
+
import { SafeHtml } from '@angular/platform-browser';
|
|
5
|
+
import { LexicalEditor, EditorState } from 'lexical';
|
|
6
|
+
|
|
7
|
+
declare class LexicalEditorComponent implements AfterViewInit, OnDestroy {
|
|
8
|
+
editorContent: ElementRef<HTMLDivElement>;
|
|
9
|
+
private readonly editorService;
|
|
10
|
+
private readonly editor?;
|
|
11
|
+
constructor();
|
|
12
|
+
ngAfterViewInit(): void;
|
|
13
|
+
ngOnDestroy(): void;
|
|
14
|
+
formatText(type: 'bold' | 'italic' | 'underline'): void;
|
|
15
|
+
formatHeading(headingSize: HeadingTagType): void;
|
|
16
|
+
formatParagraph(): void;
|
|
17
|
+
formatList(listType: 'bullet' | 'number' | 'check'): void;
|
|
18
|
+
formatCodeBlock(): void;
|
|
19
|
+
insertTable(): void;
|
|
20
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<LexicalEditorComponent, never>;
|
|
21
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<LexicalEditorComponent, "lexical-editor", never, {}, {}, never, never, true, never>;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
declare class PreviewComponent {
|
|
25
|
+
debug: i0.InputSignal<boolean>;
|
|
26
|
+
private readonly editorService;
|
|
27
|
+
private readonly sanitizer;
|
|
28
|
+
private readonly editorState;
|
|
29
|
+
readonly renderedContent: i0.Signal<SafeHtml>;
|
|
30
|
+
readonly debugJson: i0.Signal<string | null>;
|
|
31
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<PreviewComponent, never>;
|
|
32
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<PreviewComponent, "lexical-preview", never, { "debug": { "alias": "debug"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
declare class EditorService {
|
|
36
|
+
private editor?;
|
|
37
|
+
private platformId;
|
|
38
|
+
private readonly editorState;
|
|
39
|
+
constructor();
|
|
40
|
+
getEditor(): LexicalEditor | undefined;
|
|
41
|
+
getEditorState(): i0.Signal<EditorState | null>;
|
|
42
|
+
private initEditor;
|
|
43
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<EditorService, never>;
|
|
44
|
+
static ɵprov: i0.ɵɵInjectableDeclaration<EditorService>;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
export { EditorService, LexicalEditorComponent, PreviewComponent };
|