@mgdis/mg-components 6.24.0 → 6.26.0

package/dist/collection/components/molecules/inputs/mg-input-numeric/mg-input-numeric.js

@@ -3,7 +3,7 @@ import { ClassList, isValidString, toString } from "@mgdis/core-ui-helpers/dist/
 import { normalizeBooleanAttributes } from "@mgdis/core-ui-helpers/dist/stencil";
 import { localeCurrency, localeNumber, localePercent, localeUnit } from "@mgdis/core-ui-helpers/dist/locale";
 import { types, formats } from "./mg-input-numeric.conf";
-import { classReadonly, classDisabled, widths } from "../mg-input/mg-input.conf";
+import { classReadonly, classDisabled, widths, } from "../mg-input/mg-input.conf";
 import { initLocales } from "../../../../locales/";
 /**
  * @slot append-input - Content to display next to the input
@@ -137,7 +137,9 @@ export class MgInputNumeric {
                 else {
                     const formattedMin = this.formatErrorValue(this.min);
                     const formattedMax = this.formatErrorValue(this.max);
-                    this.errorMessage = this.messages.input.numeric.error[inputError].replace('{min}', formattedMin).replace('{max}', formattedMax);
+                    this.errorMessage = this.messages.input.numeric.error[inputError]
+                        .replace('{min}', formattedMin)
+                        .replace('{max}', formattedMax);
                 }
             }
         };
@@ -146,7 +148,7 @@ export class MgInputNumeric {
          * @returns error code
          */
         this.getInputError = () => {
-            const hasNotEmptyValues = (toControl) => !toControl.some(value => [null, undefined].includes(value));
+            const hasNotEmptyValues = (toControl) => !toControl.some((value) => [null, undefined].includes(value));
             // required
             if (!this.input.checkValidity() && this.input.validity.valueMissing) {
                 return 'required';
@@ -160,7 +162,8 @@ export class MgInputNumeric {
                 return 'max';
             }
             // both min and max values are set
-            if (hasNotEmptyValues([this.min, this.max, this.numericValue]) && (this.numericValue < this.min || this.numericValue > this.max)) {
+            if (hasNotEmptyValues([this.min, this.max, this.numericValue]) &&
+                (this.numericValue < this.min || this.numericValue > this.max)) {
                 return 'minMax';
             }
             return null;
@@ -275,7 +278,7 @@ export class MgInputNumeric {
     }
     watchMgWidth(newValue) {
         // reset width class
-        widths.forEach(width => {
+        widths.forEach((width) => {
             this.classCollection.delete(`mg-c-input--width-${width}`);
         });
         // apply new width
@@ -319,7 +322,7 @@ export class MgInputNumeric {
         // - Async operations are completed
         // - No timing issues with Stencil's render cycle
         // - Keep everything in sync both inside and outside the component
-        return new Promise(resolve => {
+        return new Promise((resolve) => {
             requestAnimationFrame(() => {
                 this.checkValidity();
                 this.setErrorMessage();
@@ -366,7 +369,7 @@ export class MgInputNumeric {
             // - Async operations are completed
             // - No timing issues with Stencil's render cycle
             // - Keep everything in sync both inside and outside the component
-            return new Promise(resolve => {
+            return new Promise((resolve) => {
                 requestAnimationFrame(() => {
                     // unlock validity check by reseting customErrorMessage
                     this.customErrorMessage = { lock: false };
@@ -401,7 +404,10 @@ export class MgInputNumeric {
      * @returns Returns true if the value is valid, otherwise false.
      */
     isValidValue(value, regex, integer, decimal) {
-        return (['', '-'].includes(value) || (regex.exec(value) !== null && integer.length <= this.integerLength && decimal.length <= (this.type === 'integer' ? 0 : this.decimalLength)));
+        return (['', '-'].includes(value) ||
+            (regex.exec(value) !== null &&
+                integer.length <= this.integerLength &&
+                decimal.length <= (this.type === 'integer' ? 0 : this.decimalLength)));
     }
     /**
      * Updates the component values based on the validated input value.
@@ -412,7 +418,10 @@ export class MgInputNumeric {
         if (this.input !== undefined) {
             this.input.value = this.value;
         }
-        this.numericValue = !['', null].includes(this.value) && !isNaN(parseFloat(this.value)) ? parseFloat(this.value.replace(',', '.')) : null;
+        this.numericValue =
+            !['', null].includes(this.value) && !isNaN(parseFloat(this.value))
+                ? parseFloat(this.value.replace(',', '.'))
+                : null;
         if (newValue === null || (newValue === this.storedValue && !Object.is(this.numericValue, -0))) {
             this.valueChange.emit(this.numericValue);
         }
@@ -462,7 +471,7 @@ export class MgInputNumeric {
      * @returns HTML Element
      */
     render() {
-        return (h("mg-input", { key: '734f1734139c5919481693c869da68586f18a92f', label: this.label, identifier: this.identifier, class: this.classCollection.join(), labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.readonly && this.value === undefined ? 'label' : this.tooltipPosition, helpText: this.formatHelpText(this.helpText), errorMessage: this.errorMessage }, this.readonly
+        return (h("mg-input", { key: 'dbf435211890922742cbead9ab3a738b5219df44', label: this.label, identifier: this.identifier, class: this.classCollection.join(), labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.readonly && this.value === undefined ? 'label' : this.tooltipPosition, helpText: this.formatHelpText(this.helpText), errorMessage: this.errorMessage }, this.readonly
             ? this.readonlyValue && this.renderReadonly()
             : [
                 h("input", { key: "input", type: "text", class: "mg-c-input__box mg-c-input__box--width", value: this.displayValue(), id: this.identifier, name: this.name, placeholder: this.placeholder, title: this.placeholder, disabled: this.disabled, required: this.required, autocomplete: "off", "aria-invalid": (this.invalid === true).toString(), onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, ref: (el) => {
@@ -1030,7 +1039,7 @@ export class MgInputNumeric {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Emited event when value change"
+                    "text": "Emitted event when value change"
                 },
                 "complexType": {
                     "original": "number",
@@ -1045,7 +1054,7 @@ export class MgInputNumeric {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Emited event when checking validity"
+                    "text": "Emitted event when checking validity"
                 },
                 "complexType": {
                     "original": "HTMLMgInputNumericElement['valid']",

package/dist/collection/components/molecules/inputs/mg-input-password/mg-input-password.js

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
 import { ClassList, isValidString } from "@mgdis/core-ui-helpers/dist/utils";
 import { normalizeBooleanAttributes } from "@mgdis/core-ui-helpers/dist/stencil";
-import { classReadonly, classDisabled, widths } from "../mg-input/mg-input.conf";
+import { classReadonly, classDisabled, widths, } from "../mg-input/mg-input.conf";
 import { initLocales } from "../../../../locales";
 export class MgInputPassword {
     constructor() {
@@ -127,7 +127,7 @@ export class MgInputPassword {
     }
     watchMgWidth(newValue) {
         // reset width class
-        widths.forEach(width => {
+        widths.forEach((width) => {
             this.classCollection.delete(`mg-c-input--width-${width}`);
         });
         // apply new width
@@ -151,7 +151,7 @@ export class MgInputPassword {
         // - Async operations are completed
         // - No timing issues with Stencil's render cycle
         // - Keep everything in sync both inside and outside the component
-        return new Promise(resolve => {
+        return new Promise((resolve) => {
             requestAnimationFrame(() => {
                 this.checkValidity();
                 this.setErrorMessage();
@@ -198,7 +198,7 @@ export class MgInputPassword {
             // - Async operations are completed
             // - No timing issues with Stencil's render cycle
             // - Keep everything in sync both inside and outside the component
-            return new Promise(resolve => {
+            return new Promise((resolve) => {
                 requestAnimationFrame(() => {
                     // unlock validity check by reseting customErrorMessage
                     this.customErrorMessage = { lock: false };
@@ -250,10 +250,11 @@ export class MgInputPassword {
      * @returns HTML Element
      */
     render() {
-        return (h("mg-input", { key: 'fb26a8db11651950de2fe01600443bf2d6cad9e6', label: this.label, identifier: this.identifier, class: this.classCollection.join(), labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.readonly && this.value === undefined ? 'label' : this.tooltipPosition, helpText: this.helpText, errorMessage: this.errorMessage }, this.readonly ? (this.value !== undefined && h("b", { class: "mg-c-input__readonly-value" }, '•'.repeat(this.value.length))) : (h("span", { class: "mg-c-input__input-group" }, h("input", { type: this.displayPassword ? 'text' : 'password', class: "mg-c-input__box mg-c-input__box--width", value: this.value, id: this.identifier, name: this.name, placeholder: this.placeholder, title: this.placeholder, disabled: this.disabled, required: this.required, maxlength: this.maxlength, "aria-invalid": (this.invalid === true).toString(), onInput: this.handleInput, onBlur: this.handleBlur, ref: (el) => {
+        const displayPasswordIcon = this.displayPassword ? 'eye-slash' : 'eye';
+        return (h("mg-input", { key: '913d0653faad21f56cb930dfdc0947a0747f17ad', label: this.label, identifier: this.identifier, class: this.classCollection.join(), labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.readonly && this.value === undefined ? 'label' : this.tooltipPosition, helpText: this.helpText, errorMessage: this.errorMessage }, this.readonly ? (this.value !== undefined && h("b", { class: "mg-c-input__readonly-value" }, '•'.repeat(this.value.length))) : (h("span", { class: "mg-c-input__input-group" }, h("input", { type: this.displayPassword ? 'text' : 'password', class: "mg-c-input__box mg-c-input__box--width", value: this.value, id: this.identifier, name: this.name, placeholder: this.placeholder, title: this.placeholder, disabled: this.disabled, required: this.required, maxlength: this.maxlength, "aria-invalid": (this.invalid === true).toString(), onInput: this.handleInput, onBlur: this.handleBlur, ref: (el) => {
                 if (el !== null)
                     this.input = el;
-            } }), h("mg-button", { label: this.messages.input.password[this.displayPassword ? 'hide' : 'display'], disabled: this.disabled, variant: "flat", class: "mg-c-input__append-button", "is-icon": true, onClick: this.toggleDisplayPassword, "aria-controls": this.identifier }, h("mg-icon", { class: "mg-c-input__input-icon", icon: (this.displayPassword ? 'eye-slash' : 'eye') }))))));
+            } }), h("mg-button", { label: this.messages.input.password[this.displayPassword ? 'hide' : 'display'], disabled: this.disabled, variant: "flat", class: "mg-c-input__append-button", "is-icon": true, onClick: this.toggleDisplayPassword, "aria-controls": this.identifier }, h("mg-icon", { class: "mg-c-input__input-icon", icon: displayPasswordIcon }))))));
     }
     static get is() { return "mg-input-password"; }
     static get encapsulation() { return "shadow"; }
@@ -632,7 +633,7 @@ export class MgInputPassword {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Emited event when value change"
+                    "text": "Emitted event when value change"
                 },
                 "complexType": {
                     "original": "HTMLMgInputPasswordElement['value']",
@@ -652,7 +653,7 @@ export class MgInputPassword {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Emited event when checking validity"
+                    "text": "Emitted event when checking validity"
                 },
                 "complexType": {
                     "original": "HTMLMgInputPasswordElement['valid']",

package/dist/collection/components/molecules/inputs/mg-input-radio/mg-input-radio.js

@@ -1,14 +1,16 @@
 import { h } from "@stencil/core";
 import { ClassList, allItemsAreString, isValidString, toString } from "@mgdis/core-ui-helpers/dist/utils";
 import { normalizeBooleanAttributes } from "@mgdis/core-ui-helpers/dist/stencil";
-import { classReadonly, classDisabled, classFieldset } from "../mg-input/mg-input.conf";
+import { classReadonly, classDisabled, classFieldset, } from "../mg-input/mg-input.conf";
 import { initLocales } from "../../../../locales";
 /**
  * type Option validation function
  * @param option - radio option
  * @returns radio option type is valid
  */
-const isOption = (option) => typeof option === 'object' && typeof option.title === 'string' && option.value !== undefined;
+const isOption = (option) => typeof option === 'object' &&
+    typeof option.title === 'string' &&
+    option.value !== undefined;
 export class MgInputRadio {
     constructor() {
         /************
@@ -114,7 +116,7 @@ export class MgInputRadio {
             this.readonlyValue = newValue;
         }
         else if (Array.isArray(this.items) && this.items.every(isOption)) {
-            this.readonlyValue = (_a = this.items.find(item => item.value === newValue)) === null || _a === void 0 ? void 0 : _a.title;
+            this.readonlyValue = (_a = this.items.find((item) => item.value === newValue)) === null || _a === void 0 ? void 0 : _a.title;
         }
         else {
             this.readonlyValue = null;
@@ -128,10 +130,10 @@ export class MgInputRadio {
         }
         // String array
         else if (allItemsAreString(newValue)) {
-            this.options = newValue.map(item => ({ title: item, value: item, disabled: this.disabled }));
+            this.options = newValue.map((item) => ({ title: item, value: item, disabled: this.disabled }));
         }
         // Object array
-        else if (newValue && newValue.every(item => isOption(item))) {
+        else if (newValue && newValue.every((item) => isOption(item))) {
             this.options = newValue;
         }
         else {
@@ -151,7 +153,7 @@ export class MgInputRadio {
             this.classCollection.delete(classReadonly);
     }
     handleValidityChange(newValue, _oldValue, prop) {
-        this.inputs.forEach(input => {
+        this.inputs.forEach((input) => {
             input[prop] = newValue;
         });
         this.checkValidity();
@@ -184,7 +186,7 @@ export class MgInputRadio {
         // - Async operations are completed
         // - No timing issues with Stencil's render cycle
         // - Keep everything in sync both inside and outside the component
-        return new Promise(resolve => {
+        return new Promise((resolve) => {
             requestAnimationFrame(() => {
                 this.checkValidity();
                 this.setErrorMessage();
@@ -231,7 +233,7 @@ export class MgInputRadio {
             // - Async operations are completed
             // - No timing issues with Stencil's render cycle
             // - Keep everything in sync both inside and outside the component
-            return new Promise(resolve => {
+            return new Promise((resolve) => {
                 requestAnimationFrame(() => {
                     // unlock validity check by reseting customErrorMessage
                     this.customErrorMessage = { lock: false };
@@ -286,7 +288,10 @@ export class MgInputRadio {
      * @returns HTML Element
      */
     render() {
-        return (h("mg-input", { key: 'a749870b0b690a52d75a5ab6340e26cf0b1449c0', label: this.label, identifier: this.identifier, class: this.classCollection.join(), labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.readonly && !this.value ? 'label' : this.tooltipPosition, helpText: this.helpText, errorMessage: this.errorMessage }, this.readonly ? (this.readonlyValue && h("b", { class: "mg-c-input__readonly-value" }, this.readonlyValue)) : (h("div", { class: "mg-c-input__input-group-container" }, this.options.map((input, index) => (h("div", { key: input.title, class: { 'mg-c-input__input-group': true, 'mg-c-input__input-group--disabled': this.disabled || input.disabled } }, h("input", { type: "radio", id: this.identifier + '_' + index, name: this.identifier, value: index, checked: JSON.stringify(this.value) === JSON.stringify(this.options[index].value), disabled: this.disabled || input.disabled, required: this.required, onBlur: this.handleBlur, onInput: this.handleInput, ref: (el) => {
+        return (h("mg-input", { key: '763e021cdda0735dcbd62700f09cbc32c0de7377', label: this.label, identifier: this.identifier, class: this.classCollection.join(), labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.readonly && !this.value ? 'label' : this.tooltipPosition, helpText: this.helpText, errorMessage: this.errorMessage }, this.readonly ? (this.readonlyValue && h("b", { class: "mg-c-input__readonly-value" }, this.readonlyValue)) : (h("div", { class: "mg-c-input__input-group-container" }, this.options.map((input, index) => (h("div", { key: input.title, class: {
+                'mg-c-input__input-group': true,
+                'mg-c-input__input-group--disabled': this.disabled || input.disabled,
+            } }, h("input", { type: "radio", id: this.identifier + '_' + index, name: this.identifier, value: index, checked: JSON.stringify(this.value) === JSON.stringify(this.options[index].value), disabled: this.disabled || input.disabled, required: this.required, onBlur: this.handleBlur, onInput: this.handleInput, ref: (el) => {
                 if (el !== null)
                     this.inputs[index] = el;
             } }), h("label", { htmlFor: this.identifier + '_' + index }, input.title))))))));
@@ -668,7 +673,7 @@ export class MgInputRadio {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Emited event when checking validity"
+                    "text": "Emitted event when checking validity"
                 },
                 "complexType": {
                     "original": "HTMLMgInputRadioElement['valid']",

package/dist/collection/components/molecules/inputs/mg-input-rich-text-editor/editor/custom-properties.css

@@ -0,0 +1,50 @@
+/* Jodit theming overrides
+ *
+ * Jodit's own defaults are provided by jodit.css (loaded with :root rewritten to :host).
+ * This layer only holds the values the design system intentionally overrides — mainly px
+ * sizes converted to rem for scalable UI, plus a few color adjustments. It must load after
+ * jodit.css so these win.
+ */
+:host {
+  --jd-color-background-button-hover-opacity30: rgb(234 234 234 / 30%);
+  --jd-color-background-filebrowser-folders: rgb(248 249 250);
+  --jd-color-button-background-hover-opacity40: rgb(219 219 219 / 40%);
+  --jd-color-button-background-hover-opacity60: rgb(219 219 219 / 60%);
+  --jd-color-table-cell-background-hover: rgb(0 0 0 / 5%);
+  --jd-dark-text-color-opacity50: rgb(206 206 206 / 50%);
+  --jd-dark-text-color-opacity80: rgb(206 206 206 / 80%);
+  --jd-dark-toolbar-seperator-color3: rgb(105 105 105 / 75%);
+  --jd-dark-toolbar-seperator-color-opacity80: rgb(105 105 105 / 80%);
+  --jd-color-picker-cell-size: 2.4rem;
+  --jd-button-icon-size: 1.4rem;
+  --jd-button-trigger-size: 1.4rem;
+  --jd-button-df-size: calc((var(--jd-button-icon-size) - 0.4rem) * 2);
+  --jd-icon-size: 1.2rem;
+  --jd-icon-loader-size: 4.8rem;
+  --jd-height: 1.8rem;
+  --jd-height-element-default: 1.8rem;
+  --jd-height-search: 3rem;
+  --jd-input-height: 3.2rem;
+  --jd-switche-height: 3.2rem;
+  --jd-viewer-height: 2.4rem;
+  --jd-width-default: 18rem;
+  --jd-width-element-default: 1.8rem;
+  --jd-width-search: 32rem;
+  --jd-viewer-width: 7rem;
+  --jd-switche-width: 6rem;
+  --jd-col-size: 15rem;
+  --jd-padding-default: 0.8rem;
+  --jd-margin-v: 0.2rem;
+  --jd-switche-slider-margin: 0.4rem;
+  --jd-resizer-handle-size: 1rem;
+  --jd-border-radius-default: 0.3rem;
+  --jd-font-size-default: 1.4rem;
+  --jd-font-size-small: 1.1rem;
+  --jd-box-shadow-1: 0 0.8rem 1.6rem rgb(0 0 0 / 19%);
+  --jd-box-shadow-blur: 1.6rem;
+  --jd-box-shadow-tabs: 0 0.2rem 0.4rem rgb(0 0 0 / 10%);
+  --jd-popup-box-shadow: 0 0.4rem 0.1rem -0.2rem rgb(76 76 76 / 20%), 0 0.3rem 0.3rem 0 rgb(76 76 76 / 15%), 0 0.1rem 0.4rem 0 rgb(76 76 76 / 13%);
+  --jd-popup-max-height: max(50vh, 35rem);
+  --jd-focus-input-box-shadow: 0 0 0 0.05rem rgb(0 123 255 / 25%);
+  --jd-anl-handle-size: 2rem;
+}

package/dist/collection/components/molecules/inputs/mg-input-rich-text-editor/editor/index.js

@@ -13,6 +13,8 @@ import "jodit/esm/plugins/delete/delete.js";
 import "jodit/esm/plugins/file/file.js";
 import "jodit/esm/plugins/print/print.js";
 import "jodit/esm/plugins/source/source.js";
+// Reuse the design system icon set (same source as mg-icon) to render custom action icons
+import { icons } from "../../../../../assets/icons";
 const DEFAULT_ROWS = 5;
 /**
  * Converts rows count to Jodit editor min-height CSS value.
@@ -53,7 +55,24 @@ export const rowsToEditorHeight = (rows) => {
  * @returns Configured Jodit editor instance
  */
 export const defineEditor = (element, editorElement, config) => {
-    const { value, modules, readOnly, disabled, placeholder, rows = DEFAULT_ROWS, handleTextChange, handleFocus, handleBlur } = config;
+    const { value, modules, customActions, readOnly, disabled, placeholder, rows = DEFAULT_ROWS, handleTextChange, handleFocus, handleBlur, handleCustomAction, handleSelectionChange, } = config;
+    // Translate consumer-declared custom actions into Jodit toolbar controls.
+    // This keeps the public API decoupled from Jodit: consumers never manipulate Jodit controls directly.
+    // `tooltip` is used by Jodit to set the button `aria-label`. The `icon` is an mg-icon name resolved
+    // to its SVG from the shared design system icon set, then rendered as-is by Jodit (it returns the
+    // string when it contains `<svg`). Using currentColor SVGs, the icon inherits the button color.
+    // `mods: { stroke: false }` adds the `jodit-toolbar-button_stroke_false` class so Jodit stops applying
+    // a stroke to the icon (its default `.jodit-icon` rule sets both fill and stroke, which distorts the
+    // design system icons that are meant to be filled only).
+    const customControls = (customActions !== null && customActions !== void 0 ? customActions : []).map((action) => ({
+        name: action.name,
+        tooltip: action.label,
+        icon: icons[action.icon],
+        mods: { stroke: false },
+        exec: () => {
+            handleCustomAction === null || handleCustomAction === void 0 ? void 0 : handleCustomAction(action.name);
+        },
+    }));
     // Configure Jodit
     // Note: Using Record<string, unknown> to avoid TypeScript complexity issues with Jodit's deeply nested Config type
     // The actual configuration follows Jodit's Config interface from jodit/esm/types
@@ -68,6 +87,9 @@ export const defineEditor = (element, editorElement, config) => {
         // When disabled, use -1 to exclude the editor from Tab navigation
         tabIndex: disabled === true ? -1 : 0,
         buttons: modules,
+        // Append custom action buttons after the built-in modules via Jodit's native `extraButtons`
+        // (it does `buttons.concat(extraButtons)`), preceded by a separator when there are any.
+        extraButtons: customControls.length > 0 ? ['|', ...customControls] : [],
         // Disable features we don't want
         showXPathInStatusbar: false,
         showCharsCounter: false,
@@ -129,7 +151,7 @@ export const defineEditor = (element, editorElement, config) => {
         // Find all buttons within the toolbar, excluding disabled ones
         const buttons = Array.from(toolbarEl.querySelectorAll('button:not([disabled])'));
         // Filter out buttons that are not visible or are in popups/dropdowns
-        return buttons.filter(button => {
+        return buttons.filter((button) => {
             const isVisible = button.offsetParent !== null;
             const isInToolbar = toolbarEl.contains(button);
             // Exclude buttons in popups or dropdowns (they have their own navigation)
@@ -207,7 +229,7 @@ export const defineEditor = (element, editorElement, config) => {
          * Without aria-hidden, VoiceOver announces them as images.
          */
         const hideToolbarSvgsFromScreenReaders = () => {
-            toolbarElement.querySelectorAll('svg').forEach(svg => {
+            toolbarElement.querySelectorAll('svg').forEach((svg) => {
                 svg.setAttribute('aria-hidden', 'true');
             });
         };
@@ -310,6 +332,10 @@ export const defineEditor = (element, editorElement, config) => {
     joditInstance.events.on('change', handleTextChange);
     joditInstance.events.on('focus', handleFocus);
     joditInstance.events.on('blur', handleBlur);
+    // Notify selection changes so consumers can react (e.g. enable/disable custom AI actions)
+    if (handleSelectionChange !== undefined) {
+        joditInstance.events.on('changeSelection', handleSelectionChange);
+    }
     // Return the Jodit instance directly
     return joditInstance;
 };