@tmdjr/ngx-editor-js2-codemirror 21.0.2 → 21.0.4
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.
|
@@ -1,12 +1,206 @@
|
|
|
1
1
|
import * as i1 from '@angular/cdk/drag-drop';
|
|
2
2
|
import { CdkDrag } from '@angular/cdk/drag-drop';
|
|
3
3
|
import * as i0 from '@angular/core';
|
|
4
|
-
import {
|
|
4
|
+
import { EventEmitter, forwardRef, ViewChild, Input, Output, ChangeDetectionStrategy, Component, input, signal } from '@angular/core';
|
|
5
5
|
import * as i2 from '@angular/forms';
|
|
6
|
-
import { ReactiveFormsModule } from '@angular/forms';
|
|
7
|
-
import
|
|
8
|
-
import {
|
|
9
|
-
import {
|
|
6
|
+
import { NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms';
|
|
7
|
+
import { ToolbarFabDirective } from '@tmdjr/ngx-editor-js2';
|
|
8
|
+
import { defaultKeymap, historyKeymap, history } from '@codemirror/commands';
|
|
9
|
+
import { css } from '@codemirror/lang-css';
|
|
10
|
+
import { html } from '@codemirror/lang-html';
|
|
11
|
+
import { javascript } from '@codemirror/lang-javascript';
|
|
12
|
+
import { json } from '@codemirror/lang-json';
|
|
13
|
+
import { markdown } from '@codemirror/lang-markdown';
|
|
14
|
+
import { bracketMatching } from '@codemirror/language';
|
|
15
|
+
import { searchKeymap } from '@codemirror/search';
|
|
16
|
+
import { Compartment, EditorSelection } from '@codemirror/state';
|
|
17
|
+
import { lineNumbers, keymap, EditorView } from '@codemirror/view';
|
|
18
|
+
import { synthwave84 } from '@fsegurai/codemirror-theme-synthwave-84';
|
|
19
|
+
import { basicSetup } from 'codemirror';
|
|
20
|
+
|
|
21
|
+
class CodemirrorEditorComponent {
|
|
22
|
+
value = '';
|
|
23
|
+
valueChange = new EventEmitter();
|
|
24
|
+
language = 'markdown';
|
|
25
|
+
readOnly = false;
|
|
26
|
+
heightPx = '';
|
|
27
|
+
editorHost;
|
|
28
|
+
editorView;
|
|
29
|
+
languageCompartment = new Compartment();
|
|
30
|
+
readOnlyCompartment = new Compartment();
|
|
31
|
+
themeCompartment = new Compartment();
|
|
32
|
+
mediaQuery;
|
|
33
|
+
onThemeChanged = () => {
|
|
34
|
+
if (!this.editorView)
|
|
35
|
+
return;
|
|
36
|
+
this.editorView.dispatch({
|
|
37
|
+
effects: this.themeCompartment.reconfigure(this.getThemeExtension()),
|
|
38
|
+
});
|
|
39
|
+
};
|
|
40
|
+
isWritingFromControl = false;
|
|
41
|
+
onChange = () => { };
|
|
42
|
+
onTouched = () => { };
|
|
43
|
+
ngAfterViewInit() {
|
|
44
|
+
this.mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
|
|
45
|
+
const extensions = [
|
|
46
|
+
basicSetup,
|
|
47
|
+
lineNumbers(),
|
|
48
|
+
bracketMatching(),
|
|
49
|
+
keymap.of([...defaultKeymap, ...historyKeymap, ...searchKeymap]),
|
|
50
|
+
history(),
|
|
51
|
+
this.languageCompartment.of(this.getLanguageExtension()),
|
|
52
|
+
this.readOnlyCompartment.of(EditorView.editable.of(!this.readOnly)),
|
|
53
|
+
this.themeCompartment.of(this.getThemeExtension()),
|
|
54
|
+
EditorView.updateListener.of((update) => {
|
|
55
|
+
if (!update.docChanged)
|
|
56
|
+
return;
|
|
57
|
+
const nextValue = update.state.doc.toString();
|
|
58
|
+
this.value = nextValue;
|
|
59
|
+
if (!this.isWritingFromControl) {
|
|
60
|
+
this.onChange(nextValue);
|
|
61
|
+
this.valueChange.emit(nextValue);
|
|
62
|
+
}
|
|
63
|
+
}),
|
|
64
|
+
EditorView.domEventHandlers({
|
|
65
|
+
blur: () => {
|
|
66
|
+
this.onTouched();
|
|
67
|
+
},
|
|
68
|
+
}),
|
|
69
|
+
];
|
|
70
|
+
this.editorView = new EditorView({
|
|
71
|
+
doc: this.value ?? '',
|
|
72
|
+
extensions,
|
|
73
|
+
parent: this.editorHost.nativeElement,
|
|
74
|
+
});
|
|
75
|
+
this.mediaQuery.addEventListener('change', this.onThemeChanged);
|
|
76
|
+
}
|
|
77
|
+
ngOnChanges(changes) {
|
|
78
|
+
if (!this.editorView)
|
|
79
|
+
return;
|
|
80
|
+
if (changes['value'] &&
|
|
81
|
+
typeof this.value === 'string' &&
|
|
82
|
+
this.value !== this.editorView.state.doc.toString()) {
|
|
83
|
+
this.replaceDocument(this.value);
|
|
84
|
+
}
|
|
85
|
+
if (changes['language']) {
|
|
86
|
+
this.editorView.dispatch({
|
|
87
|
+
effects: this.languageCompartment.reconfigure(this.getLanguageExtension()),
|
|
88
|
+
});
|
|
89
|
+
}
|
|
90
|
+
if (changes['readOnly']) {
|
|
91
|
+
this.editorView.dispatch({
|
|
92
|
+
effects: this.readOnlyCompartment.reconfigure(EditorView.editable.of(!this.readOnly)),
|
|
93
|
+
});
|
|
94
|
+
}
|
|
95
|
+
}
|
|
96
|
+
ngOnDestroy() {
|
|
97
|
+
this.mediaQuery?.removeEventListener('change', this.onThemeChanged);
|
|
98
|
+
this.editorView?.destroy();
|
|
99
|
+
}
|
|
100
|
+
writeValue(value) {
|
|
101
|
+
const next = value ?? '';
|
|
102
|
+
this.value = next;
|
|
103
|
+
if (!this.editorView)
|
|
104
|
+
return;
|
|
105
|
+
this.replaceDocument(next);
|
|
106
|
+
}
|
|
107
|
+
registerOnChange(fn) {
|
|
108
|
+
this.onChange = fn;
|
|
109
|
+
}
|
|
110
|
+
registerOnTouched(fn) {
|
|
111
|
+
this.onTouched = fn;
|
|
112
|
+
}
|
|
113
|
+
setDisabledState(isDisabled) {
|
|
114
|
+
this.readOnly = isDisabled;
|
|
115
|
+
if (!this.editorView)
|
|
116
|
+
return;
|
|
117
|
+
this.editorView.dispatch({
|
|
118
|
+
effects: this.readOnlyCompartment.reconfigure(EditorView.editable.of(!this.readOnly)),
|
|
119
|
+
});
|
|
120
|
+
}
|
|
121
|
+
replaceDocument(nextValue) {
|
|
122
|
+
if (!this.editorView)
|
|
123
|
+
return;
|
|
124
|
+
this.isWritingFromControl = true;
|
|
125
|
+
this.editorView.dispatch({
|
|
126
|
+
changes: {
|
|
127
|
+
from: 0,
|
|
128
|
+
to: this.editorView.state.doc.length,
|
|
129
|
+
insert: nextValue,
|
|
130
|
+
},
|
|
131
|
+
selection: EditorSelection.cursor(nextValue.length),
|
|
132
|
+
});
|
|
133
|
+
this.isWritingFromControl = false;
|
|
134
|
+
}
|
|
135
|
+
getLanguageExtension() {
|
|
136
|
+
switch (this.language) {
|
|
137
|
+
case 'typescript':
|
|
138
|
+
return javascript({ typescript: true });
|
|
139
|
+
case 'javascript':
|
|
140
|
+
return javascript({ typescript: false });
|
|
141
|
+
case 'json':
|
|
142
|
+
return json();
|
|
143
|
+
case 'markdown':
|
|
144
|
+
return markdown();
|
|
145
|
+
case 'html':
|
|
146
|
+
return html();
|
|
147
|
+
case 'css':
|
|
148
|
+
return css();
|
|
149
|
+
default:
|
|
150
|
+
return javascript({ typescript: true });
|
|
151
|
+
}
|
|
152
|
+
}
|
|
153
|
+
getThemeExtension() {
|
|
154
|
+
// apply synthwave always, or only in dark mode if you prefer
|
|
155
|
+
return synthwave84;
|
|
156
|
+
// or: return this.mediaQuery?.matches ? synthwave84 : [];
|
|
157
|
+
}
|
|
158
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: CodemirrorEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
159
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.4", type: CodemirrorEditorComponent, isStandalone: true, selector: "ngx-codemirror-editor", inputs: { value: "value", language: "language", readOnly: "readOnly", heightPx: "heightPx" }, outputs: { valueChange: "valueChange" }, providers: [
|
|
160
|
+
{
|
|
161
|
+
provide: NG_VALUE_ACCESSOR,
|
|
162
|
+
useExisting: forwardRef(() => CodemirrorEditorComponent),
|
|
163
|
+
multi: true,
|
|
164
|
+
},
|
|
165
|
+
], viewQueries: [{ propertyName: "editorHost", first: true, predicate: ["editorHost"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: `
|
|
166
|
+
<div
|
|
167
|
+
#editorHost
|
|
168
|
+
class="editor-host"
|
|
169
|
+
[style.height.px]="heightPx"
|
|
170
|
+
[class.read-only]="readOnly"
|
|
171
|
+
></div>
|
|
172
|
+
`, isInline: true, styles: [":host{display:block}.editor-host{border:1px solid #d6dbe3;border-radius:8px;overflow:hidden;background:var(--mat-sys-surface, #000)}.editor-host.read-only{opacity:.9}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
173
|
+
}
|
|
174
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: CodemirrorEditorComponent, decorators: [{
|
|
175
|
+
type: Component,
|
|
176
|
+
args: [{ selector: 'ngx-codemirror-editor', template: `
|
|
177
|
+
<div
|
|
178
|
+
#editorHost
|
|
179
|
+
class="editor-host"
|
|
180
|
+
[style.height.px]="heightPx"
|
|
181
|
+
[class.read-only]="readOnly"
|
|
182
|
+
></div>
|
|
183
|
+
`, providers: [
|
|
184
|
+
{
|
|
185
|
+
provide: NG_VALUE_ACCESSOR,
|
|
186
|
+
useExisting: forwardRef(() => CodemirrorEditorComponent),
|
|
187
|
+
multi: true,
|
|
188
|
+
},
|
|
189
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block}.editor-host{border:1px solid #d6dbe3;border-radius:8px;overflow:hidden;background:var(--mat-sys-surface, #000)}.editor-host.read-only{opacity:.9}\n"] }]
|
|
190
|
+
}], propDecorators: { value: [{
|
|
191
|
+
type: Input
|
|
192
|
+
}], valueChange: [{
|
|
193
|
+
type: Output
|
|
194
|
+
}], language: [{
|
|
195
|
+
type: Input
|
|
196
|
+
}], readOnly: [{
|
|
197
|
+
type: Input
|
|
198
|
+
}], heightPx: [{
|
|
199
|
+
type: Input
|
|
200
|
+
}], editorHost: [{
|
|
201
|
+
type: ViewChild,
|
|
202
|
+
args: ['editorHost', { static: true }]
|
|
203
|
+
}] } });
|
|
10
204
|
|
|
11
205
|
class NgxEditorJs2CodemirrorComponent {
|
|
12
206
|
sortIndex = input(0, ...(ngDevMode ? [{ debugName: "sortIndex" }] : []));
|
|
@@ -15,25 +209,17 @@ class NgxEditorJs2CodemirrorComponent {
|
|
|
15
209
|
formGroup = input.required(...(ngDevMode ? [{ debugName: "formGroup" }] : []));
|
|
16
210
|
formControlName = input.required(...(ngDevMode ? [{ debugName: "formControlName" }] : []));
|
|
17
211
|
blockOptionActions = input([
|
|
18
|
-
{ action: '
|
|
19
|
-
{ action: '
|
|
20
|
-
{ action: '
|
|
212
|
+
{ action: 'typescript', devIcon: 'devicon-typescript-plain' },
|
|
213
|
+
{ action: 'javascript', devIcon: 'devicon-javascript-plain' },
|
|
214
|
+
{ action: 'html', devIcon: 'devicon-html5-plain' },
|
|
215
|
+
{ action: 'json', devIcon: 'devicon-json-plain' },
|
|
216
|
+
{ action: 'markdown', devIcon: 'devicon-markdown-original' },
|
|
217
|
+
{ action: 'css', devIcon: 'devicon-css3-plain' },
|
|
21
218
|
], ...(ngDevMode ? [{ debugName: "blockOptionActions" }] : []));
|
|
22
|
-
|
|
23
|
-
lineNumbers: true,
|
|
24
|
-
theme: 'material-palenight',
|
|
25
|
-
mode: 'text/typescript',
|
|
26
|
-
extraKeys: { 'Ctrl-Space': 'autocomplete' },
|
|
27
|
-
styleActiveLine: true, // Highlight active line
|
|
28
|
-
matchBrackets: true,
|
|
29
|
-
indentUnit: 2,
|
|
30
|
-
tabSize: 2,
|
|
31
|
-
cursorScrollMargin: 5,
|
|
32
|
-
}, ...(ngDevMode ? [{ debugName: "codeMirrorOptions" }] : []));
|
|
33
|
-
savedAction = signal('display-large', ...(ngDevMode ? [{ debugName: "savedAction" }] : []));
|
|
219
|
+
savedAction = signal('typescript', ...(ngDevMode ? [{ debugName: "savedAction" }] : []));
|
|
34
220
|
actionCallbackBind = this.actionCallback.bind(this);
|
|
35
221
|
actionCallback(action, updateFormValue = true) {
|
|
36
|
-
this.
|
|
222
|
+
this.savedAction.set(action);
|
|
37
223
|
updateFormValue && this.formGroup().updateValueAndValidity();
|
|
38
224
|
}
|
|
39
225
|
// ! Hotfix for perspective: 2500px;
|
|
@@ -44,48 +230,44 @@ class NgxEditorJs2CodemirrorComponent {
|
|
|
44
230
|
this.waitForAnimation.update(() => true);
|
|
45
231
|
}, 500);
|
|
46
232
|
}
|
|
47
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.
|
|
48
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.
|
|
233
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: NgxEditorJs2CodemirrorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
234
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", type: NgxEditorJs2CodemirrorComponent, isStandalone: true, selector: "ngx-editor-js2-codemirror", inputs: { sortIndex: { classPropertyName: "sortIndex", publicName: "sortIndex", isSignal: true, isRequired: false, transformFunction: null }, autofocus: { classPropertyName: "autofocus", publicName: "autofocus", isSignal: true, isRequired: false, transformFunction: null }, formGroup: { classPropertyName: "formGroup", publicName: "formGroup", isSignal: true, isRequired: true, transformFunction: null }, formControlName: { classPropertyName: "formControlName", publicName: "formControlName", isSignal: true, isRequired: true, transformFunction: null }, blockOptionActions: { classPropertyName: "blockOptionActions", publicName: "blockOptionActions", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "cdk-drag-animating no-toolbar-inline" }, hostDirectives: [{ directive: i1.CdkDrag }], ngImport: i0, template: `
|
|
49
235
|
@if( waitForAnimation() ) {
|
|
50
236
|
<ng-container [formGroup]="formGroup()">
|
|
51
|
-
<
|
|
52
|
-
<ngx-codemirror
|
|
237
|
+
<ngx-codemirror-editor
|
|
53
238
|
class="fade-in"
|
|
54
239
|
toolbarFab
|
|
55
240
|
[actionCallback]="actionCallbackBind"
|
|
56
241
|
[blockOptionActions]="blockOptionActions()"
|
|
242
|
+
[language]="savedAction()"
|
|
57
243
|
[formControlName]="formControlName()"
|
|
58
244
|
[componentContextPositionIndex]="sortIndex()"
|
|
59
|
-
|
|
60
|
-
></ngx-codemirror>
|
|
245
|
+
></ngx-codemirror-editor>
|
|
61
246
|
</ng-container>
|
|
62
247
|
}
|
|
63
|
-
`, isInline: true, styles: [":host{display:block;position:relative;margin:1.5rem 0}:host .codemirror-container-overlay{display:flex;height:100%;width:100%;position:absolute}
|
|
248
|
+
`, isInline: true, styles: [":host{display:block;position:relative;margin:1.5rem 0}:host .codemirror-container-overlay{display:flex;height:100%;width:100%;position:absolute}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: ToolbarFabDirective, selector: "[toolbarFab]", inputs: ["autofocus", "blockOptionActions", "actionCallback", "componentContextPositionIndex", "formControlName"] }, { kind: "component", type: CodemirrorEditorComponent, selector: "ngx-codemirror-editor", inputs: ["value", "language", "readOnly", "heightPx"], outputs: ["valueChange"] }] });
|
|
64
249
|
}
|
|
65
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.
|
|
250
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: NgxEditorJs2CodemirrorComponent, decorators: [{
|
|
66
251
|
type: Component,
|
|
67
252
|
args: [{ selector: 'ngx-editor-js2-codemirror', host: { class: 'cdk-drag-animating no-toolbar-inline' }, hostDirectives: [CdkDrag], imports: [
|
|
68
253
|
ReactiveFormsModule,
|
|
69
|
-
ControlAccessorDirective,
|
|
70
|
-
AutofocusDirective,
|
|
71
254
|
ToolbarFabDirective,
|
|
72
|
-
|
|
255
|
+
CodemirrorEditorComponent,
|
|
73
256
|
], template: `
|
|
74
257
|
@if( waitForAnimation() ) {
|
|
75
258
|
<ng-container [formGroup]="formGroup()">
|
|
76
|
-
<
|
|
77
|
-
<ngx-codemirror
|
|
259
|
+
<ngx-codemirror-editor
|
|
78
260
|
class="fade-in"
|
|
79
261
|
toolbarFab
|
|
80
262
|
[actionCallback]="actionCallbackBind"
|
|
81
263
|
[blockOptionActions]="blockOptionActions()"
|
|
264
|
+
[language]="savedAction()"
|
|
82
265
|
[formControlName]="formControlName()"
|
|
83
266
|
[componentContextPositionIndex]="sortIndex()"
|
|
84
|
-
|
|
85
|
-
></ngx-codemirror>
|
|
267
|
+
></ngx-codemirror-editor>
|
|
86
268
|
</ng-container>
|
|
87
269
|
}
|
|
88
|
-
`, styles: [":host{display:block;position:relative;margin:1.5rem 0}:host .codemirror-container-overlay{display:flex;height:100%;width:100%;position:absolute}
|
|
270
|
+
`, styles: [":host{display:block;position:relative;margin:1.5rem 0}:host .codemirror-container-overlay{display:flex;height:100%;width:100%;position:absolute}\n"] }]
|
|
89
271
|
}], ctorParameters: () => [], propDecorators: { sortIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortIndex", required: false }] }], autofocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "autofocus", required: false }] }], formGroup: [{ type: i0.Input, args: [{ isSignal: true, alias: "formGroup", required: true }] }], formControlName: [{ type: i0.Input, args: [{ isSignal: true, alias: "formControlName", required: true }] }], blockOptionActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "blockOptionActions", required: false }] }] } });
|
|
90
272
|
|
|
91
273
|
/*
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tmdjr-ngx-editor-js2-codemirror.mjs","sources":["../../../projects/ngx-editor-js2-codemirror/src/lib/ngx-editor-js2-codemirror.component.ts","../../../projects/ngx-editor-js2-codemirror/src/public-api.ts","../../../projects/ngx-editor-js2-codemirror/src/tmdjr-ngx-editor-js2-codemirror.ts"],"sourcesContent":["import { CdkDrag } from '@angular/cdk/drag-drop';\nimport { Component, input, signal } from '@angular/core';\nimport { FormGroup, ReactiveFormsModule } from '@angular/forms';\nimport { CodemirrorModule } from '@ctrl/ngx-codemirror';\n\nimport {\n AutofocusDirective,\n BlockComponent,\n BlockOptionAction,\n ControlAccessorDirective,\n ToolbarFabDirective,\n} from '@tmdjr/ngx-editor-js2';\n\n@Component({\n selector: 'ngx-editor-js2-codemirror',\n host: { class: 'cdk-drag-animating no-toolbar-inline' },\n hostDirectives: [CdkDrag],\n imports: [\n ReactiveFormsModule,\n ControlAccessorDirective,\n AutofocusDirective,\n ToolbarFabDirective,\n CodemirrorModule,\n ],\n template: `\n @if( waitForAnimation() ) {\n <ng-container [formGroup]=\"formGroup()\">\n <span controlAccessor [autofocus]=\"autofocus()\"></span>\n <ngx-codemirror\n class=\"fade-in\"\n toolbarFab\n [actionCallback]=\"actionCallbackBind\"\n [blockOptionActions]=\"blockOptionActions()\"\n [formControlName]=\"formControlName()\"\n [componentContextPositionIndex]=\"sortIndex()\"\n [options]=\"codeMirrorOptions()\"\n ></ngx-codemirror>\n </ng-container>\n }\n `,\n styles: [\n `\n :host {\n display: block;\n position: relative;\n margin: 1.5rem 0;\n .codemirror-container-overlay {\n display: flex;\n height: 100%;\n width: 100%;\n position: absolute;\n }\n }\n\n :host ::ng-deep .CodeMirror {\n font-family: Cascadia Code, Fira Code, Menlo, Monaco, 'Courier New',\n monospace;\n font-size: 16px;\n font-weight: 400;\n line-height: 32px;\n letter-spacing: 0.5px;\n height: 100%;\n }\n `,\n ],\n})\nexport class NgxEditorJs2CodemirrorComponent implements BlockComponent {\n sortIndex = input<number>(0);\n componentInstanceName = 'NgxEditorJs2CodemirrorComponent';\n autofocus = input<boolean>(true);\n formGroup = input.required<FormGroup>();\n formControlName = input.required<string>();\n blockOptionActions = input<BlockOptionAction[]>([\n { action: 'text/typescript', icon: 'javascript' },\n { action: 'css', icon: 'css' },\n { action: 'xml', icon: 'html' },\n ]);\n\n codeMirrorOptions = signal({\n lineNumbers: true,\n theme: 'material-palenight',\n mode: 'text/typescript',\n extraKeys: { 'Ctrl-Space': 'autocomplete' },\n styleActiveLine: true, // Highlight active line\n matchBrackets: true,\n indentUnit: 2,\n tabSize: 2,\n cursorScrollMargin: 5,\n });\n\n savedAction = signal<string>('display-large');\n actionCallbackBind = this.actionCallback.bind(this);\n\n actionCallback(action: string, updateFormValue = true) {\n this.codeMirrorOptions.update((prev) => ({ ...prev, mode: action }));\n updateFormValue && this.formGroup().updateValueAndValidity();\n }\n\n // ! Hotfix for perspective: 2500px;\n // Need create a delay to wait for the animation to finish before showing the component\n waitForAnimation = signal<boolean>(false);\n constructor() {\n setTimeout(() => {\n this.waitForAnimation.update(() => true);\n }, 500);\n }\n}\n","/*\n * Public API Surface of ngx-editor-js2-codemirror\n */\n\nexport * from './lib/ngx-editor-js2-codemirror.component';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"tmdjr-ngx-editor-js2-codemirror.mjs","sources":["../../../projects/ngx-editor-js2-codemirror/src/lib/codemirror-editor.component.ts","../../../projects/ngx-editor-js2-codemirror/src/lib/ngx-editor-js2-codemirror.component.ts","../../../projects/ngx-editor-js2-codemirror/src/public-api.ts","../../../projects/ngx-editor-js2-codemirror/src/tmdjr-ngx-editor-js2-codemirror.ts"],"sourcesContent":["import {\n AfterViewInit,\n ChangeDetectionStrategy,\n Component,\n ElementRef,\n EventEmitter,\n Input,\n OnChanges,\n OnDestroy,\n Output,\n SimpleChanges,\n ViewChild,\n forwardRef,\n} from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { defaultKeymap, history, historyKeymap } from '@codemirror/commands';\nimport { css } from '@codemirror/lang-css';\nimport { html } from '@codemirror/lang-html';\nimport { javascript } from '@codemirror/lang-javascript';\nimport { json } from '@codemirror/lang-json';\nimport { markdown } from '@codemirror/lang-markdown';\nimport { bracketMatching } from '@codemirror/language';\nimport { searchKeymap } from '@codemirror/search';\nimport { Compartment, EditorSelection, Extension } from '@codemirror/state';\nimport { EditorView, ViewUpdate, keymap, lineNumbers } from '@codemirror/view';\nimport { synthwave84 } from '@fsegurai/codemirror-theme-synthwave-84';\nimport { basicSetup } from 'codemirror';\n\nexport type CodeMirrorLanguage =\n | 'typescript'\n | 'javascript'\n | 'json'\n | 'markdown'\n | 'css'\n | 'html';\n\n@Component({\n selector: 'ngx-codemirror-editor',\n template: `\n <div\n #editorHost\n class=\"editor-host\"\n [style.height.px]=\"heightPx\"\n [class.read-only]=\"readOnly\"\n ></div>\n `,\n styles: [\n `\n :host {\n display: block;\n }\n\n .editor-host {\n border: 1px solid #d6dbe3;\n border-radius: 8px;\n overflow: hidden;\n background: var(--mat-sys-surface, #000);\n }\n\n .editor-host.read-only {\n opacity: 0.9;\n }\n `,\n ],\n providers: [\n {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => CodemirrorEditorComponent),\n multi: true,\n },\n ],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class CodemirrorEditorComponent\n implements ControlValueAccessor, AfterViewInit, OnChanges, OnDestroy\n{\n @Input() value = '';\n @Output() readonly valueChange = new EventEmitter<string>();\n @Input() language: CodeMirrorLanguage = 'markdown';\n @Input() readOnly = false;\n @Input() heightPx = '';\n\n @ViewChild('editorHost', { static: true })\n private readonly editorHost!: ElementRef<HTMLDivElement>;\n\n private editorView?: EditorView;\n private readonly languageCompartment = new Compartment();\n private readonly readOnlyCompartment = new Compartment();\n private readonly themeCompartment = new Compartment();\n private mediaQuery?: MediaQueryList;\n private readonly onThemeChanged = () => {\n if (!this.editorView) return;\n this.editorView.dispatch({\n effects: this.themeCompartment.reconfigure(this.getThemeExtension()),\n });\n };\n private isWritingFromControl = false;\n\n private onChange: (value: string) => void = () => {};\n private onTouched: () => void = () => {};\n\n ngAfterViewInit(): void {\n this.mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');\n\n const extensions: Extension[] = [\n basicSetup,\n lineNumbers(),\n bracketMatching(),\n keymap.of([...defaultKeymap, ...historyKeymap, ...searchKeymap]),\n history(),\n this.languageCompartment.of(this.getLanguageExtension()),\n this.readOnlyCompartment.of(EditorView.editable.of(!this.readOnly)),\n this.themeCompartment.of(this.getThemeExtension()),\n EditorView.updateListener.of((update: ViewUpdate) => {\n if (!update.docChanged) return;\n const nextValue = update.state.doc.toString();\n this.value = nextValue;\n if (!this.isWritingFromControl) {\n this.onChange(nextValue);\n this.valueChange.emit(nextValue);\n }\n }),\n EditorView.domEventHandlers({\n blur: () => {\n this.onTouched();\n },\n }),\n ];\n\n this.editorView = new EditorView({\n doc: this.value ?? '',\n extensions,\n parent: this.editorHost.nativeElement,\n });\n\n this.mediaQuery.addEventListener('change', this.onThemeChanged);\n }\n\n ngOnChanges(changes: SimpleChanges): void {\n if (!this.editorView) return;\n\n if (\n changes['value'] &&\n typeof this.value === 'string' &&\n this.value !== this.editorView.state.doc.toString()\n ) {\n this.replaceDocument(this.value);\n }\n\n if (changes['language']) {\n this.editorView.dispatch({\n effects: this.languageCompartment.reconfigure(\n this.getLanguageExtension()\n ),\n });\n }\n\n if (changes['readOnly']) {\n this.editorView.dispatch({\n effects: this.readOnlyCompartment.reconfigure(\n EditorView.editable.of(!this.readOnly)\n ),\n });\n }\n }\n\n ngOnDestroy(): void {\n this.mediaQuery?.removeEventListener('change', this.onThemeChanged);\n this.editorView?.destroy();\n }\n\n writeValue(value: string | null): void {\n const next = value ?? '';\n this.value = next;\n if (!this.editorView) return;\n this.replaceDocument(next);\n }\n\n registerOnChange(fn: (value: string) => void): void {\n this.onChange = fn;\n }\n\n registerOnTouched(fn: () => void): void {\n this.onTouched = fn;\n }\n\n setDisabledState(isDisabled: boolean): void {\n this.readOnly = isDisabled;\n if (!this.editorView) return;\n this.editorView.dispatch({\n effects: this.readOnlyCompartment.reconfigure(\n EditorView.editable.of(!this.readOnly)\n ),\n });\n }\n\n private replaceDocument(nextValue: string): void {\n if (!this.editorView) return;\n this.isWritingFromControl = true;\n this.editorView.dispatch({\n changes: {\n from: 0,\n to: this.editorView.state.doc.length,\n insert: nextValue,\n },\n selection: EditorSelection.cursor(nextValue.length),\n });\n this.isWritingFromControl = false;\n }\n\n private getLanguageExtension(): Extension {\n switch (this.language) {\n case 'typescript':\n return javascript({ typescript: true });\n case 'javascript':\n return javascript({ typescript: false });\n case 'json':\n return json();\n case 'markdown':\n return markdown();\n case 'html':\n return html();\n case 'css':\n return css();\n default:\n return javascript({ typescript: true });\n }\n }\n\n private getThemeExtension(): Extension {\n // apply synthwave always, or only in dark mode if you prefer\n return synthwave84;\n // or: return this.mediaQuery?.matches ? synthwave84 : [];\n }\n}\n","import { CdkDrag } from '@angular/cdk/drag-drop';\nimport { Component, input, signal } from '@angular/core';\nimport { FormGroup, ReactiveFormsModule } from '@angular/forms';\nimport {\n BlockComponent,\n BlockOptionAction,\n ToolbarFabDirective,\n} from '@tmdjr/ngx-editor-js2';\nimport {\n CodemirrorEditorComponent,\n CodeMirrorLanguage,\n} from './codemirror-editor.component';\n\n@Component({\n selector: 'ngx-editor-js2-codemirror',\n host: { class: 'cdk-drag-animating no-toolbar-inline' },\n hostDirectives: [CdkDrag],\n imports: [\n ReactiveFormsModule,\n ToolbarFabDirective,\n CodemirrorEditorComponent,\n ],\n template: `\n @if( waitForAnimation() ) {\n <ng-container [formGroup]=\"formGroup()\">\n <ngx-codemirror-editor\n class=\"fade-in\"\n toolbarFab\n [actionCallback]=\"actionCallbackBind\"\n [blockOptionActions]=\"blockOptionActions()\"\n [language]=\"savedAction()\"\n [formControlName]=\"formControlName()\"\n [componentContextPositionIndex]=\"sortIndex()\"\n ></ngx-codemirror-editor>\n </ng-container>\n }\n `,\n styles: [\n `\n :host {\n display: block;\n position: relative;\n margin: 1.5rem 0;\n .codemirror-container-overlay {\n display: flex;\n height: 100%;\n width: 100%;\n position: absolute;\n }\n }\n `,\n ],\n})\nexport class NgxEditorJs2CodemirrorComponent implements BlockComponent {\n sortIndex = input<number>(0);\n componentInstanceName = 'NgxEditorJs2CodemirrorComponent';\n autofocus = input<boolean>(true);\n formGroup = input.required<FormGroup>();\n formControlName = input.required<string>();\n blockOptionActions = input<BlockOptionAction[]>([\n { action: 'typescript', devIcon: 'devicon-typescript-plain' },\n { action: 'javascript', devIcon: 'devicon-javascript-plain' },\n { action: 'html', devIcon: 'devicon-html5-plain' },\n { action: 'json', devIcon: 'devicon-json-plain' },\n { action: 'markdown', devIcon: 'devicon-markdown-original' },\n { action: 'css', devIcon: 'devicon-css3-plain' },\n ]);\n\n savedAction = signal<CodeMirrorLanguage>('typescript');\n actionCallbackBind = this.actionCallback.bind(this);\n\n actionCallback(action: string, updateFormValue = true) {\n this.savedAction.set(action as CodeMirrorLanguage);\n updateFormValue && this.formGroup().updateValueAndValidity();\n }\n\n // ! Hotfix for perspective: 2500px;\n // Need create a delay to wait for the animation to finish before showing the component\n waitForAnimation = signal<boolean>(false);\n constructor() {\n setTimeout(() => {\n this.waitForAnimation.update(() => true);\n }, 500);\n }\n}\n","/*\n * Public API Surface of ngx-editor-js2-codemirror\n */\n\nexport * from './lib/ngx-editor-js2-codemirror.component';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -3,6 +3,8 @@ import { FormGroup } from '@angular/forms';
|
|
|
3
3
|
import { BlockComponent, BlockOptionAction } from '@tmdjr/ngx-editor-js2';
|
|
4
4
|
import * as i1 from '@angular/cdk/drag-drop';
|
|
5
5
|
|
|
6
|
+
type CodeMirrorLanguage = 'typescript' | 'javascript' | 'json' | 'markdown' | 'css' | 'html';
|
|
7
|
+
|
|
6
8
|
declare class NgxEditorJs2CodemirrorComponent implements BlockComponent {
|
|
7
9
|
sortIndex: _angular_core.InputSignal<number>;
|
|
8
10
|
componentInstanceName: string;
|
|
@@ -10,20 +12,7 @@ declare class NgxEditorJs2CodemirrorComponent implements BlockComponent {
|
|
|
10
12
|
formGroup: _angular_core.InputSignal<FormGroup<any>>;
|
|
11
13
|
formControlName: _angular_core.InputSignal<string>;
|
|
12
14
|
blockOptionActions: _angular_core.InputSignal<BlockOptionAction[]>;
|
|
13
|
-
|
|
14
|
-
lineNumbers: boolean;
|
|
15
|
-
theme: string;
|
|
16
|
-
mode: string;
|
|
17
|
-
extraKeys: {
|
|
18
|
-
'Ctrl-Space': string;
|
|
19
|
-
};
|
|
20
|
-
styleActiveLine: boolean;
|
|
21
|
-
matchBrackets: boolean;
|
|
22
|
-
indentUnit: number;
|
|
23
|
-
tabSize: number;
|
|
24
|
-
cursorScrollMargin: number;
|
|
25
|
-
}>;
|
|
26
|
-
savedAction: _angular_core.WritableSignal<string>;
|
|
15
|
+
savedAction: _angular_core.WritableSignal<CodeMirrorLanguage>;
|
|
27
16
|
actionCallbackBind: (action: string, updateFormValue?: boolean) => void;
|
|
28
17
|
actionCallback(action: string, updateFormValue?: boolean): void;
|
|
29
18
|
waitForAnimation: _angular_core.WritableSignal<boolean>;
|