Forum Discussion

Brass Contributor

Aug 01, 2018

Solved

Migrating HTML to Modern Pages - Looks great until page is edited, then content is lost

We are migrating HTML to modern pages using code like: var page = context.Web.AddClientSidePage(pageName, true); page.PageTitle = "some title"; string htmlContent = "<some html content from ano...

BertJansen
Aug 02, 2018
The easiest way to understand what's valid HTML is to create a piece of text using all the layout and formatting options you need. Once you've that you can grab the page list item and look at the canvascontent1 field to obtain the generated HTML. You'll see that only a limited number of styles are supported and fixed set of classes for color and size information. Anything else you use can be initially displayed but will be lost during edit.

Warwick Ward

Bronze Contributor

Feb 13, 2022

I'm facing the same issues now utilising PnP.Powershell to import html into text components.

Transformation Framework currently only supports SharePoint Classic > SharePoint Modern pages.

Would be good to know the HTML transformation it performs, is there a reference?

*** Update looks like this is the transformation code

https://github.com/pnp/modernization/blob/master/Tools/SharePoint.Modernization/SharePointPnP.Modernization.Framework/Transform/HtmlTransformator.cs

Images

- <img src=""> = is stripped (after import and Edit+Publish)

HyperLinks

- <a href=""></a> = is stripped (after import and Edit+Publish)

- [[LINK | URL ]] = is transform (after import and Edit+Publish)

BertJansen
Microsoft
Feb 14, 2022
Here's the latest code (https://github.com/pnp/pnpframework/blob/dev/src/lib/PnP.Framework/Modernization/Transform/HtmlTransformator.cs) which should be fairly similar. When it comes to inline images: these were never fully supported by the Page Transformation tech, during transformation the default behavior was to create the images as separate image web parts and split the html in parts so the image web parts could fit in between. Now that inline images are supported on modern pages Page Transformation should get updated to support those, that's a two step approach. First the underlying pages API implementation needs to be updated and that's done (see https://pnp.github.io/pnpcore/using-the-sdk/pages-webparts.html#using-inline-images-in-text-parts). Next is updating the page transformation bits themselves, but that work is still pending.