@heartlandone/vega 2.77.1 → 2.79.0

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

@@ -52,13 +52,19 @@ export class RTEExtensionController extends VegaSlimmer {
    */
   initialExtensionContext() {
     if (this.extensions && this.host) {
+      const extensionContext = this.generateExtensionContext();
       for (const extension of this.extensions) {
-        extension.initialExtension({
-          host: this.host,
-          flushValue: this.flushValue,
-          isSourceEditMode: this.isSourceEditMode,
-          getSelectedNodes: this.getSelectedNodes,
-        });
+        extension.initialExtension(extensionContext);
+      }
+    }
+  }
+  /**
+   * Destroys all registered extensions.
+   */
+  destroyExtension() {
+    if (this.extensions) {
+      for (const extension of this.extensions) {
+        extension.destroyExtension();
       }
     }
   }
@@ -69,10 +75,30 @@ 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();
     }
   }
+  /**
+   * Generates the extension context for the host component.
+   *
+   * @returns {RTEExtensionContext} - The generated extension context.
+   */
+  generateExtensionContext() {
+    return {
+      host: this.host,
+      flushValue: this.flushValue,
+      isSourceEditMode: this.isSourceEditMode,
+      getSelectedNodes: this.getSelectedNodes,
+      setSelectedNodes: this.selectionController.setSelectedNodes.bind(this.selectionController),
+      getSelection: this.selectionController.getSelection.bind(this.selectionController),
+    };
+  }
 }
 __decorate([
   MapToComponentField()
@@ -92,6 +118,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/helper/input-event-handler/insert-paragraph-handler.js

@@ -1,3 +1,4 @@
+import { RTENode } from '../../../../dto/nodes/node.abstract';
 import { BaseHandler } from './base-handler';
 import { SplitBlockWithNodeAction } from '../../../../dto/actions/split-block-with-node-action';
 import { MergeTwoBlocksNodesAction } from '../../../../dto/actions/merge-two-blocks-nodes-action';
@@ -71,7 +72,7 @@ export class InsertParagraphHandler extends BaseHandler {
    */
   breakSingleBlock() {
     const cursorNode = this.removeSelectionRange();
-    const currentBlock = cursorNode.parent;
+    const currentBlock = cursorNode instanceof RTENode ? cursorNode.parent : cursorNode;
     const { startOffset } = this.selectionController.getCurrentRange();
     if (currentBlock) {
       const breakAction = new InsertNewParagraphAction(cursorNode, startOffset);

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.
@@ -352,6 +373,9 @@ export class SelectionController extends AutoRunWhenReRenderTaskQueueSlimmer {
           selectedNodes.push(startNode);
           this.currentRange = this.currentRange.updateRTERange({ startNode, endNode: startNode, startOffset, endOffset: startOffset }, range);
         }
+        else {
+          this.selectionMap.set(entity, []);
+        }
       }
     }
   }

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

@@ -36,7 +36,7 @@ export class SourceEditToolbarButtonSlimmer extends ToolbarButtonSlimmer {
     return super.isDisabled();
   }
   async saveSourceCode() {
-    const sourceViewValue = this.vegaRichTextEditorRenderer.getSourceCode();
+    const sourceViewValue = this.richTextEditorSourceViewRenderer.getSourceCode();
     if (!sourceViewValue && this.value.isEmpty()) {
       return;
     }
@@ -61,7 +61,7 @@ __decorate([
 ], SourceEditToolbarButtonSlimmer.prototype, "valueController", void 0);
 __decorate([
   MapToComponentField()
-], SourceEditToolbarButtonSlimmer.prototype, "vegaRichTextEditorRenderer", void 0);
+], SourceEditToolbarButtonSlimmer.prototype, "richTextEditorSourceViewRenderer", void 0);
 __decorate([
   MapToComponentField()
 ], SourceEditToolbarButtonSlimmer.prototype, "sourceEditConfig", void 0);

package/dist/collection/components/vega-rich-text-editor/slimmers/renderers/vega-rich-text-editor-renderer.js

@@ -10,7 +10,6 @@ import { createEnterKeyHandlerToTriggerClick } from '../../../../utils/accessibi
 import ChangeManager from '../../../../helpers/change-manager/change-manager';
 import domNodeSubjectFactory from '../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-factory';
 import { VegaInternalComponentDidRender } from '../../../../helpers/event-manager/event-id/vega-internal-event-id';
-import CodeFormatter from '../../../../helpers/code-format/code-formatter';
 export class VegaRichTextEditorRenderer extends VegaSlimmer {
   constructor() {
     super(...arguments);
@@ -40,16 +39,6 @@ export class VegaRichTextEditorRenderer extends VegaSlimmer {
     this.richTextContentFocus = () => {
       void this.richTextContentRef.vegaFocus();
     };
-    this.renderSourceViewContent = () => {
-      if (!this.allowSourceEdit)
-        return;
-      const sourceViewValue = this.sourceView ? CodeFormatter.format(this.value.toHtml()) : '';
-      return (h("div", { class: {
-          'source-view-container': true,
-          'vega-hidden': !this.sourceView,
-        } },
-        h("vega-code-block", { ref: (ref) => (this.sourceCodeBlockRef = ref), disabled: this.disabled, value: { language: 'html', code: sourceViewValue } })));
-    };
   }
   /**
    * Component lifecycle - [componentDidRender]{@link VegaRichTextEditor.componentDidRender}
@@ -91,11 +80,6 @@ export class VegaRichTextEditorRenderer extends VegaSlimmer {
       return this.richTextContentRef.shadowRoot.querySelector('.rich-text-content');
     }
   }
-  getSourceCode() {
-    if (this.sourceCodeBlockRef) {
-      return this.sourceCodeBlockRef.value.code;
-    }
-  }
   render() {
     return h(Host, null, this.renderRichTextEditor());
   }
@@ -113,7 +97,7 @@ export class VegaRichTextEditorRenderer extends VegaSlimmer {
   renderContent() {
     return (h(Fragment, null,
       this.renderTextContent(),
-      this.renderSourceViewContent()));
+      this.richTextEditorSourceViewRenderer.render()));
   }
 }
 __decorate([
@@ -158,6 +142,9 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaRichTextEditorRenderer.prototype, "extensions", void 0);
+__decorate([
+  MapToComponentField()
+], VegaRichTextEditorRenderer.prototype, "richTextEditorSourceViewRenderer", void 0);
 __decorate([
   MapToComponentMethod('componentDidRender')
 ], VegaRichTextEditorRenderer.prototype, "componentDidRender", null);

package/dist/collection/components/vega-rich-text-editor/slimmers/renderers/vega-rich-text-editor-source-view-renderer.js

@@ -0,0 +1,102 @@
+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 { MapToComponentField, MapToComponentMethod, VegaSlimmer } from 'vega-slimmer/core';
+import { h } from '@stencil/core';
+import CodeFormatter from '../../../../helpers/code-format/code-formatter';
+import { DomNodeSubjectObserverFactory } from '../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-observer-factory';
+import { VegaInternalCodeBlockBlur } from '../../../../helpers/event-manager/event-id/vega-internal-event-id';
+import { VegaRTEContent } from '../../dto/content-state';
+/**
+ * The renderer for the source view of the rich text editor. It renders a code block for editing the source code of the rich text editor content.
+ */
+export class VegaRichTextEditorSourceViewRenderer extends VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    this.prevRecord = '';
+    /**
+     * Handle the blur event of the code block. When the code block loses focus, emit the source code change event with the current source code.
+     */
+    this.handleCodeBlockBlur = () => {
+      var _a;
+      // If source view is closed while blurring, it means the user switch back to normal mode, so we can skip emitting the change event.
+      if (this.sourceView) {
+        const sourceCode = this.getSourceCode();
+        const newValue = VegaRTEContent.fromHtml(sourceCode, {
+          autoMatchFormat: (_a = this.sourceEditConfig.autoMatchFormat) !== null && _a !== void 0 ? _a : true,
+        });
+        const newSourceCode = newValue.toHtml();
+        if (newSourceCode !== this.prevRecord) {
+          this.sourceCodeChangeEventEmitter.emit(newSourceCode);
+          this.prevRecord = newSourceCode;
+        }
+      }
+    };
+  }
+  /**
+   * Clean up the code block blur observer when the component is disconnected to prevent memory leaks.
+   */
+  clearCodeBlockBlurObserver() {
+    if (this.sourceCodeBlockRef) {
+      DomNodeSubjectObserverFactory.removeUniqueObserverFromNode(this.sourceCodeBlockRef, VegaInternalCodeBlockBlur);
+    }
+  }
+  /**
+   * Get the source code from the source view's code block.
+   *
+   * @returns {Nullable<string>} The source code, or null if the code block reference is not set.
+   */
+  getSourceCode() {
+    if (this.sourceCodeBlockRef) {
+      return this.sourceCodeBlockRef.value.code;
+    }
+  }
+  /**
+   * Render the source view, which is a code block for editing the source code of the rich text editor content.
+   *
+   * @returns {Nullable<HTMLElement>} The rendered source view element, or null if source editing is not allowed.
+   */
+  render() {
+    if (!this.allowSourceEdit)
+      return;
+    const sourceCode = this.value.toHtml();
+    const sourceViewValue = this.sourceView ? CodeFormatter.format(sourceCode) : '';
+    // Record the source view value when rendering, which will be used to compare with the current source view value when blurring the code block to determine whether to emit the source code change event.
+    this.prevRecord = sourceCode;
+    return (h("div", { class: {
+        'source-view-container': true,
+        'vega-hidden': !this.sourceView,
+      } },
+      h("vega-code-block", { ref: (ref) => {
+          this.sourceCodeBlockRef = ref;
+          DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaInternalCodeBlockBlur, this.handleCodeBlockBlur);
+        }, disabled: this.disabled, value: { language: 'html', code: sourceViewValue } })));
+  }
+}
+__decorate([
+  MapToComponentField()
+], VegaRichTextEditorSourceViewRenderer.prototype, "host", void 0);
+__decorate([
+  MapToComponentField()
+], VegaRichTextEditorSourceViewRenderer.prototype, "allowSourceEdit", void 0);
+__decorate([
+  MapToComponentField()
+], VegaRichTextEditorSourceViewRenderer.prototype, "sourceView", void 0);
+__decorate([
+  MapToComponentField()
+], VegaRichTextEditorSourceViewRenderer.prototype, "value", void 0);
+__decorate([
+  MapToComponentField()
+], VegaRichTextEditorSourceViewRenderer.prototype, "disabled", void 0);
+__decorate([
+  MapToComponentField()
+], VegaRichTextEditorSourceViewRenderer.prototype, "sourceEditConfig", void 0);
+__decorate([
+  MapToComponentField()
+], VegaRichTextEditorSourceViewRenderer.prototype, "sourceCodeChangeEventEmitter", void 0);
+__decorate([
+  MapToComponentMethod('disconnectedCallback')
+], VegaRichTextEditorSourceViewRenderer.prototype, "clearCodeBlockBlurObserver", null);

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

@@ -8,6 +8,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([
@@ -2803,6 +2804,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', () => {

package/dist/collection/components/vega-rich-text-editor/test/extensions/extension-test-utils.js

@@ -21,6 +21,8 @@ export function mockExtensionContext(context = {}) {
     host: context.host || getMockRichTextEditor(),
     isSourceEditMode: context.isSourceEditMode || jest.fn().mockReturnValue(false),
     getSelectedNodes: context.getSelectedNodes || jest.fn().mockReturnValue([]),
+    getSelection: context.getSelection || jest.fn().mockReturnValue(null),
+    setSelectedNodes: context.setSelectedNodes || jest.fn().mockReturnValue([]),
     flushValue: context.flushValue || jest.fn(),
   };
   extensionContextManager.setExtensionContext(extensionContext);