jodit-pro-react 5.5.62 → 5.5.63

package/build/esm/JoditEditor.css

@@ -5168,15 +5168,20 @@ svg.jodit-icon {
   --jd-slot-left-width:auto;
   --jd-slot-right-width:auto;
 }
+.jodit .jodit-jodit__workplace-slot_above_true,
 .jodit .jodit-jodit__workplace-slot_bottom_true,
 .jodit .jodit-jodit__workplace-slot_top_true {
   flex: 0 0 auto;
   min-width: 0;
 }
+.jodit .jodit-jodit__workplace-slot_above_true:empty,
 .jodit .jodit-jodit__workplace-slot_bottom_true:empty,
 .jodit .jodit-jodit__workplace-slot_top_true:empty {
   display: none;
 }
+.jodit .jodit-jodit__workplace-slot_above_true:not(:empty) {
+  border-bottom: 1px solid var(--jd-color-border,transparent);
+}
 .jodit .jodit-jodit__workplace-slot_top_true {
   height: var(--jd-slot-top-height);
 }

package/build/esm/JoditEditor.mjs

@@ -1,6 +1,6 @@
 import {
   JoditEditor_default
-} from "./chunk-OEDI6O5S.mjs";
+} from "./chunk-G4TUESYO.mjs";
 export {
   JoditEditor_default as default
 };

package/build/esm/{chunk-OEDI6O5S.mjs → chunk-G4TUESYO.mjs}

@@ -193,7 +193,7 @@ var APP_VERSION, ES, IS_ES_MODERN, IS_ES_NEXT, IS_PROD, IS_TEST, FAT_MODE, HOMEP
 var init_constants = __esm({
   "node_modules/jodit/esm/core/constants.js"() {
     "use strict";
-    APP_VERSION = "4.12.44";
+    APP_VERSION = "4.13.3";
     ES = "es2020";
     IS_ES_MODERN = true;
     IS_ES_NEXT = true;
@@ -11594,9 +11594,24 @@ var ViewWithToolbar = class extends View {
     if (!this.o.fullsize && (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
    */
@@ -18810,6 +18825,130 @@ var Selection = class {
     }
     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 _a2, _b, _c, _d, _e2, _f, _g, _h;
+    let { startContainer, endContainer } = range;
+    let { startOffset, endOffset } = range;
+    if (Dom.isText(endContainer) && endOffset > 0 && endOffset < ((_b = (_a2 = endContainer.nodeValue) === null || _a2 === void 0 ? void 0 : _a2.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 = (_e2 = startContainer.nodeValue) === null || _e2 === void 0 ? void 0 : _e2.length) !== null && _f !== void 0 ? _f : 0)) {
+      const middle = startContainer.splitText(startOffset);
+      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);
+    this.__normalizeRangeBoundary(range, true);
+    this.__normalizeRangeBoundary(range, false);
+  }
+  __normalizeRangeBoundary(range, atStart) {
+    var _a2, _b;
+    const container = atStart ? range.startContainer : range.endContainer;
+    if (!Dom.isText(container)) {
+      return;
+    }
+    const offset2 = atStart ? range.startOffset : range.endOffset;
+    const length = (_b = (_a2 = container.nodeValue) === null || _a2 === void 0 ? void 0 : _a2.length) !== null && _b !== void 0 ? _b : 0;
+    if (offset2 === 0) {
+      atStart ? range.setStartBefore(container) : range.setEndBefore(container);
+    } else if (offset2 >= 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 _a2;
+    const font2 = this.j.createInside.element("font");
+    const [first] = run;
+    (_a2 = first.parentNode) === null || _a2 === void 0 ? void 0 : _a2.insertBefore(font2, first);
+    run.forEach((node) => font2.appendChild(node));
+    return font2;
+  }
   /**
    * Wrap all selected fragments inside Tag or apply some callback
    */
@@ -18824,19 +18963,7 @@ var Selection = class {
       Dom.unwrap(font2);
       return;
     }
-    $$("*[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 font2 of elms) {
       const { firstChild, lastChild } = font2;
       if (firstChild && firstChild === lastChild && isMarker(firstChild)) {
@@ -33373,6 +33500,9 @@ var Jodit2 = Jodit_1 = class Jodit3 extends ViewWithToolbar {
       element.style.display = "none";
     }
     const SLOT = "workplace-slot";
+    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);
@@ -33405,6 +33535,7 @@ var Jodit2 = Jodit_1 = class Jodit3 extends ViewWithToolbar {
       container,
       workplace,
       slots: {
+        above: aboveSlot,
         top: topSlot,
         bottom: bottomPanel,
         center: centerSlot,

package/build/esm/index.css

@@ -5168,15 +5168,20 @@ svg.jodit-icon {
   --jd-slot-left-width:auto;
   --jd-slot-right-width:auto;
 }
+.jodit .jodit-jodit__workplace-slot_above_true,
 .jodit .jodit-jodit__workplace-slot_bottom_true,
 .jodit .jodit-jodit__workplace-slot_top_true {
   flex: 0 0 auto;
   min-width: 0;
 }
+.jodit .jodit-jodit__workplace-slot_above_true:empty,
 .jodit .jodit-jodit__workplace-slot_bottom_true:empty,
 .jodit .jodit-jodit__workplace-slot_top_true:empty {
   display: none;
 }
+.jodit .jodit-jodit__workplace-slot_above_true:not(:empty) {
+  border-bottom: 1px solid var(--jd-color-border,transparent);
+}
 .jodit .jodit-jodit__workplace-slot_top_true {
   height: var(--jd-slot-top-height);
 }

package/build/esm/index.mjs

@@ -2,7 +2,7 @@ import {
   Config,
   JoditEditor_default,
   n
-} from "./chunk-OEDI6O5S.mjs";
+} from "./chunk-G4TUESYO.mjs";
 
 // src/index.ts
 var index_default = JoditEditor_default;