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

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

@@ -37,16 +37,6 @@ 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/html-cleaner/html-content-cleaner.js

@@ -0,0 +1,59 @@
+import { RemoveWhitespaceBetweenTagsProcessor } from './processors/remove-whitespace-between-tags-processor';
+import { RemoveWhitespaceAfterOpeningTagProcessor } from './processors/remove-whitespace-after-opening-tag-processor';
+import { RemoveWhitespaceBeforeClosingTagProcessor } from './processors/remove-whitespace-before-closing-tag-processor';
+/**
+ * Main HTML content cleaner that orchestrates multiple cleaning processors.
+ *
+ * This class implements a chain of responsibility pattern where each processor
+ * handles a specific aspect of HTML cleaning. The processors are applied in sequence
+ * and the entire chain is repeated until no more changes occur.
+ *
+ * Processors (in order):
+ * 1. RemoveWhitespaceBetweenTagsProcessor - Removes whitespace between non-matching tags
+ * 2. RemoveWhitespaceAfterOpeningTagProcessor - Removes \n and \t after opening tags
+ * 3. RemoveWhitespaceBeforeClosingTagProcessor - Removes \n and \t before closing tags
+ */
+export class HTMLContentCleaner {
+  constructor() {
+    this.processors = [
+      new RemoveWhitespaceBetweenTagsProcessor(),
+      new RemoveWhitespaceAfterOpeningTagProcessor(),
+      new RemoveWhitespaceBeforeClosingTagProcessor(),
+    ];
+  }
+  /**
+   * Cleans HTML by applying all processors in the chain repeatedly until no changes occur.
+   *
+   * The cleaning process:
+   * 1. Applies each processor in sequence
+   * 2. Compares the result with the input
+   * 3. If changes were made, repeats the process
+   * 4. Returns the final cleaned HTML
+   *
+   * Examples of transformations:
+   * - `<p>\n\t <span>test</span>\n\t </p>` → `<p><span>test</span></p>`
+   * - `<p>\n\tHello</p>` → `<p>Hello</p>`
+   * - `<p>Hello\n\t</p>` → `<p>Hello</p>`
+   * - `<span> </span>` → `<span> </span>` (preserved - matching tags)
+   * - `<p>Hello  World</p>` → `<p>Hello  World</p>` (preserved - regular spaces)
+   *
+   * @param {string} html - The HTML string to clean.
+   * @returns {string} The cleaned HTML string.
+   */
+  clean(html) {
+    if (!html || html.trim().length === 0) {
+      return html;
+    }
+    let result = html;
+    let previousResult;
+    // Keep processing until no more changes occur
+    do {
+      previousResult = result;
+      // Apply each processor in the chain
+      for (const processor of this.processors) {
+        result = processor.process(result);
+      }
+    } while (result !== previousResult);
+    return result;
+  }
+}

package/dist/collection/components/vega-rich-text-editor/slimmers/controllers/html-cleaner/index.js

@@ -0,0 +1,4 @@
+export { HTMLContentCleaner } from './html-content-cleaner';
+export { RemoveWhitespaceBetweenTagsProcessor } from './processors/remove-whitespace-between-tags-processor';
+export { RemoveWhitespaceAfterOpeningTagProcessor } from './processors/remove-whitespace-after-opening-tag-processor';
+export { RemoveWhitespaceBeforeClosingTagProcessor } from './processors/remove-whitespace-before-closing-tag-processor';

package/dist/collection/components/vega-rich-text-editor/slimmers/controllers/html-cleaner/processors/remove-whitespace-after-opening-tag-processor.js

@@ -0,0 +1,21 @@
+/**
+ * Removes `\n` and `\t` characters after opening tags (before text content).
+ *
+ * Transforms patterns like `>[\n\t]+(text)` to `>(text)`.
+ *
+ * Examples:
+ * - `<p>\n\tHello` → `<p>Hello`
+ * - `<div>\n\n\tWorld` → `<div>World`
+ */
+export class RemoveWhitespaceAfterOpeningTagProcessor {
+  /**
+   * Process the HTML string to remove `\n` and `\t` after opening tags.
+   *
+   * @param {string} html - The HTML string to process.
+   * @returns {string} The processed HTML string.
+   */
+  process(html) {
+    // Pattern: `>[\n\t]+(text)` → `>(text)`
+    return html.replace(/(>)[\n\t]+(?=.)/g, '$1');
+  }
+}

package/dist/collection/components/vega-rich-text-editor/slimmers/controllers/html-cleaner/processors/remove-whitespace-before-closing-tag-processor.js

@@ -0,0 +1,21 @@
+/**
+ * Removes `\n` and `\t` characters before closing tags (after text content).
+ *
+ * Transforms patterns like `(text)[\n\t]+<` to `(text)<`.
+ *
+ * Examples:
+ * - `World\n\t</p>` → `World</p>`
+ * - `Hello\n</div>` → `Hello</div>`
+ */
+export class RemoveWhitespaceBeforeClosingTagProcessor {
+  /**
+   * Process the HTML string to remove `\n` and `\t` before closing tags.
+   *
+   * @param {string} html - The HTML string to process.
+   * @returns {string} The processed HTML string.
+   */
+  process(html) {
+    // Pattern: `(text)[\n\t]+<` → `(text)<`
+    return html.replace(/(.?)[\n\t]+(?=<)/g, '$1');
+  }
+}

package/dist/collection/components/vega-rich-text-editor/slimmers/controllers/html-cleaner/processors/remove-whitespace-between-tags-processor.js

@@ -0,0 +1,77 @@
+/**
+ * Removes whitespace between tags, except preserves ALL whitespace between matching opening/closing tag pairs.
+ *
+ * This processor scans for patterns of `<tag>(whitespace)<tag>` and:
+ * - If the first tag is an opening tag and the second tag is its matching closing tag (e.g., `<span> </span>`),
+ *   preserves ALL the whitespace between them (including spaces, tabs, newlines)
+ * - Otherwise, removes all the whitespace between the tags
+ *
+ * Examples:
+ * - `</p>\n\t<div>` → `</p><div>` (different tags: closing p, opening div - whitespace removed)
+ * - `<div>\n\t<span>` → `<div><span>` (different tags: opening div, opening span - whitespace removed)
+ * - `<span> </span>` → `<span> </span>` (matching tags: opening span, closing span - space preserved)
+ * - `<span>  </span>` → `<span>  </span>` (matching tags - multiple spaces preserved)
+ * - `<span>\n\t</span>` → `<span>\n\t</span>` (matching tags - \n\t preserved)
+ * - `<code> </code>` → `<code> </code>` (matching tags - space preserved)
+ * - `</div> <p>` → `</div><p>` (different tags: closing div, opening p - whitespace removed)
+ */
+export class RemoveWhitespaceBetweenTagsProcessor {
+  /**
+   * Process the HTML string to remove whitespace between non-matching tags.
+   *
+   * @param {string} html - The HTML string to process.
+   * @returns {string} The processed HTML string.
+   */
+  process(html) {
+    return html.replace(/(<[^>]+>)(\s+)(<[^>]+>)/g, (_match, tag1, whitespace, tag2) => {
+      const openingTagName = this.extractOpeningTagName(tag1);
+      const closingTagName = this.extractClosingTagName(tag2);
+      // Preserve all whitespace if tags match (e.g., <span> </span>)
+      if (openingTagName && closingTagName && openingTagName === closingTagName) {
+        return `${tag1}${whitespace}${tag2}`;
+      }
+      // Remove whitespace for non-matching tags
+      return `${tag1}${tag2}`;
+    });
+  }
+  /**
+   * Extracts the tag name from an opening HTML tag.
+   *
+   * Supports standard HTML tags (div, span, h1, etc.) and custom elements with hyphens (my-component).
+   *
+   * Examples:
+   * - `<span>` → `span`
+   * - `<div class="test">` → `div`
+   * - `<my-component id="123">` → `my-component`
+   * - `</span>` → `null` (not an opening tag)
+   *
+   * @param {string} tag - The tag string to extract from (e.g., '<span>', '<div class="test">').
+   * @returns {string | null} The tag name or null if not an opening tag.
+   * @private
+   */
+  extractOpeningTagName(tag) {
+    // Pattern: <(tag name) where tag name starts with letter, followed by letters/numbers/hyphens
+    const match = tag.match(/<(\w[\w-]*)/);
+    return match ? match[1] : null;
+  }
+  /**
+   * Extracts the tag name from a closing HTML tag.
+   *
+   * Supports standard HTML tags (div, span, h1, etc.) and custom elements with hyphens (my-component).
+   *
+   * Examples:
+   * - `</span>` → `span`
+   * - `</div>` → `div`
+   * - `</my-component>` → `my-component`
+   * - `<span>` → `null` (not a closing tag)
+   *
+   * @param {string} tag - The tag string to extract from (e.g., '</span>', '</div>').
+   * @returns {string | null} The tag name or null if not a closing tag.
+   * @private
+   */
+  extractClosingTagName(tag) {
+    // Pattern: </(tag name) where tag name starts with letter, followed by letters/numbers/hyphens
+    const match = tag.match(/<\/(\w[\w-]*)/);
+    return match ? match[1] : null;
+  }
+}

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

@@ -91,19 +91,6 @@ 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
    *
@@ -259,16 +246,7 @@ export class SelectionController extends AutoRunWhenReRenderTaskQueueSlimmer {
       node.childNodes.forEach(filterNode);
     };
     filterNode(commonAncestor);
-    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) => {
+    selectedNodes.forEach((node) => {
       if (this.selectionMap.has(node.parent)) {
         this.selectionMap.get(node.parent).push(node);
       }
@@ -276,6 +254,7 @@ 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/text-node-color-controller.js

@@ -0,0 +1,51 @@
+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 { MapToComponentMethod, VegaSlimmer } from 'vega-slimmer/core';
+import { Observer } from '../../../../helpers/change-manager/observer/observer';
+import ChangeManager from '../../../../helpers/change-manager/change-manager';
+import { DARK_MODE_CHANGE } from '../../../../helpers/change-manager/subject/static-subject/static-subject-title';
+import TextNodeRenderingRegistry from './text-node-rendering-registry';
+/**
+ * Controller for the text node color
+ */
+export class TextNodeColorController extends VegaSlimmer {
+  /**
+   * Component lifecycle - [connectedCallback]
+   * Register an observer to watch for dark mode updates, which will update the color of text node .
+   */
+  connectedCallback() {
+    this.observer = new Observer(this.isAcceptObserver.bind(this), (isDark) => {
+      const textNodeElements = TextNodeRenderingRegistry.getTextNodeElements();
+      textNodeElements.forEach((textColorAnnotation, element) => {
+        element.style.color = isDark
+          ? textColorAnnotation.textColor.dark
+          : textColorAnnotation.textColor.light;
+      });
+    });
+    ChangeManager.register(DARK_MODE_CHANGE, this.observer);
+  }
+  /**
+   * cancel dark mode observer when disconnectedCallback
+   */
+  disconnectResizeObserver() {
+    ChangeManager.unregister(DARK_MODE_CHANGE, this.observer);
+  }
+  /**
+   * Determines whether the observer should accept changes.
+   *
+   * @returns {boolean} Always returns true in the current implementation.
+   */
+  isAcceptObserver() {
+    return true;
+  }
+}
+__decorate([
+  MapToComponentMethod('connectedCallback')
+], TextNodeColorController.prototype, "connectedCallback", null);
+__decorate([
+  MapToComponentMethod('disconnectedCallback')
+], TextNodeColorController.prototype, "disconnectResizeObserver", null);

package/dist/collection/components/vega-rich-text-editor/slimmers/controllers/text-node-rendering-registry.js

@@ -0,0 +1,26 @@
+/**
+ * This class is responsible for keeping track of the DOM elements.
+ */
+class TextNodeRenderingRegistry {
+  constructor() {
+    this.textNodeElements = new Map();
+  }
+  /**
+   * Registers a DOM element and the color annotation of the DOM element.
+   *
+   * @param {HTMLElement} dom The DOM element to register.
+   * @param {TextColorAnnotation} textColorAnnotation The text color annotation of text node to register.
+   */
+  register(dom, textColorAnnotation) {
+    this.textNodeElements.set(dom, textColorAnnotation);
+  }
+  /**
+   * Retrieves the text node elements.
+   *
+   * @returns {Map<HTMLElement, TextColorAnnotation>} The text node elements, or empty array.
+   */
+  getTextNodeElements() {
+    return this.textNodeElements;
+  }
+}
+export default new TextNodeRenderingRegistry();

package/dist/collection/components/vega-rich-text-editor/test/dto/blocks/html-block.test.js

@@ -39,6 +39,45 @@ describe('HTMLBlock', () => {
         ],
       }, { autoMatchFormat: false }).toHtml()).toMatchSnapshot();
     });
+    it('toHtml should handle self-closing hr tag correctly', () => {
+      const hrBlock = RTEHtmlBlock.from({
+        id: 'hr-1',
+        type: 'html-block',
+        htmlTag: 'hr',
+        children: [],
+      }, { autoMatchFormat: false });
+      expect(hrBlock.toHtml()).toBe('<hr>');
+    });
+    it('toHtml should handle self-closing hr tag with attributes correctly', () => {
+      const hrBlock = RTEHtmlBlock.from({
+        id: 'hr-1',
+        type: 'html-block',
+        htmlTag: 'hr',
+        annotations: { customClass: ['divider'] },
+        children: [],
+      }, { autoMatchFormat: false });
+      expect(hrBlock.toHtml()).toBe('<hr class="divider">');
+    });
+    it('toHtml should handle self-closing input tag correctly', () => {
+      const inputBlock = RTEHtmlBlock.from({
+        id: 'input-1',
+        type: 'html-block',
+        htmlTag: 'input',
+        annotations: { customAttribute: { type: 'text', placeholder: 'Enter text' } },
+        children: [],
+      }, { autoMatchFormat: false });
+      expect(inputBlock.toHtml()).toBe('<input type="text" placeholder="Enter text">');
+    });
+    it('toHtml should handle self-closing col tag correctly', () => {
+      const colBlock = RTEHtmlBlock.from({
+        id: 'col-1',
+        type: 'html-block',
+        htmlTag: 'col',
+        annotations: { customAttribute: { span: '2' } },
+        children: [],
+      }, { autoMatchFormat: false });
+      expect(colBlock.toHtml()).toBe('<col span="2">');
+    });
   });
   describe('public methods', () => {
     let htmlBlock;