Merge pull request #24 from contentstack/fix/CS-36088-nested-asset

fix: 🐛 asset in nested reference with json rte

Author: uttamukkoji

.github/workflows/npm-publish.yml

@@ -26,7 +26,7 @@ jobs:
       - uses: actions/setup-node@v3
         with:
           node-version: '12.x'
-          registry-url: 'https://registry.npmjs.org'
+          registry-url: 'https://npm.pkg.github.com'
           scope: '@contentstack'
       - run: npm ci
       - run: npm publish

__test__/mock/json-element-mock-result.ts

@@ -1,4 +1,4 @@
-const plainTextHtml = "<strong>Aliquam sit amet libero dapibus, eleifend ligula at, varius justo</strong><strong><em>Lorem ipsum</em></strong><strong><em><u>dolor sit amet</u></em></strong><strong><em><u><strike>consectetur adipiscing elit.</strike></u></em></strong><strong><em><u><span>Sed condimentum iaculis magna in vehicula. </span></u></em></strong><strong><em><u><sup>  Vestibulum vitae convallis </sup></u></em></strong><strong><em><u><sub> lacus. </sub></u></em></strong>"
+const plainTextHtml = "<strong>Aliquam sit amet libero dapibus, eleifend ligula at, varius justo</strong><strong><em>Lorem ipsum</em></strong><strong><em><u>dolor sit amet</u></em></strong><strong><em><u><strike><br />consectetur adipiscing elit.</strike></u></em></strong><strong><em><u><span>Sed condimentum iaculis magna in vehicula. </span></u></em></strong><strong><em><u><sup>  Vestibulum vitae convallis </sup></u></em></strong><strong><em><u><sub> lacus. </sub></u></em></strong>"
 const paragraphHtml = "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed condimentum iaculis magna in vehicula. Vestibulum vitae convallis lacus. Praesent a diam iaculis turpis rhoncus faucibus. Aliquam sed pulvinar sem.</p>"
 const h1Html = "<h1><strong><em><u><sub>Lorem ipsum dolor sit amet.</sub></u></em></strong></h1>" 
 const h2Html = "<h2><strong><em><u><sub>Vestibulum a ligula eget massa sagittis aliquam sit amet quis tortor. </sub></u></em></strong></h2>"

__test__/mock/json-element-mock.ts

@@ -24,7 +24,8 @@ const plainTextJson = {
         "bold": true,
         "italic": true,
         "underline": true,
-        "strikethrough": true
+        "strikethrough": true,
+        "break": true
     },
     {
         "text": "Sed condimentum iaculis magna in vehicula. ",

__test__/reference-to-html.test.ts

@@ -5,6 +5,7 @@ import { Metadata } from '../src/Models/metadata-model'
 import Node from '../src/nodes/node'
 import NodeType from '../src/nodes/node-type'
 import { Next, RenderOption } from '../src/options'
+import { defaultNodeOption } from '../src/options/default-node-options'
 import { defaultOptions } from '../src/options/default-options'
 import { assetReferenceJson, embeddedAssetJsonEntry, embeddedEntryJsonEntry, entryReferenceBlockJson, entryReferenceInlineJson, entryReferenceLinkJson } from './mock/json-element-mock'
 import { embeddedAssetWithRenderOption, embeddedObjectDefaultRender, embeddedObjectWithRenderOption } from './mock/render-options'
@@ -152,6 +153,13 @@ describe('Reference Node To HTML', () => {
         expect(resultHTML).toEqual('<img src=https://image.url/11.jpg>')
         done()
     })
+    it('Should return image for undefined node asset from default node option', done => {
+        const node = assetReferenceJson.children[0] as unknown as Node
+
+        const resultHTML = referenceToHTML(node, defaultNodeOption)
+        expect(resultHTML).toEqual('<img src="https://image.url/11.jpg" />')
+        done()
+    })
 
     it('Should return HTML for embedded link entry', done => {
         const node = entryReferenceLinkJson.children[0] as unknown as Node

src/helper/enumerate-entries.ts

@@ -43,6 +43,9 @@ export function enumerateContents(
 
 export function textNodeToHTML(node: TextNode, renderOption: RenderOption): string {
     let text = node.text
+    if (node.break) {
+        text =  (renderOption[MarkType.BREAK] as RenderMark)(text)
+    }
     if (node.superscript) {
         text =  (renderOption[MarkType.SUPERSCRIPT] as RenderMark)(text)
     }

src/nodes/mark-type.ts

@@ -8,7 +8,8 @@ enum MarkType {
 
 
     SUBSCRIPT = 'subscript',
-    SUPERSCRIPT = 'superscript'
+    SUPERSCRIPT = 'superscript',
+    BREAK = 'break'
 }
 
 export default MarkType

src/nodes/text-node.ts

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

src/options/default-node-options.ts

@@ -78,6 +78,9 @@ export const defaultNodeOption: RenderOption = {
     },
 
     ['reference']:(node: Node, next: Next) => {
+        if (node.attrs['type'] === 'asset') {
+            return `<img src="${node.attrs['asset-link']}" />`
+        }
         return ``
     },
     ['default']:(node: Node, next: Next) => {
@@ -105,5 +108,8 @@ export const defaultNodeOption: RenderOption = {
     [MarkType.SUPERSCRIPT]:(text: string) => {
         return `<sup>${text}</sup>`
     },
+    [MarkType.BREAK]:(text: string) => {
+        return `<br />${text}`
+    },
 
 }