@globalpayments/vega 2.58.0 → 2.59.0

package/dist/collection/components/vega-rich-text-editor/test/dto/nodes/image-node.test.js

@@ -1,6 +1,8 @@
 import { RTEImageNode } from '../../../dto/nodes/image-node';
 import { RTEImageBlock } from '../../../dto/blocks/image-block';
 import { ImageAnnotationAction } from '../../../dto/actions/image-annotation-action';
+import stateEntityRenderingRegistry from '../../../slimmers/controllers/state-entity-rendering-registry';
+import { RTEDecoratorNode } from '../../../dto/nodes/decorator-node';
 describe('image node', () => {
   it('new RTEImageNode should work as expect', () => {
     const imageBlock = new RTEImageBlock('block-id');
@@ -20,6 +22,18 @@ describe('image node', () => {
     expect(RTEImageNode.from({ id: '2', type: 'image', url: 'mock-url', annotations: { size: 'md' } }, imageBlock) instanceof RTEImageNode).toBe(true);
     expect(RTEImageNode.from({ id: '2', type: 'image', url: 'mock-url', annotations: { alt: 'test' } }, imageBlock) instanceof RTEImageNode).toBe(true);
     expect(RTEImageNode.from({ id: '2', type: 'image', url: 'mock-url', annotations: { size: 'lg', alt: 'test' } }, imageBlock) instanceof RTEImageNode).toBe(true);
+    expect(RTEImageNode.from({
+      id: '2',
+      type: 'image',
+      url: 'mock-url',
+      annotations: {
+        size: 'lg',
+        alt: 'test',
+        customAttribute: { id: 'test' },
+        customClass: ['custom-class'],
+        customStyle: { padding: '20px' },
+      },
+    }, imageBlock) instanceof RTEImageNode).toBe(true);
   });
   it('toJSON method should work as expect', () => {
     const imageBlock = new RTEImageBlock('block-1');
@@ -76,4 +90,19 @@ describe('image node', () => {
       },
     });
   });
+  it('getRangeEndOffset should work as expect', () => {
+    const block = new RTEImageBlock('block-1');
+    const node = new RTEImageNode('1', 'mock-url', block);
+    expect(node.getRangeEndOffset()).toBe(1);
+  });
+  it('getRangeContainer should work as expect', () => {
+    const block = new RTEImageBlock('block-1');
+    const node = new RTEImageNode('1', 'mock-url', block);
+    const span = document.createElement('span');
+    const div = document.createElement('div');
+    div.className = RTEDecoratorNode.DECORATOR_CONTAINER_CLASS;
+    div.appendChild(span);
+    stateEntityRenderingRegistry.register(span, node);
+    expect(node.getRangeContainer()).toEqual(div);
+  });
 });

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

@@ -16,6 +16,12 @@ import { NodeAnnotationTypeEnum } from '../../../dto/annotations/node-annotation
 import stateEntityRenderingRegistry from '../../../slimmers/controllers/state-entity-rendering-registry';
 import { SelectionChangeAction } from '../../../dto/actions/selection-change-action';
 import { DeleteNodeAnnotationAction } from '../../../dto/actions/delete-node-annotation-action';
+import { UnderlineAnnotationAction } from '../../../dto/actions/underline-annotation-action';
+import { StrikethroughAnnotationAction } from '../../../dto/actions/strikethrough-annotation-action';
+import { ItalicAnnotationAction } from '../../../dto/actions/italic-annotation-action';
+import { RTEListBlock } from '../../../dto/blocks/list-block';
+import '../../../dto/setup';
+import { PlainTextAnnotation } from '../../../dto/annotations/plain-text-annotation';
 describe('text node', () => {
   it('new RTETextNode should work as expect', () => {
     const textBlock = new RTETextBlock('block-1', 'paragraph');
@@ -91,9 +97,8 @@ describe('text node', () => {
     const textBlock = new RTETextBlock('block-1', 'paragraph');
     const textNode = new RTETextNode('1', 'This is a text.', textBlock);
     textNode.apply(new BoldAnnotationAction(true));
-    expect(textNode.getAnnotationByType(NodeAnnotationTypeEnum.BOLD)).toEqual({
+    expect(textNode.getAnnotationByType(NodeAnnotationTypeEnum.BOLD).toJSON()).toEqual({
       bold: true,
-      type: 'BOLD',
     });
   });
   it('apply method should work as expect', () => {
@@ -376,9 +381,8 @@ describe('text node', () => {
     const textBlock = new RTETextBlock('block-1', 'paragraph');
     const textNode = new RTETextNode('1', 'This is a text.', textBlock);
     textNode.apply(new BoldAnnotationAction(true));
-    expect(textNode.getAnnotationByType(NodeAnnotationTypeEnum.BOLD)).toEqual({
+    expect(textNode.getAnnotationByType(NodeAnnotationTypeEnum.BOLD).toJSON()).toEqual({
       bold: true,
-      type: 'BOLD',
     });
     textNode.deleteAnnotationByType(NodeAnnotationTypeEnum.BOLD);
     expect(textNode.annotationMap.has(NodeAnnotationTypeEnum.BOLD)).toEqual(false);
@@ -408,4 +412,99 @@ describe('text node', () => {
     expect(textNode.getAnnotationByType(NodeAnnotationTypeEnum.BOLD)).toEqual(clonedNode.getAnnotationByType(NodeAnnotationTypeEnum.BOLD));
     expect(textNode.getAnnotationByType(NodeAnnotationTypeEnum.BOLD)).not.toBe(clonedNode.getAnnotationByType(NodeAnnotationTypeEnum.BOLD));
   });
+  it('should get the normal annotations styles correctly', () => {
+    const textBlock = new RTETextBlock('block-1', 'paragraph');
+    const textNode = new RTETextNode('1', 'This is a text.', textBlock);
+    textNode.apply(new BoldAnnotationAction(true));
+    textNode.apply(new ItalicAnnotationAction(true));
+    expect(textNode.getStyles({ standalone: true })).toEqual({ fontStyle: 'italic', fontWeight: '700' });
+  });
+  it('should get the merged annotations styles correctly', () => {
+    const textBlock = new RTETextBlock('block-1', 'paragraph');
+    const textNode = new RTETextNode('1', 'This is a text.', textBlock);
+    textNode.apply(new UnderlineAnnotationAction(true));
+    textNode.apply(new StrikethroughAnnotationAction(true));
+    expect(textNode.getStyles({ standalone: true })).toEqual({
+      textDecoration: 'underline line-through',
+    });
+  });
+  it('should get the complex annotations styles correctly', () => {
+    const textBlock = new RTETextBlock('block-1', 'paragraph');
+    const textNode = RTETextNode.from({
+      id: '1',
+      type: 'text',
+      text: `This is a text.`,
+      annotations: {
+        bold: null,
+        italic: false,
+        underline: true,
+        strikethrough: null,
+        textColor: 'green',
+      },
+    }, textBlock);
+    expect(textNode.getStyles({ standalone: true })).toEqual({
+      color: '#01801F',
+      textDecoration: 'underline',
+    });
+  });
+  it('toHtml should work as expect when set node with plainText annotation', () => {
+    const textBlock = RTETextBlock.from({
+      id: '1',
+      type: 'paragraph',
+      nodes: [
+        { id: '1-1', text: 'Plain text ', type: 'text', annotations: { plainText: true } },
+        { id: '1-2', text: 'with span', type: 'text' },
+        { id: '1-3', text: ' and ', type: 'text', annotations: { plainText: true } },
+        {
+          id: '1-4',
+          text: 'bold',
+          type: 'text',
+          annotations: { bold: true, customClass: ['my-class'], plainText: true },
+        },
+        { id: '1-5', text: ' text.', type: 'text', annotations: { plainText: true } },
+      ],
+    }, { autoMatchFormat: false });
+    expect(textBlock.toHtml()).toEqual('<p>Plain text <span>with span</span> and <span class="my-class" style="font-weight: 700;">bold</span> text.</p>');
+    const listBlock = RTEListBlock.from({
+      id: '1',
+      type: 'bullet-list',
+      blocks: [
+        {
+          id: '1-1',
+          type: 'list-item',
+          nodes: [{ id: '1-1-1', type: 'text', text: 'Item 1' }],
+        },
+        {
+          id: '1-2',
+          type: 'list-item',
+          nodes: [{ id: '1-1-2', type: 'text', text: 'Item 2' }],
+        },
+      ],
+    }, { autoMatchFormat: false });
+    expect(listBlock.toHtml()).toEqual('<ul><li><span>Item 1</span></li><li><span>Item 2</span></li></ul>');
+    listBlock.children[0].children[0].annotationMap.set(...PlainTextAnnotation.from(true));
+    expect(listBlock.toHtml()).toEqual('<ul><li>Item 1</li><li><span>Item 2</span></li></ul>');
+  });
+  it('getRangeEndOffset should work as expect', () => {
+    const textBlock = new RTETextBlock('block-1', 'paragraph');
+    const textNode = new RTETextNode('1', 'This is a text.', textBlock);
+    textBlock.children = [textNode];
+    expect(textNode.getRangeEndOffset()).toBe(15);
+    textNode.text = '\n';
+    expect(textNode.getRangeEndOffset()).toBe(0);
+    spyOn(textNode, 'isContentEditable').and.returnValue(false);
+    expect(textNode.getRangeEndOffset()).toBe(1);
+  });
+  it('getRangeContainer should work as expect', () => {
+    const textBlock = new RTETextBlock('block-1', 'paragraph');
+    const textNode = new RTETextNode('1', 'This is a text.', textBlock);
+    const span = document.createElement('span');
+    span.innerText = textNode.text;
+    const div = document.createElement('div');
+    div.appendChild(span);
+    stateEntityRenderingRegistry.register(span, textNode);
+    expect(textNode.getRangeContainer()).toEqual(span.firstChild);
+    spyOn(textNode, 'isContentEditable').and.returnValue(false);
+    expect(textNode.getRangeContainer()).toEqual(div);
+  });
 });

package/dist/collection/components/vega-rich-text-editor/test/element-to-dto-strategy/custom-attribute-annotation-handler.test.js

@@ -0,0 +1,49 @@
+import '../../../../polyfill/test-polyfill/unit/index';
+import { CustomAttributeAnnotationHandler } from '../../slimmers/controllers/helper/element-to-dto-strategy/annotation-handler/custom-attribute-annotation-handler';
+describe('CustomAttributeAnnotationHandler', () => {
+  let handler;
+  beforeEach(() => {
+    handler = new CustomAttributeAnnotationHandler();
+  });
+  function createElement(attrs) {
+    const el = document.createElement('div');
+    Object.entries(attrs).forEach(([key, value]) => el.setAttribute(key, value));
+    return el;
+  }
+  it('should include only valid custom attributes', () => {
+    const el = createElement({
+      'data-test': 'foo',
+      // eslint-disable-next-line @typescript-eslint/naming-convention
+      'custom_attr': 'bar',
+      'style': 'color:red',
+      'class': 'my-class',
+      'font-weight:': '700',
+      '700"': 'bad',
+      '_valid': 'yes',
+    });
+    const result = handler.handle(el);
+    expect(result).toEqual({
+      customAttribute: {
+        'data-test': 'foo',
+        // eslint-disable-next-line @typescript-eslint/naming-convention
+        'custom_attr': 'bar',
+        '_valid': 'yes',
+      },
+    });
+  });
+  it('should return empty object if no valid custom attributes', () => {
+    const el = createElement({
+      'style': 'color:red',
+      'class': 'my-class',
+      'font-weight:': '700',
+      '700"': 'bad',
+    });
+    const result = handler.handle(el);
+    expect(result).toEqual({});
+  });
+  it('should handle element with no attributes', () => {
+    const el = document.createElement('div');
+    const result = handler.handle(el);
+    expect(result).toEqual({});
+  });
+});

package/dist/collection/components/vega-rich-text-editor/test/element-to-dto-strategy/element-to-text-node-strategy.test.js

@@ -0,0 +1,38 @@
+import { InlineElementToTextNodeStrategy } from '../../slimmers/controllers/helper/element-to-dto-strategy/inline-element-to-text-node-strategy';
+import { PlainTextToTextNodeStrategy } from '../../slimmers/controllers/helper/element-to-dto-strategy/plain-text-to-text-node-strategy';
+describe('PlainTextToRTETextBlockStrategy InlineElementToTextNodeStrategy', () => {
+  it('should handle text node correctly', () => {
+    const strategy = new PlainTextToTextNodeStrategy();
+    const span = document.createElement('span');
+    span.textContent = 'Hello, world!';
+    expect(strategy.canHandle([span], 0)).toBe(0);
+    expect(strategy.canHandle([span.firstChild], 0)).toBe(1);
+    const result = strategy.handle([span.firstChild]);
+    strategy.appendChildBlocks();
+    expect(strategy.shouldProceedToElementChildren()).toBe(false);
+    expect(result).toEqual({
+      annotations: {},
+      id: expect.any(String),
+      type: 'text',
+      text: 'Hello, world!',
+    });
+  });
+  it('should handle empty text node correctly', () => {
+    const strategy = new InlineElementToTextNodeStrategy();
+    const span = document.createElement('span');
+    span.className = '';
+    expect(strategy.canHandle([span.firstChild], 0)).toBe(0);
+    expect(strategy.canHandle([span], 0)).toBe(1);
+    const result = strategy.handle([span], {
+      skipCustomAnnotations: true,
+    });
+    strategy.appendChildBlocks();
+    expect(strategy.shouldProceedToElementChildren()).toBe(false);
+    expect(result).toEqual({
+      annotations: {},
+      id: expect.any(String),
+      type: 'text',
+      text: '',
+    });
+  });
+});

package/dist/collection/components/vega-rich-text-editor/test/element-to-dto-strategy/html-element-to-annotation-generator.test.js

@@ -0,0 +1,26 @@
+import '../../../../polyfill/test-polyfill/unit/index';
+import HtmlElementToAnnotationGenerator from '../../slimmers/controllers/helper/element-to-dto-strategy/annotation-handler/html-element-to-annotation-generator';
+import { RTETextBlock } from '../../dto/blocks/text-block';
+describe('HtmlElementToAnnotationGenerator', () => {
+  it('should generate annotations with autoMatchFormat as expected', () => {
+    const element = document.createElement('h1');
+    element.style.fontSize = '22px';
+    expect(HtmlElementToAnnotationGenerator.generate(RTETextBlock, element)).toEqual({
+      customStyle: {
+        fontSize: '22px',
+      },
+      textStyle: 'heading-1',
+    });
+    expect(HtmlElementToAnnotationGenerator.generate(RTETextBlock, element, { autoMatchFormat: true })).toEqual({
+      customStyle: {
+        fontSize: '22px',
+      },
+      textStyle: 'heading-1',
+    });
+    expect(HtmlElementToAnnotationGenerator.generate(RTETextBlock, element, { autoMatchFormat: false })).toEqual({
+      customStyle: {
+        fontSize: '22px',
+      },
+    });
+  });
+});

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

@@ -0,0 +1,32 @@
+import { find } from '../../../utils/spec-utils';
+import { tryGetDocument } from '../../../utils/try-get-document';
+/**
+ * Mock text selection in the rich text editor content.
+ *
+ * @param {SpecPage} page - The SpecPage instance.
+ * @param {{ textEl: HTMLElement; startOffset: number; endOffset: number }} options - Options for text selection.
+ * @param {HTMLElement} options.textEl - The text element to select within.
+ * @param {number} options.startOffset - The start offset of the selection.
+ * @param {number} options.endOffset - The end offset of the selection.
+ */
+export const mockTextSelection = async (page, options) => {
+  const richTextEditorContent = find(page.body, 'vega-rich-text-editor >>> vega-rich-text-content');
+  richTextEditorContent.shadowRoot['getSelection'] = jest.fn(() => {
+    return {
+      rangeCount: 1,
+      removeAllRanges: jest.fn(),
+      getRangeAt: jest.fn().mockReturnValue({
+        startContainer: options.textEl.firstChild,
+        endContainer: options.textEl.firstChild,
+        commonAncestorContainer: options.textEl,
+        startOffset: options.startOffset,
+        endOffset: options.endOffset,
+        intersectsNode: jest.fn().mockReturnValue(true),
+      }),
+      addRange: jest.fn(),
+    };
+  });
+  tryGetDocument().dispatchEvent(new Event('selectionchange'));
+  jest.runOnlyPendingTimers(); // wait selectionchange debounce
+  await page.waitForChanges();
+};

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

@@ -24,10 +24,11 @@ export class VegaRichTextEditorToolbarButtonRenderer extends VegaSlimmer {
     return (h("button", { part: "rich-text-editor-toolbar-button", class: {
         'rich-text-editor-toolbar-btn': true,
         'rich-text-editor-toolbar-button-disabled': this.disabled,
+        'rich-text-editor-toolbar-button-hidden': this.hidden,
         'rich-text-editor-toolbar-button-selected': this.selected,
-      }, onClick: this.handleClick, disabled: this.disabled },
+      }, onClick: this.handleClick, disabled: this.disabled, hidden: this.hidden },
       h("vega-flex", { gap: "size-8", justifyContent: "center", alignItems: "center" },
-        h("vega-icon", { size: "size-16", color: this.iconColor, icon: VegaInternalIconManager.getIconKey(this.icon) }),
+        this.icon && (h("vega-icon", { size: "size-16", color: this.iconColor, icon: VegaInternalIconManager.getIconKey(this.icon) })),
         this.showArrowIcon && (h("vega-icon", { size: "size-8", color: "text-secondary", icon: VegaInternalIconManager.getIconKey('chevron-down') }))),
       h("slot", null)));
   }
@@ -40,6 +41,9 @@ export class VegaRichTextEditorToolbarButtonRenderer extends VegaSlimmer {
 __decorate([
   MapToComponentField()
 ], VegaRichTextEditorToolbarButtonRenderer.prototype, "disabled", void 0);
+__decorate([
+  MapToComponentField()
+], VegaRichTextEditorToolbarButtonRenderer.prototype, "hidden", void 0);
 __decorate([
   MapToComponentField()
 ], VegaRichTextEditorToolbarButtonRenderer.prototype, "selected", void 0);

package/dist/collection/components/vega-rich-text-editor/vega-rich-text-editor-toolbar-button/vega-rich-text-editor-toolbar-button.css

@@ -48,4 +48,7 @@
 }
 .rich-text-editor-toolbar-btn.rich-text-editor-toolbar-button-disabled vega-icon {
   color: rgba(var(--v-text-disabled, 176, 180, 181, 1));
+}
+.rich-text-editor-toolbar-btn.rich-text-editor-toolbar-button-hidden {
+  display: none;
 }

package/dist/collection/components/vega-rich-text-editor/vega-rich-text-editor-toolbar-button/vega-rich-text-editor-toolbar-button.js

@@ -39,6 +39,12 @@ export class VegaRichTextEditorToolbarButton {
      * @vegaVersion 2.34.0
      */
     this.disabled = false;
+    /**
+     * Specifies whether the rich text editor toolbar button element is hidden.
+     *
+     * @vegaVersion 2.59.0
+     */
+    this.hidden = false;
     /**
      * Specifies whether the rich text editor toolbar button element is selected.
      *
@@ -97,6 +103,27 @@ export class VegaRichTextEditorToolbarButton {
       "reflect": false,
       "defaultValue": "false"
     },
+    "hidden": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.59.0"
+          }],
+        "text": "Specifies whether the rich text editor toolbar button element is hidden."
+      },
+      "attribute": "hidden",
+      "reflect": false,
+      "defaultValue": "false"
+    },
     "selected": {
       "type": "boolean",
       "mutable": false,

package/dist/collection/components/vega-rich-text-editor/vega-rich-text-editor.css

@@ -56,11 +56,6 @@
   background-color: rgba(var(--v-bg-primary, 252, 252, 252, 1));
   border: 1px solid rgba(var(--v-border-input-field, 171, 198, 216, 1));
   border-radius: 8px;
-  font-family: "Inter", sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 24px;
-  letter-spacing: 0px;
   color: rgba(var(--v-text-primary, 32, 54, 69, 1));
   margin-top: 12px;
   overflow: auto;
@@ -70,33 +65,6 @@
   padding-bottom: 32px;
   padding-left: 16px;
 }
-@media screen and (min-width: 768px) and (max-width: 1023px) {
-  :host .rich-text-editor-container {
-    font-family: "Inter", sans-serif;
-    font-size: 16px;
-    font-weight: 400;
-    line-height: 24px;
-    letter-spacing: 0px;
-  }
-}
-@media screen and (min-width: 1024px) and (max-width: 1439px) {
-  :host .rich-text-editor-container {
-    font-family: "Inter", sans-serif;
-    font-size: 16px;
-    font-weight: 400;
-    line-height: 24px;
-    letter-spacing: 0px;
-  }
-}
-@media screen and (min-width: 1440px) and (max-width: 9999px) {
-  :host .rich-text-editor-container {
-    font-family: "Inter", sans-serif;
-    font-size: 16px;
-    font-weight: 400;
-    line-height: 24px;
-    letter-spacing: 0px;
-  }
-}
 :host .rich-text-editor-container:hover {
   border: 1px solid rgba(var(--v-border-input-field-hover, 115, 160, 190, 1));
 }
@@ -267,5 +235,12 @@
 }
 
 .vega-hidden {
+  display: none !important;
+}
+
+.source-view-container {
+  margin-top: 12px;
+}
+.source-view-container vega-code-block::part(editor-toolbar) {
   display: none;
 }

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

@@ -46,6 +46,7 @@ import { VegaInternalThemeManager } from '../../helpers/theme/internal-theme-man
 import { HistoryController } from './slimmers/controllers/history-controller';
 import { CodeBlockToolbarButtonSlimmer } from './slimmers/renderers/tools/code-block-toolbar-button-slimmer';
 import { InternalCodeBlockSelectionController } from './slimmers/controllers/internal-code-block-selection-controller';
+import { SourceEditToolbarButtonSlimmer } from './slimmers/renderers/tools/source-edit-toolbar-button-slimmer';
 /**
  * @vegaVersion 2.34.0
  */
@@ -89,6 +90,7 @@ export class VegaRichTextEditor {
     this.bulletsNumbersToolbarButtonSlimmer = new BulletsNumbersToolbarButtonSlimmer();
     this.horizontalAlignmentToolbarButtonSlimmer = new HorizontalAlignmentToolbarButtonSlimmer();
     this.codeBlockToolbarButtonSlimmer = new CodeBlockToolbarButtonSlimmer();
+    this.sourceEditToolbarButtonSlimmer = new SourceEditToolbarButtonSlimmer();
     this.placeholderNotifySlimmer = createSubStateNotifySlimmer(VegaRichTextEditor, 'placeholder', 'watchPlaceholder');
     this.disabledNotifySlimmer = createSubStateNotifySlimmer(VegaRichTextEditor, 'richTextContentEditable', 'watchRichTextContentEditable');
     this.richTextContentController = new RichTextContentController(this);
@@ -104,6 +106,7 @@ export class VegaRichTextEditor {
     this.richTextContentEditable = true;
     this.selectionMap = new Map();
     this.isInDarkMode = VegaInternalThemeManager.isDarkMode();
+    this.sourceView = false;
     /**
      * Specifies the label for the rich text editor.
      *
@@ -173,6 +176,19 @@ export class VegaRichTextEditor {
       ['image'],
       ['clearStyle'],
     ];
+    /**
+     * Determines whether to allow source edit mode in the rich text editor.
+     *
+     * @vegaVersion 2.59.0
+     */
+    this.allowSourceEdit = false;
+    /**
+     * Specifies the configuration options for source edit mode.
+     * It includes settings such as autoMatchFormat, which controls whether the editor automatically matches formatting when switching to source edit mode.
+     *
+     * @vegaVersion 2.59.0
+     */
+    this.sourceEditConfig = { autoMatchFormat: true };
     /**
      * Specifies the validation status of the rich text editor component.
      *
@@ -382,7 +398,7 @@ export class VegaRichTextEditor {
       "mutable": false,
       "complexType": {
         "original": "VegaRTEToolbarItem[][]",
-        "resolved": "VegaRTEToolbarItem[][]",
+        "resolved": "string[][]",
         "references": {
           "VegaRTEToolbarItem": {
             "location": "import",
@@ -401,6 +417,51 @@ export class VegaRichTextEditor {
       },
       "defaultValue": "[\n\t\t['textStyles'],\n\t\t['bold', 'italic', 'underline', 'strikethrough', 'code'],\n\t\t['textColor'],\n\t\t['horizontalAlignment', 'bulletsNumbers'],\n\t\t['moreIndent', 'lessIndent'],\n\t\t['link'],\n\t\t['image'],\n\t\t['clearStyle'],\n\t]"
     },
+    "allowSourceEdit": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.59.0"
+          }],
+        "text": "Determines whether to allow source edit mode in the rich text editor."
+      },
+      "attribute": "allow-source-edit",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "sourceEditConfig": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "VegaRTESourceEditConfig",
+        "resolved": "{ autoMatchFormat?: boolean; }",
+        "references": {
+          "VegaRTESourceEditConfig": {
+            "location": "import",
+            "path": "./interface"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.59.0"
+          }],
+        "text": "Specifies the configuration options for source edit mode.\nIt includes settings such as autoMatchFormat, which controls whether the editor automatically matches formatting when switching to source edit mode."
+      },
+      "defaultValue": "{ autoMatchFormat: true }"
+    },
     "isValid": {
       "type": "boolean",
       "mutable": true,
@@ -471,7 +532,8 @@ export class VegaRichTextEditor {
   static get states() { return {
     "richTextContentEditable": {},
     "selectionMap": {},
-    "isInDarkMode": {}
+    "isInDarkMode": {},
+    "sourceView": {}
   }; }
   static get events() { return [{
       "method": "vegaChange",
@@ -668,6 +730,9 @@ __decorate([
 __decorate([
   InjectVegaSlimmer()
 ], VegaRichTextEditor.prototype, "codeBlockToolbarButtonSlimmer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaRichTextEditor.prototype, "sourceEditToolbarButtonSlimmer", void 0);
 __decorate([
   InjectVegaSlimmer()
 ], VegaRichTextEditor.prototype, "placeholderNotifySlimmer", void 0);

package/dist/collection/constants/ui.js

@@ -83,6 +83,7 @@ export const VegaNativeEventName = [
   'labelButtonClick',
   'imageInserted',
   'reset',
+  'eventPreviewShow',
 ];
 // eslint-disable-next-line @typescript-eslint/typedef
 export const CssStates = ['default', 'hover', 'active', 'focus-visible'];

package/dist/collection/helpers/calendar/calendar-date.js

@@ -1,3 +1,4 @@
+import { VegaInternalTranslation } from '../translation';
 /**
  * Calendar date class
  */
@@ -111,4 +112,15 @@ export class CalendarDate {
     const { year, month, date } = calendarDate;
     return this._year === year && this._month === month && this._date === date;
   }
+  /**
+   * Get month name.
+   *
+   * @param {boolean} isShortName - Whether to get the short name or long name of the month
+   * @returns {string} The name of the month
+   */
+  getMonthName(isShortName = false) {
+    return VegaInternalTranslation.t(this.toDate().toLocaleDateString('en-US', {
+      month: isShortName ? 'short' : 'long',
+    }));
+  }
 }

package/dist/collection/helpers/calendar/calendar-event.js

@@ -1,6 +1,8 @@
 import calendarEventRepeatPatternFactory from '../../components/vega-calendar/slimmers/common/helpers/repeat-pattern/calendar-event-repeat-pattern-factory';
 import { generateUUID } from '../../utils/misc';
+import { VegaInternalTranslation } from '../translation';
 import { CalendarDate } from './calendar-date';
+import { formatDisplayTime, WeekdayLongNames } from './utils';
 const CalendarDateFormatReg = /^\d{1,2}\/\d{1,2}\/\d{4}/;
 const CalendarTimeFormatReg = /^\d{1,2}:\d{1,2}/;
 /** The `CalendarEvent` class in TypeScript represents a calendar event with methods to validate required fields, initialize dates and times, and determine if it is a group event. */
@@ -170,6 +172,28 @@ export class CalendarEvent {
     const currentDate = date.toDate();
     return startCalendarDate.toDate() <= currentDate && endCalendarDate.toDate() > currentDate;
   }
+  /**
+   * Generate repeat display string.
+   *
+   * @returns {string} repeat display string
+   */
+  generateRepeatString() {
+    var _a;
+    return ((_a = this.repeatPattern) === null || _a === void 0 ? void 0 : _a.generateRepeatString()) || '';
+  }
+  /**
+   * Generate date display string.
+   *
+   * @param {CalendarDate} viewDate - The `date` to display
+   * @param {TimeFormat} timeFormat - The `timeFormat` to use
+   * @returns {string} repeat display string
+   */
+  generateDateTimeString(viewDate, timeFormat) {
+    const weekDay = VegaInternalTranslation.t(Object.values(WeekdayLongNames)[viewDate.toDate().getDay()]);
+    const startTime = formatDisplayTime(timeFormat, this.startTime);
+    const endTime = formatDisplayTime(timeFormat, this.endTime);
+    return `${weekDay}, ${viewDate.date} ${viewDate.getMonthName(true)} ${viewDate.year} ${startTime} - ${endTime}`;
+  }
   /**
    * Get the number of minutes the event lasted
    *

package/dist/collection/helpers/calendar/test/calendar-date.test.js

@@ -68,4 +68,8 @@ describe('calendar-date', () => {
       isPreviousMonth: false,
     });
   });
+  it('should return as expected when call getMonthName', () => {
+    expect(new CalendarDate(2024, 2, 10).getMonthName()).toBe('February');
+    expect(new CalendarDate(2024, 2, 10).getMonthName(true)).toBe('Feb');
+  });
 });