fix: add id to the span tag as per json rte changes

harshitha-cstk · harshitha-cstk · commit 6a59cbcb1ec5 · 2023-12-01T17:24:59.000+05:30
diff --git a/__test__/json-to-html.test.ts b/__test__/json-to-html.test.ts
@@ -20,7 +20,9 @@ import {
     plainTextJson,
     styleinPJson,
     tableJson,
-    unorderListJson} from './mock/json-element-mock'
+    unorderListJson,
+    entryJsonRteWithClass,
+    entryJsonRteWithId} from './mock/json-element-mock'
 import {
     blockquoteHtml,
     codeHtml,
@@ -38,7 +40,9 @@ import {
     plainTextHtml, 
     styleinPHtml, 
     tableHtml, 
-    unorderListHtml} from './mock/json-element-mock-result'
+    unorderListHtml,
+    plainTextHtmlWithClass,
+    plainTextHtmlWithId } from './mock/json-element-mock-result'
 describe('Node parser paragraph content', () => {
     it('Should accept proper values', done => {
         const entry = { uid: 'uid'}
@@ -171,85 +175,17 @@ describe('Node parse text Content', () => {
         done()
     })
     it('Should return html text with classname', done => {
-        const entry = {
-            "uid": "",
-            "_version": 3,
-            "locale": "en-us",
-            "json_rte": {
-                "type": "doc",
-                "attrs": {},
-                "uid": "",
-                "children": [
-                    {
-                        "type": "p",
-                        "attrs": {class: "class_p"},
-                        "uid": "",
-                        "children": [
-                            {
-                                "text": "abc",
-                                "classname": "yellow",
-                            },
-                            {
-                                "text": "def",
-                                "italic": false,
-                                "underline": true,
-                                "classname": "red",
-                                
-                            },
-                            {
-                                "text": "fed",
-                                "italic": true,
-                                "underline": true,
-                                "classname": "green",
-                                
-                            },
-                            {
-                                "text": "ghi",
-                                "underline": true,
-                                "classname": "blue",
-                            },
-                            {
-                                "text": "Basic",
-                                "classname": "orange",
-                                "id": "blue",
-                                "bold": true,
-                                "underline": true,
-                                "italic": true
-                            },
-                            {
-                                "text": "data",
-                                "classname": "brown",
-                                "id": "blue",
-                                "bold": false,
-                                "underline": true,
-                                "italic": true
-                            },
-                            {
-                                "type": "h1",
-                                "attrs": {},
-                                "uid": "",
-                                "children": [
-                                    {
-                                        "text": "abc",
-                                        "classname": "purple",
-                                    },
-                                    {
-                                        "text": "def",
-                                        "italic": false,
-                                        "underline": true,
-                                        "classname": "white",
-                                    }
-                                ]
-                            }
-                        ]
-                    }
-                ],
-                "_version": 3
-            }
-        }
-        const paths = ['json_rte', 'children']
-        const response = jsonToHTML({ entry: entry, paths })
-        console.log("🚀 ~ file: json-to-html.test.ts:193 ~ describe ~ entry.json_rte:", entry)
+        const entry = entryJsonRteWithClass
+        const paths = ['json_rte']
+        jsonToHTML({ entry: entry, paths })
+        expect(entry.json_rte).toEqual(plainTextHtmlWithClass)
+        done()
+    })
+    it('Should return html text with id', done => {
+        const entry = entryJsonRteWithId
+        const paths = ['json_rte']
+        jsonToHTML({ entry: entry, paths })
+        expect(entry.json_rte).toEqual(plainTextHtmlWithId)
         done()
     })
 })
diff --git a/__test__/mock/json-element-mock-result.ts b/__test__/mock/json-element-mock-result.ts
@@ -15,6 +15,8 @@ const codeHtml = "<code>Code template.</code>"
 const linkInPHtml = "<strong><em><u><sub></sub></u></em></strong><a href=\"LINK.com\">LINK</a>"
 const linkInPURLHtml = "<strong><em><u><sub></sub></u></em></strong><a href=\"LINK.com\" target=\"_blank\">LINK</a>"
 const styleinPHtml = "<p style=\"text-align:right;\">This is <span>second</span> <u>JSON</u> entry</p><p style=\"text-align:left;\"><a href=\"example.com\" target=\"_blank\">Example</a></p>"
+const plainTextHtmlWithClass = "<p class=\"class_p\"><span class=\"yellow\">abc</span><span class=\"blue\"><u>ghi</u></span><span class=\"orange\" id=\"blue\"><strong><em><u>Basic</u></em></strong></span><h1><span class=\"purple\">abc</span></h1></p>"
+const plainTextHtmlWithId = "<p class=\"class_p\"><span id=\"blue\"><em><u>data</u></em></span></p>"
 
 export {
     h1Html,
@@ -34,4 +36,6 @@ export {
     blockquoteHtml,
     unorderListHtml,
     styleinPHtml,
+    plainTextHtmlWithClass,
+    plainTextHtmlWithId
 }
diff --git a/__test__/mock/json-element-mock.ts b/__test__/mock/json-element-mock.ts
@@ -1064,6 +1064,83 @@ const embeddedEntryJsonEntry = {
     }
 }
 
+const entryJsonRteWithClass = {
+  "uid": "",
+  "_version": 3,
+  "locale": "en-us",
+  "json_rte": {
+      "type": "doc",
+      "attrs": {},
+      "uid": "",
+      "children": [
+          {
+              "type": "p",
+              "attrs": {class: "class_p"},
+              "uid": "",
+              "children": [
+                  {
+                      "text": "abc",
+                      "classname": "yellow",
+                  },
+                  {
+                      "text": "ghi",
+                      "underline": true,
+                      "classname": "blue",
+                  },
+                  {
+                      "text": "Basic",
+                      "classname": "orange",
+                      "id": "blue",
+                      "bold": true,
+                      "underline": true,
+                      "italic": true
+                  },
+                  {
+                      "type": "h1",
+                      "attrs": {},
+                      "uid": "",
+                      "children": [
+                          {
+                              "text": "abc",
+                              "classname": "purple",
+                          }
+                      ]
+                  }
+              ]
+          }
+      ],
+      "_version": 3
+  }
+}
+
+const entryJsonRteWithId = {
+  "uid": "",
+  "_version": 3,
+  "locale": "en-us",
+  "json_rte": {
+      "type": "doc",
+      "attrs": {},
+      "uid": "",
+      "children": [
+          {
+              "type": "p",
+              "attrs": {class: "class_p"},
+              "uid": "",
+              "children": [
+                  {
+                      "text": "data",
+                      "id": "blue",
+                      "bold": false,
+                      "underline": true,
+                      "italic": true
+                  }
+              ]
+          }
+      ],
+      "_version": 3
+  }
+}
+
 export { 
   h1Json,
   h2Json,
@@ -1090,5 +1167,7 @@ export {
   embeddedEntryJsonEntry,
   entryReferenceLinkJson,
   entryReferenceBlockJson,
-  entryReferenceInlineJson
+  entryReferenceInlineJson,
+  entryJsonRteWithClass,
+  entryJsonRteWithId
 }
diff --git a/src/helper/enumerate-entries.ts b/src/helper/enumerate-entries.ts
@@ -67,8 +67,8 @@ export function textNodeToHTML(node: TextNode, renderOption: RenderOption): stri
     if (node.bold) {
         text =  (renderOption[MarkType.BOLD] as RenderMark)(text)
     }
-    if (node.classname) {
-        text =  (renderOption[MarkType.CLASSNAME] as RenderMark)(text, node.classname)
+    if (node.classname || node.id) {
+        text =  (renderOption[MarkType.CLASSNAME_OR_ID] as RenderMark)(text, node.classname, node.id)
     }
     return text
 }
diff --git a/src/nodes/mark-type.ts b/src/nodes/mark-type.ts
@@ -2,7 +2,7 @@ enum MarkType {
     BOLD = 'bold',
     ITALIC = 'italic',
     UNDERLINE = 'underline',
-    CLASSNAME = 'classname',
+    CLASSNAME_OR_ID = 'classnameOrId',
 
     STRIKE_THROUGH = 'strikethrough',
     INLINE_CODE = 'inlineCode',
diff --git a/src/nodes/text-node.ts b/src/nodes/text-node.ts
@@ -10,6 +10,7 @@ export default class TextNode extends Node {
     subscript?: boolean
     break?: boolean
     classname?: string
+    id?: string
 
     text: string
 
diff --git a/src/options/default-node-options.ts b/src/options/default-node-options.ts
@@ -114,8 +114,8 @@ export const defaultNodeOption: RenderOption = {
     [MarkType.BREAK]:(text: string) => {
         return `<br />${text}`
     },
-    [MarkType.CLASSNAME]:(text: string, classname: string) => {
-        return `<span class="${classname}">${text}</span>`
+    [MarkType.CLASSNAME_OR_ID]:(text: string, classname: string, id:string) => {
+        return `<span${classname ? ` class="${classname}"` : ``}${id ? ` id="${id}"` : ``}>${text}</span>`
     }
 
 }
diff --git a/src/options/index.ts b/src/options/index.ts
@@ -6,7 +6,7 @@ import Node from '../nodes/node';
 
 export type Next = (nodes: AnyNode[]) => string
 export type RenderNode = (node: Node, next: Next) => string;
-export type RenderMark = (text: string, classname?: string) => string;
+export type RenderMark = (text: string, classname?: string, id?: string) => string;
 export type RenderItem = (item: EmbeddedItem | EntryNode, metadata: Metadata) => string;
 export interface RenderOption {
   [embedType: string]: RenderNode | RenderMark | RenderItem | RenderContentType;

Original file line number	Diff line number	Diff line change
`@@ -67,8 +67,8 @@ export function textNodeToHTML(node: TextNode, renderOption: RenderOption): stri`
`67`	`67`	`if (node.bold) {`
`68`	`68`	`text = (renderOption[MarkType.BOLD] as RenderMark)(text)`
`69`	`69`	`}`
`70`		`- if (node.classname) {`
`71`		`- text = (renderOption[MarkType.CLASSNAME] as RenderMark)(text, node.classname)`
	`70`	`+ if (node.classname \|\| node.id) {`
	`71`	`+ text = (renderOption[MarkType.CLASSNAME_OR_ID] as RenderMark)(text, node.classname, node.id)`
`72`	`72`	`}`
`73`	`73`	`return text`
`74`	`74`	`}`
Original file line number	Diff line number	Diff line change
`@@ -114,8 +114,8 @@ export const defaultNodeOption: RenderOption = {`
`114`	`114`	`[MarkType.BREAK]:(text: string) => {`
`115`	`115`	return `<br />${text}`
`116`	`116`	`},`
`117`		`- [MarkType.CLASSNAME]:(text: string, classname: string) => {`
`118`		- return `<span class="${classname}">${text}</span>`
	`117`	`+ [MarkType.CLASSNAME_OR_ID]:(text: string, classname: string, id:string) => {`
	`118`	+ return `<span${classname ? ` class="${classname}"` : ``}${id ? ` id="${id}"` : ``}>${text}</span>`
`119`	`119`	`}`
`120`	`120`
`121`	`121`	`}`