Modern Pages: New CK5 editor type - are the current DIV wrappers for text web parts still correct? Or do they need an update?

[heinrich-ulbricht]

PnP Core is about to switch to the (relatively new) CK5 editor type by default (still unreleased as of writing this), when creating modern pages:

pnpcore/src/sdk/CHANGELOG.md

Line 32 in 74e4d0c

- Switched to default CK5 editor type for new pages + improved the inline image handling for the CK5 editor #1558 [jansenbe - Bert Jansen]

The new editor type requires different HTML to be generated for certain page contents, like inline images, tables (now using figure) and others.

Here for example the editor type determines, which inline image HTML will be generated:

pnpcore/src/sdk/PnP.Core/Model/SharePoint/Pages/Internal/Page.cs

Lines 20 to 21 in 74e4d0c

private const string inlineImageCK4Html = "<div tabindex=\"-1\" data-cke-widget-wrapper=\"1\" data-cke-filter=\"off\" class=\"cke_widget_wrapper cke_widget_block cke_widget_inlineimage cke_widget_wrapper_webPartInRteInlineImage cke_widget_wrapper_{ImageAlignment} cke_widget_wrapper_webPartInRte\" data-cke-display-name=\"div\" data-cke-widget-id=\"0\" role=\"region\" aria-label=\"Inline image in RTE. Use Alt + F11 to go to toolbar. Use Alt + P to open the property pane.\"><div data-webpart-id=\"image\" class=\"webPartInRte {ImageAlignment} webPartInRteInlineImage cke_widget_element\" data-cke-widget-data=\"%7B%22classes%22%3A%7B%22webPartInRteInlineImage%22%3A1%2C%22{ImageAlignment}%22%3A1%2C%22webPartInRte%22%3A1%7D%7D\" data-cke-widget-upcasted=\"1\" data-cke-widget-keep-attr=\"0\" data-widget=\"inlineimage\" data-instance-id=\"{TextEditorInstanceId}\" title=\"\"></div></div>";

private const string inlineImageCK5Html = "<div class=\"imagePlugin\" style=\"background-color:transparent;position:relative;\" data-alignment=\"{ImageAlignment}\" data-imageurl=\"{ImageUrl}\" data-uploading=\"0\" data-height=\"{ImageHeight}\" data-width=\"{ImageWidth}\" data-imagenaturalheight=\"{ImageHeight}\" data-imagenaturalwidth=\"{ImageWidth}\" data-widthpercentage=\"{WidthPercentage}\" data-webid=\"{WebId}\" data-siteid=\"{SiteId}\" data-listid=\"{ListId}\" data-uniqueid=\"{UniqueId}\" data-isoverlaytextenabled=\"false\" data-captiontext=\"{ImageCaption}\" data-alttext=\"{ImageAlternativeText}\" data-linkurl=\"{ImageLinkUrl}\"></div>";

Looking at the page structure of current modern pages, I'm wondering if the DIVs containing the text web parts also need to be changed, specifically this part:

pnpcore/src/sdk/PnP.Core/Model/SharePoint/Pages/Internal/PageText.cs

Lines 144 to 145 in 74e4d0c

	html.Append($@"<div {CanvasControlAttribute}=""{CanvasControlData}"" {CanvasDataVersionAttribute}=""{ DataVersion}"" {ControlDataAttribute}=""{jsonControlData.Replace("\"", "&quot;")}"">");
	html.Append($@"<div {TextRteAttribute}=""{Rte}"">");

When I create a modern page in the browser and look at the HTML structure, it looks different.

At the same time, generating new CK5 pages using the existing div wrappers seems to work.

Nevertheless, I see some effects like tables not being sized properly until I edit the page, even if the page is provisioned as CK5. So, I'm wondering if the surrounding DIVs needs to be adjusted to be "proper CK5 HTML".

Any insights are appreciated. cc @jansenbe

[heinrich-ulbricht]

Looking at the CanvasContent1 for a newly created CK5 page it seems the DIV structure surrounding at least the text web parts looks identical. It's just that it looks differently in the browser.

So the answer to my question seems to be: no changes required.

I'd still like to have a nod in this direction, to have a second opinion.