CKEditor crashes when pasting an img that contains a width value within the style attribute

[argiepiano]

Description of the bug

CKEditor crashes when pasting an <img> element that contains a width value within its style attribute.

Steps To Reproduce

To reproduce the behavior:

1. In a Vanilla installation of Backdrop, create a page
2. In the body field, click on "Source" so that you can paste the HTML code
3. Paste the following HTML code:

<img src="https://www.sasa.gov.uk/sites/default/files/scottish.png" alt="View this document" style="width: 100%;">

4. Click the Source button again
5. Check the browser's console

At this point, CKEditor completely crashes, and it's impossible to do any further editing. Saving the page will not save the body field either.

Actual behavior

CKEditor crashes

Expected behavior

CKEditor should not crash.

Additional information

This is the error generated in the console (I've disabled JS agregation)

ckeditor5.umd.js?v=1.32.x-dev:11 Uncaught CKEditorError: Cannot read properties of undefined (reading 'toString')
Read more: https://ckeditor.com/docs/ckeditor5/latest/support/error-codes.html#error-Cannot read properties of undefined (reading 'toString')
    at _getResizedWidthHeight (backdrop-image.js?v=1.32.x-dev:335:24)
    at Uo.converter (backdrop-image.js?v=1.32.x-dev:524:37)
    at Uo.fire (ckeditor5.umd.js?v=1.32.x-dev:11:6816)
    at Uo._testAndFire (ckeditor5.umd.js?v=1.32.x-dev:11:196843)
    at Uo._testAndFireAddAttributes (ckeditor5.umd.js?v=1.32.x-dev:11:197057)
    at Object.convertAttributes (ckeditor5.umd.js?v=1.32.x-dev:11:197366)
    at Uo.<anonymous> (ckeditor5.umd.js?v=1.32.x-dev:11:227428)
    at Uo.fire (ckeditor5.umd.js?v=1.32.x-dev:11:6816)
    at Uo._testAndFire (ckeditor5.umd.js?v=1.32.x-dev:11:196843)
    at Uo._convertInsert (ckeditor5.umd.js?v=1.32.x-dev:11:194923)

Add any other information that could help, such as:

• Backdrop CMS version: 1.32.x-dev
• Browser(s) and their versions: Chrome Version 139.0.7258.128

[indigoxela]

@argiepiano many thanks for reporting.

Some more info: I can reproduce the error, but for me the editor recovers and normal editing is possible.

It's nothing newly introduced, the problem happens in CKE5 44.3.0 (currently shipping with stable B), with 45.2.0 (current dev) and with 46.0.1 (very latest, PR from different issue).

So it's unrelated to our switch from dll to umd integration.

BTW the same happens, when switching to the editor's own source mode (via button) and pasting the image markup with inline style set.

The problem goes away, if I remove the inline style - but still omit width/height attributes, so the error message might be misleading.

In both, Firefox and Chromium I get errors in console:

The CKEditor instance could not be initialized.
CKEditorError: can't access property "toString", width is undefined

But in both browsers I can continue to edit content.

It's a bug in backdrop-image.js - percentage values aren't supported and it's also not considered that width/height attributes are missing (undefined). It's no upstream problem, but a problem of dimension handling in our image plugin.

A possible solution could be to use ImageUtils.setImageNaturalSizeAttributes() at some point, but that seems to require some bigger rewrite, as that method's async.