Handling of inline images in text web part broken on export

[ohaak2]

Using the PowerShell function to export a page and then importing the same template file again (e. g. with another page name), I've noticed that inline images in text parts still seemed somehow broken afterwards.

Here are some screenshots to show the effect:

This is the 'orginal' page I've then exported using PnP.PowerShell's Cmdlet Export-PnPPage:

I've then modified page name and title and imported the page to the same site with PnP.PowerShell Cmdlet Invoke-PnPSiteTemplate. Now the inline image will be shown twice: Once above the rte web part (where it's technically located in the page structure) and the second timer where it's supposed to be shown (inside the rte web part, where the image web part's corresponding placeholder resides):

I'm currently having the same issues adding inline images directly using PnP.PowerShell commands and having more or less the same issues. Despite setting the cross-reference from the HTML placeholder in the rich text content back to the instance id of the image web part and having the image web part having the instance id of the rte web part and being tagged as "InlineImage" I've still the same outcome. That's no big surprise, because for my researches I was of course relying on the web part properties returned by PnP ...

I guess there must be something else that PnP.Framework is missing out on, that will do the trick. Unfortunately I've no clue how to proceed here as comparing the web part properties shows no difference between the original page and the "broken" re-import.

The rte web part text content looks like this. Relevant attribute here seems to be the "data-instance-id" referencing the acutal image web part to be shown "inline":

<p>Lorem ipsum  ...</p>
<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_webPartInRteAlignCenter cke_widget_wrapper_webPartInRte" data-cke-display-name="div" data-cke-widget-id="2" role="region" aria-label="Inlinebild in RTE. Verwenden Sie ALT+F11, um zur Symbolleiste zu wechseln. Verwenden Sie ALT+P, um den Eigenschaftenbereich zu öffnen.">
    <div data-webpart-id="image" class="webPartInRte webPartInRteAlignCenter webPartInRteInlineImage cke_widget_element" data-cke-widget-data="%7B%22classes%22%3A%7B%22webPartInRteInlineImage%22%3A1%2C%22webPartInRteAlignCenter%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="70afffa9-d190-4548-acf8-12709bc58b51" title=""></div>
</div>
<p>Lorem ipsum ...</p>

I already found out, that the inline images json extracted by PnP.Framework obviously needs some other additional parameter "rteInstanceId", defining the reference to the rte web part where it's supposed to be displayed. This looks then e. g. like that:

{
    "id": "d1d91016-032f-456d-98a4-721247c305e8",
    "instanceId": "70afffa9-d190-4548-acf8-12709bc58b51",
    "title": "Bild",
    "description": "Fügen Sie Ihrer Seite ein Bild oder Foto hinzu, einschließlich Textüberlagerungen und der Möglichkeit, Bilder zuzuschneiden und ihre Größe zu ändern.",
    "dataVersion": "1.9",
    "properties": {
        "id": "d8945a5c-2e09-454f-a6dd-e27f614d8c1e",
        "linkUrl": "",
        "isInlineImage": true,
        "alignment": "Center",
        "siteId": "{sitecollectionid}",
        "webId": "{siteid}",
        "listId": "{listid:Site Assets}",
        "uniqueId": "40786ce2-50d6-4db1-9cf3-a59289a97b9b",
        "imgHeight": 960,
        "imgWidth": 1280,
        "imageSourceType": 2,
        "fileName": "Png-logo.png",
        "fixAspectRatio": false,
        "overlayText": "",
        "altText": ""
    },
    "serverProcessedContent": {
        "htmlStrings": {},
        "searchablePlainTexts": {},
        "imageSources": {
            "imageSource": "{site}/SiteAssets/SitePages/Inline-Image-Test/1269131529-Png-logo.png"
        },
        "links": {},
        "customMetadata": {
            "imageSource": {
                "siteId": "{sitecollectionid}",
                "webId": "{siteid}",
                "listId": "{listid:Site Assets}",
                "uniqueId": "40786ce2-50d6-4db1-9cf3-a59289a97b9b",
                "width": 1280,
                "height": 960
            }
        }
    },
    "dynamicDataPaths": {},
    "dynamicDataValues": {},
    "rteInstanceId": "1212fc8d-dd6b-408a-8d5d-9f1cc787efbb"
}

Unfortunately this still seems to be missing something. In view mode we still have the "double image". In edit mode it looks just fine on the first glance, but there are issues like misplaced border for resizing and such, if you try to edit the inline-image:

[ohaak2]

Just checked the page directly using PnP.PowerShell. It seems that the required property "RichTextEditorInstanceId" won't be set - no matter what. Checking the instance in PowerShell it seems to be empty despite the fact that I've filled in the value in the PnP template:

❯ Get-PnPPageComponent -Page $page

InstanceId                           Type        Title Section Column Position PropertiesJson
----------                           ----        ----- ------- ------ -------- --------------
70afffa9-d190-4548-acf8-12709bc58b51 PageWebPart Image 1       1      1        {"id":"d8945a5c-2e09-454f-a6dd-e27f614d8c1e","linkUrl":"","isInlineImage":true,"alignment":"Cen…
8b1409d6-0919-4b1f-b659-05bb96112c25 PageText          1       1      2

❯ $image.RichTextEditorInstanceId

❯ $image.RichTextEditorInstanceId = $text.InstanceId
InvalidOperation: 'RichTextEditorInstanceId' is a ReadOnly property.

So maybe if you just can make that value writable we would have kind of a solution - maybe not for template operations, but at least for direct page operations.

[roberAlb]

Getting the same issue, when I configure the text webpart with the image, basically in the export is coming with 2 web parts duplicating the image. Is there a solution for this? Thanks