Merge pull request #69 from contentstack/fix/DX-700-table-rowspan-colspan

fix: adds rowspan and colspan to th and td node

Author: nadeem-cs

__test__/default-node-options.test.ts

@@ -51,6 +51,26 @@ const embedNodeWithURL: Node = {
     children: []
 }
 
+const tableDataNode: Node = {
+    type: NodeType.TABLE_DATA,
+    attrs: {
+        rowSpan: 2,
+        colSpan: 2,
+        'redactor-attributes': { colSpan: 2, rowSpan: 2 }
+    },
+    children: []
+}
+
+const tableHeadNode: Node = {
+    type: NodeType.TABLE_HEAD,
+    attrs: {
+        rowSpan: 2,
+        colSpan: 2,
+        'redactor-attributes': { colSpan: 2, rowSpan: 2 }
+    },
+    children: []
+}
+
 describe('Default node render options', () => {
     it('Should return document string', done => {
         const renderString = (defaultNodeOption[NodeType.DOCUMENT] as RenderNode)(node, next)
@@ -134,11 +154,11 @@ describe('Default node render options', () => {
         renderString = (defaultNodeOption[NodeType.TABLE_ROW] as RenderNode)(node, next)
         expect(renderString).toEqual('<tr>text</tr>')
 
-        renderString = (defaultNodeOption[NodeType.TABLE_HEAD] as RenderNode)(node, next)
-        expect(renderString).toEqual('<th>text</th>')
+        renderString = (defaultNodeOption[NodeType.TABLE_HEAD] as RenderNode)(tableHeadNode, next)
+        expect(renderString).toEqual('<th rowspan=\"2\" colspan=\"2\">text</th>')
 
-        renderString = (defaultNodeOption[NodeType.TABLE_DATA] as RenderNode)(node, next)
-        expect(renderString).toEqual('<td>text</td>')
+        renderString = (defaultNodeOption[NodeType.TABLE_DATA] as RenderNode)(tableDataNode, next)
+        expect(renderString).toEqual('<td rowspan=\"2\" colspan=\"2\">text</td>')
 
         done()
     })

src/options/default-node-options.ts

@@ -75,10 +75,22 @@ export const defaultNodeOption: RenderOption = {
         return `<tr${node.attrs.style ? ` style="${node.attrs.style}"` : ``}${node.attrs['class-name'] ? ` class="${node.attrs['class-name']}"` : ``}${node.attrs.id ? ` id="${node.attrs.id}"` : ``}>${next(node.children)}</tr>`
     },
     [NodeType.TABLE_HEAD]:(node: Node, next: Next) => {
-        return `<th${node.attrs.style ? ` style="${node.attrs.style}"` : ``}${node.attrs['class-name'] ? ` class="${node.attrs['class-name']}"` : ``}${node.attrs.id ? ` id="${node.attrs.id}"` : ``}>${next(node.children)}</th>`
+        return `<th` +
+                `${node.attrs.rowSpan ? ` rowspan="${node.attrs.rowSpan}"` : ``}` +
+                `${node.attrs.colSpan ? ` colspan="${node.attrs.colSpan}"` : ``}` +
+                `${node.attrs.style ? ` style="${node.attrs.style}"` : ``}`+
+                `${node.attrs['class-name'] ? ` class="${node.attrs['class-name']}"` : ``}`+
+                `${node.attrs.id ? ` id="${node.attrs.id}"` : ``}>${next(node.children)}` +
+                `</th>`
     },
     [NodeType.TABLE_DATA]:(node: Node, next: Next) => {
-        return `<td${node.attrs.style ? ` style="${node.attrs.style}"` : ``}${node.attrs['class-name'] ? ` class="${node.attrs['class-name']}"` : ``}${node.attrs.id ? ` id="${node.attrs.id}"` : ``}>${next(node.children)}</td>`
+        return `<td` +
+                `${node.attrs.rowSpan ? ` rowspan="${node.attrs.rowSpan}"` : ``}` +
+                `${node.attrs.colSpan ? ` colspan="${node.attrs.colSpan}"` : ``}` +
+                `${node.attrs.style ? ` style="${node.attrs.style}"` : ``}`+
+                `${node.attrs['class-name'] ? ` class="${node.attrs['class-name']}"` : ``}`+
+                `${node.attrs.id ? ` id="${node.attrs.id}"` : ``}>${next(node.children)}` +
+                `</td>`
     },
     [NodeType.BLOCK_QUOTE]:(node: Node, next: Next) => {
         return `<blockquote${node.attrs['class-name'] ? ` class="${node.attrs['class-name']}"` : ``}${node.attrs.id ? ` id="${node.attrs.id}"` : ``}>${next(node.children)}</blockquote>`