jodit 4.18.2 → 4.18.4

package/esm/modules/history/history.js

@@ -3,18 +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
  */
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
-        r = Reflect.decorate(decorators, target, key, desc);
-    else
-        for (var i = decorators.length - 1; i >= 0; i--)
-            if (d = decorators[i])
-                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 { ViewComponent } from "../../core/component/view-component.js";
-import { debounce } from "../../core/decorators/debounce/debounce.js";
 import { Config } from "../../config.js";
 import { Command } from "./command.js";
 import { Snapshot } from "./snapshot.js";
@@ -36,28 +25,32 @@ export class History extends ViewComponent {
      * Return state of the WYSIWYG editor to step back
      */
     redo() {
+        this.__processPendingChanges();
         if (this.__stack.redo()) {
             this.startValue = this.snapshot.make();
             this.fireChangeStack();
         }
     }
     canRedo() {
-        return this.__stack.canRedo();
+        return !this.__hasPendingChanges && this.__stack.canRedo();
     }
     /**
      * Return the state of the WYSIWYG editor to step forward
      */
     undo() {
+        this.__processPendingChanges();
         if (this.__stack.undo()) {
             this.startValue = this.snapshot.make();
             this.fireChangeStack();
         }
     }
     canUndo() {
-        return this.__stack.canUndo();
+        return this.__hasPendingChanges || this.__stack.canUndo();
     }
     clear() {
         this.startValue = this.snapshot.make();
+        this.async.clearTimeout(this.__timer);
+        this.__hasPendingChanges = false;
         this.__stack.clear();
         this.fireChangeStack();
     }
@@ -73,6 +66,14 @@ export class History extends ViewComponent {
     constructor(editor, stack = new Stack(editor.o.history.maxHistoryLength), snapshot = new Snapshot(editor)) {
         super(editor);
         this.updateTick = 0;
+        /**
+         * A step is open: changes have come in that are not in the stack yet
+         */
+        this.__hasPendingChanges = false;
+        /**
+         * Records the open step `history.timeout` after its first change
+         */
+        this.__timer = 0;
         this.__stack = stack;
         this.snapshot = snapshot;
         if (editor.o.history.enable) {
@@ -84,6 +85,7 @@ export class History extends ViewComponent {
                 editor.events
                     // save selection
                     .on('internalChange internalUpdate', () => {
+                    this.__processPendingChanges();
                     this.startValue = this.snapshot.make();
                 })
                     .on(editor.editor, [
@@ -102,7 +104,7 @@ export class History extends ViewComponent {
                         this.startValue = this.snapshot.make();
                     }
                 })
-                    .on(this, 'change.history', this.onChange);
+                    .on(this, 'change.history', () => this.onChange());
             });
         }
     }
@@ -114,10 +116,31 @@ export class History extends ViewComponent {
         this.updateTick += 1;
     }
     /**
-     * Push new command in stack on some changes
+     * Push new command in stack on some changes. The first change opens a
+     * step, and later ones join it until `history.timeout` has passed,
+     * however close together they come.
      */
     onChange() {
-        this.__processChanges();
+        // A transaction is over by the time the step is recorded, so it is
+        // checked now
+        if (this.snapshot.isBlocked || this.__hasPendingChanges) {
+            return;
+        }
+        this.__hasPendingChanges = true;
+        this.__timer = this.async.setTimeout(() => this.__processPendingChanges(), this.j.o.history.timeout);
+        // With a timeout of 0 the step is already recorded. Otherwise
+        // canUndo and canRedo count it from now
+        if (this.__hasPendingChanges) {
+            this.fireChangeStack();
+        }
+    }
+    /**
+     * Push the open step's changes now
+     */
+    __processPendingChanges() {
+        if (this.__hasPendingChanges) {
+            this.__processChanges();
+        }
     }
     /**
      * @internal
@@ -126,6 +149,8 @@ export class History extends ViewComponent {
         if (this.snapshot.isBlocked || !this.j.o.history.enable) {
             return;
         }
+        this.async.clearTimeout(this.__timer);
+        this.__hasPendingChanges = false;
         this.updateStack();
     }
     /**
@@ -171,6 +196,3 @@ export class History extends ViewComponent {
         super.destruct();
     }
 }
-__decorate([
-    debounce()
-], History.prototype, "onChange", null);

package/esm/modules/table/table.js

@@ -172,7 +172,9 @@ export class Table extends ViewComponent {
             const columnsCount = Table.__getColumnsCount(table);
             row = create.element('tr');
             for (let j = 0; j < columnsCount; j += 1) {
-                Dom.append(row, create.element('td'));
+                const cell = create.element('td');
+                Dom.append(cell, create.element('br'));
+                Dom.append(row, cell);
             }
         }
         else {
@@ -190,6 +192,7 @@ export class Table extends ViewComponent {
             Dom.each(row, cell => {
                 if (Dom.isCell(cell)) {
                     Dom.detach(cell);
+                    Dom.append(cell, create.element('br'));
                 }
             });
         }
@@ -288,6 +291,7 @@ export class Table extends ViewComponent {
             if (cells[columnIndex] !== cells[newColumnIndex] ||
                 columnIndex === newColumnIndex) {
                 const cell = this.j.createInside.element('td');
+                Dom.append(cell, this.j.createInside.element('br'));
                 if (insertAfter) {
                     Dom.after(cells[columnIndex], cell);
                 }
@@ -516,7 +520,8 @@ export class Table extends ViewComponent {
                         Table.__setColumnWidthByDelta(table, first_j, 0, true, __marked);
                     }
                 }
-                first.innerHTML = html.join('<br/>');
+                first.innerHTML =
+                    html.join('<br/>') || '<br/>';
                 instance(jodit).addSelection(first);
                 alreadyMerged.delete(first);
                 Table.__unmark(__marked);

package/esm/modules/widget/file-selector/file-selector.js

@@ -99,8 +99,8 @@ export const FileSelectorWidget = (editor, callbacks, elm, close, isImage = true
     const box = TabsWidget(editor, tabs);
     // Marks this popup so its tabs auto-size to their labels (see
     // `.jodit-file-selector` in tabs.less) — long localized tab captions are no
-    // longer clipped — while leaving other tab popups (link, video …)
-    // untouched.
+    // longer clipped — while leaving other tab popups (link …) untouched. The
+    // video popup, which has an Upload tab too, uses it as well.
     box.classList.add('jodit-file-selector');
     return box;
 };

package/esm/plugins/all.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/all.js

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

package/esm/plugins/backspace/backspace.js

@@ -56,6 +56,10 @@ export class backspace extends Plugin {
         if (!sel.isFocused()) {
             sel.focus();
         }
+        // Focused with no range, as WebKit leaves it after a click on an embed
+        if (!sel.isInsideArea) {
+            return;
+        }
         if (checkNotCollapsed(jodit)) {
             jodit.e.fire('backSpaceAfterDelete', backspace);
             return false;

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

@@ -40,6 +40,13 @@ export declare class cleanHtml extends Plugin {
     protected onBeforeSetNativeEditorValue(data: {
         value: string;
     }): boolean;
+    /**
+     * Replace old tags (`<b>` with `<strong>`, `<i>` with `<em>`) in an
+     * assigned value straight away. The walker would get to them only after
+     * every node before them, seconds later on a long document, and until
+     * then Bold does not treat `<b>` as bold, and the swap can move the caret.
+     */
+    private __replaceOldTags;
     /**
      * Collapse a value that holds only a single empty block (e.g.
      * `<p><br></p>` left after deleting all content) to an empty string —

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

@@ -20,6 +20,7 @@ import { pluginSystem } from "../../core/global.js";
 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";
 /**
  * Clean HTML after removeFormat and insertHorizontalRule command
@@ -119,11 +120,27 @@ export class cleanHtml extends Plugin {
             ];
         sandBox.innerHTML = data.value;
         this.j.e.fire('safeHTML', sandBox);
+        this.__replaceOldTags(sandBox);
         data.value = sandBox.innerHTML;
         safeHTML(sandBox, { safeJavaScriptLink: true, removeOnError: true });
         Dom.safeRemove(iframe);
         return false;
     }
+    /**
+     * Replace old tags (`<b>` with `<strong>`, `<i>` with `<em>`) in an
+     * assigned value straight away. The walker would get to them only after
+     * every node before them, seconds later on a long document, and until
+     * then Bold does not treat `<b>` as bold, and the swap can move the caret.
+     */
+    __replaceOldTags(box) {
+        const { replaceOldTags: list, disableCleanFilter } = this.j.o.cleanHTML;
+        if (!list || (disableCleanFilter === null || disableCleanFilter === void 0 ? void 0 : disableCleanFilter.has('replaceOldTags'))) {
+            return;
+        }
+        Dom.each(box, node => {
+            replaceOldTags(this.j, node, false);
+        });
+    }
     /**
      * Collapse a value that holds only a single empty block (e.g.
      * `<p><br></p>` left after deleting all content) to an empty string —

package/esm/plugins/clean-html/helpers/visitor/filters/replace-old-tags.js

@@ -24,7 +24,32 @@ function replaceIfMatched(jodit, oldParent, list) {
     }
     const tagName = list[oldParent.nodeName.toLowerCase()] || list[oldParent.nodeName];
     if (tagName) {
-        return Dom.replace(oldParent, tagName, jodit.createInside, true, false);
+        const restoreSelection = keepSelection(jodit, oldParent);
+        const newParent = Dom.replace(oldParent, tagName, jodit.createInside, true, false);
+        restoreSelection === null || restoreSelection === void 0 ? void 0 : restoreSelection(newParent);
+        return newParent;
     }
     return oldParent;
 }
+/**
+ * Moving the children out of an element collapses a selection inside them to
+ * where the element was, so the caret jumps to the start of the text being
+ * typed. Returns a callback that puts the selection back on the same nodes.
+ *
+ * Like `removeEmptyTextNode`, it leaves the selection alone once focus has
+ * left the editor, because selecting would take focus back.
+ */
+function keepSelection(jodit, elm) {
+    const { sel } = jodit.s;
+    if (!(sel === null || sel === void 0 ? void 0 : sel.anchorNode) || !sel.focusNode || !jodit.s.isFocused()) {
+        return null;
+    }
+    const { anchorNode, anchorOffset, focusNode, focusOffset } = sel;
+    if (!Dom.isOrContains(elm, anchorNode) &&
+        !Dom.isOrContains(elm, focusNode)) {
+        return null;
+    }
+    return (newElm) => {
+        sel.setBaseAndExtent(anchorNode === elm ? newElm : anchorNode, anchorOffset, focusNode === elm ? newElm : focusNode, focusOffset);
+    };
+}

package/esm/plugins/dtd/before-insert/check-block-nesting.d.ts

@@ -10,7 +10,8 @@
 import type { IJodit, Nullable } from "../../../types/index";
 /**
  * Checks whether the insertion of an element at the current location is allowed,
- * if it is not allowed, it deletes an empty block element or moves the cursor after it
+ * if it is not allowed, it deletes an empty block element, moves the cursor
+ * before or after it, or splits it at the cursor
  * @internal
  */
 export declare function checkBlockNesting(jodit: IJodit, node: Nullable<Node>): void;

package/esm/plugins/dtd/before-insert/check-block-nesting.js

@@ -4,9 +4,33 @@
  * Copyright (c) 2013-2026 Valerii Chupurnov. All rights reserved. https://xdsoft.net
  */
 import { Dom } from "../../../core/dom/dom.js";
+/**
+ * Moves the cursor out of a block that can't hold the inserted block: before
+ * or after it when the cursor is at its edge, or between its two halves when
+ * the cursor is inside its content. An empty block is removed
+ */
+function moveCursorOutOf(jodit, parent) {
+    var _a;
+    const { s } = jodit;
+    if (Dom.isEmpty(parent)) {
+        s.setCursorAfter(parent);
+        Dom.safeRemove(parent);
+        return;
+    }
+    if (s.cursorOnTheRight(parent)) {
+        s.setCursorAfter(parent);
+        return;
+    }
+    if (s.cursorOnTheLeft(parent)) {
+        s.setCursorBefore(parent);
+        return;
+    }
+    s.setCursorAfter((_a = s.splitSelection(parent)) !== null && _a !== void 0 ? _a : parent);
+}
 /**
  * Checks whether the insertion of an element at the current location is allowed,
- * if it is not allowed, it deletes an empty block element or moves the cursor after it
+ * if it is not allowed, it deletes an empty block element, moves the cursor
+ * before or after it, or splits it at the cursor
  * @internal
  */
 export function checkBlockNesting(jodit, node) {
@@ -42,10 +66,7 @@ export function checkBlockNesting(jodit, node) {
             parent = current;
         }
         if (parent) {
-            jodit.s.setCursorAfter(parent);
-            if (Dom.isEmpty(parent)) {
-                Dom.safeRemove(parent);
-            }
+            moveCursorOutOf(jodit, parent);
         }
     }
 }

package/esm/plugins/enter/helpers/move-cursor-out-from-specal-tags.js

@@ -18,5 +18,13 @@ export function moveCursorOutFromSpecialTags(jodit, fake, tags) {
         else if (s.cursorOnTheLeft(link, fake)) {
             Dom.before(link, fake);
         }
+        else {
+            return;
+        }
+        // The block is split at the caret, so the caret leaves the link too:
+        // beside the fake, since Safari mislays a caret inside a removed node
+        const range = s.createRange();
+        range.setStartBefore(fake);
+        s.selectRange(range);
     }
 }

package/esm/plugins/focus/focus.js

@@ -3,6 +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 } from "../../core/constants.js";
 import { Dom } from "../../core/dom/index.js";
 import { pluginSystem } from "../../core/global.js";
 import { Config } from "../../config.js";
@@ -77,9 +78,11 @@ export function focus(editor) {
         editor.e
             .off(editor.editor, 'mousedown.autofocus')
             .on(editor.editor, 'mousedown.autofocus', (e) => {
+            // An empty block takes the caret, but a video, say, can't hold one
             if (editor.isEditorMode() &&
                 e.target &&
                 Dom.isBlock(e.target) &&
+                !Dom.isTag(e.target, INSEPARABLE_TAGS) &&
                 !e.target.childNodes.length) {
                 if (editor.editor === e.target) {
                     editor.s.focus();

package/esm/plugins/hr/hr.js

@@ -20,18 +20,34 @@ export function hr(editor) {
         group: 'insert'
     });
     editor.registerCommand('insertHorizontalRule', () => {
+        var _a;
         const elm = editor.createInside.element('hr');
         editor.s.insertNode(elm, false, false);
         const block = Dom.closest(elm.parentElement, Dom.isBlock, editor.editor);
-        if (block && Dom.isEmpty(block) && block !== editor.editor) {
+        // A block that holds other blocks, such as a list item or a table
+        // cell, keeps the line
+        if (block &&
+            Dom.isEmpty(block) &&
+            block !== editor.editor &&
+            !((_a = editor.o.dtd) === null || _a === void 0 ? void 0 : _a.blockLimits[block.nodeName.toLowerCase()])) {
             Dom.after(block, elm);
             Dom.safeRemove(block);
         }
-        let p = Dom.next(elm, Dom.isBlock, editor.editor, false);
-        if (!p) {
-            p = editor.createInside.element(editor.o.enter);
-            Dom.after(elm, p);
+        const next = Dom.findNotEmptySibling(elm, false);
+        if (Dom.isBlock(next)) {
+            editor.s.setCursorIn(next, true);
+            return false;
         }
+        // In a list item or a table cell the text goes on after the line, as
+        // it does with the browsers' own command
+        if (next ||
+            (elm.parentNode !== editor.editor &&
+                !Dom.isBlock(Dom.findNotEmptySibling(elm, true)))) {
+            editor.s.setCursorAfter(elm);
+            return false;
+        }
+        const p = editor.createInside.element(editor.o.enter);
+        Dom.after(elm, p);
         editor.s.setCursorIn(p);
         return false;
     });

package/esm/plugins/iframe/config.js

@@ -51,13 +51,15 @@ Config.prototype.iframeStyle =
         'p{' +
         'margin-top:0;' +
         '}' +
-        '.jodit_editor .jodit_iframe_wrapper{' +
+        '[data-jodit_iframe_wrapper]{' +
         'display: block;' +
-        'clear: both;' +
         'user-select: none;' +
         'position: relative;' +
         '}' +
-        '.jodit_editor .jodit_iframe_wrapper:after {' +
+        '[data-jodit_iframe_wrapper] iframe{' +
+        'position: relative;' +
+        '}' +
+        '[data-jodit_iframe_wrapper]:after {' +
         'position:absolute;' +
         'content:"";' +
         'z-index:1;' +
@@ -69,6 +71,9 @@ Config.prototype.iframeStyle =
         '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' +

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

@@ -17,13 +17,14 @@ import { INVISIBLE_SPACE_REG_EXP, SOURCE_CONSUMER } from "../../core/constants.j
 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 { $$, 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
  */
@@ -66,7 +67,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 +121,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;

package/esm/plugins/inline-popup/config/items/iframe.js

@@ -5,6 +5,14 @@
  */
 import { align } from "./img.js";
 export default [
+    {
+        name: 'replace',
+        icon: 'video',
+        tooltip: 'Replace',
+        popup: (editor, target, close) => target
+            ? editor.e.fire('generateReplaceVideoTabs', target, close)
+            : undefined
+    },
     {
         name: 'bin',
         tooltip: 'Delete',
@@ -12,5 +20,12 @@ export default [
             image && editor.s.removeNode(image);
         }
     },
+    {
+        name: 'pencil',
+        tooltip: 'Edit',
+        exec: (editor, target) => {
+            target && editor.e.fire('openVideoProperties', target);
+        }
+    },
     align
 ];

package/esm/plugins/inline-popup/inline-popup.d.ts

@@ -20,6 +20,11 @@ export declare class inlinePopup extends Plugin {
     private get popup();
     private get toolbar();
     private onClick;
+    /**
+     * The box the popup opens beside: the target's, with room for the
+     * resizer's handles when the target gets them, so it doesn't cover them
+     */
+    private __bound;
     /**
      * Show inline popup with some toolbar
      *

package/esm/plugins/inline-popup/inline-popup.js

@@ -16,7 +16,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { autobind, cache, debounce, wait, watch } from "../../core/decorators/index.js";
 import { Dom } from "../../core/dom/index.js";
 import { pluginSystem } from "../../core/global.js";
-import { camelCase, getMediaWrapper, isArray, isFunction, isString, keys, position, splitArray, toArray } from "../../core/helpers/index.js";
+import { camelCase, getMediaWrapper, getWrappedMedia, isArray, isFunction, isString, keys, position, splitArray, toArray } from "../../core/helpers/index.js";
 import { Plugin } from "../../core/plugin/index.js";
 import { UIElement } from "../../core/ui/index.js";
 import { Popup } from "../../core/ui/popup/index.js";
@@ -53,10 +53,34 @@ export class inlinePopup extends Plugin {
             ? 'jodit-media'
             : target === null || target === void 0 ? void 0 : target.nodeName.toLowerCase();
         if (target && type && this.canShowPopupForType(type)) {
-            this.showPopup(() => position(target, this.j), type, target);
+            const isMedia = type === 'jodit-media';
+            // Beside the media in a wrapper kept in the content, which can fill
+            // the line
+            const bound = (mediaWrapper && getWrappedMedia(this.j, mediaWrapper)) ||
+                target;
+            this.showPopup(() => this.__bound(bound, isMedia), type, target);
             return false;
         }
     }
+    /**
+     * The box the popup opens beside: the target's, with room for the
+     * resizer's handles when the target gets them, so it doesn't cover them
+     */
+    __bound(target, isMedia) {
+        const bound = position(target, this.j);
+        const resizable = this.j.o.allowResizeTags;
+        if (!isMedia && !(resizable && Dom.isTag(target, resizable))) {
+            return bound;
+        }
+        const room = parseInt(this.j.ow
+            .getComputedStyle(this.j.container)
+            .getPropertyValue('--jd-resizer-handle-size'), 10) / 2 || 0;
+        return {
+            ...bound,
+            top: bound.top - room,
+            height: bound.height + room * 2
+        };
+    }
     /**
      * Show inline popup with some toolbar
      *