Controls fixed.

src/Squidex/app/features/schemas/pages/schema/schema-page.component.html

@@ -25,10 +25,10 @@
             </button>
             <div class="dropdown-menu" *sqxModalView="editOptionsDropdown;closeAlways:true" [sqxModalTarget]="buttonOptions" @fade>
                 <a class="dropdown-item" (click)="configureScriptsDialog.show()">
-                    Edit Scripts
+                    Configure Scripts
                 </a>
                 <a class="dropdown-item" (click)="configurePreviewUrlsDialog.show()">
-                    Edit Preview Urls
+                    Configure Preview Urls
                 </a>
                 
                 <ng-container *ngIf="schemasState.canCreate">

src/Squidex/app/framework/angular/forms/code-editor.component.html

@@ -1 +1 @@
-<div class="editor" #editor></div>
+<div class="editor" #editor>Loading editor...</div>

src/Squidex/app/framework/angular/forms/code-editor.component.scss

@@ -3,11 +3,13 @@
 
 // sass-lint:disable class-name-format
 
+$editor-height: 20rem;
+
 :host ::ng-deep {
     .ace_editor {
         background: $color-dark-foreground;
         border: 1px solid $color-input;
-        height: 20rem;
+        height: $editor-height;
     }
 
     .ace_active-line,
@@ -23,3 +25,7 @@
         background: $color-border !important;
     }
 }
+
+.editor {
+    height: $editor-height;
+}

src/Squidex/app/framework/angular/forms/code-editor.component.ts

@@ -11,8 +11,8 @@ import { Subject } from 'rxjs';
 import { debounceTime } from 'rxjs/operators';
 
 import {
-    ExternalControlComponent,
     ResourceLoaderService,
+    StatefulControlComponent,
     Types
 } from '@app/framework/internal';
 
@@ -29,7 +29,7 @@ export const SQX_CODE_EDITOR_CONTROL_VALUE_ACCESSOR: any = {
     providers: [SQX_CODE_EDITOR_CONTROL_VALUE_ACCESSOR],
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class CodeEditorComponent extends ExternalControlComponent<string> implements AfterViewInit {
+export class CodeEditorComponent extends StatefulControlComponent<any, any> implements AfterViewInit {
     private valueChanged = new Subject();
     private aceEditor: any;
     private value: string;
@@ -44,7 +44,7 @@ export class CodeEditorComponent extends ExternalControlComponent<string> implem
     constructor(changeDetector: ChangeDetectorRef,
         private readonly resourceLoader: ResourceLoaderService
     ) {
-        super(changeDetector);
+        super(changeDetector, {});
     }
 
     public writeValue(obj: any) {

src/Squidex/app/framework/angular/forms/iframe-editor.component.ts

@@ -8,7 +8,7 @@
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, forwardRef, Input, OnChanges, OnInit, Renderer2, SimpleChanges, ViewChild } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 
-import { ExternalControlComponent, Types } from '@app/framework/internal';
+import { StatefulControlComponent, Types } from '@app/framework/internal';
 
 export const SQX_IFRAME_EDITOR_CONTROL_VALUE_ACCESSOR: any = {
     provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => IFrameEditorComponent), multi: true
@@ -21,7 +21,7 @@ export const SQX_IFRAME_EDITOR_CONTROL_VALUE_ACCESSOR: any = {
     providers: [SQX_IFRAME_EDITOR_CONTROL_VALUE_ACCESSOR],
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class IFrameEditorComponent extends ExternalControlComponent<any> implements OnChanges, OnInit {
+export class IFrameEditorComponent extends StatefulControlComponent<any, any> implements OnChanges, OnInit {
     private value: any;
     private isDisabled = false;
     private isInitialized = false;
@@ -41,7 +41,7 @@ export class IFrameEditorComponent extends ExternalControlComponent<any> impleme
     constructor(changeDetector: ChangeDetectorRef,
         private readonly renderer: Renderer2
     ) {
-        super(changeDetector);
+        super(changeDetector, {});
     }
 
     public ngOnChanges(changes: SimpleChanges) {

src/Squidex/app/framework/angular/forms/json-editor.component.scss

@@ -3,11 +3,13 @@
 
 // sass-lint:disable class-name-format
 
+$editor-height: 20rem;
+
 :host ::ng-deep {
     .ace_editor {
         background: $color-dark-foreground;
         border: 1px solid $color-input;
-        height: 20rem;
+        height: $editor-height;
     }
 
     .ace_active-line,
@@ -23,3 +25,7 @@
         background: $color-border !important;
     }
 }
+
+.editor {
+    height: $editor-height;
+}

src/Squidex/app/framework/angular/forms/json-editor.component.ts

@@ -10,7 +10,7 @@ import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { Subject } from 'rxjs';
 import { debounceTime } from 'rxjs/operators';
 
-import { ExternalControlComponent, ResourceLoaderService } from '@app/framework/internal';
+import { ResourceLoaderService, StatefulControlComponent } from '@app/framework/internal';
 
 declare var ace: any;
 
@@ -25,7 +25,7 @@ export const SQX_JSON_EDITOR_CONTROL_VALUE_ACCESSOR: any = {
     providers: [SQX_JSON_EDITOR_CONTROL_VALUE_ACCESSOR],
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class JsonEditorComponent extends ExternalControlComponent<string> implements AfterViewInit {
+export class JsonEditorComponent extends StatefulControlComponent<{}, string> implements AfterViewInit {
     private valueChanged = new Subject();
     private aceEditor: any;
     private value: any;
@@ -38,9 +38,7 @@ export class JsonEditorComponent extends ExternalControlComponent<string> implem
     constructor(changeDetector: ChangeDetectorRef,
         private readonly resourceLoader: ResourceLoaderService
     ) {
-        super(changeDetector);
+        super(changeDetector, {});
-
-        changeDetector.detach();
     }
 
     public writeValue(obj: any) {

src/Squidex/app/framework/angular/stateful.component.ts

@@ -115,34 +115,3 @@ export abstract class StatefulControlComponent<T, TValue> extends StatefulCompon
 
     public abstract writeValue(obj: any): void;
 }
-
-export abstract class ExternalControlComponent<TValue> extends StatefulComponent<any> implements ControlValueAccessor {
-    private fnChanged = (v: any) => { /* NOOP */ };
-    private fnTouched = () => { /* NOOP */ };
-
-    constructor(changeDetector: ChangeDetectorRef) {
-        super(changeDetector, {});
-
-        changeDetector.detach();
-    }
-
-    public registerOnChange(fn: any) {
-        this.fnChanged = fn;
-    }
-
-    public registerOnTouched(fn: any) {
-        this.fnTouched = fn;
-    }
-
-    protected callTouched() {
-        this.fnTouched();
-    }
-
-    protected callChange(value: TValue) {
-        this.fnChanged(value);
-    }
-
-    public abstract setDisabledState(isDisabled: boolean): void;
-
-    public abstract writeValue(obj: any): void;
-}

src/Squidex/app/shared/components/rich-editor.component.html

@@ -1,5 +1,5 @@
 <div class="drop-container" (sqxDropFile)="insertFiles($event)" [onlyImages]="true">
-    <div class="editor" #editor></div>
+    <div class="editor" #editor>Loading editor...</div>
 </div>
 
 <ng-container *sqxModalView="assetsDialog;onRoot:true;closeAuto:false">