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

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

@@ -0,0 +1,415 @@
+import { TableHeadCellAnnotationHandler } from '../../../../extensions/table/annotation-handler/table-head-cell-annotation-handler';
+import { RTETableHeadCellBlock } from '../../../../extensions/table/dto/table-head-cell-block';
+describe('TableHeadCellAnnotationHandler', () => {
+  let handler;
+  beforeEach(() => {
+    handler = new TableHeadCellAnnotationHandler();
+  });
+  describe('canHandle', () => {
+    it('should return true for RTETableHeadCellBlock', () => {
+      expect(handler.canHandle(RTETableHeadCellBlock)).toBe(true);
+    });
+    it('should return false for other DTOs', () => {
+      const mockDto = { name: 'RTETextBlock' };
+      expect(handler.canHandle(mockDto)).toBe(false);
+    });
+  });
+  describe('handle', () => {
+    it('should return empty object when no cell annotations are present', () => {
+      const element = document.createElement('th');
+      const result = handler.handle(element);
+      expect(result).toEqual({});
+    });
+    it('should extract background color from inline style', () => {
+      const element = document.createElement('th');
+      element.style.backgroundColor = '#e0e0e0';
+      const result = handler.handle(element);
+      expect(result).toEqual({
+        tableCell: {
+          backgroundColor: '#e0e0e0',
+        },
+      });
+    });
+    it('should extract padding from inline style', () => {
+      const element = document.createElement('th');
+      element.style.padding = '12px 16px';
+      const result = handler.handle(element);
+      expect(result).toEqual({
+        tableCell: {
+          padding: '12px 16px',
+        },
+      });
+    });
+    it('should extract border from inline style', () => {
+      const element = document.createElement('th');
+      element.style.border = 'solid 1px #000';
+      const result = handler.handle(element);
+      expect(result).toEqual({
+        tableCell: {
+          border: {
+            style: 'solid',
+            width: '1px',
+            color: '#000',
+          },
+        },
+      });
+    });
+    it('should extract border from individual properties', () => {
+      const element = document.createElement('th');
+      element.style.borderStyle = 'double';
+      element.style.borderWidth = '4px';
+      element.style.borderColor = '#333';
+      const result = handler.handle(element);
+      expect(result).toEqual({
+        tableCell: {
+          border: {
+            style: 'double',
+            width: '4px',
+            color: '#333',
+          },
+        },
+      });
+    });
+    it('should extract width from inline style', () => {
+      const element = document.createElement('th');
+      element.style.width = '180px';
+      const result = handler.handle(element);
+      expect(result).toEqual({
+        tableCell: {
+          width: '180px',
+        },
+      });
+    });
+    it('should extract width from attribute and convert numeric to pixels', () => {
+      const element = document.createElement('th');
+      element.setAttribute('width', '120');
+      const result = handler.handle(element);
+      expect(result).toEqual({
+        tableCell: {
+          width: '120px',
+        },
+      });
+      expect(element.getAttribute('width')).toBe('120');
+    });
+    it('should extract width from attribute with percentage', () => {
+      const element = document.createElement('th');
+      element.setAttribute('width', '25%');
+      const result = handler.handle(element);
+      expect(result).toEqual({
+        tableCell: {
+          width: '25%',
+        },
+      });
+    });
+    it('should extract height from inline style', () => {
+      const element = document.createElement('th');
+      element.style.height = '50px';
+      const result = handler.handle(element);
+      expect(result).toEqual({
+        tableCell: {
+          height: '50px',
+        },
+      });
+    });
+    it('should extract height from attribute and convert numeric to pixels', () => {
+      const element = document.createElement('th');
+      element.setAttribute('height', '60');
+      const result = handler.handle(element);
+      expect(result).toEqual({
+        tableCell: {
+          height: '60px',
+        },
+      });
+      expect(element.getAttribute('height')).toBe('60');
+    });
+    it('should extract height from attribute with units as-is', () => {
+      const element = document.createElement('th');
+      element.setAttribute('height', '75px');
+      const result = handler.handle(element);
+      expect(result).toEqual({
+        tableCell: {
+          height: '75px',
+        },
+      });
+    });
+    it('should extract text alignment from inline style', () => {
+      const element = document.createElement('th');
+      element.style.textAlign = 'center';
+      const result = handler.handle(element);
+      expect(result).toEqual({
+        tableCell: {
+          textAlign: 'center',
+        },
+      });
+    });
+    it('should extract text alignment from align attribute', () => {
+      const element = document.createElement('th');
+      element.setAttribute('align', 'left');
+      const result = handler.handle(element);
+      expect(result).toEqual({
+        tableCell: {
+          textAlign: 'left',
+        },
+      });
+      expect(element.getAttribute('align')).toBe('left');
+    });
+    it('should extract vertical alignment from inline style', () => {
+      const element = document.createElement('th');
+      element.style.verticalAlign = 'bottom';
+      const result = handler.handle(element);
+      expect(result).toEqual({
+        tableCell: {
+          verticalAlign: 'bottom',
+        },
+      });
+    });
+    it('should extract multiple annotations', () => {
+      const element = document.createElement('th');
+      element.style.backgroundColor = '#d0d0d0';
+      element.style.padding = '10px';
+      element.style.border = 'solid 2px #555';
+      element.style.width = '200px';
+      element.style.height = '40px';
+      element.style.textAlign = 'center';
+      element.style.verticalAlign = 'middle';
+      const result = handler.handle(element);
+      expect(result).toEqual({
+        tableCell: {
+          backgroundColor: '#d0d0d0',
+          padding: '10px',
+          border: {
+            style: 'solid',
+            width: '2px',
+            color: '#555',
+          },
+          width: '200px',
+          height: '40px',
+          textAlign: 'center',
+          verticalAlign: 'middle',
+        },
+      });
+    });
+    it('should handle border with rgba color', () => {
+      const element = document.createElement('th');
+      element.style.border = 'solid 1px rgba(0, 0, 0, 0.5)';
+      const result = handler.handle(element);
+      expect(result).toEqual({
+        tableCell: {
+          border: {
+            style: 'solid',
+            width: '1px',
+            color: 'rgba(0, 0, 0, 0.5)',
+          },
+        },
+      });
+    });
+    it('should prioritize inline style over attributes', () => {
+      const element = document.createElement('th');
+      element.style.width = '400px';
+      element.setAttribute('width', '300');
+      element.style.textAlign = 'right';
+      element.setAttribute('align', 'left');
+      const result = handler.handle(element);
+      expect(result).toEqual({
+        tableCell: {
+          width: '400px',
+          textAlign: 'right',
+        },
+      });
+    });
+    it('should handle all text alignment values', () => {
+      const alignments = [
+        'left',
+        'center',
+        'right',
+        'justify',
+      ];
+      alignments.forEach((align) => {
+        const element = document.createElement('th');
+        element.style.textAlign = align;
+        const result = handler.handle(element);
+        expect(result).toEqual({
+          tableCell: {
+            textAlign: align,
+          },
+        });
+      });
+    });
+    it('should handle all vertical alignment values', () => {
+      const alignments = ['top', 'middle', 'bottom'];
+      alignments.forEach((align) => {
+        const element = document.createElement('th');
+        element.style.verticalAlign = align;
+        const result = handler.handle(element);
+        expect(result).toEqual({
+          tableCell: {
+            verticalAlign: align,
+          },
+        });
+      });
+    });
+    it('should ignore invalid text alignment values', () => {
+      const element = document.createElement('th');
+      element.style.textAlign = 'invalid';
+      const result = handler.handle(element);
+      expect(result).toEqual({});
+    });
+    it('should ignore invalid vertical alignment values', () => {
+      const element = document.createElement('th');
+      element.style.verticalAlign = 'baseline';
+      const result = handler.handle(element);
+      expect(result).toEqual({});
+    });
+    it('should handle mixed attributes and styles', () => {
+      const element = document.createElement('th');
+      element.style.backgroundColor = 'white';
+      element.setAttribute('width', '100');
+      element.style.textAlign = 'center';
+      const result = handler.handle(element);
+      expect(result).toEqual({
+        tableCell: {
+          backgroundColor: 'white',
+          width: '100px',
+          textAlign: 'center',
+        },
+      });
+    });
+  });
+  describe('inheritance from TableCellAnnotationHandler', () => {
+    it('should inherit all extraction methods from TableCellAnnotationHandler', () => {
+      const element = document.createElement('th');
+      element.style.padding = '10px';
+      element.style.border = 'solid 1px #ddd';
+      element.style.width = '150px';
+      element.style.height = '50px';
+      element.style.textAlign = 'left';
+      element.style.verticalAlign = 'top';
+      element.style.backgroundColor = '#f5f5f5';
+      const result = handler.handle(element);
+      // Should extract all cell properties using inherited methods
+      expect(result).toEqual({
+        tableCell: {
+          padding: '10px',
+          border: {
+            style: 'solid',
+            width: '1px',
+            color: '#ddd',
+          },
+          width: '150px',
+          height: '50px',
+          textAlign: 'left',
+          verticalAlign: 'top',
+          backgroundColor: '#f5f5f5',
+        },
+      });
+    });
+    it('should only differ from TableCellAnnotationHandler in canHandle check', () => {
+      const thElement = document.createElement('th');
+      const tdElement = document.createElement('td');
+      thElement.style.padding = '10px';
+      tdElement.style.padding = '10px';
+      // Both should extract the same way
+      const thResult = handler.handle(thElement);
+      const tdResult = handler.handle(tdElement);
+      expect(thResult).toEqual(tdResult);
+      expect(thResult).toEqual({
+        tableCell: {
+          padding: '10px',
+        },
+      });
+    });
+    it('should use inherited protected methods for extraction', () => {
+      var _a;
+      // Test that protected methods are accessible and working
+      const element = document.createElement('th');
+      // Test border extraction (inherited protected method)
+      element.style.border = 'dashed 2px rgba(0, 0, 0, 0.5)';
+      const borderResult = handler.handle(element);
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      expect((_a = borderResult.tableCell) === null || _a === void 0 ? void 0 : _a.border).toEqual({
+        style: 'dashed',
+        width: '2px',
+        color: 'rgba(0, 0, 0, 0.5)',
+      });
+    });
+    it('should handle all text alignment values like parent class', () => {
+      const alignments = [
+        'left',
+        'center',
+        'right',
+        'justify',
+      ];
+      alignments.forEach((align) => {
+        const element = document.createElement('th');
+        element.style.textAlign = align;
+        const result = handler.handle(element);
+        expect(result).toEqual({
+          tableCell: {
+            textAlign: align,
+          },
+        });
+      });
+    });
+    it('should handle all vertical alignment values like parent class', () => {
+      const alignments = ['top', 'middle', 'bottom'];
+      alignments.forEach((align) => {
+        const element = document.createElement('th');
+        element.style.verticalAlign = align;
+        const result = handler.handle(element);
+        expect(result).toEqual({
+          tableCell: {
+            verticalAlign: align,
+          },
+        });
+      });
+    });
+    it('should extract border from borderTop properties when general properties are not set', () => {
+      const element = document.createElement('th');
+      element.style.borderTopStyle = 'groove';
+      element.style.borderTopWidth = '4px';
+      element.style.borderTopColor = '#aaa';
+      const result = handler.handle(element);
+      expect(result).toEqual({
+        tableCell: {
+          border: {
+            style: 'groove',
+            width: '4px',
+            color: '#aaa',
+          },
+        },
+      });
+    });
+    describe('border edge cases inherited from parent', () => {
+      it('should handle invalid border string gracefully', () => {
+        const element = document.createElement('th');
+        element.style.border = 'invalid';
+        const result = handler.handle(element);
+        expect(result).toEqual({});
+      });
+      it('should handle border with only 2 parts', () => {
+        const element = document.createElement('th');
+        element.style.border = 'double 3px';
+        const result = handler.handle(element);
+        expect(result).toEqual({});
+      });
+      it('should handle border with only spaces', () => {
+        const element = document.createElement('th');
+        element.style.border = '   ';
+        const result = handler.handle(element);
+        expect(result).toEqual({});
+      });
+      it('should handle border with single word', () => {
+        const element = document.createElement('th');
+        element.style.border = 'ridge';
+        const result = handler.handle(element);
+        expect(result).toEqual({});
+      });
+      it('should handle empty border string', () => {
+        const element = document.createElement('th');
+        element.style.border = '';
+        const result = handler.handle(element);
+        expect(result).toEqual({});
+      });
+    });
+  });
+});

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

@@ -0,0 +1,99 @@
+import { CaptionOperationEventHandler } from '../../../extensions/table/setting-event-handlers/caption-operation';
+import { TableSettingType } from '../../../extensions/table/setting-event-handlers/setting-event-handler.abstract';
+import { RTETableBlock } from '../../../extensions/table/dto/table-block';
+import { RTETableCaptionBlock, } from '../../../extensions/table/dto/table-caption-block';
+/**
+ * Lightweight helper to create a fresh table block with optional caption attached.
+ *
+ * @param {RTETableCaptionBlock | null | undefined} caption - Optional caption DTO used to seed the table.
+ * @returns {RTETableBlock} Table block instance wired with the provided caption.
+ */
+const createTableBlock = (caption) => {
+  const tableBlock = new RTETableBlock('table-id');
+  if (caption) {
+    tableBlock.setCaption(caption);
+  }
+  return tableBlock;
+};
+/**
+ * Creates a caption handler stub with cursor-sync side effects mocked out.
+ *
+ * @returns {CaptionOperationEventHandler} Configured handler ready for unit tests.
+ */
+const createHandler = () => {
+  const handler = new CaptionOperationEventHandler();
+  handler.syncCursorPosition = jest.fn();
+  return handler;
+};
+describe('CaptionOperationEventHandler', () => {
+  const extensionContext = {};
+  /**
+   * Guards that the provided block is a text block.
+   *
+   * @param {VegaRTEContentBlock | undefined} block - Candidate caption child.
+   * @returns {block is VegaRTETextBlock} True when the block exposes `nodes`.
+   */
+  const isTextBlock = (block) => Boolean(block && 'nodes' in block);
+  /**
+   * Extracts the first caption text node, if present.
+   *
+   * @param {VegaRTETableCaptionBlock | null | undefined} caption - Caption DTO emitted by `toJSON`.
+   * @returns {string | undefined} Placeholder or undefined when caption lacks text.
+   */
+  const getFirstCaptionText = (caption) => {
+    var _a, _b, _c;
+    const firstChild = (_a = caption === null || caption === void 0 ? void 0 : caption.children) === null || _a === void 0 ? void 0 : _a[0];
+    if (isTextBlock(firstChild)) {
+      return (_c = (_b = firstChild.nodes) === null || _b === void 0 ? void 0 : _b[0]) === null || _c === void 0 ? void 0 : _c.text;
+    }
+    return undefined;
+  };
+  it('creates captions pre-filled with placeholder guidance', () => {
+    var _a;
+    const handler = createHandler();
+    const tableBlock = createTableBlock();
+    handler.execute([TableSettingType.CAPTION, 'rte-table-caption'], extensionContext, tableBlock);
+    const captionJson = (_a = tableBlock.getCaption()) === null || _a === void 0 ? void 0 : _a.toJSON();
+    expect(getFirstCaptionText(captionJson)).toBe('');
+  });
+  it('restores the placeholder when caption content has been cleared', () => {
+    var _a;
+    const handler = createHandler();
+    const emptyCaption = RTETableCaptionBlock.from({
+      id: 'caption-id',
+      type: 'table-caption',
+      children: [],
+    });
+    emptyCaption.children = [];
+    const tableBlock = createTableBlock(emptyCaption);
+    handler.execute([TableSettingType.CAPTION, 'rte-table-caption'], extensionContext, tableBlock);
+    const captionJson = (_a = tableBlock.getCaption()) === null || _a === void 0 ? void 0 : _a.toJSON();
+    expect(getFirstCaptionText(captionJson)).toBe('');
+  });
+  it('preserves existing caption content when it is already populated', () => {
+    var _a;
+    const handler = createHandler();
+    const hydratedCaption = RTETableCaptionBlock.from({
+      id: 'caption-id',
+      type: 'table-caption',
+      children: [
+        {
+          id: 'paragraph-id',
+          type: 'paragraph',
+          nodes: [
+            {
+              id: 'text-id',
+              type: 'text',
+              text: 'Custom caption content',
+            },
+          ],
+        },
+      ],
+    });
+    const tableBlock = createTableBlock(hydratedCaption);
+    handler.execute([TableSettingType.CAPTION, 'rte-table-caption'], extensionContext, tableBlock);
+    expect(tableBlock.getCaption()).toBe(hydratedCaption);
+    const captionJson = (_a = tableBlock.getCaption()) === null || _a === void 0 ? void 0 : _a.toJSON();
+    expect(getFirstCaptionText(captionJson)).toBe('Custom caption content');
+  });
+});

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

@@ -0,0 +1,89 @@
+import { RTETableExtensionAnnotationTypeEnum, RTETableAnnotation, } from '../../../extensions/table/annotations/table-annotation';
+import { RTETableBlock } from '../../../extensions/table/dto/table-block';
+import { RTETableAnnotationsAction } from '../../../extensions/table/actions/table-annotations-action';
+describe('RTETableAnnotation', () => {
+  test('defaults width to 100% and includes border collapse in style', () => {
+    const annotation = new RTETableAnnotation();
+    const style = annotation.renderStyle();
+    expect(style).toEqual({ borderCollapse: 'collapse', margin: '0 auto' });
+  });
+  test('renderStyle handles alignment correctly', () => {
+    const leftAligned = new RTETableAnnotation({ alignment: 'left' });
+    expect(leftAligned.renderStyle().margin).toBe('0');
+    const rightAligned = new RTETableAnnotation({ alignment: 'right' });
+    expect(rightAligned.renderStyle().margin).toBe('0 0 0 auto');
+    const centerAligned = new RTETableAnnotation({ alignment: 'center' });
+    expect(centerAligned.renderStyle().margin).toBe('0 auto');
+  });
+  test('renderStyle merges provided values', () => {
+    const annotation = new RTETableAnnotation({
+      backgroundColor: '#fafafa',
+      border: { style: 'solid', width: '2px', color: '#123' },
+      height: '200px',
+      alignment: 'center',
+    });
+    expect(annotation.renderStyle()).toEqual({
+      borderCollapse: 'collapse',
+      backgroundColor: '#fafafa',
+      border: 'solid 2px #123',
+      height: '200px',
+      margin: '0 auto',
+    });
+  });
+  test('borderStr handles missing and provided borders', () => {
+    expect(new RTETableAnnotation({ border: undefined }).borderStr).toBeNull();
+    expect(new RTETableAnnotation({
+      border: { style: 'dotted', width: '3px', color: '#222' },
+    }).borderStr).toBe('dotted 3px #222');
+  });
+  test('clone duplicates all values', () => {
+    const original = new RTETableAnnotation({
+      backgroundColor: '#0f0',
+      border: { style: 'dashed', width: '1px', color: '#000' },
+      height: '50px',
+      alignment: 'right',
+    });
+    const clone = original.clone();
+    expect(clone).not.toBe(original);
+    expect(clone).toEqual(original);
+  });
+  test('from returns tuple with type constant', () => {
+    const [type, annotation] = RTETableAnnotation.from({
+      backgroundColor: '#abc',
+    });
+    expect(type).toBe(RTETableExtensionAnnotationTypeEnum.TABLE);
+    expect(annotation).toBeInstanceOf(RTETableAnnotation);
+    expect(annotation.backgroundColor).toBe('#abc');
+  });
+  test('toJSON filters undefined values', () => {
+    const annotation = new RTETableAnnotation({
+      backgroundColor: '#f00',
+      height: '20px',
+      border: undefined,
+    });
+    expect(annotation.toJSON()).toEqual({
+      table: {
+        backgroundColor: '#f00',
+        height: '20px',
+        alignment: 'center',
+      },
+    });
+  });
+  test('renderClass returns the extension helper class', () => {
+    expect(new RTETableAnnotation().renderClass()).toBe('v-rte--extension-table');
+  });
+  test('should apply annotation correctly', () => {
+    const tableBlock = new RTETableBlock('table-id');
+    tableBlock.apply(new RTETableAnnotationsAction({
+      backgroundColor: '#3c3ffa',
+    }));
+    expect(tableBlock.toJSON()).toEqual({
+      id: 'table-id',
+      type: 'table-block',
+      annotations: {
+        table: { backgroundColor: '#3c3ffa', alignment: 'center' },
+      },
+      children: [],
+    });
+  });
+});

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

@@ -0,0 +1,79 @@
+import { RTETableCaptionAnnotation } from '../../../extensions/table/annotations/table-caption-annotation';
+import { RTETableExtensionAnnotationTypeEnum } from '../../../extensions/table/annotations/table-annotation';
+describe('RTETableCaptionAnnotation', () => {
+  it('should have CAPTION type', () => {
+    const annotation = new RTETableCaptionAnnotation();
+    expect(annotation.type).toBe(RTETableExtensionAnnotationTypeEnum.CAPTION);
+  });
+  it('clone should return a new instance with same type', () => {
+    const annotation = new RTETableCaptionAnnotation();
+    const cloned = annotation.clone();
+    expect(cloned).toBeInstanceOf(RTETableCaptionAnnotation);
+    expect(cloned).not.toBe(annotation);
+    expect(cloned.type).toBe(annotation.type);
+  });
+  describe('renderClass', () => {
+    it('should return CSS class when not standalone', () => {
+      const annotation = new RTETableCaptionAnnotation();
+      const context = { standalone: false };
+      const className = annotation.renderClass(context);
+      expect(className).toBe('v-rte--extension-table-caption');
+    });
+    it('should return CSS class when context is undefined', () => {
+      const annotation = new RTETableCaptionAnnotation();
+      const className = annotation.renderClass();
+      expect(className).toBe('v-rte--extension-table-caption');
+    });
+    it('should return null when standalone', () => {
+      const annotation = new RTETableCaptionAnnotation();
+      const context = { standalone: true };
+      const className = annotation.renderClass(context);
+      expect(className).toBeNull();
+    });
+  });
+  describe('renderStyle', () => {
+    it('should return null when not standalone', () => {
+      const annotation = new RTETableCaptionAnnotation();
+      const context = { standalone: false };
+      const style = annotation.renderStyle(context);
+      expect(style).toBeNull();
+    });
+    it('should return null when context is undefined', () => {
+      const annotation = new RTETableCaptionAnnotation();
+      const style = annotation.renderStyle();
+      expect(style).toBeNull();
+    });
+    it('should return correct style when standalone', () => {
+      const annotation = new RTETableCaptionAnnotation();
+      const context = { standalone: true };
+      const style = annotation.renderStyle(context);
+      expect(style).toEqual({
+        padding: '8px',
+        border: '1px solid #ddd',
+        borderBottom: 'none',
+        backgroundColor: '#f7f7f7',
+        position: 'relative',
+        textAlign: 'center',
+        minHeight: '22px',
+      });
+    });
+  });
+  describe('toJSON', () => {
+    it('should return caption style JSON', () => {
+      const annotation = new RTETableCaptionAnnotation();
+      const json = annotation.toJSON();
+      expect(json).not.toBeNull();
+      expect(json).toEqual({
+        caption: {
+          padding: '8px 12px',
+          border: '1px solid #ddd',
+          borderBottom: 'none',
+          backgroundColor: '#f7f7f7',
+          position: 'relative',
+          textAlign: 'center',
+          minHeight: '22px',
+        },
+      });
+    });
+  });
+});