jodit 4.17.5 → 4.18.0

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/line-height/line-height.js

@@ -58,7 +58,7 @@ export class lineHeight extends Plugin {
         try {
             if (s.isCollapsed()) {
                 const fake = c.fake();
-                s.insertNode(fake, false, false);
+                Dom.safeInsertNode(s.range, fake);
                 apply(fake);
                 Dom.safeRemove(fake);
             }

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/placeholder/placeholder.js

@@ -69,7 +69,7 @@ export class placeholder extends Plugin {
                 .on('changePlace.placeholder', this.addNativeListeners)
                 .on('change.placeholder focus.placeholder keyup.placeholder mouseup.placeholder keydown.placeholder ' +
                 'mousedown.placeholder afterSetMode.placeholder changePlace.placeholder ' +
-                'internalChange.placeholder', this.toggle)
+                'internalChange.placeholder afterCommand.placeholder', this.toggle)
                 .on(window, 'load', this.toggle);
             this.addNativeListeners();
             this.toggle();

package/esm/plugins/source/editor/engines/ace.d.ts

@@ -25,6 +25,8 @@ export declare class AceEditor extends SourceEditor<AceAjax.Editor> implements I
     init(editor: IJodit): any;
     destruct(): any;
     setValue(value: string): void;
+    private __settingValue;
+    private __onChange;
     getValue(): string;
     setReadOnly(isReadOnly: boolean): void;
     get isFocused(): boolean;

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

@@ -3,7 +3,18 @@
  * 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 * as constants from "../../../../core/constants.js";
+import { autobind } from "../../../../core/decorators/autobind/autobind.js";
 import { Dom } from "../../../../core/dom/dom.js";
 import { isString, loadNext } from "../../../../core/helpers/index.js";
 import { SourceEditor } from "../sourceEditor.js";
@@ -23,6 +34,7 @@ export class AceEditor extends SourceEditor {
         this.proxyOnMouseDown = (e) => {
             this.j.e.fire('mousedown', e);
         };
+        this.__settingValue = false;
     }
     aceExists() {
         return this.j.ow.ace !== undefined;
@@ -98,7 +110,7 @@ export class AceEditor extends SourceEditor {
             this.instance.setOption('wrap', editor.o.sourceEditorNativeOptions.wrap);
             this.instance.getSession().setUseWorker(false);
             this.instance.$blockScrolling = Infinity;
-            this.instance.on('change', this.toWYSIWYG);
+            this.instance.on('change', this.__onChange);
             this.instance.on('focus', this.proxyOnFocus);
             this.instance.on('mousedown', this.proxyOnMouseDown);
             this.instance.on('blur', this.proxyOnBlur);
@@ -155,7 +167,7 @@ export class AceEditor extends SourceEditor {
     }
     destruct() {
         var _a, _b;
-        this.instance.off('change', this.toWYSIWYG);
+        this.instance.off('change', this.__onChange);
         this.instance.off('focus', this.proxyOnFocus);
         this.instance.off('mousedown', this.proxyOnMouseDown);
         this.instance.destroy();
@@ -168,9 +180,26 @@ export class AceEditor extends SourceEditor {
                 value = html;
             }
         }
-        this.instance.setValue(value);
+        // ACE reports its own `setValue` as two changes, the removal of the
+        // old text and the insertion of the new one. Fed back into the
+        // editor they became two history entries, `content -> ''` and
+        // `'' -> content`, so the first undo after a switch to the source
+        // view and back emptied the editor. The text came from the editor
+        // in the first place, so there is nothing to send back.
+        this.__settingValue = true;
+        try {
+            this.instance.setValue(value);
+        }
+        finally {
+            this.__settingValue = false;
+        }
         this.instance.clearSelection();
     }
+    __onChange() {
+        if (!this.__settingValue) {
+            this.toWYSIWYG();
+        }
+    }
     getValue() {
         return this.instance.getValue();
     }
@@ -230,3 +259,6 @@ export class AceEditor extends SourceEditor {
         });
     }
 }
+__decorate([
+    autobind
+], AceEditor.prototype, "__onChange", null);

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