jodit 4.16.1 → 4.17.1

package/es5/plugins/debug/debug.css

@@ -1,7 +1,7 @@
 /*!
  * jodit - Jodit is an awesome and useful wysiwyg editor with filebrowser
  * Author: Chupurnov <chupurnov@gmail.com> (https://xdsoft.net/jodit/)
- * Version: v4.16.1
+ * Version: v4.17.1
  * Url: https://xdsoft.net/jodit/
  * License(s): MIT
  */

package/es5/plugins/debug/debug.js

@@ -1,7 +1,7 @@
 /*!
  * jodit - Jodit is an awesome and useful wysiwyg editor with filebrowser
  * Author: Chupurnov <chupurnov@gmail.com> (https://xdsoft.net/jodit/)
- * Version: v4.16.1
+ * Version: v4.17.1
  * Url: https://xdsoft.net/jodit/
  * License(s): MIT
  */

package/es5/plugins/debug/debug.min.js

@@ -1,7 +1,7 @@
 /*!
  * jodit - Jodit is an awesome and useful wysiwyg editor with filebrowser
  * Author: Chupurnov <chupurnov@gmail.com> (https://xdsoft.net/jodit/)
- * Version: v4.16.1
+ * Version: v4.17.1
  * Url: https://xdsoft.net/jodit/
  * License(s): MIT
  */

package/es5/plugins/speech-recognize/speech-recognize.css

@@ -1,7 +1,7 @@
 /*!
  * jodit - Jodit is an awesome and useful wysiwyg editor with filebrowser
  * Author: Chupurnov <chupurnov@gmail.com> (https://xdsoft.net/jodit/)
- * Version: v4.16.1
+ * Version: v4.17.1
  * Url: https://xdsoft.net/jodit/
  * License(s): MIT
  */

package/es5/plugins/speech-recognize/speech-recognize.js

@@ -1,7 +1,7 @@
 /*!
  * jodit - Jodit is an awesome and useful wysiwyg editor with filebrowser
  * Author: Chupurnov <chupurnov@gmail.com> (https://xdsoft.net/jodit/)
- * Version: v4.16.1
+ * Version: v4.17.1
  * Url: https://xdsoft.net/jodit/
  * License(s): MIT
  */

package/es5/plugins/speech-recognize/speech-recognize.min.js

@@ -1,7 +1,7 @@
 /*!
  * jodit - Jodit is an awesome and useful wysiwyg editor with filebrowser
  * Author: Chupurnov <chupurnov@gmail.com> (https://xdsoft.net/jodit/)
- * Version: v4.16.1
+ * Version: v4.17.1
  * Url: https://xdsoft.net/jodit/
  * License(s): MIT
  */

package/es5/polyfills.fat.min.js

@@ -1,7 +1,7 @@
 /*!
  * jodit - Jodit is an awesome and useful wysiwyg editor with filebrowser
  * Author: Chupurnov <chupurnov@gmail.com> (https://xdsoft.net/jodit/)
- * Version: v4.16.1
+ * Version: v4.17.1
  * Url: https://xdsoft.net/jodit/
  * License(s): MIT
  */

package/es5/polyfills.js

@@ -1,7 +1,7 @@
 /*!
  * jodit - Jodit is an awesome and useful wysiwyg editor with filebrowser
  * Author: Chupurnov <chupurnov@gmail.com> (https://xdsoft.net/jodit/)
- * Version: v4.16.1
+ * Version: v4.17.1
  * Url: https://xdsoft.net/jodit/
  * License(s): MIT
  */

package/es5/polyfills.min.js

@@ -1,7 +1,7 @@
 /*!
  * jodit - Jodit is an awesome and useful wysiwyg editor with filebrowser
  * Author: Chupurnov <chupurnov@gmail.com> (https://xdsoft.net/jodit/)
- * Version: v4.16.1
+ * Version: v4.17.1
  * Url: https://xdsoft.net/jodit/
  * License(s): MIT
  */

package/esm/config.d.ts

@@ -8,9 +8,10 @@ import type { HTMLTagNames } from "./types/index";
 import type { AiAssistantSettings } from "./plugins/ai-assistant/interface";
 import type { IDictionary } from "./types/index";
 import type { Nullable } from "./types/index";
+import type { IJodit } from "./types/index";
+import type { IUploaderData } from "./types/index";
 import type { ImagePropertiesOptions } from "./plugins/image-properties/interface";
 import type { IControlType } from "./types/index";
-import type { IJodit } from "./types/index";
 import type { formTemplate } from "./plugins/link/template";
 import type { IUIForm } from "./types/index";
 import type { IUIOption } from "./types/index";
@@ -1264,6 +1265,27 @@ interface Config {
         blockLimits: IDictionary<1>;
     };
 }
+interface Config {
+    file: {
+        /**
+         * Inserts the files uploaded from the file popup's Upload tab. By default
+         * each one goes in as a link, an image as well, the way
+         * `uploader.defaultHandlerSuccess` inserts a file that isn't an image.
+         * ```javascript
+         * Jodit.make('#editor', {
+         * 		file: {
+         * 			defaultHandlerSuccess(data) {
+         * 				data.files.forEach(file => {
+         * 					this.s.insertHTML(`<a class="file" href="${data.baseurl + file}">${file}</a>`);
+         * 				});
+         * 			}
+         * 		}
+         * });
+         * ```
+         */
+        defaultHandlerSuccess?: (this: IJodit, data: IUploaderData) => void;
+    };
+}
 interface Config {
     autofocus: boolean;
     cursorAfterAutofocus: 'start' | 'end';
@@ -1971,6 +1993,23 @@ interface Config {
          * Default height for video iframe. Default: 345
          */
         defaultHeight?: number;
+        /**
+         * Inserts the videos uploaded from the popup's Upload tab, which is shown
+         * when `uploader.url` or `uploader.customUploadFunction` is set. By default
+         * each one goes in as `<video controls src="…">`.
+         * ```javascript
+         * Jodit.make('#editor', {
+         * 		video: {
+         * 			defaultHandlerSuccess(data) {
+         * 				data.files.forEach(file => {
+         * 					this.s.insertHTML(`<video controls preload="metadata" src="${data.baseurl + file}"></video>`);
+         * 				});
+         * 			}
+         * 		}
+         * });
+         * ```
+         */
+        defaultHandlerSuccess?: (this: IJodit, data: IUploaderData) => void;
     };
 }
 interface Config {

package/esm/core/constants.js

@@ -3,7 +3,7 @@
  * Released under MIT see LICENSE.txt in the project root for license information.
  * Copyright (c) 2013-2026 Valerii Chupurnov. All rights reserved. https://xdsoft.net
  */
-export const APP_VERSION = "4.16.1";
+export const APP_VERSION = "4.17.1";
 // prettier-ignore
 export const ES = "es2020";
 export const IS_ES_MODERN = true;

package/esm/core/helpers/html/safe-html.d.ts

@@ -13,4 +13,4 @@ export type safeOptions = {
  * Removes dangerous constructs from HTML
  */
 export declare function safeHTML(box: HTMLElement | DocumentFragment, options: safeOptions): void;
-export declare function sanitizeHTMLElement(elm: Element | DocumentFragment, { safeJavaScriptLink, removeOnError }?: safeOptions): boolean;
+export declare function sanitizeHTMLElement(elm: Element | DocumentFragment, { safeJavaScriptLink, removeOnError, removeEventAttributes }?: safeOptions): boolean;

package/esm/core/helpers/html/safe-html.js

@@ -145,7 +145,7 @@ function isDangerousUrl(value, tagName) {
     }
     return (/^data:image\/svg/.test(normalized) && DOCUMENT_EMBED_TAGS.has(tagName));
 }
-export function sanitizeHTMLElement(elm, { safeJavaScriptLink, removeOnError } = {
+export function sanitizeHTMLElement(elm, { safeJavaScriptLink, removeOnError, removeEventAttributes } = {
     safeJavaScriptLink: true,
     removeOnError: true
 }) {
@@ -153,6 +153,13 @@ export function sanitizeHTMLElement(elm, { safeJavaScriptLink, removeOnError } =
         return false;
     }
     let effected = false;
+    // Every `on*` handler, not only `onerror`: the clean-html background
+    // pass calls this directly, and markup that reached the editable area
+    // without `safeHTML` (a drop, a script) kept its handlers otherwise.
+    // See GHSA-jhhp-r3r7-v2cg
+    if (removeEventAttributes && removeAllEventAttributes(elm)) {
+        effected = true;
+    }
     if (removeOnError && elm.hasAttribute('onerror')) {
         attr(elm, 'onerror', null);
         effected = true;

package/esm/modules/widget/file-selector/file-selector.d.ts

@@ -8,7 +8,8 @@
  * @packageDocumentation
  * @module modules/widget/file-selector
  */
-import type { IFileBrowserCallBackData, IJodit } from "../../../types/index";
+import type { IFileBrowserCallBackData, IJodit, IUploaderData } from "../../../types/index";
+import { type TabOption } from "../tabs/tabs";
 interface ImageSelectorCallbacks {
     /**
      * Function that will be called when the user enters the URL of the tab image and alternative text for images
@@ -34,4 +35,12 @@ interface ImageSelectorCallbacks {
  * functions with different parameters
  */
 export declare const FileSelectorWidget: (editor: IJodit, callbacks: ImageSelectorCallbacks, elm: HTMLElement | null, close: () => void, isImage?: boolean) => HTMLDivElement;
+/**
+ * The Upload tab: a box that uploads the files dropped on it or chosen in its
+ * file input, then passes the uploader's answer to `onSuccess` and closes the popup
+ */
+export declare const UploadTab: (editor: IJodit, onSuccess: (this: IJodit, data: IUploaderData) => void, { label, accept }: {
+    label: string;
+    accept: string;
+}) => TabOption;
 export {};

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

@@ -25,28 +25,17 @@ export const FileSelectorWidget = (editor, callbacks, elm, close, isImage = true
         (options.url ||
             options.insertImageAsBase64URI ||
             options.customUploadFunction)) {
-        const dragBox = editor.c.fromHTML('<div class="jodit-drag-and-drop__file-box">' +
-            `<strong>${editor.i18n(isImage ? 'Drop image' : 'Drop file')}</strong>` +
-            `<span><br>${editor.i18n('or click')}</span>` +
-            `<input type="file" accept="${isImage ? 'image/*' : '*'}" tabindex="-1" dir="auto" multiple=""/>` +
-            '</div>');
-        editor.uploader.bind(dragBox, resp => {
-            const handler = isFunction(callbacks.upload)
-                ? callbacks.upload
+        const { upload } = callbacks;
+        tabs.push(UploadTab(editor, resp => {
+            const handler = isFunction(upload)
+                ? upload
                 : options.defaultHandlerSuccess;
             if (isFunction(handler)) {
                 handler.call(editor, resp);
             }
-            editor.e.fire('closeAllPopups');
-        }, error => {
-            editor.message.error(error.message);
-            editor.e.fire('closeAllPopups');
-        });
-        tabs.push({
-            icon: 'upload',
-            name: 'Upload',
-            content: dragBox
-        });
+        }, isImage
+            ? { label: 'Drop image', accept: 'image/*' }
+            : { label: 'Drop file', accept: '*' }));
     }
     if (callbacks.filebrowser) {
         if (editor.o.filebrowser.ajax.url || editor.o.filebrowser.items.url) {
@@ -115,6 +104,29 @@ export const FileSelectorWidget = (editor, callbacks, elm, close, isImage = true
     box.classList.add('jodit-file-selector');
     return box;
 };
+/**
+ * The Upload tab: a box that uploads the files dropped on it or chosen in its
+ * file input, then passes the uploader's answer to `onSuccess` and closes the popup
+ */
+export const UploadTab = (editor, onSuccess, { label, accept }) => {
+    const dragBox = editor.c.fromHTML('<div class="jodit-drag-and-drop__file-box">' +
+        `<strong>${editor.i18n(label)}</strong>` +
+        `<span><br>${editor.i18n('or click')}</span>` +
+        `<input type="file" accept="${accept}" tabindex="-1" dir="auto" multiple=""/>` +
+        '</div>');
+    editor.uploader.bind(dragBox, resp => {
+        onSuccess.call(editor, resp);
+        editor.e.fire('closeAllPopups');
+    }, error => {
+        editor.message.error(error.message);
+        editor.e.fire('closeAllPopups');
+    });
+    return {
+        icon: 'upload',
+        name: 'Upload',
+        content: dragBox
+    };
+};
 function val(elm, name, value) {
     const child = Dom.first(elm, node => Dom.isTag(node, 'input') && attr(node, 'name') === name);
     if (!child) {

package/esm/plugins/drag-and-drop/drag-and-drop.js

@@ -38,7 +38,13 @@ export class dragAndDrop extends Plugin {
     }
     /** @override */
     afterInit() {
-        this.j.e.on([window, this.j.ed, this.j.editor], 'dragstart.DragAndDrop', this.onDragStart);
+        this.j.e
+            .on([window, this.j.ed, this.j.editor], 'dragstart.DragAndDrop', this.onDragStart)
+            // Always, not only after a `dragstart` seen in this window: a drop
+            // from another window or application never produces one here, and
+            // the browser then inserted its HTML natively, unsanitized. Routed
+            // through the paste plugin instead. See GHSA-jhhp-r3r7-v2cg
+            .on('drop.DragAndDrop', this.onDrop);
     }
     onDragStart(event) {
         let target = event.target;
@@ -69,13 +75,11 @@ export class dragAndDrop extends Plugin {
     addDragListeners() {
         this.j.e
             .on('dragover', this.onDrag)
-            .on('drop.DragAndDrop', this.onDrop)
             .on(window, 'dragend.DragAndDrop drop.DragAndDrop mouseup.DragAndDrop', this.onDragEnd);
     }
     removeDragListeners() {
         this.j.e
             .off('dragover', this.onDrag)
-            .off('drop.DragAndDrop', this.onDrop)
             .off(window, 'dragend.DragAndDrop drop.DragAndDrop mouseup.DragAndDrop', this.onDragEnd);
     }
     onDrag(event) {
@@ -144,7 +148,15 @@ export class dragAndDrop extends Plugin {
             }
         }
         else if (this.getText(event)) {
-            fragment = this.j.createInside.fromHTML(this.getText(event));
+            // Dropped markup takes the same sanitizing pass as pasted and
+            // assigned content. See GHSA-jhhp-r3r7-v2cg
+            const box = this.j.createInside.div();
+            box.innerHTML = this.getText(event);
+            this.j.e.fire('safeHTML', box);
+            fragment =
+                box.firstChild !== box.lastChild || !box.firstChild
+                    ? box
+                    : box.firstChild;
         }
         return fragment;
     }

package/esm/plugins/file/file.d.ts

@@ -8,5 +8,28 @@
  * @packageDocumentation
  * @module plugins/file
  */
-import type { IJodit } from "../../types/index";
+import type { IJodit, IUploaderData } from "../../types/index";
+declare module 'jodit/config' {
+    interface Config {
+        file: {
+            /**
+             * Inserts the files uploaded from the file popup's Upload tab. By default
+             * each one goes in as a link, an image as well, the way
+             * `uploader.defaultHandlerSuccess` inserts a file that isn't an image.
+             * ```javascript
+             * Jodit.make('#editor', {
+             * 		file: {
+             * 			defaultHandlerSuccess(data) {
+             * 				data.files.forEach(file => {
+             * 					this.s.insertHTML(`<a class="file" href="${data.baseurl + file}">${file}</a>`);
+             * 				});
+             * 			}
+             * 		}
+             * });
+             * ```
+             */
+            defaultHandlerSuccess?: (this: IJodit, data: IUploaderData) => void;
+        };
+    }
+}
 export declare function file(editor: IJodit): void;

package/esm/plugins/file/file.js

@@ -8,6 +8,19 @@ import { pluginSystem } from "../../core/global.js";
 import { attr } from "../../core/helpers/utils/attr.js";
 import { Config } from "../../config.js";
 import { FileSelectorWidget } from "../../modules/widget/index.js";
+function insertLinks(data) {
+    var _a;
+    (_a = data.files) === null || _a === void 0 ? void 0 : _a.forEach(file => {
+        const link = this.createInside.element('a', {
+            href: data.baseurl + file
+        });
+        link.textContent = this.o.uploader.getDisplayName.call(this.uploader, data.baseurl, file);
+        this.s.insertNode(link);
+    });
+}
+Config.prototype.file = {
+    defaultHandlerSuccess: insertLinks
+};
 Config.prototype.controls.file = {
     popup: (editor, current, close) => {
         const insert = (url, title = '') => {
@@ -27,7 +40,10 @@ Config.prototype.controls.file = {
                     data.files.forEach(file => insert(data.baseurl + file));
                 close();
             },
-            upload: true,
+            upload: (data) => {
+                var _a, _b;
+                ((_b = (_a = editor.o.file) === null || _a === void 0 ? void 0 : _a.defaultHandlerSuccess) !== null && _b !== void 0 ? _b : insertLinks).call(editor, data);
+            },
             url: (url, text) => {
                 if (sourceAnchor) {
                     attr(sourceAnchor, 'href', url);

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

@@ -10,6 +10,26 @@ import { css } from "../../../../core/helpers/utils/css.js";
 // Images align with `imageAlignClasses`; the wrappers of iframes and media
 // keep inline styles
 const alignClasses = (editor, elm) => Dom.isTag(elm, 'img') ? editor.o.imageAlignClasses : null;
+// A Normal image sits where the text of its line is aligned (#1531)
+const lineAlign = (editor, elm) => {
+    const block = (elm && Dom.closest(elm, Dom.isBlock, editor.editor)) || editor.editor;
+    const rtl = css(block, 'direction') === 'rtl';
+    switch (css(block, 'text-align')) {
+        case 'center':
+        case '-webkit-center':
+            return 'center';
+        case 'justify':
+            return 'justify';
+        case 'right':
+            return 'right';
+        case 'end':
+            return rtl ? 'left' : 'right';
+        case 'start':
+            return rtl ? 'right' : 'left';
+        default:
+            return 'left';
+    }
+};
 const currentAlign = (editor, elm) => (elm ? getHAlign(elm, alignClasses(editor, elm)) : 'normal');
 export const align = {
     name: 'left',
@@ -17,7 +37,8 @@ export const align = {
     list: ['Left', 'Right', 'Center', 'Normal'],
     update: (editor, button) => {
         const current = currentAlign(editor, button.target);
-        button.state.icon.name = current === 'normal' ? 'left' : current;
+        button.state.icon.name =
+            current === 'normal' ? lineAlign(editor, button.target) : current;
     },
     isActive: (editor, button) => currentAlign(editor, button.target) !== 'normal',
     isChildActive: (editor, button) => {

package/esm/plugins/source/editor/engines/ace.js

@@ -146,7 +146,8 @@ export class AceEditor extends SourceEditor {
                 }
                 return;
             }
-            this.fromWYSIWYG();
+            // The source plugin carries the fallback editor's text over when this
+            // one is ready; refilling from WYSIWYG here would drop unsynced typing
             tryInitAceEditor();
         };
         editor.e.on('afterSetMode', initAceEditor);

package/esm/plugins/source/source.d.ts

@@ -21,6 +21,11 @@ export declare class source extends Plugin {
     private mirrorContainer;
     private __lock;
     private __oldMirrorValue;
+    /**
+     * What the source view was last filled with from WYSIWYG, read back from
+     * the editor; while the view still holds it, nothing has been typed there
+     */
+    private __filledValue;
     private tempMarkerStart;
     private tempMarkerStartReg;
     private tempMarkerEnd;
@@ -50,6 +55,18 @@ export declare class source extends Plugin {
     afterInit(editor: IJodit): void;
     private syncValueFromWYSIWYG;
     private initSourceEditor;
+    /**
+     * Replaces the source editor (the textarea shown while ACE loads) with
+     * the one that just became ready, carrying its text, selection and focus
+     * over. Filling the new editor from WYSIWYG instead would drop what was
+     * typed since the last, debounced, sync and normalise half-typed markup.
+     */
+    private takeOver;
+    /**
+     * The beautifier arrived after the source view was opened: format the
+     * view if nothing has been typed into it, otherwise leave the typing alone
+     */
+    private beautifyUntouched;
     /** @override */
     beforeDestruct(): void;
 }

package/esm/plugins/source/source.js

@@ -37,6 +37,11 @@ export class source extends Plugin {
         ];
         this.__lock = false;
         this.__oldMirrorValue = '';
+        /**
+         * What the source view was last filled with from WYSIWYG, read back from
+         * the editor; while the view still holds it, nothing has been typed there
+         */
+        this.__filledValue = '';
         this.tempMarkerStart = '{start-jodit-selection}';
         this.tempMarkerStartReg = /{start-jodit-selection}/g;
         this.tempMarkerEnd = '{end-jodit-selection}';
@@ -69,6 +74,7 @@ export class source extends Plugin {
             if (new_value !== this.getMirrorValue()) {
                 this.setMirrorValue(new_value);
             }
+            this.__filledValue = this.getMirrorValue();
             this.__lock = false;
         }
     }
@@ -271,9 +277,9 @@ export class source extends Plugin {
                         return;
                     }
                     loading = true;
-                    // It formats the source view from the next time it opens:
-                    // filling it again now would replace what was typed there
-                    loadNext(editor, editor.o.beautifyHTMLCDNUrlsJS).then(addEventListener, () => null);
+                    loadNext(editor, editor.o.beautifyHTMLCDNUrlsJS).then(() => {
+                        addEventListener() && this.beautifyUntouched();
+                    }, () => null);
                 };
                 editor.e.on('afterSetMode.source', loadBeautify);
                 loadBeautify();
@@ -294,11 +300,9 @@ export class source extends Plugin {
         if (editor.o.sourceEditor !== 'area') {
             const sourceEditor = createSourceEditor(editor.o.sourceEditor, editor, this.mirrorContainer, this.toWYSIWYG, this.fromWYSIWYG);
             sourceEditor.onReadyAlways(() => {
-                var _a, _b;
-                (_a = this.sourceEditor) === null || _a === void 0 ? void 0 : _a.destruct();
-                this.sourceEditor = sourceEditor;
-                this.syncValueFromWYSIWYG(true);
-                (_b = editor.events) === null || _b === void 0 ? void 0 : _b.fire('sourceEditorReady', editor);
+                var _a;
+                this.takeOver(sourceEditor);
+                (_a = editor.events) === null || _a === void 0 ? void 0 : _a.fire('sourceEditorReady', editor);
             });
         }
         else {
@@ -309,6 +313,54 @@ export class source extends Plugin {
             });
         }
     }
+    /**
+     * Replaces the source editor (the textarea shown while ACE loads) with
+     * the one that just became ready, carrying its text, selection and focus
+     * over. Filling the new editor from WYSIWYG instead would drop what was
+     * typed since the last, debounced, sync and normalise half-typed markup.
+     */
+    takeOver(sourceEditor) {
+        const previous = this.sourceEditor;
+        if (!previous || previous === sourceEditor) {
+            this.sourceEditor = sourceEditor;
+            this.syncValueFromWYSIWYG(true);
+            return;
+        }
+        const value = previous.getValue(), start = previous.getSelectionStart(), end = previous.getSelectionEnd(), focused = previous.isFocused, untouched = value === this.__filledValue;
+        previous.destruct();
+        this.sourceEditor = sourceEditor;
+        if (untouched) {
+            this.syncValueFromWYSIWYG(true);
+        }
+        else {
+            sourceEditor.setValue(value);
+            this.toWYSIWYG();
+        }
+        if (start >= 0) {
+            sourceEditor.setSelectionRange(start, end);
+        }
+        focused && sourceEditor.focus();
+    }
+    /**
+     * The beautifier arrived after the source view was opened: format the
+     * view if nothing has been typed into it, otherwise leave the typing alone
+     */
+    beautifyUntouched() {
+        var _a, _b;
+        const value = this.getMirrorValue();
+        if (this.j.o.editHTMLDocumentMode ||
+            !value ||
+            value !== this.__filledValue) {
+            return;
+        }
+        const html = this.j.e.fire('beautifyHTML', value);
+        if (isString(html) && html !== value) {
+            const focused = (_a = this.sourceEditor) === null || _a === void 0 ? void 0 : _a.isFocused;
+            this.setMirrorValue(html);
+            this.__filledValue = this.getMirrorValue();
+            focused && ((_b = this.sourceEditor) === null || _b === void 0 ? void 0 : _b.focus());
+        }
+    }
     /** @override */
     beforeDestruct() {
         if (this.sourceEditor) {

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

@@ -3,6 +3,10 @@
  * 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
+ */
+import type { IJodit, IUploaderData } from "../../types/index";
 declare module 'jodit/config' {
     interface Config {
         video: {
@@ -29,7 +33,23 @@ declare module 'jodit/config' {
              * Default height for video iframe. Default: 345
              */
             defaultHeight?: number;
+            /**
+             * Inserts the videos uploaded from the popup's Upload tab, which is shown
+             * when `uploader.url` or `uploader.customUploadFunction` is set. By default
+             * each one goes in as `<video controls src="…">`.
+             * ```javascript
+             * Jodit.make('#editor', {
+             * 		video: {
+             * 			defaultHandlerSuccess(data) {
+             * 				data.files.forEach(file => {
+             * 					this.s.insertHTML(`<video controls preload="metadata" src="${data.baseurl + file}"></video>`);
+             * 				});
+             * 			}
+             * 		}
+             * });
+             * ```
+             */
+            defaultHandlerSuccess?: (this: IJodit, data: IUploaderData) => void;
         };
     }
 }
-export {};

package/esm/plugins/video/config.js

@@ -8,12 +8,22 @@ 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 } from "../../modules/widget/index.js";
+import { TabsWidget, UploadTab } from "../../modules/widget/index.js";
 import videoIcon from "./video.svg.js";
+function insertVideos(data) {
+    var _a;
+    (_a = data.files) === null || _a === void 0 ? void 0 : _a.forEach(file => {
+        this.s.insertNode(this.createInside.element('video', {
+            controls: '',
+            src: data.baseurl + file
+        }));
+    });
+}
 Config.prototype.video = {
     parseUrlToVideoEmbed: convertMediaUrlToVideoEmbed,
     defaultWidth: 400,
-    defaultHeight: 345
+    defaultHeight: 345,
+    defaultHandlerSuccess: insertVideos
 };
 Icon.set('video', videoIcon);
 Config.prototype.controls.video = {
@@ -48,6 +58,16 @@ Config.prototype.controls.video = {
             close();
         };
         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 => {
+                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',