fix: adding classname in the span tag

Author: harshitha-cstk

__test__/json-to-html.test.ts

@@ -167,10 +167,66 @@ describe('Node parse text Content', () => {
         const paths = ['supercharged_rte']
 
         jsonToHTML({ entry, paths})
-
         expect(entry.supercharged_rte).toEqual([plainTextHtml])
         done()
     })
+    it('Should return bold text', done => {
+        const entry = {
+            "uid": "",
+            "_version": 3,
+            "locale": "en-us",
+            "json_rte": {
+                "type": "doc",
+                "attrs": {},
+                "uid": "",
+                "children": [
+                    {
+                        "type": "p",
+                        "attrs": {},
+                        "uid": "",
+                        "children": [
+                            {
+                                "text": "abc",
+                                "classname": "yellow",
+                            },
+                            {
+                                "text": " "
+                            },
+                            {
+                                "text": "def",
+                                "italic": true
+                            },
+                            {
+                                "text": " "
+                            },
+                            {
+                                "text": "ghi",
+                                "underline": true,
+                                "classname": "blue",
+                            },
+                            {
+                                "text": " "
+                            },
+                            {
+                                "text": "Basic",
+                                "classname": "red",
+                                "id": "blue",
+                                bold: true
+                            },
+                            {
+                                "text": " InformationEntry Type IDabc"
+                            }
+                        ]
+                    }
+                ],
+                "_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)
+        done()
+    })
 })
 
 describe('Node parse headers content', () => {

src/helper/enumerate-entries.ts

@@ -65,8 +65,14 @@ export function textNodeToHTML(node: TextNode, renderOption: RenderOption): stri
         text =  (renderOption[MarkType.ITALIC] as RenderMark)(text)
     }
     if (node.bold) {
+        // if(node.classname) {
+        //     text =  (renderOption[MarkType.BOLD] as RenderMark)(text, node.classname)
+        // }
         text =  (renderOption[MarkType.BOLD] as RenderMark)(text)
     }
+    if (node.classname) {
+        text =  (renderOption[MarkType.CLASSNAME] as RenderMark)(text, node.classname)
+    }
     return text
 }
 export function referenceToHTML(node: Node, 

src/nodes/mark-type.ts

@@ -2,6 +2,7 @@ enum MarkType {
     BOLD = 'bold',
     ITALIC = 'italic',
     UNDERLINE = 'underline',
+    CLASSNAME = 'classname',
 
     STRIKE_THROUGH = 'strikethrough',
     INLINE_CODE = 'inlineCode',

src/nodes/text-node.ts

@@ -9,6 +9,7 @@ export default class TextNode extends Node {
     superscript?: boolean
     subscript?: boolean
     break?: boolean
+    classname?: string
 
     text: string
 

src/options/default-node-options.ts

@@ -10,6 +10,13 @@ export const defaultNodeOption: RenderOption = {
     [NodeType.PARAGRAPH]:(node: Node, next: Next) => {
         return `<p${addStyleAttrs(node.attrs.style)}>${next(node.children)}</p>`
     },
+    // [NodeType.PARAGRAPH]:(node: Node, next: Next) => {
+    //     return `<p${addStyleAttrs(node.attrs.style)}>${next(node.children)}</p>`
+    // },
+    // [NodeType.PARAGRAPH]: (node: Node, next: Next) => {
+    //     const child = node.children.find((child) => child.classname)
+    //     return `<p${addStyleAttrs(node.attrs.style)} class ="${child.classname}">${next([child])}</p>`;
+    // },
     [NodeType.LINK]:(node: Node, next: Next) => {
         if (node.attrs.target) {
             return `<a${addStyleAttrs(node.attrs.style)} href="${node.attrs.href || node.attrs.url}" target="${node.attrs.target}">${next(node.children)}</a>`   
@@ -90,7 +97,11 @@ export const defaultNodeOption: RenderOption = {
         return next(node.children)
     },
 
-    [MarkType.BOLD]:(text: string) => {
+    [MarkType.BOLD]:(text: string, classname?: string) => {
+        // if (classname) {
+        //     return `<strong class="${classname}">${text}</strong>`
+        // }
+        // else 
         return `<strong>${text}</strong>`
     },
     [MarkType.ITALIC]:(text: string) => {
@@ -114,6 +125,9 @@ export const defaultNodeOption: RenderOption = {
     [MarkType.BREAK]:(text: string) => {
         return `<br />${text}`
     },
+    [MarkType.CLASSNAME]:(text: string, classname: string) => {
+        return `<span class="${classname}">${text}</span>`
+    }
 
 }
 

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) => string;
+export type RenderMark = (text: string, classname?: string) => string;
 export type RenderItem = (item: EmbeddedItem | EntryNode, metadata: Metadata) => string;
 export interface RenderOption {
   [embedType: string]: RenderNode | RenderMark | RenderItem | RenderContentType;