diff --git a/README.md b/README.md
index 726a853..55df54b 100644
--- a/README.md
+++ b/README.md
@@ -162,6 +162,12 @@ On the other hand, the `customTextWrapper` parser function provides the followin
- `value`: The value passed against the child element
+You can pass an object to `allowedEmptyAttributes` to retain empty attribute values for specific element types during HTML conversion.
+
+**Note:**
+By default, if nothing is passed to `allowedEmptyAttributes`, we retain the `alt` attribute for `` and `reference` (asset) element types, even when its value is empty, during HTML conversion.
+
+
You can use the following customized JSON RTE Serializer code to convert your JSON RTE field data into HTML format.
```javascript
@@ -216,6 +222,10 @@ const htmlValue = jsonToHtml(
return `
`,
+ `
This is for testing purpose
`, + `
This is for testing purpose
` + ], + "json": [ + { + "id": "a4794fb7214745a2a47fc24104b762f9", + "type": "docs", + "children": [ + { + "type": "img", + "attrs": { + "url": "image_url.jpeg", + "redactor-attributes": { + "alt": "", + "src": "image_url.jpeg", + "width": "100" + }, + "width": "100" + }, + "uid": "18ff239605014dcaaa23c705caf99403", + "children": [ + { + "text": "" + } + ] + } + ] + }, + { + "uid": "a59f9108e99747d4b3358d9e22b7c685", + "type": "doc", + "attrs": { + "dirty": true + }, + "children": [ + { + "uid": "a41aede53efe46018e00de52b6d0970e", + "type": "reference", + "attrs": { + "display-type": "display", + "asset-uid": "***REMOVED***", + "content-type-uid": "sys_assets", + "asset-link": "https://***REMOVED***.***REMOVED***.com/v3/assets/***REMOVED***1/***REMOVED***/6572c368e7a0d4196d105010/compass-logo-v2-final.png", + "asset-name": "compass-logo-v2-final.png", + "asset-type": "image/png", + "type": "asset", + "class-name": "embedded-asset", + "alt": "", + "asset-alt": "compass-logo-v2-final.png", + "inline": false + }, + "children": [ + { + "text": "" + } + ] + } + ], + "_version": 2 + }, + { + "uid": "a59f9108e99747d4b3358d9e22b7c685", + "type": "doc", + "attrs": { + "dirty": true + }, + "children": [ + { + "uid": "8e7309d3c617401898f45c1c3ae62f1e", + "type": "p", + "attrs": { + "style": {}, + "redactor-attributes": {}, + "dir": "" + }, + "children": [ + { + "text": "This is for testing purpose" + } + ] + } + ], + "_version": 2 + }, + { + "uid": "a59f9108e99747d4b3358d9e22b7c685", + "type": "doc", + "attrs": { + "dirty": true + }, + "children": [ + { + "uid": "e22e5bcaa65b41beb3cc48a8d8cf175c", + "type": "img", + "attrs": { + "url": "https://images.contentstack.io/v3/assets/blta29a98d37041ffc4/blt0f2e045a5f4ae8bd/646df9c6b8153a80eb810a6e/tony-litvyak-PzZQFFeRt54-unsplash.jpg", + "width": 100, + "dirty": true, + "style": { + "text-align": "left", + "width": "100px", + "max-width": "100px", + "float": "left" + }, + "redactor-attributes": { + "position": "left", + "alt": "" + }, + "dir": "", + "alt": "", + "max-width": 100, + "height": 150 + }, + "children": [ + { + "text": "" + } + ] + }, + { + "uid": "8e7309d3c617401898f45c1c3ae62f1e", + "type": "p", + "attrs": { + "style": {}, + "redactor-attributes": {}, + "dir": "" + }, + "children": [ + { + "text": "This is for testing purpose" + } + ] + } + ], + "_version": 2 + } + ] } } \ No newline at end of file diff --git a/test/toRedactor.test.ts b/test/toRedactor.test.ts index adbb8aa..86a5203 100644 --- a/test/toRedactor.test.ts +++ b/test/toRedactor.test.ts @@ -1,9 +1,8 @@ import { toRedactor } from "../src/toRedactor" -import isEqual from "lodash.isequal" - import expectedValue from "./expectedJson" import { imageAssetData } from "./testingData" + describe("Testing json to html conversion", () => { it("heading conversion", () => { let jsonValue = expectedValue["2"].json @@ -292,5 +291,30 @@ describe("Testing json to html conversion", () => { const html = toRedactor(json); expect(html).toBe(`
`)
})
+
+ describe("RT-268", ()=>{
+ it(' should retain empty string value for alt attribute for img type', () => {
+ const json = expectedValue['RT-268'].json[0];
+ const html = toRedactor(json);
+ expect(html).toBe(expectedValue['RT-268'].html[0]);
+ })
+ it(' should retain empty string value for alt attribute for asset reference', () => {
+ const json = expectedValue['RT-268'].json[1];
+ const html = toRedactor(json);
+ expect(html).toBe(expectedValue['RT-268'].html[1]);
+ })
+ it(' should retain empty string value for attributes passed through "allowedEmptyAttributes" prop', () => {
+ const json = expectedValue['RT-268'].json[2];
+ const html = toRedactor(json, {allowedEmptyAttributes: { p: ["dir"]} });
+ expect(html).toBe(expectedValue['RT-268'].html[2]);
+ })
+ it(' should retain empty string value for attributes passed through "allowedEmptyAttributes" prop, where alt is empty too (default empty)', () => {
+ const json = expectedValue['RT-268'].json[3];
+ const html = toRedactor(json, {allowedEmptyAttributes: { "img": ['dir'],"p": ["dir"]} });
+ expect(html).toBe(expectedValue['RT-268'].html[3]);
+ })
+
+ })
+
})