jodit 4.17.6 → 4.18.1

package/esm/plugins/font/google-fonts.js

@@ -0,0 +1,143 @@
+/*!
+ * 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 { ViewComponent } from "../../core/component/view-component.js";
+import { Dom } from "../../core/dom/dom.js";
+import { Ajax } from "../../core/request/ajax.js";
+const CSS_URL = 'https://fonts.googleapis.com/css2';
+// `cursive` and `fantasy` stand in badly for a handwriting or display font
+const GENERIC_FAMILIES = {
+    serif: 'serif',
+    monospace: 'monospace'
+};
+const libraries = new Map();
+/**
+ * The fonts of the library at `url`, fetched once for every editor on the page
+ */
+function library(jodit, url) {
+    let fonts = libraries.get(url);
+    if (!fonts) {
+        const ajax = new Ajax({ url, method: 'GET' }, jodit.o.defaultAjaxOptions);
+        fonts = ajax
+            .send()
+            .then(response => response.json())
+            // A font without a regular style can't be asked for by its name alone
+            .then(({ items }) => items.filter(font => font.variants.includes('regular')))
+            .catch(() => {
+            libraries.delete(url);
+            return [];
+        })
+            .finally(() => ajax.destruct());
+        libraries.set(url, fonts);
+    }
+    return fonts;
+}
+/**
+ * The first family of a `font-family` value, unquoted and in lower case for
+ * comparing
+ */
+export function firstFamily(fontFamily) {
+    return fontFamily.split(',')[0].replace(/["']/g, '').trim().toLowerCase();
+}
+/**
+ * Loads fonts from Google Fonts: the whole of each font the content uses into
+ * the editor's document, and just the letters of its name for the font list
+ */
+export class GoogleFonts extends ViewComponent {
+    className() {
+        return 'GoogleFonts';
+    }
+    constructor(jodit) {
+        super(jodit);
+        /**
+         * The library by lower-case family, empty until it arrives
+         */
+        this.fonts = new Map();
+        this.__links = [];
+        this.__loaded = new WeakMap();
+        this.__previewed = new Set();
+        this.ready = library(jodit, jodit.o.font.googleFonts.url).then(fonts => {
+            fonts.forEach(font => this.fonts.set(font.family.toLowerCase(), font));
+        });
+    }
+    /**
+     * The library's font named first in a `font-family` value
+     */
+    find(fontFamily) {
+        return this.fonts.get(firstFamily(fontFamily));
+    }
+    /**
+     * The `font-family` value that applies a font
+     */
+    value(font) {
+        var _a;
+        return `'${font.family}', ${(_a = GENERIC_FAMILIES[font.category]) !== null && _a !== void 0 ? _a : 'sans-serif'}`;
+    }
+    /**
+     * Loads the regular, italic, bold and bold italic styles that a font has
+     * into the editor's document
+     */
+    load(font) {
+        const loaded = this.__loadedInto(this.j.ed);
+        if (loaded.has(font.family)) {
+            return;
+        }
+        loaded.add(font.family);
+        const styles = [
+            ['regular', '0,400'],
+            ['700', '0,700'],
+            ['italic', '1,400'],
+            ['700italic', '1,700']
+        ]
+            .filter(([variant]) => font.variants.includes(variant))
+            .map(([, style]) => style);
+        this.__append(this.j.ed, `family=${this.__family(font)}:ital,wght@${styles.join(';')}`);
+    }
+    /**
+     * Loads every font of the library that the content uses
+     */
+    loadUsed() {
+        this.j.editor
+            .querySelectorAll('[style*="font-family"]')
+            .forEach(element => {
+            const font = this.find(element.style.fontFamily);
+            font && this.load(font);
+        });
+    }
+    /**
+     * Loads into the page just the letters of each font's name, so the font
+     * list can show the name in its font
+     */
+    preview(fonts) {
+        const loaded = this.__loadedInto(this.j.od);
+        fonts = fonts.filter(font => !this.__previewed.has(font.family) && !loaded.has(font.family));
+        if (!fonts.length) {
+            return;
+        }
+        fonts.forEach(font => this.__previewed.add(font.family));
+        const families = fonts.map(font => `family=${this.__family(font)}`), letters = new Set(fonts.map(font => font.family).join(''));
+        this.__append(this.j.od, `${families.join('&')}&text=${encodeURIComponent([...letters].join(''))}`);
+    }
+    __loadedInto(doc) {
+        var _a;
+        const loaded = (_a = this.__loaded.get(doc)) !== null && _a !== void 0 ? _a : new Set();
+        this.__loaded.set(doc, loaded);
+        return loaded;
+    }
+    __family(font) {
+        return encodeURIComponent(font.family).replace(/%20/g, '+');
+    }
+    __append(doc, query) {
+        const link = doc.createElement('link');
+        link.rel = 'stylesheet';
+        link.href = `${CSS_URL}?${query}&display=swap`;
+        doc.head.appendChild(link);
+        this.__links.push(link);
+    }
+    destruct() {
+        this.__links.forEach(link => Dom.safeRemove(link));
+        super.destruct();
+    }
+}

package/esm/plugins/image-properties/readers/index.js

@@ -3,6 +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
  */
+import { getAlignClasses } from "../../../core/helpers/utils/align.js";
 import { attr } from "../../../core/helpers/utils/attr.js";
 import { cssInline } from "../../../core/helpers/utils/css.js";
 import { readAlign } from "./align.js";
@@ -15,7 +16,7 @@ import { readSizes } from "./size.js";
  */
 export async function readValuesFromImage(j, state) {
     const { sourceImage: image, values } = state;
-    readAlign(image, values, j.o.imageAlignClasses);
+    readAlign(image, values, getAlignClasses(j, image));
     // Border radius
     values.borderRadius =
         parseInt(cssInline(image, 'border-radius') || '0', 10) || 0;

package/esm/plugins/image-properties/writers/index.js

@@ -4,7 +4,7 @@
  * Copyright (c) 2013-2026 Valerii Chupurnov. All rights reserved. https://xdsoft.net
  */
 import { Dom } from "../../../core/dom/dom.js";
-import { attr, hAlignElement } from "../../../core/helpers/utils/index.js";
+import { attr, getAlignClasses, hAlignElement } from "../../../core/helpers/utils/index.js";
 import { css } from "../../../core/helpers/utils/css.js";
 import { applyLink } from "./link.js";
 import { applyMargin } from "./margin.js";
@@ -49,6 +49,6 @@ export function applyValuesToImage(j, state, image) {
         attr(image, 'id', id || null);
     }
     if (opt.image.editAlign) {
-        hAlignElement(image, align, j.o.imageAlignClasses);
+        hAlignElement(image, align, getAlignClasses(j, image));
     }
 }

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

@@ -5,11 +5,9 @@
  */
 import { Dom } from "../../../../core/dom/index.js";
 import { isString } from "../../../../core/helpers/checker/is-string.js";
-import { getHAlign, hAlignElement } from "../../../../core/helpers/utils/align.js";
+import { getAlignClasses, getHAlign, hAlignElement } from "../../../../core/helpers/utils/align.js";
 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;
+import { getMediaWrapper } from "../../../../core/helpers/utils/media-wrapper.js";
 // 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;
@@ -30,7 +28,7 @@ const lineAlign = (editor, elm) => {
             return 'left';
     }
 };
-const currentAlign = (editor, elm) => (elm ? getHAlign(elm, alignClasses(editor, elm)) : 'normal');
+const currentAlign = (editor, elm) => elm ? getHAlign(elm, getAlignClasses(editor, elm)) : 'normal';
 export const align = {
     name: 'left',
     childTemplate: (_, __, value) => value,
@@ -48,7 +46,10 @@ export const align = {
             currentAlign(editor, button.target) === value.toLowerCase());
     },
     exec: (editor, elm, { control }) => {
-        if (!Dom.isTag(elm, new Set(['img', 'jodit', 'jodit-media']))) {
+        // A media wrapper kept in the content (`mediaWrappers`) is aligned itself
+        if (!Dom.isHTMLElement(elm) ||
+            (!Dom.isTag(elm, new Set(['img', 'jodit', 'jodit-media'])) &&
+                getMediaWrapper(editor, elm) !== elm)) {
             return;
         }
         const command = control.args && isString(control.args[0])
@@ -57,10 +58,11 @@ export const align = {
         if (!command) {
             return false;
         }
-        hAlignElement(elm, command, alignClasses(editor, elm));
+        hAlignElement(elm, command, getAlignClasses(editor, elm));
         if (Dom.isTag(elm, new Set(['jodit', 'jodit-media'])) &&
             elm.firstElementChild) {
-            hAlignElement(elm.firstElementChild, command);
+            const media = elm.firstElementChild;
+            hAlignElement(media, command, getAlignClasses(editor, media));
         }
         editor.synchronizeValues();
         editor.e.fire('recalcPositionPopup');

package/esm/plugins/inline-popup/inline-popup.js

@@ -16,7 +16,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { autobind, cache, debounce, wait, watch } from "../../core/decorators/index.js";
 import { Dom } from "../../core/dom/index.js";
 import { pluginSystem } from "../../core/global.js";
-import { camelCase, isArray, isFunction, isString, keys, position, splitArray, toArray } from "../../core/helpers/index.js";
+import { camelCase, getMediaWrapper, isArray, isFunction, isString, keys, position, splitArray, toArray } from "../../core/helpers/index.js";
 import { Plugin } from "../../core/plugin/index.js";
 import { UIElement } from "../../core/ui/index.js";
 import { Popup } from "../../core/ui/popup/index.js";
@@ -45,11 +45,15 @@ export class inlinePopup extends Plugin {
         return makeCollection(this.jodit, this.popup);
     }
     onClick(node) {
-        const elements = this.elmsList, target = Dom.isTag(node, 'img')
+        const elements = this.elmsList, mediaWrapper = getMediaWrapper(this.j, node), target = mediaWrapper !== null && mediaWrapper !== void 0 ? mediaWrapper : (Dom.isTag(node, 'img')
             ? node
-            : Dom.closest(node, elements, this.j.editor);
-        if (target && this.canShowPopupForType(target.nodeName.toLowerCase())) {
-            this.showPopup(() => position(target, this.j), target.nodeName.toLowerCase(), target);
+            : Dom.closest(node, elements, this.j.editor));
+        // A media wrapper kept in the content gets the media popup
+        const type = mediaWrapper
+            ? 'jodit-media'
+            : target === null || target === void 0 ? void 0 : target.nodeName.toLowerCase();
+        if (target && type && this.canShowPopupForType(type)) {
+            this.showPopup(() => position(target, this.j), type, target);
             return false;
         }
     }
@@ -263,7 +267,10 @@ export class inlinePopup extends Plugin {
         this.removeListenersForElements();
     }
     _eventsList() {
-        const el = this.elmsList;
+        var _a;
+        // Clicks on a media wrapper kept in the content (`mediaWrappers`)
+        const wrapperTags = Object.values((_a = this.j.o.mediaWrappers) !== null && _a !== void 0 ? _a : {}).map(({ tag }) => tag.toLowerCase());
+        const el = [...new Set(this.elmsList.concat(wrapperTags))];
         return el
             .map(e => camelCase(`click_${e}`))
             .concat(el.map(e => camelCase(`touchstart_${e}`)))

package/esm/plugins/media/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/media
+ */
+import type { IDictionary, MediaWrapper } from "../../types/index";
 declare module 'jodit/config' {
     interface Config {
         /**
@@ -17,6 +21,27 @@ declare module 'jodit/config' {
          * Media tags
          */
         mediaBlocks: string[];
+        /**
+         * Wrappers that media keep in the content, by the media's tag name, such as
+         * Froala's `<span class="fr-video">` around video, audio and embeds. An
+         * element with a wrapper for its tag:
+         * - is wrapped in it instead of the editor-only `mediaFakeTag` when its tag
+         * is one of `mediaBlocks`, or left in it when it's already in one
+         * - goes in inside it when the video popup inserts it, as an upload, a
+         * link's embed or embed code that is one element
+         * - opens the media popup for its wrapper when clicked, whose Align and
+         * Delete act on the wrapper
+         *
+         * A wrapper is given `contenteditable="false"` and `draggable="true"`,
+         * which stay in the value.
+         * ```javascript
+         * const frVideo = { tag: 'span', className: 'fr-video' };
+         *
+         * Jodit.make('#editor', {
+         *   mediaWrappers: { video: frVideo, audio: frVideo, iframe: frVideo }
+         * });
+         * ```
+         */
+        mediaWrappers: IDictionary<MediaWrapper>;
     }
 }
-export {};

package/esm/plugins/media/config.js

@@ -3,10 +3,8 @@
  * 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/media
- */
 import { Config } from "../../config.js";
 Config.prototype.mediaFakeTag = 'jodit-media';
 Config.prototype.mediaInFakeBlock = true;
 Config.prototype.mediaBlocks = ['video', 'audio'];
+Config.prototype.mediaWrappers = {};

package/esm/plugins/media/media.js

@@ -6,7 +6,7 @@
 import * as consts from "../../core/constants.js";
 import { Dom } from "../../core/dom/dom.js";
 import { pluginSystem } from "../../core/global.js";
-import { $$, attr, dataBind } from "../../core/helpers/utils/index.js";
+import { $$, attr, dataBind, getMediaWrapper, wrapMedia } from "../../core/helpers/utils/index.js";
 import { css, cssInline } from "../../core/helpers/utils/css.js";
 import "./config.js";
 /**
@@ -14,13 +14,18 @@ import "./config.js";
  */
 export function media(editor) {
     const keyFake = 'jodit_fake_wrapper';
-    const { mediaFakeTag, mediaBlocks, mediaInFakeBlock } = editor.options;
+    const { mediaFakeTag, mediaBlocks, mediaInFakeBlock, mediaWrappers } = editor.options;
     const wrap = (element) => {
+        var _a;
         if (element.parentNode &&
             attr(element.parentNode, 'data-jodit_iframe_wrapper')) {
             element = element.parentNode;
         }
-        else {
+        else if (mediaWrappers[element.nodeName.toLowerCase()]) {
+            element =
+                (_a = getMediaWrapper(editor, element)) !== null && _a !== void 0 ? _a : wrapMedia(editor, element);
+        }
+        else if (mediaInFakeBlock) {
             const wrapper = editor.createInside.element(mediaFakeTag, {
                 'data-jodit-temp': 1,
                 contenteditable: false,
@@ -41,13 +46,16 @@ export function media(editor) {
             Dom.append(wrapper, element);
             element = wrapper;
         }
+        else {
+            return;
+        }
         editor.e
             .off(element, 'mousedown.select touchstart.select')
             .on(element, 'mousedown.select touchstart.select', () => {
             editor.s.setCursorAfter(element);
         });
     };
-    if (mediaInFakeBlock) {
+    if (mediaInFakeBlock || Object.keys(mediaWrappers).length) {
         editor.e
             .on('afterGetValueFromEditor', (data) => {
             const rxp = new RegExp(`<${mediaFakeTag}[^>]+data-${keyFake}[^>]+>([^]+?)</${mediaFakeTag}>`, 'ig');

package/esm/plugins/video/config.js

@@ -3,22 +3,42 @@
  * Released under MIT see LICENSE.txt in the project root for license information.
  * Copyright (c) 2013-2026 Valerii Chupurnov. All rights reserved. https://xdsoft.net
  */
-import { call, convertMediaUrlToVideoEmbed } from "../../core/helpers/index.js";
+import { call, convertMediaUrlToVideoEmbed, getAlignClasses, hAlignElement, wrapMedia } from "../../core/helpers/index.js";
 import { Button } from "../../core/ui/button/index.js";
 import { UIBlock, UIForm, UIInput, UITextArea } from "../../core/ui/form/index.js";
 import { Icon } from "../../core/ui/icon.js";
 import { Config } from "../../config.js";
 import { TabsWidget, UploadTab } from "../../modules/widget/index.js";
 import videoIcon from "./video.svg.js";
+// Media the popup inserts go in their wrapper (see `mediaWrappers`), aligned
+// with `mediaDefaultAlign`
+function prepareMedia(jodit, element) {
+    const media = wrapMedia(jodit, element);
+    const { mediaDefaultAlign } = jodit.o;
+    if (mediaDefaultAlign && mediaDefaultAlign !== 'normal') {
+        hAlignElement(media, mediaDefaultAlign, getAlignClasses(jodit, media));
+    }
+    return media;
+}
 function insertVideos(data) {
     var _a;
     (_a = data.files) === null || _a === void 0 ? void 0 : _a.forEach(file => {
-        this.s.insertNode(this.createInside.element('video', {
+        this.s.insertNode(prepareMedia(this, this.createInside.element('video', {
             controls: '',
             src: data.baseurl + file
-        }));
+        })));
     });
 }
+// Embed code that is one element is prepared as media; other code goes in as
+// it is
+function prepareEmbedCode(jodit, code) {
+    const box = jodit.createInside.div();
+    box.innerHTML = code.trim();
+    const element = box.firstElementChild;
+    return element && box.childNodes.length === 1
+        ? prepareMedia(jodit, element)
+        : code;
+}
 Config.prototype.video = {
     parseUrlToVideoEmbed: convertMediaUrlToVideoEmbed,
     defaultWidth: 400,
@@ -54,7 +74,7 @@ Config.prototype.controls.video = {
             ])
         ]), tabs = [], insertCode = (code) => {
             jodit.s.restore();
-            jodit.s.insertHTML(code);
+            jodit.s.insertHTML(prepareEmbedCode(jodit, code));
             close();
         };
         jodit.s.save();

package/esm/types/toolbar.d.ts

@@ -193,6 +193,8 @@ interface IControlType<T extends IViewBased = IJodit | IViewBased | IFileBrowser
     childTemplate?: (jodit: T, key: string, value: string, button: IToolbarButton) => string;
     /**
      * After click on the button it will show popup element which consist value that this function returned
+     * For a control with a `list`, the returned content replaces the list's buttons in its dropdown,
+     * and `false` keeps them
      * @example
      * ```javascript
      * var editor = Jodit.make('.editor', {

package/esm/types/types.d.ts

@@ -187,10 +187,22 @@ export interface ImageEditorOptions {
 export type InsertMode = 'insert_as_html' | 'insert_as_text' | 'insert_clear_html' | 'insert_only_text';
 export type ImageAction = 'resize' | 'crop';
 export type ImageHAlign = 'normal' | 'left' | 'right' | 'center' | '';
+/**
+ * Class names for each alignment, see `alignClasses`. An alignment can list
+ * several sets of class names to recognise; aligning writes the first
+ */
+export type HAlignClasses = Partial<Record<Exclude<ImageHAlign, ''>, string | string[]>>;
 /**
  * Class names for each image alignment, see `imageAlignClasses`
  */
-export type ImageAlignClasses = Partial<Record<Exclude<ImageHAlign, ''>, string>>;
+export type ImageAlignClasses = HAlignClasses;
+/**
+ * A wrapper that media keep in the content, see `mediaWrappers`
+ */
+export interface MediaWrapper {
+    tag: string;
+    className: string;
+}
 export interface ImageBox {
     w: number;
     h: number;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "jodit",
-	"version": "4.17.6",
+	"version": "4.18.1",
 	"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

@@ -15,6 +15,7 @@ import type { IControlType } from "./types/index";
 import type { formTemplate } from "./plugins/link/template";
 import type { IUIForm } from "./types/index";
 import type { IUIOption } from "./types/index";
+import type { MediaWrapper } from "./types/index";
 import type { ButtonsOption } from "./types/index";
 import type { InsertMode } from "./types/index";
 import type { FuzzySearch } from "./types/index";
@@ -22,6 +23,7 @@ import type { ISourceEditor } from "./types/index";
 import type { ISpeechRecognizeConstructor } from "./plugins/speech-recognize/interface";
 import type { Attributes } from "./types/index";
 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";
@@ -642,19 +644,46 @@ declare class Config implements IViewOptions {
     /**
      * 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.
+     * 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'
+     *     center: ['align-center', 'centered']
      *   }
      * });
      * ```
      */
     imageAlignClasses: Nullable<ImageAlignClasses>;
+    /**
+     * 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.
+     *
+     * ```javascript
+     * const media = {
+     *   left: 'media-left',
+     *   right: 'media-right',
+     *   center: 'media-center'
+     * };
+     *
+     * Jodit.make('#editor', {
+     *   alignClasses: { video: media, iframe: media }
+     * });
+     * ```
+     */
+    alignClasses: IDictionary<HAlignClasses>;
+    /**
+     * Alignment given to the media the video popup inserts. `'normal'` leaves
+     * them unaligned
+     */
+    mediaDefaultAlign: ImageHAlign;
     /**
      * Do not display these buttons that are on the list
      *
@@ -1293,6 +1322,18 @@ interface Config {
 }
 interface Config {
     defaultFontSizePoints: 'px' | 'pt';
+    font: {
+        googleFonts: {
+            /**
+             * Adds the Google Fonts library to the font family dropdown, which then
+             * also lists the theme's fonts and the fonts the content uses. The
+             * address answers with the JSON of the Google Fonts Developer API:
+             * the API itself (`https://www.googleapis.com/webfonts/v1/webfonts?key=…`)
+             * or a proxy of it. Empty leaves the dropdown as it is
+             */
+            url: string;
+        };
+    };
 }
 interface Config {
     /**
@@ -1549,6 +1590,28 @@ interface Config {
      * Media tags
      */
     mediaBlocks: string[];
+    /**
+     * Wrappers that media keep in the content, by the media's tag name, such as
+     * Froala's `<span class="fr-video">` around video, audio and embeds. An
+     * element with a wrapper for its tag:
+     * - is wrapped in it instead of the editor-only `mediaFakeTag` when its tag
+     * is one of `mediaBlocks`, or left in it when it's already in one
+     * - goes in inside it when the video popup inserts it, as an upload, a
+     * link's embed or embed code that is one element
+     * - opens the media popup for its wrapper when clicked, whose Align and
+     * Delete act on the wrapper
+     *
+     * A wrapper is given `contenteditable="false"` and `draggable="true"`,
+     * which stay in the value.
+     * ```javascript
+     * const frVideo = { tag: 'span', className: 'fr-video' };
+     *
+     * Jodit.make('#editor', {
+     *   mediaWrappers: { video: frVideo, audio: frVideo, iframe: frVideo }
+     * });
+     * ```
+     */
+    mediaWrappers: IDictionary<MediaWrapper>;
 }
 interface Config {
     /**

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

@@ -6,16 +6,22 @@
 /**
  * @module helpers/utils
  */
-import type { ImageAlignClasses, ImageHAlign, Nullable } from "../../../types/index";
+import type { HAlignClasses, IJodit, ImageHAlign, Nullable } from "../../../types/index";
 /**
- * Align image, with `classes` (see `imageAlignClasses`) instead of inline
- * styles when they are given
+ * 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
  */
-export declare function hAlignElement(image: HTMLElement, align: ImageHAlign, classes?: Nullable<ImageAlignClasses>): void;
+export declare function getAlignClasses(jodit: IJodit, elm: Nullable<HTMLElement>): Nullable<HAlignClasses>;
+/**
+ * Align image, with `classes` (see `alignClasses`) instead of inline styles
+ * when they are given
+ */
+export declare function hAlignElement(image: HTMLElement, align: ImageHAlign, classes?: Nullable<HAlignClasses>): void;
 /**
  * The alignment `hAlignElement` has set on an element
  */
-export declare function getHAlign(elm: HTMLElement, classes?: Nullable<ImageAlignClasses>): ImageHAlign;
+export declare function getHAlign(elm: HTMLElement, classes?: Nullable<HAlignClasses>): ImageHAlign;
 /**
  * Remove text-align style for all selected children
  */

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

@@ -26,6 +26,7 @@ export * from "./get-class-name";
 export * from "./human-size-to-bytes";
 export * from "./is-unsafe-proto-key";
 export * from "./mark-deprecated";
+export * from "./media-wrapper";
 export * from "./parse-query";
 export * from "./print";
 export * from "./reset";

package/types/core/helpers/utils/media-wrapper.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
+ */
+/**
+ * @module helpers/utils
+ */
+import type { IJodit, Nullable } from "../../../types/index";
+/**
+ * The media in `elm` when `elm` is a wrapper media keep in the content (see
+ * `mediaWrappers`): an element of a type `elm` is the wrapper for
+ */
+export declare function getWrappedMedia(jodit: IJodit, elm: Nullable<Node>): Nullable<HTMLElement>;
+/**
+ * The wrapper media keep in the content (see `mediaWrappers`) that is or
+ * holds `node`
+ */
+export declare function getMediaWrapper(jodit: IJodit, node: Nullable<Node>): Nullable<HTMLElement>;
+/**
+ * An empty wrapper for media of type `tag` to keep in the content (see
+ * `mediaWrappers`), or null when there is none for it
+ */
+export declare function createMediaWrapper(jodit: IJodit, tag: string): Nullable<HTMLElement>;
+/**
+ * Puts `element` in the wrapper for its type (see `mediaWrappers`), and
+ * returns the wrapper, or `element` when there is none for it
+ */
+export declare function wrapMedia(jodit: IJodit, element: HTMLElement): HTMLElement;