jodit 4.18.3 → 4.18.6

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

@@ -37,6 +37,17 @@ export declare class inlinePopup extends Plugin {
      */
     private hidePopup;
     protected onOutsideClick(): void;
+    /**
+     * A key that moves the caret off an element closes its popup, and one
+     * that moves the caret into an element with a popup (a link) opens it,
+     * as clicks do
+     */
+    protected onKeyUp(): void;
+    private __followCaret;
+    /**
+     * The element with a popup that holds `node`
+     */
+    private __elementAt;
     /**
      * Can show popup for this type
      */
@@ -53,6 +64,13 @@ export declare class inlinePopup extends Plugin {
      * while the selection is still there. See #1238
      */
     private __reopenSelectionPopup;
+    /**
+     * The alignment controls fire `recalcPositionPopup` once they have moved
+     * the element, and their button then fires `closeAllPopups`. The popup
+     * opens again beside the element, as the selection toolbar does
+     */
+    private __reopenFor;
+    protected onRecalcPositionPopup(): void;
     private __onDocumentMouseDown;
     private __onCloseAllPopups;
     /**
@@ -64,6 +82,7 @@ export declare class inlinePopup extends Plugin {
     private __selectionBound;
     private snapRange;
     private onSelectionStart;
+    private __keyDownElement;
     private onSelectionEnd;
     /**
      * Selection change handler

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

@@ -18,6 +18,7 @@ import { Dom } from "../../core/dom/index.js";
 import { pluginSystem } from "../../core/global.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 { isMoved } from "../../core/selection/helpers/index.js";
 import { UIElement } from "../../core/ui/index.js";
 import { Popup } from "../../core/ui/popup/index.js";
 import { makeCollection } from "../../modules/toolbar/factory.js";
@@ -35,7 +36,14 @@ export class inlinePopup extends Plugin {
          * while the selection is still there. See #1238
          */
         this.__reopenSelectionPopup = false;
+        /**
+         * The alignment controls fire `recalcPositionPopup` once they have moved
+         * the element, and their button then fires `closeAllPopups`. The popup
+         * opens again beside the element, as the selection toolbar does
+         */
+        this.__reopenFor = null;
         this.snapRange = null;
+        this.__keyDownElement = null;
         this.elmsList = keys(this.j.o.popup, false).filter(s => !this.isExcludedTarget(s));
     }
     get popup() {
@@ -129,6 +137,38 @@ export class inlinePopup extends Plugin {
     onOutsideClick() {
         this.popup.close();
     }
+    /**
+     * A key that moves the caret off an element closes its popup, and one
+     * that moves the caret into an element with a popup (a link) opens it,
+     * as clicks do
+     */
+    onKeyUp() {
+        this.__followCaret();
+    }
+    __followCaret() {
+        if (!isMoved(this.j, this.snapRange)) {
+            return;
+        }
+        const { range } = this.j.s;
+        const target = this.previousTarget;
+        if (this.popup.isOpened &&
+            this.type !== 'selection' &&
+            target &&
+            !range.intersectsNode(target)) {
+            this.popup.close();
+        }
+        const node = range.startContainer;
+        const element = this.__elementAt(node);
+        if (range.collapsed && element && element !== this.__keyDownElement) {
+            this.onClick(node);
+        }
+    }
+    /**
+     * The element with a popup that holds `node`
+     */
+    __elementAt(node) {
+        return Dom.closest(node, this.elmsList, this.j.editor);
+    }
     /**
      * Can show popup for this type
      */
@@ -183,7 +223,15 @@ export class inlinePopup extends Plugin {
             .on('closeAllPopups', this.__onCloseAllPopups);
         this.addListenersForElements();
     }
+    onRecalcPositionPopup() {
+        if (this.popup.isOpened &&
+            this.type !== 'selection' &&
+            this.previousTarget) {
+            this.__reopenFor = this.previousTarget;
+        }
+    }
     __onDocumentMouseDown(e) {
+        this.__reopenFor = null;
         if (this.popup.isOpened &&
             this.type === 'selection' &&
             e.target &&
@@ -192,6 +240,16 @@ export class inlinePopup extends Plugin {
         }
     }
     __onCloseAllPopups() {
+        const target = this.__reopenFor;
+        if (target) {
+            this.__reopenFor = null;
+            // After the popup's own `closeAllPopups` handler, as below
+            this.j.async.setTimeout(() => {
+                if (this.j.editor.contains(target)) {
+                    this.onClick(target);
+                }
+            }, 1);
+        }
         if (!this.__reopenSelectionPopup) {
             return;
         }
@@ -224,8 +282,13 @@ export class inlinePopup extends Plugin {
         }
         return { left, top, width: rect.width, height: rect.height };
     }
-    onSelectionStart() {
+    onSelectionStart(event) {
+        // A key held down moves the caret on every repeat, with one keyup
+        if (event === null || event === void 0 ? void 0 : event.repeat) {
+            this.__followCaret();
+        }
         this.snapRange = this.j.s.range.cloneRange();
+        this.__keyDownElement = this.__elementAt(this.snapRange.startContainer);
     }
     onSelectionEnd(e) {
         if (e &&
@@ -339,6 +402,12 @@ __decorate([
 __decorate([
     watch(':outsideClick')
 ], inlinePopup.prototype, "onOutsideClick", null);
+__decorate([
+    watch(':keyup')
+], inlinePopup.prototype, "onKeyUp", null);
+__decorate([
+    watch(':recalcPositionPopup')
+], inlinePopup.prototype, "onRecalcPositionPopup", null);
 __decorate([
     autobind
 ], inlinePopup.prototype, "__onDocumentMouseDown", null);

package/esm/plugins/media/media.js

@@ -26,6 +26,7 @@ export function media(editor) {
                 (_a = getMediaWrapper(editor, element)) !== null && _a !== void 0 ? _a : wrapMedia(editor, element);
         }
         else if (mediaInFakeBlock) {
+            const media = element;
             const wrapper = editor.createInside.element(mediaFakeTag, {
                 'data-jodit-temp': 1,
                 contenteditable: false,
@@ -33,13 +34,21 @@ export function media(editor) {
                 [`data-${keyFake}`]: 1
             });
             attr(wrapper, 'style', attr(element, 'style'));
-            css(wrapper, {
-                display: cssInline(element, 'display') === 'inline-block'
-                    ? 'inline-block'
-                    : 'block',
-                width: element.offsetWidth,
-                height: element.offsetHeight
-            });
+            // The wrapper fits the media, whose size changes as its metadata loads
+            // and as it's resized. A percentage width is of the line, so it takes that
+            const fit = () => {
+                css(wrapper, {
+                    display: cssInline(media, 'display') === 'inline-block'
+                        ? 'inline-block'
+                        : 'block',
+                    width: cssInline(media, 'width').endsWith('%')
+                        ? ''
+                        : 'fit-content',
+                    height: ''
+                });
+            };
+            fit();
+            editor.e.on(media, 'changesize', fit);
             if (element.parentNode) {
                 Dom.before(element, wrapper);
             }

package/esm/plugins/ordered-list/config.js

@@ -8,10 +8,19 @@ import { Icon } from "../../core/ui/icon.js";
 import { Config } from "../../config.js";
 import olIcon from "./icons/ol.svg.js";
 import ulIcon from "./icons/ul.svg.js";
+import { closestOrderedList, openStartDialog } from "./start-dialog.js";
+/**
+ * The `ol` dropdown item that asks for the list's start number
+ */
+const START = 'start';
 const memoExec = (jodit, _, { control }) => {
     var _a;
     const key = `button${control.command}`;
     const value = (_a = (control.args && control.args[0])) !== null && _a !== void 0 ? _a : dataBind(jodit, key);
+    if (value === START) {
+        openStartDialog(jodit);
+        return;
+    }
     dataBind(jodit, key, value);
     jodit.execCommand(control.command, false, value === 'default' ? null : value);
 };
@@ -38,7 +47,9 @@ Config.prototype.controls.ol = {
         'lower-greek': 'Lower Greek',
         'lower-roman': 'Lower Roman',
         'upper-alpha': 'Upper Alpha',
-        'upper-roman': 'Upper Roman'
+        'upper-roman': 'Upper Roman',
+        [START]: 'Start at...'
     },
-    exec: memoExec
+    exec: memoExec,
+    isChildDisabled: (jodit, button) => { var _a; return ((_a = button.control.args) === null || _a === void 0 ? void 0 : _a[0]) === START && !closestOrderedList(jodit); }
 };

package/esm/plugins/ordered-list/start-dialog.d.ts

@@ -0,0 +1,19 @@
+/*!
+ * 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/ordered-list
+ */
+import type { IJodit, Nullable } from "../../types/index";
+/**
+ * The numbered list the selection is in
+ */
+export declare function closestOrderedList(jodit: IJodit): Nullable<HTMLOListElement>;
+/**
+ * Asks for the number of the first item of the list the selection is in,
+ * and sets the list's `start`. The selection is put back when the dialog
+ * closes, however it closes.
+ */
+export declare function openStartDialog(jodit: IJodit): void;

package/esm/plugins/ordered-list/start-dialog.js

@@ -0,0 +1,58 @@
+/*!
+ * 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 { Dom } from "../../core/dom/dom.js";
+import { attr } from "../../core/helpers/utils/attr.js";
+import { Button } from "../../core/ui/button/index.js";
+import { UIBlock, UIForm, UIInput } from "../../core/ui/form/index.js";
+/**
+ * The numbered list the selection is in
+ */
+export function closestOrderedList(jodit) {
+    const current = jodit.s.current();
+    return current ? Dom.closest(current, 'ol', jodit.editor) : null;
+}
+/**
+ * Asks for the number of the first item of the list the selection is in,
+ * and sets the list's `start`. The selection is put back when the dialog
+ * closes, however it closes.
+ */
+export function openStartDialog(jodit) {
+    const list = closestOrderedList(jodit);
+    if (!list) {
+        return;
+    }
+    const dialog = jodit.dlg({ resizable: false, closeOnClickOverlay: true });
+    const input = new UIInput(jodit, {
+        name: 'start',
+        type: 'number',
+        label: 'Number for the first item',
+        value: list.start
+    });
+    const form = new UIForm(jodit, [new UIBlock(jodit, [input])]);
+    form.container.classList.add('jodit-dialog_alert');
+    form.onSubmit(({ start }) => {
+        const value = start === '' ? 1 : parseInt(start, 10);
+        if (isNaN(value)) {
+            input.focus();
+            return false;
+        }
+        dialog.close();
+        attr(list, 'start', value === 1 ? null : value);
+        jodit.synchronizeValues();
+    });
+    jodit.s.save();
+    dialog.e.on(dialog, 'afterClose', () => {
+        jodit.s.focus();
+        jodit.s.restore();
+    });
+    dialog.setFooter([
+        Button(jodit, 'cancel', 'Cancel').onAction(() => dialog.close()),
+        Button(jodit, 'ok', 'Apply', 'primary').onAction(() => form.submit())
+    ]);
+    dialog.open(form, jodit.i18n('Start numbering at'), true, true);
+    input.focus();
+    input.nativeInput.select();
+}

package/esm/plugins/placeholder/placeholder.js

@@ -33,6 +33,10 @@ export function isEditorEmpty(root) {
         return true;
     }
     const first = root.firstChild;
+    // Firefox pads an empty editable body with a bare <br>
+    if (Dom.isTag(first, 'br') && !Dom.next(first, Boolean, root)) {
+        return true;
+    }
     if (INSEPARABLE_TAGS.has((_a = first.nodeName) === null || _a === void 0 ? void 0 : _a.toLowerCase()) ||
         /^(TABLE)$/i.test(first.nodeName)) {
         return false;
@@ -69,7 +73,7 @@ export class placeholder extends Plugin {
                 .on('changePlace.placeholder', this.addNativeListeners)
                 .on('change.placeholder focus.placeholder keyup.placeholder mouseup.placeholder keydown.placeholder ' +
                 'mousedown.placeholder afterSetMode.placeholder changePlace.placeholder ' +
-                'internalChange.placeholder afterCommand.placeholder', this.toggle)
+                'internalChange.placeholder afterCommand.placeholder resize.placeholder', this.toggle)
                 .on(window, 'load', this.toggle);
             this.addNativeListeners();
             this.toggle();
@@ -115,12 +119,14 @@ export class placeholder extends Plugin {
             marginTop = parseInt(style2.getPropertyValue('margin-top'), 10);
             marginLeft = parseInt(style2.getPropertyValue('margin-left'), 10);
             css(this.placeholderElm, {
+                fontFamily: style2.getPropertyValue('font-family'),
                 fontSize: parseInt(style2.getPropertyValue('font-size'), 10),
                 lineHeight: style2.getPropertyValue('line-height')
             });
         }
         else {
             css(this.placeholderElm, {
+                fontFamily: style.getPropertyValue('font-family'),
                 fontSize: parseInt(style.getPropertyValue('font-size'), 10),
                 lineHeight: style.getPropertyValue('line-height')
             });

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

@@ -10,7 +10,7 @@ import type { HTMLTagNames } from "../../types/index";
 declare module 'jodit/config' {
     interface Config {
         /**
-         * Set of HTML tag names whose elements can be resized by the user via drag handles (e.g. images, iframes, tables)
+         * Set of HTML tag names whose elements can be resized by the user via drag handles (e.g. images, iframes, tables, videos)
          */
         allowResizeTags: Set<HTMLTagNames>;
         resizer: {
@@ -23,14 +23,16 @@ declare module 'jodit/config' {
              * Save width and height proportions when resizing
              * ```js
              * Jodit.make('#editor', {
-             *   allowResizeTags: ['img', 'iframe', 'table', 'jodit'],
+             *   allowResizeTags: new Set(['img', 'iframe', 'table', 'jodit', 'video']),
              *   resizer: {
              *     useAspectRatio: false, // don't save,
-             *     useAspectRatio: ['img'], // save only for images (default value)
+             *     useAspectRatio: new Set(['img']), // save only for images
              *     useAspectRatio: true // save for all
              *   }
              * });
              * ```
+             * Images and videos keep it by default. A video with no height of its
+             * own keeps it by being given only a width.
              */
             useAspectRatio: boolean | Set<HTMLTagNames>;
             /**

package/esm/plugins/resizer/config.js

@@ -4,12 +4,18 @@
  * Copyright (c) 2013-2026 Valerii Chupurnov. All rights reserved. https://xdsoft.net
  */
 import { Config } from "../../config.js";
-Config.prototype.allowResizeTags = new Set(['img', 'iframe', 'table', 'jodit']);
+Config.prototype.allowResizeTags = new Set([
+    'img',
+    'iframe',
+    'table',
+    'jodit',
+    'video'
+]);
 Config.prototype.resizer = {
     showSize: true,
     hideSizeTimeout: 1000,
     forImageChangeAttributes: true,
     min_width: 10,
     min_height: 10,
-    useAspectRatio: new Set(['img'])
+    useAspectRatio: new Set(['img', 'video'])
 };

package/esm/plugins/resizer/resizer.d.ts

@@ -26,6 +26,7 @@ export declare class resizer extends Plugin {
     private height;
     private ratio;
     private rect;
+    private layer;
     private sizeViewer;
     /** @override */
     protected afterInit(editor: IJodit): void;
@@ -33,6 +34,11 @@ export declare class resizer extends Plugin {
      * Click in the editor area
      */
     protected onEditorClick(e: MouseEvent): void;
+    /**
+     * What a click on `node` resizes: the media in it when it's a media
+     * wrapper (`jodit-media`, or one from `mediaWrappers`), or `node` itself
+     */
+    private __resizable;
     protected __afterInsertImage(image: HTMLImageElement): void;
     private addEventListeners;
     private onStartResizing;
@@ -40,12 +46,26 @@ export declare class resizer extends Plugin {
     private pointerX;
     private pointerY;
     private onResize;
+    private __keyDownRange;
+    private __keyDownTable;
+    private onEditorKeyDown;
+    private __caretTable;
+    /**
+     * Hide the frame once a key has moved the caret off its element, and
+     * frame a table the caret has moved into, as clicks do
+     */
+    protected onEditorKeyUp(): void;
+    private __followCaret;
     private isAltMode;
     private onKeyDown;
     private onKeyUp;
     private onClickOutside;
     private getWorkplacePosition;
     private applySize;
+    /**
+     * The framed element can go with a wrapper round it, keeping its parent
+     */
+    private get isElementInEditor();
     private onDelete;
     private __onChangeEditor;
     /**