RSS

Broken inline image positioning in SharePoint

A recent update to the text editor web part seems to break positioning for adjacent images.
By Heinrich Ulbricht |

In general, SharePoint is behind Confluence when it comes to positioning images in relation to each other and to surrounding content.

But at least putting images next to each other is possible. Is? Was. s Those two blog posts took a deep dive into the topic of images:

Unfortunately a recent update to the SharePoint text editor web part breaks adjacent images. They aren’t adjacent anymore when editing a page.

Microsoft is upgrading the editor version of SharePoint pages - and the trouble starts

The text editor web part is powered by the CKEditor editor component. It can be licensed by any third party to build rich editor experiences in the browser. Microsoft did that.

The following things define how the text editor web part behaves:

  1. the features that CKEditor provides - like formatting highlighted text, adding tables and so on
  2. add-ons to the editor that Microsoft develops
  3. internal settings set by Microsoft defining which features are available to users
  4. surrounding styles (CSS) that define how things look (e.g. font size)
  5. page contents

The most recent version of CKEditor is version 5 (v5). So far SharePoint used version 4 (v4) of CKEditor.

Microsoft now upgrades pages to use CKEditor v5.

Why is this important for content creators? Because the content of SharePoint pages is somewhat coupled to the editor version of the text editor web part. Microsoft cannot just upgrade from CKEditor v4 to v5 without breaking old pages. Therefore Microsoft auto-upgrade pages when they are being edited. And that modifies the page content.

When you start editing a page and its content briefly disappears and then comes back - this might have been an auto-upgrade.

And somewhere along the way of this auto-upgrade the handling of inline images changed.

How does the page upgrade affect adjacent inline images?

Here are three visuals showing how pages used to behave, and how they behave now.

How it used to be…

This is a page with three adjacent images in view mode, using CKEditor v4:

This is the same page in edit mode, using CKEditor v4:

How it’s now…

And here is a video that shows what happens when the auto-upgrade to v5 for this page kicks in:

Note: I used the browser’s developer tools to slow down the internet connection, which allows us to watch everything in slow motion.

What can be seen in above video:

  1. the page enters edit mode and the three inline images can be seen next to each other for a brief moment
  2. then all web part content vanishes; the auto-upgrade happens where SharePoint converts the content from CKEditor v4 to CKEditor v5
  3. the web part content reappears; the images are placed on top of each other (NOT GOOD)
  4. bonus: all images are gone! (this was a first when recording this video) (NOT GOOD)

Editing this page worked perfectly fine for at least the last 12 months. Images stayed in place, no problems.

Now broken.

What does this mean for pages that WikiTraccs migrated from Confluence to SharePoint?

Pages migrated by WikiTraccs use CKEditor v4. Adjacent images look fine when viewing those pages.

When editing a page with adjacent images SharePoint might decide to skip upgrading this page to v5. The page will look fine in view and edit mode.

When editing a page with adjacent images SharePoint might decide to upgrade this page to v5. Adjacent images won’t be adjacent anymore in edit mode and need to be re-arranged manually. This looks like a newly introduced technical limitation of SharePoint. Note that currently there is no way to put images next to each other via the browser editor.

Note: the same applies to pages transformed by other tools, e.g. when transforming classic SharePoint pages to modern SharePoint pages using the PnP Modernization Tooling.

Resources

I’m keeping track of topics related to page upgrades here.

Adjacent image positioning issues

Issues with adjacent image positioning are reported by the first WikiTraccs client in mid-September.

I created a Microsoft Tech Community post to get input: Modern pages with text web parts upgraded from CKEditor v4 to v5 lose image positioning.

I also created a minimal PowerShell script that can be used to create a SharePoint page with adjacent images to test the page upgrade: GitHub repository. To showcase and pinpoint the issue.

Furthermore I opened a case with Microsoft support, which is closed now. The case ID is 2310071420000151. According to them this is expected behavior.

Other known issues

There were issues with tables when upgrading pages from CKEditor v4 to v5:

There are issues with the new spacing between paragraphs:

Wrapping up

It’s not clear what exactly breaks image positioning on modern pages after upgrading the editor from v4 to v5.

It might be the content upgrade for those pages. But it might also be the changed surrounding styles that come with the upgrade.

I really hope that there will be a proper solution to putting images next to each other on a MODERN SharePoint page. Nothing more. Just some images. Next to each other.