@mgdis/mg-components 6.27.0 → 6.28.0

package/dist/esm/mg-input-rich-text-editor.entry.js

@@ -1781,7 +1781,6 @@ var bn, xn = o((() => {
 		return e.replace(/[|\\{}()[\]^$+*?.]/g, "\\$&").replace(/-/g, "\\x2d");
 	};
 })), Cn = /* @__PURE__ */ s(((e) => {
-	Object.defineProperty(e, "__esModule", { value: true });
 	function t(e) {
 		return Object.prototype.toString.call(e) === "[object Object]";
 	}
@@ -2022,29 +2021,34 @@ var bn, xn = o((() => {
 		let n = "@" + t.name, r = t.params ? e.rawValue(t, "params") : "", a = t.raws.afterName;
 		return a === void 0 ? a = r ? " " : "" : a === "" && r && !i.test(r[0]) && (a = " "), n + a + r;
 	}
-	function l(e, t, n) {
+	function l(e) {
+		if (!e.prop.startsWith("--")) return false;
+		let t = e.raws.before;
+		return t === void 0 || !/\S$/.test(t);
+	}
+	function u(e, t, n) {
 		let r = n.nodes, i = r.length - 1;
 		for (; i > 0 && r[i].type === "comment";) --i;
 		let a = e.raw(n, "semicolon"), o = n.type === "document";
 		for (let e = r.length - 1; e >= 0; e--) {
 			let n = r[e], s = i !== e || a;
-			!s && e < r.length - 1 && (n.type === "atrule" && !n.nodes || n.type === "decl" && n.prop.startsWith("--")) && (s = true), t.push({
+			!s && e < r.length - 1 && (n.type === "atrule" && !n.nodes || n.type === "decl" && l(n)) && (s = true), t.push({
 				document: o,
 				node: n,
 				semicolon: s
 			});
 		}
 	}
-	function u(e, t, n, r) {
+	function d(e, t, n, r) {
 		let i = e.raw(n, "between", "beforeOpen");
 		e.builder(a(r + i) + "{", n, "start");
 		let o = n.nodes && n.nodes.length, s = () => {
 			let t = o ? e.raw(n, "after") : e.raw(n, "after", "emptyBody");
 			t && e.builder(a(t)), e.builder("}", n, "end"), n.type === "rule" && n.raws.ownSemicolon && e.builder(a(n.raws.ownSemicolon), n, "end");
 		};
-		o ? (t.push(s), l(e, t, n)) : s();
+		o ? (t.push(s), u(e, t, n)) : s();
 	}
-	var d = class e {
+	var f = class e {
 		constructor(e) {
 			this.builder = e;
 		}
@@ -2081,14 +2085,14 @@ var bn, xn = o((() => {
 				"rule",
 				"stringify"
 			].every((e) => this[e] === n[e]), i = [];
-			for (l(this, i, t); i.length > 0;) {
+			for (u(this, i, t); i.length > 0;) {
 				let e = i.pop();
 				if (typeof e == "function") {
 					e();
 					continue;
 				}
 				let t = e.node, n = this.raw(t, "before");
-				n && this.builder(e.document ? n : a(n)), r && t.type === "rule" ? u(this, i, t, this.rawValue(t, "selector")) : r && t.type === "atrule" && t.nodes ? u(this, i, t, c(this, t)) : this.stringify(t, e.semicolon);
+				n && this.builder(e.document ? n : a(n)), r && t.type === "rule" ? d(this, i, t, this.rawValue(t, "selector")) : r && t.type === "atrule" && t.nodes ? d(this, i, t, c(this, t)) : this.stringify(t, e.semicolon);
 			}
 		}
 		comment(e) {
@@ -2198,7 +2202,7 @@ var bn, xn = o((() => {
 			this[e.type](e, t);
 		}
 	};
-	t.exports = d, d.default = d;
+	t.exports = f, f.default = f;
 })), kn = /* @__PURE__ */ s(((e, t) => {
 	var n = On();
 	function r(e, t) {
@@ -2640,7 +2644,7 @@ var bn, xn = o((() => {
 		}
 		replaceValues(e, t, n) {
 			return n || (n = t, t = {}), this.walkDecls((r) => {
-				t.props && !t.props.includes(r.prop) || t.fast && !r.value.includes(t.fast) || (r.value = r.value.replace(e, n));
+				(!t.props || t.props.includes(r.prop)) && (!t.fast || r.value.includes(t.fast)) && (r.value = r.value.replace(e, n));
 			}), this.markDirty(), this;
 		}
 		some(e) {
@@ -3034,8 +3038,12 @@ var bn, xn = o((() => {
 		split(e, t, n) {
 			if (typeof e != "string") return [];
 			let r = [], i = "", a = false, o = 0, s = false, c = "", l = false;
-			for (let n of e) l ? l = false : n === "\\" ? l = true : s ? n === c && (s = false) : n === "\"" || n === "'" ? (s = true, c = n) : n === "(" ? o += 1 : n === ")" ? o > 0 && --o : o === 0 && t.includes(n) && (a = true), a ? (i !== "" && r.push(i.trim()), i = "", a = false) : i += n;
-			return (n || i !== "") && r.push(i.trim()), r;
+			for (let u of e) if (l ? l = false : u === "\\" ? l = true : s ? u === c && (s = false) : u === "\"" || u === "'" ? (s = true, c = u) : u === "(" ? o += 1 : u === ")" ? o > 0 && --o : o === 0 && t.includes(u) && (a = true), a) {
+				let e = i.trim();
+				(n || e !== "") && r.push(e), i = "", a = false;
+			} else i += u;
+			let u = i.trim();
+			return (n || u !== "") && r.push(u), r;
 		}
 	};
 	t.exports = n, n.default = n;
@@ -3138,8 +3146,8 @@ var bn, xn = o((() => {
 					for (let t = this.root.nodes.length - 1; t >= 0; t--) e = this.root.nodes[t], e.type === "comment" && e.text.startsWith("# sourceMappingURL=") && this.root.removeChild(t);
 				} else if (this.css) {
 					let e;
-					for (; (e = this.css.lastIndexOf("/*#")) !== -1;) {
-						let t = this.css.indexOf("*/", e + 3);
+					for (; (e = this.css.lastIndexOf("/*# sourceMappingURL=")) !== -1;) {
+						let t = this.css.indexOf("*/", e + 21);
 						if (t === -1) break;
 						for (; e > 0 && this.css[e - 1] === "\n";) e--;
 						this.css = this.css.slice(0, e) + this.css.slice(t + 2);
@@ -3576,7 +3584,7 @@ var bn, xn = o((() => {
 		freeSemicolon(e) {
 			if (this.spaces += e[1], this.current.nodes) {
 				let t = this.current.nodes[this.current.nodes.length - 1];
-				t && t.type === "rule" && !t.raws.ownSemicolon && (t.raws.ownSemicolon = this.spaces, this.spaces = "", t.source.end = this.getPosition(e[2]), t.source.end.offset += t.raws.ownSemicolon.length);
+				t && t.type === "rule" && !t.raws.ownSemicolon && (t.raws.ownSemicolon = this.spaces, this.spaces = "", t.source.end = this.getPosition(e[2]), t.source.end.offset++);
 			}
 		}
 		getPosition(e) {
@@ -4195,7 +4203,7 @@ var bn, xn = o((() => {
 })), Qn = /* @__PURE__ */ s(((e, t) => {
 	var n = Fn(), r = Xn(), i = Zn(), a = zn(), o = class {
 		constructor(e = []) {
-			this.version = "8.5.26", this.plugins = this.normalize(e);
+			this.version = "8.5.28", this.plugins = this.normalize(e);
 		}
 		normalize(e) {
 			let t = [];
@@ -4221,7 +4229,7 @@ var bn, xn = o((() => {
 	b.plugin = function(e, t) {
 		let n = false;
 		function r(...r) {
-			console && console.warn && !n && (n = true, console.warn(e + ": postcss.plugin was deprecated. Migration guide:\nhttps://evilmartians.com/chronicles/postcss-8-plugin-migration"), process.env.LANG && process.env.LANG.startsWith("cn") && 
+			console && console.warn && !n && (n = true, console.warn(e + ": postcss.plugin was deprecated. Migration guide:\nhttps://evilmartians.com/chronicles/postcss-8-plugin-migration"), process.env.LANG && process.env.LANG.startsWith("zh") && 
 			/* c8 ignore next 7 */
 			console.warn(e + ": 里面 postcss.plugin 被弃用. 迁移指南:\nhttps://www.w3ctech.com/topic/2226"));
 			let i = t(...r);
@@ -5132,7 +5140,7 @@ var bn, xn = o((() => {
  * 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
  */
-const APP_VERSION = "4.13.22";
+const APP_VERSION = "4.14.2";
 // prettier-ignore
 const ES = "es2020";
 const IS_ES_MODERN = true;
@@ -5640,6 +5648,9 @@ const map$1 = {};
 function reset(key) {
     var _a, _b;
     if (!(key in map$1)) {
+        // Raw DOM API on purpose: this bootstrap helper is imported by
+        // `to-array`, which the `Dom` module itself depends on — importing
+        // `Dom` here would create a circular dependency
         const iframe = globalDocument.createElement('iframe');
         try {
             iframe.src = 'about:blank';
@@ -6012,6 +6023,21 @@ function css(element, key, value, onlyStyleMode = false) {
 /**
  * Clear center align
  */
+/**
+ * Read the exact inline value of a CSS property (the `style` attribute).
+ * Unlike `css()` it never touches computed styles (no layout access) and does
+ * not normalize the result, so it is safe for exact string comparisons and
+ * save/restore. Returns an empty string when the property is not set inline.
+ *
+ * @example
+ * ```js
+ * cssInline(elm, 'zIndex'); // '' or '100'
+ * cssInline(elm, 'width'); // '0px' (css(elm, 'width', true) would return 0)
+ * ```
+ */
+function cssInline(element, key) {
+    return element.style.getPropertyValue(kebabCase(key));
+}
 const clearCenterAlign = (image) => {
     if (css(image, 'display') === 'block') {
         css(image, 'display', '');
@@ -6076,6 +6102,24 @@ function attr(elm, keyOrAttributes, value) {
     }
     return elm.getAttribute(key);
 }
+/**
+ * Exact-name attribute access: no camelCase → kebab-case conversion, no
+ * `data-` fallback and no `px` stripping. Use it where the attribute name must
+ * be taken verbatim — sanitizers and attribute comparison (`onLoad`, `viewBox`,
+ * `xlink:href`). `null` removes the attribute.
+ */
+function attrRaw(elm, name, value) {
+    if (value === undefined) {
+        return elm.getAttribute(name);
+    }
+    if (value == null) {
+        if (elm.hasAttribute(name)) {
+            elm.removeAttribute(name);
+        }
+        return;
+    }
+    elm.setAttribute(name, value);
+}
 
 /*!
  * Jodit Editor (https://xdsoft.net/jodit/)
@@ -6643,56 +6687,39 @@ class Dom {
      * Get first matched node inside root
      */
     static first(root, condition) {
-        let first = root === null || root === void 0 ? void 0 : root.firstChild;
-        if (!first) {
-            return null;
-        }
-        do {
-            if (condition(first)) {
-                return first;
-            }
-            let next = first.firstChild;
-            if (!next) {
-                next = first.nextSibling;
-            }
-            if (!next && first.parentNode !== root) {
-                do {
-                    first = first.parentNode;
-                } while (first &&
-                    !(first === null || first === void 0 ? void 0 : first.nextSibling) &&
-                    first.parentNode !== root);
-                next = first === null || first === void 0 ? void 0 : first.nextSibling;
-            }
-            first = next;
-        } while (first);
-        return null;
+        return Dom.__deepMost(root, condition, false);
     }
     /**
      * Get last matched node inside root
      */
     static last(root, condition) {
-        let last = root === null || root === void 0 ? void 0 : root.lastChild;
-        if (!last) {
+        return Dom.__deepMost(root, condition, true);
+    }
+    /**
+     * Depth-first search for the first matched node inside root:
+     * in document order (`reverse = false`) or in reverse order
+     */
+    static __deepMost(root, condition, reverse) {
+        const child = reverse ? 'lastChild' : 'firstChild', sibling = reverse ? 'previousSibling' : 'nextSibling';
+        let current = root === null || root === void 0 ? void 0 : root[child];
+        if (!current) {
             return null;
         }
         do {
-            if (condition(last)) {
-                return last;
-            }
-            let next = last.lastChild;
-            if (!next) {
-                next = last.previousSibling;
+            if (condition(current)) {
+                return current;
             }
-            if (!next && last.parentNode !== root) {
+            let next = current[child] || current[sibling];
+            if (!next && current.parentNode !== root) {
                 do {
-                    last = last.parentNode;
-                } while (last &&
-                    !(last === null || last === void 0 ? void 0 : last.previousSibling) &&
-                    last.parentNode !== root);
-                next = last === null || last === void 0 ? void 0 : last.previousSibling;
-            }
-            last = next;
-        } while (last);
+                    current = current.parentNode;
+                } while (current &&
+                    !current[sibling] &&
+                    current.parentNode !== root);
+                next = current === null || current === void 0 ? void 0 : current[sibling];
+            }
+            current = next;
+        } while (current);
         return null;
     }
     /**
@@ -6708,12 +6735,17 @@ class Dom {
         return Dom.find(node, condition, root, true, withChild);
     }
     static prevWithClass(node, className) {
-        return Dom.prev(node, node => {
-            return (Dom.isElement(node) && node.classList.contains(className));
-        }, node.parentNode);
+        return Dom.__siblingWithClass(node, className, true);
     }
     static nextWithClass(node, className) {
-        return Dom.next(node, elm => Dom.isElement(elm) && elm.classList.contains(className), node.parentNode);
+        return Dom.__siblingWithClass(node, className, false);
+    }
+    static __siblingWithClass(node, className, left) {
+        const condition = (elm) => Dom.isElement(elm) && elm.classList.contains(className);
+        const parent = node.parentNode;
+        return (left
+            ? Dom.prev(node, condition, parent)
+            : Dom.next(node, condition, parent));
     }
     /**
      * Find next/prev node what `condition(next) === true`
@@ -6848,9 +6880,6 @@ class Dom {
             (!(Dom.isText(n) || Dom.isComment(n)) ||
                 trim((n === null || n === void 0 ? void 0 : n.nodeValue) || '').length)), root);
     }
-    /**
-     * Returns the previous (`left = true`) or next sibling of the node
-     */
     static sibling(node, left) {
         return left ? node.previousSibling : node.nextSibling;
     }
@@ -6914,40 +6943,24 @@ class Dom {
      * Append new element in the start of root
      */
     static appendChildFirst(root, newElement) {
-        const child = root.firstChild;
-        if (child) {
-            if (child !== newElement) {
-                root.insertBefore(newElement, child);
-            }
-        }
-        else {
-            root.appendChild(newElement);
+        if (root.firstChild !== newElement) {
+            Dom.prepend(root, newElement);
         }
     }
     /**
      * Insert newElement after element
      */
     static after(elm, newElement) {
-        const { parentNode } = elm;
-        if (!parentNode) {
-            return;
-        }
-        if (parentNode.lastChild === elm) {
-            parentNode.appendChild(newElement);
-        }
-        else {
-            parentNode.insertBefore(newElement, elm.nextSibling);
-        }
+        var _a;
+        // `insertBefore` with a `null` reference appends to the end
+        (_a = elm.parentNode) === null || _a === void 0 ? void 0 : _a.insertBefore(newElement, elm.nextSibling);
     }
     /**
      * Insert newElement before element
      */
     static before(elm, newElement) {
-        const { parentNode } = elm;
-        if (!parentNode) {
-            return;
-        }
-        parentNode.insertBefore(newElement, elm);
+        var _a;
+        (_a = elm.parentNode) === null || _a === void 0 ? void 0 : _a.insertBefore(newElement, elm);
     }
     /**
      * Insert newElement as first child inside element
@@ -6965,10 +6978,10 @@ class Dom {
             root.appendChild(newElement);
         }
     }
-    /**
-     * Move all content to another element
-     */
-    static moveContent(from, to, inStart = false, filter = () => true) {
+    static moveContent(from, to, inStart = false, 
+    // `any` reconciles the browser `Node` overload with the `VNode` one:
+    // a callback typed for one is not assignable to the other
+    filter = () => true) {
         const fragment = (from.ownerDocument || globalDocument).createDocumentFragment();
         toArray(from.childNodes)
             .filter(elm => {
@@ -6978,15 +6991,11 @@ class Dom {
             Dom.safeRemove(elm);
             return false;
         })
-            .forEach((node) => {
+            .forEach(node => {
             fragment.appendChild(node);
         });
-        if (!inStart || !to.firstChild) {
-            to.appendChild(fragment);
-        }
-        else {
-            to.insertBefore(fragment, to.firstChild);
-        }
+        // `appendChild`/`insertBefore` with a `null` reference append to the end
+        to.insertBefore(fragment, inStart ? to.firstChild : null);
     }
     /**
      * Check root contains child or equal child
@@ -7036,8 +7045,8 @@ class Dom {
         if (!node) {
             return;
         }
-        dataBind(node, '__old_display', node.style.display);
-        node.style.display = 'none';
+        dataBind(node, '__old_display', node.style.getPropertyValue('display'));
+        node.style.setProperty('display', 'none');
     }
     /**
      * Show element
@@ -7047,8 +7056,8 @@ class Dom {
             return;
         }
         const display = dataBind(node, '__old_display');
-        if (node.style.display === 'none') {
-            node.style.display = display || '';
+        if (node.style.getPropertyValue('display') === 'none') {
+            node.style.setProperty('display', display || null);
         }
     }
     static isTag(node, tagNames) {
@@ -7097,11 +7106,17 @@ class Dom {
         return value.replace(TEMP_ELEMENT_REG_EXP, '$2');
     }
     /**
-     * Get temporary list
-     * @deprecated Just do not use it, it is not needed anymore
+     * Collect the temporary elements (`data-jodit-temp`) inside the root.
+     * A plain tree walk on purpose: no selector engine, works on VNode.
      */
     static temporaryList(root) {
-        return toArray(root.querySelectorAll(`[${TEMP_ATTR}]`));
+        const result = [];
+        Dom.each(root, node => {
+            if (Dom.isHTMLElement(node) && node.hasAttribute(TEMP_ATTR)) {
+                result.push(node);
+            }
+        });
+        return result;
     }
 }
 
@@ -7493,21 +7508,39 @@ function cache(_, name, descriptor) {
         return value;
     };
 }
+function getOwnerDocument(component) {
+    const od = component.od;
+    return od !== null && od !== void 0 ? od : document;
+}
 function cacheHTML(target, _, descriptor) {
     const fn = descriptor.value;
     if (!isFunction(fn)) {
         throw error('Handler must be a Function');
     }
     let useCache = true;
+    /**
+     * The cache is keyed by the owner document first and only then by the
+     * component class. A page can create editors inside different documents
+     * (iframes) and destroy those documents later: a template cached from a
+     * dead document would otherwise be cloned for every subsequent editor,
+     * whose buttons then never react to clicks.
+     */
     const cached = new WeakMap();
     descriptor.value = function (...attrs) {
         var _a;
-        if (useCache && cached.has(this.constructor)) {
-            return (_a = cached.get(this.constructor)) === null || _a === void 0 ? void 0 : _a.cloneNode(true);
+        const doc = getOwnerDocument(this);
+        const docCache = cached.get(doc);
+        if (useCache && (docCache === null || docCache === void 0 ? void 0 : docCache.has(this.constructor))) {
+            return (_a = docCache.get(this.constructor)) === null || _a === void 0 ? void 0 : _a.cloneNode(true);
         }
         const value = fn.apply(this, attrs);
         if (useCache && Dom.isElement(value)) {
-            cached.set(this.constructor, value);
+            if (docCache) {
+                docCache.set(this.constructor, value);
+            }
+            else {
+                cached.set(doc, new WeakMap([[this.constructor, value]]));
+            }
         }
         return useCache ? value.cloneNode(true) : value;
     };
@@ -8543,10 +8576,10 @@ const appendScriptAsync = cacheLoaders((jodit, url) => {
             src: completeUrl(url)
         });
         if (jodit.o.nonce) {
-            script.setAttribute('nonce', jodit.o.nonce);
+            attr(script, 'nonce', jodit.o.nonce);
         }
         jodit.e.one(script, 'error', reject).one(script, 'load', resolve);
-        jodit.od.body.appendChild(script);
+        Dom.append(jodit.od.body, script);
     });
 });
 /**
@@ -8557,22 +8590,23 @@ const appendStyleAsync = cacheLoaders((jodit, url) => {
         if (jodit.isInDestruct) {
             return reject();
         }
-        const link = jodit.c.element('link');
-        link.rel = 'stylesheet';
-        link.media = 'all';
-        link.crossOrigin = 'anonymous';
+        const link = jodit.c.element('link', {
+            rel: 'stylesheet',
+            media: 'all',
+            crossorigin: 'anonymous'
+        });
         if (jodit.o.nonce) {
-            link.setAttribute('nonce', jodit.o.nonce);
+            attr(link, 'nonce', jodit.o.nonce);
         }
         const callback = () => resolve(link);
         !jodit.isInDestruct &&
             jodit.e.on(link, 'load', callback).on(link, 'error', reject);
-        link.href = completeUrl(url);
+        attr(link, 'href', completeUrl(url));
         if (jodit.o.shadowRoot) {
-            jodit.o.shadowRoot.appendChild(link);
+            Dom.append(jodit.o.shadowRoot, link);
         }
         else {
-            jodit.od.body.appendChild(link);
+            Dom.append(jodit.od.body, link);
         }
     });
 });
@@ -9106,10 +9140,10 @@ function getContainer(jodit, classFunc, tag = 'div', createInsideEditor = false)
         });
         // Let a strict CSP accept the injected <style>/<script> box
         if (view.o.nonce && (tag === 'style' || tag === 'script')) {
-            box.setAttribute('nonce', view.o.nonce);
+            attr(box, 'nonce', view.o.nonce);
         }
         box.classList.add(`jodit_theme_${view.o.theme || 'default'}`);
-        body.appendChild(box);
+        Dom.append(body, box);
         data[key] = box;
         jodit.hookStatus('beforeDestruct', () => {
             view.events.off(box);
@@ -9203,14 +9237,18 @@ const refs = (root) => {
     if ('container' in root) {
         root = root.container;
     }
-    return $$('[ref],[data-ref]', root).reduce((def, child) => {
-        const key = attr(child, '-ref');
-        if (key && isString(key)) {
-            def[camelCase(key)] = child;
-            def[key] = child;
+    const def = {};
+    Dom.each(root, child => {
+        if (Dom.isElement(child) &&
+            (child.hasAttribute('ref') || child.hasAttribute('data-ref'))) {
+            const key = attr(child, '-ref');
+            if (key && isString(key)) {
+                def[camelCase(key)] = child;
+                def[key] = child;
+            }
         }
-        return def;
-    }, {});
+    });
+    return def;
 };
 /**
  * Calculate full CSS selector
@@ -9312,8 +9350,8 @@ function applyStyles(html) {
         html = html.substring(0, closeIndex + '</html>'.length);
     }
     const iframe = globalDocument.createElement('iframe');
-    iframe.style.display = 'none';
-    globalDocument.body.appendChild(iframe);
+    css(iframe, 'display', 'none');
+    Dom.append(globalDocument.body, iframe);
     let convertedString = '', collection = [];
     try {
         const iframeDoc = iframe.contentDocument ||
@@ -9329,7 +9367,7 @@ function applyStyles(html) {
             // style normalization strips the `mso-list` hint. See #948
             Dom.each(iframeDoc.body, (node) => {
                 if (Dom.isElement(node) &&
-                    /mso-list:\s*ignore/i.test(node.getAttribute('style') || '')) {
+                    /mso-list:\s*ignore/i.test(attr(node, 'style') || '')) {
                     Dom.safeRemove(node);
                 }
             });
@@ -9341,6 +9379,9 @@ function applyStyles(html) {
                             continue;
                         }
                         collection = $$(rules[idx].selectorText, iframeDoc.body);
+                        // `style.cssText` on purpose: the CSSOM parses the text,
+                        // drops invalid declarations and re-serializes it. The raw
+                        // `style` attribute would keep Word-only junk verbatim
                         collection.forEach((elm) => {
                             elm.style.cssText = normalizeCSS(rules[idx].style.cssText +
                                 ';' +
@@ -9353,14 +9394,13 @@ function applyStyles(html) {
             }
             Dom.each(iframeDoc.body, node => {
                 if (Dom.isElement(node)) {
-                    const elm = node;
-                    const css = elm.getAttribute('style');
-                    if (css) {
-                        elm.style.cssText = normalizeCSS(css);
+                    const cssText = attr(node, 'style');
+                    if (cssText) {
+                        node.style.cssText =
+                            normalizeCSS(cssText);
                     }
-                    if (elm.hasAttribute('style') &&
-                        !elm.getAttribute('style')) {
-                        elm.removeAttribute('style');
+                    if (!attr(node, 'style')) {
+                        attr(node, 'style', null);
                     }
                 }
             });
@@ -9428,18 +9468,21 @@ function cleanFromWord(html) {
                                 // with `mso-list:Ignore`. They are display-only
                                 // and must not be imported, otherwise the marker
                                 // text leaks into the content. See #948
-                                if (/mso-list:\s*ignore/i.test(node.getAttribute('style') || '')) {
+                                if (/mso-list:\s*ignore/i.test(attr(node, 'style') || '')) {
                                     marks.push(node);
                                     break;
                                 }
-                                toArray(node.attributes).forEach((attr) => {
+                                toArray(node.attributes).forEach((attribute) => {
                                     if ([
                                         'src',
                                         'href',
                                         'rel',
                                         'content'
-                                    ].indexOf(attr.name.toLowerCase()) === -1) {
-                                        node.removeAttribute(attr.name);
+                                    ].indexOf(attribute.name.toLowerCase()) === -1) {
+                                        // `attrRaw`: SVG keeps camelCase names
+                                        // (`viewBox`), `attr()` would kebab-case
+                                        // them and silently skip the removal
+                                        attrRaw(node, attribute.name, null);
                                     }
                                 });
                         }
@@ -9533,10 +9576,10 @@ function hAlignElement(image, align) {
 function clearAlign(node) {
     Dom.each(node, elm => {
         if (Dom.isHTMLElement(elm)) {
-            if (elm.style.textAlign) {
-                elm.style.textAlign = '';
-                if (!elm.style.cssText.trim().length) {
-                    elm.removeAttribute('style');
+            if (cssInline(elm, 'textAlign')) {
+                css(elm, 'textAlign', '');
+                if (!(attr(elm, 'style') || '').trim().length) {
+                    attr(elm, 'style', null);
                 }
             }
         }
@@ -9545,22 +9588,18 @@ function clearAlign(node) {
 /**
  * Apply align for element
  */
+const ALIGN_BY_COMMAND = new Map([
+    ['justifyfull', 'justify'],
+    ['justifyright', 'right'],
+    ['justifyleft', 'left'],
+    ['justifycenter', 'center']
+]);
 function alignElement(command, box) {
     if (Dom.isNode(box) && Dom.isElement(box)) {
         clearAlign(box);
-        switch (command.toLowerCase()) {
-            case 'justifyfull':
-                box.style.textAlign = 'justify';
-                break;
-            case 'justifyright':
-                box.style.textAlign = 'right';
-                break;
-            case 'justifyleft':
-                box.style.textAlign = 'left';
-                break;
-            case 'justifycenter':
-                box.style.textAlign = 'center';
-                break;
+        const align = ALIGN_BY_COMMAND.get(command.toLowerCase());
+        if (align) {
+            css(box, 'textAlign', align);
         }
     }
 }
@@ -11095,26 +11134,30 @@ function markDeprecated(method, names = [''], ctx = null) {
  */
 function fixedAssetsSizeAndAbsoluteLinks(editor, points) {
     const restoreAttributes = [];
+    const images = [];
+    Dom.each(editor.editor, node => {
+        Dom.isTag(node, 'img') && images.push(node);
+    });
     try {
-        $$('img', editor.editor).forEach(item => {
+        images.forEach(item => {
             const previousAttrs = [
                 attr(item, 'width'),
                 attr(item, 'height'),
-                item.src
+                attr(item, 'src')
             ];
             attr(item, {
                 width: item.offsetWidth + points,
                 height: item.offsetHeight + points
             });
             const a = editor.createInside.a();
-            editor.ed.body.appendChild(a);
-            a.href = item.src;
-            item.src = a.href;
+            Dom.append(editor.ed.body, a);
+            attr(a, 'href', attr(item, 'src') || '');
+            // reading the `href` property resolves the URL to an absolute one
+            attr(item, 'src', a.href);
             Dom.safeRemove(a);
             restoreAttributes.push(() => {
-                var _a;
-                item.src = (_a = previousAttrs[2]) !== null && _a !== void 0 ? _a : '';
                 attr(item, {
+                    src: previousAttrs[2],
                     width: previousAttrs[0] || null,
                     height: previousAttrs[1] || null
                 });
@@ -11144,7 +11187,7 @@ function previewBox(editor, defaultValue, points = 'px', container = null) {
         }
         let div = editor.c.div('jodit__preview-box jodit-context');
         if (container) {
-            container.appendChild(div);
+            Dom.append(container, div);
         }
         css(div, {
             position: 'relative',
@@ -11159,7 +11202,7 @@ function previewBox(editor, defaultValue, points = 'px', container = null) {
                 minHeight: 600,
                 border: 0
             });
-            div.appendChild(iframe);
+            Dom.append(div, iframe);
             const myWindow = iframe.contentWindow;
             if (myWindow) {
                 editor.e.fire('generateDocumentStructure.iframe', myWindow.document, editor);
@@ -11169,7 +11212,7 @@ function previewBox(editor, defaultValue, points = 'px', container = null) {
                     const elm = myWindow.document.body;
                     const resizeObserver = new ResizeObserver(editor.async.debounce(() => {
                         resizeObserver.unobserve(elm);
-                        iframe.style.height = `${elm.offsetHeight + 20}px`;
+                        css(iframe, 'height', elm.offsetHeight + 20);
                         editor.async.requestAnimationFrame(() => {
                             !destructed && resizeObserver.observe(elm);
                         });
@@ -11202,7 +11245,7 @@ function previewBox(editor, defaultValue, points = 'px', container = null) {
                 if (Dom.isElement(c)) {
                     const newNode = box.ownerDocument.createElement(c.nodeName);
                     for (let j = 0; j < c.attributes.length; j += 1) {
-                        attr(newNode, c.attributes[j].nodeName, c.attributes[j].nodeValue);
+                        attr(newNode, c.attributes[j].name, c.attributes[j].value);
                     }
                     if (c.childNodes.length === 0 || Dom.isTag(c, 'table')) {
                         switch (c.nodeName) {
@@ -11222,13 +11265,13 @@ function previewBox(editor, defaultValue, points = 'px', container = null) {
                         setHTML(newNode, c);
                     }
                     try {
-                        box.appendChild(newNode);
+                        Dom.append(box, newNode);
                     }
                     catch (_a) { }
                 }
                 else {
                     try {
-                        box.appendChild(c.cloneNode(true));
+                        Dom.append(box, c.cloneNode(true));
                     }
                     catch (_b) { }
                 }
@@ -11388,9 +11431,6 @@ class LimitedStack {
  * 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 helpers/html
- */
 const HTML_NAMESPACE = 'http://www.w3.org/1999/xhtml';
 /**
  * Integration points where HTML is legitimately allowed inside MathML/SVG foreign content.
@@ -11406,9 +11446,10 @@ const HTML_INTEGRATION_POINTS = new Set([
  * HTML (e.g. `mglyph` / `style` under `<math>`) that a reparse can hoist into a live node. Legitimate
  * MathML/SVG children and HTML below an integration point are kept.
  */
+const isMathOrSvg = (node) => Boolean(node && /^(math|svg)$/i.test(node.nodeName));
 function isSmuggledForeignHtml(elm) {
     if (elm.namespaceURI !== HTML_NAMESPACE ||
-        elm.closest('math,svg') == null) {
+        Dom.up(elm, isMathOrSvg) == null) {
         return false;
     }
     for (let parent = elm.parentElement; parent; parent = parent.parentElement) {
@@ -11431,11 +11472,17 @@ function safeHTML(box, options) {
         return;
     }
     // Drop HTML smuggled into MathML/SVG before the walk: a reparse would otherwise hoist its hidden
-    // markup into a live node.
-    const foreign = box.querySelectorAll('math *, svg *');
-    for (let i = 0; i < foreign.length; i++) {
-        if (box.contains(foreign[i]) && isSmuggledForeignHtml(foreign[i])) {
-            Dom.safeRemove(foreign[i]);
+    // markup into a live node. Collect the candidates first (like the static
+    // `querySelectorAll` snapshot did) so removals don't affect the traversal.
+    const foreign = [];
+    Dom.each(box, node => {
+        if (Dom.isElement(node) && Dom.up(node.parentNode, isMathOrSvg)) {
+            foreign.push(node);
+        }
+    });
+    for (const elm of foreign) {
+        if (Dom.isOrContains(box, elm) && isSmuggledForeignHtml(elm)) {
+            Dom.safeRemove(elm);
         }
     }
     const removeEvents = (_a = options.removeEventAttributes) !== null && _a !== void 0 ? _a : options.removeOnError;
@@ -11453,8 +11500,8 @@ function safeHTML(box, options) {
         sanitizeHTMLElement(node, options);
         if (options.safeLinksTarget &&
             node.nodeName === 'A' &&
-            node.getAttribute('target') === '_blank') {
-            const rel = node.getAttribute('rel') || '';
+            attr(node, 'target') === '_blank') {
+            const rel = attr(node, 'rel') || '';
             const parts = rel.split(/\s+/).filter(Boolean);
             if (!parts.includes('noopener')) {
                 parts.push('noopener');
@@ -11483,7 +11530,9 @@ function removeAllEventAttributes(elm) {
         }
     }
     for (const name of toRemove) {
-        elm.removeAttribute(name);
+        // `attrRaw` on purpose: `attr()` kebab-cases the key
+        // (`onLoad` → `on-load`), which must not happen in a sanitizer
+        attrRaw(elm, name, null);
         effected = true;
     }
     return effected;
@@ -11534,7 +11583,7 @@ function sanitizeHTMLElement(elm, { safeJavaScriptLink, removeOnError } = {
         effected = true;
     }
     const tagName = elm.nodeName.toLowerCase();
-    const href = elm.getAttribute('href');
+    const href = attr(elm, 'href');
     // Neutralize executable-scheme `href`s with the same normalization used for
     // every other URL attribute (`isDangerousUrl`), which strips control bytes,
     // tabs and newlines and lowercases before matching the scheme. The previous
@@ -11554,8 +11603,10 @@ function sanitizeHTMLElement(elm, { safeJavaScriptLink, removeOnError } = {
             effected = true;
         }
         // Strip executable schemes from any other URL-bearing attribute.
+        // `attrRaw`: the list contains `xlink:href` and the sanitizer must
+        // read exactly the attribute it will remove.
         for (const name of URL_ATTRIBUTES) {
-            const value = elm.getAttribute(name);
+            const value = attrRaw(elm, name);
             if (value && isDangerousUrl(value, tagName)) {
                 attr(elm, name, null);
                 effected = true;
@@ -11593,9 +11644,15 @@ function stripTags(html, doc = document, exclude = null, blockBr = false) {
         tmp.innerHTML = html;
     }
     else {
-        tmp.appendChild(html);
+        Dom.append(tmp, html);
     }
-    $$('*', tmp).forEach(p => {
+    // Snapshot of all elements (like `querySelectorAll('*')` did) — the loop
+    // below removes and unwraps nodes while iterating
+    const all = [];
+    Dom.each(tmp, node => {
+        Dom.isElement(node) && all.push(node);
+    });
+    all.forEach(p => {
         const pr = p.parentNode;
         if (!pr) {
             return;
@@ -11625,7 +11682,7 @@ function stripTags(html, doc = document, exclude = null, blockBr = false) {
             // plain text). When `blockBr` is set, separate them with a line
             // break instead, so paragraph structure survives — e.g. the
             // "Insert only Text" paste option. See #1232
-            pr.insertBefore(doc.createTextNode(blockBr ? '%%%jodit-single-br%%%' : ' '), nx);
+            Dom.before(nx, doc.createTextNode(blockBr ? '%%%jodit-single-br%%%' : ' '));
         }
     });
     return restoreTags(trim(tmp.innerText));
@@ -12201,6 +12258,7 @@ var index = /*#__PURE__*/Object.freeze({
 	asArray: asArray,
 	assert: assert,
 	attr: attr,
+	attrRaw: attrRaw,
 	browser: browser,
 	buildQuery: buildQuery,
 	call: call,
@@ -12217,6 +12275,7 @@ var index = /*#__PURE__*/Object.freeze({
 	connection: connection,
 	convertMediaUrlToVideoEmbed: convertMediaUrlToVideoEmbed,
 	css: css,
+	cssInline: cssInline,
 	cssPath: cssPath,
 	ctrlKey: ctrlKey,
 	dataBind: dataBind,
@@ -13329,13 +13388,21 @@ class Elms {
      * Return element with BEM class name
      */
     getElm(elementName) {
-        return this.container.querySelector(`.${this.getFullElName(elementName)}`);
+        const className = this.getFullElName(elementName);
+        return Dom.first(this.container, node => Dom.isHTMLElement(node) && node.classList.contains(className));
     }
     /**
      * Return elements with BEM class name
      */
     getElms(elementName) {
-        return toArray(this.container.querySelectorAll(`.${this.getFullElName(elementName)}`));
+        const className = this.getFullElName(elementName);
+        const result = [];
+        Dom.each(this.container, node => {
+            if (Dom.isHTMLElement(node) && node.classList.contains(className)) {
+                result.push(node);
+            }
+        });
+        return result;
     }
 }
 
@@ -13452,9 +13519,9 @@ class Icon {
         }
         if (iconElement) {
             iconElement.classList.add('jodit-icon');
-            iconElement.style.fill = fill;
+            css(iconElement, 'fill', fill);
             if (scale != null) {
-                iconElement.style.transform = `scale(${scale})`;
+                css(iconElement, 'transform', `scale(${scale})`);
             }
             jodit.o.cache &&
                 this.__cache.set(cacheKey, iconElement.cloneNode(true));
@@ -13572,7 +13639,7 @@ let UIElement = UIElement_1 = class UIElement extends ViewComponent {
      * Append container to element
      */
     appendTo(element) {
-        element.appendChild(this.container);
+        Dom.append(element, this.container);
         return this;
     }
     /**
@@ -13763,7 +13830,7 @@ let UIButton = class UIButton extends UIElement {
         }
         Dom.detach(this.icon);
         const iconElement = Icon.makeIcon(this.j, this.state.icon);
-        iconElement && this.icon.appendChild(iconElement);
+        iconElement && Dom.append(this.icon, iconElement);
     }
     /**
      * Set focus on an element
@@ -13789,8 +13856,8 @@ let UIButton = class UIButton extends UIElement {
         });
         const icon = this.j.c.span(cn + '__icon');
         const text = this.j.c.span(cn + '__text');
-        button.appendChild(icon);
-        button.appendChild(text);
+        Dom.append(button, icon);
+        Dom.append(button, text);
         return button;
     }
     constructor(jodit, state) {
@@ -13985,7 +14052,7 @@ let UIGroup = UIGroup_1 = class UIGroup extends UIElement {
             if (distElm == null) {
                 throw new Error('Element does not exist');
             }
-            distElm.appendChild(elm.container);
+            Dom.append(distElm, elm.container);
         }
         else {
             this.appendChildToContainer(elm.container, index);
@@ -14003,14 +14070,14 @@ let UIGroup = UIGroup_1 = class UIGroup extends UIElement {
      * Allow set another container for the box of all children
      */
     appendChildToContainer(childContainer, index) {
-        if (index === undefined ||
-            index < 0 ||
-            index > this.elements.length - 1 ||
-            this.container.children[index] == null) {
-            this.container.appendChild(childContainer);
+        const ref = index === undefined || index < 0 || index > this.elements.length - 1
+            ? null
+            : this.container.children[index];
+        if (ref == null) {
+            Dom.append(this.container, childContainer);
         }
         else {
-            this.container.insertBefore(childContainer, this.container.children[index]);
+            Dom.before(ref, childContainer);
         }
     }
     /**
@@ -14099,7 +14166,7 @@ let UIButtonGroup = class UIButtonGroup extends UIGroup {
     appendChildToContainer(childContainer) {
         const options = this.getElm('options');
         assert(options != null, 'Options does not exist');
-        options.appendChild(childContainer);
+        Dom.append(options, childContainer);
     }
     constructor(jodit, options = {
         radio: true
@@ -14201,7 +14268,7 @@ let UITooltip = UITooltip_1 = class UITooltip extends UIElement {
     }
     __onAttach(container) {
         // TODO Move it inside __show method. Now it is here because testcase failed with capturing
-        getContainer(this.j, UITooltip_1).appendChild(this.container);
+        Dom.append(getContainer(this.j, UITooltip_1), this.container);
         this.__attachedContainers.add(container);
         this.__attachedContainers.add(this.j.container);
         this.j.e
@@ -14311,7 +14378,7 @@ let UITooltip = UITooltip_1 = class UITooltip extends UIElement {
         if (this.__isOpened) {
             this.__isOpened = false;
             this.setMod('visible', false);
-            this.getElm('content').innerHTML = '';
+            Dom.detach(this.getElm('content'));
             css(this.container, {
                 left: -5e3
             });
@@ -14515,7 +14582,7 @@ let UIInput = UIInput_1 = class UIInput extends UIElement {
         }
         else {
             this.__errorBox.innerText = this.j.i18n(value, this.j.i18n(this.state.label || ''));
-            this.container.appendChild(this.__errorBox);
+            Dom.append(this.container, this.__errorBox);
         }
     }
     get value() {
@@ -14557,11 +14624,11 @@ let UIInput = UIInput_1 = class UIInput extends UIElement {
     __markInputInvalid() {
         var _a, _b, _c, _d;
         if (this.error) {
-            this.nativeInput.setAttribute('aria-invalid', 'true');
+            attr(this.nativeInput, 'aria-invalid', 'true');
             (_b = (_a = this.nativeInput).setCustomValidity) === null || _b === void 0 ? void 0 : _b.call(_a, this.error);
         }
         else {
-            this.nativeInput.removeAttribute('aria-invalid');
+            attr(this.nativeInput, 'aria-invalid', null);
             (_d = (_c = this.nativeInput).setCustomValidity) === null || _d === void 0 ? void 0 : _d.call(_c, '');
         }
     }
@@ -14574,8 +14641,8 @@ let UIInput = UIInput_1 = class UIInput extends UIElement {
         }
         const { nativeInput } = this;
         nativeInput.classList.add(this.getFullElName('input'));
-        this.wrapper.appendChild(nativeInput);
-        container.appendChild(this.wrapper);
+        Dom.append(this.wrapper, nativeInput);
+        Dom.append(container, this.wrapper);
         attr(nativeInput, 'dir', this.j.o.direction || 'auto');
         return container;
     }
@@ -14852,12 +14919,12 @@ let UITextArea = UITextArea_1 = class UITextArea extends UIInput {
         this.state = { ...UITextArea_1.defaultState };
         Object.assign(this.state, state);
         if (this.state.resizable === false) {
-            this.nativeInput.style.resize = 'none';
+            css(this.nativeInput, 'resize', 'none');
         }
     }
     onChangeStateSize() {
         const { size, resizable } = this.state;
-        this.nativeInput.style.resize = resizable ? 'auto' : 'none';
+        css(this.nativeInput, 'resize', resizable ? 'auto' : 'none');
         this.nativeInput.rows = size !== null && size !== void 0 ? size : 5;
     }
 };
@@ -14985,7 +15052,7 @@ let UIFileInput = class UIFileInput extends UIInput {
         const { nativeInput } = this;
         nativeInput.classList.add(this.getFullElName('input'));
         container.classList.add(this.componentName);
-        container.appendChild(nativeInput);
+        Dom.append(container, nativeInput);
         return container;
     }
     createNativeInput(options) {
@@ -15343,7 +15410,7 @@ class Popup extends UIGroup {
     appendChildToContainer(childContainer) {
         const content = this.getElm('content');
         assert(content, 'Content element should exist');
-        content.appendChild(childContainer);
+        Dom.append(content, childContainer);
     }
     updateParentElement(target) {
         if (target !== this && Component.isInstanceOf(target, Popup)) {
@@ -15393,12 +15460,12 @@ class Popup extends UIGroup {
             ? getBound
             : this.getKeepBound(getBound);
         if (parentContainer) {
-            parentContainer.appendChild(this.container);
+            Dom.append(parentContainer, this.container);
         }
         else {
             const popupContainer = getContainer(this.jodit, Popup);
             if (parentContainer !== this.container.parentElement) {
-                popupContainer.appendChild(this.container);
+                Dom.append(popupContainer, this.container);
             }
         }
         this.updatePosition();
@@ -15407,11 +15474,11 @@ class Popup extends UIGroup {
         return this;
     }
     __calculateZIndex() {
-        if (this.container.style.zIndex) {
+        if (cssInline(this.container, 'zIndex')) {
             return;
         }
         const checkView = (view) => {
-            const zIndex = view.container.style.zIndex || view.o.zIndex;
+            const zIndex = cssInline(view.container, 'zIndex') || view.o.zIndex;
             if (zIndex) {
                 this.setZIndex(1 + parseInt(zIndex.toString(), 10));
                 return true;
@@ -15427,8 +15494,9 @@ class Popup extends UIGroup {
             if (checkView(pe.j)) {
                 return;
             }
-            if (pe.container.style.zIndex) {
-                this.setZIndex(1 + parseInt(pe.container.style.zIndex.toString(), 10));
+            const parentZIndex = cssInline(pe.container, 'zIndex');
+            if (parentZIndex) {
+                this.setZIndex(1 + parseInt(parentZIndex.toString(), 10));
                 return;
             }
             if (!pe.parentElement && pe.container.parentElement) {
@@ -15557,6 +15625,18 @@ class Popup extends UIGroup {
         this.j.e.fire(this, 'beforeClose');
         this.j.e.fire('beforePopupClose', this);
         this.__removeGlobalListeners();
+        // Blur a focused control (e.g. the color picker hex input) before
+        // the container goes away. Chrome fires `blur`/`change` for a
+        // removed focused element in the middle of `removeChild`, Firefox
+        // does not fire them at all. Blurring first makes both browsers
+        // run those handlers while the popup is still in the DOM. See #1458
+        const { activeElement } = this.od;
+        if (activeElement &&
+            activeElement !== this.container &&
+            Dom.isOrContains(this.container, activeElement) &&
+            isFunction(activeElement.blur)) {
+            activeElement.blur();
+        }
         Dom.safeRemove(this.container);
         return this;
     }
@@ -15620,7 +15700,7 @@ class Popup extends UIGroup {
      * Set ZIndex
      */
     setZIndex(index) {
-        this.container.style.zIndex = index.toString();
+        css(this.container, 'zIndex', index.toString());
     }
     constructor(jodit, smart = true) {
         super(jodit);
@@ -15684,7 +15764,7 @@ class ProgressBar extends UIElement {
      */
     show() {
         const container = this.j.workplace || this.j.container;
-        container.appendChild(this.container);
+        Dom.append(container, this.container);
         return this;
     }
     hide() {
@@ -15692,7 +15772,7 @@ class ProgressBar extends UIElement {
         return this;
     }
     progress(percentage) {
-        this.container.style.width = percentage.toFixed(2) + '%';
+        css(this.container, 'width', percentage.toFixed(2) + '%');
         return this;
     }
     showFileUploadAnimation(from, to) {
@@ -15716,7 +15796,7 @@ class ProgressBar extends UIElement {
             left: pos.left + start.x,
             top: pos.top + start.y
         });
-        box.appendChild(el);
+        Dom.append(box, el);
         this.__animationElement = el;
         css(el, {
             left: pos.left + end.x,
@@ -15769,7 +15849,7 @@ class Create {
             }
         }
         if (children) {
-            asArray(children).forEach((child) => elm.appendChild(isString(child) ? this.fromHTML(child) : child));
+            asArray(children).forEach((child) => Dom.append(elm, isString(child) ? this.fromHTML(child) : child));
         }
         return elm;
     }
@@ -15783,7 +15863,7 @@ class Create {
     sandbox() {
         var _a;
         const iframe = this.element('iframe', { sandbox: 'allow-same-origin' });
-        this.doc.body.appendChild(iframe);
+        Dom.append(this.doc.body, iframe);
         const doc = (_a = iframe.contentWindow) === null || _a === void 0 ? void 0 : _a.document;
         assert(doc, 'iframe.contentWindow.document');
         if (!doc) {
@@ -16432,7 +16512,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();
@@ -16704,7 +16784,7 @@ let View = View_1 = class View extends Component {
     }
     /** Add some element to box */
     addDisclaimer(elm) {
-        this.container.appendChild(elm);
+        Dom.append(this.container, elm);
     }
     /**
      * Call before destruct
@@ -16869,7 +16949,7 @@ class ViewWithToolbar extends View {
             anchor = anchor.nextElementSibling;
         }
         if (anchor !== box) {
-            this.container.insertBefore(box, anchor);
+            anchor ? Dom.before(anchor, box) : Dom.append(this.container, box);
         }
     }
     /**
@@ -17048,7 +17128,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;
@@ -17060,12 +17140,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);
             }
         });
     }
@@ -17243,8 +17323,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;
     }
     /**
@@ -17305,6 +17388,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
      */
@@ -17315,12 +17407,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;
             }
         });
@@ -17332,12 +17423,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
@@ -17383,14 +17473,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);
@@ -17445,6 +17536,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);
         }
@@ -17523,11 +17615,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', {
@@ -17594,6 +17686,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
@@ -17604,6 +17697,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,
@@ -17662,7 +17760,7 @@ 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) {
@@ -17702,8 +17800,8 @@ 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();
@@ -17762,9 +17860,9 @@ 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 ||
@@ -18185,7 +18283,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;
             }
@@ -18966,6 +19065,17 @@ var __decorate$q = (undefined && undefined.__decorate) || function (decorators,
 };
 var ImageEditor_1;
 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'
@@ -19016,19 +19126,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 = () => {
@@ -19041,10 +19152,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();
                 }
@@ -19066,10 +19177,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`);
         }
@@ -19294,7 +19406,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}`, () => {
@@ -19303,7 +19415,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) {
@@ -19433,9 +19545,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']
         });
@@ -19614,7 +19728,7 @@ var contextMenu = (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) {
@@ -19624,14 +19738,14 @@ var contextMenu = (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');
                                 };
@@ -19971,11 +20085,11 @@ 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(() => {
@@ -19983,7 +20097,7 @@ 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'), {
@@ -20004,7 +20118,7 @@ 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;
                 }
@@ -20017,7 +20131,7 @@ function stateListeners() {
                         size: 'tiny'
                     });
                     btn.onAction(action('renameFolder'));
-                    folderElm.appendChild(btn.container);
+                    Dom.append(folderElm, btn.container);
                 }
                 if (options.deleteFolder &&
                     this.dataProvider.canI('FolderRemove')) {
@@ -20028,7 +20142,7 @@ function stateListeners() {
                         size: 'tiny'
                     });
                     btn.onAction(action('removeFolder'));
-                    folderElm.appendChild(btn.container);
+                    Dom.append(folderElm, btn.container);
                 }
             });
             if (options.createNewFolder &&
@@ -20135,7 +20249,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
@@ -20296,10 +20411,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);
@@ -21004,14 +21119,13 @@ let StatusBar = class StatusBar extends ViewComponent {
      * Add element in statusbar
      */
     append(child, inTheRight = false) {
-        var _a;
         const wrapper = this.findEmpty(inTheRight) ||
             this.j.c.div(this.getFullElName('item'));
         if (inTheRight) {
             wrapper.classList.add(this.getFullElName('item-right'));
         }
-        wrapper.appendChild(child);
-        (_a = this.container) === null || _a === void 0 ? void 0 : _a.appendChild(wrapper);
+        Dom.append(wrapper, child);
+        this.container && Dom.append(this.container, wrapper);
         if (this.j.o.statusbar) {
             this.show();
         }
@@ -21022,7 +21136,7 @@ let StatusBar = class StatusBar extends ViewComponent {
         this.target = target;
         this.mods = {};
         this.container = jodit.c.div('jodit-status-bar');
-        target.appendChild(this.container);
+        Dom.append(target, this.container);
         this.hide();
     }
     destruct() {
@@ -21201,37 +21315,40 @@ class Table extends ViewComponent {
         return Table.__formalCoordinate(table, cell, max);
     }
     static __appendRow(table, line, after, create) {
-        var _a;
         let row;
         if (!line) {
             const columnsCount = Table.__getColumnsCount(table);
             row = create.element('tr');
             for (let j = 0; j < columnsCount; j += 1) {
-                row.appendChild(create.element('td'));
+                Dom.append(row, create.element('td'));
             }
         }
         else {
             row = line.cloneNode(true);
-            $$('td,th', line).forEach(cell => {
+            Dom.each(line, cell => {
+                if (!Dom.isCell(cell)) {
+                    return;
+                }
                 const rowspan = attr(cell, 'rowspan');
                 if (rowspan && parseInt(rowspan, 10) > 1) {
                     const newRowSpan = parseInt(rowspan, 10) - 1;
                     attr(cell, 'rowspan', newRowSpan > 1 ? newRowSpan : null);
                 }
             });
-            $$('td,th', row).forEach(cell => {
-                cell.innerHTML = '';
+            Dom.each(row, cell => {
+                if (Dom.isCell(cell)) {
+                    Dom.detach(cell);
+                }
             });
         }
         if (after && line && line.nextSibling) {
-            line.parentNode &&
-                line.parentNode.insertBefore(row, line.nextSibling);
+            Dom.after(line, row);
         }
         else if (!after && line) {
-            line.parentNode && line.parentNode.insertBefore(row, line);
+            Dom.before(line, row);
         }
         else {
-            (((_a = table.getElementsByTagName('tbody')) === null || _a === void 0 ? void 0 : _a[0]) || table).appendChild(row);
+            Dom.append(Dom.first(table, node => Dom.isTag(node, 'tbody')) || table, row);
         }
     }
     /**
@@ -21278,10 +21395,10 @@ class Table extends ViewComponent {
                             }
                         }
                         if (referenceCell) {
-                            nextRow.insertBefore(cell, referenceCell);
+                            Dom.before(referenceCell, cell);
                         }
                         else {
-                            nextRow.appendChild(cell);
+                            Dom.append(nextRow, cell);
                         }
                     }
                 }
@@ -21509,7 +21626,7 @@ class Table extends ViewComponent {
                             return;
                         }
                         alreadyMerged.add(td);
-                        if (i === bound[0][0] && td.style.width) {
+                        if (i === bound[0][0] && cssInline(td, 'width')) {
                             w += td.offsetWidth;
                         }
                         if (trim(cell.innerHTML.replace(/<br(\/)?>/g, '')) !== '') {
@@ -21571,7 +21688,7 @@ class Table extends ViewComponent {
         const __marked = [];
         Table.__getSelectedCellsByTable(table).forEach((cell) => {
             td = jodit.createInside.element('td');
-            td.appendChild(jodit.createInside.element('br'));
+            Dom.append(td, jodit.createInside.element('br'));
             tr = jodit.createInside.element('tr');
             coord = Table.__formalCoordinate(table, cell);
             if (cell.rowSpan < 2) {
@@ -21583,7 +21700,7 @@ class Table extends ViewComponent {
                     }
                 });
                 Dom.after(Dom.closest(cell, 'tr', table), tr);
-                tr.appendChild(td);
+                Dom.append(tr, td);
             }
             else {
                 Table.__mark(cell, 'rowspan', cell.rowSpan - 1, __marked);
@@ -21603,7 +21720,7 @@ class Table extends ViewComponent {
                     Dom.after(after, td);
                 }
                 else {
-                    parent.insertBefore(td, parent.firstChild);
+                    Dom.prepend(parent, td);
                 }
             }
             if (cell.colSpan > 1) {
@@ -21636,7 +21753,7 @@ class Table extends ViewComponent {
                 Table.__mark(cell, 'colspan', cell.colSpan - 1, __marked);
             }
             td = jodit.createInside.element('td');
-            td.appendChild(jodit.createInside.element('br'));
+            Dom.append(td, jodit.createInside.element('br'));
             if (cell.rowSpan > 1) {
                 Table.__mark(td, 'rowspan', cell.rowSpan, __marked);
             }
@@ -21715,7 +21832,7 @@ class Table extends ViewComponent {
                                 }
                             }
                             else {
-                                cell.style.width = value.toString();
+                                css(cell, 'width', value.toString());
                             }
                             break;
                     }
@@ -21843,20 +21960,20 @@ let ToolbarButton = class ToolbarButton extends UIButton {
             value: this,
             configurable: true
         });
-        container.appendChild(button);
+        Dom.append(container, button);
         const trigger = this.j.c.fromHTML(`<span role="button" aria-haspopup="true" aria-expanded="false" class="${cn}__trigger">${Icon.get('chevron')}</span>`);
         // For caching
-        button.appendChild(trigger);
+        Dom.append(button, trigger);
         return container;
     }
     /** @override */
     focus() {
         var _a;
-        (_a = this.container.querySelector('button')) === null || _a === void 0 ? void 0 : _a.focus();
+        (_a = Dom.first(this.container, node => Dom.isTag(node, 'button'))) === null || _a === void 0 ? void 0 : _a.focus();
     }
     onChangeHasTrigger() {
         if (this.state.hasTrigger) {
-            this.container.appendChild(this.trigger);
+            Dom.append(this.container, this.trigger);
         }
         else {
             Dom.safeRemove(this.trigger);
@@ -22093,17 +22210,25 @@ let ToolbarButton = class ToolbarButton extends UIButton {
         return this.openedPopup;
     }
     __closePopup() {
-        if (this.openedPopup) {
-            this.j.e
-                .off(this.ow, 'mousedown touchstart', this.onOutsideClick)
-                .off('escape closeAllPopups', this.onOutsideClick);
-            this.state.activated = false;
-            this.openedPopup.close();
-            this.openedPopup.destruct();
-            this.openedPopup = null;
-            if (this.trigger) {
-                attr(this.trigger, 'aria-expanded', false);
-            }
+        const popup = this.openedPopup;
+        if (!popup) {
+            return;
+        }
+        // Detach first: removing a popup that holds the focused element
+        // makes Chrome fire `blur`/`change` on it synchronously, and a
+        // handler there may call the popup's `close` callback again.
+        // A re-entrant call must be a no-op, otherwise it destructs the
+        // popup while the outer `removeChild` is still running and Chrome
+        // throws NotFoundError. See #1458
+        this.openedPopup = null;
+        this.j.e
+            .off(this.ow, 'mousedown touchstart', this.onOutsideClick)
+            .off('escape closeAllPopups', this.onOutsideClick);
+        this.state.activated = false;
+        popup.close();
+        popup.destruct();
+        if (this.trigger) {
+            attr(this.trigger, 'aria-expanded', false);
         }
     }
     /**
@@ -22189,6 +22314,12 @@ var __decorate$j = (undefined && undefined.__decorate) || function (decorators,
                 r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
+const FORM_CONTROL_TAGS = new Set([
+    'input',
+    'button',
+    'select',
+    'textarea'
+]);
 let ToolbarContent = class ToolbarContent extends UIButton {
     /** @override */
     className() {
@@ -22201,7 +22332,7 @@ let ToolbarContent = class ToolbarContent extends UIButton {
         const content = control.getContent(this.j, this);
         if (isString(content) || content.parentNode !== this.container) {
             Dom.detach(this.container);
-            this.container.appendChild(isString(content) ? this.j.create.fromHTML(content) : content);
+            Dom.append(this.container, isString(content) ? this.j.create.fromHTML(content) : content);
         }
         // Content controls never went through the ToolbarButton status
         // calculation, so `isDisabled`/`isActive`/`update` declared on the
@@ -22224,9 +22355,11 @@ let ToolbarContent = class ToolbarContent extends UIButton {
      */
     onChangeDisabled() {
         super.onChangeDisabled();
-        this.container
-            .querySelectorAll('input,button,select,textarea')
-            .forEach(elm => attr(elm, 'disabled', this.state.disabled || null));
+        Dom.each(this.container, elm => {
+            if (Dom.isTag(elm, FORM_CONTROL_TAGS)) {
+                attr(elm, 'disabled', this.state.disabled || null);
+            }
+        });
     }
     /** @override */
     createContainer() {
@@ -22354,8 +22487,8 @@ let ToolbarCollection = class ToolbarCollection extends UIList {
      * Set direction
      */
     setDirection(direction) {
-        this.container.style.direction = direction;
-        this.container.setAttribute('dir', direction);
+        css(this.container, 'direction', direction);
+        attr(this.container, 'dir', direction);
     }
     constructor(jodit) {
         super(jodit);
@@ -22862,11 +22995,11 @@ Config.prototype.uploader = {
         }
         if (resp.files && resp.files.length) {
             resp.files.forEach((filename, index) => {
-                const [tagName, attr] = resp.isImages && resp.isImages[index]
+                const [tagName, attrName] = resp.isImages && resp.isImages[index]
                     ? ['img', 'src']
                     : ['a', 'href'];
                 const elm = j.createInside.element(tagName);
-                elm.setAttribute(attr, resp.baseurl + filename);
+                attr(elm, attrName, resp.baseurl + filename);
                 if (tagName === 'a') {
                     elm.textContent = j.o.uploader.getDisplayName.call(this, resp.baseurl, filename);
                 }
@@ -23012,7 +23145,11 @@ class Uploader extends ViewComponent {
                 sendFiles(self, event.dataTransfer.files, handlerSuccess, handlerError).finally(onFinally);
             }
         });
-        const inputFile = form.querySelector('input[type=file]');
+        const inputFile = Dom.first(form, node => {
+            var _a;
+            return Dom.isTag(node, 'input') &&
+                ((_a = attr(node, 'type')) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === 'file';
+        });
         if (inputFile) {
             self.j.e.on(inputFile, 'change', () => {
                 sendFiles(self, inputFile.files, handlerSuccess, handlerError)
@@ -23392,6 +23529,7 @@ function getSuitChild(style, font) {
  * @private
  */
 function getSuitParent(style, node, root) {
+    var _a;
     const { parentNode } = node;
     if (parentNode === root ||
         !Dom.isHTMLElement(parentNode) ||
@@ -23405,6 +23543,15 @@ function getSuitParent(style, node, root) {
         !Dom.isBlock(parentNode)) {
         return getSuitParent(style, parentNode, root);
     }
+    // <li>|test|</li> => apply the CSS style to the <li> itself, so the
+    // list marker (bullet/number) gets the same color and size as the text.
+    // Only for pure style commits: bold/italic keep wrapping the content.
+    // See #1460
+    if (Dom.isTag(parentNode, 'li') &&
+        !style.isElementCommit &&
+        ((_a = style.options.attributes) === null || _a === void 0 ? void 0 : _a.style)) {
+        return parentNode;
+    }
     if (isSuitElement(style, parentNode, false) &&
         (!Dom.isBlock(parentNode) || style.elementIsBlock)) {
         return parentNode;
@@ -23457,8 +23604,10 @@ function isSameAttributes(elm, attrs) {
 }
 function elementsEqualAttributes(elm1, elm2) {
     return (elm1.attributes.length === elm2.attributes.length &&
-        Array.from(elm1.attributes).every(attr => elm2.hasAttribute(attr.name) &&
-            elm2.getAttribute(attr.name) === attr.value));
+        Array.from(elm1.attributes).every(
+        // `attrRaw` on purpose: the comparison must use the exact
+        // attribute name from the live list, without `attr()` name mangling
+        attr => attrRaw(elm2, attr.name) === attr.value));
 }
 
 /*!
@@ -23499,7 +23648,7 @@ function toggleAttributes(commitStyle, elm, jodit, mode, dry = false) {
 function toggleStyle(commitStyle, jodit, style, elm, dry, mode) {
     assert(isPlainObject(style) && size$1(style), 'Style must be an object');
     Object.keys(style).forEach((rule) => {
-        const inlineValue = elm.style.getPropertyValue(kebabCase(rule));
+        const inlineValue = cssInline(elm, rule);
         const newValue = style[rule];
         if (inlineValue === '' && newValue == null) {
             return;
@@ -23592,8 +23741,8 @@ function getShadowRoot(jodit) {
         position: 'absolute',
         border: 0
     });
-    iframe.src = 'about:blank';
-    container.appendChild(iframe);
+    attr(iframe, 'src', 'about:blank');
+    Dom.append(container, iframe);
     const doc = (_a = iframe.contentWindow) === null || _a === void 0 ? void 0 : _a.document;
     const shadowRoot = !doc ? jodit.od.body : doc.body;
     dataBind(jodit, 'shadowRoot', shadowRoot);
@@ -23609,11 +23758,11 @@ function getNativeCSSValue(jodit, elm, key) {
     // browser default black) is recognised. Without this, applying black after
     // the default font color was changed was wrongly treated as a no-op (#1311).
     const wrapper = jodit.create.element('div');
-    wrapper.style.color = css(jodit.editor, 'color');
+    css(wrapper, 'color', css(jodit.editor, 'color'));
     const newElm = jodit.create.element(elm.tagName.toLowerCase());
-    newElm.style.cssText = elm.style.cssText;
-    wrapper.appendChild(newElm);
-    root.appendChild(wrapper);
+    attr(newElm, 'style', attr(elm, 'style'));
+    Dom.append(wrapper, newElm);
+    Dom.append(root, wrapper);
     const result = css(newElm, key);
     Dom.safeRemove(wrapper);
     return result;
@@ -23814,12 +23963,12 @@ function wrapUnwrappedText(style, elm, jodit) {
     range.setEndAfter(end);
     const fragment = range.extractContents();
     const wrapper = ci.element(style.element);
-    wrapper.appendChild(fragment);
+    Dom.append(wrapper, fragment);
     Dom.safeInsertNode(range, wrapper);
     if (style.elementIsBlock) {
         if (Dom.isEmpty(wrapper) &&
             !Dom.isTag(wrapper.firstElementChild, 'br')) {
-            wrapper.appendChild(ci.element('br'));
+            Dom.append(wrapper, ci.element('br'));
         }
     }
     return wrapper;
@@ -23870,7 +24019,9 @@ const WRAP_NODES = new Set([
  */
 function findOrCreateWrapper(commitStyle, font, jodit) {
     if (commitStyle.elementIsBlock) {
-        const box = Dom.up(font, node => Dom.isBlock(node) && !Dom.isTag(node, WRAP_NODES), jodit.editor);
+        const box = Dom.up(font, node => Dom.isBlock(node) &&
+            !Dom.isTag(node, WRAP_NODES) &&
+            !hasBlockChildren(node), jodit.editor);
         if (box) {
             return box;
         }
@@ -23879,6 +24030,14 @@ function findOrCreateWrapper(commitStyle, font, jodit) {
     attr(font, 'size', null);
     return font;
 }
+/**
+ * A block that itself contains block-level children is a layout container:
+ * replacing it wholesale would merge all its blocks into the new element,
+ * so the selection must be wrapped in a new block inside it instead.
+ */
+function hasBlockChildren(node) {
+    return Array.from(node.childNodes).some(child => Dom.isBlock(child));
+}
 
 /*!
  * Jodit Editor (https://xdsoft.net/jodit/)
@@ -24039,11 +24198,25 @@ const transactions = {
     },
     [states.UNWRAP]: {
         exec(value) {
-            if (value.element.attributes.length &&
-                Dom.isTag(value.element, value.style.element)) {
+            const { element, style, jodit } = value;
+            if (element.attributes.length &&
+                Dom.isTag(element, style.element)) {
+                return { ...value, next: states.REPLACE_DEFAULT };
+            }
+            // Unwrapping a block inside a container (e.g. an h3 inside a div)
+            // leaves bare inline content there: the wrapNodes plugin restores
+            // paragraphs only at the editor root. Replace such a block with
+            // the default tag instead.
+            const parent = element.parentElement;
+            if (style.elementIsBlock &&
+                !style.elementIsDefault &&
+                parent &&
+                parent !== jodit.editor &&
+                Dom.isBlock(parent) &&
+                !Dom.isTag(parent, WRAP_NODES)) {
                 return { ...value, next: states.REPLACE_DEFAULT };
             }
-            Dom.unwrap(value.element);
+            Dom.unwrap(element);
             return { ...value, mode: UNWRAP, next: states.END };
         }
     },
@@ -24188,7 +24361,7 @@ function moveNodeInsideStart(j, node, start) {
         Dom.isContentEditable(sibling, j.editor) &&
         (!anotherSibling || !Dom.closest(node, Dom.isElement, j.editor))) {
         if (start || !sibling.firstChild) {
-            sibling.appendChild(node);
+            Dom.append(sibling, node);
         }
         else {
             Dom.before(sibling.firstChild, node);
@@ -24443,11 +24616,13 @@ class Selection {
                 Number(new Date()) +
                 '_' +
                 String(Math.random()).slice(2);
-        marker.style.lineHeight = '0';
-        marker.style.display = 'none';
+        css(marker, {
+            lineHeight: '0',
+            display: 'none'
+        });
         Dom.markTemporary(marker);
         attr(marker, 'data-' + MARKER_CLASS, atStart ? 'start' : 'end');
-        marker.appendChild(this.j.createInside.text(INVISIBLE_SPACE));
+        Dom.append(marker, this.j.createInside.text(INVISIBLE_SPACE));
         if (newRange) {
             if (Dom.isOrContains(this.area, atStart ? newRange.startContainer : newRange.endContainer)) {
                 // Here need do unsafe inserting
@@ -24463,9 +24638,11 @@ class Selection {
      */
     restore() {
         let range = false;
-        const markAttr = (start) => `span[data-${MARKER_CLASS}=${start ? 'start' : 'end'}]`;
-        const start = this.area.querySelector(markAttr(true));
-        const end = this.area.querySelector(markAttr(false));
+        const markerFilter = (start) => (node) => Dom.isMarker(node) &&
+            attr(node, 'data-' + MARKER_CLASS) ===
+                (start ? 'start' : 'end');
+        const start = Dom.first(this.area, markerFilter(true));
+        const end = Dom.first(this.area, markerFilter(false));
         if (!start) {
             return;
         }
@@ -24719,7 +24896,7 @@ class Selection {
                     Dom.safeInsertNode(range, node);
                 }
                 else {
-                    this.area.appendChild(node);
+                    Dom.append(this.area, node);
                 }
                 [
                     () => firstChild === null || firstChild === void 0 ? void 0 : firstChild.previousSibling,
@@ -24733,7 +24910,7 @@ class Selection {
                 });
             }
             else {
-                this.area.appendChild(node);
+                Dom.append(this.area, node);
             }
             const setCursor = (node) => {
                 if (Dom.isBlock(node)) {
@@ -24787,7 +24964,7 @@ class Selection {
             node.innerHTML = html.toString();
         }
         else {
-            node.appendChild(html);
+            Dom.append(node, html);
         }
         if (!this.j.isEditorMode() &&
             this.j.e.fire('insertHTML', node.innerHTML) === false) {
@@ -24796,9 +24973,7 @@ class Selection {
         if (!node.lastChild) {
             return;
         }
-        while (node.firstChild) {
-            fragment.appendChild(node.firstChild);
-        }
+        Dom.moveContent(node, fragment);
         this.insertNode(fragment, insertCursorAfter, false);
         // There is no need to use synchronizeValues because you need to apply the changes immediately
         this.j.__imdSynchronizeValues();
@@ -24813,7 +24988,7 @@ class Selection {
     insertImage(url, styles = null, defaultWidth = null) {
         const image = isString(url) ? this.j.createInside.element('img') : url;
         if (isString(url)) {
-            image.setAttribute('src', url);
+            attr(image, 'src', url);
         }
         if (defaultWidth != null) {
             let dw = defaultWidth.toString();
@@ -24831,8 +25006,10 @@ class Selection {
         const onload = () => {
             if (image.naturalHeight < image.offsetHeight ||
                 image.naturalWidth < image.offsetWidth) {
-                image.style.width = '';
-                image.style.height = '';
+                css(image, {
+                    width: '',
+                    height: ''
+                });
             }
             image.removeEventListener('load', onload);
         };
@@ -24921,7 +25098,7 @@ class Selection {
                 }
                 else {
                     const currentB = this.j.createInside.text(INVISIBLE_SPACE);
-                    current.appendChild(currentB);
+                    Dom.append(current, currentB);
                     current = currentB;
                 }
             }
@@ -25072,7 +25249,7 @@ class Selection {
         if (!start) {
             const fakeNode = this.j.createInside.text(INVISIBLE_SPACE);
             if (!Dom.isTag(last, INSEPARABLE_TAGS)) {
-                last.appendChild(fakeNode);
+                Dom.append(last, fakeNode);
                 last = fakeNode;
             }
             else {
@@ -25140,7 +25317,7 @@ class Selection {
             const range = sel.getRangeAt(0);
             const clonedSelection = range.cloneContents();
             const div = this.j.createInside.div();
-            div.appendChild(clonedSelection);
+            Dom.append(div, clonedSelection);
             return div.innerHTML;
         }
         return '';
@@ -25280,11 +25457,10 @@ class Selection {
         return toArray(node.childNodes).some(child => this.__isOrContainsBlock(child));
     }
     __wrapRunInFont(run) {
-        var _a;
         const font = this.j.createInside.element('font');
         const [first] = run;
-        (_a = first.parentNode) === null || _a === void 0 ? void 0 : _a.insertBefore(font, first);
-        run.forEach(node => font.appendChild(node));
+        Dom.before(first, font);
+        run.forEach(node => Dom.append(font, node));
         return font;
     }
     /**
@@ -25295,7 +25471,7 @@ class Selection {
             const font = this.jodit.createInside.element('font', INVISIBLE_SPACE);
             this.insertNode(font, false, false);
             if (fakes && fakes[0]) {
-                font.appendChild(fakes[0]);
+                Dom.append(font, fakes[0]);
             }
             yield font;
             Dom.unwrap(font);
@@ -25430,7 +25606,7 @@ class Selection {
             try {
                 clearEmpties(fragment);
                 clearEmpties(currentBox);
-                currentBox.parentNode.insertBefore(fragment, currentBox);
+                Dom.before(currentBox, fragment);
                 if (!edge && cursorOnTheRight && (br === null || br === void 0 ? void 0 : br.parentNode)) {
                     const range = this.createRange();
                     range.setStartBefore(br);
@@ -25441,9 +25617,9 @@ class Selection {
             }
             // After splitting some part can be empty
             const fillFakeParent = (fake) => {
-                var _a, _b, _c;
-                if (((_a = fake === null || fake === void 0 ? void 0 : fake.parentNode) === null || _a === void 0 ? void 0 : _a.firstChild) === ((_b = fake === null || fake === void 0 ? void 0 : fake.parentNode) === null || _b === void 0 ? void 0 : _b.lastChild)) {
-                    (_c = fake === null || fake === void 0 ? void 0 : fake.parentNode) === null || _c === void 0 ? void 0 : _c.appendChild(br.cloneNode());
+                const parent = fake === null || fake === void 0 ? void 0 : fake.parentNode;
+                if (parent && parent.firstChild === parent.lastChild) {
+                    Dom.append(parent, br.cloneNode());
                 }
             };
             fillFakeParent(prevFake);
@@ -26411,7 +26587,7 @@ let Jodit$1 = 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);
         }
@@ -26435,10 +26611,10 @@ let Jodit$1 = 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);
     }
@@ -26597,14 +26773,14 @@ let Jodit$1 = 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');
@@ -26612,32 +26788,33 @@ let Jodit$1 = 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,
@@ -26649,7 +26826,7 @@ let Jodit$1 = Jodit_1 = class Jodit extends ViewWithToolbar {
             'aria-disabled': false,
             tabindex: this.o.tabIndex
         });
-        workplace.appendChild(editor);
+        Dom.append(workplace, editor);
         const currentPlace = {
             editor,
             element,
@@ -26703,7 +26880,7 @@ let Jodit$1 = 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
@@ -26800,10 +26977,10 @@ let Jodit$1 = 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
@@ -26896,23 +27073,23 @@ let Jodit$1 = 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);
@@ -33119,7 +33296,10 @@ function resolveTableSibling(sibling, backspace) {
     if (!Dom.isTag(sibling, 'table')) {
         return sibling;
     }
-    const cells = sibling.querySelectorAll('td,th');
+    const cells = [];
+    Dom.each(sibling, node => {
+        Dom.isCell(node) && cells.push(node);
+    });
     return cells.length ? cells[backspace ? cells.length - 1 : 0] : null;
 }
 function checkMoveListContent(jodit, mainClosestBox, sibling, backspace) {
@@ -33716,6 +33896,13 @@ pluginSystem.add('backspace', backspace);
  * 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
  */
+const NOT_EMPTY_CONTENT_TAGS = new Set([
+    'img',
+    'table',
+    'jodit',
+    'iframe',
+    'hr'
+]);
 class deleteCommand extends Plugin {
     afterInit(jodit) {
         jodit.e.on('afterCommand.delete', (command) => {
@@ -33742,9 +33929,9 @@ class deleteCommand extends Plugin {
             jodit.s.removeNode(current.firstChild);
         }
         if (!trim(jodit.editor.textContent || '') &&
-            !jodit.editor.querySelector('img,table,jodit,iframe,hr') &&
+            !Dom.first(jodit.editor, node => Dom.isTag(node, NOT_EMPTY_CONTENT_TAGS)) &&
             (!current || !Dom.closest(current, 'table', jodit.editor))) {
-            jodit.editor.innerHTML = '';
+            Dom.detach(jodit.editor);
             const node = jodit.s.setCursorIn(jodit.editor);
             jodit.s.removeNode(node);
         }
@@ -34014,13 +34201,20 @@ const ColorPickerWidget = (editor, callback, coldColor) => {
         }
         return stack.join('');
     };
-    form.appendChild(editor.c.fromHTML(`<div class="${cn}__groups">${eachColor(editor.o.colors)}</div>`));
-    form.appendChild(editor.c.fromHTML(`<div data-ref="extra" class="${cn}__extra"></div>`));
+    Dom.append(form, editor.c.fromHTML(`<div class="${cn}__groups">${eachColor(editor.o.colors)}</div>`));
+    Dom.append(form, editor.c.fromHTML(`<div data-ref="extra" class="${cn}__extra"></div>`));
     const { extra } = refs(form);
-    extra.appendChild(editor.c.fromHTML(`<div class="${cn}__hex"><input data-ref="hexInput" type="text" spellcheck="false" aria-label="HEX" placeholder="#FF0000" value="${valueHex || ''}"/></div>`));
+    Dom.append(extra, editor.c.fromHTML(`<div class="${cn}__hex"><input data-ref="hexInput" type="text" spellcheck="false" aria-label="HEX" placeholder="#FF0000" value="${valueHex || ''}"/></div>`));
     const { hexInput } = refs(form);
+    // Enter applies the value and closes the popup; removing the focused
+    // input then makes Chrome fire `change` on it, which would apply the
+    // same color a second time and toggle it off again. See #1459
+    let appliedHexValue = null;
     const applyHexInput = () => {
         const raw = hexInput.value.trim();
+        if (raw === appliedHexValue) {
+            return;
+        }
         const isHex = /^#?[0-9a-f]{3}(?:[0-9a-f]{3})?$/i.test(raw);
         const isRgb = /^rgba?\([\d\s.,%]+\)$/i.test(raw);
         if (!isHex && !isRgb) {
@@ -34028,6 +34222,7 @@ const ColorPickerWidget = (editor, callback, coldColor) => {
         }
         const color = normalizeColor(isHex && !raw.startsWith('#') ? '#' + raw : raw);
         if (color && isFunction(callback)) {
+            appliedHexValue = raw;
             callback(color);
         }
     };
@@ -34044,7 +34239,7 @@ const ColorPickerWidget = (editor, callback, coldColor) => {
         applyHexInput();
     });
     if (editor.o.showBrowserColorPicker && hasBrowserColorPicker()) {
-        extra.appendChild(editor.c.fromHTML(`<div class="${cn}__native">${iconPalette}<input type="color" value="#ffffff"/></div>`));
+        Dom.append(extra, editor.c.fromHTML(`<div class="${cn}__native">${iconPalette}<input type="color" value="#ffffff"/></div>`));
         editor.e.on(form, 'change', (e) => {
             e.stopPropagation();
             const target = e.target;
@@ -34134,8 +34329,8 @@ const TabsWidget = (jodit, tabs, state) => {
     const nameToTab = {};
     const buttonList = [];
     let firstTab = '';
-    box.appendChild(buttons);
-    box.appendChild(tabBox);
+    Dom.append(box, buttons);
+    Dom.append(box, tabBox);
     const setActive = (tab) => {
         if (!nameToTab[tab]) {
             return;
@@ -34159,18 +34354,18 @@ const TabsWidget = (jodit, tabs, state) => {
         if (!firstTab) {
             firstTab = name;
         }
-        buttons.appendChild(button.container);
+        Dom.append(buttons, button.container);
         buttonList.push(button);
         button.container.classList.add('jodit-tabs__button', 'jodit-tabs__button_columns_' + tabs.length);
         if (!isFunction(content)) {
-            tab.appendChild(Component.isInstanceOf(content, UIElement)
+            Dom.append(tab, Component.isInstanceOf(content, UIElement)
                 ? content.container
                 : content);
         }
         else {
             tab.classList.add('jodit-tab_empty');
         }
-        tabBox.appendChild(tab);
+        Dom.append(tabBox, tab);
         button.onAction(() => {
             setActive(name);
             if (isFunction(content) && !Dom.isElement(content)) {
@@ -34293,13 +34488,13 @@ const FileSelectorWidget = (editor, callbacks, elm, close, isImage = true) => {
             !Dom.isComment(elm) &&
             (Dom.isTag(elm, 'img') || $$('img', elm).length)) {
             currentImage = elm.tagName === 'IMG' ? elm : $$('img', elm)[0];
-            val(form.container, 'input[name=url]', attr(currentImage, 'src'));
-            val(form.container, 'input[name=text]', attr(currentImage, 'alt'));
+            val(form.container, 'url', attr(currentImage, 'src'));
+            val(form.container, 'text', attr(currentImage, 'alt'));
             button.state.text = 'Update';
         }
         if (elm && Dom.isTag(elm, 'a')) {
-            val(form.container, 'input[name=url]', attr(elm, 'href'));
-            val(form.container, 'input[name=text]', attr(elm, 'title'));
+            val(form.container, 'url', attr(elm, 'href'));
+            val(form.container, 'text', attr(elm, 'title'));
             button.state.text = 'Update';
         }
         form.onSubmit(data => {
@@ -34321,8 +34516,8 @@ const FileSelectorWidget = (editor, callbacks, elm, close, isImage = true) => {
     box.classList.add('jodit-file-selector');
     return box;
 };
-function val(elm, selector, value) {
-    const child = elm.querySelector(selector);
+function val(elm, name, value) {
+    const child = Dom.first(elm, node => Dom.isTag(node, 'input') && attr(node, 'name') === name);
     if (!child) {
         return '';
     }
@@ -34435,7 +34630,7 @@ Config.prototype.controls.brush = {
                 editor.execCommand('background', false, value);
             }
             else {
-                currentElement.style.backgroundColor = value;
+                css(currentElement, 'backgroundColor', value);
             }
             dataBind(button, 'color', value);
             dataBind(button, 'color-mode', 'background');
@@ -34446,7 +34641,7 @@ Config.prototype.controls.brush = {
                 editor.execCommand('forecolor', false, value);
             }
             else {
-                currentElement.style.color = value;
+                css(currentElement, 'color', value);
             }
             dataBind(button, 'color', value);
             dataBind(button, 'color-mode', 'color');
@@ -34478,10 +34673,10 @@ Config.prototype.controls.brush = {
             Dom.isElement(current)) {
             switch (mode) {
                 case 'color':
-                    current.style.color = color;
+                    css(current, 'color', color);
                     break;
                 case 'background':
-                    current.style.backgroundColor = color;
+                    css(current, 'backgroundColor', color);
                     break;
             }
         }
@@ -34662,7 +34857,7 @@ function hasPreviousBlock(fake, jodit) {
 function insertParagraph(fake, editor, wrapperTag, style) {
     const isBR = wrapperTag.toLowerCase() === 'br', { createInside } = editor, p = createInside.element(wrapperTag), br = createInside.element('br');
     if (!isBR) {
-        p.appendChild(br);
+        Dom.append(p, br);
     }
     Dom.after(fake, p);
     Dom.before(isBR ? p : br, fake);
@@ -34719,11 +34914,11 @@ function processEmptyLILeaf(fake, jodit, li) {
         Dom.safeRemove(list);
     }
     const newLi = insertParagraph(fake, jodit, listInsideLeaf ? 'li' : jodit.o.enter);
-    if (!rightPart.querySelector('li')) {
+    if (!Dom.first(rightPart, node => Dom.isTag(node, 'li'))) {
         return;
     }
     if (listInsideLeaf) {
-        newLi.appendChild(rightPart);
+        Dom.append(newLi, rightPart);
     }
     else {
         Dom.after(newLi, rightPart);
@@ -34793,7 +34988,7 @@ function wrapText(fake, jodit) {
     const currentBox = Dom.wrapInline(needWrap, jodit.o.enter, jodit);
     if (Dom.isEmpty(currentBox)) {
         const br = jodit.createInside.element('br');
-        currentBox.appendChild(br);
+        Dom.append(currentBox, br);
         Dom.before(br, fake);
     }
     return currentBox;
@@ -35436,13 +35631,13 @@ function iframe(editor) {
                 const link = doc.createElement('link');
                 attr(link, 'rel', 'stylesheet');
                 attr(link, 'href', href);
-                doc.head && doc.head.appendChild(link);
+                doc.head && Dom.append(doc.head, link);
             });
         }
         if (opt.iframeStyle) {
             const style = doc.createElement('style');
             style.innerHTML = opt.iframeStyle;
-            doc.head && doc.head.appendChild(style);
+            doc.head && Dom.append(doc.head, style);
         }
     })
         .on('createEditor', () => {
@@ -35450,7 +35645,7 @@ function iframe(editor) {
             return;
         }
         const iframe = editor.c.element('iframe');
-        iframe.style.display = 'block';
+        css(iframe, 'display', 'block');
         iframe.src = 'about:blank';
         iframe.className = 'jodit-wysiwyg_iframe';
         attr(iframe, {
@@ -35461,7 +35656,7 @@ function iframe(editor) {
         if (opt.iframeSandbox != null) {
             attr(iframe, 'sandbox', opt.iframeSandbox);
         }
-        editor.workplace.appendChild(iframe);
+        Dom.append(editor.workplace, iframe);
         editor.iframe = iframe;
         const result = editor.e.fire('generateDocumentStructure.iframe', null, editor);
         const init = () => {
@@ -35532,7 +35727,7 @@ function iframe(editor) {
             editor.e.on('afterSetMode afterInit afterAddPlace', toggleEditable);
             if (opt.height === 'auto') {
                 doc.documentElement &&
-                    (doc.documentElement.style.overflowY = 'hidden');
+                    css(doc.documentElement, 'overflowY', 'hidden');
                 const resizeIframe = editor.async.throttle((...args) => {
                     editor.async.requestAnimationFrame(() => {
                         if (editor.editor &&
@@ -36999,8 +37194,10 @@ class placeholder extends Plugin {
         }
         this.placeholderElm = editor.c.fromHTML(`<span data-ref="placeholder" style="display: none;" class="jodit-placeholder">${editor.i18n(editor.o.placeholder)}</span>`);
         if (editor.o.direction === 'rtl') {
-            this.placeholderElm.style.right = '0px';
-            this.placeholderElm.style.direction = 'rtl';
+            css(this.placeholderElm, {
+                right: 0,
+                direction: 'rtl'
+            });
         }
         editor.e
             .on('readonly', (isReadOnly) => {
@@ -37024,22 +37221,22 @@ class placeholder extends Plugin {
             editor.editor;
         const style = editor.ew.getComputedStyle(wrapper);
         const styleEditor = editor.ew.getComputedStyle(editor.editor);
-        editor.workplace.appendChild(this.placeholderElm);
+        Dom.append(editor.workplace, this.placeholderElm);
         const { firstChild } = editor.editor;
         if (Dom.isElement(firstChild) && !isMarker(firstChild)) {
             const style2 = editor.ew.getComputedStyle(firstChild);
             marginTop = parseInt(style2.getPropertyValue('margin-top'), 10);
             marginLeft = parseInt(style2.getPropertyValue('margin-left'), 10);
-            this.placeholderElm.style.fontSize =
-                parseInt(style2.getPropertyValue('font-size'), 10) + 'px';
-            this.placeholderElm.style.lineHeight =
-                style2.getPropertyValue('line-height');
+            css(this.placeholderElm, {
+                fontSize: parseInt(style2.getPropertyValue('font-size'), 10),
+                lineHeight: style2.getPropertyValue('line-height')
+            });
         }
         else {
-            this.placeholderElm.style.fontSize =
-                parseInt(style.getPropertyValue('font-size'), 10) + 'px';
-            this.placeholderElm.style.lineHeight =
-                style.getPropertyValue('line-height');
+            css(this.placeholderElm, {
+                fontSize: parseInt(style.getPropertyValue('font-size'), 10),
+                lineHeight: style.getPropertyValue('line-height')
+            });
         }
         css(this.placeholderElm, {
             display: 'block',
@@ -37521,7 +37718,15 @@ Config.prototype.controls.table = {
             '<label class="jodit-form__center">' +
             '<span>1</span> &times; <span>1</span>' +
             '</label>' +
-            '</form>'), rows = form.querySelectorAll('span')[0], cols = form.querySelectorAll('span')[1], blocksContainer = form.querySelector('.jodit-form__container'), options = form.querySelector('.jodit-form__options'), cells = [];
+            '</form>'), spans = (() => {
+            const list = [];
+            Dom.each(form, node => {
+                Dom.isTag(node, 'span') && list.push(node);
+            });
+            return list;
+        })(), [rows, cols] = spans, blocksContainer = Dom.first(form, node => Dom.isHTMLElement(node) &&
+            node.classList.contains('jodit-form__container')), options = Dom.first(form, node => Dom.isHTMLElement(node) &&
+            node.classList.contains('jodit-form__options')), cells = [];
         const cnt = default_rows_count * default_cols_count;
         attr(blocksContainer, {
             role: 'grid',
@@ -37559,7 +37764,7 @@ Config.prototype.controls.table = {
             const k = parseInt(attr(cell, '-index') || '0', 10);
             const rows_count = Math.ceil((k + 1) / default_cols_count), cols_count = (k % default_cols_count) + 1;
             const crt = editor.createInside, tbody = crt.element('tbody'), table = crt.element('table');
-            table.appendChild(tbody);
+            Dom.append(table, tbody);
             let first_td = null, tr, td;
             for (let i = 1; i <= rows_count; i += 1) {
                 tr = crt.element('tr');
@@ -37569,13 +37774,13 @@ Config.prototype.controls.table = {
                         first_td = td;
                     }
                     css(td, 'width', (100 / cols_count).toFixed(4) + '%');
-                    td.appendChild(crt.element('br'));
-                    tr.appendChild(crt.text('\n'));
-                    tr.appendChild(crt.text('\t'));
-                    tr.appendChild(td);
+                    Dom.append(td, crt.element('br'));
+                    Dom.append(tr, crt.text('\n'));
+                    Dom.append(tr, crt.text('\t'));
+                    Dom.append(tr, td);
                 }
-                tbody.appendChild(crt.text('\n'));
-                tbody.appendChild(tr);
+                Dom.append(tbody, crt.text('\n'));
+                Dom.append(tbody, tr);
             }
             $$('input[type=checkbox]:checked', options).forEach((input) => {
                 input.value
@@ -37691,9 +37896,9 @@ Config.prototype.controls.table = {
                 const row = editor.c.div();
                 attr(row, 'role', 'row');
                 for (let j = 0; j < default_cols_count; j += 1) {
-                    row.appendChild(cells[i * default_cols_count + j]);
+                    Dom.append(row, cells[i * default_cols_count + j]);
                 }
-                blocksContainer.appendChild(row);
+                Dom.append(blocksContainer, row);
             }
             if (cells[0]) {
                 cells[0].className = 'hovered';
@@ -37806,7 +38011,7 @@ class wrapNodes extends Plugin {
                 Dom.before(child, box);
                 while (child && this.isSuitable(child)) {
                     const next = child.nextSibling;
-                    box.appendChild(child);
+                    Dom.append(box, child);
                     child = next;
                 }
                 box.normalize();
@@ -37856,7 +38061,7 @@ function checkAloneListLeaf(child, jodit) {
             !Dom.isList(next.parentElement)) {
             const nextChild = Dom.findNotEmptySibling(next, false);
             if (Dom.isTag(result, 'ul')) {
-                result.appendChild(next);
+                Dom.append(result, next);
             }
             else {
                 result = Dom.wrap(next, 'ul', jodit.createInside);
@@ -38229,7 +38434,7 @@ class select extends Plugin {
         // The text must be the direct content of a list item that has a nested
         // list (the last level has no nested list and behaves correctly).
         if (!Dom.isTag(li, 'li') ||
-            !(li.querySelector('ul') || li.querySelector('ol'))) {
+            !Dom.first(li, node => Dom.isTag(node, LIST_TAGS))) {
             return;
         }
         const measure = this.j.ed.createRange();
@@ -38402,7 +38607,7 @@ class resizer extends Plugin {
             }
             if (this.element && this.rect) {
                 const workplacePosition = this.getWorkplacePosition();
-                const pos = offset(this.element, this.j, this.j.ed), left = parseInt(this.rect.style.left || '0', 10), top = parseInt(this.rect.style.top || '0', 10), w = this.rect.offsetWidth, h = this.rect.offsetHeight;
+                const pos = offset(this.element, this.j, this.j.ed), left = parseInt(cssInline(this.rect, 'left') || '0', 10), top = parseInt(cssInline(this.rect, 'top') || '0', 10), w = this.rect.offsetWidth, h = this.rect.offsetHeight;
                 const newTop = pos.top - workplacePosition.top, newLeft = pos.left - workplacePosition.left;
                 if (top !== newTop ||
                     left !== newLeft ||
@@ -38425,7 +38630,7 @@ class resizer extends Plugin {
             }
         };
         this.hideSizeViewer = () => {
-            this.sizeViewer.style.opacity = '0';
+            css(this.sizeViewer, 'opacity', '0');
         };
     }
     /** @override */
@@ -38470,7 +38675,7 @@ class resizer extends Plugin {
             return;
         }
         const width = attr(image, 'width');
-        if (width && !css(image, 'width', true)) {
+        if (width && !cssInline(image, 'width')) {
             css(image, 'width', width);
             attr(image, 'width', null);
         }
@@ -38629,7 +38834,7 @@ class resizer extends Plugin {
         if (changeAttrs) {
             attr(element, key, value);
         }
-        if (!changeAttrs || element.style[key]) {
+        if (!changeAttrs || cssInline(element, key)) {
             css(element, key, value);
         }
     }
@@ -38684,16 +38889,16 @@ class resizer extends Plugin {
                 });
                 attr(wrapper, 'style', attr(element, 'style'));
                 css(wrapper, {
-                    display: element.style.display === 'inline-block'
+                    display: cssInline(element, 'display') === 'inline-block'
                         ? 'inline-block'
                         : 'block',
                     width: element.offsetWidth,
                     height: element.offsetHeight
                 });
                 if (element.parentNode) {
-                    element.parentNode.insertBefore(wrapper, element);
+                    Dom.before(element, wrapper);
                 }
-                wrapper.appendChild(element);
+                Dom.append(wrapper, element);
                 this.j.e.on(wrapper, 'click', () => {
                     attr(wrapper, 'data-jodit-wrapper_active', true);
                 });
@@ -38721,7 +38926,7 @@ class resizer extends Plugin {
             this.hideSizeViewer();
             return;
         }
-        this.sizeViewer.style.opacity = '1';
+        css(this.sizeViewer, 'opacity', '1');
         this.sizeViewer.textContent = `${w} x ${h}`;
         this.j.async.setTimeout(this.hideSizeViewer, {
             timeout: this.j.o.resizer.hideSizeTimeout,
@@ -38738,10 +38943,10 @@ class resizer extends Plugin {
         this.isShown = true;
         if (!this.rect.parentNode) {
             markOwner(this.j, this.rect);
-            this.j.workplace.appendChild(this.rect);
+            Dom.append(this.j.workplace, this.rect);
         }
         if (this.j.isFullSize) {
-            this.rect.style.zIndex = css(this.j.container, 'zIndex').toString();
+            css(this.rect, 'zIndex', css(this.j.container, 'zIndex').toString());
         }
         this.updateSize();
     }
@@ -38900,7 +39105,7 @@ class selectCells extends Plugin {
             }
             else {
                 if (!cell.firstChild) {
-                    cell.appendChild(this.j.createInside.element('br'));
+                    Dom.append(cell, this.j.createInside.element('br'));
                 }
                 this.__tableModule.addSelection(cell);
             }
@@ -38922,7 +39127,7 @@ class selectCells extends Plugin {
             return;
         }
         if (!cell.firstChild) {
-            cell.appendChild(this.j.createInside.element('br'));
+            Dom.append(cell, this.j.createInside.element('br'));
         }
         this.__isSelectionMode = true;
         this.__selectedCell = cell;
@@ -38989,10 +39194,9 @@ class selectCells extends Plugin {
         // Hack for FireFox for force redraw selection
         (() => {
             const n = this.j.createInside.fromHTML('<div style="color:rgba(0,0,0,0.01);width:0;height:0">&nbsp;</div>');
-            cell.appendChild(n);
+            Dom.append(cell, n);
             this.j.async.setTimeout(() => {
-                var _a;
-                (_a = n.parentNode) === null || _a === void 0 ? void 0 : _a.removeChild(n);
+                Dom.safeRemove(n);
             }, this.j.defaultTimeout / 5);
         })();
     }
@@ -39090,7 +39294,7 @@ class selectCells extends Plugin {
             const cells = this.__tableModule.getAllSelectedCells();
             cells.forEach(td => {
                 Dom.detach(td);
-                td.appendChild(this.j.createInside.element('br'));
+                Dom.append(td, this.j.createInside.element('br'));
             });
             this.unselectCells();
             this.j.s.setCursorIn(cells[0]);
@@ -39265,7 +39469,7 @@ class resizeCells extends Plugin {
     }
     showResizeHandle() {
         this.j.async.clearTimeout(this.hideTimeout);
-        this.j.workplace.appendChild(this.resizeHandler);
+        Dom.append(this.j.workplace, this.resizeHandler);
     }
     hideResizeHandle() {
         this.hideTimeout = this.j.async.setTimeout(() => {
@@ -39332,8 +39536,7 @@ class resizeCells extends Plugin {
         }
         this.resizeDelta =
             x - this.startX + (!this.j.o.iframe ? 0 : workplacePosition.left);
-        this.resizeHandler.style.left =
-            x - (this.j.o.iframe ? 0 : workplacePosition.left) + 'px';
+        css(this.resizeHandler, 'left', x - (this.j.o.iframe ? 0 : workplacePosition.left) + 'px');
         const sel = this.j.s.sel;
         sel && sel.removeAllRanges();
     }
@@ -39385,16 +39588,15 @@ class resizeCells extends Plugin {
         const needChangeWidth = this.isRTL ? !rightSide : rightSide;
         // right side
         if (needChangeWidth) {
-            this.workTable.style.width =
-                ((width + delta) / parentWidth) * 100 + '%';
+            css(this.workTable, 'width', ((width + delta) / parentWidth) * 100 + '%');
         }
         else {
             const side = this.isRTL ? 'marginRight' : 'marginLeft';
             const margin = parseInt(this.j.ew.getComputedStyle(this.workTable)[side] || '0', 10);
-            this.workTable.style.width =
-                ((width - delta) / parentWidth) * 100 + '%';
-            this.workTable.style[side] =
-                ((margin + delta) / parentWidth) * 100 + '%';
+            css(this.workTable, {
+                width: ((width - delta) / parentWidth) * 100 + '%',
+                [side]: ((margin + delta) / parentWidth) * 100 + '%'
+            });
         }
     }
     /**
@@ -39418,11 +39620,10 @@ class resizeCells extends Plugin {
             return;
         }
         const workplacePosition = offset(this.j.workplace, this.j, this.j.od, true), parentBox = offset(table, this.j, this.j.ed);
-        this.resizeHandler.style.left =
-            (offsetX <= NEARBY ? box.left : box.left + box.width) -
-                workplacePosition.left +
-                delta +
-                'px';
+        css(this.resizeHandler, 'left', (offsetX <= NEARBY ? box.left : box.left + box.width) -
+            workplacePosition.left +
+            delta +
+            'px');
         Object.assign(this.resizeHandler.style, {
             height: parentBox.height + 'px',
             top: parentBox.top - workplacePosition.top + 'px'
@@ -39455,7 +39656,7 @@ class resizeCells extends Plugin {
             const parent = Dom.up(this.workCell, (elm) => Dom.isTag(elm, 'table'), editor.editor);
             if (parent) {
                 const parentBox = parent.getBoundingClientRect();
-                this.resizeHandler.style.top = parentBox.top + 'px';
+                css(this.resizeHandler, 'top', parentBox.top + 'px');
             }
         })
             .on('beforeSetMode.resize-cells', () => {
@@ -39552,7 +39753,7 @@ function tableKeyboardNavigation(editor) {
                 if (!next) {
                     tableModule.appendRow(table, !isPrev
                         ? false
-                        : table.querySelector('tr'), !isPrev);
+                        : Dom.first(table, node => Dom.isTag(node, 'tr')), !isPrev);
                     next = getNextCell();
                 }
                 break;
@@ -39581,7 +39782,7 @@ function tableKeyboardNavigation(editor) {
         editor.e.fire('hidePopup hideResizer');
         if (!next.firstChild) {
             const first = editor.createInside.element('br');
-            next.appendChild(first);
+            Dom.append(next, first);
             editor.s.setCursorBefore(first);
         }
         else {
@@ -39869,7 +40070,10 @@ function allowAttributes(jodit, nodeElm, hadEffect, allow) {
                 hadEffect = true;
             }
             removeAttrs.forEach(attr => {
-                nodeElm.removeAttribute(attr);
+                // `attrRaw` on purpose: the sanitizer must remove exactly the
+                // attribute name from the live list, without the `attr()`
+                // helper name normalization
+                attrRaw(nodeElm, attr, null);
             });
         }
     }
@@ -39933,7 +40137,7 @@ function fillEmptyParagraph(jodit, nodeElm, hadEffect) {
         Dom.isEmpty(nodeElm, INSEPARABLE_TAGS) &&
         !Dom.isTag(nodeElm, TABLE_CONTAINER_TAGS)) {
         const br = jodit.createInside.element('br');
-        nodeElm.appendChild(br);
+        Dom.append(nodeElm, br);
         return true;
     }
     return hadEffect;
@@ -39949,7 +40153,13 @@ function fillEmptyParagraph(jodit, nodeElm, hadEffect) {
  */
 function removeEmptyTextNode(jodit, node, hadEffect, arg, argi, currentNode) {
     if (Dom.isText(node) && !node.nodeValue) {
-        if (node === currentNode && jodit.s.isCollapsed()) {
+        // Restore the caret only while the editor owns focus. The walker runs
+        // asynchronously, so the user may have already tabbed away — moving the
+        // selection here would call `focus()` and steal focus back from the
+        // element the user navigated to (e.g. Shift+Tab accessibility flow).
+        if (node === currentNode &&
+            jodit.s.isFocused() &&
+            jodit.s.isCollapsed()) {
             jodit.s.setCursorAfter(node);
         }
         Dom.safeRemove(node);
@@ -39978,7 +40188,10 @@ function removeInvTextNodes(jodit, node, hadEffect, arg, argi, currentNode) {
         return hadEffect;
     }
     node.nodeValue = node.nodeValue.replace(INVISIBLE_SPACE_REG_EXP(), '');
-    if (node === currentNode && jodit.s.isCollapsed()) {
+    // Same guard as in `removeEmptyTextNode`: the walker is asynchronous, so
+    // never move the selection (it re-focuses the editor) once the user has
+    // moved focus elsewhere.
+    if (node === currentNode && jodit.s.isFocused() && jodit.s.isCollapsed()) {
         jodit.s.setCursorAfter(node);
     }
     if (!node.nodeValue) {
@@ -40591,7 +40804,7 @@ Config.prototype.controls.print = {
             height: 0,
             border: 0
         });
-        getContainer(editor, Config).appendChild(iframe);
+        Dom.append(getContainer(editor, Config), iframe);
         const afterFinishPrint = () => {
             editor.e.off(editor.ow, 'mousemove', afterFinishPrint);
             Dom.safeRemove(iframe);
@@ -40620,7 +40833,7 @@ Config.prototype.controls.print = {
 							-webkit-print-color-adjust: exact;
 					}
 			}`;
-            myWindow.document.head.appendChild(style);
+            Dom.append(myWindow.document.head, style);
             myWindow.focus();
             myWindow.print();
         }
@@ -40794,7 +41007,7 @@ class AceEditor extends SourceEditor {
                 return;
             }
             const fakeMirror = this.j.c.div('jodit-source__mirror-fake');
-            this.container.appendChild(fakeMirror);
+            Dom.append(this.container, fakeMirror);
             const ace = editor.ow.ace;
             this.instance = ace.edit(fakeMirror);
             if (editor.o.direction === 'rtl') {
@@ -40951,8 +41164,8 @@ class TextAreaEditor extends SourceEditor {
     constructor() {
         super(...arguments);
         this.autosize = this.j.async.debounce(() => {
-            this.instance.style.height = 'auto';
-            this.instance.style.height = this.instance.scrollHeight + 'px';
+            css(this.instance, 'height', 'auto');
+            css(this.instance, 'height', this.instance.scrollHeight);
         }, this.j.defaultTimeout, true);
     }
     init(editor) {
@@ -40960,7 +41173,7 @@ class TextAreaEditor extends SourceEditor {
             class: 'jodit-source__mirror',
             dir: editor.o.direction === 'rtl' ? 'rtl' : undefined
         });
-        this.container.appendChild(this.instance);
+        Dom.append(this.container, this.instance);
         editor.e
             .on(this.instance, 'mousedown keydown touchstart input', editor.async.debounce(this.toWYSIWYG, editor.defaultTimeout))
             .on('setMinHeight.source', (minHeightD) => {
@@ -41288,9 +41501,9 @@ class source extends Plugin {
     /** @override */
     afterInit(editor) {
         this.mirrorContainer = editor.c.div('jodit-source');
-        editor.workplace.appendChild(this.mirrorContainer);
+        Dom.append(editor.workplace, this.mirrorContainer);
         editor.e.on('afterAddPlace changePlace afterInit', () => {
-            editor.workplace.appendChild(this.mirrorContainer);
+            Dom.append(editor.workplace, this.mirrorContainer);
         });
         this.sourceEditor = createSourceEditor('area', editor, this.mirrorContainer, this.toWYSIWYG, this.fromWYSIWYG);
         editor.e.on(editor.ow, 'keydown', (e) => {