|
|
@ -5,10 +5,11 @@ |
|
|
* Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved. |
|
|
* Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved. |
|
|
*/ |
|
|
*/ |
|
|
|
|
|
|
|
|
import { AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, forwardRef, Input, OnChanges, SimpleChanges, ViewChild } from '@angular/core'; |
|
|
import { AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, forwardRef, Input, ViewChild } from '@angular/core'; |
|
|
import { NG_VALUE_ACCESSOR } from '@angular/forms'; |
|
|
import { NG_VALUE_ACCESSOR } from '@angular/forms'; |
|
|
import { debounceTime, Subject } from 'rxjs'; |
|
|
import { debounceTime, Subject } from 'rxjs'; |
|
|
import { ResourceLoaderService, StatefulControlComponent, Types } from '@app/framework/internal'; |
|
|
import { ResourceLoaderService, StatefulControlComponent, Types } from '@app/framework/internal'; |
|
|
|
|
|
import { TypedSimpleChanges } from './../../helpers'; |
|
|
import { FocusComponent } from './../forms-helper'; |
|
|
import { FocusComponent } from './../forms-helper'; |
|
|
|
|
|
|
|
|
declare const ace: any; |
|
|
declare const ace: any; |
|
|
@ -26,8 +27,9 @@ export const SQX_CODE_EDITOR_CONTROL_VALUE_ACCESSOR: any = { |
|
|
], |
|
|
], |
|
|
changeDetection: ChangeDetectionStrategy.OnPush, |
|
|
changeDetection: ChangeDetectionStrategy.OnPush, |
|
|
}) |
|
|
}) |
|
|
export class CodeEditorComponent extends StatefulControlComponent<{}, string> implements AfterViewInit, FocusComponent, OnChanges { |
|
|
export class CodeEditorComponent extends StatefulControlComponent<{}, string> implements AfterViewInit, FocusComponent { |
|
|
private aceEditor: any; |
|
|
private aceEditor: any; |
|
|
|
|
|
private aceTools: any; |
|
|
private valueChanged = new Subject(); |
|
|
private valueChanged = new Subject(); |
|
|
private value = ''; |
|
|
private value = ''; |
|
|
private modelist: any; |
|
|
private modelist: any; |
|
|
@ -51,6 +53,9 @@ export class CodeEditorComponent extends StatefulControlComponent<{}, string> im |
|
|
@Input() |
|
|
@Input() |
|
|
public maxLines: number | undefined; |
|
|
public maxLines: number | undefined; |
|
|
|
|
|
|
|
|
|
|
|
@Input() |
|
|
|
|
|
public singleLine = false; |
|
|
|
|
|
|
|
|
@Input() |
|
|
@Input() |
|
|
public wordWrap = false; |
|
|
public wordWrap = false; |
|
|
|
|
|
|
|
|
@ -63,9 +68,9 @@ export class CodeEditorComponent extends StatefulControlComponent<{}, string> im |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
@Input() |
|
|
@Input() |
|
|
public set completion(value: ReadonlyArray<{ path: string; description: string }> | undefined | null) { |
|
|
public set completion(value: ReadonlyArray<{ path: string; description: string; type: string; allowedValues?: string[] }> | undefined | null) { |
|
|
if (value) { |
|
|
if (value) { |
|
|
this.completions = value.map(({ path, description }) => ({ value: path, name: path, meta: 'context', description })); |
|
|
this.completions = value.map(({ path, description, type, allowedValues }) => ({ value: path, name: path, description, meta: type?.toLowerCase(), path, allowedValues })); |
|
|
} else { |
|
|
} else { |
|
|
this.completions = []; |
|
|
this.completions = []; |
|
|
} |
|
|
} |
|
|
@ -77,16 +82,16 @@ export class CodeEditorComponent extends StatefulControlComponent<{}, string> im |
|
|
super(changeDetector, {}); |
|
|
super(changeDetector, {}); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
public ngOnChanges(changes: SimpleChanges) { |
|
|
public ngOnChanges(changes: TypedSimpleChanges<this>) { |
|
|
if (changes['valueFile'] || changes['mode']) { |
|
|
if (changes.valueFile || changes.mode) { |
|
|
this.setMode(); |
|
|
this.setMode(); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
if (changes['height'] || changes['maxLines']) { |
|
|
if (changes.height || changes.maxLines || changes.singleLine) { |
|
|
this.setHeight(); |
|
|
this.setOptions(); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
if (changes['wordWrap']) { |
|
|
if (changes.wordWrap) { |
|
|
this.setWordWrap(); |
|
|
this.setWordWrap(); |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
@ -114,15 +119,19 @@ export class CodeEditorComponent extends StatefulControlComponent<{}, string> im |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
public onDisabled(isDisabled: boolean) { |
|
|
public onDisabled(isDisabled: boolean) { |
|
|
if (this.aceEditor) { |
|
|
if (!this.aceEditor) { |
|
|
this.aceEditor.setReadOnly(isDisabled); |
|
|
return; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
this.aceEditor.setReadOnly(isDisabled); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
public focus() { |
|
|
public focus() { |
|
|
if (this.aceEditor) { |
|
|
if (!this.aceEditor) { |
|
|
this.aceEditor.focus(); |
|
|
return; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
this.aceEditor.focus(); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
public ngAfterViewInit() { |
|
|
public ngAfterViewInit() { |
|
|
@ -136,39 +145,39 @@ export class CodeEditorComponent extends StatefulControlComponent<{}, string> im |
|
|
this.resourceLoader.loadLocalScript('dependencies/ace/ext/modelist.js'), |
|
|
this.resourceLoader.loadLocalScript('dependencies/ace/ext/modelist.js'), |
|
|
this.resourceLoader.loadLocalScript('dependencies/ace/ext/language_tools.js'), |
|
|
this.resourceLoader.loadLocalScript('dependencies/ace/ext/language_tools.js'), |
|
|
]).then(() => { |
|
|
]).then(() => { |
|
|
this.aceEditor = ace.edit(this.editor.nativeElement); |
|
|
|
|
|
|
|
|
|
|
|
this.modelist = ace.require('ace/ext/modelist'); |
|
|
this.modelist = ace.require('ace/ext/modelist'); |
|
|
|
|
|
|
|
|
this.aceEditor.setReadOnly(this.snapshot.isDisabled); |
|
|
this.aceEditor = ace.edit(this.editor.nativeElement); |
|
|
this.aceEditor.setFontSize(14); |
|
|
this.aceEditor.setFontSize(14); |
|
|
|
|
|
this.aceTools = ace.require('ace/ext/language_tools'); |
|
|
this.onDisabled(this.snapshot.isDisabled); |
|
|
|
|
|
|
|
|
|
|
|
this.setValue(this.value); |
|
|
this.setValue(this.value); |
|
|
this.setMode(); |
|
|
this.setMode(); |
|
|
this.setHeight(); |
|
|
this.setOptions(); |
|
|
this.setWordWrap(); |
|
|
this.setWordWrap(); |
|
|
|
|
|
this.onDisabled(this.snapshot.isDisabled); |
|
|
|
|
|
|
|
|
const langTools = ace.require('ace/ext/language_tools'); |
|
|
if (this.aceTools) { |
|
|
|
|
|
|
|
|
if (langTools) { |
|
|
|
|
|
this.aceEditor.setOptions({ |
|
|
|
|
|
enableBasicAutocompletion: true, |
|
|
|
|
|
enableSnippets: true, |
|
|
|
|
|
enableLiveAutocompletion: true, |
|
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
const previous = this.aceEditor.completers; |
|
|
const previous = this.aceEditor.completers; |
|
|
|
|
|
|
|
|
this.aceEditor.completers = [ |
|
|
this.aceEditor.completers = [ |
|
|
previous[0], { |
|
|
previous?.[0], { |
|
|
getCompletions: (editor: any, session: any, pos: any, prefix: any, callback: any) => { |
|
|
getCompletions: (editor: any, session: any, pos: any, prefix: any, callback: any) => { |
|
|
callback(null, this.completions); |
|
|
callback(null, this.completions); |
|
|
}, |
|
|
}, |
|
|
getDocTooltip: (item: any) => { |
|
|
getDocTooltip: (item: any) => { |
|
|
if (item.meta === 'context' && item.description) { |
|
|
if (item.path && item.description) { |
|
|
item.docHTML = `<b>${item.value}</b><hr></hr>${item.description}`; |
|
|
item.docHTML = `<b>${item.value}</b><hr></hr>${item.description}`; |
|
|
|
|
|
|
|
|
|
|
|
if (item.allowedValues) { |
|
|
|
|
|
item.docHTML += '<div class="mt-2 mb-2">Allowed Values:<ul>'; |
|
|
|
|
|
|
|
|
|
|
|
for (const value of item.allowedValues) { |
|
|
|
|
|
item.docHTML += `<li><code>${value}</code></li>`; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
item.docHTML += '</ul></div>'; |
|
|
|
|
|
} |
|
|
} |
|
|
} |
|
|
}, |
|
|
}, |
|
|
// eslint-disable-next-line no-useless-escape
|
|
|
// eslint-disable-next-line no-useless-escape
|
|
|
@ -176,7 +185,6 @@ export class CodeEditorComponent extends StatefulControlComponent<{}, string> im |
|
|
}, |
|
|
}, |
|
|
]; |
|
|
]; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
this.aceEditor.on('blur', () => { |
|
|
this.aceEditor.on('blur', () => { |
|
|
this.changeValue(); |
|
|
this.changeValue(); |
|
|
|
|
|
|
|
|
@ -187,6 +195,12 @@ export class CodeEditorComponent extends StatefulControlComponent<{}, string> im |
|
|
this.valueChanged.next(true); |
|
|
this.valueChanged.next(true); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
this.aceEditor.on('paste', (event: any) => { |
|
|
|
|
|
if (this.singleLine) { |
|
|
|
|
|
event.text = event.text.replace(/[\r\n]+/g, ' '); |
|
|
|
|
|
} |
|
|
|
|
|
}); |
|
|
|
|
|
|
|
|
this.detach(); |
|
|
this.detach(); |
|
|
}); |
|
|
}); |
|
|
} |
|
|
} |
|
|
@ -219,39 +233,61 @@ export class CodeEditorComponent extends StatefulControlComponent<{}, string> im |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
private setWordWrap() { |
|
|
private setWordWrap() { |
|
|
if (this.aceEditor) { |
|
|
if (!this.aceEditor || this.singleLine) { |
|
|
this.aceEditor.getSession().setUseWrapMode(this.wordWrap); |
|
|
return; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
this.aceEditor.getSession().setUseWrapMode(this.wordWrap); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
private setMode() { |
|
|
private setMode() { |
|
|
if (this.aceEditor) { |
|
|
if (!this.aceEditor) { |
|
|
if (this.valueFile && this.modelist) { |
|
|
return; |
|
|
const mode = this.modelist.getModeForPath(this.valueFile).mode; |
|
|
} |
|
|
|
|
|
|
|
|
this.aceEditor.getSession().setMode(mode); |
|
|
if (this.valueFile && this.modelist) { |
|
|
} else { |
|
|
const mode = this.modelist.getModeForPath(this.valueFile).mode; |
|
|
this.aceEditor.getSession().setMode(this.mode); |
|
|
|
|
|
} |
|
|
this.aceEditor.getSession().setMode(mode); |
|
|
|
|
|
} else { |
|
|
|
|
|
this.aceEditor.getSession().setMode(this.mode); |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
private setHeight() { |
|
|
private setOptions() { |
|
|
if (this.aceEditor && this.editor?.nativeElement) { |
|
|
if (!this.aceEditor) { |
|
|
|
|
|
return; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
let maxLines = undefined; |
|
|
|
|
|
let minLines = undefined; |
|
|
|
|
|
|
|
|
|
|
|
if (!this.singleLine) { |
|
|
if (Types.isNumber(this.height)) { |
|
|
if (Types.isNumber(this.height)) { |
|
|
const lines = this.height / 15; |
|
|
const lines = this.height / 15; |
|
|
|
|
|
|
|
|
this.aceEditor.setOptions({ |
|
|
maxLines = lines; |
|
|
minLines: lines, |
|
|
minLines = lines; |
|
|
maxLines: lines, |
|
|
|
|
|
}); |
|
|
|
|
|
} else if (this.height === 'auto') { |
|
|
} else if (this.height === 'auto') { |
|
|
this.aceEditor.setOptions({ |
|
|
maxLines = this.maxLines || 500; |
|
|
minLines: 3, |
|
|
minLines = Math.min(3, maxLines); |
|
|
maxLines: this.maxLines || 500, |
|
|
|
|
|
}); |
|
|
|
|
|
} |
|
|
} |
|
|
|
|
|
} else { |
|
|
|
|
|
maxLines = 1; |
|
|
|
|
|
minLines = 1; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
this.aceEditor.setOptions({ |
|
|
|
|
|
autoScrollEditorIntoView: this.singleLine, |
|
|
|
|
|
enableBasicAutocompletion: !!this.aceTools, |
|
|
|
|
|
enableLiveAutocompletion: !!this.aceTools, |
|
|
|
|
|
enableSnippets: !!this.aceTools && !this.singleLine, |
|
|
|
|
|
highlightActiveLine: !this.singleLine, |
|
|
|
|
|
maxLines, |
|
|
|
|
|
minLines, |
|
|
|
|
|
printMargin: !this.singleLine, |
|
|
|
|
|
showGutter: !this.singleLine, |
|
|
|
|
|
}); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
private setValue(value: string) { |
|
|
private setValue(value: string) { |
|
|
|
Sebastian Stehle
4 years ago
GitHub