jodit 4.18.3 → 4.18.6

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

@@ -0,0 +1,175 @@
+/*!
+ * 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
+ */
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+        r = Reflect.decorate(decorators, target, key, desc);
+    else
+        for (var i = decorators.length - 1; i >= 0; i--)
+            if (d = decorators[i])
+                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { cache, cached, watch } from "../../core/decorators/index.js";
+import { Dom } from "../../core/dom/dom.js";
+import { pluginSystem } from "../../core/global.js";
+import { isArray } from "../../core/helpers/checker/is-array.js";
+import { position } from "../../core/helpers/size/position.js";
+import { markOwner } from "../../core/helpers/utils/utils.js";
+import { Plugin } from "../../core/plugin/plugin.js";
+import { Button } from "../../core/ui/button/index.js";
+import { Popup } from "../../core/ui/popup/popup.js";
+import { FileSelectorWidget } from "../../modules/widget/file-selector/file-selector.js";
+import { UIVideoPropertiesForm } from "./ui/ui-video-form.js";
+import { editedMedia, readValues } from "./readers.js";
+import { replaceMedia } from "./replace.js";
+import { applyValues } from "./writers.js";
+import { videoTabs } from "../video/config.js";
+/**
+ * Show a dialog with the size, poster and playback settings of a video, an
+ * embed or audio. The media popup's Edit button opens it:
+ *
+ * ```javascript
+ * editor.events.fire('openVideoProperties', video);
+ * ```
+ */
+export class videoProperties extends Plugin {
+    constructor() {
+        super(...arguments);
+        this.state = {
+            target: this.j.c.element('video'),
+            media: this.j.c.element('video'),
+            ratio: 1,
+            sizeIsLocked: true,
+            values: {
+                width: '',
+                height: '',
+                poster: '',
+                autoplay: false,
+                loop: false,
+                muted: false,
+                controls: true
+            }
+        };
+        // The size as it was read, so an unchanged one isn't written
+        this.__readSize = '';
+    }
+    get __size() {
+        const { width, height } = this.state.values;
+        return `${width}x${height}`;
+    }
+    get form() {
+        return new UIVideoPropertiesForm(this.j, this.state, {
+            openPosterPopup: target => this.__openPosterPopup(target)
+        });
+    }
+    get dialog() {
+        const { j } = this;
+        const dialog = j.dlg({
+            minWidth: Math.min(400, screen.width),
+            buttons: ['dialog.close']
+        });
+        const buttons = this.__buttons;
+        buttons.check.onAction(() => {
+            applyValues(j, this.state, this.__size !== this.__readSize);
+            j.synchronizeValues();
+            dialog.close();
+        });
+        buttons.remove.onAction(() => {
+            j.s.removeNode(this.state.target);
+            dialog.close();
+        });
+        buttons.cancel.onAction(() => {
+            dialog.close();
+        });
+        dialog.setContent(this.form);
+        dialog.setFooter([[buttons.cancel, buttons.remove], buttons.check]);
+        markOwner(j, dialog.container);
+        return dialog;
+    }
+    get __buttons() {
+        const { j } = this;
+        return {
+            check: Button(j, 'ok', 'Apply', 'primary'),
+            remove: Button(j, 'bin', 'Delete'),
+            cancel: Button(j, 'cancel', 'Cancel')
+        };
+    }
+    /**
+     * Open the dialog for the media `target` is, or is the wrapper of
+     */
+    open(target) {
+        const media = editedMedia(target);
+        if (!media) {
+            return;
+        }
+        this.state.target = target;
+        this.state.media = media;
+        readValues(this.state);
+        this.__readSize = this.__size;
+        this.dialog.setHeader(this.j.i18n(Dom.isTag(media, 'audio')
+            ? 'Audio properties'
+            : 'Video properties'));
+        this.dialog.open().setModal(true).setPosition();
+    }
+    /**
+     * The video popup's tabs for the media popup's Replace: what they insert
+     * takes the place of the media `target` is, or is the wrapper of
+     */
+    onGenerateReplaceVideoTabs(target, close) {
+        return videoTabs(this.j, close, insert => replaceMedia(this.j, target, insert));
+    }
+    __openPosterPopup(button) {
+        const { j, state } = this;
+        const popup = new Popup(this.dialog);
+        const close = () => {
+            popup.close();
+            popup.destruct();
+        };
+        popup
+            .setContent(FileSelectorWidget(j, {
+            upload: (data) => {
+                if (data.files && data.files.length) {
+                    state.values.poster =
+                        data.baseurl + data.files[0];
+                }
+                close();
+            },
+            filebrowser: (data) => {
+                if (isArray(data.files) && data.files.length) {
+                    state.values.poster = data.files[0];
+                    close();
+                }
+            }
+        }, null, close))
+            .open(() => position(button));
+    }
+    /** @override */
+    afterInit() { }
+    /** @override */
+    beforeDestruct() {
+        var _a, _b, _c;
+        Object.values((_a = cached(this, '__buttons')) !== null && _a !== void 0 ? _a : {}).forEach(b => b.destruct());
+        (_b = cached(this, 'dialog')) === null || _b === void 0 ? void 0 : _b.destruct();
+        (_c = cached(this, 'form')) === null || _c === void 0 ? void 0 : _c.destruct();
+    }
+}
+__decorate([
+    cache
+], videoProperties.prototype, "form", null);
+__decorate([
+    cache
+], videoProperties.prototype, "dialog", null);
+__decorate([
+    cache
+], videoProperties.prototype, "__buttons", null);
+__decorate([
+    watch(':openVideoProperties')
+], videoProperties.prototype, "open", null);
+__decorate([
+    watch(':generateReplaceVideoTabs')
+], videoProperties.prototype, "onGenerateReplaceVideoTabs", null);
+pluginSystem.add('videoProperties', videoProperties);

package/esm/plugins/video-properties/writers.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";
+import type { VideoPropertiesState } from "./interface";
+/**
+ * Apply the dialog's values to the media
+ * @private
+ */
+export declare function applyValues(j: IJodit, state: VideoPropertiesState, sizeChanged: boolean): void;

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

@@ -0,0 +1,73 @@
+/*!
+ * 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, cssInline } from "../../core/helpers/utils/css.js";
+import { ownSize } from "./readers.js";
+import { normalSizeToString } from "../image-properties/utils/utils.js";
+const cssSize = (value) => value === '' ? null : normalSizeToString(value);
+// Sizes go on as the resizer writes them: an embed takes them as attributes,
+// and a video as CSS, without a height while its ratio is kept, if it had none
+function applySize(j, state) {
+    var _a;
+    const { media, values } = state;
+    if (Dom.isTag(media, 'iframe')) {
+        ['width', 'height'].forEach(key => {
+            attr(media, key, values[key] === '' ? null : values[key]);
+            if (cssInline(media, key)) {
+                css(media, key, cssSize(values[key]));
+            }
+        });
+        // The resizer's frame for an embed
+        const wrapper = media.parentElement;
+        if (wrapper && attr(wrapper, 'data-jodit_iframe_wrapper')) {
+            css(wrapper, {
+                width: media.offsetWidth,
+                height: media.offsetHeight
+            });
+        }
+        return;
+    }
+    const heightFollowsWidth = state.sizeIsLocked && !ownSize(media, 'height');
+    css(media, {
+        width: cssSize(values.width),
+        height: heightFollowsWidth ? null : cssSize(values.height)
+    });
+    if (!((_a = attr(media, 'style')) === null || _a === void 0 ? void 0 : _a.trim())) {
+        attr(media, 'style', null);
+    }
+    j.e.fire(media, 'changesize');
+}
+function setFlag(media, name, on) {
+    if (media.hasAttribute(name) !== on) {
+        attr(media, name, on ? '' : null);
+    }
+}
+/**
+ * Apply the dialog's values to the media
+ * @private
+ */
+export function applyValues(j, state, sizeChanged) {
+    const { media, values } = state;
+    if (sizeChanged && !Dom.isTag(media, 'audio')) {
+        applySize(j, state);
+    }
+    if (Dom.isTag(media, 'iframe')) {
+        return;
+    }
+    if (Dom.isTag(media, 'video')) {
+        attr(media, 'poster', values.poster || null);
+    }
+    // Browsers only autoplay muted media, and playsinline keeps an iPhone from
+    // playing it full screen
+    setFlag(media, 'autoplay', values.autoplay);
+    setFlag(media, 'muted', values.autoplay || values.muted);
+    setFlag(media, 'loop', values.loop);
+    setFlag(media, 'controls', values.controls || !values.autoplay);
+    if (values.autoplay && Dom.isTag(media, 'video')) {
+        setFlag(media, 'playsinline', true);
+    }
+}

package/esm/types/types.d.ts

@@ -193,7 +193,7 @@ export type ImageHAlign = 'normal' | 'left' | 'right' | 'center' | '';
  */
 export type HAlignClasses = Partial<Record<Exclude<ImageHAlign, ''>, string | string[]>>;
 /**
- * Class names for each image alignment, see `imageAlignClasses`
+ * @deprecated Use `HAlignClasses`
  */
 export type ImageAlignClasses = HAlignClasses;
 /**

package/package.json

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

package/types/config.d.ts

@@ -26,7 +26,6 @@ import type { Controls } from "./types/index";
 import type { HAlignClasses } from "./types/index";
 import type { IAsyncStorageOptions } from "./types/index";
 import type { IExtraPlugin } from "./types/index";
-import type { ImageAlignClasses } from "./types/index";
 import type { ImageHAlign } from "./types/index";
 import type { IUIButtonState } from "./types/index";
 import type { IViewOptions } from "./types/index";
@@ -642,29 +641,19 @@ declare class Config implements IViewOptions {
      */
     imageDefaultAlign: ImageHAlign;
     /**
-     * Class names to align images with, instead of an inline `float` or
-     * `margin`. Aligning an image removes every class listed here and adds the
-     * chosen alignment's, which can be several separated by spaces. An
-     * alignment can also list several such sets, to recognise each of them;
-     * aligning writes the first. `alignClasses.img` takes its place when set.
-     *
-     * ```javascript
-     * Jodit.make('#editor', {
-     *   imageAlignClasses: {
-     *     left: 'align-left',
-     *     right: 'align-right',
-     *     center: ['align-center', 'centered']
-     *   }
-     * });
-     * ```
+     * @deprecated Use `alignClasses.img`, which takes the same value. When
+     * `alignClasses.img` isn't set, the editor copies this into it.
      */
-    imageAlignClasses: Nullable<ImageAlignClasses>;
+    imageAlignClasses: Nullable<HAlignClasses>;
     /**
-     * Class names to align elements with, by tag name, as `imageAlignClasses`
-     * does for images: `img`, and `video`, `audio` and `iframe` in the media
-     * popup. A media wrapper (see `mediaWrappers`), and Jodit's own `jodit` and
-     * `jodit-media` wrappers, are aligned with the classes for the media in
-     * them.
+     * Class names to align elements with, by tag name, instead of an inline
+     * `float` or `margin`: `img`, and `video`, `audio` and `iframe` in the
+     * media popup. Aligning an element removes every class listed for its tag
+     * and adds the chosen alignment's, which can be several separated by
+     * spaces. An alignment can also list several such sets, to recognise each
+     * of them; aligning writes the first. A media wrapper (see
+     * `mediaWrappers`), and Jodit's own `jodit` and `jodit-media` wrappers,
+     * are aligned with the classes for the media in them.
      *
      * ```javascript
      * const media = {
@@ -674,7 +663,15 @@ declare class Config implements IViewOptions {
      * };
      *
      * Jodit.make('#editor', {
-     *   alignClasses: { video: media, iframe: media }
+     *   alignClasses: {
+     *     img: {
+     *       left: 'align-left',
+     *       right: 'align-right',
+     *       center: ['align-center', 'centered']
+     *     },
+     *     video: media,
+     *     iframe: media
+     *   }
      * });
      * ```
      */
@@ -1407,6 +1404,9 @@ interface Config {
     iframeDoctype: string;
     /**
      * Custom style to be used inside the iframe to display content.
+     * It goes in after `iframeCSSLinks`. The rules Jodit's own plugins need
+     * in the editing document are added apart from it, so a value of your
+     * own doesn't have to repeat them.
      *
      * ```javascript
      * Jodit.make('#editor', {
@@ -1759,7 +1759,7 @@ interface 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: {
@@ -1772,14 +1772,16 @@ interface 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/types/core/helpers/html/word-lists.d.ts

@@ -0,0 +1,29 @@
+/*!
+ * 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
+ */
+/**
+ * A Word list paragraph, read before its `mso-list` style is lost
+ */
+export interface WordListItem {
+    paragraph: HTMLElement;
+    list: string;
+    level: number;
+    tag: 'ul' | 'ol';
+    listStyleType: string | null;
+    start: number;
+}
+/**
+ * Finds Word's list paragraphs (`<p style="mso-list:l0 level1 lfo1">`), reads
+ * their list, level and type from the `mso-list:Ignore` marker, and removes the
+ * marker. Call it before anything strips the `mso-list` styles, then pass the
+ * result to {@link wrapWordListItems}
+ */
+export declare function readWordListItems(root: HTMLElement): WordListItem[];
+/**
+ * Turns the paragraphs found by {@link readWordListItems} into `<ul>`/`<ol>`
+ * lists, nesting them by level. Each paragraph becomes an `<li>` without Word's
+ * hanging indent
+ */
+export declare function wrapWordListItems(items: WordListItem[]): void;

package/types/core/helpers/utils/align.d.ts

@@ -10,7 +10,7 @@ import type { HAlignClasses, IJodit, ImageHAlign, Nullable } from "../../../type
 /**
  * The class names to align `elm` with: `alignClasses` for its tag, or for the
  * media in it when it wraps media (a `mediaWrappers` wrapper, `jodit` or
- * `jodit-media`), falling back to `imageAlignClasses` for an image
+ * `jodit-media`)
  */
 export declare function getAlignClasses(jodit: IJodit, elm: Nullable<HTMLElement>): Nullable<HAlignClasses>;
 /**

package/types/core/selection/helpers/index.d.ts

@@ -4,6 +4,7 @@
  * Copyright (c) 2013-2026 Valerii Chupurnov. All rights reserved. https://xdsoft.net
  */
 export * from "./composed-ranges";
+export * from "./is-moved";
 export * from "./move-node-inside-start";
 export * from "./move-the-node-along-the-edge-outward";
 /**

package/types/core/selection/helpers/is-moved.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 selection
+ */
+import type { IJodit, Nullable } from "../../../types/index";
+/**
+ * Whether the selection, `before` as it was when a key went down, has since
+ * moved to somewhere else in the editor
+ * @private
+ */
+export declare function isMoved(jodit: IJodit, before: Nullable<Range>): boolean;

package/types/langs/ar.d.ts

@@ -213,5 +213,15 @@ declare const _exports: {
     spellcheck: string;
     'Speech Recognize': string;
     All: string;
+    'Video properties': string;
+    'Audio properties': string;
+    Poster: string;
+    Autoplay: string;
+    Loop: string;
+    Muted: string;
+    Controls: string;
+    'Start at...': string;
+    'Start numbering at': string;
+    'Number for the first item': string;
 };
 export = _exports;

package/types/langs/az.d.ts

@@ -219,5 +219,15 @@ declare const _exports: {
     'Insert className': string;
     'Press Alt for custom resizing': string;
     'License: %s': string;
+    'Video properties': string;
+    'Audio properties': string;
+    Poster: string;
+    Autoplay: string;
+    Loop: string;
+    Muted: string;
+    Controls: string;
+    'Start at...': string;
+    'Start numbering at': string;
+    'Number for the first item': string;
 };
 export = _exports;

package/types/langs/cs_cz.d.ts

@@ -211,5 +211,15 @@ declare const _exports: {
     'Find Next': string;
     'Insert className': string;
     'Press Alt for custom resizing': string;
+    'Video properties': string;
+    'Audio properties': string;
+    Poster: string;
+    Autoplay: string;
+    Loop: string;
+    Muted: string;
+    Controls: string;
+    'Start at...': string;
+    'Start numbering at': string;
+    'Number for the first item': string;
 };
 export = _exports;

package/types/langs/de.d.ts

@@ -215,5 +215,15 @@ declare const _exports: {
     'Insert className': string;
     'Press Alt for custom resizing': string;
     'License: %s': string;
+    'Video properties': string;
+    'Audio properties': string;
+    Poster: string;
+    Autoplay: string;
+    Loop: string;
+    Muted: string;
+    Controls: string;
+    'Start at...': string;
+    'Start numbering at': string;
+    'Number for the first item': string;
 };
 export = _exports;

package/types/langs/es.d.ts

@@ -215,5 +215,15 @@ declare const _exports: {
     'Insert className': string;
     'Press Alt for custom resizing': string;
     'License: %s': string;
+    'Video properties': string;
+    'Audio properties': string;
+    Poster: string;
+    Autoplay: string;
+    Loop: string;
+    Muted: string;
+    Controls: string;
+    'Start at...': string;
+    'Start numbering at': string;
+    'Number for the first item': string;
 };
 export = _exports;

package/types/langs/fa.d.ts

@@ -210,5 +210,15 @@ declare const _exports: {
     'Insert className': string;
     'Press Alt for custom resizing': string;
     'License: %s': string;
+    'Video properties': string;
+    'Audio properties': string;
+    Poster: string;
+    Autoplay: string;
+    Loop: string;
+    Muted: string;
+    Controls: string;
+    'Start at...': string;
+    'Start numbering at': string;
+    'Number for the first item': string;
 };
 export = _exports;

package/types/langs/fi.d.ts

@@ -216,5 +216,15 @@ declare const _exports: {
     'Press Alt for custom resizing': string;
     'Class name': string;
     'License: %s': string;
+    'Video properties': string;
+    'Audio properties': string;
+    Poster: string;
+    Autoplay: string;
+    Loop: string;
+    Muted: string;
+    Controls: string;
+    'Start at...': string;
+    'Start numbering at': string;
+    'Number for the first item': string;
 };
 export = _exports;

package/types/langs/fr.d.ts

@@ -210,5 +210,15 @@ declare const _exports: {
     Edit: string;
     All: string;
     'License: %s': string;
+    'Video properties': string;
+    'Audio properties': string;
+    Poster: string;
+    Autoplay: string;
+    Loop: string;
+    Muted: string;
+    Controls: string;
+    'Start at...': string;
+    'Start numbering at': string;
+    'Number for the first item': string;
 };
 export = _exports;

package/types/langs/he.d.ts

@@ -210,5 +210,15 @@ declare const _exports: {
     'Insert className': string;
     'Press Alt for custom resizing': string;
     'License: %s': string;
+    'Video properties': string;
+    'Audio properties': string;
+    Poster: string;
+    Autoplay: string;
+    Loop: string;
+    Muted: string;
+    Controls: string;
+    'Start at...': string;
+    'Start numbering at': string;
+    'Number for the first item': string;
 };
 export = _exports;

package/types/langs/hu.d.ts

@@ -212,5 +212,15 @@ declare const _exports: {
     'Insert className': string;
     'Press Alt for custom resizing': string;
     'License: %s': string;
+    'Video properties': string;
+    'Audio properties': string;
+    Poster: string;
+    Autoplay: string;
+    Loop: string;
+    Muted: string;
+    Controls: string;
+    'Start at...': string;
+    'Start numbering at': string;
+    'Number for the first item': string;
 };
 export = _exports;

package/types/langs/id.d.ts

@@ -211,5 +211,15 @@ declare const _exports: {
     'Find Next': string;
     'Insert className': string;
     'Press Alt for custom resizing': string;
+    'Video properties': string;
+    'Audio properties': string;
+    Poster: string;
+    Autoplay: string;
+    Loop: string;
+    Muted: string;
+    Controls: string;
+    'Start at...': string;
+    'Start numbering at': string;
+    'Number for the first item': string;
 };
 export = _exports;

package/types/langs/it.d.ts

@@ -215,5 +215,15 @@ declare const _exports: {
     'Insert className': string;
     'Press Alt for custom resizing': string;
     'License: %s': string;
+    'Video properties': string;
+    'Audio properties': string;
+    Poster: string;
+    Autoplay: string;
+    Loop: string;
+    Muted: string;
+    Controls: string;
+    'Start at...': string;
+    'Start numbering at': string;
+    'Number for the first item': string;
 };
 export = _exports;