@heartlandone/vega 2.71.0 → 2.72.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();
     }
@@ -92,6 +109,9 @@ __decorate([
 __decorate([
   MapToComponentMethod('connectedCallback')
 ], 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/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/annotation-style.test.js

@@ -17,7 +17,7 @@ describe('annotation-style', () => {
     });
     const blockAnnotationStyle = new RTEAnnotationStyle(textBlock);
     expect(blockAnnotationStyle.toCssText()).toEqual('color: red;font-size: 16px;');
-    expect(blockAnnotationStyle.toCssText({ standalone: true })).toEqual('font-family: Inter;font-size: 16px;line-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;text-align: center;color: red;');
+    expect(blockAnnotationStyle.toCssText({ standalone: true })).toEqual('font-family: Inter;font-size: 16px;line-height: 22px;min-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;text-align: center;color: red;');
     expect(blockAnnotationStyle.toCssText(null, null, {})).toEqual('');
     expect(blockAnnotationStyle.toCssText(null, null, { color: 'red' })).toEqual('color: red;');
     expect(blockAnnotationStyle.toCssText(null, null, { backgroundColor: 'blue', fontWeight: 'bold' })).toEqual('background-color: blue;font-weight: bold;');
@@ -56,6 +56,7 @@ describe('annotation-style', () => {
       fontSize: '16px',
       fontWeight: '500',
       lineHeight: '22px',
+      minHeight: '22px',
       marginBottom: '0px',
       marginTop: '0px',
       textAlign: 'center',

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

@@ -47,6 +47,7 @@ describe('annotations', () => {
       fontSize: '16px',
       fontWeight: '500',
       lineHeight: '22px',
+      minHeight: '22px',
       marginBottom: '0px',
       marginTop: '0px',
     });
@@ -55,18 +56,21 @@ describe('annotations', () => {
       fontSize: '36px',
       fontWeight: '500',
       lineHeight: '40px',
+      minHeight: '40px',
     });
     expect(new TextStyleAnnotation('subtitle').renderStyle({ standalone: true })).toEqual({
       fontFamily: 'Inter',
       fontSize: '28px',
       fontWeight: '500',
       lineHeight: '32px',
+      minHeight: '32px',
     });
     expect(new TextStyleAnnotation('heading-1').renderStyle({ standalone: true })).toEqual({
       fontFamily: 'Inter',
       fontSize: '22px',
       fontWeight: '500',
       lineHeight: '24px',
+      minHeight: '24px',
       marginBottom: '0px',
       marginTop: '0px',
     });
@@ -75,6 +79,7 @@ describe('annotations', () => {
       fontSize: '20px',
       fontWeight: '500',
       lineHeight: '24px',
+      minHeight: '24px',
       marginBottom: '0px',
       marginTop: '0px',
     });
@@ -83,6 +88,7 @@ describe('annotations', () => {
       fontSize: '18px',
       fontWeight: '500',
       lineHeight: '22px',
+      minHeight: '22px',
       marginBottom: '0px',
       marginTop: '0px',
     });
@@ -91,6 +97,7 @@ describe('annotations', () => {
       fontSize: '16px',
       fontWeight: '500',
       lineHeight: '22px',
+      minHeight: '22px',
       marginBottom: '0px',
       marginTop: '0px',
     });
@@ -99,6 +106,7 @@ describe('annotations', () => {
       fontSize: '14px',
       fontWeight: '500',
       lineHeight: '22px',
+      minHeight: '22px',
       marginBottom: '0px',
       marginTop: '0px',
     });
@@ -107,6 +115,7 @@ describe('annotations', () => {
       fontSize: '12px',
       fontWeight: '500',
       lineHeight: '22px',
+      minHeight: '22px',
       marginBottom: '0px',
       marginTop: '0px',
     });

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

@@ -187,7 +187,7 @@ describe('text block', () => {
         },
       ],
     };
-    expect(RTETextBlock.from(textBlock).toHtml()).toEqual(`<p style="font-family: Inter;font-size: 16px;line-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;"><a href="www.google.com" target="_blank" style="color: rgba(var(--v-text-link, 19, 98, 226, 1));"><span>This is a text.</span></a></p>`);
+    expect(RTETextBlock.from(textBlock).toHtml()).toEqual(`<p style="font-family: Inter;font-size: 16px;line-height: 22px;min-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;"><a href="www.google.com" target="_blank" style="color: rgba(var(--v-text-link, 19, 98, 226, 1));"><span>This is a text.</span></a></p>`);
     expect(RTETextBlock.from(textBlock, { autoMatchFormat: false }).toHtml()).toEqual(`<p><a href="www.google.com"><span>This is a text.</span></a></p>`);
   });
 });

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

@@ -316,7 +316,7 @@ describe('content state', () => {
           nodes: [{ id: '1-1', type: 'text', text: 'This is a paragraph' }],
         },
       ]);
-      expect(contentState.toHtml()).toEqualHtml(`<p style="font-family: Inter;font-size: 16px;line-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;margin-top: 0px; margin-bottom: 0px;"><span>This is a paragraph</span></p>`);
+      expect(contentState.toHtml()).toEqualHtml(`<p style="font-family: Inter;font-size: 16px;line-height: 22px;min-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;margin-top: 0px; margin-bottom: 0px;"><span>This is a paragraph</span></p>`);
     });
     it('should convert text node with annotations to HTML correctly', () => {
       const contentState = VegaRTEContent.fromJSON([
@@ -336,7 +336,7 @@ describe('content state', () => {
           ],
         },
       ]);
-      expect(contentState.toHtml()).toEqual(`<p style="font-family: Inter;font-size: 16px;line-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;"><span style="font-weight: 700;">This is a paragraph.</span><code style="font-family: Roboto Mono;white-space: pre-wrap;"> code</code><span> text</span></p>`);
+      expect(contentState.toHtml()).toEqual(`<p style="font-family: Inter;font-size: 16px;line-height: 22px;min-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;"><span style="font-weight: 700;">This is a paragraph.</span><code style="font-family: Roboto Mono;white-space: pre-wrap;"> code</code><span> text</span></p>`);
     });
     it('should convert text block with annotations to HTML with inline styles correctly', () => {
       const contentState = VegaRTEContent.fromJSON([
@@ -354,7 +354,7 @@ describe('content state', () => {
           ],
         },
       ]);
-      expect(contentState.toHtml()).toEqual(`<p style="font-family: Inter;font-size: 16px;line-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;text-align: right;"><span style="font-weight: 700;text-decoration: underline;">This is a paragraph</span></p>`);
+      expect(contentState.toHtml()).toEqual(`<p style="font-family: Inter;font-size: 16px;line-height: 22px;min-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;text-align: right;"><span style="font-weight: 700;text-decoration: underline;">This is a paragraph</span></p>`);
     });
     it('should convert image block to HTML correctly', () => {
       const contentState = VegaRTEContent.fromJSON([
@@ -399,7 +399,7 @@ describe('content state', () => {
           ],
         },
       ]);
-      expect(contentState.toHtml()).toEqual(`<ul style="padding-left: 8px;margin-left: 16px;"><li style="font-family: Inter;font-size: 16px;line-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;"><span>Item 1</span></li><li style="font-family: Inter;font-size: 16px;line-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;"><span>Item 2</span></li></ul>`);
+      expect(contentState.toHtml()).toEqual(`<ul style="padding-left: 8px;margin-left: 16px;"><li style="font-family: Inter;font-size: 16px;line-height: 22px;min-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;"><span>Item 1</span></li><li style="font-family: Inter;font-size: 16px;line-height: 22px;min-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;"><span>Item 2</span></li></ul>`);
     });
     it('should convert number list block to HTML correctly', () => {
       const contentState = VegaRTEContent.fromJSON([
@@ -420,7 +420,7 @@ describe('content state', () => {
           ],
         },
       ]);
-      expect(contentState.toHtml()).toEqual(`<ol style="padding-left: 8px;margin-left: 16px;"><li style="font-family: Inter;font-size: 16px;line-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;"><span>Item 1</span></li><li style="font-family: Inter;font-size: 16px;line-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;"><span>Item 2</span></li></ol>`);
+      expect(contentState.toHtml()).toEqual(`<ol style="padding-left: 8px;margin-left: 16px;"><li style="font-family: Inter;font-size: 16px;line-height: 22px;min-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;"><span>Item 1</span></li><li style="font-family: Inter;font-size: 16px;line-height: 22px;min-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;"><span>Item 2</span></li></ol>`);
     });
     it('should convert code block to HTML correctly', () => {
       const contentState = VegaRTEContent.fromJSON([
@@ -456,7 +456,7 @@ describe('content state', () => {
           ],
         },
       ]);
-      expect(contentState.toHtml()).toEqual(`<p style="font-family: Inter;font-size: 16px;line-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;"><a href="https://example.com" target="_blank" style="color: rgba(var(--v-text-link, 19, 98, 226, 1));"><span>This is a link</span></a></p>`);
+      expect(contentState.toHtml()).toEqual(`<p style="font-family: Inter;font-size: 16px;line-height: 22px;min-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;"><a href="https://example.com" target="_blank" style="color: rgba(var(--v-text-link, 19, 98, 226, 1));"><span>This is a link</span></a></p>`);
     });
     it('should convert a complex value to HTML correctly', () => {
       const contentState = VegaRTEContent.fromJSON([
@@ -789,7 +789,7 @@ describe('content state', () => {
           ],
         },
       ]);
-      expect(contentState.toHtml()).toEqual(`<div style="font-family: Inter;font-size: 36px;line-height: 40px;font-weight: 500;"><span style="font-weight: 700;">Title</span></div><div style="font-family: Inter;font-size: 28px;line-height: 32px;font-weight: 500;"><span>Subtitle</span></div><h1 style="font-family: Inter;font-size: 22px;line-height: 24px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;"><span style="font-weight: 700;">Heading 1</span></h1><h2 style="font-family: Inter;font-size: 20px;line-height: 24px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;"><span style="font-weight: 700;">Heading 2</span></h2><h3 style="font-family: Inter;font-size: 18px;line-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;"><span style="font-weight: 700;">Heading 3</span></h3><p style="font-family: Inter;font-size: 16px;line-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;"><span>Paragraph</span></p><p style="font-family: Inter;font-size: 16px;line-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;"><span style="font-weight: 700;">Bold text</span></p><p style="font-family: Inter;font-size: 16px;line-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;"><span style="font-style: italic;">Italic text</span></p><p style="font-family: Inter;font-size: 16px;line-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;"><span style="text-decoration: underline;">Underline text</span></p><p style="font-family: Inter;font-size: 16px;line-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;"><span style="text-decoration: underline;">Strikethrough text</span></p><p style="font-family: Inter;font-size: 16px;line-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;"><code style="font-family: Roboto Mono;white-space: pre-wrap;">Code text</code></p><p style="font-family: Inter;font-size: 16px;line-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;"><span style="color: #BD2947;">Color text</span></p><p style="font-family: Inter;font-size: 16px;line-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;text-align: left;"><span>Left align</span></p><p style="font-family: Inter;font-size: 16px;line-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;text-align: right;"><span>Right align</span></p><ul style="padding-left: 8px;margin-left: 16px;"><li style="font-family: Inter;font-size: 16px;line-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;"><span>list item 1</span></li><li style="font-family: Inter;font-size: 16px;line-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;"><span>list item 2</span></li></ul><p style="font-family: Inter;font-size: 16px;line-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;margin-left: 32px;"><span>More indent</span></p><p style="font-family: Inter;font-size: 16px;line-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;"><a href="https://www.google.com" target="_blank" style="color: rgba(var(--v-text-link, 19, 98, 226, 1));"><span>Link text</span></a></p><p style="font-family: Inter;font-size: 16px;line-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;"><span></span></p><p style="font-family: Inter;font-size: 16px;line-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;"><span></span></p>`);
+      expect(contentState.toHtml()).toEqual(`<div style="font-family: Inter;font-size: 36px;line-height: 40px;min-height: 40px;font-weight: 500;"><span style="font-weight: 700;">Title</span></div><div style="font-family: Inter;font-size: 28px;line-height: 32px;min-height: 32px;font-weight: 500;"><span>Subtitle</span></div><h1 style="font-family: Inter;font-size: 22px;line-height: 24px;min-height: 24px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;"><span style="font-weight: 700;">Heading 1</span></h1><h2 style="font-family: Inter;font-size: 20px;line-height: 24px;min-height: 24px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;"><span style="font-weight: 700;">Heading 2</span></h2><h3 style="font-family: Inter;font-size: 18px;line-height: 22px;min-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;"><span style="font-weight: 700;">Heading 3</span></h3><p style="font-family: Inter;font-size: 16px;line-height: 22px;min-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;"><span>Paragraph</span></p><p style="font-family: Inter;font-size: 16px;line-height: 22px;min-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;"><span style="font-weight: 700;">Bold text</span></p><p style="font-family: Inter;font-size: 16px;line-height: 22px;min-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;"><span style="font-style: italic;">Italic text</span></p><p style="font-family: Inter;font-size: 16px;line-height: 22px;min-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;"><span style="text-decoration: underline;">Underline text</span></p><p style="font-family: Inter;font-size: 16px;line-height: 22px;min-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;"><span style="text-decoration: underline;">Strikethrough text</span></p><p style="font-family: Inter;font-size: 16px;line-height: 22px;min-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;"><code style="font-family: Roboto Mono;white-space: pre-wrap;">Code text</code></p><p style="font-family: Inter;font-size: 16px;line-height: 22px;min-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;"><span style="color: #BD2947;">Color text</span></p><p style="font-family: Inter;font-size: 16px;line-height: 22px;min-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;text-align: left;"><span>Left align</span></p><p style="font-family: Inter;font-size: 16px;line-height: 22px;min-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;text-align: right;"><span>Right align</span></p><ul style="padding-left: 8px;margin-left: 16px;"><li style="font-family: Inter;font-size: 16px;line-height: 22px;min-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;"><span>list item 1</span></li><li style="font-family: Inter;font-size: 16px;line-height: 22px;min-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;"><span>list item 2</span></li></ul><p style="font-family: Inter;font-size: 16px;line-height: 22px;min-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;margin-left: 32px;"><span>More indent</span></p><p style="font-family: Inter;font-size: 16px;line-height: 22px;min-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;"><a href="https://www.google.com" target="_blank" style="color: rgba(var(--v-text-link, 19, 98, 226, 1));"><span>Link text</span></a></p><p style="font-family: Inter;font-size: 16px;line-height: 22px;min-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;"><span></span></p><p style="font-family: Inter;font-size: 16px;line-height: 22px;min-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;"><span></span></p>`);
     });
     it('should convert paragraph with custom attributes to HTML correctly', () => {
       const contentState = VegaRTEContent.fromJSON([
@@ -818,7 +818,7 @@ describe('content state', () => {
           ],
         },
       ]);
-      expect(contentState.toHtml()).toEqualHtml(`<p id="p-element" dir="dir-p" style="font-family: Inter;font-size: 16px;line-height: 22px;font-weight: 500; margin-top: 0px; margin-bottom: 0px;"><span id="span-element" dir="dir-span">This is a paragraph</span></p>`);
+      expect(contentState.toHtml()).toEqualHtml(`<p id="p-element" dir="dir-p" style="font-family: Inter;font-size: 16px;line-height: 22px;min-height: 22px;font-weight: 500; margin-top: 0px; margin-bottom: 0px;"><span id="span-element" dir="dir-span">This is a paragraph</span></p>`);
     });
     it('should convert text node with custom attributes to HTML correctly', () => {
       const contentState = VegaRTEContent.fromJSON([
@@ -868,7 +868,7 @@ describe('content state', () => {
           ],
         },
       ]);
-      expect(contentState.toHtml()).toEqual(`<p id="p-element" dir="dir-p" style="font-family: Inter;font-size: 16px;line-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;"><span id="text1" style="font-weight: 700;">This is a paragraph.</span><code id="text2" style="font-family: Roboto Mono;white-space: pre-wrap;"> code</code><span id="text3"> text</span></p>`);
+      expect(contentState.toHtml()).toEqual(`<p id="p-element" dir="dir-p" style="font-family: Inter;font-size: 16px;line-height: 22px;min-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;"><span id="text1" style="font-weight: 700;">This is a paragraph.</span><code id="text2" style="font-family: Roboto Mono;white-space: pre-wrap;"> code</code><span id="text3"> text</span></p>`);
     });
     it('should convert bullet list block with custom attributes to HTML correctly', () => {
       const contentState = VegaRTEContent.fromJSON([
@@ -904,7 +904,7 @@ describe('content state', () => {
           },
         },
       ]);
-      expect(contentState.toHtml()).toEqual(`<ul id="ul" style="padding-left: 8px;margin-left: 16px;"><li id="list1" style="font-family: Inter;font-size: 16px;line-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;"><span>Item 1</span></li><li id="list2" style="font-family: Inter;font-size: 16px;line-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;"><span>Item 2</span></li></ul>`);
+      expect(contentState.toHtml()).toEqual(`<ul id="ul" style="padding-left: 8px;margin-left: 16px;"><li id="list1" style="font-family: Inter;font-size: 16px;line-height: 22px;min-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;"><span>Item 1</span></li><li id="list2" style="font-family: Inter;font-size: 16px;line-height: 22px;min-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;"><span>Item 2</span></li></ul>`);
     });
     it('should convert paragraph with custom class to HTML correctly', () => {
       const contentState = VegaRTEContent.fromJSON([
@@ -1025,7 +1025,7 @@ describe('content state', () => {
           ],
         },
       ]);
-      expect(contentState.toHtml()).toEqualHtml(`<p style="font-family: Inter;font-size: 16px;line-height: 22px;font-weight: 700; margin-top: 0px; margin-bottom: 0px;"><span style="font-weight: 700">This is a paragraph</span></p>`);
+      expect(contentState.toHtml()).toEqualHtml(`<p style="font-family: Inter;font-size: 16px;line-height: 22px;min-height: 22px;font-weight: 700; margin-top: 0px; margin-bottom: 0px;"><span style="font-weight: 700">This is a paragraph</span></p>`);
     });
     it('should convert text node with custom style to HTML correctly', () => {
       const contentState = VegaRTEContent.fromJSON([
@@ -1074,7 +1074,7 @@ describe('content state', () => {
           ],
         },
       ]);
-      expect(contentState.toHtml()).toEqual(`<p style="font-family: Inter;font-size: 16px;line-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;text-align: right;"><span style="font-weight: 700;padding: 20px;">This is a paragraph.</span><code style="font-family: Roboto Mono;white-space: pre-wrap;padding: 30px;"> code</code><span style="padding: 40px;"> text</span></p>`);
+      expect(contentState.toHtml()).toEqual(`<p style="font-family: Inter;font-size: 16px;line-height: 22px;min-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;text-align: right;"><span style="font-weight: 700;padding: 20px;">This is a paragraph.</span><code style="font-family: Roboto Mono;white-space: pre-wrap;padding: 30px;"> code</code><span style="padding: 40px;"> text</span></p>`);
     });
     it('should convert bullet list block with custom style to HTML correctly', () => {
       const contentState = VegaRTEContent.fromJSON([
@@ -1110,7 +1110,7 @@ describe('content state', () => {
           },
         },
       ]);
-      expect(contentState.toHtml()).toEqual(`<ul style="padding-left: 8px;margin-left: 16px;padding: 60px;"><li style="font-family: Inter;font-size: 16px;line-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;padding: 40px;"><span>Item 1</span></li><li style="font-family: Inter;font-size: 16px;line-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;padding: 50px;"><span>Item 2</span></li></ul>`);
+      expect(contentState.toHtml()).toEqual(`<ul style="padding-left: 8px;margin-left: 16px;padding: 60px;"><li style="font-family: Inter;font-size: 16px;line-height: 22px;min-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;padding: 40px;"><span>Item 1</span></li><li style="font-family: Inter;font-size: 16px;line-height: 22px;min-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;padding: 50px;"><span>Item 2</span></li></ul>`);
     });
     it('should log warning when call toHtml with deprecated parameter', () => {
       setVegaLogLevel('warn');
@@ -2839,8 +2839,8 @@ Line 1
           nodes: [{ id: '1-1', type: 'text', text: 'This is a paragraph' }],
         },
       ];
-      expect(VegaRTEContent.fromJSON(content).toHtml()).toEqual(`<p style="font-family: Inter;font-size: 16px;line-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;"><span>This is a paragraph</span></p>`);
-      expect(VegaRTEContent.fromJSON(content).toHtml()).toEqual(`<p style="font-family: Inter;font-size: 16px;line-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;"><span>This is a paragraph</span></p>`);
+      expect(VegaRTEContent.fromJSON(content).toHtml()).toEqual(`<p style="font-family: Inter;font-size: 16px;line-height: 22px;min-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;"><span>This is a paragraph</span></p>`);
+      expect(VegaRTEContent.fromJSON(content).toHtml()).toEqual(`<p style="font-family: Inter;font-size: 16px;line-height: 22px;min-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;"><span>This is a paragraph</span></p>`);
       expect(VegaRTEContent.fromJSON(content, { autoMatchFormat: false }).toHtml()).toEqual(`<p><span>This is a paragraph</span></p>`);
       expect(VegaRTEContent.fromJSON(content, { autoMatchFormat: false }).toHtml()).toEqual(`<p><span>This is a paragraph</span></p>`);
     });

package/dist/collection/components/vega-rich-text-editor/test/extensions/table/caption-operation.test.js

@@ -0,0 +1,99 @@
+import { CaptionOperationEventHandler } from '../../../extensions/table/setting-event-handlers/caption-operation';
+import { TableSettingType } from '../../../extensions/table/setting-event-handlers/setting-event-handler.abstract';
+import { RTETableBlock } from '../../../extensions/table/dto/table-block';
+import { RTETableCaptionBlock, } from '../../../extensions/table/dto/table-caption-block';
+/**
+ * Lightweight helper to create a fresh table block with optional caption attached.
+ *
+ * @param {RTETableCaptionBlock | null | undefined} caption - Optional caption DTO used to seed the table.
+ * @returns {RTETableBlock} Table block instance wired with the provided caption.
+ */
+const createTableBlock = (caption) => {
+  const tableBlock = new RTETableBlock('table-id');
+  if (caption) {
+    tableBlock.setCaption(caption);
+  }
+  return tableBlock;
+};
+/**
+ * Creates a caption handler stub with cursor-sync side effects mocked out.
+ *
+ * @returns {CaptionOperationEventHandler} Configured handler ready for unit tests.
+ */
+const createHandler = () => {
+  const handler = new CaptionOperationEventHandler();
+  handler.syncCursorPosition = jest.fn();
+  return handler;
+};
+describe('CaptionOperationEventHandler', () => {
+  const extensionContext = {};
+  /**
+   * Guards that the provided block is a text block.
+   *
+   * @param {VegaRTEContentBlock | undefined} block - Candidate caption child.
+   * @returns {block is VegaRTETextBlock} True when the block exposes `nodes`.
+   */
+  const isTextBlock = (block) => Boolean(block && 'nodes' in block);
+  /**
+   * Extracts the first caption text node, if present.
+   *
+   * @param {VegaRTETableCaptionBlock | null | undefined} caption - Caption DTO emitted by `toJSON`.
+   * @returns {string | undefined} Placeholder or undefined when caption lacks text.
+   */
+  const getFirstCaptionText = (caption) => {
+    var _a, _b, _c;
+    const firstChild = (_a = caption === null || caption === void 0 ? void 0 : caption.children) === null || _a === void 0 ? void 0 : _a[0];
+    if (isTextBlock(firstChild)) {
+      return (_c = (_b = firstChild.nodes) === null || _b === void 0 ? void 0 : _b[0]) === null || _c === void 0 ? void 0 : _c.text;
+    }
+    return undefined;
+  };
+  it('creates captions pre-filled with placeholder guidance', () => {
+    var _a;
+    const handler = createHandler();
+    const tableBlock = createTableBlock();
+    handler.execute([TableSettingType.CAPTION, 'rte-table-caption'], extensionContext, tableBlock);
+    const captionJson = (_a = tableBlock.getCaption()) === null || _a === void 0 ? void 0 : _a.toJSON();
+    expect(getFirstCaptionText(captionJson)).toBe('');
+  });
+  it('restores the placeholder when caption content has been cleared', () => {
+    var _a;
+    const handler = createHandler();
+    const emptyCaption = RTETableCaptionBlock.from({
+      id: 'caption-id',
+      type: 'table-caption',
+      children: [],
+    });
+    emptyCaption.children = [];
+    const tableBlock = createTableBlock(emptyCaption);
+    handler.execute([TableSettingType.CAPTION, 'rte-table-caption'], extensionContext, tableBlock);
+    const captionJson = (_a = tableBlock.getCaption()) === null || _a === void 0 ? void 0 : _a.toJSON();
+    expect(getFirstCaptionText(captionJson)).toBe('');
+  });
+  it('preserves existing caption content when it is already populated', () => {
+    var _a;
+    const handler = createHandler();
+    const hydratedCaption = RTETableCaptionBlock.from({
+      id: 'caption-id',
+      type: 'table-caption',
+      children: [
+        {
+          id: 'paragraph-id',
+          type: 'paragraph',
+          nodes: [
+            {
+              id: 'text-id',
+              type: 'text',
+              text: 'Custom caption content',
+            },
+          ],
+        },
+      ],
+    });
+    const tableBlock = createTableBlock(hydratedCaption);
+    handler.execute([TableSettingType.CAPTION, 'rte-table-caption'], extensionContext, tableBlock);
+    expect(tableBlock.getCaption()).toBe(hydratedCaption);
+    const captionJson = (_a = tableBlock.getCaption()) === null || _a === void 0 ? void 0 : _a.toJSON();
+    expect(getFirstCaptionText(captionJson)).toBe('Custom caption content');
+  });
+});

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

@@ -0,0 +1,89 @@
+import { RTETableExtensionAnnotationTypeEnum, RTETableAnnotation, } from '../../../extensions/table/annotations/table-annotation';
+import { RTETableBlock } from '../../../extensions/table/dto/table-block';
+import { RTETableAnnotationsAction } from '../../../extensions/table/actions/table-annotations-action';
+describe('RTETableAnnotation', () => {
+  test('defaults width to 100% and includes border collapse in style', () => {
+    const annotation = new RTETableAnnotation();
+    const style = annotation.renderStyle();
+    expect(style).toEqual({ borderCollapse: 'collapse', margin: '0 auto' });
+  });
+  test('renderStyle handles alignment correctly', () => {
+    const leftAligned = new RTETableAnnotation({ alignment: 'left' });
+    expect(leftAligned.renderStyle().margin).toBe('0');
+    const rightAligned = new RTETableAnnotation({ alignment: 'right' });
+    expect(rightAligned.renderStyle().margin).toBe('0 0 0 auto');
+    const centerAligned = new RTETableAnnotation({ alignment: 'center' });
+    expect(centerAligned.renderStyle().margin).toBe('0 auto');
+  });
+  test('renderStyle merges provided values', () => {
+    const annotation = new RTETableAnnotation({
+      backgroundColor: '#fafafa',
+      border: { style: 'solid', width: '2px', color: '#123' },
+      height: '200px',
+      alignment: 'center',
+    });
+    expect(annotation.renderStyle()).toEqual({
+      borderCollapse: 'collapse',
+      backgroundColor: '#fafafa',
+      border: 'solid 2px #123',
+      height: '200px',
+      margin: '0 auto',
+    });
+  });
+  test('borderStr handles missing and provided borders', () => {
+    expect(new RTETableAnnotation({ border: undefined }).borderStr).toBeNull();
+    expect(new RTETableAnnotation({
+      border: { style: 'dotted', width: '3px', color: '#222' },
+    }).borderStr).toBe('dotted 3px #222');
+  });
+  test('clone duplicates all values', () => {
+    const original = new RTETableAnnotation({
+      backgroundColor: '#0f0',
+      border: { style: 'dashed', width: '1px', color: '#000' },
+      height: '50px',
+      alignment: 'right',
+    });
+    const clone = original.clone();
+    expect(clone).not.toBe(original);
+    expect(clone).toEqual(original);
+  });
+  test('from returns tuple with type constant', () => {
+    const [type, annotation] = RTETableAnnotation.from({
+      backgroundColor: '#abc',
+    });
+    expect(type).toBe(RTETableExtensionAnnotationTypeEnum.TABLE);
+    expect(annotation).toBeInstanceOf(RTETableAnnotation);
+    expect(annotation.backgroundColor).toBe('#abc');
+  });
+  test('toJSON filters undefined values', () => {
+    const annotation = new RTETableAnnotation({
+      backgroundColor: '#f00',
+      height: '20px',
+      border: undefined,
+    });
+    expect(annotation.toJSON()).toEqual({
+      table: {
+        backgroundColor: '#f00',
+        height: '20px',
+        alignment: 'center',
+      },
+    });
+  });
+  test('renderClass returns the extension helper class', () => {
+    expect(new RTETableAnnotation().renderClass()).toBe('v-rte--extension-table');
+  });
+  test('should apply annotation correctly', () => {
+    const tableBlock = new RTETableBlock('table-id');
+    tableBlock.apply(new RTETableAnnotationsAction({
+      backgroundColor: '#3c3ffa',
+    }));
+    expect(tableBlock.toJSON()).toEqual({
+      id: 'table-id',
+      type: 'table-block',
+      annotations: {
+        table: { backgroundColor: '#3c3ffa', alignment: 'center' },
+      },
+      children: [],
+    });
+  });
+});

package/dist/collection/components/vega-rich-text-editor/test/extensions/table/table-caption-annotations.test.js

@@ -0,0 +1,79 @@
+import { RTETableCaptionAnnotation } from '../../../extensions/table/annotations/table-caption-annotation';
+import { RTETableExtensionAnnotationTypeEnum } from '../../../extensions/table/annotations/table-annotation';
+describe('RTETableCaptionAnnotation', () => {
+  it('should have CAPTION type', () => {
+    const annotation = new RTETableCaptionAnnotation();
+    expect(annotation.type).toBe(RTETableExtensionAnnotationTypeEnum.CAPTION);
+  });
+  it('clone should return a new instance with same type', () => {
+    const annotation = new RTETableCaptionAnnotation();
+    const cloned = annotation.clone();
+    expect(cloned).toBeInstanceOf(RTETableCaptionAnnotation);
+    expect(cloned).not.toBe(annotation);
+    expect(cloned.type).toBe(annotation.type);
+  });
+  describe('renderClass', () => {
+    it('should return CSS class when not standalone', () => {
+      const annotation = new RTETableCaptionAnnotation();
+      const context = { standalone: false };
+      const className = annotation.renderClass(context);
+      expect(className).toBe('v-rte--extension-table-caption');
+    });
+    it('should return CSS class when context is undefined', () => {
+      const annotation = new RTETableCaptionAnnotation();
+      const className = annotation.renderClass();
+      expect(className).toBe('v-rte--extension-table-caption');
+    });
+    it('should return null when standalone', () => {
+      const annotation = new RTETableCaptionAnnotation();
+      const context = { standalone: true };
+      const className = annotation.renderClass(context);
+      expect(className).toBeNull();
+    });
+  });
+  describe('renderStyle', () => {
+    it('should return null when not standalone', () => {
+      const annotation = new RTETableCaptionAnnotation();
+      const context = { standalone: false };
+      const style = annotation.renderStyle(context);
+      expect(style).toBeNull();
+    });
+    it('should return null when context is undefined', () => {
+      const annotation = new RTETableCaptionAnnotation();
+      const style = annotation.renderStyle();
+      expect(style).toBeNull();
+    });
+    it('should return correct style when standalone', () => {
+      const annotation = new RTETableCaptionAnnotation();
+      const context = { standalone: true };
+      const style = annotation.renderStyle(context);
+      expect(style).toEqual({
+        padding: '8px',
+        border: '1px solid #ddd',
+        borderBottom: 'none',
+        backgroundColor: '#f7f7f7',
+        position: 'relative',
+        textAlign: 'center',
+        minHeight: '22px',
+      });
+    });
+  });
+  describe('toJSON', () => {
+    it('should return caption style JSON', () => {
+      const annotation = new RTETableCaptionAnnotation();
+      const json = annotation.toJSON();
+      expect(json).not.toBeNull();
+      expect(json).toEqual({
+        caption: {
+          padding: '8px 12px',
+          border: '1px solid #ddd',
+          borderBottom: 'none',
+          backgroundColor: '#f7f7f7',
+          position: 'relative',
+          textAlign: 'center',
+          minHeight: '22px',
+        },
+      });
+    });
+  });
+});