Merge pull request #126 from contentstack/staging

DX | 22-01-2025 | Hotfix

Author: cs-raj

.github/workflows/check-branch.yml

@@ -8,13 +8,13 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Comment PR
-        if: github.base_ref == 'master' && github.head_ref != 'staging'
+        if: github.base_ref == 'staging' && github.head_ref != 'development'
         uses: thollander/actions-comment-pull-request@v2
         with:
           message: |
-            We regret to inform you that you are currently not able to merge your changes into the master branch due to restrictions applied by our SRE team. To proceed with merging your changes, we kindly request that you create a pull request from the staging branch. Our team will then review the changes and work with you to ensure a successful merge into the master branch.
+            We regret to inform you that you are currently not able to merge your changes into the master branch due to restrictions applied by our SRE team. To proceed with merging your changes, we kindly request that you create a pull request from the development branch. Our team will then review the changes and work with you to ensure a successful merge into the master branch.
       - name: Check branch
-        if: github.base_ref == 'master' && github.head_ref != 'staging'
+        if: github.base_ref == 'staging' && github.head_ref != 'development'
         run: |
-          echo "ERROR: We regret to inform you that you are currently not able to merge your changes into the master branch due to restrictions applied by our SRE team. To proceed with merging your changes, we kindly request that you create a pull request from the staging branch. Our team will then review the changes and work with you to ensure a successful merge into the master branch."
+          echo "ERROR: We regret to inform you that you are currently not able to merge your changes into the master branch due to restrictions applied by our SRE team. To proceed with merging your changes, we kindly request that you create a pull request from the development branch. Our team will then review the changes and work with you to ensure a successful merge into the master branch."
           exit 1

.github/workflows/npm-publish.yml

@@ -29,6 +29,6 @@ jobs:
           registry-url: 'https://npm.pkg.github.com'
           scope: '@contentstack'
       - run: npm ci
-      - run: npm publish
+      - run: npm publish --access public
         env:
           NODE_AUTH_TOKEN: ${{ secrets.GIT_TOKEN }}

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## [1.3.16](https://github.com/contentstack/contentstack-utils-javascript/tree/v1.3.16) (2025-01-27)
+ - Enh: Added support for colgroup and col tags inside table tag
+ - Fix: Updated rendorOption code block in reaadme file
+
 ## [1.3.15](https://github.com/contentstack/contentstack-utils-javascript/tree/v1.3.15) (2024-11-18)
  - Fix: Added Table merge cell functionality
 

LICENSE

@@ -1,7 +1,7 @@
 The MIT License (MIT)
 
 
-Copyright (c) 2016-2024 Contentstack
+Copyright (c) 2016-2025 Contentstack
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -23,48 +23,61 @@ Let’s learn how you can use Utils SDK to render RTE embedded items and Superch
 To render embedded items on the front-end, use the renderOptions function, and define the UI elements you want to show in the front-end of your website, as shown in the example below:
 ```js
 const renderOption = {
-	// to render Supercharged RTE NodeType content like paragraph, link, table, order list, un-order list and more.
-	p: (node, next) => {
-		return `<p class='class-id'>${next(node.children)}</p>` // you will need to call next function with node children contents
-	},
-	h1: (node, next) => {
-		return `<h1 class='class-id'>${next(node.children)}</h1>` // you will need to call next function with node children contents
-	},
-	// to render Supercharged RTE MarkType content like bold, italic, underline, strikethrough, inlineCode, subscript, and superscript
-	bold: (text) => {
-		return `<b>${next(node.children)}</b>`
-	},
-	// to render block-type embedded items  
-	block: {  
-		'product': (item, metadata) => {  
-			return `<div>  
-					<h2 >${item.title}</h2>  
-					<img src=${item.product_image.url} alt=${item.product_image.title}/>  
-					<p>${item.price}</p>  
-					</div>`  
-		},
-		// to render the default  
-		'$default': (item, metadata) => {  
-			return `<div>  
-					<h2>${item.title}</h2>  
-					<p>${item.description}</p>  
-					</div>`
-		}  
-	},
-	// to display inline embedded items  
-	inline: {  
-		'$default': (item, metadata) => {  
-			return `<span><b>${item.title}</b> - ${item.description}</span>`
-		}  
-	},
-	// to display embedded items inserted via link  
-	link: (item, metadata) => {  
-		return `<a href="${metadata.attributes.href}">${metadata.text}</a>`
-	},
-	// to display assets  
-	display: (item, metadata) => {  
-		return `<img src=${metadata.attributes.src} alt=${metadata.alt} />`
-	}  
+    // To render paragraph nodes
+    p: (node, next) => `<p class="class-id">${next(node.children)}</p>`,
+    // To render heading level 1 nodes
+    h1: (node, next) => `<h1 class="class-id">${next(node.children)}</h1>`,
+    // To render bold text
+    bold: (text) => `<b>${text}</b>`,
+    // To render block-type embedded items
+    block: {
+        product: (item) =>
+            `<div>
+                <h2>${item.title}</h2>
+                <img src="${item.product_image.url}" alt="${item.product_image.title}" />
+                <p>${item.price}</p>
+            </div>`,
+        $default: (item) =>
+            `<div>
+                <h2>${item.title}</h2>
+                <p>${item.description}</p>
+            </div>`,
+    },
+    // To render inline embedded items
+    inline: {
+        $default: (item) =>
+            `<span><b>${item.title}</b> - ${item.description}</span>`,
+    },
+    // To render link (a) nodes
+    a: (node) => {
+        const { attrs, children } = node;
+        const childText = children.map((child) => child.text || '').join('');
+        return `<a href="${attrs.url}" target="${attrs.target || '_self'}">${childText}</a>`;
+    },
+    // To render embedded assets
+    display: (item, metadata) => {
+        const { attributes } = metadata;
+        return `<img src="${attributes.src}" alt="${attributes.alt || 'Asset'}" />`;
+    },
+    // To render embedded entry & asset references
+    reference: (node) => {
+        const { attrs, children } = node;
+        const childText = children.map((child) => child.text || '').join('');
+        if (attrs.type === 'entry') {
+            return `<a href="${attrs.href}" class="${attrs['class-name'] || ''}">${childText}</a>`;
+        } else if (attrs.type === 'asset') {
+            if (attrs['display-type'] === 'link') {
+                return `<a href="${attrs['asset-link']}" class="${attrs['class-name'] || ''}" target="_blank">${attrs['asset-name'] || 'View Asset'}</a>`;
+            }
+            
+            if (attrs['display-type'] === 'display') {
+                return `<img src="${attrs['asset-link']}" alt="${attrs['asset-alt'] || attrs['asset-name']}" class="${attrs['class-name'] || ''}" />`;
+            }
+        }
+        return childText; // Fallback for unknown references
+    },
+    // Default handler for unknown nodes
+    default: (node, next) => `<div>${next(node.children)}</div>`,
 }
 ```
 

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

@@ -9,7 +9,7 @@ const h6Html = "<h6>Nunc porta diam vitae purus semper, ut consequat lorem vehic
 const orderListHtml = "<ol class=\"table\" id=\"table_id\"><li style=\"text-align:justify;\" class=\"class\">Morbi in quam molestie, fermentum diam vitae, bibendum ipsum.</li><li style=\"text-align:justify;\">Pellentesque mattis lacus in quam aliquam congue</li><li style=\"text-align:justify;\">Integer feugiat leo dignissim, lobortis enim vitae, mollis lectus.</li><li style=\"text-align:justify;\">Sed in ante lacinia, molestie metus eu, fringilla sapien.</li></ol>"
 const unorderListHtml = "<ul class=\"table\" id=\"table_id\"><li>Sed quis metus sed mi hendrerit mollis vel et odio.</li><li>Integer vitae sem dignissim, elementum libero vel, fringilla massa.</li><li>Integer imperdiet arcu sit amet tortor faucibus aliquet.</li><li>Aenean scelerisque velit vitae dui vehicula, at congue massa sagittis.</li></ul>"
 const imgHtml = "<img src=\"https://image.url/Donald.jog.png\" />"
-const tableHtml = "<table><thead class=\"class\"><tr><th><p>Header 1</p></th><th><p>Header 2</p></th></tr></thead><tbody class=\"class\" id=\"id\"><tr class=\"class\" id=\"id\"><td><p>Body row 1 data 1</p></td><td class=\"class\" id=\"id\"><p>Body row 1 data 2</p></td></tr><tr id=\"class\"><td><p>Body row 2 data 1</p></td><td><p class=\"class\">Body row 2 data 2</p></td></tr></tbody></table>"
+const tableHtml = "<table><colgroup data-width=\"500\"><col style=\"width:50.00%\"/><col style=\"width:50.00%\"/></colgroup><thead class=\"class\"><tr><th><p>Header 1</p></th><th><p>Header 2</p></th></tr></thead><tbody class=\"class\" id=\"id\"><tr class=\"class\" id=\"id\"><td><p>Body row 1 data 1</p></td><td class=\"class\" id=\"id\"><p>Body row 1 data 2</p></td></tr><tr id=\"class\"><td><p>Body row 2 data 1</p></td><td><p class=\"class\">Body row 2 data 2</p></td></tr></tbody></table>"
 const blockquoteHtml = "<blockquote>Praesent eu ex sed nibh venenatis pretium.</blockquote>"
 const codeHtml = "<code>Code template.</code>"
 const linkInPHtml = "<strong><em><u><sub></sub></u></em></strong><a href=\"LINK.com\">LINK</a>"

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@contentstack/utils",
-  "version": "1.3.15",
+  "version": "1.3.16",
   "description": "Contentstack utilities for Javascript",
   "main": "dist/index.es.js",
   "types": "dist/types/index.d.ts",

package.json

@@ -1,8 +1,8 @@
 
-type AllowedTags = 'p' | 'a' | 'strong' | 'em' | 'ul' | 'ol' | 'li' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'sub' | 'u' | 'table' | 'thead' | 'tbody' | 'tr' | 'th' | 'td' | 'span' | 'fragment' | 'strike' | 'sup' | 'br'| 'img';
-type AllowedAttributes = 'href' | 'title' | 'target' | 'alt' | 'src' | 'class' | 'id' | 'style' | 'colspan' | 'rowspan' | 'content-type-uid' | 'data-sys-asset-uid' | 'sys-style-type' | 'data-type';
+type AllowedTags = 'p' | 'a' | 'strong' | 'em' | 'ul' | 'ol' | 'li' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'sub' | 'u' | 'table' | 'thead' | 'tbody' | 'tr' | 'th' | 'td' | 'span' | 'fragment' | 'strike' | 'sup' | 'br'| 'img' | 'colgroup' | 'col' | 'div';
+type AllowedAttributes = 'href' | 'title' | 'target' | 'alt' | 'src' | 'class' | 'id' | 'style' | 'colspan' | 'rowspan' | 'content-type-uid' | 'data-sys-asset-uid' | 'sys-style-type' | 'data-type' | 'data-width' | 'data-rows' | 'data-cols';
 
-export function sanitizeHTML(input: string, allowedTags: AllowedTags[] = ['p', 'a', 'strong', 'em', 'ul', 'ol', 'li', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'sub', 'u', 'table', 'thead', 'tbody', 'tr', 'th', 'td', 'span', 'fragment', 'sup', 'strike', 'br', 'img'], allowedAttributes: AllowedAttributes[] = ['href', 'title', 'target', 'alt', 'src', 'class', 'id', 'style', 'colspan', 'rowspan', 'content-type-uid', 'data-sys-asset-uid', 'sys-style-type', 'data-type']): string {
+export function sanitizeHTML(input: string, allowedTags: AllowedTags[] = ['p', 'a', 'strong', 'em', 'ul', 'ol', 'li', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'sub', 'u', 'table', 'thead', 'tbody', 'tr', 'th', 'td', 'span', 'fragment', 'sup', 'strike', 'br', 'img', 'colgroup', 'col', 'div'], allowedAttributes: AllowedAttributes[] = ['href', 'title', 'target', 'alt', 'src', 'class', 'id', 'style', 'colspan', 'rowspan', 'content-type-uid', 'data-sys-asset-uid', 'sys-style-type', 'data-type', 'data-width', 'data-rows', 'data-cols']): string {
     // Regular expression to find and remove all HTML tags except the allowed ones
     const sanitized = input.replace(/<\/?([a-z][a-z0-9]*)\b[^<>]*>/gi, (match, tag) => {
         return allowedTags.includes(tag.toLowerCase()) ? match : '';

src/helper/sanitize.ts

@@ -27,6 +27,8 @@ enum NodeType {
     TABLE_ROW = 'tr',
     TABLE_HEAD = 'th',
     TABLE_DATA = 'td',
+    COL_GROUP = 'colgroup',
+    COL = 'col',
 
     BLOCK_QUOTE = 'blockquote',
     CODE = 'code',

src/nodes/node-type.ts

@@ -59,8 +59,26 @@ export const defaultNodeOption: RenderOption = {
     [NodeType.HR]:(node: Node, next: Next) => {
         return `<hr>`
     },
-    [NodeType.TABLE]:(node: Node, next: Next) => {
-        return `<table${node.attrs.style ? ` style="${node.attrs.style}"` : ``}${node.attrs['class-name'] ? ` class="${node.attrs['class-name']}"` : ``}${node.attrs.id ? ` id="${node.attrs.id}"` : ``}>${sanitizeHTML(next(node.children))}</table>`
+    [NodeType.TABLE]: (node: Node, next: Next) => {
+        // Generate colgroup if colWidths attribute is present
+        let colgroupHTML = '';
+        if (node.attrs.colWidths && Array.isArray(node.attrs.colWidths)) {
+            const totalWidth = node.attrs.colWidths.reduce((sum, width) => sum + width, 0);
+            colgroupHTML = `<${NodeType.COL_GROUP} data-width="${totalWidth}">`;
+            node.attrs.colWidths.forEach(colWidth => {
+                const widthPercentage = (colWidth / totalWidth) * 100;
+                colgroupHTML += `<${NodeType.COL} style="width:${widthPercentage.toFixed(2)}%"/>`;
+            });
+            colgroupHTML += `</${NodeType.COL_GROUP}>`;
+        }
+    
+        // Generate table with colgroup and other attributes
+        return `<table${node.attrs.style ? ` style="${node.attrs.style}"` : ``}` +
+               `${node.attrs['class-name'] ? ` class="${node.attrs['class-name']}"` : ``}` +
+               `${node.attrs.id ? ` id="${node.attrs.id}"` : ``}>` +
+               `${colgroupHTML}` +
+               `${sanitizeHTML(next(node.children))}` +
+               `</table>`;
     },
     [NodeType.TABLE_HEADER]:(node: Node, next: Next) => {
         return `<thead${node.attrs.style ? ` style="${node.attrs.style}"` : ``}${node.attrs['class-name'] ? ` class="${node.attrs['class-name']}"` : ``}${node.attrs.id ? ` id="${node.attrs.id}"` : ``}>${sanitizeHTML(next(node.children))}</thead>`