Pass through the language to the editor SDK.

backend/i18n/frontend_en.json

@@ -384,8 +384,8 @@
   "contents.localizedFieldDescription": "The '{fieldName}' field of the content item  (localized).",
   "contents.newStatusFieldDescription": "The new status of the content item.",
   "contents.noReference": "- No Reference -",
-  "contents.pendingChangesTextToChange": "You have unsaved changes.\n\nWhen you change the status you will loose them.\n\n**Do you want to continue anyway?**",
+  "contents.pendingChangesTextToChange": "You have unsaved changes.\n\nWhen you change the status you will lose them.\n\n**Do you want to continue anyway?**",
-  "contents.pendingChangesTextToClose": "You have unsaved changes.\n\nWhen you close the current content view you will loose them.\n\n**Do you want to continue anyway?**",
+  "contents.pendingChangesTextToClose": "You have unsaved changes.\n\nWhen you close the current content view you will lose them.\n\n**Do you want to continue anyway?**",
   "contents.pendingChangesTitle": "Unsaved changes",
   "contents.referencesCreateNew": "Add New",
   "contents.referencesCreatePublish": "Create and Publish",

backend/i18n/source/frontend_en.json

@@ -384,8 +384,8 @@
   "contents.localizedFieldDescription": "The '{fieldName}' field of the content item  (localized).",
   "contents.newStatusFieldDescription": "The new status of the content item.",
   "contents.noReference": "- No Reference -",
-  "contents.pendingChangesTextToChange": "You have unsaved changes.\n\nWhen you change the status you will loose them.\n\n**Do you want to continue anyway?**",
+  "contents.pendingChangesTextToChange": "You have unsaved changes.\n\nWhen you change the status you will lose them.\n\n**Do you want to continue anyway?**",
-  "contents.pendingChangesTextToClose": "You have unsaved changes.\n\nWhen you close the current content view you will loose them.\n\n**Do you want to continue anyway?**",
+  "contents.pendingChangesTextToClose": "You have unsaved changes.\n\nWhen you close the current content view you will lose them.\n\n**Do you want to continue anyway?**",
   "contents.pendingChangesTitle": "Unsaved changes",
   "contents.referencesCreateNew": "Add New",
   "contents.referencesCreatePublish": "Create and Publish",

backend/src/Squidex/wwwroot/scripts/editor-log.html

@@ -22,7 +22,7 @@
         var field = new SquidexFormField();
 
         function logState(message) {
-            console.log(`${message}. Value: <${JSON.stringify(field.getValue(), 2)}>, Form Value: <${JSON.stringify(field.getFormValue())}>`);
+            console.log(`${message}.\n\Language: ${field.getLanguage()}\n\nValue\n<${JSON.stringify(field.getValue(), 2)}>\n\nForm Value\n<${JSON.stringify(field.getFormValue())}>\n\nDisabled: ${field.isDisabled()}`);
         }
 
         logState('Setup');
@@ -41,12 +41,18 @@
             logState('Init');
         });
 
-        // Handle the value change event and set the text to the editor.
+        field.onValueChanged(function () {
-        field.onValueChanged(function (value) {
+            logState('Value changed');
-            logState(`Value changed: <${JSON.stringify(value, 2)}>`);
+        });
+
+        field.onFormValueChanged(function () {
+            logState('Form value changed');
+        });
+
+        field.onLanguageChanged(function () {
+            logState('Field language changed');
         });
 
-        // Disable the editor when it should be disabled.
         field.onDisabled(function (disabled) {
             logState(`Disabled: <${JSON.stringify(disabled, 2)}>`);
         });

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

@@ -86,7 +86,7 @@ function SquidexPlugin() {
         },
 
         /**
-         * Register the init handler.
+         * Register an function that is called when the sidebar is initialized.
          */
         onInit: function (callback) {
             initHandler = callback;
@@ -95,7 +95,9 @@ function SquidexPlugin() {
         },
 
         /**
-         * Register the content changed handler.
+         * Register an function that is called whenever the value of the content has changed.
+         * 
+         * The callback has one argument with the value of the content (any).
          */
         onContentChanged: function (callback) {
             contentHandler = callback;
@@ -128,6 +130,8 @@ function SquidexFormField() {
     var fullscreenHandler = false;
     var valueHandler;
     var value;
+    var languageHandler;
+    var language;
     var formValueHandler;
     var formValue;
     var context;
@@ -151,6 +155,12 @@ function SquidexFormField() {
         }
     }
 
+    function raiseLanguageChanged() {
+        if (languageHandler && language) {
+            languageHandler(language);
+        }
+    }
+
     function raiseFullscreen() {
         if (fullscreenHandler) {
             fullscreenHandler(fullscreen);
@@ -186,6 +196,10 @@ function SquidexFormField() {
                 fullscreen = event.data.fullscreen;
 
                 raiseFullscreen();
+            } else if (type === 'languageChanged') {
+                language = event.data.language;
+
+                raiseLanguageChanged();                 
             } else if (type === 'init') {
                 context = event.data.context;
 
@@ -220,6 +234,27 @@ function SquidexFormField() {
             return formValue;
         },
 
+        /*
+         * Get the current field language.
+         */
+        getLanguage: function () {
+            return language;
+        },
+
+        /*
+         * Get the disabled state.
+         */
+        isDisabled: function () {
+            return disabled;
+        },
+
+        /*
+         * Get the fullscreen state.
+         */
+        isFullscreen: function () {
+            return fullscreen;
+        },
+
         /**
          * Notifies the control container that the editor has been touched.
          */
@@ -265,7 +300,7 @@ function SquidexFormField() {
         },
 
         /**
-         * Register the init handler.
+         * Register an function that is called when the field is initialized.
          */
         onInit: function (callback) {
             initHandler = callback;
@@ -274,7 +309,9 @@ function SquidexFormField() {
         },
 
         /**
-         * Register the disabled handler.
+         * Register an function that is called whenever the field is disabled or enabled.
+         * 
+         * The callback has one argument with disabled state (disabled = true, enabled = false).
          */
         onDisabled: function (callback) {
             disabledHandler = callback;
@@ -283,7 +320,20 @@ function SquidexFormField() {
         },
 
         /**
-         * Register the value changed handler.
+         * Register an function that is called whenever the field language is changed.
+         * 
+         * The callback has one argument with the language of the field (string).
+         */
+        onLanguageChanged: function (callback) {
+            languageHandler = callback;
+
+            raiseLanguageChanged();
+        },
+
+        /**
+         * Register an function that is called whenever the value of the field has changed.
+         * 
+         * The callback has one argument with the value of the field (any).
          */
         onValueChanged: function (callback) {
             valueHandler = callback;
@@ -292,7 +342,9 @@ function SquidexFormField() {
         },
 
         /**
-         * Register the form value changed handler.
+         * Register an function that is called whenever the value of the content has changed.
+         * 
+         * The callback has one argument with the value of the content (any).
          */
         onFormValueChanged: function (callback) {
             formValueHandler = callback;
@@ -301,7 +353,9 @@ function SquidexFormField() {
         },
 
         /**
-         * Register the fullscreen changed handler.
+         * Register an function that is called whenever the fullscreen mode has changed.
+         * 
+         * The callback has one argument with fullscreen state (fullscreen on = true, fullscreen off = false).
          */
         onFullscreen: function (callback) {
             fullscreenHandler = callback;

frontend/app/features/content/shared/forms/field-editor.component.html

@@ -12,7 +12,8 @@
             <sqx-iframe-editor [url]="field.properties.editorUrl"
                 [context]="formContext"
                 [formControl]="editorControl"
-                [formValue]="form?.value | async">
+                [formValue]="form?.value | async"
+                [language]="language?.iso2Code">
             </sqx-iframe-editor>
 		</ng-container>
 

frontend/app/framework/angular/forms/editors/iframe-editor.component.ts

@@ -48,6 +48,9 @@ export class IFrameEditorComponent extends StatefulControlComponent<State, any>
     @Input()
     public formValue: any;
 
+    @Input()
+    public language: string;
+
     @Input()
     public url: string;
 
@@ -72,9 +75,13 @@ export class IFrameEditorComponent extends StatefulControlComponent<State, any>
                 this.setupUrl();
             }
 
-            if (changes['formValue'] && this.formValue) {
+            if (changes['formValue']) {
                 this.sendFormValue();
             }
+
+            if (changes['language']) {
+                this.sendLanguage();
+            }
         }
     }
 
@@ -96,6 +103,7 @@ export class IFrameEditorComponent extends StatefulControlComponent<State, any>
                         this.sendInit();
                         this.sendFullscreen();
                         this.sendFormValue();
+                        this.sendLanguage();
                         this.sendDisabled();
                         this.sendValue();
                     } else if (type === 'resize') {
@@ -158,8 +166,16 @@ export class IFrameEditorComponent extends StatefulControlComponent<State, any>
     }
 
     private sendFormValue() {
+        if (this.formValue) {
             this.sendMessage('formValueChanged', { formValue: this.formValue });
         }
+    }
+
+    private sendLanguage() {
+        if (this.language) {
+            this.sendMessage('languageChanged', { language: this.language });
+        }
+    }
 
     private toggleFullscreen(isFullscreen: boolean) {
         this.next(s => ({ ...s, isFullscreen }));