jodit 4.18.3 → 4.18.6

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

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