jodit 4.9.9 → 4.9.11

package/esm/config.js

@@ -20,18 +20,112 @@ import * as consts from "./core/constants.js";
 import { globalDocument, globalWindow, INSERT_AS_HTML } from "./core/constants.js";
 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 {
     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;
+        /**
+         * 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.
@@ -40,19 +134,16 @@ class Config {
         /**
          * 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
@@ -63,19 +154,16 @@ class Config {
         /**
          * 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
@@ -116,6 +204,32 @@ class Config {
          * ```
          */
         this.preset = 'custom';
+        /**
+         * 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,
@@ -128,6 +242,10 @@ class Config {
                 showPlaceholder: false
             }
         };
+        /**
+         * 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 = globalDocument;
         /**
          * Allows you to specify the window in which the editor will be created. Default - window
@@ -161,7 +279,9 @@ class Config {
          */
         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;
         /**
@@ -198,7 +318,6 @@ class Config {
         /**
          * Size of icons in the toolbar (can be "small", "middle", "large")
          *
-         * @example
          * ```javascript
          * const editor = Jodit.make(".dark_editor", {
          *      toolbarButtonSize: "small"
@@ -211,12 +330,14 @@ class Config {
          */
         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"
@@ -231,10 +352,9 @@ class Config {
         /**
          * 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'
@@ -251,7 +371,7 @@ class Config {
         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'
@@ -272,7 +392,7 @@ class Config {
         /**
          * 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: {
@@ -284,13 +404,14 @@ class Config {
          */
         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'
          * 		}
          * });
          * ```
@@ -300,7 +421,6 @@ class Config {
          * 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: {
@@ -313,9 +433,9 @@ class Config {
          */
         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 () {
@@ -330,7 +450,6 @@ class Config {
          * 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'
@@ -343,7 +462,6 @@ class Config {
          * (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>
@@ -358,7 +476,6 @@ class Config {
         /**
          * if true all Lang.i18n(key) return `{key}`
          *
-         * @example
          * ```html
          * <script>
          * var editor = Jodit.make('.editor', {
@@ -373,7 +490,6 @@ class Config {
         /**
          * Collection of language pack data `{en: {'Type something': 'Type something', ...}}`
          *
-         * @example
          * ```javascript
          * const editor = Jodit.make('#editor', {
          *     language: 'ru',
@@ -411,12 +527,12 @@ class Config {
          */
         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 = INSERT_AS_HTML;
         // TODO
@@ -431,7 +547,6 @@ class Config {
         /**
          * 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,
@@ -444,7 +559,7 @@ class Config {
         /**
          * Allow editing the entire HTML document(html, head)
          * \> Works together with the iframe option.
-         * @example
+         *
          * ```js
          * const editor = Jodit.make('#editor', {
          *   iframe: true,
@@ -465,7 +580,7 @@ class Config {
         /**
          * 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
@@ -475,12 +590,12 @@ class Config {
          */
         this.defaultMode = consts.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']
@@ -577,7 +692,7 @@ class Config {
         };
         /**
          * The default tab color picker
-         * @example
+         *
          * ```javascript
          * Jodit.make('#editor2', {
          *     colorPickerDefaultTab: 'color'
@@ -586,12 +701,12 @@ class Config {
          */
         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']
@@ -601,7 +716,7 @@ class Config {
         this.removeButtons = [];
         /**
          * Do not init these plugins
-         * @example
+         *
          * ```typescript
          * var editor = Jodit.make('.editor', {
          *    disablePlugins: 'table,iframe'
@@ -615,7 +730,7 @@ class Config {
         this.disablePlugins = [];
         /**
          * Init and download extra plugins
-         * @example
+         *
          * ```typescript
          * var editor = Jodit.make('.editor', {
          *    extraPlugins: ['emoji']
@@ -625,7 +740,7 @@ class Config {
          */
         this.extraPlugins = [];
         /**
-         * These buttons list will be added to the option. Buttons
+         * Additional buttons appended to the {@link Config.buttons} list
          */
         this.extraButtons = [];
         /**
@@ -633,7 +748,6 @@ class Config {
          * 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({
@@ -642,8 +756,9 @@ class Config {
          *     icon: 'someIcon'
          *   }]
          * });
+         * ```
          *
-         * @example
+         * ```js
          * const editor = Jodit.make({
          *   extraIcons: {
          *     someIcon: '<svg><path.../></svg>'
@@ -654,7 +769,7 @@ class Config {
          *   }]
          * });
          * ```
-         * @example
+         *
          * ```js
          * const editor = Jodit.make({
          *   extraButtons: [{
@@ -667,7 +782,7 @@ class Config {
         this.extraIcons = {};
         /**
          * Default attributes for created inside editor elements
-         * @example
+         *
          * ```js
          * const editor2 = Jodit.make('#editor', {
          * 	createAttributes: {
@@ -687,7 +802,7 @@ class Config {
          * expect(ul.className).equals('ui-test');
          * ```
          * Or JSX in React
-         * @example
+         *
          * ```jsx
          * import React, {useState, useRef} from 'react';
          * import JoditEditor from "jodit-react";
@@ -723,7 +838,7 @@ class Config {
         /**
          * 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'],
@@ -731,7 +846,7 @@ class Config {
          *     buttonsXS: ['bold', 'fullsize'],
          * });
          * ```
-         * @example
+         *
          * ```javascript
          * Jodit.make('#editor2', {
          *     buttons: [{
@@ -755,7 +870,7 @@ class Config {
          *     }]
          * });
          * ```
-         * @example
+         *
          * ```javascript
          * Jodit.make('#editor2', {
          *     buttons: Jodit.defaultOptions.buttons.concat([{
@@ -878,7 +993,7 @@ class Config {
          */
         this.events = {};
         /**
-         * Buttons in toolbat without SVG - only texts
+         * Buttons in toolbar without SVG - only texts
          */
         this.textIcons = false;
         /**

package/esm/core/constants.js

@@ -3,7 +3,7 @@
  * Released under MIT see LICENSE.txt in the project root for license information.
  * Copyright (c) 2013-2026 Valerii Chupurnov. All rights reserved. https://xdsoft.net
  */
-export const APP_VERSION = "4.9.9";
+export const APP_VERSION = "4.9.11";
 // prettier-ignore
 export const ES = "es2020";
 export const IS_ES_MODERN = true;

package/esm/core/decorators/autobind/autobind.d.ts

@@ -3,11 +3,6 @@
  * Released under MIT see LICENSE.txt in the project root for license information.
  * Copyright (c) 2013-2026 Valerii Chupurnov. All rights reserved. https://xdsoft.net
  */
-/**
- * [[include:core/decorators/autobind/README.md]]
- * @packageDocumentation
- * @module decorators/autobind
- */
 /**
  * Decorator that automatically binds a method to its class instance.
  * This is useful when passing methods as callbacks to preserve the correct `this` context.

package/esm/core/decorators/autobind/autobind.js

@@ -3,12 +3,12 @@
  * Released under MIT see LICENSE.txt in the project root for license information.
  * Copyright (c) 2013-2026 Valerii Chupurnov. All rights reserved. https://xdsoft.net
  */
-import { isFunction } from "../../helpers/checker/is-function.js";
 /**
  * [[include:core/decorators/autobind/README.md]]
  * @packageDocumentation
  * @module decorators/autobind
  */
+import { isFunction } from "../../helpers/checker/is-function.js";
 /**
  * Decorator that automatically binds a method to its class instance.
  * This is useful when passing methods as callbacks to preserve the correct `this` context.

package/esm/core/decorators/component/component.d.ts

@@ -3,12 +3,12 @@
  * Released under MIT see LICENSE.txt in the project root for license information.
  * Copyright (c) 2013-2026 Valerii Chupurnov. All rights reserved. https://xdsoft.net
  */
-import type { IComponent } from "../../../types/index";
 /**
  * [[include:core/decorators/component/README.md]]
  * @packageDocumentation
  * @module decorators/component
  */
+import type { IComponent } from "../../../types/index";
 export interface ComponentCompatible<T = IComponent> {
     new (...constructorArgs: any[]): T;
 }

package/esm/core/event-emitter/global.d.ts

@@ -1,2 +1,10 @@
+/*!
+ * Jodit Editor (https://xdsoft.net/jodit/)
+ * Released under MIT see LICENSE.txt in the project root for license information.
+ * Copyright (c) 2013-2026 Valerii Chupurnov. All rights reserved. https://xdsoft.net
+ */
+/**
+ * @module event-emitter
+ */
 import { EventEmitter } from "./event-emitter";
 export declare const eventEmitter: EventEmitter;

package/esm/core/event-emitter/global.js

@@ -1,2 +1,10 @@
+/*!
+ * Jodit Editor (https://xdsoft.net/jodit/)
+ * Released under MIT see LICENSE.txt in the project root for license information.
+ * Copyright (c) 2013-2026 Valerii Chupurnov. All rights reserved. https://xdsoft.net
+ */
+/**
+ * @module event-emitter
+ */
 import { EventEmitter } from "./event-emitter.js";
 export const eventEmitter = new EventEmitter();

package/esm/core/storage/async-storage.d.ts

@@ -1,3 +1,11 @@
+/*!
+ * Jodit Editor (https://xdsoft.net/jodit/)
+ * Released under MIT see LICENSE.txt in the project root for license information.
+ * Copyright (c) 2013-2026 Valerii Chupurnov. All rights reserved. https://xdsoft.net
+ */
+/**
+ * @module storage
+ */
 import type { IAsyncStorage, IStorage, StorageValueType } from "../../types/index";
 import { type WebStorageStrategy } from "./engines/local-storage-provider";
 export declare class AsyncStorage<T = StorageValueType> implements IAsyncStorage<T> {

package/esm/core/storage/async-storage.js

@@ -1,3 +1,8 @@
+/*!
+ * Jodit Editor (https://xdsoft.net/jodit/)
+ * Released under MIT see LICENSE.txt in the project root for license information.
+ * Copyright (c) 2013-2026 Valerii Chupurnov. All rights reserved. https://xdsoft.net
+ */
 import { camelCase } from "../helpers/string/camel-case.js";
 import { canUseIndexedDB, IndexedDBProvider } from "./engines/indexed-db-provider.js";
 import { canUsePersistentStorage, LocalStorageProvider } from "./engines/local-storage-provider.js";

package/esm/core/ui/element.d.ts

@@ -16,6 +16,7 @@ export interface UIElement extends Mods, Elms {
 export declare abstract class UIElement<T extends IViewBased = IViewBased> extends ViewComponent<T> implements IUIElement, Mods, Elms {
     container: HTMLElement;
     name: string;
+    getRole(): string;
     private __parentElement;
     get parentElement(): Nullable<IUIElement>;
     set parentElement(parentElement: Nullable<IUIElement>);

package/esm/core/ui/element.js

@@ -18,10 +18,14 @@ import { Component, ViewComponent } from "../component/index.js";
 import { derive } from "../decorators/derive/derive.js";
 import { Dom } from "../dom/dom.js";
 import { isString } from "../helpers/checker/is-string.js";
+import { attr } from "../helpers/utils/attr.js";
 import { Elms } from "../traits/elms.js";
 import { Mods } from "../traits/mods.js";
 import { Icon } from "./icon.js";
 let UIElement = UIElement_1 = class UIElement extends ViewComponent {
+    getRole() {
+        return '';
+    }
     get parentElement() {
         return this.__parentElement;
     }
@@ -133,6 +137,8 @@ let UIElement = UIElement_1 = class UIElement extends ViewComponent {
         this.__parentElement = null;
         this.mods = {};
         this.container = this.createContainer(options);
+        const role = this.getRole();
+        role && attr(this.container, 'role', role);
         Object.defineProperty(this.container, 'component', {
             value: this,
             configurable: true

package/esm/core/ui/group/group.d.ts

@@ -13,6 +13,7 @@ import { UIElement } from "../element";
 export declare class UIGroup<T extends IViewBased = IViewBased> extends UIElement<T> implements IUIGroup {
     readonly options?: IDictionary | undefined;
     className(): string;
+    getRole(): string;
     /**
      * Synchronize mods to all children
      */

package/esm/core/ui/group/group.js

@@ -23,6 +23,9 @@ let UIGroup = UIGroup_1 = class UIGroup extends UIElement {
     className() {
         return 'UIGroup';
     }
+    getRole() {
+        return 'list';
+    }
     /**
      * All group children
      */

package/esm/modules/file-browser/builders/utils.d.ts

@@ -1,3 +1,11 @@
+/*!
+ * Jodit Editor (https://xdsoft.net/jodit/)
+ * Released under MIT see LICENSE.txt in the project root for license information.
+ * Copyright (c) 2013-2026 Valerii Chupurnov. All rights reserved. https://xdsoft.net
+ */
+/**
+ * @module modules/file-browser
+ */
 import type { HTMLTagNames, IDictionary, IFileBrowserItem, Nullable } from "../../../types/index";
 /**
  * @private