@heartlandone/vega 2.88.0 → 2.90.0

package/dist/collection/components/vega-rich-text-editor/extensions/horizontal-line/filter-styles-strategies/horizontal-line-block/horizontal-line-filter-styles-strategy.js

@@ -0,0 +1,45 @@
+import { RTEFilterStylesStrategy, } from '../../../../dto/filter-styles-strategies/filter-styles-strategy.abstract';
+import { Predicate } from './predicate';
+/**
+ * Default visual styles for the `<hr>` element in the RTE.
+ * These styles match the CSS applied in `horizontal-line-block-styles.css`.
+ *
+ * @see {@link file://extensions/horizontal-line/renderers/horizontal-line-block-styles.css} — must stay in sync.
+ */
+export const HR_DEFAULT_STYLES = {
+  display: 'inline-block',
+  width: '100%',
+  height: '4px',
+  backgroundColor: 'rgb(222, 222, 222)',
+  borderWidth: '0px',
+};
+/**
+ * Filter styles strategy for horizontal line blocks.
+ * Strips default HR visual styles during output and refills them during input,
+ * ensuring source edit round-trips do not lose information.
+ */
+export class HorizontalLineFilterStylesStrategy extends RTEFilterStylesStrategy {
+  constructor() {
+    super(...arguments);
+    this.stylesToBeFiltered = HR_DEFAULT_STYLES;
+    this.elementTagName = 'hr';
+  }
+  /**
+   * @inheritDoc
+   */
+  canFilter(blockOrNodeInstance) {
+    return Predicate.isHorizontalLineBlock(blockOrNodeInstance.dtoName);
+  }
+  /**
+   * @inheritDoc
+   */
+  canRefill(_blockOrNodeClassName, element) {
+    return element.tagName.toLowerCase() === this.elementTagName;
+  }
+  /**
+   * @inheritDoc
+   */
+  toCssText() {
+    return this.buildCssTextForStyles(this.elementTagName, this.classNameToBeAdded);
+  }
+}

package/dist/collection/components/vega-rich-text-editor/extensions/horizontal-line/filter-styles-strategies/horizontal-line-block/predicate.js

@@ -0,0 +1,14 @@
+/**
+ * Predicate class provides static methods to check specific conditions on HTML elements or dto instances.
+ */
+export class Predicate {
+  /**
+   * Checks if the given class name corresponds to a horizontal line block.
+   *
+   * @param {string} className The class name to check.
+   * @returns {boolean} True if the class name corresponds to a horizontal line block, false otherwise.
+   */
+  static isHorizontalLineBlock(className) {
+    return className === 'RTEHorizontalLineBlock';
+  }
+}

package/dist/collection/components/vega-rich-text-editor/extensions/horizontal-line/horizontal-line-extension.js

@@ -0,0 +1,41 @@
+import { VegaRTEExtension } from '../extension.abstract';
+import { RTEHorizontalLineBlock } from './dto/horizontal-line-block';
+import { RTEHorizontalLineBlockRenderer } from './renderers/horizontal-line-block-renderer';
+import { RTEHorizontalLineToolbarButtonRenderer } from './renderers/horizontal-line-toolbar-button-renderer';
+import { HrToHorizontalLineBlockStrategy } from './action-handler-strategies/hr-to-horizontal-line-block-strategy';
+import { InsertHorizontalLineBlockStrategy } from './action-handler-strategies/horizontal-line-block-insert-strategy';
+import { INSERT_HORIZONTAL_LINE_BLOCK } from './actions/insert-horizontal-line-block-action';
+import { RTETextBlock } from '../../dto/blocks/text-block';
+import { RTEImageBlock } from '../../dto/blocks/image-block';
+import { VegaRTEContent } from '../../dto/content-state';
+import { HorizontalLineFilterStylesStrategy } from './filter-styles-strategies/horizontal-line-block/horizontal-line-filter-styles-strategy';
+/**
+ * Extension that adds horizontal line (`<hr>`) support to the Vega Rich Text Editor.
+ */
+export class VegaRTEHorizontalLineExtension extends VegaRTEExtension {
+  constructor() {
+    super();
+    this.blockRenderer = new RTEHorizontalLineBlockRenderer();
+    this.toolbarButtonRenderer = new RTEHorizontalLineToolbarButtonRenderer();
+    // Register basic block strategies (delete, append, paste, etc.)
+    this.registerBlockBasicStrategies(RTEHorizontalLineBlock.name);
+    // Register the block DTO class
+    this.registerNode('horizontal-line', RTEHorizontalLineBlock);
+    // Register the renderer
+    this.registerRenderer('horizontal-line', this.blockRenderer);
+    // Register the toolbar button
+    this.registerToolbarButtonRenderer('horizontalLine', this.toolbarButtonRenderer);
+    // Register HTML → DTO conversion strategy
+    this.registerElementToBlockDTOClassStrategy(new HrToHorizontalLineBlockStrategy());
+    // Register filter styles strategy for source edit round-trip
+    VegaRTEExtension.registerFilterStylesStrategy(RTEHorizontalLineBlock.dtoName, new HorizontalLineFilterStylesStrategy());
+  }
+}
+(() => {
+  const insertStrategy = new InsertHorizontalLineBlockStrategy();
+  // Register insert strategy for all block types that can be a target
+  VegaRTEExtension.registerActionHandleStrategy(VegaRTEContent.name, INSERT_HORIZONTAL_LINE_BLOCK, insertStrategy);
+  VegaRTEExtension.registerActionHandleStrategy(RTETextBlock.name, INSERT_HORIZONTAL_LINE_BLOCK, insertStrategy);
+  VegaRTEExtension.registerActionHandleStrategy(RTEImageBlock.name, INSERT_HORIZONTAL_LINE_BLOCK, insertStrategy);
+  VegaRTEExtension.registerActionHandleStrategy(RTEHorizontalLineBlock.name, INSERT_HORIZONTAL_LINE_BLOCK, insertStrategy);
+})();

package/dist/collection/components/vega-rich-text-editor/extensions/horizontal-line/renderers/horizontal-line-block-renderer.js

@@ -0,0 +1,37 @@
+import { VegaRTEExtensionRenderer } from '../../base-extension-renderer';
+import { RTEDecoratorNode } from '../../../dto/nodes/decorator-node';
+import styles from './horizontal-line-block-styles.css';
+/**
+ * Renderer for horizontal line blocks in the rich text editor.
+ */
+export class RTEHorizontalLineBlockRenderer extends VegaRTEExtensionRenderer {
+  /**
+   * @inheritDoc
+   */
+  doRender(createElement, block, rteContext) {
+    const node = block.children[0];
+    const customStyles = block.getStyles(rteContext);
+    const annotationClasses = block.getClasses(rteContext);
+    const hrClass = [RTEDecoratorNode.DECORATOR_NODE_CLASS, annotationClasses]
+      .filter(Boolean)
+      .join(' ');
+    return createElement('div', {
+      key: block.id,
+      class: `v-rte-horizontal-line ${RTEDecoratorNode.DECORATOR_CONTAINER_CLASS}`,
+      ref: this.useRef(block),
+    }, [
+      createElement('hr', {
+        key: (node === null || node === void 0 ? void 0 : node.id) || block.id + '-hr',
+        class: hrClass,
+        style: Object.keys(customStyles).length > 0 ? customStyles : undefined,
+        ref: node ? this.useRef(node) : undefined,
+      }),
+    ]);
+  }
+  /**
+   * @inheritDoc
+   */
+  injectRTEScopeStyles() {
+    return styles;
+  }
+}

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

@@ -0,0 +1,77 @@
+import { VegaRTEToolbarButtonRenderer } from '../../base-toolbar-button-renderer';
+import HorizontalLine from '../assets/horizontal-line';
+import { INSERT_HORIZONTAL_LINE_BLOCK, InsertHorizontalLineBlockAction, } from '../actions/insert-horizontal-line-block-action';
+import { ActionHandleStrategyRegistry } from '../../../dto/action-handle-strategies/action-handle-strategy-registry';
+import { UpdateCursorPositionAction } from '../../../dto/actions/update-cursor-position-action';
+import { VegaInternalIconManager } from '../../../../../helpers/icon/internal-icon-manager';
+import { VegaInternalTranslation } from '../../../../../helpers/translation/internal-translation-controller';
+/**
+ * Toolbar button renderer for horizontal line insertion.
+ */
+export class RTEHorizontalLineToolbarButtonRenderer extends VegaRTEToolbarButtonRenderer {
+  /**
+   * Renders the horizontal line toolbar button.
+   *
+   * @param {VegaRTECreateElementFunction} createElement - The function to create elements.
+   * @param {VegaRTEToolbarRenderContext} editorContext - The render context.
+   * @returns {VegaRTERenderResult} The rendered toolbar button.
+   */
+  render(createElement, editorContext) {
+    return this.renderButton(createElement, editorContext, {
+      icon: 'horizontal-line',
+      tooltip: { text: VegaInternalTranslation.t('Horizontal line') },
+    });
+  }
+  /**
+   * @inheritDoc
+   */
+  isDisabled(editorContext) {
+    const context = this.getExtensionContext(editorContext.host);
+    if (context) {
+      const { host, getSelectedNodes } = context;
+      const [startNode] = getSelectedNodes();
+      return startNode
+        ? host.disabled ||
+          !ActionHandleStrategyRegistry.canHandle(INSERT_HORIZONTAL_LINE_BLOCK, startNode.parent)
+        : host.disabled;
+    }
+    return false;
+  }
+  /**
+   * @inheritDoc
+   */
+  handleButtonClick(editorContext) {
+    if (this.isDisabled(editorContext)) {
+      return;
+    }
+    const context = this.getExtensionContext(editorContext.host);
+    if (context) {
+      const { host, getSelectedNodes, flushValue } = context;
+      const selectedNodes = getSelectedNodes();
+      const focusNode = selectedNodes[0];
+      const startOffset = editorContext.rteRange.startOffset;
+      const action = new InsertHorizontalLineBlockAction(focusNode, startOffset);
+      if (!focusNode) {
+        host.value.apply(action);
+      }
+      else if (focusNode.parent) {
+        focusNode.parent.apply(action);
+      }
+      if (action.nextFocusNode) {
+        host.value.apply(new UpdateCursorPositionAction(action.nextFocusNode, 0));
+      }
+      flushValue(host.value);
+    }
+  }
+  /**
+   * @inheritDoc
+   */
+  handleDropdownClick() {
+    // No dropdown for horizontal line
+  }
+}
+(() => {
+  VegaInternalIconManager.register({
+    'horizontal-line': HorizontalLine,
+  });
+})();

package/dist/collection/components/vega-rich-text-editor/extensions/languages/language-toolbar-button-renderer.js

@@ -2,13 +2,8 @@ import { methodPlaceholder } from 'vega-slimmer/core';
 import { VegaRTEToolbarButtonRenderer } from '../base-toolbar-button-renderer';
 /**
  * Toolbar button renderer for language selection in Vega Rich Text Editor.
- *
- * Each {@link HTMLVegaRichTextEditorElement} that uses a language extension receives its
- * **own** instance of this renderer, registered in the per-host map inside
- * {@link RTEDTORendererManager} via {@link VegaRTEExtension#prepareBeforeLoad}.  Because
- * every editor has a dedicated renderer, all state (label DOM ref, selected language, and
- * the language-change callback) is held in plain instance fields — no WeakMaps or shared
- * singletons are required.
+ * Each editor host gets its own instance, registered via
+ * {@link VegaRTEExtension#prepareBeforeLoad}, so renderer state is held in plain fields.
  */
 export class RTELanguageToolbarButtonRenderer extends VegaRTEToolbarButtonRenderer {
   constructor(languageList, languageChangeCallback, selectedLanguage = '') {
@@ -17,10 +12,9 @@ export class RTELanguageToolbarButtonRenderer extends VegaRTEToolbarButtonRender
     this.languageChangeCallback = null;
     this.selectedLanguage = '';
     this.labelRef = null;
+    this.translation = null;
     /**
-     * Handles the language selection event.
-     * Because each editor has its own renderer instance, the language-change callback
-     * is stored directly on this instance — no indirect context lookup is needed.
+     * Handles the language selection event from the dropdown.
      *
      * @param {string} itemKey - The key of the selected language item.
      */
@@ -35,15 +29,18 @@ export class RTELanguageToolbarButtonRenderer extends VegaRTEToolbarButtonRender
     this.selectedLanguage = selectedLanguage;
   }
   /**
-   * Updates the selected language and refreshes the button label text in-place,
-   * without requiring a full re-render of the toolbar.
+   * Updates the selected language and refreshes the button label text in-place
+   * without a full toolbar re-render. The label is routed through the translation
+   * helper so localization is preserved on imperative updates.
    *
    * @param {string} language The language key to set as selected.
    */
   setSelectedLanguage(language) {
+    var _a;
     this.selectedLanguage = language;
-    if (this.labelRef) {
-      this.labelRef.textContent = this.getLanguageLabelByKey(language);
+    if (((_a = this.labelRef) === null || _a === void 0 ? void 0 : _a.firstChild) && this.translation) {
+      const label = this.getLanguageLabelByKey(language);
+      this.labelRef.firstChild.nodeValue = this.translation.t(label);
     }
   }
   /**
@@ -58,7 +55,8 @@ export class RTELanguageToolbarButtonRenderer extends VegaRTEToolbarButtonRender
    * @inheritDoc
    */
   render(createElement, editorContext) {
-    return this.renderDropdown(createElement, editorContext, { source: this.languageList }, [
+    const translatedSource = this.languageList.map((item) => this.translateDropdownEntry(item, editorContext));
+    return this.renderDropdown(createElement, editorContext, { source: translatedSource }, [
       this.renderButton(createElement, editorContext, {
         label: this.getLanguageLabelByKey(this.selectedLanguage),
         showArrowIcon: true,
@@ -73,6 +71,7 @@ export class RTELanguageToolbarButtonRenderer extends VegaRTEToolbarButtonRender
    * @inheritDoc
    */
   renderButtonLabel(h, editorContext, label) {
+    this.translation = editorContext.translation;
     const isDisabled = this.isDisabled(editorContext);
     return h('vega-font', {
       variant: 'font-field-label-sm',
@@ -81,7 +80,7 @@ export class RTELanguageToolbarButtonRenderer extends VegaRTEToolbarButtonRender
       ref: (el) => {
         this.labelRef = el;
       },
-    }, label);
+    }, editorContext.translation.t(label));
   }
   /* istanbul ignore next */
   /**
@@ -103,4 +102,19 @@ export class RTELanguageToolbarButtonRenderer extends VegaRTEToolbarButtonRender
     const language = this.getListItemByKey(this.languageList, key);
     return (_a = language === null || language === void 0 ? void 0 : language.label) !== null && _a !== void 0 ? _a : 'Select Language';
   }
+  /**
+   * Recursively translates labels in a dropdown entry so that nested
+   * {@link RTEDropdownListGroup} children are also localized.
+   *
+   * @param {RTEDropdownListItem | RTEDropdownListGroup} entry The entry to translate.
+   * @param {VegaRTEToolbarRenderContext} editorContext The render context.
+   * @returns {RTEDropdownListItem | RTEDropdownListGroup} The translated entry.
+   */
+  translateDropdownEntry(entry, editorContext) {
+    const translatedLabel = editorContext.translation.t(entry.label);
+    if ('children' in entry) {
+      return Object.assign(Object.assign({}, entry), { label: translatedLabel, children: entry.children.map((child) => this.translateDropdownEntry(child, editorContext)) });
+    }
+    return Object.assign(Object.assign({}, entry), { label: translatedLabel });
+  }
 }

package/dist/collection/components/vega-rich-text-editor/extensions/line-height/line-height-toolbar-button-renderer.js

@@ -37,7 +37,7 @@ export class RTELineHeightToolbarButtonRenderer extends VegaRTEToolbarButtonRend
         showArrowIcon: true,
         tooltip: { text: VegaInternalTranslation.t('Line Height') },
       }),
-      this.renderDropdownListTemplate(createElement, dropdownItems),
+      this.renderDropdownListTemplate(createElement, dropdownItems, editorContext),
     ]);
   }
   /**

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

@@ -0,0 +1,34 @@
+import { VegaRTEExtension } from '../extension.abstract';
+/**
+ * Rich Text Editor extension that configures built-in link behavior.
+ */
+export class VegaRTELinkExtension extends VegaRTEExtension {
+  constructor(config = {}) {
+    super();
+    this.config = config;
+  }
+  /**
+   * Store config per host so both toolbar-link and inline-link editors
+   * can consistently read the extension settings.
+   *
+   * @param {HTMLElement} host - The host rich text editor element.
+   */
+  prepareBeforeLoad(host) {
+    VegaRTELinkExtension.configStore.set(host, this.config);
+  }
+  /**
+   * Remove config for the current host when the extension is destroyed.
+   */
+  destroyExtension() {
+    var _a;
+    if ((_a = this.extensionContext) === null || _a === void 0 ? void 0 : _a.host) {
+      VegaRTELinkExtension.configStore.delete(this.extensionContext.host);
+    }
+  }
+}
+/**
+ * Per-host config store. Declare as static readonly to isolate config per editor host.
+ *
+ * @type {RTEExtensionStateStore<VegaRTELinkExtensionConfig>}
+ */
+VegaRTELinkExtension.configStore = VegaRTELinkExtension.createStateStore();

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,22 @@
+// eslint-disable-next-line spellcheck/spell-checker
+// The regex checks for a protocol prefix (xxxx:// or xxxx:)
+// or a leading special character (such as /, #, +, etc., but not letters/digits/underscore).
+const PROTOCOL_REG_EXP = /^((\w+:(\/{2,})?)|(\W))/i;
+/**
+ * Normalizes URL by prepending default protocol when URL does not already include one.
+ *
+ * @param {string} url URL value to normalize.
+ * @param {string} defaultProtocol Configured default protocol, for example: https:// or mailto:.
+ * @returns {string} Normalized URL.
+ */
+export function normalizeUrlByDefaultProtocol(url, defaultProtocol) {
+  const input = (url || '').trim();
+  if (!input) {
+    return input;
+  }
+  const normalizedDefaultProtocol = (defaultProtocol || '').trim();
+  if (!normalizedDefaultProtocol || PROTOCOL_REG_EXP.test(input)) {
+    return input;
+  }
+  return `${normalizedDefaultProtocol}${input}`;
+}

package/dist/collection/components/vega-rich-text-editor/extensions/rte-extension-state-store.js

@@ -0,0 +1,37 @@
+/**
+ * Generic per-host state store using WeakMap keyed by HTMLVegaRichTextEditorElement.
+ * Create via {@link VegaRTEExtension.createStateStore} and declare as `static readonly` on your extension class.
+ *
+ * @template T - The type of the state value to store per host.
+ */
+export class RTEExtensionStateStore {
+  constructor() {
+    this.stateMap = new WeakMap();
+  }
+  /**
+   * Store a value for the given host.
+   *
+   * @param {HTMLElement} host - The editor host.
+   * @param {T} value - The value to store.
+   */
+  set(host, value) {
+    this.stateMap.set(host, value);
+  }
+  /**
+   * Retrieve the stored value for the given host.
+   *
+   * @param {Nullable<HTMLElement>} host - The editor host.
+   * @returns {Nullable<T>} The stored value, or null if not found.
+   */
+  get(host) {
+    return host ? this.stateMap.get(host) : null;
+  }
+  /**
+   * Remove the stored value for the given host.
+   *
+   * @param {HTMLElement} host - The editor host.
+   */
+  delete(host) {
+    this.stateMap.delete(host);
+  }
+}

package/dist/collection/components/vega-rich-text-editor/extensions/tokens/token-toolbar-button-renderer.js

@@ -25,7 +25,7 @@ export class RTETokenToolbarButtonRenderer extends VegaRTEToolbarButtonRenderer
         showArrowIcon: true,
         tooltip: { text: 'Insert token' },
       }),
-      this.renderDropdownListTemplate(createElement, this.tokenList),
+      this.renderDropdownListTemplate(createElement, this.tokenList, editorContext),
     ]);
   }
   /**

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

@@ -19,9 +19,11 @@ export { RTELanguageToolbarButtonRenderer } from './extensions/languages/languag
 export { VegaRTELanguageExtension } from './extensions/languages/language-extension';
 export { VegaRTEFunctionExtension } from './extensions/functions/function-extension';
 export { VegaRTETableExtension } from './extensions/table/table-extension';
+export { VegaRTEHorizontalLineExtension } from './extensions/horizontal-line/horizontal-line-extension';
 export { VegaRTESpecialCharactersExtension } from './extensions/special-characters/special-characters-extension';
 export { VegaRTESpecialCharactersEssentials, VegaRTESpecialCharactersLatin, VegaRTESpecialCharactersMathematical, VegaRTESpecialCharactersArrows, VegaRTESpecialCharactersCurrency, VegaRTESpecialCharactersText, } from './extensions/special-characters/constants/default-categories';
 export { VegaRTELineHeightExtension } from './extensions/line-height/line-height-extension';
+export { VegaRTELinkExtension } from './extensions/link/link-extension';
 // actions
 export { ModifyContentAction, ModifyContentActionType } from './dto/actions/modify-content-action.abstract';
 export { AppendChildrenAction } from './dto/actions/append-child-nodes-action';

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

@@ -64,6 +64,14 @@ export class HtmlBlockStrategy extends BlockToRTEBlockStrategyAbstract {
    * @returns {boolean} True if the element should be treated as inline content.
    */
   isInlineTagWithoutBlockChildren(element, options) {
+    // An empty always-inline tag (e.g. a loose <br>) is phrasing content and must
+    // never become a standalone html-block — it has to stay inline so it becomes an
+    // editable line-break text node (matching <p><br></p>) instead of a non-editable
+    // html-block. Non-empty always-inline tags (e.g. <a> wrapping a block <video>)
+    // fall through to the regular block-children checks below.
+    if (ALWAYS_INLINE_TAGS.has(element.nodeName) && element.childNodes.length === 0) {
+      return true;
+    }
     if (isInBlockTextContext(element)) {
       // Empty elements that are not recognized inline elements should not
       // be forced inline — they may represent block-level embedded content

package/dist/collection/components/vega-rich-text-editor/slimmers/controllers/helper/element-to-dto-strategy/inline-element-to-text-node-strategy.js

@@ -1,3 +1,14 @@
+var __rest = (this && this.__rest) || function (s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+    t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function")
+    for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+      if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+        t[p[i]] = s[p[i]];
+    }
+  return t;
+};
 import { isHTMLElement } from '../../../../../../utils/ui';
 import { ElementToTextNodeStrategy } from './element-to-text-node-strategy';
 import htmlElementToAnnotationGenerator from './annotation-handler/html-element-to-annotation-generator';
@@ -31,7 +42,13 @@ export class InlineElementToTextNodeStrategy extends ElementToTextNodeStrategy {
         }
         : annotations }, options));
     if (child.nodeName === 'BR') {
-      return this.generateTextNode('\n', curAnnotations);
+      // Represent <br> as a plain '\n' text node; the renderer emits <br> for text === '\n'.
+      // Carrying the br as an INLINE_HTML annotation here would let it suppress later
+      // user-typed characters at the same caret position (VD-9229). br is void so when
+      // it ends up at the top of the inlineHtml chain it has no parent wrapper to keep.
+      const { inlineHtml } = curAnnotations, rest = __rest(curAnnotations, ["inlineHtml"]);
+      const brAnnotations = inlineHtml && inlineHtml.htmlTag === 'br' ? rest : curAnnotations;
+      return this.generateTextNode('\n', brAnnotations);
     }
     else if (child.childNodes.length === 0) {
       // For empty dom, there will be no internal iteration, we need to handle it directly here.

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

@@ -55,7 +55,9 @@ export class ToolbarRenderer extends VegaSlimmer {
     return (h("vega-flex", { gap: "size-8", alignItems: "center", flexWrap: "wrap" },
       this.allowSourceEdit && (h(Fragment, null,
         h("div", { class: "toolbar-btn-group" }, this.sourceEditToolbarButtonSlimmer.render()),
-        this.toolbarItems.length > 0 && totalVisibleCount > 0 && this.renderVegaDivider())),
+        this.uniqueToolbarItems.length > 0 &&
+          totalVisibleCount > 0 &&
+          this.renderVegaDivider())),
       renderedItems));
   }
   renderVegaDivider() {
@@ -69,7 +71,7 @@ export class ToolbarRenderer extends VegaSlimmer {
    */
   renderToolbarItems() {
     let totalVisibleCount = 0;
-    const renderedItems = this.toolbarItems.map((group) => {
+    const renderedItems = this.uniqueToolbarItems.map((group) => {
       let visibleCountPerGroup = 0;
       const groupElement = group
         .map((item) => {
@@ -105,7 +107,7 @@ export class ToolbarRenderer extends VegaSlimmer {
 }
 __decorate([
   MapToComponentField()
-], ToolbarRenderer.prototype, "toolbarItems", void 0);
+], ToolbarRenderer.prototype, "uniqueToolbarItems", void 0);
 __decorate([
   MapToComponentField()
 ], ToolbarRenderer.prototype, "allowSourceEdit", void 0);

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

@@ -14,7 +14,7 @@ export class VegaRichTextEditorRenderer extends VegaSlimmer {
   constructor() {
     super(...arguments);
     this.renderHintMessage = () => {
-      return h("vega-text", null, this.hint);
+      return h("vega-text", { text: this.hint });
     };
     this.renderTextContent = () => {
       return (h("div", { class: {

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

@@ -115,6 +115,19 @@ export class VegaRichTextEditor {
     this.selectionMap = new Map();
     this.isInDarkMode = VegaInternalThemeManager.isDarkMode();
     this.sourceView = false;
+    /**
+     * Internal state that holds unique toolbar items.
+     * Computed from `toolbarItems` to ensure each button renders only once.
+     *
+     *
+     * When `toolbarItems` contains duplicates across groups (e.g.,
+     * `[['bold'], ['italic'], ['bold']]`), only the first occurrence of each
+     * button is preserved. The group structure is maintained, but duplicate
+     * buttons are filtered out.
+     *
+     * @internal
+     */
+    this.uniqueToolbarItems = VegaRTEPresetToolbarItems;
     /**
      * Specifies the label for the rich text editor.
      *
@@ -250,6 +263,9 @@ export class VegaRichTextEditor {
   watchValueUpdate() {
     methodPlaceholder();
   }
+  watchToolbarItems() {
+    this.syncUniqueToolbarItems();
+  }
   watchValidationRules() {
     methodPlaceholder();
   }
@@ -258,10 +274,28 @@ export class VegaRichTextEditor {
   }
   componentWillLoad() {
     this.richTextContentController.syncRichTextContentEditable();
+    this.syncUniqueToolbarItems();
   }
   render() {
     return sanitizeVegaComponent(this.vegaRichTextEditorRenderer.render(), this.host);
   }
+  /**
+   * Synchronizes {@link uniqueToolbarItems} from {@link toolbarItems} using global uniqueness enforcement.
+   *
+   * Example:
+   * - input: [["bold", "italic"], ["bold", "link"], ["italic"]]
+   * - output: [["bold", "italic"], ["link"], []]
+   */
+  syncUniqueToolbarItems() {
+    const uniqueToolbarButtonSet = new Set();
+    this.uniqueToolbarItems = this.toolbarItems.map((toolbarItemGroup) => toolbarItemGroup.filter((toolbarItem) => {
+      if (uniqueToolbarButtonSet.has(toolbarItem)) {
+        return false;
+      }
+      uniqueToolbarButtonSet.add(toolbarItem);
+      return true;
+    }));
+  }
   static get is() { return "vega-rich-text-editor"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() { return {
@@ -639,7 +673,8 @@ export class VegaRichTextEditor {
     "richTextContentEditable": {},
     "selectionMap": {},
     "isInDarkMode": {},
-    "sourceView": {}
+    "sourceView": {},
+    "uniqueToolbarItems": {}
   }; }
   static get events() { return [{
       "method": "vegaChange",
@@ -792,6 +827,9 @@ export class VegaRichTextEditor {
     }, {
       "propName": "value",
       "methodName": "watchValueUpdate"
+    }, {
+      "propName": "toolbarItems",
+      "methodName": "watchToolbarItems"
     }, {
       "propName": "validationRules",
       "methodName": "watchValidationRules"