mirror of https://github.com/Squidex/squidex.git
Sebastian
5 years ago
17 changed files with 20 additions and 212 deletions
@ -1 +0,0 @@ |
|||
<div class="editor" [class.no-border]="noBorder" #editor></div> |
|||
@ -1,26 +0,0 @@ |
|||
// sass-lint:disable class-name-format |
|||
|
|||
$editor-height: 30rem; |
|||
|
|||
:host ::ng-deep { |
|||
.ace_editor { |
|||
border: 1px solid $color-input; |
|||
|
|||
&.no-border { |
|||
border: 0; |
|||
} |
|||
} |
|||
|
|||
.ace_active-line, |
|||
.ace_gutter-active-line { |
|||
background: none !important; |
|||
} |
|||
|
|||
.ace_gutter-active-line { |
|||
background: darken($color-border, 5%) !important; |
|||
} |
|||
|
|||
.ace_gutter { |
|||
background: $color-border !important; |
|||
} |
|||
} |
|||
@ -1,146 +0,0 @@ |
|||
/* |
|||
* Squidex Headless CMS |
|||
* |
|||
* @license |
|||
* Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved. |
|||
*/ |
|||
|
|||
import { AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, forwardRef, Input, ViewChild } from '@angular/core'; |
|||
import { NG_VALUE_ACCESSOR } from '@angular/forms'; |
|||
import { ResourceLoaderService, StatefulControlComponent } from '@app/framework/internal'; |
|||
import { Subject } from 'rxjs'; |
|||
import { debounceTime } from 'rxjs/operators'; |
|||
import { FocusComponent } from './../forms-helper'; |
|||
|
|||
declare var ace: any; |
|||
|
|||
export const SQX_JSON_EDITOR_CONTROL_VALUE_ACCESSOR: any = { |
|||
provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => JsonEditorComponent), multi: true |
|||
}; |
|||
|
|||
@Component({ |
|||
selector: 'sqx-json-editor', |
|||
styleUrls: ['./json-editor.component.scss'], |
|||
templateUrl: './json-editor.component.html', |
|||
providers: [ |
|||
SQX_JSON_EDITOR_CONTROL_VALUE_ACCESSOR |
|||
], |
|||
changeDetection: ChangeDetectionStrategy.OnPush |
|||
}) |
|||
export class JsonEditorComponent extends StatefulControlComponent<{}, string> implements AfterViewInit, FocusComponent { |
|||
private valueChanged = new Subject(); |
|||
private aceEditor: any; |
|||
private value: any; |
|||
private valueString: string; |
|||
|
|||
@ViewChild('editor', { static: false }) |
|||
public editor: ElementRef<HTMLDivElement>; |
|||
|
|||
@Input() |
|||
public noBorder = false; |
|||
|
|||
@Input() |
|||
public height = 0; |
|||
|
|||
constructor(changeDetector: ChangeDetectorRef, |
|||
private readonly resourceLoader: ResourceLoaderService |
|||
) { |
|||
super(changeDetector, {}); |
|||
} |
|||
|
|||
public ngAfterViewInit() { |
|||
this.valueChanged.pipe( |
|||
debounceTime(500)) |
|||
.subscribe(() => { |
|||
this.changeValue(); |
|||
}); |
|||
|
|||
if (this.height) { |
|||
this.editor.nativeElement.style.height = `${this.height}px`; |
|||
} |
|||
|
|||
this.resourceLoader.loadLocalScript('dependencies/ace/ace.js').then(() => { |
|||
this.aceEditor = ace.edit(this.editor.nativeElement); |
|||
|
|||
this.aceEditor.getSession().setMode('ace/mode/javascript'); |
|||
this.aceEditor.setReadOnly(this.snapshot.isDisabled); |
|||
this.aceEditor.setFontSize(14); |
|||
|
|||
this.setValue(this.value); |
|||
|
|||
this.aceEditor.on('blur', () => { |
|||
this.changeValue(); |
|||
this.callTouched(); |
|||
}); |
|||
|
|||
this.aceEditor.on('change', () => { |
|||
this.valueChanged.next(); |
|||
}); |
|||
|
|||
this.detach(); |
|||
}); |
|||
} |
|||
|
|||
public writeValue(obj: any) { |
|||
this.value = obj; |
|||
|
|||
try { |
|||
this.valueString = JSON.stringify(obj); |
|||
} catch (e) { |
|||
this.valueString = ''; |
|||
} |
|||
|
|||
if (this.aceEditor) { |
|||
this.setValue(obj); |
|||
} |
|||
} |
|||
|
|||
public setDisabledState(isDisabled: boolean): void { |
|||
super.setDisabledState(isDisabled); |
|||
|
|||
if (this.aceEditor) { |
|||
this.aceEditor.setReadOnly(isDisabled); |
|||
} |
|||
} |
|||
|
|||
public focus() { |
|||
if (this.aceEditor) { |
|||
this.aceEditor.focus(); |
|||
} |
|||
} |
|||
|
|||
private changeValue() { |
|||
const isValid = this.aceEditor.getSession().getAnnotations().length === 0; |
|||
|
|||
let newValue: any = null; |
|||
|
|||
if (isValid) { |
|||
try { |
|||
newValue = JSON.parse(this.aceEditor.getValue()); |
|||
} catch (e) { |
|||
newValue = null; |
|||
} |
|||
} |
|||
|
|||
const newValueString = JSON.stringify(newValue); |
|||
|
|||
if (this.valueString !== newValueString) { |
|||
this.callChange(newValue); |
|||
} |
|||
|
|||
this.value = newValue; |
|||
this.valueString = newValueString; |
|||
} |
|||
|
|||
private setValue(value: any) { |
|||
if (value) { |
|||
const jsonString = JSON.stringify(value, undefined, 4); |
|||
|
|||
this.aceEditor.setValue(jsonString); |
|||
} else { |
|||
this.aceEditor.setValue(''); |
|||
} |
|||
|
|||
this.aceEditor.clearSelection(); |
|||
} |
|||
} |
|||
Loading…
Reference in new issue