jodit 4.13.26 → 4.14.0

package/esm/core/selection/selection.js

@@ -196,11 +196,13 @@ export 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-' + consts.MARKER_CLASS, atStart ? 'start' : 'end');
-        marker.appendChild(this.j.createInside.text(consts.INVISIBLE_SPACE));
+        Dom.append(marker, this.j.createInside.text(consts.INVISIBLE_SPACE));
         if (newRange) {
             if (Dom.isOrContains(this.area, atStart ? newRange.startContainer : newRange.endContainer)) {
                 // Here need do unsafe inserting
@@ -216,9 +218,11 @@ export class Selection {
      */
     restore() {
         let range = false;
-        const markAttr = (start) => `span[data-${consts.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-' + consts.MARKER_CLASS) ===
+                (start ? 'start' : 'end');
+        const start = Dom.first(this.area, markerFilter(true));
+        const end = Dom.first(this.area, markerFilter(false));
         if (!start) {
             return;
         }
@@ -472,7 +476,7 @@ export 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,
@@ -486,7 +490,7 @@ export class Selection {
                 });
             }
             else {
-                this.area.appendChild(node);
+                Dom.append(this.area, node);
             }
             const setCursor = (node) => {
                 if (Dom.isBlock(node)) {
@@ -540,7 +544,7 @@ export 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) {
@@ -549,9 +553,7 @@ export 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();
@@ -566,7 +568,7 @@ export 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();
@@ -584,8 +586,10 @@ export 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);
         };
@@ -674,7 +678,7 @@ export class Selection {
                 }
                 else {
                     const currentB = this.j.createInside.text(INVISIBLE_SPACE);
-                    current.appendChild(currentB);
+                    Dom.append(current, currentB);
                     current = currentB;
                 }
             }
@@ -825,7 +829,7 @@ export class Selection {
         if (!start) {
             const fakeNode = this.j.createInside.text(consts.INVISIBLE_SPACE);
             if (!Dom.isTag(last, INSEPARABLE_TAGS)) {
-                last.appendChild(fakeNode);
+                Dom.append(last, fakeNode);
                 last = fakeNode;
             }
             else {
@@ -893,7 +897,7 @@ export 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 '';
@@ -1033,11 +1037,10 @@ export 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;
     }
     /**
@@ -1048,7 +1051,7 @@ export 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);
@@ -1183,7 +1186,7 @@ export 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);
@@ -1197,9 +1200,9 @@ export 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);

package/esm/core/selection/style/api/get-suit-parent.js

@@ -15,6 +15,7 @@ import { isSuitElement } from "./is-suit-element.js";
  * @private
  */
 export function getSuitParent(style, node, root) {
+    var _a;
     const { parentNode } = node;
     if (parentNode === root ||
         !Dom.isHTMLElement(parentNode) ||
@@ -28,6 +29,15 @@ export 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;

package/esm/core/selection/style/api/is-same-attributes.js

@@ -6,6 +6,7 @@
 import { size } from "../../../helpers/size/object-size.js";
 import { attr } from "../../../helpers/utils/index.js";
 import { assert } from "../../../helpers/utils/assert.js";
+import { attrRaw } from "../../../helpers/utils/attr.js";
 import { hasSameStyle } from "./has-same-style.js";
 /**
  * Checks that every attribute from `attrs` is present on the element with
@@ -30,6 +31,8 @@ export function isSameAttributes(elm, attrs) {
 }
 export 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));
 }

package/esm/core/selection/style/api/toggle-attributes.js

@@ -9,9 +9,8 @@ import { getContainer } from "../../../global.js";
 import { isBoolean, isNumber, isPlainObject, isString } from "../../../helpers/checker/index.js";
 import { normalizeCssValue } from "../../../helpers/normalize/normalize-css-value.js";
 import { size } from "../../../helpers/size/object-size.js";
-import { kebabCase } from "../../../helpers/string/kebab-case.js";
 import { assert, attr } from "../../../helpers/utils/index.js";
-import { css } from "../../../helpers/utils/css.js";
+import { css, cssInline } from "../../../helpers/utils/css.js";
 import { dataBind } from "../../../helpers/utils/data-bind.js";
 import { _PREFIX, CHANGE, UNSET, UNWRAP } from "../constants.js";
 const tak = 'toggleAttributes';
@@ -47,7 +46,7 @@ export function toggleAttributes(commitStyle, elm, jodit, mode, dry = false) {
 function toggleStyle(commitStyle, jodit, style, elm, dry, mode) {
     assert(isPlainObject(style) && size(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;
@@ -140,8 +139,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);
@@ -157,11 +156,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;

package/esm/core/selection/style/api/wrap-unwrapped-text.js

@@ -40,12 +40,12 @@ export 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;

package/esm/core/traits/elms.js

@@ -3,18 +3,26 @@
  * Released under MIT see LICENSE.txt in the project root for license information.
  * Copyright (c) 2013-2026 Valerii Chupurnov. All rights reserved. https://xdsoft.net
  */
-import { toArray } from "../helpers/array/to-array.js";
+import { Dom } from "../dom/dom.js";
 export 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;
     }
 }

package/esm/core/ui/button/button/button.js

@@ -142,7 +142,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
@@ -168,8 +168,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) {

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

@@ -14,6 +14,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { component } from "../../../decorators/component/component.js";
+import { Dom } from "../../../dom/dom.js";
 import { assert } from "../../../helpers/utils/assert.js";
 import { UIButton } from "../button/button.js";
 import { UIGroup } from "../../group/group.js";
@@ -33,7 +34,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

package/esm/core/ui/button/tooltip/tooltip.js

@@ -64,7 +64,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
@@ -174,7 +174,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: -5000
             });

package/esm/core/ui/element.js

@@ -98,7 +98,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;
     }
     /**

package/esm/core/ui/form/inputs/area/area.js

@@ -16,6 +16,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 var UITextArea_1;
 import { watch } from "../../../../decorators/index.js";
 import { component } from "../../../../decorators/component/component.js";
+import { css } from "../../../../helpers/utils/css.js";
 import { UIInput } from "../input/input.js";
 let UITextArea = UITextArea_1 = class UITextArea extends UIInput {
     /** @override */
@@ -31,12 +32,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;
     }
 };

package/esm/core/ui/form/inputs/file/file.js

@@ -14,6 +14,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { component } from "../../../../decorators/component/component.js";
+import { Dom } from "../../../../dom/dom.js";
 import { UIButton } from "../../../button/button/button.js";
 import { UIInput } from "../input/input.js";
 let UIFileInput = class UIFileInput extends UIInput {
@@ -35,7 +36,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) {

package/esm/core/ui/form/inputs/input/input.js

@@ -83,7 +83,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() {
@@ -125,11 +125,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, '');
         }
     }
@@ -142,8 +142,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;
     }

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

@@ -81,7 +81,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);
@@ -99,14 +99,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);
         }
     }
     /**

package/esm/core/ui/icon.js

@@ -80,9 +80,9 @@ export 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));

package/esm/core/ui/popup/popup.js

@@ -19,6 +19,7 @@ import { Dom } from "../../dom/dom.js";
 import { eventEmitter, getContainer } from "../../global.js";
 import { attr, css, getFixedPositionOffset, isFunction, isString, kebabCase, markOwner, position, ucfirst } from "../../helpers/index.js";
 import { assert } from "../../helpers/utils/assert.js";
+import { cssInline } from "../../helpers/utils/css.js";
 import { UIElement } from "../element.js";
 import { UIGroup } from "../group/group.js";
 const EVENTS_FOR_AUTOCLOSE = [
@@ -35,7 +36,7 @@ export 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)) {
@@ -85,12 +86,12 @@ export 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();
@@ -99,11 +100,11 @@ export 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;
@@ -119,8 +120,9 @@ export 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) {
@@ -325,7 +327,7 @@ export 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);

package/esm/core/ui/progress-bar/progress-bar.js

@@ -27,7 +27,7 @@ export 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() {
@@ -35,7 +35,7 @@ export 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) {
@@ -59,10 +59,9 @@ export class ProgressBar extends UIElement {
             left: pos.left + start.x,
             top: pos.top + start.y
         });
-        box.appendChild(el);
+        Dom.append(box, el);
         this.__animationElement = el;
         // Force reflow before starting transition
-        // eslint-disable-next-line no-unused-expressions
         el.offsetWidth;
         css(el, {
             left: pos.left + end.x,

package/esm/core/view/view-with-toolbar.js

@@ -50,7 +50,7 @@ export 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);
         }
     }
     /**

package/esm/core/view/view.js

@@ -246,7 +246,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