json-rte-serializer not converting embedded image assets to and from html

[krystofsykora]

Hello good people of Contentstack,

I have a bug report/question: I'm using the json-rte-serializer to convert Contentstack json rich text fields to html and back.

I'm having some trouble when the rich text includes a reference to an image in my assets, such as with this example:

Where the json rich text for the asset reads:

{
  "type": "doc",
  "attrs": {},
  "uid": "15f6598d47d64423bf741c2a8869aba1",
  "children": [
    {
      "uid": "297d01bb8fa3427a9d1762fa618cc2c1",
      "type": "reference",
      "attrs": {
        "display-type": "display",
        "asset-uid": "blte303180181b60c6b",
        "content-type-uid": "sys_assets",
        "asset-link": "https://images.contentstack.io/v3/assets/blt16cd66e95c9bd033/blte303180181b60c6b/6634d8e33d07fbb1b8d9793d/Sphere.jpeg",
        "asset-name": "Sphere.jpeg",
        "asset-type": "image/jpeg",
        "type": "asset",
        "class-name": "embedded-asset",
        "alt": "Sphere.jpeg",
        "asset-alt": "Sphere.jpeg",
        "redactor-attributes": {
          "alt": "Sphere.jpeg",
          "position": "none",
          "caption": "Image Caption"
        },
        "style": {},
        "position": "none",
        "asset-caption": "Image Caption"
      },
      "children": [
        {
          "text": ""
        }
      ]
    }
  ],
  "_version": 1
}

and the jsonToHtml conversion yields:

<figure style="margin: 0">
    <div style="display: inline-block"><img
            src="https://images.contentstack.io/v3/assets/blt16cd66e95c9bd033/blte303180181b60c6b/6634d8e33d07fbb1b8d9793d/Sphere.jpeg"
            alt="Sphere.jpeg" caption="Image Caption" class="embedded-asset" content-type-uid="sys_assets" type="asset"
            asset-alt="Sphere.jpeg" style="width: auto"
            data-sys-asset-filelink="https://images.contentstack.io/v3/assets/blt16cd66e95c9bd033/blte303180181b60c6b/6634d8e33d07fbb1b8d9793d/Sphere.jpeg"
            data-sys-asset-uid="blte303180181b60c6b" data-sys-asset-filename="Sphere.jpeg"
            data-sys-asset-contenttype="image/jpeg" data-sys-asset-caption="Image Caption"
            data-sys-asset-alt="Sphere.jpeg" data-sys-asset-position="none" sys-style-type="display"/>
        <figcaption style="text-align:center">Image Caption</figcaption>
    </div>
</figure>

But when I take the resulting HTML and try to convert it back, using htmlToJson I get:

{
  "type": "doc",
  "uid": "4886ddaf349946bc9d9ebf1df10c5b25",
  "attrs": {},
  "children": [
    {
      "type": "img",
      "attrs": {
        "style": {
          "margin": "0px"
        },
        "redactor-attributes": {
          "style": "margin: 0"
        }
      },
      "uid": "90aafc2814334af293d30843e650bde6",
      "children": [
        {
          "text": ""
        }
      ]
    }
  ]
}

Witch results in a malformed image/field once used to update the original Contentstack entry.

Is this sort of to-and-from transformation not supported for assets/images? Or could this be a bug you folks could help me with?

Thanks!

(I'm using "@contentstack/json-rte-serializer": "^2.0.6" )

[Jayesh2812]

Hey @krystofsykora, this should be fixed on the latest versions, and now you can get the embedded image assets while converting JSON to HTML and vice-versa.