[DrupalImage] Image be displayed even if it upload fail in CKEditor 5

Thanks for the bug report!

EDIT: Ah, by uploading an image larger than the allowed file size?

EDIT: Ah, by uploading an image larger than the allowed file size?

Yes

I'm wondering if this can quick fix the problem in project:
Changing the config of ckeditor5_imageUpload in a custom module, using Simple upload adapter instead of the default Base64 image upload adapter(Not sure about the default upload adapter)

Problem casued here:
web/core/node_modules/@ckeditor/ckeditor5-image/src/imageupload/imageuploadediting.js

    /**
     * Reads and uploads an image.
     *
     * The image is read from the disk and as a Base64-encoded string it is set temporarily to
     * `image[src]`. When the image is successfully uploaded, the temporary data is replaced with the target
     * image's URL (the URL to the uploaded image on the server).
     */
    _readAndUpload(loader) {
        const editor = this.editor;
        const model = editor.model;
        const t = editor.locale.t;
        const fileRepository = editor.plugins.get(FileRepository);
        const notification = editor.plugins.get(Notification);
        const imageUtils = editor.plugins.get('ImageUtils');
        const imageUploadElements = this._uploadImageElements;
        model.enqueueChange({ isUndoable: false }, writer => {
            writer.setAttribute('uploadStatus', 'reading', imageUploadElements.get(loader.id));
        });
        return loader.read()
            .then(() => {
            const promise = loader.upload();
            const imageElement = imageUploadElements.get(loader.id);
            // Force re–paint in Safari. Without it, the image will display with a wrong size.
            // https://github.com/ckeditor/ckeditor5/issues/1975
            /* istanbul ignore next -- @preserve */
            if (env.isSafari) {
                const viewFigure = editor.editing.mapper.toViewElement(imageElement);
                const viewImg = imageUtils.findViewImgElement(viewFigure);
                editor.editing.view.once('render', () => {
                    // Early returns just to be safe. There might be some code ran
                    // in between the outer scope and this callback.
                    if (!viewImg.parent) {
                        return;
                    }
                    const domFigure = editor.editing.view.domConverter.mapViewToDom(viewImg.parent);
                    if (!domFigure) {
                        return;
                    }
                    const originalDisplay = domFigure.style.display;
                    domFigure.style.display = 'none';
                    // Make sure this line will never be removed during minification for having "no effect".
                    domFigure._ckHack = domFigure.offsetHeight;
                    domFigure.style.display = originalDisplay;
                });
            }
            model.enqueueChange({ isUndoable: false }, writer => {
                writer.setAttribute('uploadStatus', 'uploading', imageElement);
            });
            return promise;
        })
            .then(data => {
            model.enqueueChange({ isUndoable: false }, writer => {
                const imageElement = imageUploadElements.get(loader.id);
                writer.setAttribute('uploadStatus', 'complete', imageElement);
                this.fire('uploadComplete', { data, imageElement });
            });
            clean();
        })
            .catch(error => {
            // If status is not 'error' nor 'aborted' - throw error because it means that something else went wrong,
            // it might be generic error and it would be real pain to find what is going on.
            if (loader.status !== 'error' && loader.status !== 'aborted') {
                throw error;
            }
            // Might be 'aborted'.
            if (loader.status == 'error' && error) {
                notification.showWarning(error, {
                    title: t('Upload failed'),
                    namespace: 'upload'
                });
            }
            // Permanently remove image from insertion batch.
            model.enqueueChange({ isUndoable: false }, writer => {
                writer.remove(imageUploadElements.get(loader.id));
            });
            clean();
        });
        function clean() {
            model.enqueueChange({ isUndoable: false }, writer => {
                const imageElement = imageUploadElements.get(loader.id);
                writer.removeAttribute('uploadId', imageElement);
                writer.removeAttribute('uploadStatus', imageElement);
                imageUploadElements.delete(loader.id);
            });
            fileRepository.destroyLoader(loader);
        }
    }

Marked as 'needs review' and Backup patch of the MR

It failed coding standards

@cilefen

It failed coding standards

Fixed 😊

Moving to NW for the test coverage