jodit 4.18.3 → 4.18.4

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;
+}

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

@@ -0,0 +1,228 @@
+/*!
+ * 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 { component } from "../../../core/decorators/component/component.js";
+import { hook } from "../../../core/decorators/hook/hook.js";
+import { watch } from "../../../core/decorators/watch/watch.js";
+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 { css } from "../../../core/helpers/utils/css.js";
+import { UIElement } from "../../../core/ui/element.js";
+import { Icon } from "../../../core/ui/icon.js";
+const flags = {
+    autoplay: 'Autoplay',
+    loop: 'Loop',
+    muted: 'Muted',
+    controls: 'Controls'
+};
+const checkbox = ([flag, label]) => `<label class="jodit_vertical_middle">
+		<input type="checkbox" class="jodit-checkbox &__${flag}"/>
+		<span>~${label}~</span>
+	</label>`;
+/** @private */
+let UIVideoPropertiesForm = class UIVideoPropertiesForm extends UIElement {
+    className() {
+        return 'UIVideoPropertiesForm';
+    }
+    constructor(jodit, state, handlers) {
+        super(jodit);
+        this.state = state;
+        this.handlers = handlers;
+    }
+    render() {
+        return `<form>
+			<div class="jodit-form__group &__previewBox">
+				<img class="&__preview" alt=""/>
+			</div>
+			<div class="jodit-form__group &__sizes">
+				<input type="text" class="jodit-input &__width" placeholder="~Width~" aria-label="~Width~"/>
+				<a class="&__lockSize">*lock*</a>
+				<input type="text" class="jodit-input &__height" placeholder="~Height~" aria-label="~Height~"/>
+			</div>
+			<div class="jodit-form__group &__editPoster">
+				<label>~Poster~</label>
+				<div class="jodit-input_group">
+					<input type="text" class="jodit-input &__poster" placeholder="https://"/>
+					<div class="jodit-input_group-buttons">
+						<a class="jodit-button &__changePoster" title="~Upload~">*image*</a>
+						<a class="jodit-button &__removePoster" title="~Remove~">*bin*</a>
+					</div>
+				</div>
+			</div>
+			<div class="jodit-form__group &__playback">
+				${Object.entries(flags).map(checkbox).join('')}
+			</div>
+		</form>`;
+    }
+    input(name) {
+        return this.getElm(name);
+    }
+    show(name, shown) {
+        css(this.getElm(name), 'display', shown ? null : 'none');
+    }
+    /**
+     * A video has every field, an embed only its size, and audio only its
+     * playback settings
+     */
+    onStateMediaChange() {
+        const { media } = this.state;
+        this.show('editPoster', Dom.isTag(media, 'video'));
+        this.show('sizes', !Dom.isTag(media, 'audio'));
+        this.show('playback', !Dom.isTag(media, 'iframe'));
+        this.showPreview();
+    }
+    // A video's poster, when it has one
+    showPreview() {
+        const { media, values } = this.state;
+        const shown = Dom.isTag(media, 'video') && Boolean(values.poster);
+        this.show('previewBox', shown);
+        attr(this.getElm('preview'), 'src', shown ? values.poster : null);
+    }
+    hideChangePoster() {
+        const { uploader, filebrowser } = this.j.o;
+        // What FileSelectorWidget offers
+        const canUpload = uploader.showTabInFileSelector !== false &&
+            Boolean(uploader.url ||
+                uploader.insertImageAsBase64URI ||
+                uploader.customUploadFunction);
+        const canBrowse = Boolean(filebrowser.ajax.url || filebrowser.items.url);
+        this.show('changePoster', canUpload || canBrowse);
+    }
+    onStatePosterChange() {
+        const { poster } = this.state.values;
+        this.input('poster').value = poster;
+        this.show('removePoster', Boolean(poster));
+        this.showPreview();
+    }
+    onPosterChange() {
+        this.state.values.poster = this.input('poster').value;
+    }
+    onChangePosterClick(e) {
+        this.handlers.openPosterPopup(this.getElm('changePoster'));
+        e.stopPropagation();
+    }
+    onRemovePosterClick() {
+        this.state.values.poster = '';
+    }
+    onStateSizeIsLockedChange() {
+        this.getElm('lockSize').innerHTML = Icon.get(this.state.sizeIsLocked ? 'lock' : 'unlock');
+    }
+    onLockSizeClick() {
+        const { state } = this;
+        const { values } = state;
+        state.sizeIsLocked = !state.sizeIsLocked;
+        if (state.sizeIsLocked && isNumeric(values.width)) {
+            values.height = Math.round(parseFloat(values.width.toString()) / state.ratio);
+        }
+    }
+    onStateSizeChange() {
+        const { values } = this.state;
+        // Not the field being typed in
+        ['width', 'height'].forEach(key => {
+            const input = this.input(key);
+            if (input !== this.j.od.activeElement) {
+                input.value = values[key].toString();
+            }
+        });
+    }
+    onSizeInput(e) {
+        const { state } = this;
+        const { values } = state;
+        // Both read first, since setting one rewrites the other's field
+        const width = this.input('width').value;
+        const height = this.input('height').value;
+        if (!state.sizeIsLocked || !isNumeric(width) || !isNumeric(height)) {
+            values.width = width;
+            values.height = height;
+            return;
+        }
+        const w = parseFloat(width);
+        const h = parseFloat(height);
+        if (e.target === this.input('width')) {
+            values.width = w;
+            values.height = Math.round(w / state.ratio);
+        }
+        else {
+            values.width = Math.round(h * state.ratio);
+            values.height = h;
+        }
+    }
+    /**
+     * Autoplay mutes it, and it keeps its controls unless it autoplays
+     */
+    onStateFlagsChange() {
+        const { values } = this.state;
+        this.input('autoplay').checked = values.autoplay;
+        this.input('loop').checked = values.loop;
+        this.input('muted').checked = values.muted || values.autoplay;
+        this.input('muted').disabled = values.autoplay;
+        this.input('controls').checked = values.controls || !values.autoplay;
+        this.input('controls').disabled = !values.autoplay;
+    }
+    onFlagChange(e) {
+        Object.keys(flags).forEach(flag => {
+            const input = this.input(flag);
+            if (e.target === input) {
+                this.state.values[flag] = input.checked;
+            }
+        });
+    }
+};
+__decorate([
+    hook('ready'),
+    watch('state.media')
+], UIVideoPropertiesForm.prototype, "onStateMediaChange", null);
+__decorate([
+    hook('ready')
+], UIVideoPropertiesForm.prototype, "hideChangePoster", null);
+__decorate([
+    hook('ready'),
+    watch('state.values.poster')
+], UIVideoPropertiesForm.prototype, "onStatePosterChange", null);
+__decorate([
+    watch('poster:change')
+], UIVideoPropertiesForm.prototype, "onPosterChange", null);
+__decorate([
+    watch('changePoster:click')
+], UIVideoPropertiesForm.prototype, "onChangePosterClick", null);
+__decorate([
+    watch('removePoster:click')
+], UIVideoPropertiesForm.prototype, "onRemovePosterClick", null);
+__decorate([
+    hook('ready'),
+    watch('state.sizeIsLocked')
+], UIVideoPropertiesForm.prototype, "onStateSizeIsLockedChange", null);
+__decorate([
+    watch('lockSize:click')
+], UIVideoPropertiesForm.prototype, "onLockSizeClick", null);
+__decorate([
+    hook('ready'),
+    watch(['state.values.width', 'state.values.height'])
+], UIVideoPropertiesForm.prototype, "onStateSizeChange", null);
+__decorate([
+    watch(['width:input', 'height:input', 'width:change', 'height:change'])
+], UIVideoPropertiesForm.prototype, "onSizeInput", null);
+__decorate([
+    hook('ready'),
+    watch(Object.keys(flags).map(flag => `state.values.${flag}`))
+], UIVideoPropertiesForm.prototype, "onStateFlagsChange", null);
+__decorate([
+    watch(Object.keys(flags).map(flag => `${flag}:change`))
+], UIVideoPropertiesForm.prototype, "onFlagChange", null);
+UIVideoPropertiesForm = __decorate([
+    component
+], UIVideoPropertiesForm);
+export { UIVideoPropertiesForm };

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

@@ -0,0 +1,37 @@
+/*!
+ * 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 { Plugin } from "../../core/plugin/plugin";
+import type { VideoPropertiesState } from "./interface";
+/**
+ * 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 declare class videoProperties extends Plugin {
+    protected state: VideoPropertiesState;
+    private __readSize;
+    private get __size();
+    private get form();
+    private get dialog();
+    private get __buttons();
+    /**
+     * Open the dialog for the media `target` is, or is the wrapper of
+     */
+    protected open(target: HTMLElement): void;
+    /**
+     * 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
+     */
+    protected onGenerateReplaceVideoTabs(target: HTMLElement, close: () => void): HTMLElement;
+    private __openPosterPopup;
+    /** @override */
+    protected afterInit(): void;
+    /** @override */
+    protected beforeDestruct(): void;
+}

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.4",
 	"description": "Jodit is an awesome and useful wysiwyg editor with filebrowser",
 	"main": "esm/index.js",
 	"types": "types/index.d.ts",