How to set responsive images with CKEditor 5? - ckeditor

Question

Using the Simple Upload Adapter, according to the CKEditor 5 documentation upon a successful image upload, the server should return either:
This for a single image:
{
default: 'http://example.com/images/image–default-size.png'
}
Or this for multiple (i.e. for the srcset attribute)
{
default: 'http://example.com/images/image–default-size.png',
'160': 'http://example.com/images/image–size-160.image.png',
'500': 'http://example.com/images/image–size-500.image.png',
'1000': 'http://example.com/images/image–size-1000.image.png',
'1052': 'http://example.com/images/image–default-size.png'
}
For starters the documentation is incorrect as per this SO post, so I'm not surprised this doesn't work. But does anyone know what response format CKEditor 5 is expecting for it to correctly insert/build the srcset attribute? It does take the default key but seems to ignore the others!

Answer 1

Inside of the _initListeners function of the upload adapter you will find that the Promise only resolves with the following:
resolve( {
default: response.url
} );
The solution - change the Promise to resolve the following:
resolve( response.urls );
Note, in this example the response object may have either keys url or urls.
I ended up using the following as I ignore null keys in my server responses.
if ( response.hasOwnProperty( 'url' ) ) {
resolve( {
default: response.url
} );
} else if ( response.hasOwnProperty( 'urls' ) ) {
resolve( response.urls );
}
As a sidenote, if you've read through the other SO post I referred to, I would also recommend removing this (see commented section):
if ( !response /** || !response.uploaded */ ) {
return reject( response && response.error && response.error.message ? response.error.message : genericError );
}
I'm not a fan of using arbitrary flags in response, if the upload failed then I would rather see a HTTP status code indicating it, I can't see any reason why we need to return 200 and { "uploaded" : false }