How to set responsive images with CKEditor 5?

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 }