Improved editor sdk.

src/Squidex/app/features/content/pages/content/content-field.component.html

@@ -21,6 +21,7 @@
                     <sqx-field-editor
                         [displaySuffix]="prefix(language)"
                         [form]="form"
+                        [formContext]="formContext"
                         [field]="field"
                         [language]="language"
                         [languages]="languages"
@@ -33,6 +34,7 @@
             <ng-template #singleControl>
                 <sqx-field-editor
                     [form]="form"
+                    [formContext]="formContext"
                     [field]="field"
                     [language]="language"
                     [languages]="languages"
@@ -45,6 +47,7 @@
         <ng-template #uiField>
             <sqx-field-editor
                 [form]="form"
+                [formContext]="formContext"
                 [field]="field"
                 [language]="language"
                 [languages]="languages"
@@ -98,6 +101,7 @@
         <ng-template #uiField>
             <sqx-field-editor
                 [form]="form"
+                [formContext]="formContext"
                 [field]="field"
                 [language]="language"
                 [languages]="languages"

src/Squidex/app/features/content/pages/content/content-field.component.ts

@@ -33,6 +33,9 @@ export class ContentFieldComponent implements DoCheck, OnChanges {
     @Input()
     public form: EditContentForm;
 
+    @Input()
+    public formContext: any;
+
     @Input()
     public field: RootFieldDto;
 

src/Squidex/app/features/content/pages/content/content-page.component.html

@@ -114,6 +114,7 @@
             <ng-container *ngFor="let field of schema.fields; trackBy: trackByField.bind(this)">
                 <sqx-content-field 
                     [form]="contentForm"
+                    [formContext]="formContext"
                     [field]="field"
                     [fieldForm]="contentForm.form.get(field.name)"
                     [fieldFormCompare]="contentFormCompare?.form.get(field.name)"

src/Squidex/app/features/content/pages/content/content-page.component.ts

@@ -13,8 +13,10 @@ import { onErrorResumeNext, switchMap } from 'rxjs/operators';
 import { ContentVersionSelected } from './../messages';
 
 import {
+    ApiUrlConfig,
     AppLanguageDto,
     AppsState,
+    AuthService,
     CanComponentDeactivate,
     ContentDto,
     ContentsState,
@@ -45,6 +47,8 @@ import { DueTimeSelectorComponent } from './../../shared/due-time-selector.compo
 export class ContentPageComponent extends ResourceOwner implements CanComponentDeactivate, OnInit {
     public schema: SchemaDetailsDto;
 
+    public formContext: any;
+
     public content: ContentDto;
     public contentVersion: Version | null;
     public contentForm: EditContentForm;
@@ -58,7 +62,7 @@ export class ContentPageComponent extends ResourceOwner implements CanComponentD
     @ViewChild('dueTimeSelector')
     public dueTimeSelector: DueTimeSelectorComponent;
 
-    constructor(
+    constructor(apiUrl: ApiUrlConfig, authService: AuthService,
         public readonly appsState: AppsState,
         private readonly contentsState: ContentsState,
         private readonly dialogs: DialogService,
@@ -69,6 +73,8 @@ export class ContentPageComponent extends ResourceOwner implements CanComponentD
         private readonly schemasState: SchemasState
     ) {
         super();
+
+        this.formContext = { user: authService.user, apiUrl: apiUrl.buildUrl('api') };
     }
 
     public ngOnInit() {

src/Squidex/app/features/content/shared/array-editor.component.html

@@ -4,6 +4,7 @@
     <div class="item" *ngFor="let itemForm of arrayControl.controls; let i = index">
         <sqx-array-item
             [form]="form"
+            [formContext]="formContext"
             [field]="field"
             [isHidden]="snapshot.isHidden"
             [isDisabled]="arrayControl.disabled"

src/Squidex/app/features/content/shared/array-editor.component.ts

@@ -29,6 +29,9 @@ export class ArrayEditorComponent extends StatefulComponent<State> {
     @Input()
     public form: EditContentForm;
 
+    @Input()
+    public formContext: any;
+
     @Input()
     public field: RootFieldDto;
 

src/Squidex/app/features/content/shared/array-item.component.html

@@ -40,6 +40,7 @@
         <div class="form-group" *ngFor="let fieldControl of fieldControls">
             <sqx-field-editor
                 [form]="form"
+                [formContext]="formContext"
                 [field]="fieldControl.field"
                 [language]="language"
                 [languages]="languages"

src/Squidex/app/features/content/shared/array-item.component.ts

@@ -39,6 +39,9 @@ export class ArrayItemComponent implements OnChanges {
     @Input()
     public form: EditContentForm;
 
+    @Input()
+    public formContext: any;
+
     @Input()
     public field: RootFieldDto;
 

src/Squidex/app/features/content/shared/field-editor.component.html

@@ -11,7 +11,11 @@
 
 	<div>
 		<ng-container *ngIf="field.properties.editorUrl; else noEditor">
-			<sqx-iframe-editor [url]="field.properties.editorUrl" [formControl]="control"></sqx-iframe-editor>
+            <sqx-iframe-editor [url]="field.properties.editorUrl"
+                [context]="formContext"
+                [formControl]="control"
+                [formValue]="form?.value | async">
+            </sqx-iframe-editor>
 		</ng-container>
 
 		<ng-template #noEditor>
@@ -20,6 +24,7 @@
                     <sqx-array-editor 
                         [arrayControl]="control"
                         [form]="form"
+                        [formContext]="formContext"
                         [field]="field"
                         [language]="language"
                         [languages]="languages">

src/Squidex/app/features/content/shared/field-editor.component.ts

@@ -5,7 +5,7 @@
  * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved.
  */
 
-import { Component, Input, OnChanges } from '@angular/core';
+import { Component, Input } from '@angular/core';
 import { FormControl } from '@angular/forms';
 
 import {
@@ -20,10 +20,13 @@ import {
     styleUrls: ['./field-editor.component.scss'],
     templateUrl: './field-editor.component.html'
 })
-export class FieldEditorComponent implements OnChanges {
+export class FieldEditorComponent {
     @Input()
     public form: EditContentForm;
 
+    @Input()
+    public formContext: any;
+
     @Input()
     public field: FieldDto;
 
@@ -43,10 +46,4 @@ export class FieldEditorComponent implements OnChanges {
     public displaySuffix: string;
 
     public uniqueId = MathHelper.guid();
-
-    public ngOnChanges() {
-        let a = 0;
-        a++;
-        console.log(a);
-    }
 }

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

@@ -5,7 +5,7 @@
  * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved.
  */
 
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, forwardRef, Input, OnChanges, OnInit, Renderer2, ViewChild } from '@angular/core';
+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';
@@ -29,6 +29,12 @@ export class IFrameEditorComponent extends ExternalControlComponent<any> impleme
     @ViewChild('iframe')
     public iframe: ElementRef<HTMLIFrameElement>;
 
+    @Input()
+    public context: any = {};
+
+    @Input()
+    public formValue: any;
+
     @Input()
     public url: string;
 
@@ -38,8 +44,14 @@ export class IFrameEditorComponent extends ExternalControlComponent<any> impleme
         super(changeDetector);
     }
 
-    public ngOnChanges() {
-        this.iframe.nativeElement.src = this.url;
+    public ngOnChanges(changes: SimpleChanges) {
+        if (changes['url']) {
+            this.iframe.nativeElement.src = this.url;
+        }
+
+        if (changes['formValue'] && this.formValue) {
+            this.sendFormValue();
+        }
     }
 
     public ngOnInit(): void {
@@ -51,8 +63,10 @@ export class IFrameEditorComponent extends ExternalControlComponent<any> impleme
                     if (type === 'started') {
                         this.isInitialized = true;
 
-                        this.sendMessage({ type: 'disabled', isDisabled: this.isDisabled });
-                        this.sendMessage({ type: 'valueChanged', value: this.value });
+                        this.sendMessage('init', { context: this.context || {} });
+                        this.sendFormValue();
+                        this.sendDisabled();
+                        this.sendValue();
                     } else if (type === 'resize') {
                         const { height } = event.data;
 
@@ -75,19 +89,33 @@ export class IFrameEditorComponent extends ExternalControlComponent<any> impleme
     public writeValue(obj: any) {
         this.value = obj;
 
-        this.sendMessage({ type: 'valueChanged', value: this.value });
+        this.sendValue();
     }
 
     public setDisabledState(isDisabled: boolean): void {
         this.isDisabled = isDisabled;
 
-        this.sendMessage({ type: 'disabled', isDisabled: this.isDisabled });
+        this.sendDisabled();
     }
 
-    private sendMessage(message: any) {
+    private sendValue() {
+        this.sendMessage('valueChanged', { value: this.value });
+    }
+
+    private sendDisabled() {
+        this.sendMessage('disabled', { isDisabled: this.isDisabled });
+    }
+
+    private sendFormValue() {
+        this.sendMessage('formValueChanged', { formValue: this.formValue });
+    }
+
+    private sendMessage(type: string, payload: any) {
         const iframe = this.iframe.nativeElement;
 
         if (this.isInitialized && iframe.contentWindow && Types.isFunction(iframe.contentWindow.postMessage)) {
+            const message = { type, ...payload };
+
             iframe.contentWindow.postMessage(message, '*');
         }
     }

src/Squidex/app/shared/state/contents.forms.ts

@@ -15,7 +15,8 @@ import {
     formControls,
     ImmutableArray,
     Types,
-    ValidatorsEx
+    ValidatorsEx,
+    value$
 } from '@app/framework';
 
 import { AppLanguageDto } from './../services/app-languages.service';
@@ -320,6 +321,9 @@ export class FieldDefaultValue implements FieldPropertiesVisitor<any> {
 }
 
 export class EditContentForm extends Form<FormGroup, any> {
+    public value =
+        value$(this.form);
+
     constructor(
         private readonly schema: SchemaDetailsDto,
         private readonly languages: ImmutableArray<AppLanguageDto>

src/Squidex/wwwroot/scripts/editor-sdk.js

@@ -1,26 +1,62 @@
 
 function SquidexFormField() {
+    var initHandler;
+    var initCalled = false;
     var disabledHandler;
     var disabled;
     var valueHandler;
     var value;
+    var formValueHandler;
+    var formValue;
+    var context;
     var timer;
     var height = document.body.offsetHeight;
 
+    function raiseDisabled() {
+        if (disabledHandler) {
+            disabledHandler(disabled);
+        }
+    }
+
+    function raiseValueChanged() {
+        if (valueHandler) {
+            valueHandler(value);
+        }
+    }
+
+    function raiseFormValueChanged() {
+        if (formValueHandler && formValue) {
+            formValueHandler(formValue);
+        }
+    }
+
+    function raiseInit() {
+        if (initHandler && !initCalled && context) {
+            initHandler(context);
+            initCalled = true;
+        }
+    }
+
     function eventListener(event) {
         if (event.source !== window) {
-            if (event.data.type === 'disabled') {
+            var type = event.data.type;
+
+            if (type === 'disabled') {
                 disabled = event.data.isDisabled;
 
-                if (disabledHandler) {
-                    disabledHandler(disabled);
-                }
-            } else if (event.data.type === 'valueChanged') {
-                var value = event.data.value;
+                raiseDisabled();
+            } else if (type === 'valueChanged') {
+                value = event.data.value;
+
+                raiseValueChanged();
+            } else if (type === 'formValueChanged') {
+                formValue = event.data.formValue;
+
+                raiseFormValueChanged();
+            } else if (type === 'init') {
+                context = event.data.context;
 
-                if (valueHandler) {
-                    valueHandler(value);
-                }
+                raiseInit();
             }
         }
     }
@@ -44,6 +80,27 @@ function SquidexFormField() {
     }, 500);
 
     var editor = {
+        /**
+         * Get the current value.
+         */
+        getValue: function () {
+            return value;
+        },
+
+        /**
+         * Get the current value.
+         */
+        getContext: function () {
+            return context;
+        },
+
+        /**
+         * Get the current form value.
+         */
+        getFormValue: function () {
+            return formValue;
+        },
+
         /**
          * Notifies the control container that the editor has been touched.
          */
@@ -62,26 +119,40 @@ function SquidexFormField() {
             }
         },
 
+        /**
+         * Register the init handler.
+         */
+        onInit: function (callback) {
+            initHandler = callback;
+
+            raiseInit();
+        },
+
         /**
          * Register the disabled handler.
          */
         onDisabled: function (callback) {
             disabledHandler = callback;
 
-            if (callback) {
-                callback(disabled);
-            }
+            raiseDisabled();
         },
 
         /**
-         * Register the disabled handler.
+         * Register the value changed handler.
          */
         onValueChanged: function (callback) {
             valueHandler = callback;
 
-            if (callback) {
-                callback(value);
-            }
+            raiseValueChanged();
+        },
+        
+        /**
+         * Register the form value changed handler.
+         */
+        onFormValueChanged: function (callback) {
+            formValueHandler = callback;
+
+            raiseFormValueChanged();
         },
 
         /**