jodit 4.18.9 → 4.18.11

package/esm/plugins/backspace/cases/check-join-neighbors.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
  */
-import { INSEPARABLE_TAGS, LIST_TAGS } from "../../../core/constants.js";
+import { INSEPARABLE_TAGS, LIST_TAGS, NO_EMPTY_TAGS } from "../../../core/constants.js";
 import { Dom } from "../../../core/dom/dom.js";
 import { getMoveFilter } from "../helpers.js";
 /**
@@ -11,6 +11,12 @@ import { getMoveFilter } from "../helpers.js";
  * @private
  */
 export function checkJoinNeighbors(jodit, fakeNode, backspace) {
+    return joinNeighbors(jodit, fakeNode, backspace, false);
+}
+/**
+ * `moved` is set on the one re-entrant pass after `moveToNextLine`
+ */
+function joinNeighbors(jodit, fakeNode, backspace, moved) {
     if (checkJoinBareText(jodit, fakeNode, backspace)) {
         return true;
     }
@@ -29,6 +35,9 @@ export function checkJoinNeighbors(jodit, fakeNode, backspace) {
             return false;
         }
         const sibling = Dom.findNotEmptySibling(mainClosestBox, backspace);
+        if (moveInlinesInside(jodit, fakeNode, sibling)) {
+            return joinNeighbors(jodit, fakeNode, backspace, moved);
+        }
         // A line break before the cursor is a single unit: remove it instead of
         // merging the current element into the (void) `<br>`, which used to move
         // the whole element's content into the `<br>` and delete it (#1282).
@@ -43,7 +52,22 @@ export function checkJoinNeighbors(jodit, fakeNode, backspace) {
             jodit.s.setCursorBefore(fakeNode);
             return true;
         }
+        // A non-editable sibling is removed by remove-not-editable, never joined
+        if (Dom.isElement(sibling) &&
+            !Dom.isContentEditable(sibling, jodit.editor)) {
+            return false;
+        }
         const box = findCaretBox(fakeNode, mainClosestBox);
+        // One pass only: the line now sits beside the next one, so the
+        // cases below join them. The DOM has changed either way
+        if (!moved &&
+            sibling &&
+            moveToNextLine(jodit, fakeNode, box, sibling, backspace)) {
+            if (!joinNeighbors(jodit, fakeNode, backspace, true)) {
+                jodit.s.setCursorBefore(fakeNode);
+            }
+            return true;
+        }
         if (sibling &&
             (checkPullNextLine(jodit, fakeNode, box, sibling, backspace) ||
                 checkMoveListContent(jodit, box, sibling, backspace) ||
@@ -70,6 +94,66 @@ function findCaretBox(fakeNode, mainClosestBox) {
         ? block.parentElement
         : block;
 }
+/**
+ * With an inline element round the caret's line or the one it joins moved
+ * inside its blocks, the cases join the lines as they join any two, and its
+ * styles stay with its text. One round both lines is left as it is.
+ */
+function moveInlinesInside(jodit, fakeNode, sibling) {
+    if (!sibling) {
+        return false;
+    }
+    const around = Dom.furthest(fakeNode, node => Dom.isElement(node) &&
+        !Dom.isBlock(node) &&
+        !Dom.isOrContains(node, sibling), jodit.editor);
+    return (moveInlineInside(around, jodit.editor) ||
+        moveInlineInside(sibling, jodit.editor));
+}
+/**
+ * Old content can have an inline element round blocks. This moves it inside
+ * them, and gives the text, images and line breaks beside them a copy of
+ * their own: `<span style="…"><p>one</p><br><p>two</p></span>` becomes
+ * `<p><span style="…">one</span></p><span style="…"><br></span><p><span style="…">two</span></p>`
+ */
+function moveInlineInside(node, root) {
+    if (!Dom.isElement(node) || Dom.isBlock(node)) {
+        return false;
+    }
+    // Embedded content, such as the `<iframe>` in a video's wrapper, counts
+    // as a block in `Dom.isBlock`, but stays with the text beside it
+    const isBlock = (child) => Dom.isBlock(child) && !Dom.isTag(child, NO_EMPTY_TAGS);
+    // The inner one first: `<span><strong><p>one</p></strong></span>`
+    Array.from(node.childNodes).forEach(child => moveInlineInside(child, root));
+    const children = Array.from(node.childNodes);
+    if (!children.some(isBlock)) {
+        return false;
+    }
+    let run = null;
+    for (const child of children) {
+        if (!isBlock(child)) {
+            // Blank text between blocks stays where it is
+            if (!run && !Dom.isEmptyTextNode(child)) {
+                run = node.cloneNode(false);
+                Dom.before(child, run);
+            }
+            run && Dom.append(run, child);
+            continue;
+        }
+        run = null;
+        // Nothing goes inside a rule or a non-editable block
+        if (Dom.isTag(child, INSEPARABLE_TAGS) ||
+            !Dom.isContentEditable(child, root)) {
+            continue;
+        }
+        const inner = node.cloneNode(false);
+        Dom.moveContent(child, inner);
+        Dom.append(child, inner);
+        // A list or a table: on down to its items or cells
+        moveInlineInside(inner, root);
+    }
+    Dom.unwrap(node);
+    return true;
+}
 /**
  * The innermost block on the sibling's edge facing the caret, so the
  * content is joined to text: `<div><p>one</p></div><p>|two</p>` gives
@@ -109,6 +193,82 @@ function resolveTableSibling(sibling, backspace) {
     });
     return cells.length ? cells[backspace ? cells.length - 1 : 0] : null;
 }
+/**
+ * On Delete, Word joins two lines where the next one is, inside or outside
+ * its box or quote, and the joined line keeps the caret line's kind, list item
+ * or paragraph. Two paragraphs already join that way. When either line is a
+ * list item, this moves the caret's line beside the next one, and the usual
+ * cases then join them: `<p>one|</p><div><ul><li>two</li></ul></div>` becomes
+ * `<div><p>one|</p><ul><li>two</li></ul></div>`
+ * @private
+ */
+function moveToNextLine(jodit, fakeNode, box, sibling, backspace) {
+    if (backspace ||
+        Dom.isTag(sibling, 'table') ||
+        Dom.isTag(sibling, INSEPARABLE_TAGS) ||
+        !Dom.isContentEditable(sibling, jodit.editor)) {
+        return false;
+    }
+    const line = Dom.up(fakeNode, Dom.isBlock, box, true);
+    const next = findEdgeBlock(sibling, false, jodit.editor);
+    if (!line ||
+        !next ||
+        !Dom.isContentEditable(next, jodit.editor) ||
+        !(Dom.isLeaf(line) || Dom.isLeaf(next)) ||
+        // A paragraph inside a list item is left as it is
+        Dom.isLeaf(line.parentElement) ||
+        Dom.isLeaf(next.parentElement) ||
+        boxOf(line) === boxOf(next)) {
+        return false;
+    }
+    const from = line.parentElement;
+    if (Dom.isLeaf(line) && Dom.isLeaf(next)) {
+        Dom.before(next, line);
+    }
+    else if (Dom.isLeaf(line)) {
+        // A list item keeps its bullet, in a list of its own
+        Dom.before(next, ownList(line));
+    }
+    else {
+        // A paragraph can't go inside a list, so it goes in front of it
+        Dom.before(next.parentElement, line);
+    }
+    let remove = from;
+    while (remove && remove !== jodit.editor && Dom.isEmpty(remove)) {
+        const parent = remove.parentElement;
+        Dom.safeRemove(remove);
+        remove = parent;
+    }
+    return true;
+}
+/**
+ * The box or quote a line is in, past its lists
+ */
+function boxOf(line) {
+    let box = line.parentElement;
+    while (Dom.isList(box) || Dom.isLeaf(box)) {
+        box = box.parentElement;
+    }
+    return box;
+}
+/**
+ * Moves a list item into a list of its own, which carries on its numbering
+ */
+function ownList(item) {
+    const list = item.parentElement;
+    const own = list.cloneNode(false);
+    const index = Array.from(list.children).indexOf(item);
+    if (index) {
+        // Two lists cannot share one id
+        own.removeAttribute('id');
+        if (Dom.isTag(list, 'ol')) {
+            const start = parseInt(list.getAttribute('start') || '1', 10) || 1;
+            own.setAttribute('start', String(start + index));
+        }
+    }
+    Dom.append(own, item);
+    return own;
+}
 /**
  * Delete at the edge of a list pulls the next line up to the caret, as the
  * browsers do, instead of moving the caret's line into the next block:

package/esm/plugins/backspace/cases/check-remove-char.js

@@ -37,7 +37,9 @@ export function checkRemoveChar(jodit, fakeNode, backspace, mode, stopBeforeSpac
         while (Dom.isInlineBlock(sibling)) {
             sibling = (backspace ? sibling === null || sibling === void 0 ? void 0 : sibling.lastChild : sibling === null || sibling === void 0 ? void 0 : sibling.firstChild);
         }
-        if (!sibling) {
+        // A block inside an inline element, such as the `<p>` in
+        // `<span><p>…</p></span>`, isn't a char: the join cases handle it
+        if (!sibling || Dom.isBlock(sibling)) {
             break;
         }
         if ((_a = sibling.nodeValue) === null || _a === void 0 ? void 0 : _a.length) {

package/esm/plugins/backspace/cases/check-remove-content-not-editable.d.ts

@@ -8,7 +8,10 @@
  */
 import type { IJodit } from "../../../types/index";
 /**
- * Checks if a non-editable element can be deleted
+ * Checks if a non-editable element can be deleted. A non-editable block goes
+ * whole, and the lines either side of it then join, as the spec's tests do:
+ * `<ul><li>one|</li></ul><div contenteditable="false">x</div><p>two</p>`
+ * gives `<ul><li>one|two</li></ul>`
  * @private
  */
 export declare function checkRemoveContentNotEditable(jodit: IJodit, fakeNode: Text, backspace: boolean): boolean;

package/esm/plugins/backspace/cases/check-remove-content-not-editable.js

@@ -6,24 +6,52 @@
 import { Dom } from "../../../core/dom/index.js";
 import { call } from "../../../core/helpers/index.js";
 import { moveNodeInsideStart } from "../../../core/selection/helpers/index.js";
+import { checkJoinNeighbors } from "./check-join-neighbors.js";
 /**
- * Checks if a non-editable element can be deleted
+ * Checks if a non-editable element can be deleted. A non-editable block goes
+ * whole, and the lines either side of it then join, as the spec's tests do:
+ * `<ul><li>one|</li></ul><div contenteditable="false">x</div><p>two</p>`
+ * gives `<ul><li>one|two</li></ul>`
  * @private
  */
 export function checkRemoveContentNotEditable(jodit, fakeNode, backspace) {
-    let neighbor = Dom.findSibling(fakeNode, backspace);
-    if (!neighbor &&
-        fakeNode.parentElement &&
-        fakeNode.parentElement !== jodit.editor) {
-        neighbor = Dom.findSibling(fakeNode.parentElement, backspace);
+    let node = fakeNode;
+    let neighbor = Dom.findSibling(node, backspace);
+    // Past the edges of the blocks the caret is at, but not into a table cell
+    while (!neighbor &&
+        node.parentElement &&
+        node.parentElement !== jodit.editor &&
+        !Dom.isCell(node.parentElement)) {
+        node = node.parentElement;
+        neighbor = Dom.findSibling(node, backspace);
+        // At the start of a list item, Backspace takes the bullet off first,
+        // unless the item before it is a non-editable one to remove
+        if (backspace &&
+            Dom.isLeaf(node) &&
+            !(Dom.isLeaf(neighbor) && isNotEditable(jodit, neighbor))) {
+            return false;
+        }
     }
-    if (Dom.isElement(neighbor) &&
-        !Dom.isContentEditable(neighbor, jodit.editor)) {
-        call(backspace ? Dom.before : Dom.after, neighbor, fakeNode);
-        Dom.safeRemove(neighbor);
-        moveNodeInsideStart(jodit, fakeNode, backspace);
+    if (isNotEditable(jodit, neighbor)) {
+        if (Dom.isBlock(neighbor)) {
+            // Backspace after a removed list item leaves the items apart: the
+            // next press takes the bullet off, as for any later item
+            const joinLines = !(backspace && Dom.isLeaf(neighbor));
+            Dom.safeRemove(neighbor);
+            if (joinLines) {
+                checkJoinNeighbors(jodit, fakeNode, backspace);
+            }
+        }
+        else {
+            call(backspace ? Dom.before : Dom.after, neighbor, fakeNode);
+            Dom.safeRemove(neighbor);
+            moveNodeInsideStart(jodit, fakeNode, backspace);
+        }
         call(backspace ? jodit.s.setCursorBefore : jodit.s.setCursorAfter, fakeNode);
         return true;
     }
     return false;
 }
+function isNotEditable(jodit, node) {
+    return Dom.isElement(node) && !Dom.isContentEditable(node, jodit.editor);
+}

package/esm/plugins/wrap-nodes/wrap-nodes.js

@@ -13,6 +13,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
                 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;
 };
+import { NO_EMPTY_TAGS } from "../../core/constants.js";
 import { autobind } from "../../core/decorators/index.js";
 import { Dom } from "../../core/dom/index.js";
 import { pluginSystem } from "../../core/global.js";
@@ -45,7 +46,9 @@ class wrapNodes extends Plugin {
          * Some element which needs to append in block
          */
         this.isNotWrapped = (n) => Dom.isElement(n) &&
-            !(Dom.isBlock(n) || Dom.isTag(n, this.j.o.wrapNodes.exclude));
+            !(Dom.isBlock(n) ||
+                Dom.isTag(n, this.j.o.wrapNodes.exclude) ||
+                holdsBlock(n));
     }
     /** @override **/
     afterInit(jodit) {
@@ -81,7 +84,9 @@ class wrapNodes extends Plugin {
                 isChanged = true;
                 const box = jodit.createInside.element(jodit.o.enter);
                 Dom.before(child, box);
-                while (child && this.isSuitable(child)) {
+                // `exclude` keeps a <br> from starting a box, but one between loose lines stays with them
+                while (child &&
+                    (this.isSuitable(child) || Dom.isTag(child, 'br'))) {
                     const next = child.nextSibling;
                     Dom.append(box, child);
                     child = next;
@@ -124,6 +129,18 @@ __decorate([
 __decorate([
     autobind
 ], wrapNodes.prototype, "preprocessInput", null);
+/**
+ * A block can't go in a paragraph, so neither can an element that holds one,
+ * such as a `<span>` round a `<p>`. Embedded content such as an `<iframe>` can.
+ */
+function holdsBlock(elm) {
+    for (const node of Dom.eachGen(elm)) {
+        if (Dom.isBlock(node) && !Dom.isTag(node, NO_EMPTY_TAGS)) {
+            return true;
+        }
+    }
+    return false;
+}
 function checkAloneListLeaf(child, jodit) {
     let result = child;
     let next = child;

package/esm/types/async.d.ts

@@ -20,6 +20,13 @@ interface RejectablePromise<T> extends Promise<T> {
 }
 export interface IAsync extends IDestructible {
     delay(timeout: number | IAsyncParams): Promise<void>;
+    /**
+     * Calls `callback` after `timeout` milliseconds, unless the view is
+     * destroyed first. A timeout of 0, or none, calls it at once, before
+     * returning, where `window.setTimeout(callback, 0)` would wait for the
+     * current event to finish. To run after the browser has handled an event,
+     * such as moving the caret on a keydown, use a timeout of at least 1.
+     */
     setTimeout<T = any>(callback: (...args: T[]) => void, timeout: number | IAsyncParams, ...args: T[]): number;
     updateTimeout(label: string, timeout: number): Nullable<number>;
     clearTimeout(timer: number): void;

package/package.json

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

package/types/core/helpers/size/get-fixed-position-offset.d.ts

@@ -15,7 +15,9 @@ import type { IPoint } from "../../../types/index";
  * ancestor's top-left corner. The returned offset should be subtracted from
  * the desired viewport coordinates before applying them.
  *
- * Returns `{ x: 0, y: 0 }` when no such ancestor exists (the common case), so
- * call sites keep their previous behaviour unchanged.
+ * Without such an ancestor the containing block is the layout viewport. Its
+ * offset is `{ x: 0, y: 0 }` in most browsers, but WebKit measures client
+ * rects from the visual viewport, so once the page is pinch-zoomed and panned
+ * the layout viewport starts above and to the left of the client origin.
  */
 export declare function getFixedPositionOffset(elm: HTMLElement): IPoint;

package/types/plugins/add-new-line/add-new-line.d.ts

@@ -30,6 +30,13 @@ export declare class addNewLine extends Plugin {
     protected afterInit(editor: IJodit): void;
     private __addEventListeners;
     private __onClickLine;
+    /**
+     * A paragraph holding only an embed has no place for the caret, so the
+     * arrow keys can't get past one that ends the content, or before one that
+     * starts it. When an arrow key leaves the caret where it was and there is
+     * content beyond it, a new line goes there, as when the line is clicked.
+     */
+    protected onArrowKey(e: KeyboardEvent): void;
     protected onDblClickEditor(e: MouseEvent): void;
     private __onMouseMove;
     /** @override */

package/types/plugins/backspace/backspace.d.ts

@@ -19,6 +19,13 @@ export declare class backspace extends Plugin {
      * Listener BackSpace or Delete button
      */
     private onDelete;
+    /**
+     * The browser types at the end of the text before the caret on its line,
+     * in that text's formatting, but not inside a link. Moving the caret there
+     * too makes a paste and the toolbar agree with what's typed:
+     * `<p>one</p><p><b>|two</b></p>` joins to `<p>one|<b>two</b></p>`
+     */
+    private moveCaretToTextBefore;
     /**
      * Remove node and replace cursor position out of it
      */

package/types/plugins/backspace/cases/check-remove-content-not-editable.d.ts

@@ -8,7 +8,10 @@
  */
 import type { IJodit } from "../../../types/index";
 /**
- * Checks if a non-editable element can be deleted
+ * Checks if a non-editable element can be deleted. A non-editable block goes
+ * whole, and the lines either side of it then join, as the spec's tests do:
+ * `<ul><li>one|</li></ul><div contenteditable="false">x</div><p>two</p>`
+ * gives `<ul><li>one|two</li></ul>`
  * @private
  */
 export declare function checkRemoveContentNotEditable(jodit: IJodit, fakeNode: Text, backspace: boolean): boolean;

package/types/types/async.d.ts

@@ -20,6 +20,13 @@ interface RejectablePromise<T> extends Promise<T> {
 }
 export interface IAsync extends IDestructible {
     delay(timeout: number | IAsyncParams): Promise<void>;
+    /**
+     * Calls `callback` after `timeout` milliseconds, unless the view is
+     * destroyed first. A timeout of 0, or none, calls it at once, before
+     * returning, where `window.setTimeout(callback, 0)` would wait for the
+     * current event to finish. To run after the browser has handled an event,
+     * such as moving the caret on a keydown, use a timeout of at least 1.
+     */
     setTimeout<T = any>(callback: (...args: T[]) => void, timeout: number | IAsyncParams, ...args: T[]): number;
     updateTimeout(label: string, timeout: number): Nullable<number>;
     clearTimeout(timer: number): void;