jodit 4.13.26 → 4.14.0

package/esm/jodit.js

@@ -19,6 +19,7 @@ import { FAT_MODE, IS_PROD, lang } from "./core/constants.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, ConfigMerge, ConfigProto, css, error, isFunction, isJoditObject, isNumber, isPromise, isString, isVoid, kebabCase, markAsAtomic, normalizeKeyAliases, resolveElement, toArray, ucfirst } from "./core/helpers/index.js";
+import { cssInline } from "./core/helpers/utils/css.js";
 import { Ajax } from "./core/request/index.js";
 import { Dlgs } from "./core/traits/dlgs.js";
 import { Config } from "./config.js";
@@ -806,7 +807,7 @@ let Jodit = Jodit_1 = class Jodit extends ViewWithToolbar {
         this.setReadOnly(isDisabled || readOnly);
         this.__wasReadOnly = readOnly;
         if (this.editor) {
-            this.editor.setAttribute('aria-disabled', isDisabled.toString());
+            attr(this.editor, 'aria-disabled', isDisabled);
             this.container.classList.toggle('jodit_disabled', isDisabled);
             this.e.fire('disabled', isDisabled);
         }
@@ -830,10 +831,10 @@ let Jodit = Jodit_1 = class Jodit extends ViewWithToolbar {
         this.__wasReadOnly = isReadOnly;
         this.o.readonly = isReadOnly;
         if (isReadOnly) {
-            this.editor && this.editor.removeAttribute('contenteditable');
+            this.editor && attr(this.editor, 'contenteditable', null);
         }
         else {
-            this.editor && this.editor.setAttribute('contenteditable', 'true');
+            this.editor && attr(this.editor, 'contenteditable', true);
         }
         this.e && this.e.fire('readonly', isReadOnly);
     }
@@ -995,14 +996,14 @@ let Jodit = Jodit_1 = class Jodit extends ViewWithToolbar {
             const property = kebabCase(key);
             container.style.setProperty(`--jd-${property}`, styleValues[key]);
         });
-        container.setAttribute('contenteditable', 'false');
+        attr(container, 'contenteditable', false);
         let buffer = null;
         if (this.o.inline) {
             if (['TEXTAREA', 'INPUT'].indexOf(element.nodeName) === -1) {
                 container = element;
-                element.setAttribute(__defaultClassesKey, element.className.toString());
+                attr(element, __defaultClassesKey, element.className.toString());
                 buffer = container.innerHTML;
-                container.innerHTML = '';
+                Dom.detach(container);
             }
             container.classList.add('jodit_inline');
             container.classList.add('jodit-container');
@@ -1010,32 +1011,33 @@ let Jodit = Jodit_1 = class Jodit extends ViewWithToolbar {
         // actual for inline mode
         if (element !== container) {
             // hide source element
-            if (element.style.display) {
-                element.setAttribute(__defaultStyleDisplayKey, element.style.display);
+            const display = cssInline(element, 'display');
+            if (display) {
+                attr(element, __defaultStyleDisplayKey, display);
             }
-            element.style.display = 'none';
+            css(element, 'display', 'none');
         }
         const SLOT = 'workplace-slot';
         // A slot that always stays ABOVE the toolbar (presence bars, banners…).
         // The `data-jodit-above-toolbar` attribute tells ViewWithToolbar to keep
         // the toolbar box below it when (re)attaching the toolbar container.
         const aboveSlot = this.c.div(this.getFullElName(SLOT, 'above'), NOEDIT);
-        aboveSlot.setAttribute('data-jodit-above-toolbar', '');
+        attr(aboveSlot, 'data-jodit-above-toolbar', '');
         Dom.appendChildFirst(container, aboveSlot);
         const topSlot = this.c.div(this.getFullElName(SLOT, 'top'), NOEDIT);
-        container.appendChild(topSlot);
+        Dom.append(container, topSlot);
         const centerSlot = this.c.div(this.getFullElName(SLOT, 'center'), NOEDIT);
         const workplace = this.c.div('jodit-workplace', NOEDIT);
         const leftSlot = this.c.div(this.getFullElName(SLOT, 'left'), NOEDIT);
         const rightSlot = this.c.div(this.getFullElName(SLOT, 'right'), NOEDIT);
-        centerSlot.appendChild(leftSlot);
-        centerSlot.appendChild(workplace);
-        centerSlot.appendChild(rightSlot);
-        container.appendChild(centerSlot);
+        Dom.append(centerSlot, leftSlot);
+        Dom.append(centerSlot, workplace);
+        Dom.append(centerSlot, rightSlot);
+        Dom.append(container, centerSlot);
         const bottomPanel = this.c.div(this.getFullElName(SLOT, 'bottom'), NOEDIT);
-        container.appendChild(bottomPanel);
+        Dom.append(container, bottomPanel);
         if (element.parentNode && element !== container) {
-            element.parentNode.insertBefore(container, element);
+            Dom.before(element, container);
         }
         Object.defineProperty(element, 'component', {
             enumerable: false,
@@ -1047,7 +1049,7 @@ let Jodit = Jodit_1 = class Jodit extends ViewWithToolbar {
             'aria-disabled': false,
             tabindex: this.o.tabIndex
         });
-        workplace.appendChild(editor);
+        Dom.append(workplace, editor);
         const currentPlace = {
             editor,
             element,
@@ -1101,7 +1103,7 @@ let Jodit = Jodit_1 = class Jodit extends ViewWithToolbar {
         return callPromise(initResult, init);
     }
     addDisclaimer(elm) {
-        this.workplace.appendChild(elm);
+        Dom.append(this.workplace, elm);
     }
     /**
      * Set current place object
@@ -1198,10 +1200,10 @@ let Jodit = Jodit_1 = class Jodit extends ViewWithToolbar {
         // direction
         if (this.o.direction) {
             const direction = this.o.direction.toLowerCase() === 'rtl' ? 'rtl' : 'ltr';
-            this.editor.style.direction = direction;
-            this.editor.setAttribute('dir', direction);
-            this.container.style.direction = direction;
-            this.container.setAttribute('dir', direction);
+            css(this.editor, 'direction', direction);
+            attr(this.editor, 'dir', direction);
+            css(this.container, 'direction', direction);
+            attr(this.container, 'dir', direction);
             this.toolbar.setDirection(direction);
         }
         // proxy events
@@ -1294,23 +1296,23 @@ let Jodit = Jodit_1 = class Jodit extends ViewWithToolbar {
                 if (element.hasAttribute(__defaultStyleDisplayKey)) {
                     const display = attr(element, __defaultStyleDisplayKey);
                     if (display) {
-                        element.style.display = display;
-                        element.removeAttribute(__defaultStyleDisplayKey);
+                        css(element, 'display', display);
+                        attr(element, __defaultStyleDisplayKey, null);
                     }
                 }
                 else {
-                    element.style.display = '';
+                    css(element, 'display', '');
                 }
             }
             else {
                 if (element.hasAttribute(__defaultClassesKey)) {
                     element.className =
                         attr(element, __defaultClassesKey) || '';
-                    element.removeAttribute(__defaultClassesKey);
+                    attr(element, __defaultClassesKey, null);
                 }
             }
             if (element.hasAttribute('style') && !attr(element, 'style')) {
-                element.removeAttribute('style');
+                attr(element, 'style', null);
             }
             statusbar.destruct();
             this.e.off(container);

package/esm/modules/dialog/alert.js

@@ -31,7 +31,7 @@ export function Alert(msg, title, callback, className = 'jodit-dialog_alert') {
         ? this
         : new Dialog({ closeOnClickOverlay: true }), container = dialog.c.div(className), okButton = Button(dialog, 'ok', 'Ok');
     asArray(msg).forEach(oneMessage => {
-        container.appendChild(Dom.isNode(oneMessage) ? oneMessage : dialog.c.fromHTML(oneMessage));
+        Dom.append(container, Dom.isNode(oneMessage) ? oneMessage : dialog.c.fromHTML(oneMessage));
     });
     okButton.onAction(() => {
         if (!callback || !isFunction(callback) || callback(dialog) !== false) {

package/esm/modules/dialog/confirm.js

@@ -3,6 +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
  */
+import { Dom } from "../../core/dom/dom.js";
 import { isFunction } from "../../core/helpers/checker/is-function.js";
 import { Button } from "../../core/ui/button/button/button.js";
 import { Dialog } from "./dialog.js";
@@ -28,8 +29,8 @@ export function Confirm(msg, title, callback) {
         callback = title;
         title = undefined;
     }
-    $label.appendChild(dialog.c.fromHTML(msg));
-    $div.appendChild($label);
+    Dom.append($label, dialog.c.fromHTML(msg));
+    Dom.append($div, $label);
     const action = (yes) => () => {
         if (!callback || callback(yes) !== false) {
             dialog.close();

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

@@ -124,6 +124,12 @@ export declare class Dialog extends ViewWithToolbar implements IDialog {
      * ```
      */
     setFooter(content: Content): this;
+    /**
+     * Registry of the currently opened dialogs. Replaces a DOM scan of the
+     * whole `destination` (usually `document.body`) for every z-index update.
+     */
+    private static readonly __opened;
+    private __openedSiblings;
     /**
      * Get zIndex from dialog
      */

package/esm/modules/dialog/dialog.js

@@ -21,7 +21,7 @@ import { Dom } from "../../core/dom/dom.js";
 import { eventEmitter, pluginSystem } from "../../core/global.js";
 import { asArray, splitArray, toArray } from "../../core/helpers/array/index.js";
 import { hasContainer, isArray, isBoolean, isFunction, isNumber, isString, isVoid } from "../../core/helpers/checker/index.js";
-import { $$, attr, ConfigProto, css } from "../../core/helpers/utils/index.js";
+import { attr, ConfigProto, css } from "../../core/helpers/utils/index.js";
 import { assert } from "../../core/helpers/utils/assert.js";
 import { Icon } from "../../core/ui/index.js";
 import { View } from "../../core/view/view.js";
@@ -75,7 +75,7 @@ let Dialog = Dialog_1 = class Dialog extends ViewWithToolbar {
             if (isArray(elm)) {
                 const div = this.c.div(this.getFullElName('column'));
                 elements_list.push(div);
-                root.appendChild(div);
+                Dom.append(root, div);
                 return this.setElements(div, elm);
             }
             let element;
@@ -87,12 +87,12 @@ let Dialog = Dialog_1 = class Dialog extends ViewWithToolbar {
             }
             elements_list.push(element);
             if (element.parentNode !== root) {
-                root.appendChild(element);
+                Dom.append(root, element);
             }
         });
         toArray(root.childNodes).forEach((elm) => {
             if (elements_list.indexOf(elm) === -1) {
-                root.removeChild(elm);
+                Dom.safeRemove(elm);
             }
         });
     }
@@ -270,8 +270,11 @@ let Dialog = Dialog_1 = class Dialog extends ViewWithToolbar {
             this.offsetY = y;
             this.moved = Math.abs(x - left) > 100 || Math.abs(y - top) > 100;
         }
-        this.dialog.style.left = (x || left) + 'px';
-        this.dialog.style.top = (y || top) + 'px';
+        // strings on purpose: `css()` would truncate fractional pixels
+        css(this.dialog, {
+            left: (x || left) + 'px',
+            top: (y || top) + 'px'
+        });
         return this;
     }
     /**
@@ -332,6 +335,15 @@ let Dialog = Dialog_1 = class Dialog extends ViewWithToolbar {
         this.setMod('footer', Boolean(content));
         return this;
     }
+    __openedSiblings() {
+        const result = [];
+        Dialog_1.__opened.forEach(dialog => {
+            if (dialog.destination === this.destination) {
+                result.push(dialog);
+            }
+        });
+        return result;
+    }
     /**
      * Get zIndex from dialog
      */
@@ -342,12 +354,11 @@ let Dialog = Dialog_1 = class Dialog extends ViewWithToolbar {
      * Get dialog instance with maximum z-index displaying it on top of all the dialog boxes
      */
     getMaxZIndexDialog() {
-        let maxZi = 0, dlg, zIndex, res = this;
-        $$('.jodit-dialog', this.destination).forEach((dialog) => {
-            dlg = dialog.component;
-            zIndex = parseInt(css(dialog, 'zIndex'), 10);
-            if (dlg.isOpened && !isNaN(zIndex) && zIndex > maxZi) {
-                res = dlg;
+        let maxZi = 0, res = this;
+        this.__openedSiblings().forEach(dialog => {
+            const zIndex = dialog.getZIndex();
+            if (zIndex > maxZi) {
+                res = dialog;
                 maxZi = zIndex;
             }
         });
@@ -359,12 +370,11 @@ let Dialog = Dialog_1 = class Dialog extends ViewWithToolbar {
     setMaxZIndex() {
         if (this.getMod('static'))
             return;
-        let maxZIndex = 20000004, zIndex = 0;
-        $$('.jodit-dialog', this.destination).forEach(dialog => {
-            zIndex = parseInt(css(dialog, 'zIndex'), 10);
-            maxZIndex = Math.max(isNaN(zIndex) ? 0 : zIndex, maxZIndex);
+        let maxZIndex = 20000004;
+        this.__openedSiblings().forEach(dialog => {
+            maxZIndex = Math.max(dialog.getZIndex(), maxZIndex);
         });
-        this.container.style.zIndex = (maxZIndex + 1).toString();
+        css(this.container, 'zIndex', (maxZIndex + 1).toString());
     }
     /**
      * Expands the dialog on full browser window
@@ -410,14 +420,15 @@ let Dialog = Dialog_1 = class Dialog extends ViewWithToolbar {
         }
         this.setMod('active', true);
         this.isOpened = true;
+        Dialog_1.__opened.add(this);
         this.setModal(modal);
-        this.destination.appendChild(this.container);
+        Dom.append(this.destination, this.container);
         if (this.getMod('static') !== true) {
             this.setPosition(this.offsetX, this.offsetY);
             this.setMaxZIndex();
         }
         else {
-            this.container.style.removeProperty('z-index');
+            css(this.container, 'zIndex', null);
         }
         if (this.o.fullsize) {
             this.toggleFullSize(true);
@@ -472,6 +483,7 @@ let Dialog = Dialog_1 = class Dialog extends ViewWithToolbar {
         }
         this.setMod('active', false);
         this.isOpened = false;
+        Dialog_1.__opened.delete(this);
         if (this.isFullSize) {
             this.toggleFullSize(false);
         }
@@ -550,11 +562,11 @@ let Dialog = Dialog_1 = class Dialog extends ViewWithToolbar {
 				</div>
 			</div>`);
         if (self.options.direction === 'rtl') {
-            self.container.style.direction = 'rtl';
-            self.container.setAttribute('dir', 'rtl');
+            css(self.container, 'direction', 'rtl');
+            attr(self.container, 'dir', 'rtl');
         }
         if (this.o.zIndex) {
-            this.container.style.zIndex = this.o.zIndex.toString();
+            css(this.container, 'zIndex', this.o.zIndex.toString());
         }
         attr(self.container, 'role', 'dialog');
         Object.defineProperty(self.container, 'component', {
@@ -621,6 +633,7 @@ let Dialog = Dialog_1 = class Dialog extends ViewWithToolbar {
         if (this.isOpened) {
             this.close();
         }
+        Dialog_1.__opened.delete(this);
         if (this.events) {
             this.__removeGlobalResizeListeners();
             this.events
@@ -631,6 +644,11 @@ let Dialog = Dialog_1 = class Dialog extends ViewWithToolbar {
         super.destruct();
     }
 };
+/**
+ * Registry of the currently opened dialogs. Replaces a DOM scan of the
+ * whole `destination` (usually `document.body`) for every z-index update.
+ */
+Dialog.__opened = new Set();
 Dialog.defaultOptions = {
     ...View.defaultOptions,
     closeOnClickOverlay: false,

package/esm/modules/dialog/prompt.js

@@ -3,6 +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
  */
+import { Dom } from "../../core/dom/dom.js";
 import { isFunction } from "../../core/helpers/checker/is-function.js";
 import { attr } from "../../core/helpers/utils/attr.js";
 import { Button } from "../../core/ui/button/button/button.js";
@@ -41,9 +42,9 @@ export function Prompt(msg, title, callback, placeholder, defaultValue) {
     if (placeholder) {
         attr(inputElement, 'placeholder', placeholder);
     }
-    labelElement.appendChild(dialog.c.text(msg));
-    form.appendChild(labelElement);
-    form.appendChild(inputElement);
+    Dom.append(labelElement, dialog.c.text(msg));
+    Dom.append(form, labelElement);
+    Dom.append(form, inputElement);
     cancelButton.onAction(dialog.close);
     const onclick = () => {
         if (!callback ||

package/esm/modules/file-browser/builders/context-menu.js

@@ -80,7 +80,7 @@ export default (self) => {
                                 buttons: ['fullsize', 'dialog.close']
                             }), temp_content = self.c.div(CLASS_PREVIEW, '<div class="jodit-icon_loader"></div>'), preview_box = self.c.div(CLASS_PREVIEW + '__box'), next = self.c.fromHTML(preview_tpl_next()), prev = self.c.fromHTML(preview_tpl_next('prev', 'left')), addLoadHandler = (src) => {
                                 const image = self.c.element('img');
-                                image.setAttribute('src', src);
+                                attr(image, 'src', src);
                                 const onload = () => {
                                     var _a;
                                     if (self.isInDestruct) {
@@ -90,14 +90,14 @@ export default (self) => {
                                     Dom.detach(temp_content);
                                     if (opt.showPreviewNavigation) {
                                         if (Dom.prevWithClass(item, self.files.getFullElName('item'))) {
-                                            temp_content.appendChild(prev);
+                                            Dom.append(temp_content, prev);
                                         }
                                         if (Dom.nextWithClass(item, self.files.getFullElName('item'))) {
-                                            temp_content.appendChild(next);
+                                            Dom.append(temp_content, next);
                                         }
                                     }
-                                    temp_content.appendChild(preview_box);
-                                    preview_box.appendChild(image);
+                                    Dom.append(temp_content, preview_box);
+                                    Dom.append(preview_box, image);
                                     preview.setPosition();
                                     (_a = self === null || self === void 0 ? void 0 : self.events) === null || _a === void 0 ? void 0 : _a.fire('previewOpenedAndLoaded');
                                 };

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

@@ -4,6 +4,7 @@
  * Copyright (c) 2013-2026 Valerii Chupurnov. All rights reserved. https://xdsoft.net
  */
 import "../../core/request/config.js";
+import { Dom } from "../../core/dom/dom.js";
 import { isArray, isString } from "../../core/helpers/checker/index.js";
 import { humanSizeToBytes } from "../../core/helpers/utils/human-size-to-bytes.js";
 import { UIFileInput } from "../../core/ui/form/inputs/file/file.js";
@@ -290,7 +291,8 @@ Config.prototype.controls.filebrowser = {
     filter: {
         isInput: true,
         getContent: (filebrowser, b) => {
-            const oldInput = b.container.querySelector('.jodit-input');
+            const oldInput = Dom.first(b.container, node => Dom.isHTMLElement(node) &&
+                node.classList.contains('jodit-input'));
             if (oldInput) {
                 return oldInput;
             }

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

@@ -18,8 +18,10 @@ import * as consts from "../../core/constants.js";
 import { IS_PROD } from "../../core/constants.js";
 import { autobind, cache, cached, derive } from "../../core/decorators/index.js";
 import { watch } from "../../core/decorators/watch/watch.js";
+import { Dom } from "../../core/dom/dom.js";
 import { observable } from "../../core/event-emitter/index.js";
 import { ConfigProto, error, isAbortError, isFunction, isString, trim } from "../../core/helpers/index.js";
+import { cssInline } from "../../core/helpers/utils/css.js";
 import { Storage } from "../../core/storage/index.js";
 import { Dlgs } from "../../core/traits/dlgs.js";
 import { ViewWithToolbar } from "../../core/view/view-with-toolbar.js";
@@ -85,7 +87,8 @@ let FileBrowser = class FileBrowser extends ViewWithToolbar {
         return Storage.makeStorage(Boolean(this.o.saveStateInStorage), this.componentName);
     }
     get isOpened() {
-        return this._dialog.isOpened && this.browser.style.display !== 'none';
+        return (this._dialog.isOpened &&
+            cssInline(this.browser, 'display') !== 'none');
     }
     /**
      * It displays a message in the status bar of filebrowser
@@ -249,10 +252,10 @@ let FileBrowser = class FileBrowser extends ViewWithToolbar {
         self.browser.component = this;
         self.container = self.browser;
         if (self.o.showFoldersPanel) {
-            self.browser.appendChild(self.tree.container);
+            Dom.append(self.browser, self.tree.container);
         }
-        self.browser.appendChild(self.files.container);
-        self.browser.appendChild(self.status_line);
+        Dom.append(self.browser, self.files.container);
+        Dom.append(self.browser, self.status_line);
         selfListeners.call(self);
         nativeListeners.call(self);
         stateListeners.call(self);

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

@@ -70,11 +70,11 @@ export function stateListeners() {
         Dom.detach(files.container);
         if (state.elements.length) {
             state.elements.forEach(item => {
-                this.files.container.appendChild(getDomElement(item));
+                Dom.append(this.files.container, getDomElement(item));
             });
         }
         else {
-            files.container.appendChild(create.div(this.componentName + '_no-files_true', this.i18n('There are no files')));
+            Dom.append(files.container, create.div(this.componentName + '_no-files_true', this.i18n('There are no files')));
         }
     }, this.defaultTimeout))
         .on('change.sources', this.async.debounce(() => {
@@ -82,7 +82,7 @@ export function stateListeners() {
         state.sources.forEach(source => {
             const sourceName = source.name;
             if (sourceName && sourceName !== DEFAULT_SOURCE_NAME) {
-                this.tree.container.appendChild(create.div(this.tree.getFullElName('source-title'), sourceName));
+                Dom.append(this.tree.container, create.div(this.tree.getFullElName('source-title'), sourceName));
             }
             source.folders.forEach((name) => {
                 const folderElm = create.a(this.tree.getFullElName('item'), {
@@ -103,7 +103,7 @@ export function stateListeners() {
                     e.preventDefault();
                 };
                 this.e.on(folderElm, 'click', action('openFolder'));
-                this.tree.container.appendChild(folderElm);
+                Dom.append(this.tree.container, folderElm);
                 if (name === '..' || name === '.') {
                     return;
                 }
@@ -116,7 +116,7 @@ export function stateListeners() {
                         size: 'tiny'
                     });
                     btn.onAction(action('renameFolder'));
-                    folderElm.appendChild(btn.container);
+                    Dom.append(folderElm, btn.container);
                 }
                 if (options.deleteFolder &&
                     this.dataProvider.canI('FolderRemove')) {
@@ -127,7 +127,7 @@ export function stateListeners() {
                         size: 'tiny'
                     });
                     btn.onAction(action('removeFolder'));
-                    folderElm.appendChild(btn.container);
+                    Dom.append(folderElm, btn.container);
                 }
             });
             if (options.createNewFolder &&

package/esm/modules/image-editor/image-editor.js

@@ -17,17 +17,27 @@ var ImageEditor_1;
 import { ViewComponent } from "../../core/component/index.js";
 import { autobind, component, debounce, throttle } from "../../core/decorators/index.js";
 import { Dom } from "../../core/dom/index.js";
-import { toArray } from "../../core/helpers/array/to-array.js";
 import { trim } from "../../core/helpers/string/trim.js";
 import { attr } from "../../core/helpers/utils/attr.js";
 import { css } from "../../core/helpers/utils/css.js";
-import { $$, refs } from "../../core/helpers/utils/selector.js";
+import { refs } from "../../core/helpers/utils/selector.js";
 import { call } from "../../core/helpers/utils/utils.js";
 import { Button } from "../../core/ui/button/index.js";
 import { Config } from "../../config.js";
 import "./config.js";
 import { form } from "./templates/form.js";
 const jie = 'jodit-image-editor';
+const hasClass = (className) => (elm) => elm.classList.contains(className);
+function findFirst(root, cond) {
+    return Dom.first(root, n => Dom.isHTMLElement(n) && cond(n));
+}
+function findAll(root, cond) {
+    const result = [];
+    Dom.each(root, n => {
+        Dom.isHTMLElement(n) && cond(n) && result.push(n);
+    });
+    return result;
+}
 const TABS = {
     resize: 'resize',
     crop: 'crop'
@@ -78,19 +88,20 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends ViewComponent {
         return this.j.async.promise((resolve) => {
             const timestamp = new Date().getTime();
             this.image = this.j.c.element('img');
-            $$('img,.jodit-icon_loader', this.resize_box).forEach(Dom.safeRemove);
-            $$('img,.jodit-icon_loader', this.crop_box).forEach(Dom.safeRemove);
+            const isTrash = (elm) => Dom.isTag(elm, 'img') || hasClass('jodit-icon_loader')(elm);
+            findAll(this.resize_box, isTrash).forEach(Dom.safeRemove);
+            findAll(this.crop_box, isTrash).forEach(Dom.safeRemove);
             css(this.cropHandler, 'background', 'transparent');
             this.onSave = save;
-            this.resize_box.appendChild(this.j.c.element('i', { class: 'jodit-icon_loader' }));
-            this.crop_box.appendChild(this.j.c.element('i', { class: 'jodit-icon_loader' }));
+            Dom.append(this.resize_box, this.j.c.element('i', { class: 'jodit-icon_loader' }));
+            Dom.append(this.crop_box, this.j.c.element('i', { class: 'jodit-icon_loader' }));
             if (/\?/.test(url)) {
                 url += '&_tst=' + timestamp;
             }
             else {
                 url += '?_tst=' + timestamp;
             }
-            this.image.setAttribute('src', url);
+            attr(this.image, 'src', url);
             this._dialog.open();
             const { widthInput, heightInput } = refs(this.editor);
             const onload = () => {
@@ -103,10 +114,10 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends ViewComponent {
                 widthInput.value = this.naturalWidth.toString();
                 heightInput.value = this.naturalHeight.toString();
                 this.ratio = this.naturalWidth / this.naturalHeight;
-                this.resize_box.appendChild(this.image);
+                Dom.append(this.resize_box, this.image);
                 this.cropImage = this.image.cloneNode(true);
-                this.crop_box.appendChild(this.cropImage);
-                Dom.safeRemove.apply(null, $$('.jodit-icon_loader', this.editor));
+                Dom.append(this.crop_box, this.cropImage);
+                Dom.safeRemove.apply(null, findAll(this.editor, hasClass('jodit-icon_loader')));
                 if (this.activeTab === TABS.crop) {
                     this.showCrop();
                 }
@@ -128,10 +139,11 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends ViewComponent {
         if (!slide) {
             return;
         }
-        $$(`.${jie}__slider,.${jie}__area`, self.editor).forEach(elm => elm.classList.remove(`${jie}_active`));
+        findAll(self.editor, elm => hasClass(`${jie}__slider`)(elm) || hasClass(`${jie}__area`)(elm)).forEach(elm => elm.classList.remove(`${jie}_active`));
         slide.classList.add(`${jie}_active`);
         this.activeTab = attr(slide, '-area') || TABS.resize;
-        const tab = self.editor.querySelector(`.${jie}__area.${jie}__area_` + self.activeTab);
+        const tab = findFirst(self.editor, elm => hasClass(`${jie}__area`)(elm) &&
+            hasClass(`${jie}__area_` + self.activeTab)(elm));
         if (tab) {
             tab.classList.add(`${jie}_active`);
         }
@@ -356,7 +368,7 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends ViewComponent {
             const { widthInput, heightInput } = refs(this.editor);
             self.j.e
                 .on([
-                self.editor.querySelector('.jodit_bottomright'),
+                findFirst(self.editor, hasClass('jodit_bottomright')),
                 self.cropHandler
             ], `mousedown.${jie}`, this.onResizeHandleMouseDown)
                 .on(this.j.ow, `resize.${jie}`, () => {
@@ -365,7 +377,7 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends ViewComponent {
                 this.j.e.fire(self.cropHandler, 'updatesize');
             });
             self.j.e
-                .on(toArray(this.editor.querySelectorAll(`.${jie}__slider-title`)), 'click', this.onTitleModeClick)
+                .on(findAll(this.editor, hasClass(`${jie}__slider-title`)), 'click', this.onTitleModeClick)
                 .on([widthInput, heightInput], 'input', this.onChangeSizeInput);
             const { keepAspectRatioResize, keepAspectRatioCrop } = refs(this.editor);
             if (keepAspectRatioResize) {
@@ -495,9 +507,11 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends ViewComponent {
         const { resizeBox, cropBox } = refs(this.editor);
         this.resize_box = resizeBox;
         this.crop_box = cropBox;
-        this.sizes = this.editor.querySelector(`.${jie}__area.${jie}__area_crop .jodit-image-editor__sizes`);
-        this.resizeHandler = this.editor.querySelector(`.${jie}__resizer`);
-        this.cropHandler = this.editor.querySelector(`.${jie}__croper`);
+        this.sizes = findFirst(this.editor, elm => hasClass(`${jie}__sizes`)(elm) &&
+            Boolean(Dom.closest(elm, p => Dom.isHTMLElement(p) &&
+                hasClass(`${jie}__area_crop`)(p), this.editor)));
+        this.resizeHandler = findFirst(this.editor, hasClass(`${jie}__resizer`));
+        this.cropHandler = findFirst(this.editor, hasClass(`${jie}__croper`));
         this._dialog = this.j.dlg({
             buttons: ['fullsize', 'dialog.close']
         });

package/esm/modules/messages/messages.js

@@ -14,6 +14,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { component } from "../../core/decorators/component/component.js";
+import { Dom } from "../../core/dom/dom.js";
 import { css } from "../../core/helpers/utils/css.js";
 import { UIGroup } from "../../core/ui/group/group.js";
 import { UIMessage } from "./message.js";
@@ -82,7 +83,7 @@ let UIMessages = class UIMessages extends UIGroup {
         if (!this.__box) {
             throw new Error('Container is not defined: ' + key);
         }
-        this.__box.appendChild(this.container);
+        Dom.append(this.__box, this.container);
         const msg = new UIMessage(this.j, { text, variant });
         this.append(msg);
         this.__calcOffsets();