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

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

@@ -0,0 +1,164 @@
+import htmlElementToAnnotationGenerator from '../../../../slimmers/controllers/helper/element-to-dto-strategy/annotation-handler/html-element-to-annotation-generator';
+import { AnnotationGeneratorStrategyAbstract } from '../../../../slimmers/controllers/helper/element-to-dto-strategy/annotation-handler/annotation-generator-strategy.abstract';
+import { TableAnnotationHandler } from '../../../../extensions/table/annotation-handler/table-annotation-handler';
+import { TableCellAnnotationHandler } from '../../../../extensions/table/annotation-handler/table-cell-annotation-handler';
+import { RTETableBlock } from '../../../../extensions/table/dto/table-block';
+import { RTETableCellBlock } from '../../../../extensions/table/dto/table-cell-block';
+// Mock custom handler for testing
+class MockCustomAnnotationHandler extends AnnotationGeneratorStrategyAbstract {
+  canHandle(targetDto) {
+    return targetDto.name === 'MockDTO';
+  }
+  handle() {
+    return {
+      custom: {
+        test: 'value',
+      },
+    };
+  }
+}
+describe('Annotation Handler Registration System', () => {
+  // Helper function to create an element with getAttributeNames mock
+  function createMockElement(tagName) {
+    const element = document.createElement(tagName);
+    // Mock getAttributeNames for JSDOM compatibility
+    if (!element.getAttributeNames) {
+      element.getAttributeNames = function () {
+        const attrs = [];
+        for (let i = 0; i < this.attributes.length; i++) {
+          attrs.push(this.attributes[i].name);
+        }
+        return attrs;
+      };
+    }
+    return element;
+  }
+  describe('htmlElementToAnnotationGenerator.registerHandler', () => {
+    it('should allow registering custom annotation handlers', () => {
+      const customHandler = new MockCustomAnnotationHandler();
+      const mockDto = { name: 'MockDTO' };
+      // Register the custom handler
+      htmlElementToAnnotationGenerator.registerHandler(customHandler);
+      // The handler should be registered and functional
+      const element = createMockElement('div');
+      const result = htmlElementToAnnotationGenerator.generate(mockDto, element);
+      expect(result).toEqual({
+        custom: {
+          test: 'value',
+        },
+      });
+    });
+    it('should prioritize custom handlers over default handlers', () => {
+      // Create a custom handler that overrides default behavior for a specific DTO
+      class OverrideHandler extends AnnotationGeneratorStrategyAbstract {
+        canHandle(targetDto) {
+          return targetDto.name === 'OverrideTestDTO';
+        }
+        handle() {
+          return {
+            override: {
+              customBehavior: true,
+            },
+          };
+        }
+      }
+      const overrideHandler = new OverrideHandler();
+      htmlElementToAnnotationGenerator.registerHandler(overrideHandler);
+      const element = createMockElement('div');
+      const result = htmlElementToAnnotationGenerator.generate({ name: 'OverrideTestDTO' }, element);
+      // Should get the override handler result since custom handlers run first
+      expect(result).toHaveProperty('override');
+      expect(result).toEqual({
+        override: {
+          customBehavior: true,
+        },
+      });
+    });
+    it('should allow multiple custom handlers to be registered', () => {
+      class Handler1 extends AnnotationGeneratorStrategyAbstract {
+        canHandle(targetDto) {
+          return targetDto.name === 'Handler1DTO';
+        }
+        handle() {
+          return { handler1: true };
+        }
+      }
+      class Handler2 extends AnnotationGeneratorStrategyAbstract {
+        canHandle(targetDto) {
+          return targetDto.name === 'Handler2DTO';
+        }
+        handle() {
+          return { handler2: true };
+        }
+      }
+      htmlElementToAnnotationGenerator.registerHandler(new Handler1());
+      htmlElementToAnnotationGenerator.registerHandler(new Handler2());
+      const element = createMockElement('div');
+      const result1 = htmlElementToAnnotationGenerator.generate({ name: 'Handler1DTO' }, element);
+      expect(result1).toEqual({ handler1: true });
+      const result2 = htmlElementToAnnotationGenerator.generate({ name: 'Handler2DTO' }, element);
+      expect(result2).toEqual({ handler2: true });
+    });
+  });
+  describe('Table Extension Handler Registration', () => {
+    // Ensure table handlers are registered before running these tests
+    beforeAll(() => {
+      htmlElementToAnnotationGenerator.registerHandler(new TableAnnotationHandler());
+      htmlElementToAnnotationGenerator.registerHandler(new TableCellAnnotationHandler());
+    });
+    it('should have table annotation handlers registered', () => {
+      const tableHandler = new TableAnnotationHandler();
+      expect(tableHandler.canHandle(RTETableBlock)).toBe(true);
+    });
+    it('should have table cell annotation handler registered', () => {
+      const cellHandler = new TableCellAnnotationHandler();
+      expect(cellHandler.canHandle(RTETableCellBlock)).toBe(true);
+    });
+    it('should allow table handlers to process table elements', () => {
+      const element = createMockElement('table');
+      element.style.width = '100%';
+      element.style.backgroundColor = 'white';
+      const result = htmlElementToAnnotationGenerator.generate(RTETableBlock, element);
+      expect(result).toHaveProperty('table');
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      expect(result.table).toHaveProperty('width', '100%');
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      expect(result.table).toHaveProperty('backgroundColor', 'white');
+    });
+    it('should allow cell handlers to process cell elements', () => {
+      const element = createMockElement('td');
+      element.style.padding = '10px';
+      element.style.textAlign = 'center';
+      const result = htmlElementToAnnotationGenerator.generate(RTETableCellBlock, element);
+      expect(result).toHaveProperty('tableCell');
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      expect(result.tableCell).toHaveProperty('padding', '10px');
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      expect(result.tableCell).toHaveProperty('textAlign', 'center');
+    });
+  });
+  describe('Handler Priority and Execution Order', () => {
+    it('should execute custom handlers before default handlers', () => {
+      const executionOrder = [];
+      class TrackingHandler extends AnnotationGeneratorStrategyAbstract {
+        constructor(name) {
+          super();
+          this.name = name;
+        }
+        canHandle() {
+          executionOrder.push(this.name);
+          return false; // Don't actually handle
+        }
+        handle() {
+          return {};
+        }
+      }
+      const customHandler = new TrackingHandler('custom');
+      htmlElementToAnnotationGenerator.registerHandler(customHandler);
+      const element = createMockElement('div');
+      htmlElementToAnnotationGenerator.generate({ name: 'TestDTO' }, element);
+      // Custom handler should be checked first
+      expect(executionOrder[0]).toBe('custom');
+    });
+  });
+});

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

@@ -0,0 +1,288 @@
+import { TableAnnotationHandler } from '../../../../extensions/table/annotation-handler/table-annotation-handler';
+import { RTETableBlock } from '../../../../extensions/table/dto/table-block';
+import { setBorder } from './table-cell-annotation-handler.test';
+describe('TableAnnotationHandler', () => {
+  let handler;
+  beforeEach(() => {
+    handler = new TableAnnotationHandler();
+  });
+  describe('canHandle', () => {
+    it('should return true for RTETableBlock', () => {
+      expect(handler.canHandle(RTETableBlock)).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 table annotations are present', () => {
+      const element = document.createElement('table');
+      const result = handler.handle(element);
+      expect(result).toEqual({});
+    });
+    it('should extract background color from inline style', () => {
+      const element = document.createElement('table');
+      element.style.backgroundColor = 'rgb(252, 252, 252)';
+      const result = handler.handle(element);
+      expect(result).toEqual({
+        table: {
+          backgroundColor: 'white',
+        },
+      });
+    });
+    it('should extract border from individual properties', () => {
+      const element = document.createElement('table');
+      element.style.borderStyle = 'dashed';
+      element.style.borderWidth = '1px';
+      element.style.borderColor = 'rgb(4, 4, 28)';
+      const result = handler.handle(element);
+      expect(result).toEqual({
+        table: {
+          border: {
+            style: 'dashed',
+            width: '1px',
+            color: 'black',
+          },
+        },
+      });
+    });
+    it('should extract width from inline style', () => {
+      const element = document.createElement('table');
+      element.style.width = '100%';
+      const result = handler.handle(element);
+      expect(result).toEqual({
+        table: {
+          width: '100%',
+        },
+      });
+    });
+    it('should extract width from attribute', () => {
+      const element = document.createElement('table');
+      element.setAttribute('width', '500');
+      const result = handler.handle(element);
+      expect(result).toEqual({
+        table: {
+          width: '500px',
+        },
+      });
+    });
+    it('should extract height from inline style', () => {
+      const element = document.createElement('table');
+      element.style.height = '300px';
+      const result = handler.handle(element);
+      expect(result).toEqual({
+        table: {
+          height: '300px',
+        },
+      });
+    });
+    it('should extract height from attribute', () => {
+      const element = document.createElement('table');
+      element.setAttribute('height', '200');
+      const result = handler.handle(element);
+      expect(result).toEqual({
+        table: {
+          height: '200px',
+        },
+      });
+    });
+    it('should extract height from attribute with units as-is', () => {
+      const element = document.createElement('table');
+      element.setAttribute('height', '250px');
+      const result = handler.handle(element);
+      expect(result).toEqual({
+        table: {
+          height: '250px',
+        },
+      });
+    });
+    it('should extract alignment from class', () => {
+      const element = document.createElement('table');
+      element.classList.add('v-rte--extension-table-align-center');
+      const result = handler.handle(element);
+      expect(result).toEqual({
+        table: {
+          alignment: 'center',
+        },
+      });
+    });
+    it('should extract left alignment from class', () => {
+      const element = document.createElement('table');
+      element.classList.add('v-rte--extension-table-align-left');
+      const result = handler.handle(element);
+      expect(result).toEqual({
+        table: {
+          alignment: 'left',
+        },
+      });
+    });
+    it('should extract right alignment from class', () => {
+      const element = document.createElement('table');
+      element.classList.add('v-rte--extension-table-align-right');
+      const result = handler.handle(element);
+      expect(result).toEqual({
+        table: {
+          alignment: 'right',
+        },
+      });
+    });
+    it('should extract center alignment from margin style', () => {
+      const element = document.createElement('table');
+      element.style.marginLeft = 'auto';
+      element.style.marginRight = 'auto';
+      const result = handler.handle(element);
+      expect(result).toEqual({
+        table: {
+          alignment: 'center',
+        },
+      });
+    });
+    it('should extract left alignment from margin style', () => {
+      const element = document.createElement('table');
+      element.style.marginLeft = '0';
+      const result = handler.handle(element);
+      expect(result).toEqual({
+        table: {
+          alignment: 'left',
+        },
+      });
+    });
+    it('should extract right alignment from margin style', () => {
+      const element = document.createElement('table');
+      element.style.marginRight = '0';
+      const result = handler.handle(element);
+      expect(result).toEqual({
+        table: {
+          alignment: 'right',
+        },
+      });
+    });
+    it('should extract alignment from attribute', () => {
+      const element = document.createElement('table');
+      element.setAttribute('align', 'center');
+      const result = handler.handle(element);
+      expect(result).toEqual({
+        table: {
+          alignment: 'center',
+        },
+      });
+    });
+    it('should extract multiple annotations', () => {
+      const element = document.createElement('table');
+      element.style.backgroundColor = 'white';
+      element.style.width = '100%';
+      setBorder(element, 'solid 1px rgb(4, 4, 28)');
+      element.classList.add('v-rte--extension-table-align-center');
+      const result = handler.handle(element);
+      expect(result).toEqual({
+        table: {
+          backgroundColor: 'white',
+          border: {
+            style: 'solid',
+            width: '1px',
+            color: 'black',
+          },
+          width: '100%',
+          alignment: 'center',
+        },
+      });
+    });
+    it('should handle border with rgb color', () => {
+      const element = document.createElement('table');
+      setBorder(element, 'solid 1px rgb(4, 4, 28)');
+      const result = handler.handle(element);
+      expect(result).toEqual({
+        table: {
+          border: {
+            style: 'solid',
+            width: '1px',
+            color: 'black',
+          },
+        },
+      });
+    });
+    describe('edge cases', () => {
+      it('should handle invalid border string gracefully', () => {
+        const element = document.createElement('table');
+        setBorder(element, 'invalid-border-value');
+        const result = handler.handle(element);
+        expect(result).toEqual({
+          table: {
+            border: {
+              style: 'invalid-border-value',
+              width: '',
+              color: '',
+            },
+          },
+        });
+      });
+      it('should handle border with only 2 parts', () => {
+        const element = document.createElement('table');
+        setBorder(element, 'solid 1px');
+        const result = handler.handle(element);
+        expect(result).toEqual({
+          table: {
+            border: {
+              style: 'solid',
+              width: '1px',
+              color: '',
+            },
+          },
+        });
+      });
+      it('should handle border with only spaces', () => {
+        const element = document.createElement('table');
+        setBorder(element, '   ');
+        const result = handler.handle(element);
+        expect(result).toEqual({});
+      });
+      it('should handle border with single word', () => {
+        const element = document.createElement('table');
+        setBorder(element, 'dashed');
+        const result = handler.handle(element);
+        expect(result).toEqual({
+          table: {
+            border: {
+              style: 'dashed',
+              width: '',
+              color: '',
+            },
+          },
+        });
+      });
+      it('should handle empty border string', () => {
+        const element = document.createElement('table');
+        setBorder(element, '');
+        const result = handler.handle(element);
+        expect(result).toEqual({});
+      });
+      it('should ignore invalid alignment values', () => {
+        const element = document.createElement('table');
+        element.setAttribute('align', 'invalid');
+        const result = handler.handle(element);
+        expect(result).toEqual({});
+      });
+      it('should handle numeric width attribute', () => {
+        const element = document.createElement('table');
+        element.setAttribute('width', '750');
+        const result = handler.handle(element);
+        expect(result).toEqual({
+          table: {
+            width: '750px',
+          },
+        });
+      });
+      it('should handle percentage width attribute', () => {
+        const element = document.createElement('table');
+        element.setAttribute('width', '80%');
+        const result = handler.handle(element);
+        expect(result).toEqual({
+          table: {
+            width: '80%',
+          },
+        });
+      });
+    });
+  });
+});