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

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

@@ -1,1539 +0,0 @@
-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);
-  });
-});