@covalent/code-editor 3.1.2 → 4.0.0-beta.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/code-editor.component.d.ts +6 -1
- package/code-editor.component.scss +2 -1
- package/code-editor.module.d.ts +6 -0
- package/covalent-code-editor.d.ts +1 -0
- package/esm2020/code-editor.component.mjs +425 -0
- package/esm2020/code-editor.module.mjs +20 -0
- package/esm2020/covalent-code-editor.mjs +5 -0
- package/esm2020/index.mjs +2 -0
- package/esm2020/public-api.mjs +3 -0
- package/fesm2015/covalent-code-editor.mjs +456 -0
- package/fesm2015/covalent-code-editor.mjs.map +1 -0
- package/{fesm2015/covalent-code-editor.js → fesm2020/covalent-code-editor.mjs} +111 -373
- package/fesm2020/covalent-code-editor.mjs.map +1 -0
- package/package.json +30 -15
- package/bundles/covalent-code-editor.umd.js +0 -1067
- package/bundles/covalent-code-editor.umd.js.map +0 -1
- package/bundles/covalent-code-editor.umd.min.js +0 -16
- package/bundles/covalent-code-editor.umd.min.js.map +0 -1
- package/covalent-code-editor.metadata.json +0 -1
- package/esm2015/code-editor.component.js +0 -674
- package/esm2015/code-editor.module.js +0 -19
- package/esm2015/covalent-code-editor.js +0 -10
- package/esm2015/index.js +0 -7
- package/esm2015/public-api.js +0 -8
- package/fesm2015/covalent-code-editor.js.map +0 -1
|
@@ -1,33 +1,19 @@
|
|
|
1
|
-
import
|
|
1
|
+
import * as i0 from '@angular/core';
|
|
2
|
+
import { EventEmitter, forwardRef, Component, ViewChild, Output, Input, NgModule } from '@angular/core';
|
|
2
3
|
import { NG_VALUE_ACCESSOR } from '@angular/forms';
|
|
3
4
|
import { Subject, merge, fromEvent, timer } from 'rxjs';
|
|
4
5
|
import { debounceTime, distinctUntilChanged, takeUntil } from 'rxjs/operators';
|
|
5
|
-
import
|
|
6
|
+
import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
|
|
6
7
|
import { CommonModule } from '@angular/common';
|
|
7
8
|
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
* Generated from: code-editor.component.ts
|
|
11
|
-
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
|
|
12
|
-
*/
|
|
13
|
-
/** @type {?} */
|
|
14
|
-
const noop = (/**
|
|
15
|
-
* @return {?}
|
|
16
|
-
*/
|
|
17
|
-
() => {
|
|
9
|
+
const _c0 = ["editorContainer"];
|
|
10
|
+
const noop = () => {
|
|
18
11
|
// empty method
|
|
19
|
-
}
|
|
20
|
-
const ɵ0 = noop;
|
|
12
|
+
};
|
|
21
13
|
// counter for ids to allow for multiple editors on one page
|
|
22
|
-
/** @type {?} */
|
|
23
14
|
let uniqueCounter = 0;
|
|
24
15
|
class TdCodeEditorComponent {
|
|
25
16
|
// tslint:disable-next-line:member-ordering
|
|
26
|
-
/**
|
|
27
|
-
* @param {?} zone
|
|
28
|
-
* @param {?} _changeDetectorRef
|
|
29
|
-
* @param {?} _elementRef
|
|
30
|
-
*/
|
|
31
17
|
constructor(zone, _changeDetectorRef, _elementRef) {
|
|
32
18
|
this.zone = zone;
|
|
33
19
|
this._changeDetectorRef = _changeDetectorRef;
|
|
@@ -72,20 +58,11 @@ class TdCodeEditorComponent {
|
|
|
72
58
|
*/
|
|
73
59
|
this.change = new EventEmitter();
|
|
74
60
|
/* tslint:disable-next-line */
|
|
75
|
-
this.propagateChange = (
|
|
76
|
-
|
|
77
|
-
* @return {?}
|
|
78
|
-
*/
|
|
79
|
-
(_) => { });
|
|
80
|
-
this.onTouched = (/**
|
|
81
|
-
* @return {?}
|
|
82
|
-
*/
|
|
83
|
-
() => noop);
|
|
61
|
+
this.propagateChange = (_) => { };
|
|
62
|
+
this.onTouched = () => noop;
|
|
84
63
|
}
|
|
85
64
|
/**
|
|
86
65
|
* value?: string
|
|
87
|
-
* @param {?} value
|
|
88
|
-
* @return {?}
|
|
89
66
|
*/
|
|
90
67
|
set value(value) {
|
|
91
68
|
if (value === this._value) {
|
|
@@ -96,15 +73,9 @@ class TdCodeEditorComponent {
|
|
|
96
73
|
this.applyValue();
|
|
97
74
|
}
|
|
98
75
|
}
|
|
99
|
-
/**
|
|
100
|
-
* @return {?}
|
|
101
|
-
*/
|
|
102
76
|
get value() {
|
|
103
77
|
return this._value;
|
|
104
78
|
}
|
|
105
|
-
/**
|
|
106
|
-
* @return {?}
|
|
107
|
-
*/
|
|
108
79
|
applyValue() {
|
|
109
80
|
if (!this._fromEditor) {
|
|
110
81
|
this._editor.setValue(this._value);
|
|
@@ -116,8 +87,6 @@ class TdCodeEditorComponent {
|
|
|
116
87
|
}
|
|
117
88
|
/**
|
|
118
89
|
* Implemented as part of ControlValueAccessor.
|
|
119
|
-
* @param {?} value
|
|
120
|
-
* @return {?}
|
|
121
90
|
*/
|
|
122
91
|
writeValue(value) {
|
|
123
92
|
// do not write if null or undefined
|
|
@@ -126,43 +95,29 @@ class TdCodeEditorComponent {
|
|
|
126
95
|
this.value = value;
|
|
127
96
|
}
|
|
128
97
|
}
|
|
129
|
-
/**
|
|
130
|
-
* @param {?} fn
|
|
131
|
-
* @return {?}
|
|
132
|
-
*/
|
|
133
98
|
registerOnChange(fn) {
|
|
134
99
|
this.propagateChange = fn;
|
|
135
100
|
}
|
|
136
|
-
/**
|
|
137
|
-
* @param {?} fn
|
|
138
|
-
* @return {?}
|
|
139
|
-
*/
|
|
140
101
|
registerOnTouched(fn) {
|
|
141
102
|
this.onTouched = fn;
|
|
142
103
|
}
|
|
143
104
|
/**
|
|
144
105
|
* getEditorContent?: function
|
|
145
106
|
* Returns the content within the editor
|
|
146
|
-
* @return {?}
|
|
147
107
|
*/
|
|
148
108
|
getValue() {
|
|
149
109
|
if (this._componentInitialized) {
|
|
150
|
-
setTimeout((
|
|
151
|
-
* @return {?}
|
|
152
|
-
*/
|
|
153
|
-
() => {
|
|
110
|
+
setTimeout(() => {
|
|
154
111
|
this._subject.next(this._value);
|
|
155
112
|
this._subject.complete();
|
|
156
113
|
this._subject = new Subject();
|
|
157
|
-
})
|
|
114
|
+
});
|
|
158
115
|
return this._subject.asObservable();
|
|
159
116
|
}
|
|
160
117
|
}
|
|
161
118
|
/**
|
|
162
119
|
* language?: string
|
|
163
120
|
* language used in editor
|
|
164
|
-
* @param {?} language
|
|
165
|
-
* @return {?}
|
|
166
121
|
*/
|
|
167
122
|
set language(language) {
|
|
168
123
|
this._language = language;
|
|
@@ -170,26 +125,18 @@ class TdCodeEditorComponent {
|
|
|
170
125
|
this.applyLanguage();
|
|
171
126
|
}
|
|
172
127
|
}
|
|
173
|
-
/**
|
|
174
|
-
* @return {?}
|
|
175
|
-
*/
|
|
176
128
|
get language() {
|
|
177
129
|
return this._language;
|
|
178
130
|
}
|
|
179
|
-
/**
|
|
180
|
-
* @return {?}
|
|
181
|
-
*/
|
|
182
131
|
applyLanguage() {
|
|
183
132
|
if (this._language) {
|
|
184
|
-
editor.setModelLanguage(this._editor.getModel(), this._language);
|
|
133
|
+
monaco.editor.setModelLanguage(this._editor.getModel(), this._language);
|
|
185
134
|
this.editorLanguageChanged.emit();
|
|
186
135
|
}
|
|
187
136
|
}
|
|
188
137
|
/**
|
|
189
138
|
* registerLanguage?: function
|
|
190
139
|
* Registers a custom Language within the editor
|
|
191
|
-
* @param {?} language
|
|
192
|
-
* @return {?}
|
|
193
140
|
*/
|
|
194
141
|
registerLanguage(language) {
|
|
195
142
|
if (this._componentInitialized) {
|
|
@@ -201,24 +148,20 @@ class TdCodeEditorComponent {
|
|
|
201
148
|
/* tslint:disable-next-line */
|
|
202
149
|
monarchTokens[0] = eval(monarchTokens[0]);
|
|
203
150
|
}
|
|
204
|
-
languages.register({ id: language.id });
|
|
205
|
-
languages.setMonarchTokensProvider(language.id, {
|
|
151
|
+
monaco.languages.register({ id: language.id });
|
|
152
|
+
monaco.languages.setMonarchTokensProvider(language.id, {
|
|
206
153
|
tokenizer: {
|
|
207
154
|
root: language.monarchTokensProvider,
|
|
208
155
|
},
|
|
209
156
|
});
|
|
210
157
|
// Define a new theme that constains only rules that match this language
|
|
211
|
-
editor.defineTheme(language.customTheme.id, language.customTheme.theme);
|
|
158
|
+
monaco.editor.defineTheme(language.customTheme.id, language.customTheme.theme);
|
|
212
159
|
this._theme = language.customTheme.id;
|
|
213
|
-
languages.registerCompletionItemProvider(language.id, {
|
|
214
|
-
provideCompletionItems: (
|
|
215
|
-
* @return {?}
|
|
216
|
-
*/
|
|
217
|
-
() => {
|
|
160
|
+
monaco.languages.registerCompletionItemProvider(language.id, {
|
|
161
|
+
provideCompletionItems: () => {
|
|
218
162
|
return language.completionItemProvider;
|
|
219
|
-
}
|
|
163
|
+
},
|
|
220
164
|
});
|
|
221
|
-
/** @type {?} */
|
|
222
165
|
const css = document.createElement('style');
|
|
223
166
|
css.type = 'text/css';
|
|
224
167
|
css.innerHTML = language.monarchTokensProviderCSS;
|
|
@@ -230,8 +173,6 @@ class TdCodeEditorComponent {
|
|
|
230
173
|
/**
|
|
231
174
|
* style?: string
|
|
232
175
|
* css style of the editor on the page
|
|
233
|
-
* @param {?} editorStyle
|
|
234
|
-
* @return {?}
|
|
235
176
|
*/
|
|
236
177
|
set editorStyle(editorStyle) {
|
|
237
178
|
this._editorStyle = editorStyle;
|
|
@@ -239,18 +180,11 @@ class TdCodeEditorComponent {
|
|
|
239
180
|
this.applyStyle();
|
|
240
181
|
}
|
|
241
182
|
}
|
|
242
|
-
/**
|
|
243
|
-
* @return {?}
|
|
244
|
-
*/
|
|
245
183
|
get editorStyle() {
|
|
246
184
|
return this._editorStyle;
|
|
247
185
|
}
|
|
248
|
-
/**
|
|
249
|
-
* @return {?}
|
|
250
|
-
*/
|
|
251
186
|
applyStyle() {
|
|
252
187
|
if (this._editorStyle) {
|
|
253
|
-
/** @type {?} */
|
|
254
188
|
const containerDiv = this._editorContainer.nativeElement;
|
|
255
189
|
containerDiv.setAttribute('style', this._editorStyle);
|
|
256
190
|
}
|
|
@@ -258,8 +192,6 @@ class TdCodeEditorComponent {
|
|
|
258
192
|
/**
|
|
259
193
|
* theme?: string
|
|
260
194
|
* Theme to be applied to editor
|
|
261
|
-
* @param {?} theme
|
|
262
|
-
* @return {?}
|
|
263
195
|
*/
|
|
264
196
|
set theme(theme) {
|
|
265
197
|
this._theme = theme;
|
|
@@ -268,9 +200,6 @@ class TdCodeEditorComponent {
|
|
|
268
200
|
this.editorConfigurationChanged.emit();
|
|
269
201
|
}
|
|
270
202
|
}
|
|
271
|
-
/**
|
|
272
|
-
* @return {?}
|
|
273
|
-
*/
|
|
274
203
|
get theme() {
|
|
275
204
|
return this._theme;
|
|
276
205
|
}
|
|
@@ -278,15 +207,10 @@ class TdCodeEditorComponent {
|
|
|
278
207
|
* fullScreenKeyBinding?: number
|
|
279
208
|
* See here for key bindings https://microsoft.github.io/monaco-editor/api/enums/monaco.keycode.html
|
|
280
209
|
* Sets the KeyCode for shortcutting to Fullscreen mode
|
|
281
|
-
* @param {?} keycode
|
|
282
|
-
* @return {?}
|
|
283
210
|
*/
|
|
284
211
|
set fullScreenKeyBinding(keycode) {
|
|
285
212
|
this._keycode = keycode;
|
|
286
213
|
}
|
|
287
|
-
/**
|
|
288
|
-
* @return {?}
|
|
289
|
-
*/
|
|
290
214
|
get fullScreenKeyBinding() {
|
|
291
215
|
return this._keycode;
|
|
292
216
|
}
|
|
@@ -294,8 +218,6 @@ class TdCodeEditorComponent {
|
|
|
294
218
|
* editorOptions?: object
|
|
295
219
|
* Options used on editor instantiation. Available options listed here:
|
|
296
220
|
* https://microsoft.github.io/monaco-editor/api/interfaces/monaco.editor.ieditoroptions.html
|
|
297
|
-
* @param {?} editorOptions
|
|
298
|
-
* @return {?}
|
|
299
221
|
*/
|
|
300
222
|
set editorOptions(editorOptions) {
|
|
301
223
|
this._editorOptions = editorOptions;
|
|
@@ -304,15 +226,11 @@ class TdCodeEditorComponent {
|
|
|
304
226
|
this.editorConfigurationChanged.emit();
|
|
305
227
|
}
|
|
306
228
|
}
|
|
307
|
-
/**
|
|
308
|
-
* @return {?}
|
|
309
|
-
*/
|
|
310
229
|
get editorOptions() {
|
|
311
230
|
return this._editorOptions;
|
|
312
231
|
}
|
|
313
232
|
/**
|
|
314
233
|
* layout method that calls layout method of editor and instructs the editor to remeasure its container
|
|
315
|
-
* @return {?}
|
|
316
234
|
*/
|
|
317
235
|
layout() {
|
|
318
236
|
if (this._componentInitialized) {
|
|
@@ -321,112 +239,80 @@ class TdCodeEditorComponent {
|
|
|
321
239
|
}
|
|
322
240
|
/**
|
|
323
241
|
* Returns if in Full Screen Mode or not
|
|
324
|
-
* @return {?}
|
|
325
242
|
*/
|
|
326
243
|
get isFullScreen() {
|
|
327
244
|
return this._isFullScreen;
|
|
328
245
|
}
|
|
329
|
-
/**
|
|
330
|
-
* @return {?}
|
|
331
|
-
*/
|
|
332
246
|
ngOnInit() {
|
|
333
|
-
/** @type {?} */
|
|
334
247
|
const containerDiv = this._editorContainer.nativeElement;
|
|
335
248
|
containerDiv.id = this._editorInnerContainer;
|
|
336
|
-
this._editor = editor.create(containerDiv, Object.assign({
|
|
249
|
+
this._editor = monaco.editor.create(containerDiv, Object.assign({
|
|
337
250
|
value: this._value,
|
|
338
251
|
language: this.language,
|
|
339
252
|
theme: this._theme,
|
|
340
253
|
}, this.editorOptions));
|
|
341
254
|
this._componentInitialized = true;
|
|
342
|
-
setTimeout((
|
|
343
|
-
* @return {?}
|
|
344
|
-
*/
|
|
345
|
-
() => {
|
|
255
|
+
setTimeout(() => {
|
|
346
256
|
this.applyLanguage();
|
|
347
257
|
this._fromEditor = true;
|
|
348
258
|
this.applyValue();
|
|
349
259
|
this.applyStyle();
|
|
350
260
|
this.editorInitialized.emit(this._editor);
|
|
351
261
|
this.editorConfigurationChanged.emit();
|
|
352
|
-
})
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
(e) => {
|
|
262
|
+
});
|
|
263
|
+
// The `onDidChangeContent` returns a disposable object (an object with `dispose()` method) which will cleanup
|
|
264
|
+
// the listener. The callback, that we pass to `onDidChangeContent`, captures `this`. This leads to a circular reference
|
|
265
|
+
// (`td-code-editor -> monaco -> td-code-editor`) and prevents the `td-code-editor` from being GC'd.
|
|
266
|
+
this._onDidChangeContentDisposable = this._editor.getModel().onDidChangeContent((e) => {
|
|
358
267
|
this._fromEditor = true;
|
|
359
268
|
this.writeValue(this._editor.getValue());
|
|
360
269
|
this.layout();
|
|
361
|
-
})
|
|
270
|
+
});
|
|
362
271
|
this.addFullScreenModeCommand();
|
|
363
272
|
merge(fromEvent(window, 'resize').pipe(debounceTime(100)), this._widthSubject.asObservable().pipe(distinctUntilChanged()), this._heightSubject.asObservable().pipe(distinctUntilChanged()))
|
|
364
273
|
.pipe(takeUntil(this._destroy), debounceTime(100))
|
|
365
|
-
.subscribe((
|
|
366
|
-
* @return {?}
|
|
367
|
-
*/
|
|
368
|
-
() => {
|
|
274
|
+
.subscribe(() => {
|
|
369
275
|
this.layout();
|
|
370
276
|
this._changeDetectorRef.markForCheck();
|
|
371
|
-
})
|
|
277
|
+
});
|
|
372
278
|
timer(500, 250)
|
|
373
279
|
.pipe(takeUntil(this._destroy))
|
|
374
|
-
.subscribe((
|
|
375
|
-
* @return {?}
|
|
376
|
-
*/
|
|
377
|
-
() => {
|
|
280
|
+
.subscribe(() => {
|
|
378
281
|
if (this._elementRef && this._elementRef.nativeElement) {
|
|
379
|
-
this._widthSubject.next(
|
|
380
|
-
this._heightSubject.next(
|
|
282
|
+
this._widthSubject.next(this._elementRef.nativeElement.getBoundingClientRect().width);
|
|
283
|
+
this._heightSubject.next(this._elementRef.nativeElement.getBoundingClientRect().height);
|
|
381
284
|
}
|
|
382
|
-
})
|
|
285
|
+
});
|
|
383
286
|
}
|
|
384
|
-
/**
|
|
385
|
-
* @return {?}
|
|
386
|
-
*/
|
|
387
287
|
ngOnDestroy() {
|
|
388
288
|
this._changeDetectorRef.detach();
|
|
389
|
-
this._registeredLanguagesStyles.forEach((
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
289
|
+
this._registeredLanguagesStyles.forEach((style) => style.remove());
|
|
290
|
+
if (this._onDidChangeContentDisposable) {
|
|
291
|
+
this._onDidChangeContentDisposable.dispose();
|
|
292
|
+
this._onDidChangeContentDisposable = undefined;
|
|
293
|
+
}
|
|
394
294
|
if (this._editor) {
|
|
395
295
|
this._editor.dispose();
|
|
296
|
+
this._editor = undefined;
|
|
396
297
|
}
|
|
397
298
|
this._destroy.next(true);
|
|
398
299
|
this._destroy.unsubscribe();
|
|
399
300
|
}
|
|
400
301
|
/**
|
|
401
302
|
* showFullScreenEditor request for full screen of Code Editor based on its browser type.
|
|
402
|
-
* @return {?}
|
|
403
303
|
*/
|
|
404
304
|
showFullScreenEditor() {
|
|
405
305
|
if (this._componentInitialized) {
|
|
406
|
-
|
|
407
|
-
const codeEditorElement = (/** @type {?} */ (this._editorContainer.nativeElement));
|
|
408
|
-
/** @type {?} */
|
|
306
|
+
const codeEditorElement = this._editorContainer.nativeElement;
|
|
409
307
|
const fullScreenMap = {
|
|
410
308
|
// Chrome
|
|
411
|
-
requestFullscreen: (
|
|
412
|
-
* @return {?}
|
|
413
|
-
*/
|
|
414
|
-
() => codeEditorElement.requestFullscreen()),
|
|
309
|
+
requestFullscreen: () => codeEditorElement.requestFullscreen(),
|
|
415
310
|
// Safari
|
|
416
|
-
webkitRequestFullscreen: (
|
|
417
|
-
* @return {?}
|
|
418
|
-
*/
|
|
419
|
-
() => ((/** @type {?} */ (codeEditorElement))).webkitRequestFullscreen()),
|
|
311
|
+
webkitRequestFullscreen: () => codeEditorElement.webkitRequestFullscreen(),
|
|
420
312
|
// IE
|
|
421
|
-
msRequestFullscreen: (
|
|
422
|
-
* @return {?}
|
|
423
|
-
*/
|
|
424
|
-
() => ((/** @type {?} */ (codeEditorElement))).msRequestFullscreen()),
|
|
313
|
+
msRequestFullscreen: () => codeEditorElement.msRequestFullscreen(),
|
|
425
314
|
// Firefox
|
|
426
|
-
mozRequestFullScreen: (
|
|
427
|
-
* @return {?}
|
|
428
|
-
*/
|
|
429
|
-
() => ((/** @type {?} */ (codeEditorElement))).mozRequestFullScreen()),
|
|
315
|
+
mozRequestFullScreen: () => codeEditorElement.mozRequestFullScreen(),
|
|
430
316
|
};
|
|
431
317
|
for (const handler of Object.keys(fullScreenMap)) {
|
|
432
318
|
if (codeEditorElement[handler]) {
|
|
@@ -438,32 +324,18 @@ class TdCodeEditorComponent {
|
|
|
438
324
|
}
|
|
439
325
|
/**
|
|
440
326
|
* exitFullScreenEditor request to exit full screen of Code Editor based on its browser type.
|
|
441
|
-
* @return {?}
|
|
442
327
|
*/
|
|
443
328
|
exitFullScreenEditor() {
|
|
444
329
|
if (this._componentInitialized) {
|
|
445
|
-
/** @type {?} */
|
|
446
330
|
const exitFullScreenMap = {
|
|
447
331
|
// Chrome
|
|
448
|
-
exitFullscreen: (
|
|
449
|
-
* @return {?}
|
|
450
|
-
*/
|
|
451
|
-
() => document.exitFullscreen()),
|
|
332
|
+
exitFullscreen: () => document.exitFullscreen(),
|
|
452
333
|
// Safari
|
|
453
|
-
webkitExitFullscreen: (
|
|
454
|
-
* @return {?}
|
|
455
|
-
*/
|
|
456
|
-
() => ((/** @type {?} */ (document))).webkitExitFullscreen()),
|
|
334
|
+
webkitExitFullscreen: () => document.webkitExitFullscreen(),
|
|
457
335
|
// Firefox
|
|
458
|
-
mozCancelFullScreen: (
|
|
459
|
-
* @return {?}
|
|
460
|
-
*/
|
|
461
|
-
() => ((/** @type {?} */ (document))).mozCancelFullScreen()),
|
|
336
|
+
mozCancelFullScreen: () => document.mozCancelFullScreen(),
|
|
462
337
|
// IE
|
|
463
|
-
msExitFullscreen: (
|
|
464
|
-
* @return {?}
|
|
465
|
-
*/
|
|
466
|
-
() => ((/** @type {?} */ (document))).msExitFullscreen()),
|
|
338
|
+
msExitFullscreen: () => document.msExitFullscreen(),
|
|
467
339
|
};
|
|
468
340
|
for (const handler of Object.keys(exitFullScreenMap)) {
|
|
469
341
|
if (document[handler]) {
|
|
@@ -475,8 +347,6 @@ class TdCodeEditorComponent {
|
|
|
475
347
|
}
|
|
476
348
|
/**
|
|
477
349
|
* addFullScreenModeCommand used to add the fullscreen option to the context menu
|
|
478
|
-
* @private
|
|
479
|
-
* @return {?}
|
|
480
350
|
*/
|
|
481
351
|
addFullScreenModeCommand() {
|
|
482
352
|
this._editor.addAction({
|
|
@@ -490,220 +360,88 @@ class TdCodeEditorComponent {
|
|
|
490
360
|
contextMenuOrder: 1.5,
|
|
491
361
|
// Method that will be executed when the action is triggered.
|
|
492
362
|
// @param editor The editor instance is passed in as a convinience
|
|
493
|
-
run: (
|
|
494
|
-
* @param {?} ed
|
|
495
|
-
* @return {?}
|
|
496
|
-
*/
|
|
497
|
-
(ed) => {
|
|
363
|
+
run: (ed) => {
|
|
498
364
|
this.showFullScreenEditor();
|
|
499
|
-
}
|
|
365
|
+
},
|
|
500
366
|
});
|
|
501
367
|
}
|
|
502
368
|
}
|
|
503
|
-
TdCodeEditorComponent
|
|
504
|
-
|
|
505
|
-
|
|
506
|
-
|
|
507
|
-
|
|
369
|
+
/** @nocollapse */ /** @nocollapse */ TdCodeEditorComponent.ɵfac = function TdCodeEditorComponent_Factory(t) { return new (t || TdCodeEditorComponent)(i0.ɵɵdirectiveInject(i0.NgZone), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i0.ElementRef)); };
|
|
370
|
+
/** @nocollapse */ /** @nocollapse */ TdCodeEditorComponent.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: TdCodeEditorComponent, selectors: [["td-code-editor"]], viewQuery: function TdCodeEditorComponent_Query(rf, ctx) { if (rf & 1) {
|
|
371
|
+
i0.ɵɵviewQuery(_c0, 7);
|
|
372
|
+
} if (rf & 2) {
|
|
373
|
+
let _t;
|
|
374
|
+
i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx._editorContainer = _t.first);
|
|
375
|
+
} }, inputs: { value: "value", language: "language", editorStyle: "editorStyle", theme: "theme", fullScreenKeyBinding: "fullScreenKeyBinding", editorOptions: "editorOptions" }, outputs: { editorInitialized: "editorInitialized", editorConfigurationChanged: "editorConfigurationChanged", editorLanguageChanged: "editorLanguageChanged", editorValueChange: "editorValueChange", change: "change" }, features: [i0.ɵɵProvidersFeature([
|
|
376
|
+
{
|
|
377
|
+
provide: NG_VALUE_ACCESSOR,
|
|
378
|
+
useExisting: forwardRef((() => TdCodeEditorComponent)),
|
|
379
|
+
multi: true,
|
|
380
|
+
},
|
|
381
|
+
])], decls: 2, vars: 0, consts: [[1, "editor-container"], ["editorContainer", ""]], template: function TdCodeEditorComponent_Template(rf, ctx) { if (rf & 1) {
|
|
382
|
+
i0.ɵɵelement(0, "div", 0, 1);
|
|
383
|
+
} }, styles: ["[_nghost-%COMP%]{display:block;position:relative}[_nghost-%COMP%] .editor-container[_ngcontent-%COMP%]{position:absolute;top:0;bottom:0;left:0;right:0} .monaco-aria-container{display:none}"] });
|
|
384
|
+
(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TdCodeEditorComponent, [{
|
|
385
|
+
type: Component,
|
|
386
|
+
args: [{ selector: 'td-code-editor', providers: [
|
|
508
387
|
{
|
|
509
388
|
provide: NG_VALUE_ACCESSOR,
|
|
510
|
-
useExisting: forwardRef((
|
|
511
|
-
* @return {?}
|
|
512
|
-
*/
|
|
513
|
-
() => TdCodeEditorComponent)),
|
|
389
|
+
useExisting: forwardRef((() => TdCodeEditorComponent)),
|
|
514
390
|
multi: true,
|
|
515
391
|
},
|
|
516
|
-
],
|
|
517
|
-
|
|
518
|
-
|
|
519
|
-
]
|
|
520
|
-
|
|
521
|
-
|
|
522
|
-
|
|
523
|
-
|
|
524
|
-
|
|
525
|
-
|
|
526
|
-
|
|
527
|
-
|
|
528
|
-
|
|
529
|
-
|
|
530
|
-
|
|
531
|
-
|
|
532
|
-
|
|
533
|
-
|
|
534
|
-
|
|
535
|
-
|
|
536
|
-
|
|
537
|
-
|
|
538
|
-
|
|
539
|
-
}
|
|
540
|
-
|
|
541
|
-
|
|
542
|
-
|
|
543
|
-
|
|
544
|
-
|
|
545
|
-
|
|
546
|
-
|
|
547
|
-
|
|
548
|
-
|
|
549
|
-
*/
|
|
550
|
-
TdCodeEditorComponent.prototype._widthSubject;
|
|
551
|
-
/**
|
|
552
|
-
* @type {?}
|
|
553
|
-
* @private
|
|
554
|
-
*/
|
|
555
|
-
TdCodeEditorComponent.prototype._heightSubject;
|
|
556
|
-
/**
|
|
557
|
-
* @type {?}
|
|
558
|
-
* @private
|
|
559
|
-
*/
|
|
560
|
-
TdCodeEditorComponent.prototype._editorStyle;
|
|
561
|
-
/**
|
|
562
|
-
* @type {?}
|
|
563
|
-
* @private
|
|
564
|
-
*/
|
|
565
|
-
TdCodeEditorComponent.prototype._value;
|
|
566
|
-
/**
|
|
567
|
-
* @type {?}
|
|
568
|
-
* @private
|
|
569
|
-
*/
|
|
570
|
-
TdCodeEditorComponent.prototype._theme;
|
|
571
|
-
/**
|
|
572
|
-
* @type {?}
|
|
573
|
-
* @private
|
|
574
|
-
*/
|
|
575
|
-
TdCodeEditorComponent.prototype._language;
|
|
576
|
-
/**
|
|
577
|
-
* @type {?}
|
|
578
|
-
* @private
|
|
579
|
-
*/
|
|
580
|
-
TdCodeEditorComponent.prototype._subject;
|
|
581
|
-
/**
|
|
582
|
-
* @type {?}
|
|
583
|
-
* @private
|
|
584
|
-
*/
|
|
585
|
-
TdCodeEditorComponent.prototype._editorInnerContainer;
|
|
586
|
-
/**
|
|
587
|
-
* @type {?}
|
|
588
|
-
* @private
|
|
589
|
-
*/
|
|
590
|
-
TdCodeEditorComponent.prototype._editor;
|
|
591
|
-
/**
|
|
592
|
-
* @type {?}
|
|
593
|
-
* @private
|
|
594
|
-
*/
|
|
595
|
-
TdCodeEditorComponent.prototype._fromEditor;
|
|
596
|
-
/**
|
|
597
|
-
* @type {?}
|
|
598
|
-
* @private
|
|
599
|
-
*/
|
|
600
|
-
TdCodeEditorComponent.prototype._componentInitialized;
|
|
601
|
-
/**
|
|
602
|
-
* @type {?}
|
|
603
|
-
* @private
|
|
604
|
-
*/
|
|
605
|
-
TdCodeEditorComponent.prototype._editorOptions;
|
|
606
|
-
/**
|
|
607
|
-
* @type {?}
|
|
608
|
-
* @private
|
|
609
|
-
*/
|
|
610
|
-
TdCodeEditorComponent.prototype._isFullScreen;
|
|
611
|
-
/**
|
|
612
|
-
* @type {?}
|
|
613
|
-
* @private
|
|
614
|
-
*/
|
|
615
|
-
TdCodeEditorComponent.prototype._keycode;
|
|
616
|
-
/**
|
|
617
|
-
* @type {?}
|
|
618
|
-
* @private
|
|
619
|
-
*/
|
|
620
|
-
TdCodeEditorComponent.prototype._registeredLanguagesStyles;
|
|
621
|
-
/** @type {?} */
|
|
622
|
-
TdCodeEditorComponent.prototype._editorContainer;
|
|
623
|
-
/**
|
|
624
|
-
* editorInitialized: function($event)
|
|
625
|
-
* Event emitted when editor is first initialized
|
|
626
|
-
* @type {?}
|
|
627
|
-
*/
|
|
628
|
-
TdCodeEditorComponent.prototype.editorInitialized;
|
|
629
|
-
/**
|
|
630
|
-
* editorConfigurationChanged: function($event)
|
|
631
|
-
* Event emitted when editor's configuration changes
|
|
632
|
-
* @type {?}
|
|
633
|
-
*/
|
|
634
|
-
TdCodeEditorComponent.prototype.editorConfigurationChanged;
|
|
635
|
-
/**
|
|
636
|
-
* editorLanguageChanged: function($event)
|
|
637
|
-
* Event emitted when editor's Language changes
|
|
638
|
-
* @type {?}
|
|
639
|
-
*/
|
|
640
|
-
TdCodeEditorComponent.prototype.editorLanguageChanged;
|
|
641
|
-
/**
|
|
642
|
-
* editorValueChange: function($event)
|
|
643
|
-
* Event emitted any time something changes the editor value
|
|
644
|
-
* @type {?}
|
|
645
|
-
*/
|
|
646
|
-
TdCodeEditorComponent.prototype.editorValueChange;
|
|
647
|
-
/**
|
|
648
|
-
* The change event notifies you about a change happening in an input field.
|
|
649
|
-
* Since the component is not a native Angular component have to specifiy the event emitter ourself
|
|
650
|
-
* @type {?}
|
|
651
|
-
*/
|
|
652
|
-
TdCodeEditorComponent.prototype.change;
|
|
653
|
-
/** @type {?} */
|
|
654
|
-
TdCodeEditorComponent.prototype.propagateChange;
|
|
655
|
-
/** @type {?} */
|
|
656
|
-
TdCodeEditorComponent.prototype.onTouched;
|
|
657
|
-
/**
|
|
658
|
-
* @type {?}
|
|
659
|
-
* @private
|
|
660
|
-
*/
|
|
661
|
-
TdCodeEditorComponent.prototype.zone;
|
|
662
|
-
/**
|
|
663
|
-
* @type {?}
|
|
664
|
-
* @private
|
|
665
|
-
*/
|
|
666
|
-
TdCodeEditorComponent.prototype._changeDetectorRef;
|
|
667
|
-
/**
|
|
668
|
-
* @type {?}
|
|
669
|
-
* @private
|
|
670
|
-
*/
|
|
671
|
-
TdCodeEditorComponent.prototype._elementRef;
|
|
672
|
-
}
|
|
392
|
+
], template: "<div class=\"editor-container\" #editorContainer></div>\n", styles: [":host{display:block;position:relative}:host .editor-container{position:absolute;top:0;bottom:0;left:0;right:0}::ng-deep .monaco-aria-container{display:none}\n"] }]
|
|
393
|
+
}], function () { return [{ type: i0.NgZone }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }]; }, { _editorContainer: [{
|
|
394
|
+
type: ViewChild,
|
|
395
|
+
args: ['editorContainer', { static: true }]
|
|
396
|
+
}], editorInitialized: [{
|
|
397
|
+
type: Output
|
|
398
|
+
}], editorConfigurationChanged: [{
|
|
399
|
+
type: Output
|
|
400
|
+
}], editorLanguageChanged: [{
|
|
401
|
+
type: Output
|
|
402
|
+
}], editorValueChange: [{
|
|
403
|
+
type: Output
|
|
404
|
+
}], change: [{
|
|
405
|
+
type: Output
|
|
406
|
+
}], value: [{
|
|
407
|
+
type: Input,
|
|
408
|
+
args: ['value']
|
|
409
|
+
}], language: [{
|
|
410
|
+
type: Input,
|
|
411
|
+
args: ['language']
|
|
412
|
+
}], editorStyle: [{
|
|
413
|
+
type: Input,
|
|
414
|
+
args: ['editorStyle']
|
|
415
|
+
}], theme: [{
|
|
416
|
+
type: Input,
|
|
417
|
+
args: ['theme']
|
|
418
|
+
}], fullScreenKeyBinding: [{
|
|
419
|
+
type: Input,
|
|
420
|
+
args: ['fullScreenKeyBinding']
|
|
421
|
+
}], editorOptions: [{
|
|
422
|
+
type: Input,
|
|
423
|
+
args: ['editorOptions']
|
|
424
|
+
}] }); })();
|
|
673
425
|
|
|
674
|
-
/**
|
|
675
|
-
* @fileoverview added by tsickle
|
|
676
|
-
* Generated from: code-editor.module.ts
|
|
677
|
-
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
|
|
678
|
-
*/
|
|
679
426
|
class CovalentCodeEditorModule {
|
|
680
427
|
}
|
|
681
|
-
CovalentCodeEditorModule
|
|
682
|
-
|
|
428
|
+
/** @nocollapse */ /** @nocollapse */ CovalentCodeEditorModule.ɵfac = function CovalentCodeEditorModule_Factory(t) { return new (t || CovalentCodeEditorModule)(); };
|
|
429
|
+
/** @nocollapse */ /** @nocollapse */ CovalentCodeEditorModule.ɵmod = /** @pureOrBreakMyCode */ i0.ɵɵdefineNgModule({ type: CovalentCodeEditorModule, bootstrap: [TdCodeEditorComponent] });
|
|
430
|
+
/** @nocollapse */ /** @nocollapse */ CovalentCodeEditorModule.ɵinj = /** @pureOrBreakMyCode */ i0.ɵɵdefineInjector({ imports: [[CommonModule]] });
|
|
431
|
+
(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CovalentCodeEditorModule, [{
|
|
432
|
+
type: NgModule,
|
|
433
|
+
args: [{
|
|
683
434
|
imports: [CommonModule],
|
|
684
435
|
declarations: [TdCodeEditorComponent],
|
|
685
436
|
exports: [TdCodeEditorComponent],
|
|
686
437
|
bootstrap: [TdCodeEditorComponent],
|
|
687
|
-
}
|
|
688
|
-
];
|
|
689
|
-
|
|
690
|
-
/**
|
|
691
|
-
* @fileoverview added by tsickle
|
|
692
|
-
* Generated from: public-api.ts
|
|
693
|
-
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
|
|
694
|
-
*/
|
|
695
|
-
|
|
696
|
-
/**
|
|
697
|
-
* @fileoverview added by tsickle
|
|
698
|
-
* Generated from: index.ts
|
|
699
|
-
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
|
|
700
|
-
*/
|
|
438
|
+
}]
|
|
439
|
+
}], null, null); })();
|
|
440
|
+
(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(CovalentCodeEditorModule, { declarations: [TdCodeEditorComponent], imports: [CommonModule], exports: [TdCodeEditorComponent] }); })();
|
|
701
441
|
|
|
702
442
|
/**
|
|
703
|
-
*
|
|
704
|
-
* Generated from: covalent-code-editor.ts
|
|
705
|
-
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
|
|
443
|
+
* Generated bundle index. Do not edit.
|
|
706
444
|
*/
|
|
707
445
|
|
|
708
446
|
export { CovalentCodeEditorModule, TdCodeEditorComponent };
|
|
709
|
-
//# sourceMappingURL=covalent-code-editor.
|
|
447
|
+
//# sourceMappingURL=covalent-code-editor.mjs.map
|