What are the differences between CK4 and CK5 text editor, from both an API and user perspective?

[heinrich-ulbricht]

With the latest release I see code that differentiates between the CKEditor versions used for the text web part.

So far the CKEditor v4 (CK4) seemed to be used, now it's possible that there is v5 (CK5) as well.

Since I'm in the business of generating 1000s of pages with my Confluence to SharePoint migration tool this is of high interest for me 😃

From an API perspective:

• Can I really control the editor type to use when generating a page (CK4 vs CK5)?
• What about CK4 pages - are they automatically converted by Microsoft at some point to a new format (in the backend)? So that an app working on those pages has to be aware of a potential version upgrade?
• Is it safe to continue to generate CK4 pages?
• When working with existing pages it seems like an app for updating those pages has to check the editor version to not harm the contents of the text editor?
• Is there documentation on the differences of those editor types and what that means for a) the API and b) the end user (new features?)?
• This CK4 vs. CK5 switch is done on a per page basis, not per web part, right?
• Are new pages created today via the SharePoint browser UI CK4 or CK5? Will this change over time? How can I force a version?

I see a rather big change regarding inline images here:

pnpcore/src/sdk/PnP.Core.Test/SharePoint/PagesTests.cs

Lines 1460 to 1461 in bf2be7b

	// in CK5 mode there are no extra hidden image web parts anymore
	Assert.IsTrue(createdPage.Controls.Count == 1);

Currently with CK4 hidden image web parts need to be generated. What would be the equivalent for CK5? I assume at least for this topic it's quite important to adhere to the page's editor version.

Are there other topics like the inline images that change quite dramatically between CK4 and CK5?

And from an end user perspective: what's new with CK5 that can be created programmatically (looking for table cell colors, merged table cells, nested tables, nested web parts, etc. pp.)?

And is there anything that an app generating pages using either PnP.Core or PnP.Framework should change immediately to not break something?

An insights are appreciated!

[jansenbe]

@heinrich-ulbricht : I'm OOF, but here's already a short answer: things should be backwards compatible

[heinrich-ulbricht]

Thanks for heads-up. Had to google OOF though 😅 https://techcommunity.microsoft.com/t5/exchange-team-blog/why-is-oof-an-oof-and-not-an-ooo/ba-p/610191

[heinrich-ulbricht]

@jansenbe I'd like to dive deeper into this topic of the new CK5 page version to understand it.

I'm thinking about what a client application should change when creating pages programmatically, to create proper CK5 pages. Currently the PnP Framework is used to create pages.

First question up front: are those CK5 pages GA and being used on the way forward in all tenants?

First steps to adjusting a client application I could imagine:

• Check if the PnP Framework supports creating CK5 pages; assumption (without having checked): No
• Identify main adjustments to page generating code that should be made; candidates, based on what I read so far:
  1. Set page version to CK5 to trigger CK5 page creation
  2. Change code that creates inline images; I read that a separate image web part is not needed anymore (is there documentation about this? Or would one learn about that by Get-PnPPage-ing and reverse engineering?
  3. Check if the page HTML that is pushed to the CK5 page somehow differs from CK4 pages and make adjustments; assumption: not many changes here
  4. Check for new features that are supported in CK5 pages (merged table cells, new colors, nested tables, etc.) and use those; assumption: not much to see here (yet)

Does this sound right?

[heinrich-ulbricht]

It seems like the SharePoint editor converts CK4 pages in-place to CK5 when editing them in the browser! @jansenbe Can you confirm that?

And it screws up tables during this process. Tables used to be wrapped in a div class='canvasRteResponsiveTable', now it's a figure. Don't know what the new CK5 does, but wide tables suddenly are unusably narrow. Or I'm interpreting this wrong. But something changed.

Is there any information about this conversion process from CK4 to CK5? Are the CK5 pages GA? Is there any technical documentation about this transition, or is this considered "internal details" that the users don't have to worry about? (But they should, as their content might change.)

Edit: I can confirm different behaviors on different tenants.

Developer tenant: a CK4 page is saved back as CK5 as soon as its edited in the browser. This screws up table formatting.
Non-Dev tenant: a CK4 page stays CK4, tables still looking good.

I think I'm going to create a ticket for that.

[heinrich-ulbricht]

What would be valuable to know is how a client application would decide if it should generate HTML for CK4 or CK5.

Would it be safe to always generate CK5-compliant HTML? Of would that fail on some tenants because CK5 is not yet rolled out? Thus the question about GA. If that's fine then I'll switch everything to CK5 and be good.

[jansenbe]

@heinrich-ulbricht : there were some issues with upgrading CK4 to CK5 tables and fixes for that are currently rolling out. You could in theory generate CK5 compliant HTML, but CK4 is fine as well as that will be upgraded. Before generating CK5 html you need to wait until the the switch to CK5 has rolled out for all tenants and all clouds, so I would for now wait with doing so. A page running CK5 also has a different contentVersion set (see https://github.com/pnp/pnpcore/blob/dev/src/sdk/PnP.Core/Model/SharePoint/Pages/Internal/Page.cs#L989).

[heinrich-ulbricht]

@jansenbe I saw your commits and used it to identify and manipulate the page's CK versions - very helpful!

I'll be asking again about the GA status of CK5 pages in a month or so. Please don't be mad ^^. I want to make sure to create compatible pages for customers.

[heinrich-ulbricht]

@jansenbe Hi, just checking back if the new CK editor version is rolling out to customers. I have a case with image positioning issues (WikiTransformationProject/wikitraccs-releases#89) when editing a page and this somehow reminds me of the table issues (SharePoint/sp-dev-docs#9160). Still need to find the root cause and automatic page upgrades are a candidate.

Edit: I figured I'd add a repro script for that case as otherwise nobody ever will be able to know exactly what's going on -> https://github.com/WikiTransformationProject/library/tree/main/issue-related/ckeditor/inline-images

[heinrich-ulbricht]

@jansenbe Hi again. Just wanted to ask if the new CKEditor v5 page format is GA, so I can adapt page generation code to this new format?

And fyi I opened a case with Microsoft regarding broken adjacent inline image positioning (#2310071420000151). I also put the whole story in a blog post: Broken inline image positioning in SharePoint. If I can do anything to help getting this fixed please let me know. It's a huge blow for content creators, not being able to put image next to each other (which used to work) :(