Fix "Blank Space" When Editing Text With Floating Image at Beginning of Text

[mmichaelis]

The Issue

We identified an issue with our image integration, which restricts images to be only represented as "inline images": Given a structure like:

<p><img class="float-left"/></p>
<p>Text</p>

It gets rendered with a virtual "paragraph" initially by CKEditor, causing a "surprising blank space" to be shown above the "Text":

<p><img class="float-left"/></p>
<p></p>
<p>Text</p>

This issue got reproduced:

• Issues Restricting to Inline Images Only ("Jumpy Editing", "Unreachable Editing Regions") ckeditor/ckeditor5#15652

The issue extends to even more problems, like not being able to add text before the floating image.

Suggested Solution

The suggested solution is to also support block images, and get closer to the well-paved path in CKEditor 5, where both types are supported.

This again requires some deep changes, as we currently have a strong dependency on ImageInline and also break with the (undocumented) CKEditor 5 contracts, that each and every image must have a src attribute set in model layer (see ckeditor/ckeditor5#15653).

More to come, if we follow this track, like adapting our data-processing. The suggested approach is, to identify an image being the only element within a <p> tag as "block image" (toView) and later again transform it in toData mapping to a structure <p><img/></p>.

To-Do

• Remove src attribute already in dataDowncast

• Add toData data-processing from incoming structure for block-level images.

  Possibly not even required, if we ensure, that on dataDowncast the data-xlink-href is stored at the image and not at the figure.

• Add toView data-processing to prepare some <figure> element.

  We may need to learn, which attributes (also) go to the <figure> element. Current observation is, that some class attribute values (here: alignment) are duplicated.

Example representation of a block-level image in data view layer:

<figure class="image float--left" data-xlink-href="content/900#properties.data">
  <img class="float--left"
       src="data:image/png;base64,iVBORw0KGg..."
       alt="Floating Image">
</figure><p>Test</p>

where the data only represent the data BLOB, that is irrelevant in data layer.