jodit 4.2.50 → 4.3.1

package/es5/plugins/debug/debug.css

@@ -1,7 +1,7 @@
 /*!
  * jodit - Jodit is an awesome and useful wysiwyg editor with filebrowser
  * Author: Chupurnov <chupurnov@gmail.com> (https://xdsoft.net/jodit/)
- * Version: v4.2.50
+ * Version: v4.3.1
  * Url: https://xdsoft.net/jodit/
  * License(s): MIT
  */

package/es5/plugins/debug/debug.js

@@ -1,7 +1,7 @@
 /*!
  * jodit - Jodit is an awesome and useful wysiwyg editor with filebrowser
  * Author: Chupurnov <chupurnov@gmail.com> (https://xdsoft.net/jodit/)
- * Version: v4.2.50
+ * Version: v4.3.1
  * Url: https://xdsoft.net/jodit/
  * License(s): MIT
  */

package/es5/plugins/debug/debug.min.js

@@ -1,7 +1,7 @@
 /*!
  * jodit - Jodit is an awesome and useful wysiwyg editor with filebrowser
  * Author: Chupurnov <chupurnov@gmail.com> (https://xdsoft.net/jodit/)
- * Version: v4.2.50
+ * Version: v4.3.1
  * Url: https://xdsoft.net/jodit/
  * License(s): MIT
  */

package/es5/plugins/speech-recognize/speech-recognize.css

@@ -1,7 +1,7 @@
 /*!
  * jodit - Jodit is an awesome and useful wysiwyg editor with filebrowser
  * Author: Chupurnov <chupurnov@gmail.com> (https://xdsoft.net/jodit/)
- * Version: v4.2.50
+ * Version: v4.3.1
  * Url: https://xdsoft.net/jodit/
  * License(s): MIT
  */

package/es5/plugins/speech-recognize/speech-recognize.js

@@ -1,7 +1,7 @@
 /*!
  * jodit - Jodit is an awesome and useful wysiwyg editor with filebrowser
  * Author: Chupurnov <chupurnov@gmail.com> (https://xdsoft.net/jodit/)
- * Version: v4.2.50
+ * Version: v4.3.1
  * Url: https://xdsoft.net/jodit/
  * License(s): MIT
  */

package/es5/plugins/speech-recognize/speech-recognize.min.js

@@ -1,7 +1,7 @@
 /*!
  * jodit - Jodit is an awesome and useful wysiwyg editor with filebrowser
  * Author: Chupurnov <chupurnov@gmail.com> (https://xdsoft.net/jodit/)
- * Version: v4.2.50
+ * Version: v4.3.1
  * Url: https://xdsoft.net/jodit/
  * License(s): MIT
  */

package/esm/config.d.ts

@@ -686,6 +686,10 @@ declare class Config implements IViewOptions {
      * Buttons in toolbat without SVG - only texts
      */
     textIcons: boolean;
+    /**
+     * Element for dialog container
+     */
+    popupRoot: Nullable<HTMLElement>;
     /**
      * shows a INPUT[type=color] to open the browser color picker, on the right bottom of widget color picker
      */

package/esm/config.js

@@ -880,6 +880,10 @@ class Config {
          * Buttons in toolbat without SVG - only texts
          */
         this.textIcons = false;
+        /**
+         * Element for dialog container
+         */
+        this.popupRoot = null;
         /**
          * shows a INPUT[type=color] to open the browser color picker, on the right bottom of widget color picker
          */

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-2025 Valeriy Chupurnov. All rights reserved. https://xdsoft.net
  */
-export const APP_VERSION = "4.2.50";
+export const APP_VERSION = "4.3.1";
 // prettier-ignore
 export const ES = "es2020";
 export const IS_ES_MODERN = true;

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

@@ -12,6 +12,106 @@ import type { IDictionary, Nullable } from "../../../types";
 export interface CachePropertyDescriptor<T, R> extends PropertyDescriptor {
     get?: (this: T) => R;
 }
+/**
+ * Retrieves a cached property value from an object if it exists; otherwise, returns `null`.
+ *
+ * This utility is particularly useful when working with properties that are lazily initialized
+ * or dynamically created, such as getters or cached computations. It ensures you can safely
+ * access the value without triggering initialization or creating a new instance.
+ *
+ * ### Usage Example:
+ * ```typescript
+ * import type { IUIElement } from "jodit";
+ *
+ * const { component, cache, cached } = Jodit.decorators;
+ * const { UIElement } = Jodit.modules;
+ *
+ * @component
+ * class SomeComponent extends UIElement {
+ *   @cache
+ *   get someElement(): IUIElement {
+ *     return new UIElement(this.jodit);
+ *   }
+ *
+ *   destruct() {
+ *     // Use the cached utility to clean up only if the property is initialized
+ *     cached(this, 'someElement')?.destruct();
+ *     super.destruct();
+ *   }
+ * }
+ * ```
+ *
+ * @param object - The object containing the property to check.
+ * @param property - The name of the property to retrieve from the cache.
+ * @returns The cached value of the property if it exists; otherwise, `null`.
+ *
+ * ### Notes:
+ * - If the property is defined as a getter, the function will return `null`
+ *   instead of invoking the getter.
+ * - This function is non-destructive and does not alter the object's state.
+ */
 export declare function cached<T>(object: object, property: string): Nullable<T>;
+/**
+ * A decorator that caches the result of a getter method. Once the getter is accessed for the first time,
+ * its computed value is stored as a property of the object. Subsequent accesses return the cached value
+ * without recalculating it, improving performance and avoiding redundant computations.
+ *
+ * ### Key Features:
+ * - **Lazy Initialization**: The original getter is invoked only once, the first time the property is accessed.
+ * - **Immutability**: After caching, the value is stored as a non-writable, non-configurable property, preventing accidental modifications.
+ * - **Conditional Caching**: If the returned value has a property `noCache` set to `true`, the caching mechanism is bypassed, and the getter is invoked each time.
+ *
+ * ### Usage Example 1: Basic Caching
+ * ```typescript
+ * import { cache } from './decorators';
+ *
+ * class Example {
+ *   private counter = 0;
+ *
+ *   @cache
+ *   get expensiveComputation(): number {
+ *     console.log('Calculating...');
+ *     return ++this.counter;
+ *   }
+ * }
+ *
+ * const instance = new Example();
+ * console.log(instance.expensiveComputation); // Logs "Calculating..." and returns 1
+ * console.log(instance.expensiveComputation); // Returns 1 (cached value, no calculation)
+ * ```
+ *
+ * ### Usage Example 2: Integration with Cached Utilities
+ * ```typescript
+ * import { cache, cached } from './decorators';
+ * import type { IUIElement } from "jodit";
+ *
+ * const { component } = Jodit.decorators;
+ * const { UIElement } = Jodit.modules;
+ *
+ * @component
+ * class SomeComponent extends UIElement {
+ *   @cache
+ *   get someElement(): IUIElement {
+ *     return new UIElement(this.jodit);
+ *   }
+ *
+ *   destruct() {
+ *     // Use the cached utility to clean up only if the property is initialized
+ *     cached(this, 'someElement')?.destruct();
+ *     super.destruct();
+ *   }
+ * }
+ * ```
+ *
+ * @param _ - The target object (not used directly).
+ * @param name - The name of the property to decorate.
+ * @param descriptor - The property descriptor, which must include a getter method.
+ * @throws Will throw an error if the descriptor does not include a getter.
+ *
+ * ### Notes:
+ * - **Performance**: Ideal for properties that are computationally expensive and do not change after the initial computation.
+ * - **Flexibility**: Supports conditional caching via the `noCache` property in the returned value.
+ * - **Compatibility**: Designed to work seamlessly with objects and classes in TypeScript or JavaScript.
+ */
 export declare function cache<T, R>(_: object, name: PropertyKey, descriptor: CachePropertyDescriptor<T, R>): void;
 export declare function cacheHTML<T extends Function, R>(target: IDictionary, _: string, descriptor: CachePropertyDescriptor<T, R>): void;

package/esm/core/decorators/cache/cache.js

@@ -4,9 +4,48 @@
  * Copyright (c) 2013-2025 Valeriy Chupurnov. All rights reserved. https://xdsoft.net
  */
 import { STATUSES } from "../../component/statuses.js";
+import { IS_PROD } from "../../constants.js";
 import { Dom } from "../../dom/dom.js";
 import { isFunction, isViewObject } from "../../helpers/checker/index.js";
 import { error } from "../../helpers/utils/error/error.js";
+/**
+ * Retrieves a cached property value from an object if it exists; otherwise, returns `null`.
+ *
+ * This utility is particularly useful when working with properties that are lazily initialized
+ * or dynamically created, such as getters or cached computations. It ensures you can safely
+ * access the value without triggering initialization or creating a new instance.
+ *
+ * ### Usage Example:
+ * ```typescript
+ * import type { IUIElement } from "jodit";
+ *
+ * const { component, cache, cached } = Jodit.decorators;
+ * const { UIElement } = Jodit.modules;
+ *
+ * @component
+ * class SomeComponent extends UIElement {
+ *   @cache
+ *   get someElement(): IUIElement {
+ *     return new UIElement(this.jodit);
+ *   }
+ *
+ *   destruct() {
+ *     // Use the cached utility to clean up only if the property is initialized
+ *     cached(this, 'someElement')?.destruct();
+ *     super.destruct();
+ *   }
+ * }
+ * ```
+ *
+ * @param object - The object containing the property to check.
+ * @param property - The name of the property to retrieve from the cache.
+ * @returns The cached value of the property if it exists; otherwise, `null`.
+ *
+ * ### Notes:
+ * - If the property is defined as a getter, the function will return `null`
+ *   instead of invoking the getter.
+ * - This function is non-destructive and does not alter the object's state.
+ */
 export function cached(object, property) {
     const descriptor = Object.getOwnPropertyDescriptor(object, property);
     if (!descriptor || isFunction(descriptor.get)) {
@@ -14,12 +53,79 @@ export function cached(object, property) {
     }
     return descriptor.value;
 }
+/**
+ * A decorator that caches the result of a getter method. Once the getter is accessed for the first time,
+ * its computed value is stored as a property of the object. Subsequent accesses return the cached value
+ * without recalculating it, improving performance and avoiding redundant computations.
+ *
+ * ### Key Features:
+ * - **Lazy Initialization**: The original getter is invoked only once, the first time the property is accessed.
+ * - **Immutability**: After caching, the value is stored as a non-writable, non-configurable property, preventing accidental modifications.
+ * - **Conditional Caching**: If the returned value has a property `noCache` set to `true`, the caching mechanism is bypassed, and the getter is invoked each time.
+ *
+ * ### Usage Example 1: Basic Caching
+ * ```typescript
+ * import { cache } from './decorators';
+ *
+ * class Example {
+ *   private counter = 0;
+ *
+ *   @cache
+ *   get expensiveComputation(): number {
+ *     console.log('Calculating...');
+ *     return ++this.counter;
+ *   }
+ * }
+ *
+ * const instance = new Example();
+ * console.log(instance.expensiveComputation); // Logs "Calculating..." and returns 1
+ * console.log(instance.expensiveComputation); // Returns 1 (cached value, no calculation)
+ * ```
+ *
+ * ### Usage Example 2: Integration with Cached Utilities
+ * ```typescript
+ * import { cache, cached } from './decorators';
+ * import type { IUIElement } from "jodit";
+ *
+ * const { component } = Jodit.decorators;
+ * const { UIElement } = Jodit.modules;
+ *
+ * @component
+ * class SomeComponent extends UIElement {
+ *   @cache
+ *   get someElement(): IUIElement {
+ *     return new UIElement(this.jodit);
+ *   }
+ *
+ *   destruct() {
+ *     // Use the cached utility to clean up only if the property is initialized
+ *     cached(this, 'someElement')?.destruct();
+ *     super.destruct();
+ *   }
+ * }
+ * ```
+ *
+ * @param _ - The target object (not used directly).
+ * @param name - The name of the property to decorate.
+ * @param descriptor - The property descriptor, which must include a getter method.
+ * @throws Will throw an error if the descriptor does not include a getter.
+ *
+ * ### Notes:
+ * - **Performance**: Ideal for properties that are computationally expensive and do not change after the initial computation.
+ * - **Flexibility**: Supports conditional caching via the `noCache` property in the returned value.
+ * - **Compatibility**: Designed to work seamlessly with objects and classes in TypeScript or JavaScript.
+ */
 export function cache(_, name, descriptor) {
     const getter = descriptor.get;
     if (!getter) {
         throw error('Getter property descriptor expected');
     }
     descriptor.get = function () {
+        if (!IS_PROD) {
+            if (this.isInDestruct) {
+                console.error('Trying to access property in destructed component');
+            }
+        }
         const value = getter.call(this);
         if (value && value.noCache === true) {
             return value;

package/esm/core/global.d.ts

@@ -6,7 +6,7 @@
 /**
  * @module global
  */
-import type { HTMLTagNames, IDictionary, IJodit, IViewBased, IViewComponent } from "../types";
+import type { HTMLTagNames, IDictionary, IJodit, IViewBased, IViewComponent, IViewOptions } from "../types";
 import { PluginSystem } from "./plugin/plugin-system";
 import { EventEmitter } from "./event-emitter";
 export declare const instances: IDictionary<IJodit>;
@@ -21,6 +21,11 @@ export declare const extendLang: (langs: IDictionary) => void;
  * Create unique box(HTMLCotainer) and remove it after destroy
  */
 export declare function getContainer<T extends HTMLTagNames = HTMLTagNames>(jodit: IViewBased | IViewComponent, classFunc?: Function | string, tag?: T, createInsideEditor?: boolean): HTMLElementTagNameMap[T];
+/**
+ * Get root element for view
+ * @internal
+ */
+export declare function getPopupViewRoot(o: IViewOptions, container: HTMLElement, defaultRoot: HTMLElement): HTMLElement;
 /**
  * Global event emitter
  */

package/esm/core/global.js

@@ -3,6 +3,7 @@
  * Released under MIT see LICENSE.txt in the project root for license information.
  * Copyright (c) 2013-2025 Valeriy Chupurnov. All rights reserved. https://xdsoft.net
  */
+import { css } from "./helpers/index.js";
 import { isJoditObject } from "./helpers/checker/is-jodit-object.js";
 import { isString } from "./helpers/checker/is-string.js";
 import { isViewObject } from "./helpers/checker/is-view-object.js";
@@ -54,21 +55,10 @@ export function getContainer(jodit, classFunc, tag = 'div', createInsideEditor =
             : 'jodit-utils';
     const data = boxes.get(jodit) || {}, key = name + tag;
     const view = isViewObject(jodit) ? jodit : jodit.j;
+    let body = null;
     if (!data[key]) {
         let c = view.c;
-        let body;
-        if (isJoditObject(jodit) && jodit.o.shadowRoot) {
-            body = jodit.o.shadowRoot;
-        }
-        else {
-            body = jodit.od.body;
-            if (isJoditObject(jodit)) {
-                const dialog = Dom.closest(jodit.container, 'dialog', jodit.od.body);
-                if (dialog) {
-                    body = dialog;
-                }
-            }
-        }
+        body = getPopupViewRoot(view.o, view.container, jodit.od.body);
         if (createInsideEditor &&
             isJoditObject(jodit) &&
             jodit.od !== jodit.ed) {
@@ -100,6 +90,18 @@ export function getContainer(jodit, classFunc, tag = 'div', createInsideEditor =
     data[key].classList.add(`jodit_theme_${view.o.theme || 'default'}`);
     return data[key];
 }
+/**
+ * Get root element for view
+ * @internal
+ */
+export function getPopupViewRoot(o, container, defaultRoot) {
+    return (o.popupRoot ??
+        o.shadowRoot ??
+        Dom.closest(container, parentElement => Dom.isHTMLElement(parentElement) &&
+            (Dom.isTag(parentElement, 'dialog') ||
+                ['fixed', 'absolute'].includes(css(parentElement, 'position'))), defaultRoot) ??
+        defaultRoot);
+}
 /**
  * Global event emitter
  */

package/esm/core/helpers/utils/selector.d.ts

@@ -15,14 +15,18 @@ import type { HTMLTagNames, IDictionary, Nullable } from "../../../types";
  * ```javascript
  * Jodit.modules.Helpers.$$('.someselector').forEach(function (elm) {
  *      elm.addEventListener('click', function () {
- *          alert(''Clicked');
+ *          alert('Clicked');
  *      });
  * })
  * ```
  * @param selector - CSS like selector
  * @param root - where to search
+ * @deprecated Do not use it in new code
  */
 export declare function $$<K extends HTMLTagNames>(selector: K, root: HTMLElement | DocumentFragment): Array<HTMLElementTagNameMap[K]>;
+/**
+ * @deprecated Do not use it in new code
+ */
 export declare function $$<T extends HTMLElement>(selector: string, root: HTMLElement | DocumentFragment): T[];
 /**
  * Calculate XPath selector

package/esm/core/helpers/utils/selector.js

@@ -14,6 +14,9 @@ const $$temp = () => {
     temp++;
     return temp;
 };
+/**
+ * @deprecated Do not use it in new code
+ */
 export function $$(selector, root) {
     let result;
     if (!IS_ES_NEXT &&

package/esm/core/traits/dlgs.js

@@ -3,14 +3,17 @@
  * Released under MIT see LICENSE.txt in the project root for license information.
  * Copyright (c) 2013-2025 Valeriy Chupurnov. All rights reserved. https://xdsoft.net
  */
+import { getPopupViewRoot } from "../global.js";
 import { isHTML, isString } from "../helpers/checker/index.js";
 import { markOwner } from "../helpers/utils/utils.js";
 import { Alert, Confirm, Dialog, Prompt } from "../../modules/dialog/index.js";
 export class Dlgs {
     dlg(options) {
+        const popupRoot = getPopupViewRoot(this.o, this.container, this.od.body);
         const dialog = new Dialog({
             language: this.o.language,
             shadowRoot: this.o.shadowRoot,
+            popupRoot,
             ownerWindow: this.o.ownerWindow,
             defaultTimeout: this.o.defaultTimeout,
             direction: this.o.direction,

package/esm/core/view/view.js

@@ -19,7 +19,7 @@ import { Component } from "../component/component.js";
 import { STATUSES } from "../component/statuses.js";
 import { APP_VERSION, BASE_PATH, ES, IS_ES_MODERN, IS_ES_NEXT } from "../constants.js";
 import { Create } from "../create/create.js";
-import { cache } from "../decorators/cache/cache.js";
+import { cache, cached } from "../decorators/cache/cache.js";
 import { derive } from "../decorators/derive/derive.js";
 import { hook } from "../decorators/hook/hook.js";
 import { Dom } from "../dom/index.js";
@@ -246,16 +246,14 @@ let View = View_1 = class View extends Component {
         if (this.isDestructed) {
             return;
         }
-        this.progressbar.destruct();
-        this.message.destruct();
+        cached(this, 'progressbar')?.destruct();
+        cached(this, 'message')?.destruct();
         if (this.events) {
             this.events.destruct();
             // @ts-ignore
             this.events = undefined;
         }
-        if (this.buffer) {
-            this.buffer.clear();
-        }
+        cached(this, 'buffer')?.clear();
         Dom.safeRemove(this.container);
         super.destruct();
     }

package/esm/jodit.js

@@ -16,7 +16,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 var Jodit_1;
 import * as constants from "./core/constants.js";
 import { FAT_MODE, IS_PROD, lang } from "./core/constants.js";
-import { autobind, cache, derive, throttle, watch } from "./core/decorators/index.js";
+import { autobind, cache, cached, derive, throttle, watch } from "./core/decorators/index.js";
 import { eventEmitter, instances, modules, pluginSystem } from "./core/global.js";
 import { asArray, attr, callPromise, ConfigProto, css, error, isFunction, isJoditObject, isNumber, isPromise, isString, isVoid, kebabCase, markAsAtomic, normalizeKeyAliases, resolveElement, toArray, ucfirst } from "./core/helpers/index.js";
 import { Ajax } from "./core/request/index.js";
@@ -1163,15 +1163,15 @@ let Jodit = Jodit_1 = class Jodit extends ViewWithToolbar {
         }
         this.setStatus(STATUSES.beforeDestruct);
         this.__elementToPlace.clear();
-        this.storage.clear();
-        this.buffer.clear();
+        cached(this, 'storage')?.clear();
+        cached(this, 'buffer')?.clear();
         this.commands.clear();
         this.__selectionLocked = null;
         this.e.off(this.ow, 'resize');
         this.e.off(this.ow);
         this.e.off(this.od);
         this.e.off(this.od.body);
-        const buffer = this.editor ? this.getEditorValue() : '';
+        const tmpValue = this.editor ? this.getEditorValue() : '';
         this.places.forEach(({ container, workplace, statusbar, element, iframe, editor, history }) => {
             if (!element) {
                 return;
@@ -1215,7 +1215,7 @@ let Jodit = Jodit_1 = class Jodit extends ViewWithToolbar {
             Dom.safeRemove(iframe);
             // inline mode
             if (container === element) {
-                element.innerHTML = buffer;
+                element.innerHTML = tmpValue;
             }
             history.destruct();
         });

package/esm/modules/dialog/dialog.d.ts

@@ -35,17 +35,17 @@ export declare class Dialog extends ViewWithToolbar implements IDialog {
     private lockSelect;
     private unlockSelect;
     private setElements;
-    private onMouseUp;
+    private __onMouseUp;
     /**
      *
      */
-    private onHeaderMouseDown;
-    private onMouseMove;
-    private onEsc;
-    private onResize;
-    private onResizerMouseDown;
-    private addGlobalResizeListeners;
-    private removeGlobalResizeListeners;
+    private __onHeaderMouseDown;
+    private __onMouseMove;
+    private __onEsc;
+    private __onResize;
+    private __onResizerMouseDown;
+    private __addGlobalResizeListeners;
+    private __removeGlobalResizeListeners;
     OPTIONS: IDialogOptions;
     readonly dialog: HTMLElement;
     workplace: HTMLDivElement;