fix(node-options): encode urls in default node options

Author: harshithad0703

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

@@ -24,7 +24,7 @@ const styleObjHtml = "<h1 style=\"text-align:justify;\">heading1</h1><h2 style=\
 const referenceObjHtml = "<p><a class=\"embedded-entry redactor-component block-entry\" href=\"/test\" target=\"_self\">Embed entry as a link</a></p><p><a class=\"embedded-entry redactor-component block-entry\" href=\"/entry-3\" target=\"_blank\">Open entry as a link in new tab</a></p><p><a class=\"embedded-entry redactor-component block-entry\" href=\"/entry-2\" target=\"_self\">Bold entry</a></p><p><a class=\"embedded-entry redactor-component block-entry\" href=\"/entry-4\" target=\"_blank\"><strong>Bold entry open in new tab</strong></a></p>"
 const referenceObjHtmlBlock = "<p><a class=\"embedded-entry redactor-component block-entry\" href=\"/Test\" target=\"_self\">Embed entry as a link</a></p><p><a class=\"embedded-entry redactor-component block-entry\" href=\"undefined\" target=\"_blank\">Embed entry as a link open in new tab</a></p><ul><li><a class=\"embedded-entry redactor-component block-entry\" href=\"undefined\" target=\"_self\">Entry as a link</a></li><li><a class=\"embedded-entry redactor-component block-entry\" href=\"undefined\" target=\"_blank\">Open entry as a link in new tab</a></li><li><a class=\"embedded-entry redactor-component block-entry\" href=\"undefined\" target=\"_self\"><strong><u>Entry as a link bold</u></strong></a></li><li><a class=\"embedded-entry redactor-component block-entry\" href=\"khjgf\" target=\"_blank\"><strong><u>Open bold entry as a link in new tab </u></strong></a></li><li><a href=\"https://\" target=\"_self\"><strong><u>Link URL</u></strong></a></li><li><a href=\"https://\" target=\"_blank\"><strong><u>Open link in new tab</u></strong></a></li></ul>"
 const imagetags = "<figure style=\"text-align:right;max-width:137px;float:right;width:137px;max-height:257px;height:257px;\"><a href=\"https://batman.com\" target=\"_blank\"><img asset_uid=\"asset-UID\" class=\"embedded-asset\" src=\"https://images.contentstack.io/v3/assets/api-key/asset-UID/random-uid/batman.png\" alt=\"batman\" target=\"_blank\" style=\"text-align:right;max-width:137px;float:right;width:137px;max-height:257px;height:257px;\" /></a><figcaption>The Batman</figcaption></figure>"
-const escapeHtml = "<p>&lt;p&gt;Welcome to Contentstack! &lt;script&gt;console.log(/\"Hello from Contentstack!/\");&lt;/script&gt; Explore our platform to create, manage, and publish content seamlessly.&lt;/p&gt;</p>"
+const escapeHtml = "<p>&lt;p&gt;Welcome to Contentstack! &lt;script&gt;console.log(/&quot;Hello from Contentstack!/&quot;);&lt;/script&gt; Explore our platform to create, manage, and publish content seamlessly.&lt;/p&gt;</p>"
 
 export {
     h1Html,

src/options/default-node-options.ts

@@ -19,11 +19,11 @@ export const defaultNodeOption: RenderOption = {
         return `<a${node.attrs.style ? ` style="${node.attrs.style}"` : ``}${node.attrs['class-name'] ? ` class="${node.attrs['class-name']}"` : ``}${node.attrs.id ? ` id="${node.attrs.id}"` : ``} href="${sanitizedHref}">${sanitizeHTML(next(node.children))}</a>`
     },
     [NodeType.IMAGE]:(node: Node, next: Next) => {
-        const sanitizedSrc = sanitizeHTML(node.attrs.src || node.attrs.url);
+        const sanitizedSrc = encodeURI(sanitizeHTML(node.attrs.src || node.attrs.url));
         return `<img${node.attrs.style ? ` style="${node.attrs.style}"` : ``}${node.attrs['class-name'] ? ` class="${node.attrs['class-name']}"` : ``}${node.attrs.id ? ` id="${node.attrs.id}"` : ``} src="${sanitizedSrc}" />${sanitizeHTML(next(node.children))}`
     },
     [NodeType.EMBED]:(node: Node, next: Next) => {
-        const sanitizedSrc = sanitizeHTML(node.attrs.src || node.attrs.url);
+        const sanitizedSrc = encodeURI(sanitizeHTML(node.attrs.src || node.attrs.url));
         return `<iframe${node.attrs.style ? ` style="${node.attrs.style}"` : ``}${node.attrs['class-name'] ? ` class="${node.attrs['class-name']}"` : ``}${node.attrs.id ? ` id="${node.attrs.id}"` : ``} src="${sanitizedSrc}">${sanitizeHTML(next(node.children))}</iframe>`
     },
     [NodeType.HEADING_1]:(node: Node, next: Next) => {
@@ -123,7 +123,7 @@ export const defaultNodeOption: RenderOption = {
 
     ['reference']:(node: Node, next: Next) => {
         if (node.attrs.type === 'asset') {
-            const src = node.attrs['asset-link'];
+            const src = encodeURI(node.attrs['asset-link']);
             const alt = node.attrs?.['redactor-attributes']?.['alt'];
             const link = node.attrs.link;
             const target = node.attrs.target || "";

src/options/default-options.ts

@@ -16,18 +16,18 @@ export const defaultOptions: RenderOption = {
     return `<span>${title}</span>`;
   },
   [StyleType.LINK]: (item: EmbeddedItem | EntryNode, metadata: Metadata) => {
-    const url = sanitizeHTML(item.url || 'undefined');
+    const url = encodeURI(sanitizeHTML(item.url || 'undefined'));
     const text = sanitizeHTML(metadata.text || item.title || item.uid || (item.system ? item.system.uid : ''));
     return `<a href="${url}">${text}</a>`;
   },
   [StyleType.DISPLAY]: (item: EmbeddedItem | EntryNode, metadata: Metadata) => {
-    const url = sanitizeHTML(item.url || 'undefined');
+    const url = encodeURI(sanitizeHTML(item.url || 'undefined'));
     const alt = sanitizeHTML(metadata.attributes.alt || item.title || item.filename || item.uid
       || (item.system ? item.system.uid : ''));
     return `<img src="${url}" alt="${alt}" />`;
   },
   [StyleType.DOWNLOAD]: (item: EmbeddedItem | EntryNode, metadata: Metadata) => {
-    const href = sanitizeHTML(item.url || 'undefined');
+    const href = encodeURI(sanitizeHTML(item.url || 'undefined'));
     const text = sanitizeHTML(metadata.text || item.title || item.uid || (item.system ? item.system.content_type_uid : ''));
     return `<a href="${href}">${text}</a>`;
   },