IBX-10565: Fallback configuration when failing init (#273)

Author: dew326

src/bundle/Resources/public/js/CKEditor/core/base-ckeditor.js

@@ -249,106 +249,123 @@ const VIEWPORT_TOP_OFFSET_DISTRACTION_FREE_MODE = 0;
             const customEvent = new CustomEvent('ibexa-ckeditor:configure', {
                 detail: { container, config },
             });
+            const createCKEditor = () => {
+                CKEditor.create(container, config).then((editor) => {
+                    this.editor = editor;
 
-            doc.body.dispatchEvent(customEvent);
+                    const editableUIView = editor.ui.view.editable;
+                    const editableElement = this.editor.editing.view.getDomRoot();
+                    const editorToolbarPanelInstance = this.editor.ui.view.panel;
+                    const initialData = this.getData();
+                    const updateInput = (data, shouldFireInputEvent = true) => {
+                        const textarea = container.closest('.ibexa-data-source').querySelector('textarea');
 
-            CKEditor.create(container, config).then((editor) => {
-                this.editor = editor;
+                        textarea.value = this.xhtmlify(data).replace(this.xhtmlNamespace, this.ezNamespace);
 
-                const editableUIView = editor.ui.view.editable;
-                const editableElement = this.editor.editing.view.getDomRoot();
-                const editorToolbarPanelInstance = this.editor.ui.view.panel;
-                const initialData = this.getData();
-                const updateInput = (data, shouldFireInputEvent = true) => {
-                    const textarea = container.closest('.ibexa-data-source').querySelector('textarea');
+                        if (shouldFireInputEvent) {
+                            textarea.dispatchEvent(new Event('input'));
+                        }
+                    };
+                    const setDataSourceHeight = (toolbarNode, fieldEditNode) => {
+                        const dataSourceNode = fieldEditNode.querySelector('.ibexa-data-source');
+                        const { height: toolbarHeight } = toolbarNode.getBoundingClientRect();
+                        const { top: dataSourceTop } = dataSourceNode.getBoundingClientRect();
 
-                    textarea.value = this.xhtmlify(data).replace(this.xhtmlNamespace, this.ezNamespace);
+                        if (toolbarHeight > dataSourceTop) {
+                            const positionDiff = toolbarHeight - dataSourceTop;
 
-                    if (shouldFireInputEvent) {
-                        textarea.dispatchEvent(new Event('input'));
-                    }
-                };
-                const setDataSourceHeight = (toolbarNode, fieldEditNode) => {
-                    const dataSourceNode = fieldEditNode.querySelector('.ibexa-data-source');
-                    const { height: toolbarHeight } = toolbarNode.getBoundingClientRect();
-                    const { top: dataSourceTop } = dataSourceNode.getBoundingClientRect();
+                            dataSourceNode.style.height = `calc(100% - ${positionDiff}px)`;
+                            dataSourceNode.style.marginTop = `${positionDiff}px`;
+                        }
+                    };
+                    const clearDataSourceHeight = () => {
+                        const fieldEditNode = editableElement.closest('.ibexa-field-edit');
+                        const dataSourceNode = fieldEditNode.querySelector('.ibexa-data-source');
 
-                    if (toolbarHeight > dataSourceTop) {
-                        const positionDiff = toolbarHeight - dataSourceTop;
+                        dataSourceNode.style.removeProperty('height');
+                        dataSourceNode.style.removeProperty('margin-top');
+                    };
+                    const setToolbarMaxWidth = (toolbarNode, fieldEditNode) => {
+                        const distractionFreeModeControlNodeBtn = fieldEditNode.querySelector(
+                            '.ibexa-field-edit__distraction-free-mode-control-container .ibexa-field-edit__distraction-free-mode-btns',
+                        );
 
-                        dataSourceNode.style.height = `calc(100% - ${positionDiff}px)`;
-                        dataSourceNode.style.marginTop = `${positionDiff}px`;
-                    }
-                };
-                const clearDataSourceHeight = () => {
-                    const fieldEditNode = editableElement.closest('.ibexa-field-edit');
-                    const dataSourceNode = fieldEditNode.querySelector('.ibexa-data-source');
-
-                    dataSourceNode.style.removeProperty('height');
-                    dataSourceNode.style.removeProperty('margin-top');
-                };
-                const setToolbarMaxWidth = (toolbarNode, fieldEditNode) => {
-                    const distractionFreeModeControlNodeBtn = fieldEditNode.querySelector(
-                        '.ibexa-field-edit__distraction-free-mode-control-container .ibexa-field-edit__distraction-free-mode-btns',
-                    );
-
-                    const dataSourceNode = fieldEditNode.querySelector('.ibexa-data-source');
-                    const { offsetWidth: dataSourceNodeWidth } = dataSourceNode;
-                    let toolbarNodeMaxWidth = dataSourceNodeWidth;
-
-                    if (distractionFreeModeControlNodeBtn !== null) {
-                        const { offsetWidth: distractionFreeModeControlNodeBtnWidth } = distractionFreeModeControlNodeBtn;
-
-                        toolbarNodeMaxWidth = dataSourceNodeWidth - distractionFreeModeControlNodeBtnWidth;
-                    }
+                        const dataSourceNode = fieldEditNode.querySelector('.ibexa-data-source');
+                        const { offsetWidth: dataSourceNodeWidth } = dataSourceNode;
+                        let toolbarNodeMaxWidth = dataSourceNodeWidth;
 
-                    toolbarNode.style.maxWidth = `${toolbarNodeMaxWidth}px`;
-                };
+                        if (distractionFreeModeControlNodeBtn !== null) {
+                            const { offsetWidth: distractionFreeModeControlNodeBtnWidth } = distractionFreeModeControlNodeBtn;
 
-                updateInput(initialData, false);
+                            toolbarNodeMaxWidth = dataSourceNodeWidth - distractionFreeModeControlNodeBtnWidth;
+                        }
 
-                this.editor.model.document.on('change:data', () => {
-                    const data = this.getData();
+                        toolbarNode.style.maxWidth = `${toolbarNodeMaxWidth}px`;
+                    };
 
-                    updateInput(data);
-                });
+                    updateInput(initialData, false);
 
-                this.editor.on('set:distractionFreeModeActive', ({ source: eventEditorInstance }, name, value) => {
-                    const { ui: eventEditorUiInstance } = eventEditorInstance;
-                    const { panel: eventEditorToolbarPanelInstance } = eventEditorUiInstance.view;
-                    const toolbarPanelNode = eventEditorToolbarPanelInstance.element;
-                    const toolbarPanelsContainer = toolbarPanelNode.closest('.ck-body');
+                    this.editor.model.document.on('change:data', () => {
+                        const data = this.getData();
 
-                    eventEditorUiInstance.viewportOffset = {
-                        top: value ? VIEWPORT_TOP_OFFSET_DISTRACTION_FREE_MODE : this.viewportTopOffset,
-                    };
+                        updateInput(data);
+                    });
 
-                    toolbarPanelsContainer.classList.toggle('ck-body--distraction-free-mode-active');
+                    this.editor.on('set:distractionFreeModeActive', ({ source: eventEditorInstance }, name, value) => {
+                        const { ui: eventEditorUiInstance } = eventEditorInstance;
+                        const { panel: eventEditorToolbarPanelInstance } = eventEditorUiInstance.view;
+                        const toolbarPanelNode = eventEditorToolbarPanelInstance.element;
+                        const toolbarPanelsContainer = toolbarPanelNode.closest('.ck-body');
 
-                    if (!value) {
-                        eventEditorToolbarPanelInstance.hide();
-                        clearDataSourceHeight();
-                    }
-                });
+                        eventEditorUiInstance.viewportOffset = {
+                            top: value ? VIEWPORT_TOP_OFFSET_DISTRACTION_FREE_MODE : this.viewportTopOffset,
+                        };
 
-                editableUIView.on('change:isFocused', (event) => {
-                    const containerDataSource =
-                        container.closest('.ibexa-field-edit--ezrichtext .ibexa-data-source') ??
-                        container.closest('.ibexa-data-source--richtext');
+                        toolbarPanelsContainer.classList.toggle('ck-body--distraction-free-mode-active');
 
-                    containerDataSource.classList.toggle('ibexa-data-source--focused', event.source.isFocused);
-                });
+                        if (!value) {
+                            eventEditorToolbarPanelInstance.hide();
+                            clearDataSourceHeight();
+                        }
+                    });
 
-                editorToolbarPanelInstance.on('change:isVisible', ({ source: eventBalloonPanelViewInstance }) => {
-                    const fieldEditNode = editableElement.closest('.ibexa-field-edit');
+                    global.setTimeout(() => {
+                        if (this.editor.isReadOnly) {
+                            this.editor.destroy();
 
-                    setToolbarMaxWidth(eventBalloonPanelViewInstance.element, fieldEditNode);
+                            const customEventFallback = new CustomEvent('ibexa-ckeditor:fallback-configuration', {
+                                detail: { container, config },
+                            });
 
-                    if (editor?.distractionFreeModeActive) {
-                        setDataSourceHeight(eventBalloonPanelViewInstance.element, fieldEditNode);
-                    }
+                            doc.body.dispatchEvent(customEventFallback);
+
+                            createCKEditor();
+                        }
+                    }, 2000);
+
+                    editableUIView.on('change:isFocused', (event) => {
+                        const containerDataSource =
+                            container.closest('.ibexa-field-edit--ezrichtext .ibexa-data-source') ??
+                            container.closest('.ibexa-data-source--richtext');
+
+                        containerDataSource.classList.toggle('ibexa-data-source--focused', event.source.isFocused);
+                    });
+
+                    editorToolbarPanelInstance.on('change:isVisible', ({ source: eventBalloonPanelViewInstance }) => {
+                        const fieldEditNode = editableElement.closest('.ibexa-field-edit');
+
+                        setToolbarMaxWidth(eventBalloonPanelViewInstance.element, fieldEditNode);
+
+                        if (editor?.distractionFreeModeActive) {
+                            setDataSourceHeight(eventBalloonPanelViewInstance.element, fieldEditNode);
+                        }
+                    });
                 });
-            });
+            };
+
+            doc.body.dispatchEvent(customEvent);
+
+            createCKEditor();
         }
     }