jodit 4.2.50 → 4.3.1

package/esm/modules/dialog/dialog.js

@@ -60,7 +60,14 @@ let Dialog = Dialog_1 = class Dialog extends ViewWithToolbar {
         return 'Dialog';
     }
     get destination() {
-        return (this.o.shadowRoot ?? this.od.body);
+        const { popupRoot, shadowRoot } = this.o;
+        if (popupRoot) {
+            return popupRoot;
+        }
+        if (shadowRoot) {
+            return shadowRoot;
+        }
+        return this.od.body;
     }
     setElements(root, elements) {
         const elements_list = [];
@@ -89,14 +96,14 @@ let Dialog = Dialog_1 = class Dialog extends ViewWithToolbar {
             }
         });
     }
-    onMouseUp() {
+    __onMouseUp() {
         if (this.draggable || this.resizable) {
-            this.removeGlobalResizeListeners();
+            this.__removeGlobalResizeListeners();
             this.draggable = false;
             this.resizable = false;
             this.unlockSelect();
             if (this.e) {
-                this.removeGlobalResizeListeners();
+                this.__removeGlobalResizeListeners();
                 /**
                  * Fired when the dialog box is finished to resizing
                  */
@@ -107,7 +114,7 @@ let Dialog = Dialog_1 = class Dialog extends ViewWithToolbar {
     /**
      *
      */
-    onHeaderMouseDown(e) {
+    __onHeaderMouseDown(e) {
         const target = e.target;
         if (!this.o.draggable ||
             (target && target.nodeName.match(/^(INPUT|SELECT)$/))) {
@@ -123,7 +130,7 @@ let Dialog = Dialog_1 = class Dialog extends ViewWithToolbar {
             e.preventDefault();
         }
         this.lockSelect();
-        this.addGlobalResizeListeners();
+        this.__addGlobalResizeListeners();
         if (this.e) {
             /**
              * Fired when dialog box is started moving
@@ -132,7 +139,7 @@ let Dialog = Dialog_1 = class Dialog extends ViewWithToolbar {
             this.e.fire('closeAllPopups');
         }
     }
-    onMouseMove(e) {
+    __onMouseMove(e) {
         if (this.draggable && this.o.draggable) {
             this.setPosition(this.startPoint.x + e.clientX - this.startX, this.startPoint.y + e.clientY - this.startY);
             if (this.e) {
@@ -153,7 +160,7 @@ let Dialog = Dialog_1 = class Dialog extends ViewWithToolbar {
             }
         }
     }
-    onEsc(e) {
+    __onEsc(e) {
         if (!this.o.closeOnEsc) {
             return;
         }
@@ -170,14 +177,14 @@ let Dialog = Dialog_1 = class Dialog extends ViewWithToolbar {
             e.stopImmediatePropagation();
         }
     }
-    onResizerMouseDown(e) {
+    __onResizerMouseDown(e) {
         this.resizable = true;
         this.startX = e.clientX;
         this.startY = e.clientY;
         this.startPoint.w = this.dialog.offsetWidth;
         this.startPoint.h = this.dialog.offsetHeight;
         this.lockSelect();
-        this.addGlobalResizeListeners();
+        this.__addGlobalResizeListeners();
         if (this.e) {
             /**
              * Fired when dialog box is started resizing
@@ -185,17 +192,17 @@ let Dialog = Dialog_1 = class Dialog extends ViewWithToolbar {
             this.e.fire(this, 'startResize');
         }
     }
-    addGlobalResizeListeners() {
+    __addGlobalResizeListeners() {
         const self = this;
         self.e
-            .on(self.ow, 'pointermove touchmove', self.onMouseMove)
-            .on(self.ow, 'pointerup touchend', self.onMouseUp);
+            .on(self.ow, 'pointermove touchmove', self.__onMouseMove)
+            .on(self.ow, 'pointerup touchend', self.__onMouseUp);
     }
-    removeGlobalResizeListeners() {
+    __removeGlobalResizeListeners() {
         const self = this;
         self.e
-            .off(self.ow, 'mousemove pointermove', self.onMouseMove)
-            .off(self.ow, 'mouseup pointerup', self.onMouseUp);
+            .off(self.ow, 'mousemove pointermove', self.__onMouseMove)
+            .off(self.ow, 'mouseup pointerup', self.__onMouseUp);
     }
     /**
      * Specifies the size of the window
@@ -451,7 +458,7 @@ let Dialog = Dialog_1 = class Dialog extends ViewWithToolbar {
             this.toggleFullSize(false);
         }
         Dom.safeRemove(this.container);
-        this.removeGlobalResizeListeners();
+        this.__removeGlobalResizeListeners();
         /**
          * It called after the window is closed
          */
@@ -477,7 +484,7 @@ let Dialog = Dialog_1 = class Dialog extends ViewWithToolbar {
         this.unlockSelect = () => {
             this.setMod('moved', false);
         };
-        this.onResize = () => {
+        this.__onResize = () => {
             if (this.options &&
                 this.o.resizable &&
                 !this.moved &&
@@ -545,14 +552,14 @@ let Dialog = Dialog_1 = class Dialog extends ViewWithToolbar {
         });
         const headerBox = self.getElm('header');
         headerBox &&
-            self.e.on(headerBox, 'pointerdown touchstart', self.onHeaderMouseDown);
-        self.e.on(self.resizer, 'mousedown touchstart', self.onResizerMouseDown);
+            self.e.on(headerBox, 'pointerdown touchstart', self.__onHeaderMouseDown);
+        self.e.on(self.resizer, 'mousedown touchstart', self.__onResizerMouseDown);
         const fullSize = pluginSystem.get('fullsize');
         isFunction(fullSize) && fullSize(self);
         this.e
             .on(self.container, 'close_dialog', self.close)
-            .on(this.ow, 'keydown', this.onEsc)
-            .on(this.ow, 'resize', this.onResize);
+            .on(this.ow, 'keydown', this.__onEsc)
+            .on(this.ow, 'resize', this.__onResize);
         if (this.o.closeOnClickOverlay) {
             const overlay = self.getElm('overlay');
             assert(overlay != null, 'Overlay element does not exist');
@@ -581,30 +588,30 @@ let Dialog = Dialog_1 = class Dialog extends ViewWithToolbar {
             this.close();
         }
         if (this.events) {
-            this.removeGlobalResizeListeners();
+            this.__removeGlobalResizeListeners();
             this.events
                 .off(this.container, 'close_dialog', self.close)
-                .off(this.ow, 'keydown', this.onEsc)
-                .off(this.ow, 'resize', this.onResize);
+                .off(this.ow, 'keydown', this.__onEsc)
+                .off(this.ow, 'resize', this.__onResize);
         }
         super.destruct();
     }
 };
 __decorate([
     autobind
-], Dialog.prototype, "onMouseUp", null);
+], Dialog.prototype, "__onMouseUp", null);
 __decorate([
     autobind
-], Dialog.prototype, "onHeaderMouseDown", null);
+], Dialog.prototype, "__onHeaderMouseDown", null);
 __decorate([
     autobind
-], Dialog.prototype, "onMouseMove", null);
+], Dialog.prototype, "__onMouseMove", null);
 __decorate([
     autobind
-], Dialog.prototype, "onEsc", null);
+], Dialog.prototype, "__onEsc", null);
 __decorate([
     autobind
-], Dialog.prototype, "onResizerMouseDown", null);
+], Dialog.prototype, "__onResizerMouseDown", null);
 __decorate([
     autobind
 ], Dialog.prototype, "close", null);

package/esm/modules/file-browser/file-browser.js

@@ -16,7 +16,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { STATUSES } from "../../core/component/index.js";
 import * as consts from "../../core/constants.js";
 import { IS_PROD } from "../../core/constants.js";
-import { autobind, cache, derive } from "../../core/decorators/index.js";
+import { autobind, cache, cached, derive } from "../../core/decorators/index.js";
 import { watch } from "../../core/decorators/watch/watch.js";
 import { observable } from "../../core/event-emitter/index.js";
 import { ConfigProto, error, isAbortError, isFunction, isString, trim } from "../../core/helpers/index.js";
@@ -307,8 +307,8 @@ let FileBrowser = class FileBrowser extends ViewWithToolbar {
         if (this.isInDestruct) {
             return;
         }
+        cached(this, '_dialog')?.destruct();
         super.destruct();
-        this._dialog.destruct();
         this.events && this.e.off('.filebrowser');
         this.uploader && this.uploader.destruct();
     }

package/esm/plugins/clipboard/clipboard.js

@@ -4,6 +4,7 @@
  * Copyright (c) 2013-2025 Valeriy Chupurnov. All rights reserved. https://xdsoft.net
  */
 import { CLIPBOARD_ID, INSERT_AS_HTML, TEXT_HTML, TEXT_PLAIN } from "../../core/constants.js";
+import { cached } from "../../core/decorators/cache/cache.js";
 import { pluginSystem } from "../../core/global.js";
 import { getDataTransfer, stripTags } from "../../core/helpers/index.js";
 import "./config.js";
@@ -61,7 +62,7 @@ export class clipboard {
     }
     /** @override */
     destruct(editor) {
-        editor?.buffer?.set(CLIPBOARD_ID, '');
+        cached(editor, 'buffer')?.set(CLIPBOARD_ID, '');
         editor?.events?.off('.' + CLIPBOARD_ID);
     }
 }

package/esm/plugins/image-processor/image-processor.js

@@ -14,7 +14,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { SOURCE_CONSUMER } from "../../core/constants.js";
-import { debounce, watch } from "../../core/decorators/index.js";
+import { cached, debounce, watch } from "../../core/decorators/index.js";
 import { pluginSystem } from "../../core/global.js";
 import { $$, dataBind } from "../../core/helpers/index.js";
 import { Plugin } from "../../core/plugin/index.js";
@@ -27,13 +27,14 @@ const JODIT_IMAGE_BLOB_ID = JODIT_IMAGE_PROCESSOR_BINDED + 'blob-id';
 export class imageProcessor extends Plugin {
     afterInit(jodit) { }
     beforeDestruct(jodit) {
-        const list = jodit.buffer.get(JODIT_IMAGE_BLOB_ID);
-        if (list) {
+        const buffer = cached(jodit, 'buffer');
+        const list = buffer?.get(JODIT_IMAGE_BLOB_ID);
+        if (buffer && list) {
             const keys = Object.keys(list);
             for (const uri of keys) {
                 URL.revokeObjectURL(uri);
             }
-            jodit.buffer.delete(JODIT_IMAGE_BLOB_ID);
+            buffer.delete(JODIT_IMAGE_BLOB_ID);
         }
     }
     onAfterGetValueFromEditor(data, consumer) {

package/esm/plugins/search/search.js

@@ -14,7 +14,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { IS_PROD } from "../../core/constants.js";
-import { autobind, cache, watch } from "../../core/decorators/index.js";
+import { autobind, cache, cached, watch } from "../../core/decorators/index.js";
 import { Dom, LazyWalker } from "../../core/dom/index.js";
 import { pluginSystem } from "../../core/global.js";
 import { scrollIntoViewIfNeeded } from "../../core/helpers/index.js";
@@ -319,7 +319,7 @@ export class search extends Plugin {
     }
     /** @override */
     beforeDestruct(jodit) {
-        this.ui.destruct();
+        cached(this, 'ui')?.destruct();
         jodit.e.off('.search');
     }
 }

package/esm/types/view.d.ts

@@ -59,6 +59,7 @@ interface IViewOptions extends ILanguageOptions, IToolbarOptions {
     createAttributes?: IDictionary<Attributes | NodeFunction>;
     events?: IDictionary<(...args: any[]) => any>;
     shadowRoot?: Nullable<ShadowRoot>;
+    popupRoot?: Nullable<HTMLElement>;
     ownerWindow?: Window;
     language?: string;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "jodit",
-	"version": "4.2.50",
+	"version": "4.3.1",
 	"description": "Jodit is an awesome and useful wysiwyg editor with filebrowser",
 	"main": "esm/index.js",
 	"types": "types/index.d.ts",

package/types/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/types/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/types/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/types/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/types/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;

package/types/types/view.d.ts

@@ -59,6 +59,7 @@ interface IViewOptions extends ILanguageOptions, IToolbarOptions {
     createAttributes?: IDictionary<Attributes | NodeFunction>;
     events?: IDictionary<(...args: any[]) => any>;
     shadowRoot?: Nullable<ShadowRoot>;
+    popupRoot?: Nullable<HTMLElement>;
     ownerWindow?: Window;
     language?: string;
 }