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

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

@@ -0,0 +1,222 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { Component, Element, h, Host, Event, State, Prop } from '@stencil/core';
+import { sanitizeVegaComponent } from '../../../../../utils/component';
+import { InjectVegaGlobalSlimmer, InjectVegaSlimmer, MapToComponentMethod, } from 'vega-slimmer/core';
+import { TranslationSlimmer } from '../../../../../helpers/slimmers/translation';
+import { VegaComponentUsageRuntimeMetricsSlimmer } from '../../../../../helpers/slimmers/component-usage-runtime-metrics';
+import { VegaRichTextTableSettingRenderer } from './slimmers/renderers/vega-rich-text-table-setting-renderer';
+import { VegaInternalIconManager } from '../../../../../helpers/icon/internal-icon-manager';
+import { Icons } from './assets/icon';
+import chevronDown from '../../../../../global/icons/chevron-down';
+import { CaptionButtonSlimmer } from './slimmers/renderers/caption-button-slimmer';
+import { ColumnButtonSlimmer } from './slimmers/renderers/column-button-slimmer';
+import { TablePropertiesButtonSlimmer } from './slimmers/renderers/table-properties-button-slimmer';
+import { RowButtonSlimmer } from './slimmers/renderers/row-button-slimmer';
+import { CellPropertiesButtonSlimmer } from './slimmers/renderers/cell-properties-button-slimmer';
+import { DomNodeSubjectObserverFactory } from '../../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-observer-factory';
+import { VegaInternalRTEExtensionTableCellSelectionChange } from '../../../../../helpers/event-manager/event-id/vega-internal-event-id';
+import { isArrayEqual } from '../../../../../utils/array';
+import { MergeCellsButtonSlimmer } from './slimmers/renderers/merge-cells-button-slimmer';
+/**
+ * Table setting popover renderer for managing table operations.
+ *
+ * @vegaVersion 2.75.0-RTE-table-preview
+ */
+export class VegaRichTextTableSetting {
+  constructor() {
+    this.globalSlimmers = {};
+    this.translationSlimmer = new TranslationSlimmer();
+    this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer();
+    this.renderer = new VegaRichTextTableSettingRenderer();
+    this.captionButtonSlimmer = new CaptionButtonSlimmer();
+    this.columnButtonSlimmer = new ColumnButtonSlimmer();
+    this.tablePropertiesButtonSlimmer = new TablePropertiesButtonSlimmer();
+    this.rowButtonSlimmer = new RowButtonSlimmer();
+    this.cellPropertiesButtonSlimmer = new CellPropertiesButtonSlimmer();
+    this.mergeCellsButtonSlimmer = new MergeCellsButtonSlimmer();
+    this.isColumnDropdownOpen = false;
+    this.isMergeCellsDropdownOpen = false;
+    /**
+     * Indicates whether the current table already has a caption.
+     *
+     * @vegaVersion 2.75.0-RTE-table-preview
+     */
+    this.hasCaption = false;
+    /**
+     * The selected cells in the table.
+     *
+     * @vegaVersion 2.75.0-RTE-table-preview
+     */
+    this.selectedCells = [];
+  }
+  connectedCallback() {
+    this.registerTableCellSelectionChangeObserver();
+  }
+  disconnectedCallback() {
+    if (this.target) {
+      DomNodeSubjectObserverFactory.removeUniqueObserverFromNode(this.target, VegaInternalRTEExtensionTableCellSelectionChange);
+    }
+  }
+  render() {
+    return sanitizeVegaComponent(h(Host, null, this.renderer.render()), this.host);
+  }
+  registerTableCellSelectionChangeObserver() {
+    // the target may be null when the table ref becomes ready after rendering vega-rich-text-table-setting.
+    if (this.target) {
+      DomNodeSubjectObserverFactory.addUniqueObserverToNode(this.target, VegaInternalRTEExtensionTableCellSelectionChange, (input) => {
+        if (!isArrayEqual(this.selectedCells, input.detail)) {
+          this.selectedCells = input.detail;
+        }
+      });
+    }
+  }
+  static get is() { return "vega-rich-text-table-setting"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["vega-rich-text-table-setting.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["vega-rich-text-table-setting.css"]
+  }; }
+  static get properties() { return {
+    "hasCaption": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.75.0-RTE-table-preview"
+          }],
+        "text": "Indicates whether the current table already has a caption."
+      },
+      "attribute": "has-caption",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "selectedCells": {
+      "type": "unknown",
+      "mutable": true,
+      "complexType": {
+        "original": "RTETableCellBlock[]",
+        "resolved": "RTETableCellBlock[]",
+        "references": {
+          "RTETableCellBlock": {
+            "location": "import",
+            "path": "../dto/table-cell-block"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.75.0-RTE-table-preview"
+          }],
+        "text": "The selected cells in the table."
+      },
+      "defaultValue": "[]"
+    },
+    "target": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "HTMLElement",
+        "resolved": "HTMLElement",
+        "references": {
+          "HTMLElement": {
+            "location": "global"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.75.0-RTE-table-preview"
+          }],
+        "text": "Specifies the target table element for the table setting."
+      }
+    }
+  }; }
+  static get states() { return {
+    "isColumnDropdownOpen": {},
+    "isMergeCellsDropdownOpen": {}
+  }; }
+  static get events() { return [{
+      "method": "vegaClick",
+      "name": "vegaClick",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.75.0-RTE-table-preview"
+          }],
+        "text": ""
+      },
+      "complexType": {
+        "original": "Array<string>",
+        "resolved": "string[]",
+        "references": {
+          "Array": {
+            "location": "global"
+          }
+        }
+      }
+    }]; }
+  static get elementRef() { return "host"; }
+}
+(() => {
+  VegaInternalIconManager.register(Object.assign(Object.assign({}, Icons), { 'chevron-down': chevronDown }));
+})();
+__decorate([
+  InjectVegaGlobalSlimmer()
+], VegaRichTextTableSetting.prototype, "globalSlimmers", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaRichTextTableSetting.prototype, "translationSlimmer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaRichTextTableSetting.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaRichTextTableSetting.prototype, "renderer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaRichTextTableSetting.prototype, "captionButtonSlimmer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaRichTextTableSetting.prototype, "columnButtonSlimmer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaRichTextTableSetting.prototype, "tablePropertiesButtonSlimmer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaRichTextTableSetting.prototype, "rowButtonSlimmer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaRichTextTableSetting.prototype, "cellPropertiesButtonSlimmer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaRichTextTableSetting.prototype, "mergeCellsButtonSlimmer", void 0);
+__decorate([
+  MapToComponentMethod('connectedCallback')
+], VegaRichTextTableSetting.prototype, "connectedCallback", null);
+__decorate([
+  MapToComponentMethod('disconnectedCallback')
+], VegaRichTextTableSetting.prototype, "disconnectedCallback", null);

package/dist/collection/components/vega-rich-text-editor/public-api.js

@@ -18,6 +18,7 @@ export { VegaRTETokenExtension } from './extensions/tokens/token-extension';
 export { RTELanguageToolbarButtonRenderer } from './extensions/languages/language-toolbar-button-renderer';
 export { VegaRTELanguageExtension } from './extensions/languages/language-extension';
 export { VegaRTEFunctionExtension } from './extensions/functions/function-extension';
+export { VegaRTETableExtension } from './extensions/table/table-extension';
 // actions
 export { ModifyContentAction, ModifyContentActionType } from './dto/actions/modify-content-action.abstract';
 export { AppendChildrenAction } from './dto/actions/append-child-nodes-action';

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();
     }
@@ -92,6 +109,9 @@ __decorate([
 __decorate([
   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/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([
@@ -2802,6 +2803,257 @@ Line 1
       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', () => {