jodit 4.12.44 → 4.13.3

package/es5/plugins/debug/debug.css

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

package/es5/plugins/debug/debug.js

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

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

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

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

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

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

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

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

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

package/es5/polyfills.fat.min.js

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

package/es5/polyfills.js

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

package/es5/polyfills.min.js

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

package/esm/core/constants.js

@@ -3,7 +3,7 @@
  * Released under MIT see LICENSE.txt in the project root for license information.
  * Copyright (c) 2013-2026 Valerii Chupurnov. All rights reserved. https://xdsoft.net
  */
-export const APP_VERSION = "4.12.44";
+export const APP_VERSION = "4.13.3";
 // prettier-ignore
 export const ES = "es2020";
 export const IS_ES_MODERN = true;

package/esm/core/selection/selection.d.ts

@@ -224,6 +224,37 @@ export declare class Selection implements ISelect {
      * ```
      */
     get html(): string;
+    /**
+     * Splits the boundaries of the current selection and wraps every
+     * contiguous run of selected inline content (grouped by block) into a
+     * `<font>` element, returning those wrappers in document order.
+     *
+     * This is a pure-DOM replacement for the old
+     * `nativeExecCommand('fontsize', false, '7')` trick which relied on the
+     * browser to split the selection into `<font size="7">` fragments.
+     */
+    private __wrapSelectionFragments;
+    /**
+     * Splits the text nodes at both ends of the range so that its boundaries
+     * always fall between nodes. Afterwards every node inside the range is
+     * fully (not partially) selected.
+     */
+    private __splitSelectionBoundaries;
+    private __normalizeRangeBoundary;
+    /**
+     * Collects the highest-level nodes that are completely inside the range,
+     * descending into nodes that are only partially selected.
+     */
+    private __collectContainedNodes;
+    private __isFullyContained;
+    /**
+     * Wraps every contiguous run of selected inline siblings into a `<font>`
+     * element. Block-level nodes are never wrapped themselves - their inline
+     * content is wrapped instead, keeping every `<font>` inside a single block.
+     */
+    private __wrapSelectionRuns;
+    private __isOrContainsBlock;
+    private __wrapRunInFont;
     /**
      * Wrap all selected fragments inside Tag or apply some callback
      */

package/esm/core/selection/selection.js

@@ -898,6 +898,148 @@ export class Selection {
         }
         return '';
     }
+    /**
+     * Splits the boundaries of the current selection and wraps every
+     * contiguous run of selected inline content (grouped by block) into a
+     * `<font>` element, returning those wrappers in document order.
+     *
+     * This is a pure-DOM replacement for the old
+     * `nativeExecCommand('fontsize', false, '7')` trick which relied on the
+     * browser to split the selection into `<font size="7">` fragments.
+     */
+    __wrapSelectionFragments() {
+        const range = this.range;
+        this.__splitSelectionBoundaries(range);
+        let root = range.commonAncestorContainer;
+        if (Dom.isText(root)) {
+            root = root.parentNode;
+        }
+        if (!root) {
+            return [];
+        }
+        return this.__wrapSelectionRuns(this.__collectContainedNodes(root, range));
+    }
+    /**
+     * Splits the text nodes at both ends of the range so that its boundaries
+     * always fall between nodes. Afterwards every node inside the range is
+     * fully (not partially) selected.
+     */
+    __splitSelectionBoundaries(range) {
+        var _a, _b, _c, _d, _e, _f, _g, _h;
+        let { startContainer, endContainer } = range;
+        let { startOffset, endOffset } = range;
+        if (Dom.isText(endContainer) &&
+            endOffset > 0 &&
+            endOffset < ((_b = (_a = endContainer.nodeValue) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0)) {
+            endContainer.splitText(endOffset);
+            endOffset = (_d = (_c = endContainer.nodeValue) === null || _c === void 0 ? void 0 : _c.length) !== null && _d !== void 0 ? _d : endOffset;
+        }
+        if (Dom.isText(startContainer) &&
+            startOffset > 0 &&
+            startOffset < ((_f = (_e = startContainer.nodeValue) === null || _e === void 0 ? void 0 : _e.length) !== null && _f !== void 0 ? _f : 0)) {
+            const middle = startContainer.splitText(startOffset);
+            // Selection located inside a single text node - the tail we just
+            // cut off is the actual selected fragment.
+            if (startContainer === endContainer) {
+                endContainer = middle;
+                endOffset = (_h = (_g = middle.nodeValue) === null || _g === void 0 ? void 0 : _g.length) !== null && _h !== void 0 ? _h : 0;
+            }
+            startContainer = middle;
+            startOffset = 0;
+        }
+        range.setStart(startContainer, startOffset);
+        range.setEnd(endContainer, endOffset);
+        // Normalize text-edge boundaries (e.g. `(text, 0)` or `(text, length)`)
+        // to the element level so that containment checks based on
+        // `selectNode()` treat a fully selected text node as contained.
+        this.__normalizeRangeBoundary(range, true);
+        this.__normalizeRangeBoundary(range, false);
+    }
+    __normalizeRangeBoundary(range, atStart) {
+        var _a, _b;
+        const container = atStart ? range.startContainer : range.endContainer;
+        if (!Dom.isText(container)) {
+            return;
+        }
+        const offset = atStart ? range.startOffset : range.endOffset;
+        const length = (_b = (_a = container.nodeValue) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0;
+        if (offset === 0) {
+            atStart
+                ? range.setStartBefore(container)
+                : range.setEndBefore(container);
+        }
+        else if (offset >= length) {
+            atStart
+                ? range.setStartAfter(container)
+                : range.setEndAfter(container);
+        }
+    }
+    /**
+     * Collects the highest-level nodes that are completely inside the range,
+     * descending into nodes that are only partially selected.
+     */
+    __collectContainedNodes(root, range) {
+        const result = [];
+        toArray(root.childNodes).forEach(child => {
+            if (this.__isFullyContained(range, child)) {
+                result.push(child);
+            }
+            else if (child.childNodes.length && range.intersectsNode(child)) {
+                result.push(...this.__collectContainedNodes(child, range));
+            }
+        });
+        return result;
+    }
+    __isFullyContained(range, node) {
+        const nodeRange = this.createRange();
+        nodeRange.selectNode(node);
+        return (range.compareBoundaryPoints(Range.START_TO_START, nodeRange) <= 0 &&
+            range.compareBoundaryPoints(Range.END_TO_END, nodeRange) >= 0);
+    }
+    /**
+     * Wraps every contiguous run of selected inline siblings into a `<font>`
+     * element. Block-level nodes are never wrapped themselves - their inline
+     * content is wrapped instead, keeping every `<font>` inside a single block.
+     */
+    __wrapSelectionRuns(nodes) {
+        const fonts = [];
+        let run = [];
+        const flush = () => {
+            if (run.length) {
+                fonts.push(this.__wrapRunInFont(run));
+                run = [];
+            }
+        };
+        nodes.forEach(node => {
+            if (Dom.isElement(node) && this.__isOrContainsBlock(node)) {
+                flush();
+                fonts.push(...this.__wrapSelectionRuns(toArray(node.childNodes)));
+            }
+            else {
+                if (run.length &&
+                    run[run.length - 1].parentNode !== node.parentNode) {
+                    flush();
+                }
+                run.push(node);
+            }
+        });
+        flush();
+        return fonts;
+    }
+    __isOrContainsBlock(node) {
+        if (Dom.isBlock(node)) {
+            return true;
+        }
+        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));
+        return font;
+    }
     /**
      * Wrap all selected fragments inside Tag or apply some callback
      */
@@ -912,20 +1054,7 @@ export class Selection {
             Dom.unwrap(font);
             return;
         }
-        // fix issue https://github.com/xdan/jodit/issues/65
-        $$('*[style*=font-size]', this.area).forEach(elm => {
-            attr(elm, 'data-font-size', elm.style.fontSize.toString());
-            elm.style.removeProperty('font-size');
-        });
-        this.j.nativeExecCommand('fontsize', false, '7');
-        $$('*[data-font-size]', this.area).forEach(elm => {
-            const fontSize = attr(elm, 'data-font-size');
-            if (fontSize) {
-                elm.style.fontSize = fontSize;
-                attr(elm, 'data-font-size', null);
-            }
-        });
-        const elms = $$('font[size="7"]', this.area);
+        const elms = this.__wrapSelectionFragments();
         for (const font of elms) {
             const { firstChild, lastChild } = font;
             if (firstChild &&

package/esm/core/view/view-with-toolbar.d.ts

@@ -16,6 +16,12 @@ export declare abstract class ViewWithToolbar extends View implements IViewWithT
      * Container for toolbar
      */
     get toolbarContainer(): HTMLElement;
+    /**
+     * Keep the toolbar box as the first child of the container, except that
+     * children flagged with `data-jodit-above-toolbar` (e.g. the `above`
+     * workplace slot used for presence bars and banners) stay above it.
+     */
+    private __appendToolbarBox;
     /**
      * Change panel container
      */

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

@@ -33,10 +33,26 @@ export class ViewWithToolbar extends View {
             (isString(this.o.toolbar) || Dom.isHTMLElement(this.o.toolbar))) {
             return resolveElement(this.o.toolbar, this.o.shadowRoot || this.od);
         }
-        this.o.toolbar &&
-            Dom.appendChildFirst(this.container, this.__defaultToolbarContainer);
+        this.o.toolbar && this.__appendToolbarBox();
         return this.__defaultToolbarContainer;
     }
+    /**
+     * Keep the toolbar box as the first child of the container, except that
+     * children flagged with `data-jodit-above-toolbar` (e.g. the `above`
+     * workplace slot used for presence bars and banners) stay above it.
+     */
+    __appendToolbarBox() {
+        const box = this.__defaultToolbarContainer;
+        let anchor = this.container.firstElementChild;
+        while (anchor &&
+            anchor !== box &&
+            anchor.hasAttribute('data-jodit-above-toolbar')) {
+            anchor = anchor.nextElementSibling;
+        }
+        if (anchor !== box) {
+            this.container.insertBefore(box, anchor);
+        }
+    }
     /**
      * Change panel container
      */

package/esm/jodit.js

@@ -1016,6 +1016,12 @@ let Jodit = Jodit_1 = class Jodit extends ViewWithToolbar {
             element.style.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', '');
+        Dom.appendChildFirst(container, aboveSlot);
         const topSlot = this.c.div(this.getFullElName(SLOT, 'top'), NOEDIT);
         container.appendChild(topSlot);
         const centerSlot = this.c.div(this.getFullElName(SLOT, 'center'), NOEDIT);
@@ -1048,6 +1054,7 @@ let Jodit = Jodit_1 = class Jodit extends ViewWithToolbar {
             container,
             workplace,
             slots: {
+                above: aboveSlot,
                 top: topSlot,
                 bottom: bottomPanel,
                 center: centerSlot,

package/esm/types/jodit.d.ts

@@ -18,6 +18,8 @@ interface IWorkPlace {
     container: HTMLDivElement;
     workplace: HTMLDivElement;
     slots: {
+        /** Sits above the toolbar (presence bars, banners). */
+        above: HTMLDivElement;
         top: HTMLDivElement;
         bottom: HTMLDivElement;
         center: HTMLDivElement;

package/package.json

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

package/types/core/selection/selection.d.ts

@@ -224,6 +224,37 @@ export declare class Selection implements ISelect {
      * ```
      */
     get html(): string;
+    /**
+     * Splits the boundaries of the current selection and wraps every
+     * contiguous run of selected inline content (grouped by block) into a
+     * `<font>` element, returning those wrappers in document order.
+     *
+     * This is a pure-DOM replacement for the old
+     * `nativeExecCommand('fontsize', false, '7')` trick which relied on the
+     * browser to split the selection into `<font size="7">` fragments.
+     */
+    private __wrapSelectionFragments;
+    /**
+     * Splits the text nodes at both ends of the range so that its boundaries
+     * always fall between nodes. Afterwards every node inside the range is
+     * fully (not partially) selected.
+     */
+    private __splitSelectionBoundaries;
+    private __normalizeRangeBoundary;
+    /**
+     * Collects the highest-level nodes that are completely inside the range,
+     * descending into nodes that are only partially selected.
+     */
+    private __collectContainedNodes;
+    private __isFullyContained;
+    /**
+     * Wraps every contiguous run of selected inline siblings into a `<font>`
+     * element. Block-level nodes are never wrapped themselves - their inline
+     * content is wrapped instead, keeping every `<font>` inside a single block.
+     */
+    private __wrapSelectionRuns;
+    private __isOrContainsBlock;
+    private __wrapRunInFont;
     /**
      * Wrap all selected fragments inside Tag or apply some callback
      */

package/types/core/view/view-with-toolbar.d.ts

@@ -16,6 +16,12 @@ export declare abstract class ViewWithToolbar extends View implements IViewWithT
      * Container for toolbar
      */
     get toolbarContainer(): HTMLElement;
+    /**
+     * Keep the toolbar box as the first child of the container, except that
+     * children flagged with `data-jodit-above-toolbar` (e.g. the `above`
+     * workplace slot used for presence bars and banners) stay above it.
+     */
+    private __appendToolbarBox;
     /**
      * Change panel container
      */

package/types/types/jodit.d.ts

@@ -18,6 +18,8 @@ interface IWorkPlace {
     container: HTMLDivElement;
     workplace: HTMLDivElement;
     slots: {
+        /** Sits above the toolbar (presence bars, banners). */
+        above: HTMLDivElement;
         top: HTMLDivElement;
         bottom: HTMLDivElement;
         center: HTMLDivElement;