@heartlandone/vega 2.71.0 → 2.72.0-RTE-table-preview

package/dist/collection/components/vega-rich-text-editor/test/extensions/table/table-cell-annotation.test.js

@@ -0,0 +1,128 @@
+import { RTETableCellAnnotation } from '../../../extensions/table/annotations/table-cell-annotation';
+import { RTETableExtensionAnnotationTypeEnum } from '../../../extensions/table/annotations/table-annotation';
+import { RTETableCellBlock } from '../../../extensions/table/dto/table-cell-block';
+import { RTETableCellAnnotationsAction } from '../../../extensions/table/actions/table-cell-annotations-action';
+import { RTETableHeadCellAnnotation } from '../../../extensions/table/annotations/table-head-cell-annotation';
+describe('RTETableCellAnnotation', () => {
+  const customOptions = {
+    backgroundColor: '#fff',
+    padding: '8px',
+    border: { style: 'dashed', width: '2px', color: '#000' },
+    width: '100px',
+    height: '80px',
+    textAlign: 'right',
+    verticalAlign: 'bottom',
+  };
+  test('exposes a default padding constant', () => {
+    expect(RTETableCellAnnotation.DEFAULT_PADDING).toBe('12px');
+  });
+  test('renderStyle removes defaults without options', () => {
+    expect(new RTETableCellAnnotation().renderStyle()).toEqual({});
+  });
+  test('renderStyle includes defaults when standalone true', () => {
+    const style = new RTETableCellAnnotation().renderStyle({ standalone: true });
+    expect(style).toMatchObject({
+      padding: RTETableCellAnnotation.DEFAULT_PADDING,
+      border: 'solid 1px #ddd',
+      textAlign: 'left',
+      verticalAlign: 'middle',
+    });
+  });
+  test('renderStyle omits defaults when not standalone', () => {
+    const annotation = new RTETableCellAnnotation();
+    const style = annotation.renderStyle({ standalone: false });
+    expect(style).toEqual({});
+  });
+  test('renderStyle preserves custom values when not standalone', () => {
+    const annotation = new RTETableCellAnnotation(customOptions);
+    expect(annotation.renderStyle({ standalone: false })).toEqual({
+      backgroundColor: '#fff',
+      padding: '8px',
+      border: 'dashed 2px #000',
+      width: '100px',
+      height: '80px',
+      textAlign: 'right',
+      verticalAlign: 'bottom',
+    });
+  });
+  test('renderStyle preserves custom values when not standalone for RTETableHeadCellAnnotation', () => {
+    const annotation = new RTETableHeadCellAnnotation(customOptions);
+    expect(annotation.renderStyle({ standalone: false })).toEqual({
+      backgroundColor: '#fff',
+      padding: '8px',
+      border: 'dashed 2px #000',
+      width: '100px',
+      height: '80px',
+      textAlign: 'right',
+      verticalAlign: 'bottom',
+    });
+  });
+  test('borderStr handles absent and custom borders', () => {
+    const withoutBorder = new RTETableCellAnnotation({ border: null });
+    expect(withoutBorder.borderStr).toBeNull();
+    const withBorder = new RTETableCellAnnotation({
+      border: { style: 'dotted', width: '3px', color: '#123' },
+    });
+    expect(withBorder.borderStr).toBe('dotted 3px #123');
+  });
+  test('clone duplicates instance but keeps values', () => {
+    const original = new RTETableCellAnnotation({
+      backgroundColor: '#abc',
+      textAlign: 'center',
+    });
+    const copy = original.clone();
+    expect(copy).not.toBe(original);
+    expect(copy).toEqual(original);
+  });
+  test('from returns type constant and annotation instance', () => {
+    const [type, annotation] = RTETableCellAnnotation.from({ backgroundColor: '#abc' });
+    expect(type).toBe(RTETableExtensionAnnotationTypeEnum.CELL);
+    expect(annotation).toBeInstanceOf(RTETableCellAnnotation);
+    expect(annotation.backgroundColor).toBe('#abc');
+  });
+  test('from returns type constant and annotation instance', () => {
+    const [type, annotation] = RTETableHeadCellAnnotation.from({ backgroundColor: '#abc' });
+    expect(type).toBe(RTETableExtensionAnnotationTypeEnum.CELL);
+    expect(annotation).toBeInstanceOf(RTETableCellAnnotation);
+    expect(annotation.backgroundColor).toBe('#abc');
+  });
+  test('toJSON removes undefined entries', () => {
+    const annotation = new RTETableCellAnnotation({
+      backgroundColor: '#f00',
+      height: '120px',
+      border: null,
+    });
+    expect(annotation.toJSON()).toEqual({
+      tableCell: {
+        backgroundColor: '#f00',
+        height: '120px',
+        padding: '12px',
+        textAlign: 'left',
+        verticalAlign: 'middle',
+      },
+    });
+  });
+  test('renderClass always returns null', () => {
+    expect(new RTETableCellAnnotation().renderClass()).toBeNull();
+  });
+  test('should apply the annotation correctly', () => {
+    const cellBlock = new RTETableCellBlock('cell-1');
+    cellBlock.apply(new RTETableCellAnnotationsAction({
+      backgroundColor: '#03852d',
+    }));
+    expect(cellBlock.toJSON()).toEqual({
+      id: 'cell-1',
+      type: 'table-cell',
+      children: [],
+      annotations: {
+        tableCell: {
+          backgroundColor: '#03852d',
+          border: { color: '#ddd', style: 'solid', width: '1px' },
+          padding: '12px',
+          textAlign: 'left',
+          verticalAlign: 'middle',
+        },
+      },
+    });
+  });
+});

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

@@ -0,0 +1,517 @@
+import '../../../dto/setup';
+import { VegaRTETableExtension } from '../../../extensions/table/table-extension';
+import { RTETableBlock } from '../../../extensions/table/dto/table-block';
+import { RTETableBodyBlock } from '../../../extensions/table/dto/table-body-block';
+import { RTETableHeadBlock } from '../../../extensions/table/dto/table-head-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 { RTETableCaptionBlock, } from '../../../extensions/table/dto/table-caption-block';
+describe('dto', () => {
+  const tableObj = {
+    id: '1764771896966',
+    type: 'table-block',
+    annotations: {
+      table: {
+        alignment: 'center',
+      },
+    },
+    children: [
+      {
+        id: '1764771904874',
+        type: 'table-head',
+        children: [
+          {
+            id: '1764771904632',
+            type: 'table-row',
+            children: [
+              {
+                id: '1764771898285',
+                type: 'table-head-cell',
+                annotations: {
+                  tableCell: {
+                    border: {
+                      color: '#ddd',
+                      style: 'solid',
+                      width: '1px',
+                    },
+                    padding: '12px',
+                    textAlign: 'left',
+                    verticalAlign: 'middle',
+                  },
+                },
+                children: [
+                  {
+                    id: '1764771904876',
+                    annotations: {
+                      textStyle: 'paragraph',
+                      internalWrapper: true,
+                    },
+                    type: 'paragraph',
+                    nodes: [
+                      {
+                        id: '1764771904525',
+                        annotations: {
+                          plainText: true,
+                        },
+                        type: 'text',
+                        text: '',
+                      },
+                    ],
+                  },
+                ],
+              },
+              {
+                id: '1764771899530',
+                type: 'table-head-cell',
+                annotations: {
+                  tableCell: {
+                    border: {
+                      color: '#ddd',
+                      style: 'solid',
+                      width: '1px',
+                    },
+                    padding: '12px',
+                    textAlign: 'left',
+                    verticalAlign: 'middle',
+                  },
+                },
+                children: [
+                  {
+                    id: '1764771896940',
+                    annotations: {
+                      textStyle: 'paragraph',
+                      internalWrapper: true,
+                    },
+                    type: 'paragraph',
+                    nodes: [
+                      {
+                        id: '1764771903833',
+                        annotations: {
+                          plainText: true,
+                        },
+                        type: 'text',
+                        text: '',
+                      },
+                    ],
+                  },
+                ],
+              },
+            ],
+          },
+        ],
+      },
+      {
+        id: '1764771903981',
+        type: 'table-body',
+        children: [
+          {
+            id: '1764771905293',
+            type: 'table-row',
+            children: [
+              {
+                id: '1764771897032',
+                type: 'table-cell',
+                annotations: {
+                  tableCell: {
+                    border: {
+                      color: '#ddd',
+                      style: 'solid',
+                      width: '1px',
+                    },
+                    padding: '12px',
+                    textAlign: 'left',
+                    verticalAlign: 'middle',
+                  },
+                },
+                children: [
+                  {
+                    id: '1764771897783',
+                    annotations: {
+                      textStyle: 'paragraph',
+                      internalWrapper: true,
+                    },
+                    type: 'paragraph',
+                    nodes: [
+                      {
+                        id: '1764771906044',
+                        annotations: {
+                          plainText: true,
+                        },
+                        type: 'text',
+                        text: '',
+                      },
+                    ],
+                  },
+                ],
+              },
+              {
+                id: '1764771905790',
+                type: 'table-cell',
+                annotations: {
+                  tableCell: {
+                    border: {
+                      color: '#ddd',
+                      style: 'solid',
+                      width: '1px',
+                    },
+                    padding: '12px',
+                    textAlign: 'left',
+                    verticalAlign: 'middle',
+                  },
+                },
+                children: [
+                  {
+                    id: '1764771904845',
+                    annotations: {
+                      textStyle: 'paragraph',
+                      internalWrapper: true,
+                    },
+                    type: 'paragraph',
+                    nodes: [
+                      {
+                        id: '1764771904578',
+                        annotations: {
+                          plainText: true,
+                        },
+                        type: 'text',
+                        text: '',
+                      },
+                    ],
+                  },
+                ],
+              },
+            ],
+          },
+          {
+            id: '1764771904130',
+            type: 'table-row',
+            children: [
+              {
+                id: '1764771903073',
+                type: 'table-cell',
+                annotations: {
+                  tableCell: {
+                    border: {
+                      color: '#ddd',
+                      style: 'solid',
+                      width: '1px',
+                    },
+                    padding: '12px',
+                    textAlign: 'left',
+                    verticalAlign: 'middle',
+                  },
+                },
+                children: [
+                  {
+                    id: '1764771904171',
+                    annotations: {
+                      textStyle: 'paragraph',
+                      internalWrapper: true,
+                    },
+                    type: 'paragraph',
+                    nodes: [
+                      {
+                        id: '1764771905692',
+                        annotations: {
+                          plainText: true,
+                        },
+                        type: 'text',
+                        text: '',
+                      },
+                    ],
+                  },
+                ],
+              },
+              {
+                id: '1764771897331',
+                type: 'table-cell',
+                annotations: {
+                  tableCell: {
+                    border: {
+                      color: '#ddd',
+                      style: 'solid',
+                      width: '1px',
+                    },
+                    padding: '12px',
+                    textAlign: 'left',
+                    verticalAlign: 'middle',
+                  },
+                },
+                children: [
+                  {
+                    id: '1764771905732',
+                    annotations: {
+                      textStyle: 'paragraph',
+                      internalWrapper: true,
+                    },
+                    type: 'paragraph',
+                    nodes: [
+                      {
+                        id: '1764771903305',
+                        annotations: {
+                          plainText: true,
+                        },
+                        type: 'text',
+                        text: '',
+                      },
+                    ],
+                  },
+                ],
+              },
+            ],
+          },
+        ],
+      },
+    ],
+  };
+  let tableBlock;
+  beforeAll(() => {
+    new VegaRTETableExtension().initialExtension(null);
+  });
+  beforeEach(() => {
+    tableBlock = RTETableBlock.from(tableObj);
+  });
+  describe('table-block', () => {
+    it('toJSON', () => {
+      expect(tableBlock.toJSON()).toEqual(tableObj);
+    });
+    it('clone', () => {
+      const cloned = tableBlock.clone(undefined);
+      expect(cloned).toEqual(tableBlock);
+      expect(cloned).not.toBe(tableBlock);
+    });
+    it('isNotEmpty', () => {
+      expect(tableBlock.isNotEmpty()).toBe(true);
+    });
+    it('toHtml', () => {
+      const html = tableBlock.toHtml();
+      expect(html).toEqualHtml(`
+		<table class="v-rte--extension-table" style="border-collapse: collapse; margin: 0 auto;">
+		  <thead>
+			<tr>
+			  <th style="padding: 12px; border: solid 1px #ddd; text-align: left; vertical-align: middle; background-color: #f2f2f2;">
+				<p style="font-family: Inter; font-size: 16px; line-height: 22px; font-weight: 500; margin-top: 0px; margin-bottom: 0px;"></p>
+			  </th>
+			  <th style="padding: 12px; border: solid 1px #ddd; text-align: left; vertical-align: middle; background-color: #f2f2f2;">
+				<p style="font-family: Inter; font-size: 16px; line-height: 22px; font-weight: 500; margin-top: 0px; margin-bottom: 0px;"></p>
+			  </th>
+			</tr>
+		  </thead>
+		  <tbody>
+			<tr>
+			  <td style="padding: 12px; border: solid 1px #ddd; text-align: left; vertical-align: middle;">
+				<p style="font-family: Inter; font-size: 16px; line-height: 22px; font-weight: 500; margin-top: 0px; margin-bottom: 0px;"></p>
+			  </td>
+			  <td style="padding: 12px; border: solid 1px #ddd; text-align: left; vertical-align: middle;">
+				<p style="font-family: Inter; font-size: 16px; line-height: 22px; font-weight: 500; margin-top: 0px; margin-bottom: 0px;"></p>
+			  </td>
+			</tr>
+			<tr>
+			  <td style="padding: 12px; border: solid 1px #ddd; text-align: left; vertical-align: middle;">
+				<p style="font-family: Inter; font-size: 16px; line-height: 22px; font-weight: 500; margin-top: 0px; margin-bottom: 0px;"></p>
+			  </td>
+			  <td style="padding: 12px; border: solid 1px #ddd; text-align: left; vertical-align: middle;">
+				<p style="font-family: Inter; font-size: 16px; line-height: 22px; font-weight: 500; margin-top: 0px; margin-bottom: 0px;"></p>
+			  </td>
+			</tr>
+		  </tbody>
+		</table>
+		`);
+    });
+    it('getLastNode', () => {
+      expect(tableBlock.getLastNode().toJSON()).toEqual({
+        id: '1764771903305',
+        annotations: {
+          plainText: true,
+        },
+        type: 'text',
+        text: '',
+      });
+    });
+    it('getFirstNode should return first cell last node when no caption', () => {
+      expect(tableBlock.getFirstNode().toJSON()).toEqual({
+        id: '1764771904525',
+        annotations: {
+          plainText: true,
+        },
+        type: 'text',
+        text: '',
+      });
+    });
+    it('getFirstNode should return caption last node when caption exists', () => {
+      const tableWithCaption = Object.assign(Object.assign({}, tableObj), { children: [
+          {
+            id: 'caption-1',
+            type: 'table-caption',
+            children: [
+              {
+                id: 'paragraph-1',
+                type: 'paragraph',
+                nodes: [
+                  {
+                    id: 'text-1',
+                    type: 'text',
+                    text: 'Caption text',
+                  },
+                ],
+              },
+            ],
+          },
+          ...tableObj.children,
+        ] });
+      const tableBlockWithCaption = RTETableBlock.from(tableWithCaption);
+      expect(tableBlockWithCaption.getFirstNode().toJSON()).toEqual(expect.objectContaining({
+        type: 'text',
+        text: 'Caption text',
+      }));
+    });
+  });
+  describe('table-body-block', () => {
+    let tableBodyBlock;
+    beforeAll(() => {
+      tableBodyBlock = tableBlock.children.find((child) => child.type === 'table-body');
+    });
+    it('isNotEmpty', () => {
+      expect(RTETableBodyBlock.from({
+        id: '1',
+        type: 'table-body',
+        children: [],
+      }).isNotEmpty()).toBe(false);
+      expect(tableBodyBlock.isNotEmpty()).toBe(true);
+    });
+  });
+  describe('table-head-block', () => {
+    let tableHeadBlock;
+    beforeAll(() => {
+      tableHeadBlock = tableBlock.children.find((child) => child.type === 'table-head');
+    });
+    it('isNotEmpty', () => {
+      expect(RTETableHeadBlock.from({
+        id: '1',
+        type: 'table-head',
+        children: [],
+      }).isNotEmpty()).toBe(false);
+      expect(tableHeadBlock.isNotEmpty()).toBe(true);
+    });
+    it('getLastNode', () => {
+      expect(tableHeadBlock.getLastNode().toJSON()).toEqual({
+        id: '1764771903833',
+        type: 'text',
+        annotations: { plainText: true },
+        text: '',
+      });
+    });
+  });
+  describe('table-head-cell-block', () => {
+    let tableHeadBlock;
+    beforeAll(() => {
+      tableHeadBlock = tableBlock.children.find((child) => child.type === 'table-head');
+    });
+    it('isNotEmpty', () => {
+      const tableHeadCellBlock = tableHeadBlock.children[0]
+        .children[0];
+      expect(tableHeadCellBlock.isNotEmpty()).toBe(true);
+      expect(RTETableHeadCellBlock.from({
+        id: '1764771899530',
+        type: 'table-head-cell',
+        children: [],
+      }).isNotEmpty()).toBe(false);
+    });
+  });
+  describe('table-row-block', () => {
+    let tableBodyBlock;
+    beforeAll(() => {
+      tableBodyBlock = tableBlock.children.find((child) => child.type === 'table-body');
+    });
+    it('isNotEmpty', () => {
+      expect(tableBodyBlock.children[0].isNotEmpty()).toBe(true);
+      expect(RTETableRowBlock.from({
+        id: '1764771905293',
+        type: 'table-row',
+        children: [],
+      }).isNotEmpty()).toBe(false);
+    });
+  });
+  describe('table-cell-block', () => {
+    let tableBodyBlock;
+    beforeAll(() => {
+      tableBodyBlock = tableBlock.children.find((child) => child.type === 'table-body');
+    });
+    it('isNotEmpty', () => {
+      const tableCellBlock = tableBodyBlock.children[0]
+        .children[0];
+      expect(tableCellBlock.isNotEmpty()).toBe(true);
+      expect(RTETableCellBlock.from({
+        id: '1',
+        type: 'table-cell',
+        children: [],
+      }).isNotEmpty()).toBe(false);
+    });
+  });
+  describe('table-caption-block', () => {
+    it('clone', () => {
+      const captionJson = {
+        id: 'caption-1',
+        type: 'table-caption',
+        children: [
+          {
+            id: 'paragraph-1',
+            type: 'paragraph',
+            nodes: [
+              {
+                id: 'text-1',
+                type: 'text',
+                text: 'Caption text',
+              },
+            ],
+          },
+        ],
+      };
+      const tableWithCaption = Object.assign(Object.assign({}, tableObj), { children: [
+          {
+            id: 'caption-1',
+            type: 'table-caption',
+            children: captionJson.children,
+          },
+          ...tableObj.children,
+        ] });
+      const tableBlockWithCaption = RTETableBlock.from(tableWithCaption);
+      const captionBlock = tableBlockWithCaption.getCaption();
+      const cloned = captionBlock.clone(tableBlockWithCaption);
+      expect(cloned).toEqual(captionBlock);
+      expect(cloned).not.toBe(captionBlock);
+      expect(cloned.parent).toBe(tableBlockWithCaption);
+    });
+    it('toHtml', () => {
+      const captionJson = {
+        id: 'caption-1',
+        type: 'table-caption',
+        children: [
+          {
+            id: 'paragraph-1',
+            type: 'paragraph',
+            nodes: [
+              {
+                id: 'text-1',
+                type: 'text',
+                text: 'Caption text',
+              },
+            ],
+          },
+        ],
+      };
+      const captionBlock = RTETableCaptionBlock.from(captionJson);
+      const html = captionBlock.toHtml();
+      expect(html).toEqualHtml(`
+				<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; font-weight: 500; margin-top: 0px; margin-bottom: 0px;">
+					<span>
+					  Caption text
+					</span>
+				  </p>
+				</caption>
+			`);
+    });
+  });
+});