Merge pull request #6783 from opf/fix/28806/better-ckeditor-error-reporting

[28806] Better reporting when CKEditor cannot be loaded

[ci skip]

config/locales/js-en.yml

@@ -91,6 +91,7 @@ en:
       preview: 'Toggle preview mode'
       source_code: 'Toggle Markdown source mode'
       error_saving_failed: 'Saving the document failed with the following error: %{error}'
+      error_initialization_failed: 'Failed to initialize CKEditor!'
       mode:
         manual: 'Switch to Markdown source'
         wysiwyg: 'Switch to WYSIWYG editor'

frontend/src/app/modules/common/ckeditor/ckeditor-setup.service.ts

@@ -75,9 +75,6 @@ export class CKEditorSetupService {
           .on('op:ckeditor:getData', (event:any, cb:any) => cb(editor.getData()));
 
         return editor;
-      })
-      .catch((error:any) => {
-        console.error(`Failed to setup CKEditor instance: ${error}`);
       });
   }
 

frontend/src/app/modules/common/ckeditor/op-ckeditor.component.ts

@@ -56,6 +56,9 @@ export class OpCkeditorComponent implements OnInit, OnDestroy {
   // Output notification at max once/s for data changes
   @Output() onContentChange = new EventEmitter<string>();
 
+  // Output notification when editor cannot be initialized
+  @Output() onInitializationFailed = new EventEmitter<string>();
+
   // View container of the replacement used to initialize CKEditor5
   @ViewChild('opCkeditorReplacementContainer') opCkeditorReplacementContainer:ElementRef;
   @ViewChild('codeMirrorPane') codeMirrorPane:ElementRef;
@@ -66,6 +69,10 @@ export class OpCkeditorComponent implements OnInit, OnDestroy {
   public allowManualMode = false;
   public manualMode = false;
 
+  public text = {
+    errorTitle: this.I18n.t('js.editor.error_initialization_failed')
+  };
+
   // Codemirror instance, initialized lazily when running source mode
   public codeMirrorInstance:undefined | any;
 
@@ -156,6 +163,19 @@ export class OpCkeditorComponent implements OnInit, OnDestroy {
   }
 
   ngOnInit() {
+    try {
+      this.initializeEditor();
+    } catch (error) {
+      // We will run into this error if, among others, the browser does not fully support
+      // CKEditor's requirements on ES6.
+
+      console.error(`Failed to setup CKEditor instance: ${error}`);
+      this.error = error;
+      this.onInitializationFailed.emit(error);
+    }
+  }
+
+  private initializeEditor()  {
     this.$element = jQuery(this.elementRef.nativeElement);
 
     const editorPromise = this.ckEditorSetup
@@ -166,7 +186,7 @@ export class OpCkeditorComponent implements OnInit, OnDestroy {
         this.content
       )
       .catch((error:string) => {
-        this.error = error;
+        throw(error);
       })
       .then((editor:ICKEditorInstance) => {
         this.ckEditorInstance = editor;

frontend/src/app/modules/common/ckeditor/op-ckeditor.html

@@ -1,7 +1,11 @@
 <ng-container>
   <div *ngIf="error" class="notification-box -error">
     <div class="notification-box--content">
-      <span [textContent]="error"></span>
+      <p>
+        <strong [textContent]="text.errorTitle"></strong>
+        <br/>
+        <span [textContent]="error"></span>
+      </p>
     </div>
   </div>
 

frontend/src/app/modules/fields/edit/field-types/formattable-edit-field.component.ts

@@ -38,11 +38,12 @@ export const formattableFieldTemplate = `
         <op-ckeditor [context]="ckEditorContext"
                      [content]="rawValue"
                      (onContentChange)="onContentChange($event)"
+                     (onInitializationFailed)="initializationError = true"
                      (onInitialized)="onCkeditorSetup($event)"
                      [ckEditorType]="editorType">
         </op-ckeditor>
       </div>
-      <edit-field-controls *ngIf="!handler.inEditMode"
+      <edit-field-controls *ngIf="!(handler.inEditMode || initializationError)"
                            [fieldController]="field"
                            (onSave)="handler.handleUserSubmit()"
                            (onCancel)="handler.handleUserCancel()"
@@ -60,6 +61,9 @@ export class FormattableEditFieldComponent extends EditFieldComponent implements
 
   public readonly field = this;
 
+  // Detect when inner component could not be initalized
+  public initializationError = false;
+
   @ViewChild(OpCkeditorComponent) instance:OpCkeditorComponent;
 
   // Values used in template