jodit 4.18.2 → 4.18.4

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.d.ts

@@ -53,3 +53,9 @@ declare module 'jodit/config' {
         };
     }
 }
+/**
+ * The video popup's tabs: Upload, when the uploader is configured, then Link
+ * and Code. `insert` runs what a tab inserts, which by default goes in at the
+ * selection the popup was opened with.
+ */
+export declare function videoTabs(jodit: IJodit, close: () => void, insert?: (run: () => void) => void): HTMLElement;

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,
@@ -46,69 +26,85 @@ Config.prototype.video = {
     defaultHandlerSuccess: insertVideos
 };
 Icon.set('video', videoIcon);
-Config.prototype.controls.video = {
-    popup: (jodit, current, close) => {
-        const formLink = new UIForm(jodit, [
-            new UIBlock(jodit, [
-                new UIInput(jodit, {
-                    name: 'url',
-                    required: true,
-                    label: 'URL',
-                    placeholder: 'https://',
-                    validators: ['url']
-                })
-            ]),
-            new UIBlock(jodit, [
-                Button(jodit, '', 'Insert', 'primary').onAction(() => formLink.submit())
-            ])
-        ]), formCode = new UIForm(jodit, [
-            new UIBlock(jodit, [
-                new UITextArea(jodit, {
-                    name: 'code',
-                    required: true,
-                    label: 'Embed code'
-                })
-            ]),
-            new UIBlock(jodit, [
-                Button(jodit, '', 'Insert', 'primary').onAction(() => formCode.submit())
-            ])
-        ]), tabs = [], insertCode = (code) => {
-            jodit.s.restore();
-            jodit.s.insertHTML(prepareEmbedCode(jodit, code));
-            close();
-        };
+/**
+ * The video popup's tabs: Upload, when the uploader is configured, then Link
+ * and Code. `insert` runs what a tab inserts, which by default goes in at the
+ * selection the popup was opened with.
+ */
+export function videoTabs(jodit, close, insert) {
+    const run = insert !== null && insert !== void 0 ? insert : ((fn) => {
+        jodit.s.restore();
+        fn();
+    });
+    const formLink = new UIForm(jodit, [
+        new UIBlock(jodit, [
+            new UIInput(jodit, {
+                name: 'url',
+                required: true,
+                label: 'URL',
+                placeholder: 'https://',
+                validators: ['url']
+            })
+        ]),
+        new UIBlock(jodit, [
+            Button(jodit, '', 'Insert', 'primary').onAction(() => formLink.submit())
+        ])
+    ]), formCode = new UIForm(jodit, [
+        new UIBlock(jodit, [
+            new UITextArea(jodit, {
+                name: 'code',
+                required: true,
+                label: 'Embed code'
+            })
+        ]),
+        new UIBlock(jodit, [
+            Button(jodit, '', 'Insert', 'primary').onAction(() => formCode.submit())
+        ])
+    ]), tabs = [], insertCode = (code) => {
+        run(() => jodit.s.insertHTML(prepareEmbedCode(jodit, code)));
+        close();
+    };
+    if (!insert) {
         jodit.s.save();
-        const { uploader } = jodit.o;
-        // Base64 alone would put whole video files into the content
-        if (uploader.showTabInFileSelector !== false &&
-            (uploader.url || uploader.customUploadFunction)) {
-            tabs.push(UploadTab(jodit, data => {
+    }
+    const { uploader } = jodit.o;
+    // Base64 alone would put whole video files into the content
+    if (uploader.showTabInFileSelector !== false &&
+        (uploader.url || uploader.customUploadFunction)) {
+        tabs.push(UploadTab(jodit, data => {
+            run(() => {
                 var _a, _b;
-                jodit.s.restore();
-                ((_b = (_a = jodit.o.video) === null || _a === void 0 ? void 0 : _a.defaultHandlerSuccess) !== null && _b !== void 0 ? _b : insertVideos).call(jodit, data);
-            }, { label: 'Drop file', accept: 'video/*' }));
-        }
-        tabs.push({
-            icon: 'link',
-            name: 'Link',
-            content: formLink.container
-        }, {
-            icon: 'source',
-            name: 'Code',
-            content: formCode.container
-        });
-        formLink.onSubmit(data => {
-            var _a, _b, _c, _d;
-            insertCode(call((_b = (_a = jodit.o.video) === null || _a === void 0 ? void 0 : _a.parseUrlToVideoEmbed) !== null && _b !== void 0 ? _b : convertMediaUrlToVideoEmbed, data.url, {
-                width: (_c = jodit.o.video) === null || _c === void 0 ? void 0 : _c.defaultWidth,
-                height: (_d = jodit.o.video) === null || _d === void 0 ? void 0 : _d.defaultHeight
-            }));
-        });
-        formCode.onSubmit(data => {
-            insertCode(data.code);
-        });
-        return TabsWidget(jodit, tabs);
-    },
+                return ((_b = (_a = jodit.o.video) === null || _a === void 0 ? void 0 : _a.defaultHandlerSuccess) !== null && _b !== void 0 ? _b : insertVideos).call(jodit, data);
+            });
+        }, { label: 'Drop file', accept: 'video/*' }));
+    }
+    tabs.push({
+        icon: 'link',
+        name: 'Link',
+        content: formLink.container
+    }, {
+        icon: 'source',
+        name: 'Code',
+        content: formCode.container
+    });
+    formLink.onSubmit(data => {
+        var _a, _b, _c, _d;
+        insertCode(call((_b = (_a = jodit.o.video) === null || _a === void 0 ? void 0 : _a.parseUrlToVideoEmbed) !== null && _b !== void 0 ? _b : convertMediaUrlToVideoEmbed, data.url, {
+            width: (_c = jodit.o.video) === null || _c === void 0 ? void 0 : _c.defaultWidth,
+            height: (_d = jodit.o.video) === null || _d === void 0 ? void 0 : _d.defaultHeight
+        }));
+    });
+    formCode.onSubmit(data => {
+        insertCode(data.code);
+    });
+    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;
+}
+Config.prototype.controls.video = {
+    popup: (jodit, current, close) => videoTabs(jodit, close),
     tags: ['iframe'],
     tooltip: 'Insert youtube/vimeo video'
 };

package/esm/plugins/video-properties/interface.d.ts

@@ -0,0 +1,31 @@
+/*!
+ * 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/video-properties
+ */
+export type EditedMedia = HTMLVideoElement | HTMLAudioElement | HTMLIFrameElement;
+export interface VideoPropertiesValues {
+    width: number | string;
+    height: number | string;
+    poster: string;
+    autoplay: boolean;
+    loop: boolean;
+    muted: boolean;
+    controls: boolean;
+}
+export interface VideoPropertiesState {
+    /**
+     * What the dialog was opened for: the media, or a wrapper round it
+     */
+    target: HTMLElement;
+    media: EditedMedia;
+    ratio: number;
+    sizeIsLocked: boolean;
+    values: VideoPropertiesValues;
+}
+export interface VideoPropertiesAPI {
+    openPosterPopup: (target: HTMLElement) => void;
+}

package/esm/plugins/video-properties/interface.js

@@ -0,0 +1,6 @@
+/*!
+ * 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
+ */
+export {};

package/esm/plugins/video-properties/readers.d.ts

@@ -0,0 +1,26 @@
+/*!
+ * 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/video-properties
+ */
+import type { Nullable } from "../../types/index";
+import type { EditedMedia, VideoPropertiesState } from "./interface";
+/**
+ * The media `target` is, or holds as its wrapper (`jodit-media`, the resizer's
+ * `jodit` for an embed, or one from `mediaWrappers`)
+ * @private
+ */
+export declare function editedMedia(target: HTMLElement): Nullable<EditedMedia>;
+/**
+ * The size `media` is given, inline or by its attribute
+ * @private
+ */
+export declare function ownSize(media: EditedMedia, key: 'width' | 'height'): string;
+/**
+ * Read the media's values into the state
+ * @private
+ */
+export declare function readValues(state: VideoPropertiesState): void;

package/esm/plugins/video-properties/readers.js

@@ -0,0 +1,65 @@
+/*!
+ * 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 { isNumeric } from "../../core/helpers/checker/is-numeric.js";
+import { attr } from "../../core/helpers/utils/attr.js";
+import { cssInline } from "../../core/helpers/utils/css.js";
+import { normalSizeFromString } from "../image-properties/utils/utils.js";
+const mediaSelector = 'video, audio, iframe';
+/**
+ * The media `target` is, or holds as its wrapper (`jodit-media`, the resizer's
+ * `jodit` for an embed, or one from `mediaWrappers`)
+ * @private
+ */
+export function editedMedia(target) {
+    return (target.matches(mediaSelector)
+        ? target
+        : target.querySelector(mediaSelector));
+}
+/**
+ * The size `media` is given, inline or by its attribute
+ * @private
+ */
+export function ownSize(media, key) {
+    return cssInline(media, key) || attr(media, key) || '';
+}
+const toNumber = (value) => parseFloat(value.toString());
+/**
+ * Read the media's values into the state
+ * @private
+ */
+export function readValues(state) {
+    const { media, values } = state;
+    const width = ownSize(media, 'width');
+    const height = ownSize(media, 'height');
+    values.width = width ? normalSizeFromString(width) : media.offsetWidth;
+    values.height = height ? normalSizeFromString(height) : '';
+    if (Dom.isTag(media, 'video') && media.videoWidth) {
+        state.ratio = media.videoWidth / media.videoHeight;
+    }
+    else if (isNumeric(values.width) && isNumeric(values.height)) {
+        state.ratio = toNumber(values.width) / toNumber(values.height);
+    }
+    else {
+        state.ratio = media.offsetWidth / media.offsetHeight || 1;
+    }
+    // One with no height takes it from its width
+    if (!height && isNumeric(values.width)) {
+        values.height = Math.round(toNumber(values.width) / state.ratio);
+    }
+    state.sizeIsLocked =
+        isNumeric(values.width) &&
+            isNumeric(values.height) &&
+            (!height ||
+                Math.abs(toNumber(values.width) - toNumber(values.height) * state.ratio) < 1);
+    values.poster = attr(media, 'poster') || '';
+    values.autoplay = media.hasAttribute('autoplay');
+    values.loop = media.hasAttribute('loop');
+    // Autoplay's own: turning it off gives the sound back
+    values.muted = media.hasAttribute('muted') && !values.autoplay;
+    // Without Autoplay it keeps its controls, or it could never be played
+    values.controls = media.hasAttribute('controls') || !values.autoplay;
+}

package/esm/plugins/video-properties/replace.d.ts

@@ -0,0 +1,15 @@
+/*!
+ * 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/video-properties
+ */
+import type { IJodit } from "../../types/index";
+/**
+ * Run `insert`, which inserts media at the cursor, with the cursor after
+ * `replaced`, and put what it inserts in place of `replaced`
+ * @private
+ */
+export declare function replaceMedia(j: IJodit, replaced: HTMLElement, insert: () => void): void;

package/esm/plugins/video-properties/replace.js

@@ -0,0 +1,97 @@
+/*!
+ * 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 { css } from "../../core/helpers/utils/css.js";
+import { editedMedia, ownSize, readValues } from "./readers.js";
+import { applyValues } from "./writers.js";
+/**
+ * Give `media`, in `outer`, the classes, inline styles, size and playback
+ * settings of `old`, in `oldOuter`. It keeps its own source and poster.
+ */
+function takeOver(j, oldOuter, old, outer, media) {
+    var _a;
+    const state = {
+        target: oldOuter,
+        media: old,
+        ratio: 1,
+        sizeIsLocked: true,
+        values: {
+            width: '',
+            height: '',
+            poster: '',
+            autoplay: false,
+            loop: false,
+            muted: false,
+            controls: true
+        }
+    };
+    readValues(state);
+    const pairs = [[old, media]];
+    // A wrapper kept in the content, which holds the alignment
+    if (oldOuter !== old &&
+        outer !== media &&
+        oldOuter.nodeName === outer.nodeName) {
+        pairs.push([oldOuter, outer]);
+    }
+    pairs.forEach(([from, to]) => {
+        ['class', 'style'].forEach(name => attr(to, name, attr(from, name)));
+    });
+    // A video's size is CSS and an embed's its attributes, so the writer sizes
+    // one that's a different element
+    if (old.nodeName !== media.nodeName) {
+        css(media, { width: null, height: null });
+        if (!((_a = attr(media, 'style')) === null || _a === void 0 ? void 0 : _a.trim())) {
+            attr(media, 'style', null);
+        }
+    }
+    state.media = media;
+    state.values.poster = attr(media, 'poster') || '';
+    applyValues(j, state, Boolean(ownSize(old, 'width') || ownSize(old, 'height')));
+}
+/**
+ * Run `insert`, which inserts media at the cursor, with the cursor after
+ * `replaced`, and put what it inserts in place of `replaced`
+ * @private
+ */
+export function replaceMedia(j, replaced, insert) {
+    const inserted = [];
+    const collect = (node) => {
+        inserted.push(node);
+    };
+    j.history.snapshot.transaction(() => {
+        j.s.focus();
+        j.s.setCursorAfter(replaced);
+        j.e.on('afterInsertNode', collect);
+        try {
+            insert();
+        }
+        finally {
+            j.e.off('afterInsertNode', collect);
+        }
+        const [outer] = inserted;
+        if (!Dom.isHTMLElement(outer)) {
+            return;
+        }
+        const old = editedMedia(replaced);
+        const media = editedMedia(outer);
+        if (old && media) {
+            takeOver(j, replaced, old, outer, media);
+        }
+        // The resizer can have put an embed in its own wrapper already
+        const placed = Dom.isHTMLElement(outer.parentElement) &&
+            attr(outer.parentElement, 'data-jodit-temp')
+            ? outer.parentElement
+            : outer;
+        // Where the old one was, since media Jodit counts as blocks can be put
+        // after the paragraph
+        Dom.before(replaced, placed);
+        Dom.safeRemove(replaced);
+        j.s.setCursorAfter(placed);
+    });
+    j.synchronizeValues();
+    j.e.fire('closeAllPopups');
+}

package/esm/plugins/video-properties/ui/ui-video-form.d.ts

@@ -0,0 +1,41 @@
+/*!
+ * 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/video-properties
+ */
+import type { IJodit } from "../../../types/index";
+import { UIElement } from "../../../core/ui/element";
+import type { VideoPropertiesAPI, VideoPropertiesState } from "../interface";
+/** @private */
+export declare class UIVideoPropertiesForm extends UIElement<IJodit> {
+    private state;
+    private handlers;
+    className(): string;
+    constructor(jodit: IJodit, state: VideoPropertiesState, handlers: VideoPropertiesAPI);
+    protected render(): string;
+    private input;
+    private show;
+    /**
+     * A video has every field, an embed only its size, and audio only its
+     * playback settings
+     */
+    protected onStateMediaChange(): void;
+    private showPreview;
+    protected hideChangePoster(): void;
+    protected onStatePosterChange(): void;
+    protected onPosterChange(): void;
+    protected onChangePosterClick(e: MouseEvent): void;
+    protected onRemovePosterClick(): void;
+    protected onStateSizeIsLockedChange(): void;
+    protected onLockSizeClick(): void;
+    protected onStateSizeChange(): void;
+    protected onSizeInput(e: Event): void;
+    /**
+     * Autoplay mutes it, and it keeps its controls unless it autoplays
+     */
+    protected onStateFlagsChange(): void;
+    protected onFlagChange(e: Event): void;
+}