jodit 4.18.1 → 4.18.3

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/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
      *

package/esm/plugins/link/link.js

@@ -16,7 +16,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { autobind } from "../../core/decorators/index.js";
 import { Dom } from "../../core/dom/index.js";
 import { pluginSystem } from "../../core/global.js";
-import { attr, call, convertMediaUrlToVideoEmbed, isString, isURL, refs, stripTags } from "../../core/helpers/index.js";
+import { attr, call, convertMediaUrlToVideoEmbed, isString, isURL, prepareEmbedCode, refs, stripTags } from "../../core/helpers/index.js";
 import { Plugin } from "../../core/plugin/index.js";
 import "./config.js";
 /**
@@ -85,7 +85,10 @@ export class link extends Plugin {
                 height: (_d = jodit.o.video) === null || _d === void 0 ? void 0 : _d.defaultHeight
             });
             if (embed !== html) {
-                return jodit.createInside.fromHTML(embed);
+                const media = prepareEmbedCode(jodit, embed);
+                return isString(media)
+                    ? jodit.createInside.fromHTML(media)
+                    : media;
             }
         }
         if (jodit.s.isCollapsed()) {

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

@@ -28,7 +28,8 @@ declare module 'jodit/config' {
          * - is wrapped in it instead of the editor-only `mediaFakeTag` when its tag
          * is one of `mediaBlocks`, or left in it when it's already in one
          * - goes in inside it when the video popup inserts it, as an upload, a
-         * link's embed or embed code that is one element
+         * link's embed or embed code that is one element, and when a pasted
+         * video link is turned into its embed
          * - opens the media popup for its wrapper when clicked, whose Align and
          * Delete act on the wrapper
          *

package/esm/plugins/media/media.js

@@ -5,7 +5,7 @@
  */
 import * as consts from "../../core/constants.js";
 import { Dom } from "../../core/dom/dom.js";
-import { pluginSystem } from "../../core/global.js";
+import { getContainer, pluginSystem } from "../../core/global.js";
 import { $$, attr, dataBind, getMediaWrapper, wrapMedia } from "../../core/helpers/utils/index.js";
 import { css, cssInline } from "../../core/helpers/utils/css.js";
 import "./config.js";
@@ -49,12 +49,31 @@ export function media(editor) {
         else {
             return;
         }
+        // Selected, as an image is, so Delete and Backspace remove it
         editor.e
             .off(element, 'mousedown.select touchstart.select')
             .on(element, 'mousedown.select touchstart.select', () => {
-            editor.s.setCursorAfter(element);
+            editor.s.select(element);
         });
     };
+    // Media in a wrapper kept in the content let clicks through to it, as
+    // jodit-media covers its media, so a click selects the media rather than
+    // playing it. An inline wrapper holds it as an inline-block, unless its
+    // classes or style give it a display of their own
+    const wrappers = Object.values(mediaWrappers);
+    if (wrappers.length) {
+        editor.e.on('afterInit', () => {
+            const selectors = (list) => [...new Set(list)].join(',');
+            const scoped = ({ tag, className }) => `.jodit-wysiwyg ${tag}.${className}`;
+            const inline = selectors(wrappers
+                .filter(({ tag }) => consts.IS_INLINE.test(tag))
+                .map(scoped));
+            const media = selectors(wrappers.flatMap(wrapper => mediaBlocks.map(tag => `${scoped(wrapper)}>${tag}`)));
+            getContainer(editor, 'media-wrappers', 'style', true).innerHTML =
+                (inline ? `:where(${inline}){display:inline-block}` : '') +
+                    `${media}{pointer-events:none}`;
+        });
+    }
     if (mediaInFakeBlock || Object.keys(mediaWrappers).length) {
         editor.e
             .on('afterGetValueFromEditor', (data) => {

package/esm/plugins/paste/helpers.d.ts

@@ -8,6 +8,14 @@
  */
 import type { IDialog, IJodit, InsertMode, IUIOption, Nullable } from "../../types/index";
 import type { PasteEvent } from "./interface";
+/**
+ * Google Docs wraps the copied content in
+ * `<b style="font-weight:normal;" id="docs-internal-guid-…">`. Kept, the
+ * wrapper holds the pasted blocks, and without its style it makes the whole
+ * paste bold
+ * @private
+ */
+export declare function removeGoogleDocsWrapper(html: string): string;
 /**
  * One insert point for clipboard plugins
  * @private

package/esm/plugins/paste/helpers.js

@@ -5,6 +5,7 @@
  */
 import { TEXT_PLAIN } from "../../core/constants.js";
 import { Dom } from "../../core/dom/dom.js";
+import { toArray } from "../../core/helpers/array/to-array.js";
 import { isArray, isNumber, isString, isVoid } from "../../core/helpers/checker/index.js";
 import { Button } from "../../core/ui/button/button/button.js";
 /**
@@ -23,6 +24,22 @@ function removeExtraFragments(html) {
     }
     return html;
 }
+/**
+ * Google Docs wraps the copied content in
+ * `<b style="font-weight:normal;" id="docs-internal-guid-…">`. Kept, the
+ * wrapper holds the pasted blocks, and without its style it makes the whole
+ * paste bold
+ * @private
+ */
+export function removeGoogleDocsWrapper(html) {
+    if (!/<b\s[^>]*docs-internal-guid-/i.test(html)) {
+        return html;
+    }
+    // An inert document: images don't load and handlers don't run
+    const { body } = new DOMParser().parseFromString(html, 'text/html');
+    toArray(body.querySelectorAll('b[id^="docs-internal-guid-"]')).forEach(Dom.unwrap);
+    return body.innerHTML;
+}
 /**
  * @private
  */
@@ -46,7 +63,7 @@ export function pasteInsertHtml(e, editor, html) {
         html = result;
     }
     if (isString(html)) {
-        html = removeExtraFragments(html);
+        html = removeExtraFragments(removeGoogleDocsWrapper(html));
     }
     editor.s.insertHTML(html);
 }

package/esm/plugins/paste/paste.js

@@ -20,7 +20,7 @@ import { pluginSystem } from "../../core/global.js";
 import { cleanFromWord, getDataTransfer, htmlspecialchars, isHTML, isString, LimitedStack, nl2br, stripTags, trim } from "../../core/helpers/index.js";
 import { Plugin } from "../../core/plugin/plugin.js";
 import "./config.js";
-import { askInsertTypeDialog, getAllTypes, pasteInsertHtml } from "./helpers.js";
+import { askInsertTypeDialog, getAllTypes, pasteInsertHtml, removeGoogleDocsWrapper } from "./helpers.js";
 /**
  * Ask before paste HTML source
  */
@@ -143,7 +143,7 @@ export class paste extends Plugin {
             this.j.buffer.set(CLIPBOARD_ID, html);
             switch (action) {
                 case INSERT_CLEAR_HTML:
-                    html = cleanFromWord(html);
+                    html = cleanFromWord(removeGoogleDocsWrapper(html));
                     break;
                 case INSERT_ONLY_TEXT:
                     html = stripTags(html, this.j.ed, new Set(this.j.o.pasteExcludeStripTags), this.j.o.nl2brInPlainText);

package/esm/plugins/resizer/resizer.js

@@ -160,7 +160,8 @@ export class resizer extends Plugin {
             .off(editor.ow, '.resizer')
             .on(editor.editor, 'keydown.resizer', (e) => {
             if (this.isShown &&
-                e.key === consts.KEY_DELETE &&
+                (e.key === consts.KEY_DELETE ||
+                    e.key === consts.KEY_BACKSPACE) &&
                 this.element &&
                 !Dom.isTag(this.element, 'table')) {
                 this.onDelete(e);
@@ -396,8 +397,12 @@ export class resizer extends Plugin {
             })
                 .off(element, 'changesize')
                 .on(element, 'changesize', () => {
-                attr(iframe, 'width', element.offsetWidth + 'px');
-                attr(iframe, 'height', element.offsetHeight + 'px');
+                // Only a resize sets the embed's size, and as the plain numbers
+                // the attributes take, so a click leaves `width="100%"` alone
+                if (this.isResizeMode) {
+                    attr(iframe, 'width', element.offsetWidth);
+                    attr(iframe, 'height', element.offsetHeight);
+                }
             });
         }
         this.j.e.on(element, 'dragstart', this.hide);

package/esm/plugins/select-cells/select-cells.d.ts

@@ -52,10 +52,20 @@ export declare class selectCells extends Plugin {
      * Execute custom commands for table
      */
     private onExecCommand;
+    /**
+     * The cell that takes the caret when rows or columns are deleted: the next
+     * one in the same column (or row) that is not deleted, else the previous one
+     */
+    private __nearestCell;
     /**
      * Add some align after native command
      */
     private onAfterCommand;
+    /**
+     * Remove the table and put the caret where it stood: at the start of what
+     * follows it, else at the end of what precedes it
+     */
+    private __removeTable;
     /** @override */
     protected beforeDestruct(jodit: IJodit): void;
 }

package/esm/plugins/select-cells/select-cells.js

@@ -17,7 +17,7 @@ import { KEY_TAB } from "../../core/constants.js";
 import { autobind, watch } from "../../core/decorators/index.js";
 import { Dom } from "../../core/dom/dom.js";
 import { pluginSystem } from "../../core/global.js";
-import { $$, alignElement, position } from "../../core/helpers/index.js";
+import { $$, alignElement, position, toArray } from "../../core/helpers/index.js";
 import { Plugin } from "../../core/plugin/index.js";
 import { Table } from "../../modules/table/table.js";
 import "./config.js";
@@ -316,15 +316,23 @@ export class selectCells extends Plugin {
                         this.__tableModule.mergeSelected(table);
                         break;
                     case 'empty':
-                        cells.forEach(td => Dom.detach(td));
+                        cells.forEach(td => {
+                            Dom.detach(td);
+                            Dom.append(td, this.j.createInside.element('br'));
+                        });
                         break;
                     case 'bin':
-                        Dom.safeRemove(table);
+                        this.__removeTable(table);
                         break;
                     case 'binrow':
-                        new Set(cells.map(td => td.parentNode)).forEach(row => {
-                            this.__tableModule.removeRow(table, row.rowIndex);
-                        });
+                        {
+                            const rows = new Set(cells.map(td => td.parentNode));
+                            const next = this.__nearestCell(table, cell, toArray(rows).map(row => row.rowIndex), true);
+                            rows.forEach(row => {
+                                this.__tableModule.removeRow(table, row.rowIndex);
+                            });
+                            next && this.j.s.setCursorIn(next);
+                        }
                         break;
                     case 'bincolumn':
                         {
@@ -337,11 +345,13 @@ export class selectCells extends Plugin {
                                     columnsSet.add(col);
                                 }
                             });
+                            const next = this.__nearestCell(table, cell, columns, false);
                             columns
                                 .sort((a, b) => b - a)
                                 .forEach(col => {
                                 this.__tableModule.removeColumn(table, col);
                             });
+                            next && this.j.s.setCursorIn(next);
                         }
                         break;
                     case 'addcolumnafter':
@@ -353,10 +363,39 @@ export class selectCells extends Plugin {
                         this.__tableModule.appendRow(table, cell.parentNode, command === 'addrowafter');
                         break;
                 }
+                if (/^bin(row|column)$/.test(command) &&
+                    !this.__tableModule.getColumnsCount(table)) {
+                    this.__removeTable(table);
+                }
             }
             return false;
         }
     }
+    /**
+     * The cell that takes the caret when rows or columns are deleted: the next
+     * one in the same column (or row) that is not deleted, else the previous one
+     */
+    __nearestCell(table, cell, deleted, isRow) {
+        const box = this.__tableModule.formalMatrix(table);
+        const [row, column] = this.__tableModule.formalCoordinate(table, cell);
+        const start = isRow ? row : column;
+        const count = isRow ? box.length : box[row].length;
+        const find = (i) => (!deleted.includes(i) && (isRow ? box[i][column] : box[row][i])) ||
+            null;
+        for (let i = start + 1; i < count; i += 1) {
+            const next = find(i);
+            if (next) {
+                return next;
+            }
+        }
+        for (let i = start - 1; i >= 0; i -= 1) {
+            const prev = find(i);
+            if (prev) {
+                return prev;
+            }
+        }
+        return null;
+    }
     /**
      * Add some align after native command
      */
@@ -367,6 +406,15 @@ export class selectCells extends Plugin {
                 .forEach(elm => alignElement(command, elm));
         }
     }
+    /**
+     * Remove the table and put the caret where it stood: at the start of what
+     * follows it, else at the end of what precedes it
+     */
+    __removeTable(table) {
+        const parent = table.parentNode, next = Dom.findNotEmptySibling(table, false), prev = Dom.findNotEmptySibling(table, true);
+        Dom.safeRemove(table);
+        this.j.s.setCursorIn(next || prev || parent, Boolean(next));
+    }
     /** @override */
     beforeDestruct(jodit) {
         this.__onRemoveSelection();

package/esm/plugins/table/config.js

@@ -16,6 +16,44 @@ Config.prototype.table = {
     useExtraClassesOptions: false
 };
 Icon.set('table', tableIcon);
+/**
+ * Elements in `dtd.blockLimits` that hold only rows, cells or list items, so
+ * a table can't go directly inside them
+ */
+const ROW_AND_ITEM_HOLDERS = new Set([
+    'table',
+    'thead',
+    'tbody',
+    'tfoot',
+    'tr',
+    'ul',
+    'ol',
+    'dl'
+]);
+/**
+ * The nearest block around the cursor that can hold the new table: an element
+ * in `dtd.blockLimits`, such as a table cell, a list item or a `<div>`. The
+ * cursor's own block of the `enter` tag is a line, not a container, as in the
+ * dtd plugin's `checkBlockNesting`
+ */
+function findTableContainer(editor, current) {
+    const line = Dom.closest(current, Dom.isBlock, editor.editor);
+    const container = Dom.closest(current, node => {
+        var _a;
+        if (!Dom.isElement(node) ||
+            (node === line && Dom.isTag(node, editor.o.enter))) {
+            return false;
+        }
+        const tag = node.nodeName.toLowerCase();
+        return (Boolean((_a = editor.o.dtd) === null || _a === void 0 ? void 0 : _a.blockLimits[tag]) &&
+            !ROW_AND_ITEM_HOLDERS.has(tag));
+    }, editor.editor);
+    // With the cursor between two rows, `current` is the next row's text
+    return container &&
+        Dom.isOrContains(container, editor.s.range.startContainer)
+        ? container
+        : null;
+}
 Config.prototype.controls.table = {
     data: {
         cols: 10,
@@ -129,7 +167,13 @@ Config.prototype.controls.table = {
             editor.s.removeMarkers();
             editor.editor.normalize();
             editor.history.snapshot.restore(snapshot);
-            const block = Dom.furthest(editor.s.current(), Dom.isBlock, editor.editor);
+            const current = editor.s.current();
+            // The table goes into the cell, list item or box holding the
+            // cursor, and only a block inside it is split
+            const container = findTableContainer(editor, current);
+            const block = container === current
+                ? null
+                : Dom.furthest(current, Dom.isBlock, container !== null && container !== void 0 ? container : editor.editor);
             if (block && Dom.isEmpty(block)) {
                 Dom.replace(block, table, undefined, false, true);
             }
@@ -155,6 +199,12 @@ Config.prototype.controls.table = {
                         }
                     }
                 }
+                else if (container &&
+                    !Dom.isEmpty(container) &&
+                    !editor.o.table.splitBlockOnInsertTable) {
+                    // With no block to go after, the table goes after the text
+                    Dom.append(container, table);
+                }
                 else {
                     editor.s.insertNode(table, false);
                 }

package/esm/plugins/table-keyboard-navigation/table-keyboard-navigation.js

@@ -72,7 +72,7 @@ export function tableKeyboardNavigation(editor) {
             editor.s.setCursorBefore(first);
         }
         else {
-            if (key === consts.KEY_TAB) {
+            if (key === consts.KEY_TAB && !Dom.isEmpty(next)) {
                 editor.s.select(next, true);
             }
             else {

package/esm/plugins/video/config.js

@@ -3,23 +3,13 @@
  * 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 { call, convertMediaUrlToVideoEmbed, getAlignClasses, hAlignElement, wrapMedia } from "../../core/helpers/index.js";
+import { call, convertMediaUrlToVideoEmbed, prepareEmbedCode, prepareMedia } from "../../core/helpers/index.js";
 import { Button } from "../../core/ui/button/index.js";
 import { UIBlock, UIForm, UIInput, UITextArea } from "../../core/ui/form/index.js";
 import { Icon } from "../../core/ui/icon.js";
 import { Config } from "../../config.js";
 import { TabsWidget, UploadTab } from "../../modules/widget/index.js";
 import videoIcon from "./video.svg.js";
-// Media the popup inserts go in their wrapper (see `mediaWrappers`), aligned
-// with `mediaDefaultAlign`
-function prepareMedia(jodit, element) {
-    const media = wrapMedia(jodit, element);
-    const { mediaDefaultAlign } = jodit.o;
-    if (mediaDefaultAlign && mediaDefaultAlign !== 'normal') {
-        hAlignElement(media, mediaDefaultAlign, getAlignClasses(jodit, media));
-    }
-    return media;
-}
 function insertVideos(data) {
     var _a;
     (_a = data.files) === null || _a === void 0 ? void 0 : _a.forEach(file => {
@@ -29,16 +19,6 @@ function insertVideos(data) {
         })));
     });
 }
-// Embed code that is one element is prepared as media; other code goes in as
-// it is
-function prepareEmbedCode(jodit, code) {
-    const box = jodit.createInside.div();
-    box.innerHTML = code.trim();
-    const element = box.firstElementChild;
-    return element && box.childNodes.length === 1
-        ? prepareMedia(jodit, element)
-        : code;
-}
 Config.prototype.video = {
     parseUrlToVideoEmbed: convertMediaUrlToVideoEmbed,
     defaultWidth: 400,
@@ -107,7 +87,11 @@ Config.prototype.controls.video = {
         formCode.onSubmit(data => {
             insertCode(data.code);
         });
-        return TabsWidget(jodit, tabs);
+        const box = TabsWidget(jodit, tabs);
+        // Its tabs are sized to their labels, as the file selector's are, since
+        // "Upload" doesn't fit a third of the popup
+        box.classList.add('jodit-file-selector');
+        return box;
     },
     tags: ['iframe'],
     tooltip: 'Insert youtube/vimeo video'

package/package.json

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