@heartlandone/vega 2.74.0 → 2.75.0-RTE-table-preview

package/dist/collection/components/vega-rich-text-editor/test/extensions/table/table-element-to-dto-strategies.test.js

@@ -0,0 +1,1539 @@
+import '../../../../../polyfill/test-polyfill/unit/index';
+import { VegaRTEContent } from '../../../dto/content-state';
+import { RTETableBlock } from '../../../extensions/table/dto/table-block';
+import { RTETableCaptionBlock } from '../../../extensions/table/dto/table-caption-block';
+import { RTETableHeadBlock } from '../../../extensions/table/dto/table-head-block';
+import { RTETableBodyBlock } from '../../../extensions/table/dto/table-body-block';
+import { RTETableHeadCellBlock } from '../../../extensions/table/dto/table-head-cell-block';
+import { RTETableRowBlock } from '../../../extensions/table/dto/table-row-block';
+import { RTETableCellBlock } from '../../../extensions/table/dto/table-cell-block';
+import { RTEHtmlBlock } from '../../../dto/blocks/html-block';
+import { VegaRTETableExtension } from '../../../extensions/table/table-extension';
+describe('table element to dto strategies', () => {
+  beforeAll(() => {
+    new VegaRTETableExtension().initialExtension(null);
+  });
+  it('should convert the table with children elements to extension table DTOs', () => {
+    const html = `<table>
+				<caption>Table Caption</caption>
+				<thead>
+					<tr>
+						<th>Header 1</th>
+						<th>Header 2</th>
+					</tr>
+				</thead>
+				<tbody>
+					<tr>
+						<td>Cell 1</td>
+						<td>Cell 2</td>
+					</tr>
+					<tr>
+						<td>Cell 3</td>
+						<td>Cell 4</td>
+					</tr>
+				</tbody>
+			</table>`;
+    const value = VegaRTEContent.fromHtml(html);
+    const table = value.children[0];
+    const caption = table.children[0];
+    const thead = table.children[1];
+    const tbody = table.children[2];
+    const theadRow = thead.children[0];
+    const theadCell = theadRow.children[0];
+    const tbodyRow = tbody.children[0];
+    const tbodyCell = tbodyRow.children[0];
+    expect(table).toBeInstanceOf(RTETableBlock);
+    expect(caption).toBeInstanceOf(RTETableCaptionBlock);
+    expect(thead).toBeInstanceOf(RTETableHeadBlock);
+    expect(theadRow).toBeInstanceOf(RTETableRowBlock);
+    expect(theadCell).toBeInstanceOf(RTETableHeadCellBlock);
+    expect(tbody).toBeInstanceOf(RTETableBodyBlock);
+    expect(tbodyRow).toBeInstanceOf(RTETableRowBlock);
+    expect(tbodyCell).toBeInstanceOf(RTETableCellBlock);
+    expect(VegaRTEContent.fromHtml(html).toJSON()).toEqual([
+      {
+        id: expect.anything(),
+        annotations: {
+          table: {
+            alignment: 'center',
+            borderCollapse: 'collapse',
+          },
+        },
+        type: 'table-block',
+        children: [
+          {
+            id: expect.anything(),
+            type: 'table-caption',
+            annotations: {
+              caption: {
+                backgroundColor: '#f7f7f7',
+                border: '1px solid #ddd',
+                borderBottom: 'none',
+                minHeight: '22px',
+                padding: '8px 12px',
+                position: 'relative',
+                textAlign: 'center',
+              },
+            },
+            children: [
+              {
+                id: expect.anything(),
+                annotations: {
+                  textStyle: 'paragraph',
+                },
+                type: 'paragraph',
+                nodes: [
+                  {
+                    id: expect.anything(),
+                    type: 'text',
+                    text: 'Table Caption',
+                  },
+                ],
+              },
+            ],
+          },
+          {
+            id: expect.anything(),
+            type: 'table-head',
+            children: [
+              {
+                id: expect.anything(),
+                type: 'table-row',
+                children: [
+                  {
+                    id: expect.anything(),
+                    annotations: {
+                      tableCell: {
+                        padding: '12px',
+                        border: {
+                          style: 'solid',
+                          width: '1px',
+                          color: '#ddd',
+                        },
+                        textAlign: 'left',
+                        verticalAlign: 'middle',
+                        minWidth: '55px',
+                        boxSizing: 'border-box',
+                      },
+                    },
+                    type: 'table-head-cell',
+                    children: [
+                      {
+                        id: expect.anything(),
+                        annotations: {
+                          textStyle: 'paragraph',
+                        },
+                        type: 'paragraph',
+                        nodes: [
+                          {
+                            id: expect.anything(),
+                            type: 'text',
+                            text: 'Header 1',
+                          },
+                        ],
+                      },
+                    ],
+                  },
+                  {
+                    id: expect.anything(),
+                    annotations: {
+                      tableCell: {
+                        padding: '12px',
+                        border: {
+                          style: 'solid',
+                          width: '1px',
+                          color: '#ddd',
+                        },
+                        textAlign: 'left',
+                        verticalAlign: 'middle',
+                        minWidth: '55px',
+                        boxSizing: 'border-box',
+                      },
+                    },
+                    type: 'table-head-cell',
+                    children: [
+                      {
+                        id: expect.anything(),
+                        annotations: {
+                          textStyle: 'paragraph',
+                        },
+                        type: 'paragraph',
+                        nodes: [
+                          {
+                            id: expect.anything(),
+                            type: 'text',
+                            text: 'Header 2',
+                          },
+                        ],
+                      },
+                    ],
+                  },
+                ],
+              },
+            ],
+          },
+          {
+            id: expect.anything(),
+            type: 'table-body',
+            children: [
+              {
+                id: expect.anything(),
+                type: 'table-row',
+                children: [
+                  {
+                    id: expect.anything(),
+                    annotations: {
+                      tableCell: {
+                        padding: '12px',
+                        border: {
+                          style: 'solid',
+                          width: '1px',
+                          color: '#ddd',
+                        },
+                        textAlign: 'left',
+                        verticalAlign: 'middle',
+                        minWidth: '55px',
+                        boxSizing: 'border-box',
+                      },
+                    },
+                    type: 'table-cell',
+                    children: [
+                      {
+                        id: expect.anything(),
+                        annotations: {
+                          textStyle: 'paragraph',
+                        },
+                        type: 'paragraph',
+                        nodes: [
+                          {
+                            id: expect.anything(),
+                            type: 'text',
+                            text: 'Cell 1',
+                          },
+                        ],
+                      },
+                    ],
+                  },
+                  {
+                    id: expect.anything(),
+                    annotations: {
+                      tableCell: {
+                        padding: '12px',
+                        border: {
+                          style: 'solid',
+                          width: '1px',
+                          color: '#ddd',
+                        },
+                        textAlign: 'left',
+                        verticalAlign: 'middle',
+                        minWidth: '55px',
+                        boxSizing: 'border-box',
+                      },
+                    },
+                    type: 'table-cell',
+                    children: [
+                      {
+                        id: expect.anything(),
+                        annotations: {
+                          textStyle: 'paragraph',
+                        },
+                        type: 'paragraph',
+                        nodes: [
+                          {
+                            id: expect.anything(),
+                            type: 'text',
+                            text: 'Cell 2',
+                          },
+                        ],
+                      },
+                    ],
+                  },
+                ],
+              },
+              {
+                id: expect.anything(),
+                type: 'table-row',
+                children: [
+                  {
+                    id: expect.anything(),
+                    annotations: {
+                      tableCell: {
+                        padding: '12px',
+                        border: {
+                          style: 'solid',
+                          width: '1px',
+                          color: '#ddd',
+                        },
+                        textAlign: 'left',
+                        verticalAlign: 'middle',
+                        minWidth: '55px',
+                        boxSizing: 'border-box',
+                      },
+                    },
+                    type: 'table-cell',
+                    children: [
+                      {
+                        id: expect.anything(),
+                        annotations: {
+                          textStyle: 'paragraph',
+                        },
+                        type: 'paragraph',
+                        nodes: [
+                          {
+                            id: expect.anything(),
+                            type: 'text',
+                            text: 'Cell 3',
+                          },
+                        ],
+                      },
+                    ],
+                  },
+                  {
+                    id: expect.anything(),
+                    annotations: {
+                      tableCell: {
+                        padding: '12px',
+                        border: {
+                          style: 'solid',
+                          width: '1px',
+                          color: '#ddd',
+                        },
+                        textAlign: 'left',
+                        verticalAlign: 'middle',
+                        minWidth: '55px',
+                        boxSizing: 'border-box',
+                      },
+                    },
+                    type: 'table-cell',
+                    children: [
+                      {
+                        id: expect.anything(),
+                        annotations: {
+                          textStyle: 'paragraph',
+                        },
+                        type: 'paragraph',
+                        nodes: [
+                          {
+                            id: expect.anything(),
+                            type: 'text',
+                            text: 'Cell 4',
+                          },
+                        ],
+                      },
+                    ],
+                  },
+                ],
+              },
+            ],
+          },
+        ],
+      },
+    ]);
+    expect(VegaRTEContent.fromHtml(html, { autoMatchFormat: false }).toJSON()).toEqual([
+      {
+        id: expect.anything(),
+        type: 'table-block',
+        children: [
+          {
+            id: expect.anything(),
+            type: 'table-caption',
+            children: [
+              {
+                id: expect.anything(),
+                type: 'paragraph',
+                annotations: {
+                  internalWrapper: true,
+                },
+                nodes: [
+                  {
+                    id: expect.anything(),
+                    type: 'text',
+                    text: 'Table Caption',
+                    annotations: {
+                      plainText: true,
+                    },
+                  },
+                ],
+              },
+            ],
+          },
+          {
+            id: expect.anything(),
+            type: 'table-head',
+            children: [
+              {
+                id: expect.anything(),
+                type: 'table-row',
+                children: [
+                  {
+                    id: expect.anything(),
+                    type: 'table-head-cell',
+                    children: [
+                      {
+                        id: expect.anything(),
+                        annotations: {
+                          internalWrapper: true,
+                        },
+                        type: 'paragraph',
+                        nodes: [
+                          {
+                            id: expect.anything(),
+                            annotations: {
+                              plainText: true,
+                            },
+                            type: 'text',
+                            text: 'Header 1',
+                          },
+                        ],
+                      },
+                    ],
+                  },
+                  {
+                    id: expect.anything(),
+                    type: 'table-head-cell',
+                    children: [
+                      {
+                        id: expect.anything(),
+                        annotations: {
+                          internalWrapper: true,
+                        },
+                        type: 'paragraph',
+                        nodes: [
+                          {
+                            id: expect.anything(),
+                            annotations: {
+                              plainText: true,
+                            },
+                            type: 'text',
+                            text: 'Header 2',
+                          },
+                        ],
+                      },
+                    ],
+                  },
+                ],
+              },
+            ],
+          },
+          {
+            id: expect.anything(),
+            type: 'table-body',
+            children: [
+              {
+                id: expect.anything(),
+                type: 'table-row',
+                children: [
+                  {
+                    id: expect.anything(),
+                    type: 'table-cell',
+                    children: [
+                      {
+                        id: expect.anything(),
+                        annotations: {
+                          internalWrapper: true,
+                        },
+                        type: 'paragraph',
+                        nodes: [
+                          {
+                            id: expect.anything(),
+                            annotations: {
+                              plainText: true,
+                            },
+                            type: 'text',
+                            text: 'Cell 1',
+                          },
+                        ],
+                      },
+                    ],
+                  },
+                  {
+                    id: expect.anything(),
+                    type: 'table-cell',
+                    children: [
+                      {
+                        id: expect.anything(),
+                        annotations: {
+                          internalWrapper: true,
+                        },
+                        type: 'paragraph',
+                        nodes: [
+                          {
+                            id: expect.anything(),
+                            annotations: {
+                              plainText: true,
+                            },
+                            type: 'text',
+                            text: 'Cell 2',
+                          },
+                        ],
+                      },
+                    ],
+                  },
+                ],
+              },
+              {
+                id: expect.anything(),
+                type: 'table-row',
+                children: [
+                  {
+                    id: expect.anything(),
+                    type: 'table-cell',
+                    children: [
+                      {
+                        id: expect.anything(),
+                        annotations: {
+                          internalWrapper: true,
+                        },
+                        type: 'paragraph',
+                        nodes: [
+                          {
+                            id: expect.anything(),
+                            annotations: {
+                              plainText: true,
+                            },
+                            type: 'text',
+                            text: 'Cell 3',
+                          },
+                        ],
+                      },
+                    ],
+                  },
+                  {
+                    id: expect.anything(),
+                    type: 'table-cell',
+                    children: [
+                      {
+                        id: expect.anything(),
+                        annotations: {
+                          internalWrapper: true,
+                        },
+                        type: 'paragraph',
+                        nodes: [
+                          {
+                            id: expect.anything(),
+                            annotations: {
+                              plainText: true,
+                            },
+                            type: 'text',
+                            text: 'Cell 4',
+                          },
+                        ],
+                      },
+                    ],
+                  },
+                ],
+              },
+            ],
+          },
+        ],
+      },
+    ]);
+  });
+  it('should convert the not defined table children elements to html block DTOs', () => {
+    const html = `
+			<table>
+			  <caption>
+				Front-end web developer course 2021
+			  </caption>
+			  <colgroup>
+				<col />
+				<col span="2" class="batman" />
+				<col span="2" class="flash" />
+			  </colgroup>
+			  <thead>
+				<tr>
+				  <th scope="col">Person</th>
+				  <th scope="col">Most interest in</th>
+				  <th scope="col">Age</th>
+				</tr>
+			  </thead>
+			  <tbody>
+				<tr>
+				  <th scope="row">Chris</th>
+				  <td>HTML tables</td>
+				  <td>22</td>
+				</tr>
+				<tr>
+				  <th scope="row">Dennis</th>
+				  <td>Web accessibility</td>
+				  <td>45</td>
+				</tr>
+				<tr>
+				  <th scope="row">Sarah</th>
+				  <td>JavaScript frameworks</td>
+				  <td>29</td>
+				</tr>
+				<tr>
+				  <th scope="row">Karen</th>
+				  <td>Web performance</td>
+				  <td>36</td>
+				</tr>
+			  </tbody>
+			  <tfoot>
+				<tr>
+				  <th scope="row" colspan="2">Average age</th>
+				  <td>33</td>
+				</tr>
+			  </tfoot>
+			</table>
+		`;
+    const value = VegaRTEContent.fromHtml(html, { autoMatchFormat: false });
+    const table = value.children[0];
+    const caption = table.children[0];
+    const colgroup = table.children[1];
+    const thead = table.children[2];
+    const tbody = table.children[3];
+    const tfoot = table.children[4];
+    const theadRow = thead.children[0];
+    const theadCell = theadRow.children[0];
+    const tbodyRow = tbody.children[0];
+    const tbodyCell = tbodyRow.children[0];
+    expect(table).toBeInstanceOf(RTETableBlock);
+    expect(caption).toBeInstanceOf(RTETableCaptionBlock);
+    expect(thead).toBeInstanceOf(RTETableHeadBlock);
+    expect(theadRow).toBeInstanceOf(RTETableRowBlock);
+    expect(theadCell).toBeInstanceOf(RTETableHeadCellBlock);
+    expect(tbody).toBeInstanceOf(RTETableBodyBlock);
+    expect(tbodyRow).toBeInstanceOf(RTETableRowBlock);
+    expect(tbodyCell).toBeInstanceOf(RTETableCellBlock);
+    // colgroup and tfoot are not defined in the custom table extension dto
+    expect(colgroup).toBeInstanceOf(RTEHtmlBlock);
+    expect(tfoot).toBeInstanceOf(RTEHtmlBlock);
+    expect(value.toHtml()).toEqualHtml(html);
+  });
+  it('should convert the table with children DTOs to table html elements', () => {
+    const html = `<table>
+            <caption>Table Caption</caption>
+			<thead>
+				<tr>
+					<th>Header 1</th>
+					<th>Header 2</th>
+				</tr>
+			</thead>
+			<tbody>
+				<tr>
+					<td>Cell 1</td>
+					<td>Cell 2</td>
+				</tr>
+				<tr>
+					<td>Cell 3</td>
+					<td>Cell 4</td>
+				</tr>
+			</tbody>
+		</table>`;
+    expect(VegaRTEContent.fromHtml(html).toHtml()).toEqualHtml(`
+		<table style="border-collapse: collapse; margin: 0 auto;">
+          <caption style="padding: 8px; border: 1px solid #ddd; border-bottom: none; background-color: #f7f7f7; position: relative; text-align: center; min-height: 22px;">
+            <p style="font-family: Inter; font-size: 16px; line-height: 22px; min-height: 22px; font-weight: 500; margin-top: 0px; margin-bottom: 0px;">
+              <span>
+                Table Caption
+              </span>
+            </p>
+          </caption>
+		  <thead>
+			<tr>
+			  <th style="padding: 12px; border: solid 1px #ddd; text-align: left; vertical-align: middle; min-width: 55px; box-sizing: border-box; background-color: #f2f2f2;">
+				<p style="font-family: Inter; font-size: 16px; line-height: 22px; min-height: 22px; font-weight: 500; margin-top: 0px; margin-bottom: 0px;">
+				  <span>
+					Header 1
+				  </span>
+				</p>
+			  </th>
+			  <th style="padding: 12px; border: solid 1px #ddd; text-align: left; vertical-align: middle; min-width: 55px; box-sizing: border-box; background-color: #f2f2f2;">
+				<p style="font-family: Inter; font-size: 16px; line-height: 22px; min-height: 22px; font-weight: 500; margin-top: 0px; margin-bottom: 0px;">
+				  <span>
+					Header 2
+				  </span>
+				</p>
+			  </th>
+			</tr>
+		  </thead>
+		  <tbody>
+			<tr>
+			  <td style="padding: 12px; border: solid 1px #ddd; text-align: left; vertical-align: middle; min-width: 55px; box-sizing: border-box;">
+				<p style="font-family: Inter; font-size: 16px; line-height: 22px; min-height: 22px; font-weight: 500; margin-top: 0px; margin-bottom: 0px;">
+				  <span>
+					Cell 1
+				  </span>
+				</p>
+			  </td>
+			  <td style="padding: 12px; border: solid 1px #ddd; text-align: left; vertical-align: middle; min-width: 55px; box-sizing: border-box;">
+				<p style="font-family: Inter; font-size: 16px; line-height: 22px; min-height: 22px; font-weight: 500; margin-top: 0px; margin-bottom: 0px;">
+				  <span>
+					Cell 2
+				  </span>
+				</p>
+			  </td>
+			</tr>
+			<tr>
+			  <td style="padding: 12px; border: solid 1px #ddd; text-align: left; vertical-align: middle; min-width: 55px; box-sizing: border-box;">
+				<p style="font-family: Inter; font-size: 16px; line-height: 22px; min-height: 22px; font-weight: 500; margin-top: 0px; margin-bottom: 0px;">
+				  <span>
+					Cell 3
+				  </span>
+				</p>
+			  </td>
+			  <td style="padding: 12px; border: solid 1px #ddd; text-align: left; vertical-align: middle; min-width: 55px; box-sizing: border-box;">
+				<p style="font-family: Inter; font-size: 16px; line-height: 22px; min-height: 22px; font-weight: 500; margin-top: 0px; margin-bottom: 0px;">
+				  <span>
+					Cell 4
+				  </span>
+				</p>
+			  </td>
+			</tr>
+		  </tbody>
+		</table>`);
+    expect(VegaRTEContent.fromHtml(html, { autoMatchFormat: false }).toHtml()).toEqualHtml(html);
+  });
+  it('should convert custom annotations as expect', () => {
+    const html = `<table id='table' style='background: blue' class='table'>
+			<caption id='caption' style='color: yellow' class='caption'>Table Caption</caption>
+			<thead id='head' style='background: red' class='thead'>
+				<tr id='row-1' style='background: purple' class='tr'>
+					<th id='head-cell-1' style='background: pink' class='th'>Header 1</th>
+					<th>Header 2</th>
+				</tr>
+			</thead>
+			<tbody id='body' style='background: green' class='tbody'>
+				<tr>
+					<td id='cell-1' style='background: yellow' class='td'>Cell 1</td>
+					<td>Cell 2</td>
+				</tr>
+				<tr>
+					<td>Cell 3</td>
+					<td>Cell 4</td>
+				</tr>
+			</tbody>
+		</table>`;
+    expect(VegaRTEContent.fromHtml(html, { autoMatchFormat: false }).toJSON()).toEqual([
+      {
+        id: expect.anything(),
+        annotations: {
+          customAttribute: {
+            id: 'table',
+          },
+          customClass: ['table'],
+          customStyle: {
+            background: 'blue',
+          },
+        },
+        type: 'table-block',
+        children: [
+          {
+            id: expect.anything(),
+            annotations: {
+              customAttribute: {
+                id: 'caption',
+              },
+              customClass: ['caption'],
+              customStyle: {
+                color: 'yellow',
+              },
+            },
+            type: 'table-caption',
+            children: [
+              {
+                id: expect.anything(),
+                annotations: {
+                  internalWrapper: true,
+                },
+                type: 'paragraph',
+                nodes: [
+                  {
+                    id: expect.anything(),
+                    annotations: {
+                      plainText: true,
+                    },
+                    type: 'text',
+                    text: 'Table Caption',
+                  },
+                ],
+              },
+            ],
+          },
+          {
+            id: expect.anything(),
+            annotations: {
+              customAttribute: {
+                id: 'head',
+              },
+              customClass: ['thead'],
+              customStyle: {
+                background: 'red',
+              },
+            },
+            type: 'table-head',
+            children: [
+              {
+                id: expect.anything(),
+                annotations: {
+                  customAttribute: {
+                    id: 'row-1',
+                  },
+                  customClass: ['tr'],
+                  customStyle: {
+                    background: 'purple',
+                  },
+                },
+                type: 'table-row',
+                children: [
+                  {
+                    id: expect.anything(),
+                    annotations: {
+                      customAttribute: {
+                        id: 'head-cell-1',
+                      },
+                      customClass: ['th'],
+                      customStyle: {
+                        background: 'pink',
+                      },
+                    },
+                    type: 'table-head-cell',
+                    children: [
+                      {
+                        id: expect.anything(),
+                        annotations: {
+                          internalWrapper: true,
+                        },
+                        type: 'paragraph',
+                        nodes: [
+                          {
+                            id: expect.anything(),
+                            annotations: {
+                              plainText: true,
+                            },
+                            type: 'text',
+                            text: 'Header 1',
+                          },
+                        ],
+                      },
+                    ],
+                  },
+                  {
+                    id: expect.anything(),
+                    type: 'table-head-cell',
+                    children: [
+                      {
+                        id: expect.anything(),
+                        annotations: {
+                          internalWrapper: true,
+                        },
+                        type: 'paragraph',
+                        nodes: [
+                          {
+                            id: expect.anything(),
+                            annotations: {
+                              plainText: true,
+                            },
+                            type: 'text',
+                            text: 'Header 2',
+                          },
+                        ],
+                      },
+                    ],
+                  },
+                ],
+              },
+            ],
+          },
+          {
+            id: expect.anything(),
+            annotations: {
+              customAttribute: {
+                id: 'body',
+              },
+              customClass: ['tbody'],
+              customStyle: {
+                background: 'green',
+              },
+            },
+            type: 'table-body',
+            children: [
+              {
+                id: expect.anything(),
+                type: 'table-row',
+                children: [
+                  {
+                    id: expect.anything(),
+                    annotations: {
+                      customAttribute: {
+                        id: 'cell-1',
+                      },
+                      customClass: ['td'],
+                      customStyle: {
+                        background: 'yellow',
+                      },
+                    },
+                    type: 'table-cell',
+                    children: [
+                      {
+                        id: expect.anything(),
+                        annotations: {
+                          internalWrapper: true,
+                        },
+                        type: 'paragraph',
+                        nodes: [
+                          {
+                            id: expect.anything(),
+                            annotations: {
+                              plainText: true,
+                            },
+                            type: 'text',
+                            text: 'Cell 1',
+                          },
+                        ],
+                      },
+                    ],
+                  },
+                  {
+                    id: expect.anything(),
+                    type: 'table-cell',
+                    children: [
+                      {
+                        id: expect.anything(),
+                        annotations: {
+                          internalWrapper: true,
+                        },
+                        type: 'paragraph',
+                        nodes: [
+                          {
+                            id: expect.anything(),
+                            annotations: {
+                              plainText: true,
+                            },
+                            type: 'text',
+                            text: 'Cell 2',
+                          },
+                        ],
+                      },
+                    ],
+                  },
+                ],
+              },
+              {
+                id: expect.anything(),
+                type: 'table-row',
+                children: [
+                  {
+                    id: expect.anything(),
+                    type: 'table-cell',
+                    children: [
+                      {
+                        id: expect.anything(),
+                        annotations: {
+                          internalWrapper: true,
+                        },
+                        type: 'paragraph',
+                        nodes: [
+                          {
+                            id: expect.anything(),
+                            annotations: {
+                              plainText: true,
+                            },
+                            type: 'text',
+                            text: 'Cell 3',
+                          },
+                        ],
+                      },
+                    ],
+                  },
+                  {
+                    id: expect.anything(),
+                    type: 'table-cell',
+                    children: [
+                      {
+                        id: expect.anything(),
+                        annotations: {
+                          internalWrapper: true,
+                        },
+                        type: 'paragraph',
+                        nodes: [
+                          {
+                            id: expect.anything(),
+                            annotations: {
+                              plainText: true,
+                            },
+                            type: 'text',
+                            text: 'Cell 4',
+                          },
+                        ],
+                      },
+                    ],
+                  },
+                ],
+              },
+            ],
+          },
+        ],
+      },
+    ]);
+    expect(VegaRTEContent.fromHtml(html).toJSON()).toEqual([
+      {
+        id: expect.anything(),
+        annotations: {
+          table: {
+            alignment: 'center',
+            borderCollapse: 'collapse',
+          },
+          customAttribute: {
+            id: 'table',
+          },
+          customClass: ['table'],
+          customStyle: {
+            background: 'blue',
+          },
+        },
+        type: 'table-block',
+        children: [
+          {
+            id: expect.anything(),
+            annotations: {
+              caption: {
+                padding: '8px 12px',
+                border: '1px solid #ddd',
+                borderBottom: 'none',
+                backgroundColor: '#f7f7f7',
+                position: 'relative',
+                textAlign: 'center',
+                minHeight: '22px',
+              },
+              customAttribute: {
+                id: 'caption',
+              },
+              customClass: ['caption'],
+              customStyle: {
+                color: 'yellow',
+              },
+            },
+            type: 'table-caption',
+            children: [
+              {
+                id: expect.anything(),
+                annotations: {
+                  textStyle: 'paragraph',
+                  customAttribute: {
+                    id: 'caption',
+                  },
+                  customClass: ['caption'],
+                  customStyle: {
+                    color: 'yellow',
+                  },
+                },
+                type: 'paragraph',
+                nodes: [
+                  {
+                    id: expect.anything(),
+                    type: 'text',
+                    text: 'Table Caption',
+                  },
+                ],
+              },
+            ],
+          },
+          {
+            id: expect.anything(),
+            annotations: {
+              customAttribute: {
+                id: 'head',
+              },
+              customClass: ['thead'],
+              customStyle: {
+                background: 'red',
+              },
+            },
+            type: 'table-head',
+            children: [
+              {
+                id: expect.anything(),
+                annotations: {
+                  customAttribute: {
+                    id: 'row-1',
+                  },
+                  customClass: ['tr'],
+                  customStyle: {
+                    background: 'purple',
+                  },
+                },
+                type: 'table-row',
+                children: [
+                  {
+                    id: expect.anything(),
+                    annotations: {
+                      tableCell: {
+                        padding: '12px',
+                        border: {
+                          style: 'solid',
+                          width: '1px',
+                          color: '#ddd',
+                        },
+                        textAlign: 'left',
+                        verticalAlign: 'middle',
+                        minWidth: '55px',
+                        boxSizing: 'border-box',
+                      },
+                      customAttribute: {
+                        id: 'head-cell-1',
+                      },
+                      customClass: ['th'],
+                      customStyle: {
+                        background: 'pink',
+                      },
+                    },
+                    type: 'table-head-cell',
+                    children: [
+                      {
+                        id: expect.anything(),
+                        annotations: {
+                          textStyle: 'paragraph',
+                          customAttribute: {
+                            id: 'head-cell-1',
+                          },
+                          customClass: ['th'],
+                          customStyle: {
+                            background: 'pink',
+                          },
+                        },
+                        type: 'paragraph',
+                        nodes: [
+                          {
+                            id: expect.anything(),
+                            type: 'text',
+                            text: 'Header 1',
+                          },
+                        ],
+                      },
+                    ],
+                  },
+                  {
+                    id: expect.anything(),
+                    annotations: {
+                      tableCell: {
+                        padding: '12px',
+                        border: {
+                          style: 'solid',
+                          width: '1px',
+                          color: '#ddd',
+                        },
+                        textAlign: 'left',
+                        verticalAlign: 'middle',
+                        minWidth: '55px',
+                        boxSizing: 'border-box',
+                      },
+                    },
+                    type: 'table-head-cell',
+                    children: [
+                      {
+                        id: expect.anything(),
+                        annotations: {
+                          textStyle: 'paragraph',
+                        },
+                        type: 'paragraph',
+                        nodes: [
+                          {
+                            id: expect.anything(),
+                            type: 'text',
+                            text: 'Header 2',
+                          },
+                        ],
+                      },
+                    ],
+                  },
+                ],
+              },
+            ],
+          },
+          {
+            id: expect.anything(),
+            annotations: {
+              customAttribute: {
+                id: 'body',
+              },
+              customClass: ['tbody'],
+              customStyle: {
+                background: 'green',
+              },
+            },
+            type: 'table-body',
+            children: [
+              {
+                id: expect.anything(),
+                type: 'table-row',
+                children: [
+                  {
+                    id: expect.anything(),
+                    annotations: {
+                      tableCell: {
+                        padding: '12px',
+                        border: {
+                          style: 'solid',
+                          width: '1px',
+                          color: '#ddd',
+                        },
+                        textAlign: 'left',
+                        verticalAlign: 'middle',
+                        minWidth: '55px',
+                        boxSizing: 'border-box',
+                      },
+                      customAttribute: {
+                        id: 'cell-1',
+                      },
+                      customClass: ['td'],
+                      customStyle: {
+                        background: 'yellow',
+                      },
+                    },
+                    type: 'table-cell',
+                    children: [
+                      {
+                        id: expect.anything(),
+                        annotations: {
+                          textStyle: 'paragraph',
+                          customAttribute: {
+                            id: 'cell-1',
+                          },
+                          customClass: ['td'],
+                          customStyle: {
+                            background: 'yellow',
+                          },
+                        },
+                        type: 'paragraph',
+                        nodes: [
+                          {
+                            id: expect.anything(),
+                            type: 'text',
+                            text: 'Cell 1',
+                          },
+                        ],
+                      },
+                    ],
+                  },
+                  {
+                    id: expect.anything(),
+                    annotations: {
+                      tableCell: {
+                        padding: '12px',
+                        border: {
+                          style: 'solid',
+                          width: '1px',
+                          color: '#ddd',
+                        },
+                        textAlign: 'left',
+                        verticalAlign: 'middle',
+                        minWidth: '55px',
+                        boxSizing: 'border-box',
+                      },
+                    },
+                    type: 'table-cell',
+                    children: [
+                      {
+                        id: expect.anything(),
+                        annotations: {
+                          textStyle: 'paragraph',
+                        },
+                        type: 'paragraph',
+                        nodes: [
+                          {
+                            id: expect.anything(),
+                            type: 'text',
+                            text: 'Cell 2',
+                          },
+                        ],
+                      },
+                    ],
+                  },
+                ],
+              },
+              {
+                id: expect.anything(),
+                type: 'table-row',
+                children: [
+                  {
+                    id: expect.anything(),
+                    annotations: {
+                      tableCell: {
+                        padding: '12px',
+                        border: {
+                          style: 'solid',
+                          width: '1px',
+                          color: '#ddd',
+                        },
+                        textAlign: 'left',
+                        verticalAlign: 'middle',
+                        minWidth: '55px',
+                        boxSizing: 'border-box',
+                      },
+                    },
+                    type: 'table-cell',
+                    children: [
+                      {
+                        id: expect.anything(),
+                        annotations: {
+                          textStyle: 'paragraph',
+                        },
+                        type: 'paragraph',
+                        nodes: [
+                          {
+                            id: expect.anything(),
+                            type: 'text',
+                            text: 'Cell 3',
+                          },
+                        ],
+                      },
+                    ],
+                  },
+                  {
+                    id: expect.anything(),
+                    annotations: {
+                      tableCell: {
+                        padding: '12px',
+                        border: {
+                          style: 'solid',
+                          width: '1px',
+                          color: '#ddd',
+                        },
+                        textAlign: 'left',
+                        verticalAlign: 'middle',
+                        minWidth: '55px',
+                        boxSizing: 'border-box',
+                      },
+                    },
+                    type: 'table-cell',
+                    children: [
+                      {
+                        id: expect.anything(),
+                        annotations: {
+                          textStyle: 'paragraph',
+                        },
+                        type: 'paragraph',
+                        nodes: [
+                          {
+                            id: expect.anything(),
+                            type: 'text',
+                            text: 'Cell 4',
+                          },
+                        ],
+                      },
+                    ],
+                  },
+                ],
+              },
+            ],
+          },
+        ],
+      },
+    ]);
+    expect(VegaRTEContent.fromHtml(html, { autoMatchFormat: false }).toHtml()).toEqualHtml(html);
+    expect(VegaRTEContent.fromHtml(html).toHtml())
+      .toEqualHtml(`<table class="table" id="table" style="border-collapse: collapse; margin: 0 auto; background: blue;">
+      <caption class="caption" id="caption" style="padding: 8px; border: 1px solid #ddd; border-bottom: none; background-color: #f7f7f7; position: relative; text-align: center; min-height: 22px; color: yellow;">
+        <p class="caption" id="caption" style="font-family: Inter; font-size: 16px; line-height: 22px; min-height: 22px; font-weight: 500; margin-top: 0px; margin-bottom: 0px; color: yellow;">
+          <span>
+            Table Caption
+          </span>
+        </p>
+      </caption>
+      <thead class="thead" id="head" style="background: red;">
+        <tr class="tr" id="row-1" style="background: purple;">
+          <th class="th" id="head-cell-1" style="padding: 12px; border: solid 1px #ddd; text-align: left; vertical-align: middle; min-width: 55px; box-sizing: border-box; background-color: #f2f2f2; background: pink;">
+            <p class="th" id="head-cell-1" style="font-family: Inter; font-size: 16px; line-height: 22px; min-height: 22px; font-weight: 500; margin-top: 0px; margin-bottom: 0px; background: pink;">
+              <span>
+                Header 1
+              </span>
+            </p>
+          </th>
+          <th style="padding: 12px; border: solid 1px #ddd; text-align: left; vertical-align: middle; min-width: 55px; box-sizing: border-box; background-color: #f2f2f2;">
+            <p style="font-family: Inter; font-size: 16px; line-height: 22px; min-height: 22px; font-weight: 500; margin-top: 0px; margin-bottom: 0px;">
+              <span>
+                Header 2
+              </span>
+            </p>
+          </th>
+        </tr>
+      </thead>
+      <tbody class="tbody" id="body" style="background: green;">
+        <tr>
+          <td class="td" id="cell-1" style="padding: 12px; border: solid 1px #ddd; text-align: left; vertical-align: middle; min-width: 55px; box-sizing: border-box; background: yellow;">
+            <p class="td" id="cell-1" style="font-family: Inter; font-size: 16px; line-height: 22px; min-height: 22px; font-weight: 500; margin-top: 0px; margin-bottom: 0px; background: yellow;">
+              <span>
+                Cell 1
+              </span>
+            </p>
+          </td>
+          <td style="padding: 12px; border: solid 1px #ddd; text-align: left; vertical-align: middle; min-width: 55px; box-sizing: border-box;">
+            <p style="font-family: Inter; font-size: 16px; line-height: 22px; min-height: 22px; font-weight: 500; margin-top: 0px; margin-bottom: 0px;">
+              <span>
+                Cell 2
+              </span>
+            </p>
+          </td>
+        </tr>
+        <tr>
+          <td style="padding: 12px; border: solid 1px #ddd; text-align: left; vertical-align: middle; min-width: 55px; box-sizing: border-box;">
+            <p style="font-family: Inter; font-size: 16px; line-height: 22px; min-height: 22px; font-weight: 500; margin-top: 0px; margin-bottom: 0px;">
+              <span>
+                Cell 3
+              </span>
+            </p>
+          </td>
+          <td style="padding: 12px; border: solid 1px #ddd; text-align: left; vertical-align: middle; min-width: 55px; box-sizing: border-box;">
+            <p style="font-family: Inter; font-size: 16px; line-height: 22px; min-height: 22px; font-weight: 500; margin-top: 0px; margin-bottom: 0px;">
+              <span>
+                Cell 4
+              </span>
+            </p>
+          </td>
+        </tr>
+      </tbody>
+    </table>`);
+  });
+  it('should convert empty cell with default paragraph if autoMatchFormat is not false', () => {
+    const html = `<table>
+				<thead>
+					<tr>
+						<th></th>
+						<th>Header 2</th>
+					</tr>
+				</thead>
+				<tbody>
+					<tr>
+						<td></td>
+						<td>Cell 2</td>
+					</tr>
+				</tbody>
+			</table>`;
+    const value = VegaRTEContent.fromHtml(html);
+    const table = value.children[0];
+    const thead = table.children[0];
+    const tbody = table.children[1];
+    const theadRow = thead.children[0];
+    const theadCell = theadRow.children[0];
+    const tbodyRow = tbody.children[0];
+    const tbodyCell = tbodyRow.children[0];
+    expect(theadCell.children.length).toBe(1);
+    expect(theadCell.children[0].toJSON()).toEqual({
+      id: expect.anything(),
+      type: 'paragraph',
+      annotations: { textStyle: 'paragraph' },
+      nodes: [{ id: expect.anything(), text: '', type: 'text' }],
+    });
+    expect(tbodyCell.children.length).toBe(1);
+    expect(tbodyCell.children[0].toJSON()).toEqual({
+      id: expect.anything(),
+      type: 'paragraph',
+      annotations: { textStyle: 'paragraph' },
+      nodes: [{ id: expect.anything(), text: '', type: 'text' }],
+    });
+  });
+  it('should convert empty cell with default paragraph wrapper if autoMatchFormat is false', () => {
+    const html = `<table>
+				<thead>
+					<tr>
+						<th></th>
+						<th>Header 2</th>
+					</tr>
+				</thead>
+				<tbody>
+					<tr>
+						<td></td>
+						<td>Cell 2</td>
+					</tr>
+				</tbody>
+			</table>`;
+    const value = VegaRTEContent.fromHtml(html, { autoMatchFormat: false });
+    const table = value.children[0];
+    const thead = table.children[0];
+    const tbody = table.children[1];
+    const theadRow = thead.children[0];
+    const theadCell = theadRow.children[0];
+    const tbodyRow = tbody.children[0];
+    const tbodyCell = tbodyRow.children[0];
+    expect(theadCell.children.length).toBe(1);
+    expect(theadCell.children[0].toJSON()).toEqual({
+      id: expect.anything(),
+      type: 'paragraph',
+      annotations: { internalWrapper: true },
+      nodes: [{ id: expect.anything(), annotations: { plainText: true }, text: '', type: 'text' }],
+    });
+    expect(tbodyCell.children.length).toBe(1);
+    expect(tbodyCell.children[0].toJSON()).toEqual({
+      id: expect.anything(),
+      type: 'paragraph',
+      annotations: { internalWrapper: true },
+      nodes: [{ id: expect.anything(), annotations: { plainText: true }, text: '', type: 'text' }],
+    });
+  });
+  it('should convert changed minWidth and boxSizing', () => {
+    const html = `<table style="border-collapse: collapse;margin: 0 auto;">
+			<tbody>
+				<tr>
+					<td style="padding: 12px;border: solid 1px #ddd;text-align: left;vertical-align: middle;min-width: 100px;box-sizing: border-box;">
+						<p style="font-family: Inter;font-size: 16px;line-height: 22px;min-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;">
+							<span>A</span>
+						</p>
+					</td>
+					<td style="padding: 12px;border: solid 1px #ddd;text-align: left;vertical-align: middle;min-width: 55px;box-sizing: content-box;">
+						<p style="font-family: Inter;font-size: 16px;line-height: 22px;min-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;">
+							<span>B</span>
+						</p>
+					</td>
+				</tr>
+				<tr>
+					<td style="padding: 12px;border: solid 1px #ddd;text-align: left;vertical-align: middle;min-width: 55px;box-sizing: border-box;">
+						<p style="font-family: Inter;font-size: 16px;line-height: 22px;min-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;">
+							<span>C</span>
+						</p>
+					</td>
+					<td style="padding: 12px;border: solid 1px #ddd;text-align: left;vertical-align: middle;min-width: 55px;box-sizing: border-box;">
+						<p style="font-family: Inter;font-size: 16px;line-height: 22px;min-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;">
+							<span>D</span>
+						</p>
+					</td>
+				</tr>
+			</tbody>
+		</table>`;
+    const value = VegaRTEContent.fromHtml(html);
+    const jsonValue = value.toJSON()[0];
+    const tbody = jsonValue.children[0];
+    const firstRow = tbody.children[0];
+    const firstCell = firstRow.children[0];
+    const secondCell = firstRow.children[1];
+    expect(firstCell.annotations.tableCell.minWidth).toBe('100px');
+    expect(secondCell.annotations.tableCell.boxSizing).toBe('content-box');
+    expect(firstCell.annotations.customStyle.minWidth).toBe('100px');
+    expect(secondCell.annotations.customStyle.boxSizing).toBe('content-box');
+    expect(value.toHtml()).toEqualHtml(html);
+  });
+  it('should convert changed minWidth and boxSizing when autoMatchFormat is false', () => {
+    const html = `<table style="border-collapse: collapse;margin: 0 auto;">
+			<tbody>
+				<tr>
+					<td style="padding: 12px;border: solid 1px #ddd;text-align: left;vertical-align: middle;min-width: 100px;box-sizing: border-box;">
+						<p><span>A</span></p>
+					</td>
+					<td style="padding: 12px;border: solid 1px #ddd;text-align: left;vertical-align: middle;min-width: 55px;box-sizing: content-box;">
+						<p><span>B</span></p>
+					</td>
+				</tr>
+				<tr>
+					<td style="padding: 12px;border: solid 1px #ddd;text-align: left;vertical-align: middle;min-width: 55px;box-sizing: border-box;">
+						<p><span>C</span></p>
+					</td>
+					<td style="padding: 12px;border: solid 1px #ddd;text-align: left;vertical-align: middle;min-width: 55px;box-sizing: border-box;">
+						<p><span>D</span></p>
+					</td>
+				</tr>
+			</tbody>
+		</table>`;
+    const value = VegaRTEContent.fromHtml(html, { autoMatchFormat: false });
+    const jsonValue = value.toJSON()[0];
+    const tbody = jsonValue.children[0];
+    const firstRow = tbody.children[0];
+    const firstCell = firstRow.children[0];
+    const secondCell = firstRow.children[1];
+    expect(firstCell.annotations.tableCell.minWidth).toBe('100px');
+    expect(secondCell.annotations.tableCell.boxSizing).toBe('content-box');
+    expect(firstCell.annotations.customStyle.minWidth).toBe('100px');
+    expect(secondCell.annotations.customStyle.boxSizing).toBe('content-box');
+    expect(value.toHtml()).toEqualHtml(html);
+  });
+});