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

package/dist/collection/components/vega-rich-text-editor/slimmers/controllers/extension-controller.js

@@ -58,10 +58,22 @@ export class RTEExtensionController extends VegaSlimmer {
           flushValue: this.flushValue,
           isSourceEditMode: this.isSourceEditMode,
           getSelectedNodes: this.getSelectedNodes,
+          setSelectedNodes: this.selectionController.setSelectedNodes.bind(this.selectionController),
+          getSelection: this.selectionController.getSelection.bind(this.selectionController),
         });
       }
     }
   }
+  /**
+   * Destroys all registered extensions.
+   */
+  destroyExtension() {
+    if (this.extensions) {
+      for (const extension of this.extensions) {
+        extension.destroyExtension();
+      }
+    }
+  }
   /**
    * Update extension context when extensions property changes.
    *
@@ -69,6 +81,11 @@ export class RTEExtensionController extends VegaSlimmer {
    * @param {VegaRTEExtension[]} oldValue - Old extensions array.
    */
   handleExtensionsChange(newValue, oldValue) {
+    if (oldValue) {
+      for (const extension of oldValue) {
+        extension.destroyExtension();
+      }
+    }
     if (!isArrayEqual(newValue, oldValue, false, (a, b) => a === b ? 0 : 1)) {
       this.initialExtensionContext();
     }
@@ -90,8 +107,11 @@ __decorate([
   MapToComponentField()
 ], RTEExtensionController.prototype, "selectionController", void 0);
 __decorate([
-  MapToComponentMethod('connectedCallback')
+  MapToComponentMethod('componentDidLoad')
 ], RTEExtensionController.prototype, "initialExtensionContext", null);
+__decorate([
+  MapToComponentMethod('disconnectedCallback')
+], RTEExtensionController.prototype, "destroyExtension", null);
 __decorate([
   MapToComponentMethod('watchExtensions')
 ], RTEExtensionController.prototype, "handleExtensionsChange", null);

package/dist/collection/components/vega-rich-text-editor/slimmers/controllers/helper/element-to-dto-strategy/annotation-handler/html-element-to-annotation-generator.js

@@ -37,6 +37,16 @@ class HtmlElementToAnnotationGenerator {
       new InlineHtmlAnnotationHandler(),
     ];
   }
+  /**
+   * Register a custom annotation handler.
+   * Custom handlers are added to the beginning of the handlers array,
+   * giving them higher priority than default handlers.
+   *
+   * @param {AnnotationGeneratorStrategyAbstract} handler - The annotation handler to register.
+   */
+  registerHandler(handler) {
+    this.handlers.unshift(handler);
+  }
   /**
    * The function generates annotations for a given target DTO and HTML element based on a set of
    * strategies.

package/dist/collection/components/vega-rich-text-editor/slimmers/controllers/selection-controller.js

@@ -91,6 +91,19 @@ export class SelectionController extends AutoRunWhenReRenderTaskQueueSlimmer {
   getSelectedNodes() {
     return Array.from(this.selectionMap.values()).flat();
   }
+  /**
+   * Set the selected rich text nodes
+   *
+   * @param {RTENode[]} nodes - The rich text nodes to set as selected
+   * @param {RTERangeOptions} [rangeOptions] - The range options to set the selection range
+   */
+  setSelectedNodes(nodes, rangeOptions) {
+    this.clearSelectionMap();
+    this.addNodesToSelectionMap(nodes);
+    if (rangeOptions) {
+      this.currentRange = this.currentRange.updateRTERange(rangeOptions);
+    }
+  }
   /**
    * Get the selected rich text blocks
    *
@@ -246,7 +259,16 @@ export class SelectionController extends AutoRunWhenReRenderTaskQueueSlimmer {
       node.childNodes.forEach(filterNode);
     };
     filterNode(commonAncestor);
-    selectedNodes.forEach((node) => {
+    this.addNodesToSelectionMap(selectedNodes);
+    this.getSelectedNodes().forEach((node) => node.apply(new SelectionChangeAction(range)));
+  }
+  /**
+   * Add nodes to the selection map
+   *
+   * @param {RTENode[]} nodes - The rich text nodes to add
+   */
+  addNodesToSelectionMap(nodes) {
+    nodes.forEach((node) => {
       if (this.selectionMap.has(node.parent)) {
         this.selectionMap.get(node.parent).push(node);
       }
@@ -254,7 +276,6 @@ export class SelectionController extends AutoRunWhenReRenderTaskQueueSlimmer {
         this.selectionMap.set(node.parent, [node]);
       }
     });
-    this.getSelectedNodes().forEach((node) => node.apply(new SelectionChangeAction(range)));
   }
   /**
    * Clear the selection map.

package/dist/collection/components/vega-rich-text-editor/slimmers/controllers/value-controller.js

@@ -50,11 +50,12 @@ export class ValueController extends VegaSlimmer {
    * Watches the value of the editor and updates the internal value.
    */
   watchValueUpdate() {
+    const autoMatchFormat = this.sourceEditConfig.autoMatchFormat;
     if (this.value && !(this.value instanceof VegaRTEContent)) {
-      this.value = VegaRTEContent.fromJSON(this.value);
+      this.value = VegaRTEContent.fromJSON(this.value, { autoMatchFormat });
     }
     else if (!this.value || this.value.children.length === 0) {
-      this.value = VegaRTEContent.createEmptyContent();
+      this.value = VegaRTEContent.createEmptyContent({ autoMatchFormat });
     }
     else {
       this.changeEventEmitter.emit(this.value);
@@ -114,6 +115,9 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], ValueController.prototype, "selectionController", void 0);
+__decorate([
+  MapToComponentField()
+], ValueController.prototype, "sourceEditConfig", void 0);
 __decorate([
   MapToComponentMethod('connectedCallback')
 ], ValueController.prototype, "connectedCallback", null);

package/dist/collection/components/vega-rich-text-editor/slimmers/renderers/tools/source-edit-toolbar-button-slimmer.js

@@ -37,6 +37,9 @@ export class SourceEditToolbarButtonSlimmer extends ToolbarButtonSlimmer {
   }
   async saveSourceCode() {
     const sourceViewValue = this.vegaRichTextEditorRenderer.getSourceCode();
+    if (!sourceViewValue && this.value.isEmpty()) {
+      return;
+    }
     if (typeof sourceViewValue === 'string') {
       await this.valueController.flushChanges(VegaRTEContent.fromHtml(sourceViewValue, {
         autoMatchFormat: this.sourceEditConfig.autoMatchFormat,
@@ -62,3 +65,6 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], SourceEditToolbarButtonSlimmer.prototype, "sourceEditConfig", void 0);
+__decorate([
+  MapToComponentField()
+], SourceEditToolbarButtonSlimmer.prototype, "value", void 0);

package/dist/collection/components/vega-rich-text-editor/test/dto/content-state.test.js

@@ -7,6 +7,7 @@ import { NodeAnnotationTypeEnum } from '../../dto/annotations/node-annotation.ab
 import '../../../../polyfill/test-polyfill/unit/index';
 import CodeFormatter from '../../../../helpers/code-format/code-formatter';
 import { setVegaLogLevel } from '../../../../utils/log';
+import { RTEHtmlBlock } from '../../dto/blocks/html-block';
 describe('content state', () => {
   it('fromJSON should work as expect', () => {
     expect(() => VegaRTEContent.fromJSON([
@@ -2797,6 +2798,262 @@ Line 1
       const paragraph = content.children[0];
       expect(paragraph.children[1].text).toEqual(' ');
     });
+    it('should convert empty value as expect', async () => {
+      const emptyContent = VegaRTEContent.fromHtml('', { autoMatchFormat: false });
+      expect(emptyContent.toHtml()).toEqual('');
+      expect(emptyContent.toJSON()).toEqual([]);
+    });
+    it('should convert the table with children elements to html block 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, { autoMatchFormat: false });
+      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(RTEHtmlBlock);
+      expect(caption).toBeInstanceOf(RTEHtmlBlock);
+      expect(thead).toBeInstanceOf(RTEHtmlBlock);
+      expect(tbody).toBeInstanceOf(RTEHtmlBlock);
+      expect(theadRow).toBeInstanceOf(RTEHtmlBlock);
+      expect(theadCell).toBeInstanceOf(RTEHtmlBlock);
+      expect(tbodyRow).toBeInstanceOf(RTEHtmlBlock);
+      expect(tbodyCell).toBeInstanceOf(RTEHtmlBlock);
+      expect(value.toJSON()).toEqual([
+        {
+          id: expect.anything(),
+          type: 'html-block',
+          htmlTag: 'table',
+          children: [
+            {
+              id: expect.anything(),
+              type: 'html-block',
+              htmlTag: '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(),
+              type: 'html-block',
+              htmlTag: 'thead',
+              children: [
+                {
+                  id: expect.anything(),
+                  type: 'html-block',
+                  htmlTag: 'tr',
+                  children: [
+                    {
+                      id: expect.anything(),
+                      type: 'html-block',
+                      htmlTag: 'th',
+                      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: 'html-block',
+                      htmlTag: 'th',
+                      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: 'html-block',
+              htmlTag: 'tbody',
+              children: [
+                {
+                  id: expect.anything(),
+                  type: 'html-block',
+                  htmlTag: 'tr',
+                  children: [
+                    {
+                      id: expect.anything(),
+                      type: 'html-block',
+                      htmlTag: 'td',
+                      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: 'html-block',
+                      htmlTag: 'td',
+                      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: 'html-block',
+                  htmlTag: 'tr',
+                  children: [
+                    {
+                      id: expect.anything(),
+                      type: 'html-block',
+                      htmlTag: 'td',
+                      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: 'html-block',
+                      htmlTag: 'td',
+                      children: [
+                        {
+                          id: expect.anything(),
+                          annotations: {
+                            internalWrapper: true,
+                          },
+                          type: 'paragraph',
+                          nodes: [
+                            {
+                              id: expect.anything(),
+                              annotations: {
+                                plainText: true,
+                              },
+                              type: 'text',
+                              text: 'Cell 4',
+                            },
+                          ],
+                        },
+                      ],
+                    },
+                  ],
+                },
+              ],
+            },
+          ],
+        },
+      ]);
+      expect(value.toHtml()).toEqualHtml(html);
+    });
   });
   describe('fromJSON', () => {
     it('should translate the paragraph as expect JSON', () => {

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');
+    });
+  });
+});