jodit 4.17.6 → 4.18.0

package/esm/plugins/font/config.d.ts

@@ -6,6 +6,18 @@
 declare module 'jodit/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;
+            };
+        };
     }
 }
 export {};

package/esm/plugins/font/config.js

@@ -4,16 +4,23 @@
  * Copyright (c) 2013-2026 Valerii Chupurnov. All rights reserved. https://xdsoft.net
  */
 import { Dom } from "../../core/dom/index.js";
+import { isArray } from "../../core/helpers/checker/is-array.js";
 import { trimChars } from "../../core/helpers/string/trim.js";
 import { css } from "../../core/helpers/utils/css.js";
 import { Icon } from "../../core/ui/icon.js";
 import { Config } from "../../config.js";
 import fontIcon from "./icons/font.svg.js";
 import fontsizeIcon from "./icons/fontsize.svg.js";
+import { UIFontPicker } from "./font-picker.js";
 /**
  * Default font-size points
  */
 Config.prototype.defaultFontSizePoints = 'px';
+Config.prototype.font = {
+    googleFonts: {
+        url: ''
+    }
+};
 Icon.set('font', fontIcon).set('fontsize', fontsizeIcon);
 Config.prototype.controls.fontsize = {
     command: 'fontsize',
@@ -78,6 +85,7 @@ Config.prototype.controls.fontsize = {
         return keySet.has(normalize(value.toString()));
     }
 };
+const hadSelection = new WeakSet();
 Config.prototype.controls.font = {
     ...Config.prototype.controls.fontsize,
     command: 'fontname',
@@ -108,6 +116,9 @@ Config.prototype.controls.font = {
         catch (_a) { }
         return `<span data-style="${key}" style="${isAvailable ? `font-family: ${key}!important;` : ''}">${value}</span>`;
     },
+    popup: (editor, current, close, button) => editor.o.font.googleFonts.url
+        ? new UIFontPicker(editor, button, close)
+        : false,
     data: {
         cssRule: 'font-family',
         normalize: (v) => {
@@ -119,19 +130,23 @@ Config.prototype.controls.font = {
     },
     // When no font is explicitly set, the computed font-family equals the
     // editor's own default (e.g. `-apple-system, …`). Return '' so the
-    // button shows the `Default` list entry instead of that raw stack.
-    // See #1370
-    value: (editor) => {
-        const current = editor.s.current();
-        if (!current) {
-            return;
+    // button shows the list's `Default` entry, when it has one, instead of
+    // that raw stack. See #1370
+    value: (editor, button) => {
+        const current = editor.s.current(), box = current && Dom.closest(current, Dom.isElement, editor.editor);
+        // Until there is a selection the button shows the editor's own font,
+        // and afterwards the font of the last one
+        if (box) {
+            hadSelection.add(button);
         }
-        const box = Dom.closest(current, Dom.isElement, editor.editor);
-        if (!box) {
+        else if (hadSelection.has(button)) {
             return;
         }
-        const value = css(box, 'font-family').toString();
-        if (value === css(editor.editor, 'font-family').toString()) {
+        const value = css(box || editor.editor, 'font-family').toString(), { list } = button.control;
+        if (value === css(editor.editor, 'font-family').toString() &&
+            (isArray(list)
+                ? list.includes('')
+                : '' in (list !== null && list !== void 0 ? list : {}))) {
             return '';
         }
         return value;

package/esm/plugins/font/font-picker.d.ts

@@ -0,0 +1,51 @@
+/*!
+ * 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/font
+ */
+import type { IJodit, IToolbarButton } from "../../types/index";
+import { UIElement } from "../../core/ui/element";
+/**
+ * The font family dropdown with Google Fonts. Under their own headings it
+ * lists the fonts the editor's styles give text and headings, the fonts the
+ * content uses, the control's list and the Google Fonts library
+ */
+export declare class UIFontPicker extends UIElement<IJodit> {
+    private readonly __button;
+    private readonly __close;
+    className(): string;
+    private readonly __googleFonts;
+    private readonly __fonts;
+    private __observer;
+    constructor(jodit: IJodit, __button: IToolbarButton, __close: () => void);
+    private __render;
+    /**
+     * The fonts the editor's styles give text and each heading
+     */
+    private __themeFonts;
+    /**
+     * The fonts the content sets
+     */
+    private __usedFonts;
+    private __append;
+    /**
+     * Shows the names of the Google Fonts in view, and those just below it,
+     * in their own fonts. Setting every item's font up front would have the
+     * browser look for each of the library's families among the installed
+     * fonts the first time the list opens
+     */
+    private __observeGoogleFonts;
+    /**
+     * Keeps the editor's selection, as the toolbar buttons do
+     */
+    protected onMouseDown(e: MouseEvent): void;
+    protected onClick(e: MouseEvent): void;
+    /**
+     * The font the selected text has without a font of its own: its block's
+     */
+    private __blockFont;
+    destruct(): void;
+}

package/esm/plugins/font/font-picker.js

@@ -0,0 +1,238 @@
+/*!
+ * 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 { watch } from "../../core/decorators/watch/watch.js";
+import { Dom } from "../../core/dom/dom.js";
+import { uniqueUid } from "../../core/global.js";
+import { isArray } from "../../core/helpers/checker/is-array.js";
+import { attr } from "../../core/helpers/utils/attr.js";
+import { css } from "../../core/helpers/utils/css.js";
+import { keys } from "../../core/helpers/utils/utils.js";
+import { UIElement } from "../../core/ui/element.js";
+import { firstFamily, GoogleFonts } from "./google-fonts.js";
+const HEADINGS = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
+const GENERIC_FAMILIES = new Set([
+    'serif',
+    'sans-serif',
+    'monospace',
+    'cursive',
+    'fantasy',
+    'system-ui',
+    'ui-serif',
+    'ui-sans-serif',
+    'ui-monospace',
+    'ui-rounded'
+]);
+/**
+ * A family that names a font, not a generic family or a vendor keyword such
+ * as `-apple-system`
+ */
+function isFontName(family) {
+    return (Boolean(family) &&
+        !family.startsWith('-') &&
+        !GENERIC_FAMILIES.has(family));
+}
+/**
+ * The font family dropdown with Google Fonts. Under their own headings it
+ * lists the fonts the editor's styles give text and headings, the fonts the
+ * content uses, the control's list and the Google Fonts library
+ */
+let UIFontPicker = class UIFontPicker extends UIElement {
+    className() {
+        return 'UIFontPicker';
+    }
+    constructor(jodit, __button, __close) {
+        super(jodit);
+        this.__button = __button;
+        this.__close = __close;
+        this.__fonts = new Map();
+        this.__observer = null;
+        this.__googleFonts = jodit.getInstance(GoogleFonts);
+        this.__render();
+        if (!this.__googleFonts.fonts.size) {
+            this.__googleFonts.ready.then(() => !this.isDestructed && this.__render());
+        }
+    }
+    __render() {
+        var _a, _b;
+        const { control } = this.__button, { list = {} } = control, listed = isArray(list)
+            ? list.map((key) => ({
+                value: key.toString(),
+                title: key.toString()
+            }))
+            : keys(list, false).map((key) => ({
+                value: key,
+                title: list[key].toString()
+            })), google = Array.from(this.__googleFonts.fonts.values(), (font) => ({
+            value: this.__googleFonts.value(font),
+            title: font.family,
+            font
+        })), byFamily = new Map();
+        [...google, ...listed].forEach(entry => byFamily.set(firstFamily(entry.value), entry));
+        const theme = new Map(), used = new Map();
+        // The theme's own fonts are listed too, so its body font can be chosen
+        // to take a font off
+        this.__themeFonts().forEach(fontFamily => {
+            var _a;
+            const family = firstFamily(fontFamily), title = fontFamily.split(',')[0].replace(/["']/g, '').trim(), entry = (_a = byFamily.get(family)) !== null && _a !== void 0 ? _a : (isFontName(family)
+                ? { value: fontFamily, title }
+                : undefined);
+            entry && !theme.has(family) && theme.set(family, entry);
+        });
+        this.__usedFonts().forEach(fontFamily => {
+            const family = firstFamily(fontFamily), entry = byFamily.get(family);
+            entry && !theme.has(family) && used.set(family, entry);
+        });
+        const defaultEntry = listed.find(entry => entry.value === ''), current = firstFamily((_b = (_a = control.value) === null || _a === void 0 ? void 0 : _a.call(control, this.j, this.__button)) !== null && _b !== void 0 ? _b : '');
+        Dom.detach(this.container);
+        this.__fonts.clear();
+        defaultEntry && this.__append(current, [defaultEntry]);
+        this.__append(current, [...theme.values()], 'Theme fonts');
+        this.__append(current, [...used.values()], 'Used fonts');
+        this.__append(current, listed.filter(entry => entry !== defaultEntry), 'System fonts');
+        this.__append(current, google, 'Google Fonts');
+        this.__observeGoogleFonts();
+    }
+    /**
+     * The fonts the editor's styles give text and each heading
+     */
+    __themeFonts() {
+        const { editor } = this.j, fonts = [css(editor, 'font-family').toString()];
+        HEADINGS.forEach(tag => {
+            const heading = this.j.createInside.element(tag, {
+                style: 'display: none'
+            });
+            Dom.append(editor, heading);
+            fonts.push(css(heading, 'font-family').toString());
+            Dom.safeRemove(heading);
+        });
+        return fonts;
+    }
+    /**
+     * The fonts the content sets
+     */
+    __usedFonts() {
+        return Array.from(this.j.editor.querySelectorAll('[style*="font-family"]'), element => element.style.fontFamily);
+    }
+    __append(current, entries, heading) {
+        if (!entries.length) {
+            return;
+        }
+        const { control } = this.__button, group = this.j.c.div(this.getFullElName('group'));
+        if (heading) {
+            const title = this.j.c.div(this.getFullElName('heading'), {
+                id: `${this.getFullElName('heading')}-${uniqueUid()}`
+            });
+            title.textContent = this.i18n(heading);
+            attr(group, { role: 'group', 'aria-labelledby': title.id });
+            Dom.append(group, title);
+        }
+        entries.forEach(entry => {
+            var _a, _b;
+            const item = this.j.c.element('button', {
+                type: 'button',
+                class: this.getFullElName('item'),
+                'data-value': entry.value,
+                'aria-pressed': firstFamily(entry.value) === current
+            });
+            if (entry.font) {
+                item.textContent = entry.title;
+                this.__fonts.set(item, entry.font);
+            }
+            else {
+                item.innerHTML =
+                    (_b = (_a = control.childTemplate) === null || _a === void 0 ? void 0 : _a.call(control, this.j, entry.value, entry.title, this.__button)) !== null && _b !== void 0 ? _b : entry.title;
+            }
+            Dom.append(group, item);
+        });
+        Dom.append(this.container, group);
+    }
+    /**
+     * Shows the names of the Google Fonts in view, and those just below it,
+     * in their own fonts. Setting every item's font up front would have the
+     * browser look for each of the library's families among the installed
+     * fonts the first time the list opens
+     */
+    __observeGoogleFonts() {
+        this.j.async.requestAnimationFrame(() => {
+            var _a;
+            (_a = this.__observer) === null || _a === void 0 ? void 0 : _a.disconnect();
+            if (this.isDestructed || !this.__fonts.size) {
+                return;
+            }
+            const observer = new IntersectionObserver(entries => {
+                const fonts = [];
+                entries.forEach(({ isIntersecting, target }) => {
+                    const font = this.__fonts.get(target);
+                    if (isIntersecting && font) {
+                        fonts.push(font);
+                        css(target, {
+                            fontFamily: this.__googleFonts.value(font)
+                        });
+                        observer.unobserve(target);
+                    }
+                });
+                this.__googleFonts.preview(fonts);
+            }, {
+                root: this.container.parentElement,
+                rootMargin: '0px 0px 400px 0px'
+            });
+            this.__fonts.forEach((_, item) => observer.observe(item));
+            this.__observer = observer;
+        });
+    }
+    /**
+     * Keeps the editor's selection, as the toolbar buttons do
+     */
+    onMouseDown(e) {
+        e.preventDefault();
+    }
+    onClick(e) {
+        var _a;
+        const item = Dom.up(e.target, node => Dom.isHTMLElement(node) && node.hasAttribute('data-value'), this.container);
+        if (!item) {
+            return;
+        }
+        const value = (_a = attr(item, 'data-value')) !== null && _a !== void 0 ? _a : '', font = this.__googleFonts.find(value), 
+        // The font the text has anyway is taken off rather than written
+        inherited = firstFamily(value) === firstFamily(this.__blockFont());
+        font && !inherited && this.__googleFonts.load(font);
+        this.j.execCommand('fontname', false, inherited ? '' : value);
+        this.__close();
+    }
+    /**
+     * The font the selected text has without a font of its own: its block's
+     */
+    __blockFont() {
+        const block = Dom.up(this.j.s.current(), Dom.isBlock, this.j.editor);
+        return css(block !== null && block !== void 0 ? block : this.j.editor, 'font-family').toString();
+    }
+    destruct() {
+        var _a;
+        (_a = this.__observer) === null || _a === void 0 ? void 0 : _a.disconnect();
+        super.destruct();
+    }
+};
+__decorate([
+    watch('container:mousedown')
+], UIFontPicker.prototype, "onMouseDown", null);
+__decorate([
+    watch('container:click')
+], UIFontPicker.prototype, "onClick", null);
+UIFontPicker = __decorate([
+    component
+], UIFontPicker);
+export { UIFontPicker };

package/esm/plugins/font/font.js

@@ -6,6 +6,7 @@
 import { pluginSystem } from "../../core/global.js";
 import { normalizeSize } from "../../core/helpers/index.js";
 import "./config.js";
+import { GoogleFonts } from "./google-fonts.js";
 /**
  * Process commands `fontsize` and `fontname`
  */
@@ -19,6 +20,17 @@ export function font(editor) {
         name: 'fontsize',
         group: 'font'
     });
+    if (editor.o.font.googleFonts.url) {
+        const googleFonts = editor.getInstance(GoogleFonts), loadUsed = editor.async.debounce(() => googleFonts.loadUsed(), editor.defaultTimeout);
+        googleFonts.ready.then(loadUsed);
+        editor.e.on('afterInit afterSetMode change', loadUsed);
+    }
+    // An iframe's stylesheets can arrive after the toolbar first shows the
+    // editor's font
+    editor.e.on('afterInit', () => {
+        editor.iframe &&
+            editor.e.on(editor.ed, 'load', () => editor.e.fire('updateToolbar'), { capture: true });
+    });
     const callback = (command, second, third) => {
         switch (command) {
             case 'fontsize':

package/esm/plugins/font/google-fonts.d.ts

@@ -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
+ */
+/**
+ * @module plugins/font
+ */
+import type { IJodit } from "../../types/index";
+import { ViewComponent } from "../../core/component/view-component";
+/**
+ * A font as the Google Fonts Developer API describes it
+ */
+export interface IGoogleFont {
+    family: string;
+    category: string;
+    variants: string[];
+}
+/**
+ * The first family of a `font-family` value, unquoted and in lower case for
+ * comparing
+ */
+export declare function firstFamily(fontFamily: string): string;
+/**
+ * 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 declare class GoogleFonts extends ViewComponent<IJodit> {
+    className(): string;
+    /**
+     * The library by lower-case family, empty until it arrives
+     */
+    readonly fonts: Map<string, IGoogleFont>;
+    readonly ready: Promise<void>;
+    private readonly __links;
+    private readonly __loaded;
+    private readonly __previewed;
+    constructor(jodit: IJodit);
+    /**
+     * The library's font named first in a `font-family` value
+     */
+    find(fontFamily: string): IGoogleFont | undefined;
+    /**
+     * The `font-family` value that applies a font
+     */
+    value(font: IGoogleFont): string;
+    /**
+     * Loads the regular, italic, bold and bold italic styles that a font has
+     * into the editor's document
+     */
+    load(font: IGoogleFont): void;
+    /**
+     * Loads every font of the library that the content uses
+     */
+    loadUsed(): void;
+    /**
+     * 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: IGoogleFont[]): void;
+    private __loadedInto;
+    private __family;
+    private __append;
+    destruct(): void;
+}

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