jodit 4.18.3 → 4.18.6

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 { LIST_TAGS } from "../../../core/constants.js";
+import { INSEPARABLE_TAGS, LIST_TAGS } from "../../../core/constants.js";
 import { Dom } from "../../../core/dom/dom.js";
 import { getMoveFilter } from "../helpers.js";
 /**
@@ -21,6 +21,10 @@ export function checkJoinNeighbors(jodit, fakeNode, backspace) {
     }
     if (Dom.isElement(mainClosestBox) &&
         Dom.isContentEditable(mainClosestBox, jodit.editor)) {
+        // A table cell is never joined with its neighbour
+        if (Dom.up(fakeNode, Dom.isCell, mainClosestBox, true)) {
+            return false;
+        }
         const sibling = Dom.findNotEmptySibling(mainClosestBox, backspace);
         // 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
@@ -30,15 +34,60 @@ export function checkJoinNeighbors(jodit, fakeNode, backspace) {
             jodit.s.setCursorBefore(fakeNode);
             return true;
         }
+        // Backspace leaves a block after a table alone, as Word does, rather
+        // than moving its text into the last cell
+        if (backspace && Dom.isTag(sibling, 'table')) {
+            jodit.s.setCursorBefore(fakeNode);
+            return true;
+        }
+        const box = findCaretBox(fakeNode, mainClosestBox);
         if (sibling &&
-            (checkMoveListContent(jodit, mainClosestBox, sibling, backspace) ||
-                moveContentAndRemoveEmpty(jodit, mainClosestBox, resolveTableSibling(sibling, backspace), backspace))) {
+            (checkPullNextLine(jodit, fakeNode, box, sibling, backspace) ||
+                checkMoveListContent(jodit, box, sibling, backspace) ||
+                moveContentAndRemoveEmpty(jodit, box, findEdgeBlock(resolveTableSibling(sibling, backspace), backspace, jodit.editor), backspace))) {
             jodit.s.setCursorBefore(fakeNode);
             return true;
         }
     }
     return false;
 }
+/**
+ * The block holding the caret inside the box that has the sibling, so
+ * `<p>one</p><div><p>|two</p></div>` joins the two paragraphs instead of
+ * moving the whole `<div>` into the first one. For a list item that is its
+ * list, which the list cases handle.
+ */
+function findCaretBox(fakeNode, mainClosestBox) {
+    const block = Dom.up(fakeNode, Dom.isBlock, mainClosestBox);
+    if (!block) {
+        return mainClosestBox;
+    }
+    return Dom.isLeaf(block) && block.parentElement
+        ? block.parentElement
+        : block;
+}
+/**
+ * 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
+ * `<div><p>one|two</p></div>`
+ */
+function findEdgeBlock(sibling, backspace, root) {
+    let block = sibling;
+    while (block) {
+        const edge = backspace ? block.lastChild : block.firstChild;
+        const child = edge && Dom.isEmptyTextNode(edge)
+            ? Dom.findNotEmptySibling(edge, backspace)
+            : edge;
+        if (!Dom.isBlock(child) ||
+            Dom.isTag(child, INSEPARABLE_TAGS) ||
+            Dom.isTag(child, 'table') ||
+            !Dom.isContentEditable(child, root)) {
+            return block;
+        }
+        block = child;
+    }
+    return block;
+}
 /**
  * Content cannot be merged into the `<table>` element itself — it would land
  * between the table sections (after `</tbody>`), which is invalid HTML and
@@ -56,6 +105,44 @@ function resolveTableSibling(sibling, backspace) {
     });
     return cells.length ? cells[backspace ? cells.length - 1 : 0] : null;
 }
+/**
+ * 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:
+ * `<ul><li>one|</li></ul><p>two</p>` gives `<ul><li>one|two</li></ul>`, and
+ * `<p>one|</p><ul><li>two</li></ul>` gives `<p>one|two</p>`
+ * @private
+ */
+function checkPullNextLine(jodit, fakeNode, box, sibling, backspace) {
+    if (backspace || !(Dom.isList(box) || Dom.isList(sibling))) {
+        return false;
+    }
+    const target = Dom.up(fakeNode, Dom.isBlock, box, true);
+    const source = Dom.isList(sibling) ? sibling.firstElementChild : sibling;
+    if (!target ||
+        !source ||
+        Dom.isTag(source, INSEPARABLE_TAGS) ||
+        Dom.isTag(source, 'table')) {
+        return false;
+    }
+    if (!Dom.isEmpty(source)) {
+        const line = [];
+        for (let node = source.firstChild; node && !Dom.isBlock(node); node = node.nextSibling) {
+            line.push(node);
+        }
+        if (!line.length) {
+            return false;
+        }
+        const filter = getMoveFilter(jodit);
+        line.forEach(node => filter(node) ? Dom.append(target, node) : Dom.safeRemove(node));
+    }
+    let remove = source;
+    while (remove && remove !== jodit.editor && Dom.isEmpty(remove)) {
+        const parent = remove.parentElement;
+        Dom.safeRemove(remove);
+        remove = parent;
+    }
+    return true;
+}
 function checkMoveListContent(jodit, mainClosestBox, sibling, backspace) {
     // Process UL/LI/OL cases
     const siblingIsList = Dom.isTag(sibling, LIST_TAGS);

package/esm/plugins/clean-html/clean-html.d.ts

@@ -23,6 +23,14 @@ export declare class cleanHtml extends Plugin {
      */
     protected onChangeCleanHTML(): void;
     private currentSelectionNode;
+    /**
+     * Typing into an empty block (`<p><br></p>`) replaces its `<br>`, but the
+     * browser keeps the `<br>` when the caret is in an invisible-space text
+     * node in front of it, as Jodit leaves the caret in many of the empty
+     * blocks it makes (a cleared editor, a heading in an empty table cell).
+     * See #1632
+     */
+    protected onInputRemovePlaceholderBr(event: InputEvent | CompositionEvent): void;
     private walker;
     protected startWalker(): void;
     protected beforeCommand(command: string): void | false;

package/esm/plugins/clean-html/clean-html.js

@@ -21,7 +21,7 @@ import { safeHTML } from "../../core/helpers/html/safe-html.js";
 import { Plugin } from "../../core/plugin/plugin.js";
 import "./config.js";
 import { replaceOldTags } from "./helpers/visitor/filters/replace-old-tags.js";
-import { getHash, removeFormatForCollapsedSelection, removeFormatForSelection, visitNodeWalker } from "./helpers/index.js";
+import { getHash, removeFormatForCollapsedSelection, removeFormatForSelection, removePlaceholderBr, visitNodeWalker } from "./helpers/index.js";
 /**
  * Clean HTML after removeFormat and insertHorizontalRule command
  */
@@ -72,6 +72,23 @@ export class cleanHtml extends Plugin {
         this.walker.setWork(editor.editor);
         this.currentSelectionNode = editor.s.current();
     }
+    /**
+     * Typing into an empty block (`<p><br></p>`) replaces its `<br>`, but the
+     * browser keeps the `<br>` when the caret is in an invisible-space text
+     * node in front of it, as Jodit leaves the caret in many of the empty
+     * blocks it makes (a cleared editor, a heading in an empty table cell).
+     * See #1632
+     */
+    onInputRemovePlaceholderBr(event) {
+        var _a;
+        if (!this.isEditMode ||
+            (event.type === 'input' &&
+                (event.isComposing ||
+                    !((_a = event.inputType) === null || _a === void 0 ? void 0 : _a.startsWith('insert'))))) {
+            return;
+        }
+        removePlaceholderBr(this.j);
+    }
     startWalker() {
         const { jodit } = this;
         const allow = getHash(this.j.o.cleanHTML.allowTags);
@@ -239,6 +256,9 @@ export class cleanHtml extends Plugin {
 __decorate([
     watch([':change', ':afterSetMode', ':afterInit', ':mousedown', ':keydown'])
 ], cleanHtml.prototype, "onChangeCleanHTML", null);
+__decorate([
+    watch([':input', 'jodit.editor:compositionend'])
+], cleanHtml.prototype, "onInputRemovePlaceholderBr", null);
 __decorate([
     hook('ready')
 ], cleanHtml.prototype, "startWalker", null);

package/esm/plugins/clean-html/helpers/index.d.ts

@@ -10,4 +10,5 @@ export * from "./get-hash";
 export * from "./is-allowed-media-embed";
 export * from "./remove-format/remove-format-for-collapsed-selection";
 export * from "./remove-format/remove-format-for-selection";
+export * from "./remove-placeholder-br";
 export * from "./visitor/visit-node-walker";

package/esm/plugins/clean-html/helpers/index.js

@@ -10,4 +10,5 @@ export * from "./get-hash.js";
 export * from "./is-allowed-media-embed.js";
 export * from "./remove-format/remove-format-for-collapsed-selection.js";
 export * from "./remove-format/remove-format-for-selection.js";
+export * from "./remove-placeholder-br.js";
 export * from "./visitor/visit-node-walker.js";

package/esm/plugins/clean-html/helpers/remove-placeholder-br.d.ts

@@ -0,0 +1,16 @@
+/*!
+ * Jodit Editor (https://xdsoft.net/jodit/)
+ * 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 plugins/clean-html
+ */
+import type { IJodit } from "../../../types/index";
+/**
+ * Remove the `<br>` that kept the block with the caret open while it was
+ * empty, once text has gone into the block: when the block is one line of
+ * text that ends in that `<br>`, the `<br>` adds nothing to it
+ * @private
+ */
+export declare function removePlaceholderBr(jodit: IJodit): void;

package/esm/plugins/clean-html/helpers/remove-placeholder-br.js

@@ -0,0 +1,51 @@
+/*!
+ * Jodit Editor (https://xdsoft.net/jodit/)
+ * 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 } from "../../../core/constants.js";
+import { Dom } from "../../../core/dom/dom.js";
+import { trim } from "../../../core/helpers/string/trim.js";
+function lastNode(node) {
+    let last = node.lastChild;
+    while (Dom.isText(last) && !last.nodeValue) {
+        last = last.previousSibling;
+    }
+    return last;
+}
+/**
+ * Remove the `<br>` that kept the block with the caret open while it was
+ * empty, once text has gone into the block: when the block is one line of
+ * text that ends in that `<br>`, the `<br>` adds nothing to it
+ * @private
+ */
+export function removePlaceholderBr(jodit) {
+    var _a;
+    const block = Dom.closest(jodit.s.current(), Dom.isBlock, jodit.editor);
+    if (!block || !trim((_a = block.textContent) !== null && _a !== void 0 ? _a : '')) {
+        return;
+    }
+    let br = lastNode(block);
+    while (Dom.isElement(br) &&
+        !Dom.isTag(br, INSEPARABLE_TAGS) &&
+        !Dom.isBlock(br)) {
+        br = lastNode(br);
+    }
+    if (!Dom.isTag(br, 'br')) {
+        return;
+    }
+    // Another line break, a block, an image or an embed means the `<br>` may
+    // end an empty line, or give the caret a place after the embed
+    const isOneLineOfText = Dom.each(block, (node) => {
+        if (node !== br &&
+            Dom.isElement(node) &&
+            (Dom.isTag(node, INSEPARABLE_TAGS) ||
+                Dom.isBlock(node) ||
+                (Dom.isHTMLElement(node) && !node.isContentEditable))) {
+            return false;
+        }
+    });
+    if (isOneLineOfText) {
+        Dom.safeRemove(br);
+    }
+}

package/esm/plugins/delete/delete.d.ts

@@ -20,13 +20,23 @@ export declare class deleteCommand extends Plugin {
      */
     private __afterDeleteCommand;
     private __onDeleteCommand;
+    /**
+     * A selection that starts or ends in a table cell clears the selected part
+     * of each cell it covers and keeps the cells, as the browsers do.
+     * `deleteContents` would remove the cells it fully covers, and the cells
+     * it cuts would then be merged as blocks. The range is moved out of those
+     * tables, so only the content between them is left to delete.
+     *
+     * Returns where the caret goes, or null when no table is involved
+     */
+    private __clearSelectedCells;
     private __moveContentInLeftSibling;
     /**
      * If left sibling is list - return last leaf
      */
     private __defineRightLeftBox;
     /**
-     * Add BR in empty blocks left and right(for table cell)
+     * Add BR in the empty block left at the caret
      */
     private __addBrInEmptyBlock;
     private __moveCursorInEditableSibling;

package/esm/plugins/delete/delete.js

@@ -5,7 +5,7 @@
  */
 import { Dom } from "../../core/dom/index.js";
 import { pluginSystem } from "../../core/global.js";
-import { $$ } from "../../core/helpers/index.js";
+import { toArray } from "../../core/helpers/index.js";
 import { trim } from "../../core/helpers/string/trim.js";
 import { Plugin } from "../../core/plugin/index.js";
 import "./interface.js";
@@ -56,6 +56,11 @@ export class deleteCommand extends Plugin {
         }
         jodit.s.expandSelection();
         const range = jodit.s.range;
+        const caret = this.__clearSelectedCells(range);
+        if (caret && range.collapsed) {
+            jodit.s.selectRange(caret);
+            return false;
+        }
         range.deleteContents();
         const fake = jodit.createInside.fake();
         range.insertNode(fake);
@@ -65,13 +70,78 @@ export class deleteCommand extends Plugin {
         range.setStartBefore(fake);
         range.collapse(true);
         this.__moveCursorInEditableSibling(jodit, leftSibling, fake, range);
-        this.__addBrInEmptyBlock(fake, rightSibling, range);
+        this.__addBrInEmptyBlock(fake, range);
         Dom.safeRemove(fake);
-        jodit.s.selectRange(range);
+        jodit.s.selectRange(caret !== null && caret !== void 0 ? caret : range);
         return false;
     }
+    /**
+     * A selection that starts or ends in a table cell clears the selected part
+     * of each cell it covers and keeps the cells, as the browsers do.
+     * `deleteContents` would remove the cells it fully covers, and the cells
+     * it cuts would then be merged as blocks. The range is moved out of those
+     * tables, so only the content between them is left to delete.
+     *
+     * Returns where the caret goes, or null when no table is involved
+     */
+    __clearSelectedCells(range) {
+        const { editor, createInside } = this.j;
+        const startCell = Dom.closest(range.startContainer, Dom.isCell, editor);
+        const endCell = Dom.closest(range.endContainer, Dom.isCell, editor);
+        if (startCell === endCell) {
+            return null;
+        }
+        const startTable = Dom.closest(startCell, 'table', editor);
+        const endTable = Dom.closest(endCell, 'table', editor);
+        const caret = range.cloneRange();
+        caret.collapse(true);
+        const parts = [];
+        const addParts = (table) => {
+            toArray(table.rows)
+                .flatMap(row => toArray(row.cells))
+                .filter(cell => range.intersectsNode(cell))
+                .forEach(cell => {
+                const part = range.cloneRange();
+                if (!Dom.isOrContains(cell, range.startContainer)) {
+                    part.setStart(cell, 0);
+                }
+                if (!Dom.isOrContains(cell, range.endContainer)) {
+                    part.setEnd(cell, cell.childNodes.length);
+                }
+                parts.push([cell, part]);
+            });
+        };
+        if (startTable) {
+            addParts(startTable);
+            if (startTable === endTable) {
+                range.collapse(true);
+            }
+            else {
+                range.setStartAfter(startTable);
+            }
+        }
+        if (endTable && endTable !== startTable) {
+            addParts(endTable);
+            range.setEndBefore(endTable);
+        }
+        parts.forEach(([cell, part]) => {
+            part.deleteContents();
+            if (Dom.isEmpty(cell)) {
+                Dom.detach(cell);
+                Dom.append(cell, createInside.element('br'));
+            }
+        });
+        return startTable ? caret : null;
+    }
     __moveContentInLeftSibling(fake, leftSibling, rightSibling) {
         leftSibling = this.__defineRightLeftBox(leftSibling);
+        // Nothing is moved into a table, and a block left empty after it goes
+        if (Dom.isTag(leftSibling, 'table')) {
+            if (Dom.isBlock(rightSibling) && Dom.isEmpty(rightSibling)) {
+                Dom.safeRemove(rightSibling);
+            }
+            return;
+        }
         if (!Dom.isList(rightSibling) &&
             !Dom.isTag(rightSibling, 'table') &&
             Dom.isBlock(rightSibling) &&
@@ -80,11 +150,24 @@ export class deleteCommand extends Plugin {
             Dom.moveContent(rightSibling, leftSibling);
             Dom.safeRemove(rightSibling);
         }
-        // Remove empty right LI
         if (Dom.isList(rightSibling) &&
-            Dom.isLeaf(rightSibling.firstElementChild) &&
-            Dom.isEmpty(rightSibling.firstElementChild)) {
-            Dom.safeRemove(rightSibling.firstElementChild);
+            Dom.isLeaf(rightSibling.firstElementChild)) {
+            const item = rightSibling.firstElementChild;
+            // What's left of the right list's first item joins the left block,
+            // up to a list nested in the item
+            if (!Dom.isEmpty(item) && Dom.isBlock(leftSibling)) {
+                Dom.append(leftSibling, fake);
+                while (item.firstChild && !Dom.isBlock(item.firstChild)) {
+                    Dom.append(leftSibling, item.firstChild);
+                }
+            }
+            // Remove empty right LI
+            if (Dom.isEmpty(item)) {
+                Dom.safeRemove(item);
+            }
+            if (Dom.isEmpty(rightSibling)) {
+                Dom.safeRemove(rightSibling);
+            }
         }
     }
     /**
@@ -102,9 +185,9 @@ export class deleteCommand extends Plugin {
         return lastLeaf;
     }
     /**
-     * Add BR in empty blocks left and right(for table cell)
+     * Add BR in the empty block left at the caret
      */
-    __addBrInEmptyBlock(fake, rightSibling, range) {
+    __addBrInEmptyBlock(fake, range) {
         const jodit = this.j;
         if (fake.isConnected &&
             Dom.isBlock(fake.parentNode) &&
@@ -115,13 +198,6 @@ export class deleteCommand extends Plugin {
             range.setStartBefore(br);
             range.collapse(true);
         }
-        // Add BR in the right empty table cell
-        if (Dom.isTag(rightSibling, 'table')) {
-            const firstCell = $$('td,th', rightSibling).shift();
-            if (Dom.isCell(firstCell) && Dom.isEmpty(firstCell)) {
-                Dom.append(firstCell, jodit.createInside.element('br'));
-            }
-        }
     }
     __moveCursorInEditableSibling(jodit, leftSibling, fake, range) {
         var _a;

package/esm/plugins/focus/focus.js

@@ -67,7 +67,18 @@ export function focus(editor) {
     editor.e.on('afterInit', () => {
         if (editor.o.autofocus) {
             if (editor.defaultTimeout) {
-                editor.async.setTimeout(focus, 300);
+                // A click or key in the editor during the delay has put the
+                // caret where the user wants it, so autofocus leaves it there
+                const userInput = 'mousedown touchstart keydown';
+                const cancel = () => {
+                    editor.async.clearTimeout(timeout);
+                    editor.e.off(userInput, cancel);
+                };
+                const timeout = editor.async.setTimeout(() => {
+                    editor.e.off(userInput, cancel);
+                    focus();
+                }, 300);
+                editor.e.on(userInput, cancel);
             }
             else {
                 focus();

package/esm/plugins/iframe/config.d.ts

@@ -37,6 +37,9 @@ declare module 'jodit/config' {
         iframeDoctype: string;
         /**
          * Custom style to be used inside the iframe to display content.
+         * It goes in after `iframeCSSLinks`. The rules Jodit's own plugins need
+         * in the editing document are added apart from it, so a value of your
+         * own doesn't have to repeat them.
          *
          * ```javascript
          * Jodit.make('#editor', {

package/esm/plugins/iframe/config.js

@@ -51,33 +51,6 @@ Config.prototype.iframeStyle =
         'p{' +
         'margin-top:0;' +
         '}' +
-        '[data-jodit_iframe_wrapper]{' +
-        'display: block;' +
-        'user-select: none;' +
-        'position: relative;' +
-        '}' +
-        '[data-jodit_iframe_wrapper] iframe{' +
-        'position: relative;' +
-        '}' +
-        '[data-jodit_iframe_wrapper]:after {' +
-        'position:absolute;' +
-        'content:"";' +
-        'z-index:1;' +
-        'top:0;' +
-        'left:0;' +
-        'right: 0;' +
-        'bottom: 0;' +
-        'cursor: pointer;' +
-        'display: block;' +
-        'background: rgba(0, 0, 0, 0);' +
-        '} ' +
-        '[data-jodit_iframe_wrapper][data-jodit-wrapper_active=true] iframe{' +
-        'z-index: 2;' +
-        '}' +
-        '.jodit-wysiwyg_image-selected::selection,' +
-        '.jodit-wysiwyg_image-selected *:not(img)::selection{' +
-        'background:transparent' +
-        '}' +
         '.jodit_disabled{' +
         'user-select: none;' +
         '-o-user-select: none;' +

package/esm/plugins/iframe/iframe.js

@@ -7,7 +7,7 @@ import { MODE_SOURCE } from "../../core/constants.js";
 import { Dom } from "../../core/dom/dom.js";
 import { pluginSystem } from "../../core/global.js";
 import { error } from "../../core/helpers/index.js";
-import { attr, callPromise, css, defaultLanguage } from "../../core/helpers/index.js";
+import { $$, attr, callPromise, css, defaultLanguage } from "../../core/helpers/index.js";
 import "./config.js";
 /**
  * Iframe plugin - use `iframe` instead of DIV in editor. It can be need when you want to attach custom styles in editor
@@ -43,6 +43,8 @@ export function iframe(editor) {
                 attr(link, 'rel', 'stylesheet');
                 attr(link, 'href', href);
                 doc.head && Dom.append(doc.head, link);
+                // What plugins measured in the editing document changes once it's styled
+                jodit.e.on(link, 'load', () => jodit.e.fire('resize'));
             });
         }
         if (opt.iframeStyle) {
@@ -83,6 +85,8 @@ export function iframe(editor) {
                     null);
             };
             const clearMarkers = (html) => {
+                // The plugins' own styles, from `getContainer`, aren't part of the value
+                html = html.replace(/<style[^>]+jodit-box[^>]*>[\s\S]*?<\/style>/gi, '');
                 const bodyReg = /<body.*<\/body>/im, bodyMarker = '{%%BODY%%}', body = bodyReg.exec(html);
                 if (body) {
                     // remove markers
@@ -119,7 +123,10 @@ export function iframe(editor) {
             const replaceDocument = (html) => {
                 const inert = new DOMParser().parseFromString(html, 'text/html');
                 editor.e.fire('safeHTML', inert.documentElement);
+                // The plugins' own styles stay, as the value leaves them out
+                const styles = $$('style.jodit-box', doc.head);
                 doc.replaceChild(doc.adoptNode(inert.documentElement), doc.documentElement);
+                styles.forEach(style => Dom.append(doc.head, style));
             };
             if (docMode) {
                 const tag = editor.element.tagName;

package/esm/plugins/image-processor/image-processor.d.ts

@@ -25,7 +25,10 @@ export declare class imageProcessor extends Plugin {
     }): void;
     /**
      * While the selection is an image, only the image is highlighted: Safari
-     * paints the rest of a block image's line with its parent's highlight. See #1528
+     * paints the rest of a block image's line with its parent's highlight. See #1528.
+     * Media in a wrapper (`jodit-media`, the resizer's `jodit` for an embed, or
+     * one from `mediaWrappers`) isn't highlighted either, as Safari paints its
+     * wrapper's whole line, and its resize frame shows it's selected
      */
     private onSelectionChange;
     protected afterChange(data: {

package/esm/plugins/image-processor/image-processor.js

@@ -16,20 +16,26 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { INVISIBLE_SPACE_REG_EXP, SOURCE_CONSUMER } from "../../core/constants.js";
 import { autobind, cached, debounce, watch } from "../../core/decorators/index.js";
 import { Dom } from "../../core/dom/dom.js";
-import { pluginSystem } from "../../core/global.js";
-import { $$, dataBind } from "../../core/helpers/index.js";
+import { getContainer, pluginSystem } from "../../core/global.js";
+import { $$, dataBind, getWrappedMedia } from "../../core/helpers/index.js";
 import { Plugin } from "../../core/plugin/index.js";
 import { dataURItoBlob } from "../../modules/uploader/helpers/data-uri-to-blob.js";
 import "./config.js";
 const JODIT_IMAGE_PROCESSOR_BINDED = '__jodit_imageprocessor_binded';
 const JODIT_IMAGE_BLOB_ID = JODIT_IMAGE_PROCESSOR_BINDED + 'blob-id';
 const IMAGE_SELECTED = 'jodit-wysiwyg_image-selected';
+const SELECTED_TAGS = new Set(['img', 'jodit', 'jodit-media']);
 /**
  * Change editor's size after load all images
  */
 export class imageProcessor extends Plugin {
     afterInit(jodit) {
         jodit.e.on(jodit.ed, 'selectionchange', this.onSelectionChange);
+        // Over the highlight in `styles/reset.less`; the image keeps its own. It goes
+        // in the editing document, so iframe mode has it whatever `iframeStyle` holds
+        getContainer(jodit, 'image-processor', 'style', true).textContent =
+            `.jodit-wysiwyg.${IMAGE_SELECTED}::selection,` +
+                `.jodit-wysiwyg.${IMAGE_SELECTED} *:not(img)::selection{background:transparent}`;
     }
     beforeDestruct(jodit) {
         jodit.e.off(jodit.ed, 'selectionchange', this.onSelectionChange);
@@ -66,7 +72,10 @@ export class imageProcessor extends Plugin {
     }
     /**
      * While the selection is an image, only the image is highlighted: Safari
-     * paints the rest of a block image's line with its parent's highlight. See #1528
+     * paints the rest of a block image's line with its parent's highlight. See #1528.
+     * Media in a wrapper (`jodit-media`, the resizer's `jodit` for an embed, or
+     * one from `mediaWrappers`) isn't highlighted either, as Safari paints its
+     * wrapper's whole line, and its resize frame shows it's selected
      */
     onSelectionChange() {
         const { jodit } = this;
@@ -117,9 +126,11 @@ function isImageSelected(jodit) {
         return false;
     }
     const { startContainer, startOffset, endContainer, endOffset } = sel.getRangeAt(0);
+    const node = startContainer.childNodes[startOffset];
     return (startContainer === endContainer &&
         endOffset === startOffset + 1 &&
-        Dom.isTag(startContainer.childNodes[startOffset], 'img') &&
+        (Dom.isTag(node, SELECTED_TAGS) ||
+            Boolean(getWrappedMedia(jodit, node))) &&
         Dom.isOrContains(jodit.editor, startContainer));
 }
 /**

package/esm/plugins/image-properties/readers/align.d.ts

@@ -6,9 +6,9 @@
 /**
  * @module plugins/image-properties
  */
-import type { ImageAlignClasses, Nullable } from "../../../types/index";
+import type { HAlignClasses, Nullable } from "../../../types/index";
 import type { EditValues } from "../interface";
 /**
  * @private
  */
-export declare function readAlign(image: HTMLImageElement, values: EditValues, classes?: Nullable<ImageAlignClasses>): void;
+export declare function readAlign(image: HTMLImageElement, values: EditValues, classes?: Nullable<HAlignClasses>): void;

package/esm/plugins/index.d.ts

@@ -68,6 +68,7 @@ import "./table/table";
 import "./table-keyboard-navigation/table-keyboard-navigation";
 import "./toolbar-navigation/toolbar-navigation";
 import "./video/video";
+import "./video-properties/video-properties";
 import "./wrap-nodes/wrap-nodes";
 import "./dtd/dtd";
 import "./xpath/xpath";

package/esm/plugins/inline-popup/config/items/iframe.d.ts

@@ -6,10 +6,18 @@
 /**
  * @module plugins/inline-popup
  */
-import type { IJodit } from "../../../../types/index";
+import type { IJodit, Nullable } from "../../../../types/index";
 declare const _default: (import("../../../../types/index").IControlType<IJodit, import("../../../../types/index").IToolbarButton> | {
+    name: string;
+    icon: string;
+    tooltip: string;
+    popup: (editor: IJodit, target: Nullable<Node>, close: () => void) => HTMLElement | void;
+    exec?: undefined;
+} | {
     name: string;
     tooltip: string;
     exec: (editor: IJodit, image: HTMLImageElement) => void;
+    icon?: undefined;
+    popup?: undefined;
 })[];
 export default _default;