jodit-pro 4.9.21 → 4.9.25

package/es2021/jodit.js

@@ -1,7 +1,7 @@
 /*!
  * jodit-pro - PRO Version of Jodit Editor
  * Author: Chupurnov Valerii <chupurnov@gmail.com>
- * Version: v4.9.21
+ * Version: v4.9.25
  * Url: https://xdsoft.net/jodit/pro/
  * License(s): SEE LICENSE IN LICENSE.md
  */
@@ -3395,7 +3395,7 @@ class JoditPro extends jodit_esm_index__WEBPACK_IMPORTED_MODULE_3__.Jodit {
     }
     /**
      * Get temporary list
-     * @deprecated
+     * @deprecated Just do not use it, it is not needed anymore
      */ static temporaryList(root) {
         return (0,_helpers_array_to_array_js__WEBPACK_IMPORTED_MODULE_1__.toArray)(root.querySelectorAll(`[${_constants_js__WEBPACK_IMPORTED_MODULE_0__.TEMP_ATTR}]`));
     }
@@ -4743,7 +4743,96 @@ __webpack_require__.r(__webpack_exports__);
 
 let ConfigPrototype = {};
 /**
- * Default Editor's Configuration
+ * Default Editor's Configuration.
+ *
+ * This class holds all default option values for the Jodit editor.
+ * It uses a **private constructor** and a **lazy singleton** pattern — the single instance
+ * is created on the first access to {@link Config.defaultOptions} (also available as `Jodit.defaultOptions`).
+ *
+ * ## How options are resolved
+ *
+ * When you create an editor with `Jodit.make('#editor', userOptions)`, the library
+ * calls {@link ConfigProto}(userOptions, Config.defaultOptions). `ConfigProto` does
+ * **not** deep-clone the defaults. Instead it creates a new object whose JavaScript
+ * prototype is `Config.defaultOptions`:
+ *
+ * ```
+ * userOptions  ──[[Prototype]]──►  Config.defaultOptions
+ * ```
+ *
+ * Any key present in `userOptions` shadows the default;
+ * any key **not** present falls through to `Config.defaultOptions` via the prototype chain.
+ * Nested plain objects are recursively prototyped in the same way, so partial overrides
+ * of nested options work automatically:
+ *
+ * ```js
+ * // Only override `dialogWidth`; all other `image.*` defaults are still available
+ * Jodit.make('#editor', {
+ *   image: { dialogWidth: 500 }
+ * });
+ * ```
+ *
+ * ## How plugins extend the config
+ *
+ * Each plugin adds its own defaults by assigning to `Config.prototype` and augmenting
+ * the TypeScript type with `declare module`:
+ *
+ * ```ts
+ * // 1. Type augmentation (compile-time)
+ * declare module 'jodit/config' {
+ *   interface Config {
+ *     toolbarSticky: boolean;
+ *   }
+ * }
+ *
+ * // 2. Runtime default
+ * Config.prototype.toolbarSticky = true;
+ * ```
+ *
+ * Because the constructor runs `Object.assign(this, ConfigPrototype)` (where
+ * `ConfigPrototype` is captured as `Config.prototype` after the class definition),
+ * all prototype-level values — including those added by plugins — are materialized
+ * as own properties on the singleton. This means `Config.defaultOptions` always
+ * contains every registered option as an own, enumerable property.
+ *
+ * ## Changing global defaults
+ *
+ * You can modify `Jodit.defaultOptions` **before** creating editors to change
+ * defaults globally:
+ *
+ * ```js
+ * Jodit.defaultOptions.language = 'de';
+ * Jodit.defaultOptions.theme = 'dark';
+ *
+ * // Both editors inherit the new defaults
+ * Jodit.make('#editor1');
+ * Jodit.make('#editor2');
+ * ```
+ *
+ * ## `Jodit.atom` — preventing deep merge
+ *
+ * By default, `ConfigProto` deep-merges nested plain objects and arrays.
+ * Wrap a value with `Jodit.atom(value)` to make it **atomic** — it will completely
+ * replace the default instead of being merged:
+ *
+ * ```js
+ * Jodit.make('#editor', {
+ *   controls: {
+ *     fontsize: {
+ *       // Replace the entire list rather than merging with the default one
+ *       list: Jodit.atom([8, 9, 10])
+ *     }
+ *   }
+ * });
+ * ```
+ *
+ * `Jodit.atom` calls {@link markAsAtomic}, which sets a non-enumerable
+ * `isAtom` flag on the object. `ConfigProto` checks this flag and skips
+ * recursive merging when it is present. Note: top-level arrays (depth 0)
+ * are always treated as atomic — they replace rather than merge.
+ *
+ * @see {@link ConfigProto} for the full merge algorithm
+ * @see {@link markAsAtomic} / {@link isAtom} for the atom marker implementation
  */ class Config {
     static get defaultOptions() {
         if (!Config.__defaultOptions) {
@@ -4753,31 +4842,32 @@ let ConfigPrototype = {};
     }
     constructor(){
         /**
-         * Use cache for heavy methods
+         * When enabled, the editor caches the results of expensive computations (e.g. toolbar rebuilds)
+         * to improve performance. Disable for debugging or when options change frequently at runtime.
          */ this.cache = true;
         /**
          * Timeout of all asynchronous methods
          */ this.defaultTimeout = 100;
-        this.namespace = '';
+        /**
+         * Prefix used for CSS class names and local-storage keys to avoid collisions
+         * when multiple editor instances or applications share the same page.
+         */ this.namespace = '';
         /**
          * Editor loads completely without plugins. Useful when debugging your own plugin.
          */ this.safeMode = false;
         /**
          * Editor's width
          *
-         * @example
          * ```javascript
          * Jodit.make('.editor', {
          *    width: '100%',
          * })
          * ```
-         * @example
          * ```javascript
          * Jodit.make('.editor', {
          *    width: 600, // equivalent for '600px'
          * })
          * ```
-         * @example
          * ```javascript
          * Jodit.make('.editor', {
          *    width: 'auto', // autosize
@@ -4787,19 +4877,16 @@ let ConfigPrototype = {};
         /**
          * Editor's height
          *
-         * @example
          * ```javascript
          * Jodit.make('.editor', {
          *    height: '100%',
          * })
          * ```
-         * @example
          * ```javascript
          * Jodit.make('.editor', {
          *    height: 600, // equivalent for '600px'
          * })
          * ```
-         * @example
          * ```javascript
          * Jodit.make('.editor', {
          *    height: 'auto', // default - autosize
@@ -4836,7 +4923,32 @@ let ConfigPrototype = {};
          * });
          * ```
          */ this.preset = 'custom';
-        this.presets = {
+        /**
+         * Dictionary of named configuration presets. Each key is a preset name and the value
+         * is a partial options object that will be merged into the editor config when
+         * {@link Config.preset} matches the key.
+         *
+         * ```javascript
+         * // Use a built-in preset
+         * Jodit.make('#editor', {
+         *     preset: 'inline'
+         * });
+         * ```
+         *
+         * ```javascript
+         * // Define and use a custom preset
+         * Jodit.defaultOptions.presets.myCompact = {
+         *     toolbarButtonSize: 'small',
+         *     showCharsCounter: false,
+         *     showWordsCounter: false,
+         *     showXPathInStatusbar: false
+         * };
+         *
+         * Jodit.make('#editor', {
+         *     preset: 'myCompact'
+         * });
+         * ```
+         */ this.presets = {
             inline: {
                 inline: true,
                 toolbar: false,
@@ -4848,7 +4960,10 @@ let ConfigPrototype = {};
                 showPlaceholder: false
             }
         };
-        this.ownerDocument = _core_constants_js__WEBPACK_IMPORTED_MODULE_0__.globalDocument;
+        /**
+         * The Document object the editor operates within. Defaults to the current `document`.
+         * Override when the editor is created inside an iframe or a different browsing context.
+         */ this.ownerDocument = _core_constants_js__WEBPACK_IMPORTED_MODULE_0__.globalDocument;
         /**
          * Allows you to specify the window in which the editor will be created. Default - window
          * This is necessary if you are creating the editor inside an iframe but the code is running in the parent window
@@ -4879,7 +4994,9 @@ let ConfigPrototype = {};
          * ```
          */ this.shadowRoot = null;
         /**
-         * z-index For editor
+         * Base CSS `z-index` for the editor UI (toolbar, popups, dialogs).
+         * Set to a higher value when other page elements overlap the editor.
+         * `0` means no explicit z-index is applied.
          */ this.zIndex = 0;
         /**
          * Change the read-only state of the editor
@@ -4915,7 +5032,6 @@ let ConfigPrototype = {};
         /**
          * Size of icons in the toolbar (can be "small", "middle", "large")
          *
-         * @example
          * ```javascript
          * const editor = Jodit.make(".dark_editor", {
          *      toolbarButtonSize: "small"
@@ -4926,11 +5042,13 @@ let ConfigPrototype = {};
          * Allow navigation in the toolbar of the editor by Tab key
          */ this.allowTabNavigation = false;
         /**
-         * Inline editing mode
+         * When enabled, the editor renders without its own container chrome (toolbar, borders, statusbar).
+         * The editable area becomes the element itself. Typically combined with
+         * `toolbarInline: true` so a floating toolbar appears on selection.
          */ this.inline = false;
         /**
          * Theme (can be "dark")
-         * @example
+         *
          * ```javascript
          * const editor = Jodit.make(".dark_editor", {
          *      theme: "dark"
@@ -4943,10 +5061,9 @@ let ConfigPrototype = {};
         /**
          * Class name that can be appended to the editable area
          *
-         * @see [[Config.iframeCSSLinks]]
-         * @see [[Config.iframeStyle]]
+         * @see {@link Config.iframeCSSLinks}
+         * @see {@link Config.iframeStyle}
          *
-         * @example
          * ```javascript
          * Jodit.make('#editor', {
          *    editorClassName: 'some_my_class'
@@ -4962,7 +5079,7 @@ let ConfigPrototype = {};
          */ this.editorClassName = false;
         /**
          * Class name that can be appended to the main editor container
-         * @example
+         *
          * ```javascript
          * const jodit = Jodit.make('#editor', {
          *    className: 'some_my_class'
@@ -4982,7 +5099,7 @@ let ConfigPrototype = {};
         /**
          * The internal styles of the editable area. They are intended to change
          * not the appearance of the editor, but to change the appearance of the content.
-         * @example
+         *
          * ```javascript
          * Jodit.make('#editor', {
          * 		style: {
@@ -4993,13 +5110,14 @@ let ConfigPrototype = {};
          * ```
          */ this.style = false;
         /**
+         * Inline CSS styles applied to the outer editor container element.
+         * Use this to style the editor wrapper (borders, background, etc.) without affecting content.
          *
-         * @example
          * ```javascript
          * Jodit.make('#editor', {
-         * 		editorStyle: {
-         * 		 font: '12px Arial',
-         * 		 color: '#0c0c0c'
+         * 		containerStyle: {
+         * 		 border: '1px solid #ccc',
+         * 		 background: '#f9f9f9'
          * 		}
          * });
          * ```
@@ -5008,7 +5126,6 @@ let ConfigPrototype = {};
          * Dictionary of variable values in css, a complete list can be found here
          * https://github.com/xdan/jodit/blob/main/src/styles/variables.less#L25
          *
-         * @example
          * ```js
          * const editor = Jodit.make('#editor', {
          *   styleValues: {
@@ -5020,9 +5137,9 @@ let ConfigPrototype = {};
          * ```
          */ this.styleValues = {};
         /**
-         * After all, changes in editors for textarea will call change trigger
+         * When enabled, the editor dispatches a native `change` event on the original
+         * `<textarea>` element whenever the content changes, so standard DOM listeners work.
          *
-         * @example
          * ```javascript
          * const editor = Jodit.make('#editor');
          * document.getElementById('editor').addEventListener('change', function () {
@@ -5036,7 +5153,6 @@ let ConfigPrototype = {};
          * the page element direction. 'ltr' – Indicates a Left-To-Right text direction (like in English).
          * 'rtl' – Indicates a Right-To-Left text direction (like in Arabic).
          *
-         * @example
          * ```javascript
          * Jodit.make('.editor', {
          *    direction: 'rtl'
@@ -5048,7 +5164,6 @@ let ConfigPrototype = {};
          * (navigator.language && navigator.language.substr(0, 2)) ||
          * (navigator.browserLanguage && navigator.browserLanguage.substr(0, 2)) || 'en'
          *
-         * @example
          * ```html
          * <!-- include in you page lang file -->
          * <script src="jodit/lang/de.js"></script>
@@ -5062,7 +5177,6 @@ let ConfigPrototype = {};
         /**
          * if true all Lang.i18n(key) return `{key}`
          *
-         * @example
          * ```html
          * <script>
          * var editor = Jodit.make('.editor', {
@@ -5076,7 +5190,6 @@ let ConfigPrototype = {};
         /**
          * Collection of language pack data `{en: {'Type something': 'Type something', ...}}`
          *
-         * @example
          * ```javascript
          * const editor = Jodit.make('#editor', {
          *     language: 'ru',
@@ -5108,11 +5221,11 @@ let ConfigPrototype = {};
          * Delay before show tooltip
          */ this.showTooltipDelay = 200;
         /**
-         * Instead of create custop tooltip - use native title tooltips
+         * Instead of creating a custom tooltip, use the browser's native title tooltips
          */ this.useNativeTooltip = false;
         /**
-         * Default insert method
-         * @default insert_as_html
+         * How pasted content is inserted into the editor by default.
+         * Possible values: `insert_as_html`, `insert_as_text`, `insert_only_text`, `insert_clear_html`.
          */ this.defaultActionOnPaste = _core_constants_js__WEBPACK_IMPORTED_MODULE_0__.INSERT_AS_HTML;
         // TODO
         // autosave: false, // false or url
@@ -5125,7 +5238,6 @@ let ConfigPrototype = {};
         /**
          * When this option is enabled, the editor's content will be placed in an iframe and isolated from the rest of the page.
          *
-         * @example
          * ```javascript
          * Jodit.make('#editor', {
          *    iframe: true,
@@ -5137,7 +5249,7 @@ let ConfigPrototype = {};
         /**
          * Allow editing the entire HTML document(html, head)
          * \> Works together with the iframe option.
-         * @example
+         *
          * ```js
          * const editor = Jodit.make('#editor', {
          *   iframe: true,
@@ -5156,7 +5268,7 @@ let ConfigPrototype = {};
         /**
          * Jodit.MODE_WYSIWYG The HTML editor allows you to write like MSWord,
          * Jodit.MODE_SOURCE syntax highlighting source editor
-         * @example
+         *
          * ```javascript
          * var editor = Jodit.make('#editor', {
          *     defaultMode: Jodit.MODE_SPLIT
@@ -5165,11 +5277,11 @@ let ConfigPrototype = {};
          * ```
          */ this.defaultMode = _core_constants_js__WEBPACK_IMPORTED_MODULE_0__.MODE_WYSIWYG;
         /**
-         * Use split mode
+         * When enabled, the editor displays both the WYSIWYG view and the source-code view side by side.
          */ this.useSplitMode = false;
         /**
          * The colors in HEX representation to select a color for the background and for the text in colorpicker
-         * @example
+         *
          * ```javascript
          *  Jodit.make('#editor', {
          *     colors: ['#ff0000', '#00ff00', '#0000ff']
@@ -5265,7 +5377,7 @@ let ConfigPrototype = {};
         };
         /**
          * The default tab color picker
-         * @example
+         *
          * ```javascript
          * Jodit.make('#editor2', {
          *     colorPickerDefaultTab: 'color'
@@ -5273,11 +5385,11 @@ let ConfigPrototype = {};
          * ```
          */ this.colorPickerDefaultTab = 'background';
         /**
-         * Image size defaults to a larger image
+         * Default width (in pixels) applied to images inserted into the editor
          */ this.imageDefaultWidth = 300;
         /**
          * Do not display these buttons that are on the list
-         * @example
+         *
          * ```javascript
          * Jodit.make('#editor2', {
          *     removeButtons: ['hr', 'source']
@@ -5286,7 +5398,7 @@ let ConfigPrototype = {};
          */ this.removeButtons = [];
         /**
          * Do not init these plugins
-         * @example
+         *
          * ```typescript
          * var editor = Jodit.make('.editor', {
          *    disablePlugins: 'table,iframe'
@@ -5299,7 +5411,7 @@ let ConfigPrototype = {};
          */ this.disablePlugins = [];
         /**
          * Init and download extra plugins
-         * @example
+         *
          * ```typescript
          * var editor = Jodit.make('.editor', {
          *    extraPlugins: ['emoji']
@@ -5308,14 +5420,13 @@ let ConfigPrototype = {};
          * It will try load %SCRIPT_PATH%/plugins/emoji/emoji.js and after load will try init it
          */ this.extraPlugins = [];
         /**
-         * These buttons list will be added to the option. Buttons
+         * Additional buttons appended to the {@link Config.buttons} list
          */ this.extraButtons = [];
         /**
          * By default, you can only install an icon from the Jodit suite.
          * You can add your icon to the set using the `Jodit.modules.Icon.set (name, svg Code)` method.
          * But for a declarative declaration, you can use this option.
          *
-         * @example
          * ```js
          * Jodit.modules.Icon.set('someIcon', '<svg><path.../></svg>');
          * const editor = Jodit.make({
@@ -5324,8 +5435,9 @@ let ConfigPrototype = {};
          *     icon: 'someIcon'
          *   }]
          * });
+         * ```
          *
-         * @example
+         * ```js
          * const editor = Jodit.make({
          *   extraIcons: {
          *     someIcon: '<svg><path.../></svg>'
@@ -5336,7 +5448,7 @@ let ConfigPrototype = {};
          *   }]
          * });
          * ```
-         * @example
+         *
          * ```js
          * const editor = Jodit.make({
          *   extraButtons: [{
@@ -5348,7 +5460,7 @@ let ConfigPrototype = {};
          */ this.extraIcons = {};
         /**
          * Default attributes for created inside editor elements
-         * @example
+         *
          * ```js
          * const editor2 = Jodit.make('#editor', {
          * 	createAttributes: {
@@ -5368,7 +5480,7 @@ let ConfigPrototype = {};
          * expect(ul.className).equals('ui-test');
          * ```
          * Or JSX in React
-         * @example
+         *
          * ```jsx
          * import React, {useState, useRef} from 'react';
          * import JoditEditor from "jodit-react";
@@ -5400,7 +5512,7 @@ let ConfigPrototype = {};
         /**
          * The list of buttons that appear in the editor's toolbar on large places (≥ options.sizeLG).
          * Note - this is not the width of the device, the width of the editor
-         * @example
+         *
          * ```javascript
          * Jodit.make('#editor', {
          *     buttons: ['bold', 'italic', 'source'],
@@ -5408,7 +5520,7 @@ let ConfigPrototype = {};
          *     buttonsXS: ['bold', 'fullsize'],
          * });
          * ```
-         * @example
+         *
          * ```javascript
          * Jodit.make('#editor2', {
          *     buttons: [{
@@ -5432,7 +5544,7 @@ let ConfigPrototype = {};
          *     }]
          * });
          * ```
-         * @example
+         *
          * ```javascript
          * Jodit.make('#editor2', {
          *     buttons: Jodit.defaultOptions.buttons.concat([{
@@ -5553,7 +5665,7 @@ let ConfigPrototype = {};
          * ```
          */ this.events = {};
         /**
-         * Buttons in toolbat without SVG - only texts
+         * Buttons in toolbar without SVG - only texts
          */ this.textIcons = false;
         /**
          * Element for dialog container
@@ -6810,7 +6922,7 @@ let UIButton = class UIButton extends _element_js__WEBPACK_IMPORTED_MODULE_9__.U
     }
     onChangeText() {
         this.text.textContent = this.jodit.i18n(this.state.text);
-        this.__updateAriaLabel();
+        this.updateAriaLabel();
     }
     onChangeTextSetMode() {
         this.setMod('text-icons', Boolean(this.state.text.trim().length));
@@ -6833,9 +6945,9 @@ let UIButton = class UIButton extends _element_js__WEBPACK_IMPORTED_MODULE_9__.U
             (0,_helpers_utils_attr_js__WEBPACK_IMPORTED_MODULE_8__.attr)(this.container, 'title', i8nTooltip);
         }
         (0,_helpers_utils_attr_js__WEBPACK_IMPORTED_MODULE_8__.attr)(this.container, 'aria-label', i8nTooltip);
-        this.__updateAriaLabel();
+        this.updateAriaLabel();
     }
-    __updateAriaLabel() {
+    updateAriaLabel() {
         const hasText = this.state.text.trim().length > 0;
         const i8nTooltip = this.state.tooltip ? this.jodit.i18n(this.state.tooltip) : null;
         (0,_helpers_utils_attr_js__WEBPACK_IMPORTED_MODULE_8__.attr)(this.container, 'aria-label', i8nTooltip);
@@ -7318,6 +7430,9 @@ let ToolbarCollection = class ToolbarCollection extends _core_ui_group_list_js__
     className() {
         return 'ToolbarCollection';
     }
+    getRole() {
+        return 'toolbar';
+    }
     /**
      * First button in a list
      */ get firstButton() {
@@ -13258,16 +13373,21 @@ _config_js__WEBPACK_IMPORTED_MODULE_1__.Config.prototype.popup = {
 
 
 let UIList = class UIList extends _group_js__WEBPACK_IMPORTED_MODULE_6__.UIGroup {
-    /** @override */ className() {
+    className() {
         return 'UIList';
     }
+    getRole() {
+        return 'list';
+    }
     __onChangeMode() {
         this.setMod('mode', this.mode);
     }
     /**
      * Make new group and append it in list of elements
-     */ makeGroup() {
-        return new _group_js__WEBPACK_IMPORTED_MODULE_6__.UIGroup(this.jodit);
+     */ makeGroup(role) {
+        return new _group_js__WEBPACK_IMPORTED_MODULE_6__.UIGroup(this.jodit, [], role ? {
+            role
+        } : undefined);
     }
     /**
      * All buttons from list
@@ -13287,7 +13407,7 @@ let UIList = class UIList extends _group_js__WEBPACK_IMPORTED_MODULE_6__.UIGroup
         items = (0,_helpers_array_split_array_js__WEBPACK_IMPORTED_MODULE_4__.splitArray)(items);
         this.clear();
         let lastBtnSeparator = false;
-        let line = this.makeGroup();
+        let line = this.makeGroup('group');
         this.append(line);
         line.setMod('line', true);
         let group;
@@ -13295,7 +13415,7 @@ let UIList = class UIList extends _group_js__WEBPACK_IMPORTED_MODULE_6__.UIGroup
             let elm = null;
             switch(control.name){
                 case '\n':
-                    line = this.makeGroup();
+                    line = this.makeGroup('group');
                     line.setMod('line', true);
                     group = this.makeGroup();
                     line.append(group);
@@ -20343,6 +20463,7 @@ let ToolbarEditorCollection = class ToolbarEditorCollection extends _collection_
      * @see https://github.com/jodit/jodit-react/issues/138
      */ prependInvisibleInput(container) {
         const input = this.j.create.element('input', {
+            name: 'jodit-toolbar-focus-helper_' + this.j.id,
             tabIndex: -1,
             disabled: true,
             style: 'width: 0; height:0; position: absolute; visibility: hidden;'
@@ -25105,9 +25226,10 @@ _config_js__WEBPACK_IMPORTED_MODULE_0__.Config.prototype.toolbarStickyOffset = 0
 /* harmony import */ var _decorators_derive_derive_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(55153);
 /* harmony import */ var _dom_dom_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(2748);
 /* harmony import */ var _helpers_checker_is_string_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(70799);
-/* harmony import */ var _traits_elms_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(14316);
-/* harmony import */ var _traits_mods_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(34176);
-/* harmony import */ var _icon_js__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(12153);
+/* harmony import */ var _helpers_utils_attr_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(29960);
+/* harmony import */ var _traits_elms_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(14316);
+/* harmony import */ var _traits_mods_js__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(34176);
+/* harmony import */ var _icon_js__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(12153);
 /*!
  * Jodit Editor (https://xdsoft.net/jodit/)
  * Released under MIT see LICENSE.txt in the project root for license information.
@@ -25126,7 +25248,12 @@ var UIElement_1;
 
 
 
+
 let UIElement = UIElement_1 = class UIElement extends _component_index_js__WEBPACK_IMPORTED_MODULE_0__.ViewComponent {
+    getRole() {
+        var _a;
+        return ((_a = this.options) === null || _a === void 0 ? void 0 : _a.role) || '';
+    }
     get parentElement() {
         return this.__parentElement;
     }
@@ -25215,19 +25342,22 @@ let UIElement = UIElement_1 = class UIElement extends _component_index_js__WEBPA
         return result;
     }
     parseTemplate(result) {
-        return this.j.c.fromHTML(result.replace(/\*([^*]+?)\*/g, (_, name)=>_icon_js__WEBPACK_IMPORTED_MODULE_6__.Icon.get(name) || '').replace(/&_/g, this.componentName + '_').replace(/~([^~]+?)~/g, (_, s)=>this.i18n(s)));
+        return this.j.c.fromHTML(result.replace(/\*([^*]+?)\*/g, (_, name)=>_icon_js__WEBPACK_IMPORTED_MODULE_7__.Icon.get(name) || '').replace(/&_/g, this.componentName + '_').replace(/~([^~]+?)~/g, (_, s)=>this.i18n(s)));
     }
     /** @override */ destruct() {
         _dom_dom_js__WEBPACK_IMPORTED_MODULE_2__.Dom.safeRemove(this.container);
         this.parentElement = null;
         return super.destruct();
     }
-    /** @override */ constructor(jodit, options){
+    constructor(jodit, options){
         super(jodit);
         this.name = '';
         this.__parentElement = null;
         this.mods = {};
+        this.options = options;
         this.container = this.createContainer(options);
+        const role = this.getRole();
+        role && (0,_helpers_utils_attr_js__WEBPACK_IMPORTED_MODULE_4__.attr)(this.container, 'role', role);
         Object.defineProperty(this.container, 'component', {
             value: this,
             configurable: true
@@ -25235,7 +25365,7 @@ let UIElement = UIElement_1 = class UIElement extends _component_index_js__WEBPA
     }
 };
 UIElement = UIElement_1 = __decorate([
-    (0,_decorators_derive_derive_js__WEBPACK_IMPORTED_MODULE_1__.derive)(_traits_mods_js__WEBPACK_IMPORTED_MODULE_5__.Mods, _traits_elms_js__WEBPACK_IMPORTED_MODULE_4__.Elms)
+    (0,_decorators_derive_derive_js__WEBPACK_IMPORTED_MODULE_1__.derive)(_traits_mods_js__WEBPACK_IMPORTED_MODULE_6__.Mods, _traits_elms_js__WEBPACK_IMPORTED_MODULE_5__.Elms)
 ], UIElement);
 
 
@@ -32526,6 +32656,10 @@ let UIGroup = UIGroup_1 = class UIGroup extends _element_js__WEBPACK_IMPORTED_MO
     className() {
         return 'UIGroup';
     }
+    getRole() {
+        var _a;
+        return ((_a = this.options) === null || _a === void 0 ? void 0 : _a.role) || 'list';
+    }
     /**
      * All group children
      */ get allChildren() {
@@ -40268,6 +40402,16 @@ let ToolbarButton = class ToolbarButton extends _core_ui_button_index_js__WEBPAC
     className() {
         return 'ToolbarButton';
     }
+    getRole() {
+        return 'listitem';
+    }
+    updateAriaLabel() {
+        super.updateAriaLabel();
+        if (this.trigger) {
+            const i8nTooltip = this.state.tooltip ? this.jodit.i18n(this.state.tooltip) : null;
+            (0,_core_helpers_utils_attr_js__WEBPACK_IMPORTED_MODULE_14__.attr)(this.trigger, 'aria-label', i8nTooltip);
+        }
+    }
     /**
      * Get parent toolbar
      */ get toolbar() {
@@ -40335,14 +40479,13 @@ let ToolbarButton = class ToolbarButton extends _core_ui_button_index_js__WEBPAC
         const cn = this.componentName;
         const container = this.j.c.span(cn);
         const button = super.createContainer();
-        (0,_core_helpers_utils_attr_js__WEBPACK_IMPORTED_MODULE_14__.attr)(container, 'role', 'listitem');
         button.classList.remove(cn);
         button.classList.add(cn + '__button');
         Object.defineProperty(button, 'component', {
             value: this
         });
         container.appendChild(button);
-        const trigger = this.j.c.fromHTML(`<span role="trigger" class="${cn}__trigger">${_core_ui_icon_js__WEBPACK_IMPORTED_MODULE_18__.Icon.get('chevron')}</span>`);
+        const trigger = this.j.c.fromHTML(`<span role="button" aria-haspopup="true" aria-expanded="false" class="${cn}__trigger">${_core_ui_icon_js__WEBPACK_IMPORTED_MODULE_18__.Icon.get('chevron')}</span>`);
         // For caching
         button.appendChild(trigger);
         return container;
@@ -40401,6 +40544,7 @@ let ToolbarButton = class ToolbarButton extends _core_ui_button_index_js__WEBPAC
             return;
         }
         const { control: ctr } = this;
+        (0,_core_helpers_utils_attr_js__WEBPACK_IMPORTED_MODULE_14__.attr)(this.trigger, 'aria-expanded', true);
         e.buffer = {
             actionTrigger: this
         };
@@ -40514,6 +40658,9 @@ let ToolbarButton = class ToolbarButton extends _core_ui_button_index_js__WEBPAC
             this.openedPopup.close();
             this.openedPopup.destruct();
             this.openedPopup = null;
+            if (this.trigger) {
+                (0,_core_helpers_utils_attr_js__WEBPACK_IMPORTED_MODULE_14__.attr)(this.trigger, 'aria-expanded', false);
+            }
         }
     }
     /**
@@ -43268,13 +43415,12 @@ _config_js__WEBPACK_IMPORTED_MODULE_0__.Config.prototype.maxWidth = '100%';
 /**
  * Editor's min-height
  *
- * @example
  * ```javascript
  * Jodit.make('.editor', {
  *    minHeight: '30%' //min-height: 30%
  * })
  * ```
- * @example
+ *
  * ```javascript
  * Jodit.make('.editor', {
  *    minHeight: 200 //min-height: 200px
@@ -44332,7 +44478,7 @@ __webpack_require__.r(__webpack_exports__);
  * ```
  * @packageDocumentation
  * @module constants
- */ const APP_VERSION = "4.9.21";
+ */ const APP_VERSION = "4.9.25";
 // prettier-ignore
 const ES = "es2021";
 const IS_ES_MODERN = true;
@@ -44983,11 +45129,13 @@ ToolbarSelect = __decorate([
 /* harmony import */ var _core_constants_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(82758);
 /* harmony import */ var _core_dom_index_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(22732);
 /* harmony import */ var _core_global_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(580);
-/* harmony import */ var _core_helpers_index_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(21537);
-/* harmony import */ var _core_plugin_index_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(50911);
-/* harmony import */ var _modules_context_menu_context_menu_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(80870);
-/* harmony import */ var _modules_toolbar_factory_js__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(21491);
-/* harmony import */ var _config_js__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(86012);
+/* harmony import */ var _core_helpers_string_trim_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(49055);
+/* harmony import */ var _core_helpers_utils_attr_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(29960);
+/* harmony import */ var _core_helpers_utils_selector_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(76078);
+/* harmony import */ var _core_plugin_index_js__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(50911);
+/* harmony import */ var _modules_context_menu_context_menu_js__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(80870);
+/* harmony import */ var _modules_toolbar_factory_js__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(21491);
+/* harmony import */ var _config_js__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(86012);
 /*!
  * Jodit Editor (https://xdsoft.net/jodit/)
  * Released under MIT see LICENSE.txt in the project root for license information.
@@ -45000,12 +45148,15 @@ ToolbarSelect = __decorate([
 
 
 
+
+
 /**
  * Show a path to a current element in status bar
- */ class xpath extends _core_plugin_index_js__WEBPACK_IMPORTED_MODULE_4__.Plugin {
+ */ class xpath extends _core_plugin_index_js__WEBPACK_IMPORTED_MODULE_6__.Plugin {
     afterInit() {
         if (this.j.o.showXPathInStatusbar) {
             this.container = this.j.c.div('jodit-xpath');
+            (0,_core_helpers_utils_attr_js__WEBPACK_IMPORTED_MODULE_4__.attr)(this.container, 'role', 'list');
             const init = ()=>{
                 if (!this.j.o.showXPathInStatusbar || !this.container) {
                     return;
@@ -45020,7 +45171,7 @@ ToolbarSelect = __decorate([
                     this.appendSelectAll();
                 }
             };
-            this.j.e.off('.xpath').on('mouseup.xpath change.xpath keydown.xpath changeSelection.xpath', this.calcPath).on('afterSetMode.xpath afterInit.xpath changePlace.xpath', init);
+            this.j.e.off('.xpath').on('pointerup.xpath change.xpath keydown.xpath changeSelection.xpath', this.calcPath).on('afterSetMode.xpath afterInit.xpath changePlace.xpath', init);
             init();
             this.calcPath();
         }
@@ -45039,7 +45190,7 @@ ToolbarSelect = __decorate([
         super(...arguments);
         this.onContext = (bindElement, event)=>{
             if (!this.menu) {
-                this.menu = new _modules_context_menu_context_menu_js__WEBPACK_IMPORTED_MODULE_5__.ContextMenu(this.j);
+                this.menu = new _modules_context_menu_context_menu_js__WEBPACK_IMPORTED_MODULE_7__.ContextMenu(this.j);
             }
             this.menu.show(event.clientX, event.clientY, [
                 {
@@ -45066,7 +45217,7 @@ ToolbarSelect = __decorate([
         };
         this.onSelectPath = (bindElement, event)=>{
             this.j.s.focus();
-            const path = (0,_core_helpers_index_js__WEBPACK_IMPORTED_MODULE_3__.attr)(event.target, '-path') || '/';
+            const path = (0,_core_helpers_utils_attr_js__WEBPACK_IMPORTED_MODULE_4__.attr)(event.target, '-path') || '/';
             if (path === '/') {
                 this.j.execCommand('selectall');
                 return false;
@@ -45082,7 +45233,7 @@ ToolbarSelect = __decorate([
             return false;
         };
         this.tpl = (bindElement, path, name, title)=>{
-            const item = this.j.c.fromHTML(`<span class="jodit-xpath__item"><a role="button" data-path="${path}" title="${title}" tabindex="-1"'>${(0,_core_helpers_index_js__WEBPACK_IMPORTED_MODULE_3__.trim)(name)}</a></span>`);
+            const item = this.j.c.fromHTML(`<span class="jodit-xpath__item"><a role="button" data-path="${path}" title="${title}" tabindex="-1"'>${(0,_core_helpers_string_trim_js__WEBPACK_IMPORTED_MODULE_3__.trim)(name)}</a></span>`);
             const a = item.firstChild;
             this.j.e.on(a, 'click', this.onSelectPath.bind(this, bindElement)).on(a, 'contextmenu', this.onContext.bind(this, bindElement));
             return item;
@@ -45095,7 +45246,7 @@ ToolbarSelect = __decorate([
         };
         this.appendSelectAll = ()=>{
             this.removeSelectAll();
-            this.selectAllButton = (0,_modules_toolbar_factory_js__WEBPACK_IMPORTED_MODULE_6__.makeButton)(this.j, {
+            this.selectAllButton = (0,_modules_toolbar_factory_js__WEBPACK_IMPORTED_MODULE_8__.makeButton)(this.j, {
                 name: 'selectall',
                 ...this.j.o.controls.selectall
             });
@@ -45115,7 +45266,7 @@ ToolbarSelect = __decorate([
                 _core_dom_index_js__WEBPACK_IMPORTED_MODULE_1__.Dom.up(current, (elm)=>{
                     if (elm && this.j.editor !== elm && !_core_dom_index_js__WEBPACK_IMPORTED_MODULE_1__.Dom.isText(elm) && !_core_dom_index_js__WEBPACK_IMPORTED_MODULE_1__.Dom.isComment(elm)) {
                         name = elm.nodeName.toLowerCase();
-                        xpth = (0,_core_helpers_index_js__WEBPACK_IMPORTED_MODULE_3__.getXPathByElement)(elm, this.j.editor).replace(/^\//, '');
+                        xpth = (0,_core_helpers_utils_selector_js__WEBPACK_IMPORTED_MODULE_5__.getXPathByElement)(elm, this.j.editor).replace(/^\//, '');
                         li = this.tpl(elm, xpth, name, this.j.i18n('Select %s', name));
                         this.container && this.container.insertBefore(li, this.container.firstChild);
                     }