jodit 4.15.16 → 4.15.18

package/es5/plugins/debug/debug.css

@@ -1,7 +1,7 @@
 /*!
  * jodit - Jodit is an awesome and useful wysiwyg editor with filebrowser
  * Author: Chupurnov <chupurnov@gmail.com> (https://xdsoft.net/jodit/)
- * Version: v4.15.16
+ * Version: v4.15.18
  * Url: https://xdsoft.net/jodit/
  * License(s): MIT
  */

package/es5/plugins/debug/debug.js

@@ -1,7 +1,7 @@
 /*!
  * jodit - Jodit is an awesome and useful wysiwyg editor with filebrowser
  * Author: Chupurnov <chupurnov@gmail.com> (https://xdsoft.net/jodit/)
- * Version: v4.15.16
+ * Version: v4.15.18
  * Url: https://xdsoft.net/jodit/
  * License(s): MIT
  */

package/es5/plugins/debug/debug.min.js

@@ -1,7 +1,7 @@
 /*!
  * jodit - Jodit is an awesome and useful wysiwyg editor with filebrowser
  * Author: Chupurnov <chupurnov@gmail.com> (https://xdsoft.net/jodit/)
- * Version: v4.15.16
+ * Version: v4.15.18
  * Url: https://xdsoft.net/jodit/
  * License(s): MIT
  */

package/es5/plugins/speech-recognize/speech-recognize.css

@@ -1,7 +1,7 @@
 /*!
  * jodit - Jodit is an awesome and useful wysiwyg editor with filebrowser
  * Author: Chupurnov <chupurnov@gmail.com> (https://xdsoft.net/jodit/)
- * Version: v4.15.16
+ * Version: v4.15.18
  * Url: https://xdsoft.net/jodit/
  * License(s): MIT
  */

package/es5/plugins/speech-recognize/speech-recognize.js

@@ -1,7 +1,7 @@
 /*!
  * jodit - Jodit is an awesome and useful wysiwyg editor with filebrowser
  * Author: Chupurnov <chupurnov@gmail.com> (https://xdsoft.net/jodit/)
- * Version: v4.15.16
+ * Version: v4.15.18
  * Url: https://xdsoft.net/jodit/
  * License(s): MIT
  */

package/es5/plugins/speech-recognize/speech-recognize.min.js

@@ -1,7 +1,7 @@
 /*!
  * jodit - Jodit is an awesome and useful wysiwyg editor with filebrowser
  * Author: Chupurnov <chupurnov@gmail.com> (https://xdsoft.net/jodit/)
- * Version: v4.15.16
+ * Version: v4.15.18
  * Url: https://xdsoft.net/jodit/
  * License(s): MIT
  */

package/es5/polyfills.fat.min.js

@@ -1,7 +1,7 @@
 /*!
  * jodit - Jodit is an awesome and useful wysiwyg editor with filebrowser
  * Author: Chupurnov <chupurnov@gmail.com> (https://xdsoft.net/jodit/)
- * Version: v4.15.16
+ * Version: v4.15.18
  * Url: https://xdsoft.net/jodit/
  * License(s): MIT
  */

package/es5/polyfills.js

@@ -1,7 +1,7 @@
 /*!
  * jodit - Jodit is an awesome and useful wysiwyg editor with filebrowser
  * Author: Chupurnov <chupurnov@gmail.com> (https://xdsoft.net/jodit/)
- * Version: v4.15.16
+ * Version: v4.15.18
  * Url: https://xdsoft.net/jodit/
  * License(s): MIT
  */

package/es5/polyfills.min.js

@@ -1,7 +1,7 @@
 /*!
  * jodit - Jodit is an awesome and useful wysiwyg editor with filebrowser
  * Author: Chupurnov <chupurnov@gmail.com> (https://xdsoft.net/jodit/)
- * Version: v4.15.16
+ * Version: v4.15.18
  * Url: https://xdsoft.net/jodit/
  * License(s): MIT
  */

package/esm/config.d.ts

@@ -23,6 +23,8 @@ import type { Attributes } from "./types/index";
 import type { Controls } from "./types/index";
 import type { IAsyncStorageOptions } from "./types/index";
 import type { IExtraPlugin } from "./types/index";
+import type { ImageAlignClasses } from "./types/index";
+import type { ImageHAlign } from "./types/index";
 import type { IUIButtonState } from "./types/index";
 import type { IViewOptions } from "./types/index";
 import type { NodeFunction } from "./types/index";
@@ -631,6 +633,27 @@ declare class Config implements IViewOptions {
      * Default width (in pixels) applied to images inserted into the editor
      */
     imageDefaultWidth: number;
+    /**
+     * Alignment given to images inserted into the editor. `'normal'` leaves
+     * them unaligned
+     */
+    imageDefaultAlign: ImageHAlign;
+    /**
+     * 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.
+     *
+     * ```javascript
+     * Jodit.make('#editor', {
+     *   imageAlignClasses: {
+     *     left: 'align-left',
+     *     right: 'align-right',
+     *     center: 'align-center'
+     *   }
+     * });
+     * ```
+     */
+    imageAlignClasses: Nullable<ImageAlignClasses>;
     /**
      * Do not display these buttons that are on the list
      *

package/esm/config.js

@@ -740,6 +740,27 @@ class Config {
          * Default width (in pixels) applied to images inserted into the editor
          */
         this.imageDefaultWidth = 300;
+        /**
+         * Alignment given to images inserted into the editor. `'normal'` leaves
+         * them unaligned
+         */
+        this.imageDefaultAlign = 'normal';
+        /**
+         * 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.
+         *
+         * ```javascript
+         * Jodit.make('#editor', {
+         *   imageAlignClasses: {
+         *     left: 'align-left',
+         *     right: 'align-right',
+         *     center: 'align-center'
+         *   }
+         * });
+         * ```
+         */
+        this.imageAlignClasses = null;
         /**
          * Do not display these buttons that are on the list
          *

package/esm/core/constants.js

@@ -3,7 +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
  */
-export const APP_VERSION = "4.15.16";
+export const APP_VERSION = "4.15.18";
 // prettier-ignore
 export const ES = "es2020";
 export const IS_ES_MODERN = true;

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

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

package/esm/core/helpers/utils/align.js

@@ -6,10 +6,24 @@
 import { Dom } from "../../dom/index.js";
 import { attr } from "./attr.js";
 import { clearCenterAlign, css, cssInline } from "./css.js";
+const classNames = (value) => (value !== null && value !== void 0 ? value : '').split(/\s+/).filter(Boolean);
 /**
- * Align image
+ * Align image, with `classes` (see `imageAlignClasses`) instead of inline
+ * styles when they are given
  */
-export function hAlignElement(image, align) {
+export function hAlignElement(image, align, classes) {
+    if (classes) {
+        hAlignElement(image, 'normal');
+        Object.values(classes).forEach(value => image.classList.remove(...classNames(value)));
+        image.classList.add(...classNames(classes[align || 'normal']));
+        ['class', 'style'].forEach(name => {
+            var _a;
+            if (!((_a = attr(image, name)) === null || _a === void 0 ? void 0 : _a.trim())) {
+                attr(image, name, null);
+            }
+        });
+        return;
+    }
     if (align && align !== 'normal') {
         if (align !== 'center') {
             css(image, 'float', align);
@@ -32,6 +46,30 @@ export function hAlignElement(image, align) {
         clearCenterAlign(image);
     }
 }
+/**
+ * The alignment `hAlignElement` has set on an element
+ */
+export function getHAlign(elm, classes) {
+    if (classes) {
+        for (const align of ['left', 'right', 'center', 'normal']) {
+            const names = classNames(classes[align]);
+            if (names.length &&
+                names.every(name => elm.classList.contains(name))) {
+                return align;
+            }
+        }
+    }
+    const float = cssInline(elm, 'float').toLowerCase();
+    if (float === 'left' || float === 'right') {
+        return float;
+    }
+    if (css(elm, 'display') === 'block' &&
+        cssInline(elm, 'margin-left') === 'auto' &&
+        cssInline(elm, 'margin-right') === 'auto') {
+        return 'center';
+    }
+    return 'normal';
+}
 /**
  * Remove text-align style for all selected children
  */

package/esm/core/selection/selection.js

@@ -19,6 +19,7 @@ import { autobind } from "../decorators/index.js";
 import { Dom } from "../dom/dom.js";
 import { $$, attr, css, error, getScrollParent, scrollIntoViewIfNeeded, size, toArray } from "../helpers/index.js";
 import { isFunction, isMarker, isString } from "../helpers/checker/index.js";
+import { hAlignElement } from "../helpers/utils/align.js";
 import { assert } from "../helpers/utils/assert.js";
 import { moveTheNodeAlongTheEdgeOutward } from "./helpers/move-the-node-along-the-edge-outward.js";
 import "./interface.js";
@@ -661,6 +662,10 @@ export class Selection {
         if (styles && typeof styles === 'object') {
             css(image, styles);
         }
+        const { imageDefaultAlign, imageAlignClasses } = this.j.o;
+        if (imageDefaultAlign && imageDefaultAlign !== 'normal') {
+            hAlignElement(image, imageDefaultAlign, imageAlignClasses);
+        }
         const onload = () => {
             if (image.naturalHeight < image.offsetHeight ||
                 image.naturalWidth < image.offsetWidth) {

package/esm/plugins/focus/focus.js

@@ -20,16 +20,32 @@ Config.prototype.cursorAfterAutofocus = 'end';
 Config.prototype.saveSelectionOnBlur = true;
 export function focus(editor) {
     if (editor.o.saveSelectionOnBlur) {
+        // A click that brings focus back places the caret itself, and Chrome
+        // has already placed it when focus fires, so restoring would move it
+        // back to the old selection. The saved markers are dropped instead.
+        let focusByPointer = false;
         editor.e
             .on('blur', () => {
+            // A press that never brought the focus back must not decide
+            // what the next focus does
+            focusByPointer = false;
             if (editor.isEditorMode()) {
                 editor.s.save(true);
             }
+        })
+            .on('mousedown touchstart', () => {
+            focusByPointer = !editor.editorIsActive;
         })
             .on('focus', () => {
             if (editor.isEditorMode()) {
-                editor.s.restore();
+                if (focusByPointer) {
+                    editor.s.removeMarkers();
+                }
+                else {
+                    editor.s.restore();
+                }
             }
+            focusByPointer = false;
         });
     }
     const focus = () => {

package/esm/plugins/image-processor/image-processor.js

@@ -13,8 +13,9 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
                 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 { SOURCE_CONSUMER } from "../../core/constants.js";
+import { INVISIBLE_SPACE_REG_EXP, SOURCE_CONSUMER } from "../../core/constants.js";
 import { cached, debounce, watch } from "../../core/decorators/index.js";
+import { Dom } from "../../core/dom/dom.js";
 import { pluginSystem } from "../../core/global.js";
 import { $$, dataBind } from "../../core/helpers/index.js";
 import { Plugin } from "../../core/plugin/index.js";
@@ -77,6 +78,7 @@ export class imageProcessor extends Plugin {
                     replaceDataURIToBlobUUID(editor, elm);
                 }
                 editor.e.on(elm, 'mousedown touchstart', () => {
+                    removeCaretText(elm);
                     editor.s.select(elm);
                 });
             }
@@ -93,6 +95,23 @@ __decorate([
     watch([':change', ':afterInit', ':changePlace']),
     debounce()
 ], imageProcessor.prototype, "afterChange", null);
+/**
+ * Remove the invisible-space text beside an image, which only held a caret.
+ * Selecting the image replaces the caret, and with the text still after a
+ * block image, Safari highlights the rest of the image's line. See #1512
+ */
+function removeCaretText(elm) {
+    var _a;
+    for (const side of ['previousSibling', 'nextSibling']) {
+        let node = elm[side];
+        while (Dom.isText(node) &&
+            !((_a = node.nodeValue) === null || _a === void 0 ? void 0 : _a.replace(INVISIBLE_SPACE_REG_EXP(), ''))) {
+            const next = node[side];
+            Dom.safeRemove(node);
+            node = next;
+        }
+    }
+}
 function replaceDataURIToBlobUUID(editor, elm) {
     if (!editor.o.imageProcessor.replaceDataURIToBlobIdInView) {
         return;

package/esm/plugins/image-properties/readers/align.d.ts

@@ -3,8 +3,12 @@
  * 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/image-properties
+ */
+import type { ImageAlignClasses, Nullable } from "../../../types/index";
 import type { EditValues } from "../interface";
 /**
  * @private
  */
-export declare function readAlign(image: HTMLImageElement, values: EditValues): void;
+export declare function readAlign(image: HTMLImageElement, values: EditValues, classes?: Nullable<ImageAlignClasses>): void;

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

@@ -3,25 +3,11 @@
  * 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 { css, cssInline } from "../../../core/helpers/utils/css.js";
+import { getHAlign } from "../../../core/helpers/utils/align.js";
 /**
  * @private
  */
-export function readAlign(image, values) {
-    // Align
-    if (cssInline(image, 'float') &&
-        ['left', 'right'].indexOf(cssInline(image, 'float').toLowerCase()) !==
-            -1) {
-        values.align = css(image, 'float');
-    }
-    else {
-        if (css(image, 'display') === 'block' &&
-            cssInline(image, 'margin-left') === 'auto' &&
-            cssInline(image, 'margin-right') === 'auto') {
-            values.align = 'center';
-        }
-        else {
-            values.align = '';
-        }
-    }
+export function readAlign(image, values, classes) {
+    const align = getHAlign(image, classes);
+    values.align = align === 'normal' ? '' : align;
 }

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

@@ -15,7 +15,7 @@ import { readSizes } from "./size.js";
  */
 export async function readValuesFromImage(j, state) {
     const { sourceImage: image, values } = state;
-    readAlign(image, values);
+    readAlign(image, values, j.o.imageAlignClasses);
     // Border radius
     values.borderRadius =
         parseInt(cssInline(image, 'border-radius') || '0', 10) || 0;

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

@@ -49,6 +49,6 @@ export function applyValuesToImage(j, state, image) {
         attr(image, 'id', id || null);
     }
     if (opt.image.editAlign) {
-        hAlignElement(image, align);
+        hAlignElement(image, align, j.o.imageAlignClasses);
     }
 }

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

@@ -3,15 +3,17 @@
  * 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 { css } from "../../../core/helpers/utils/css.js";
+import { css, cssInline } from "../../../core/helpers/utils/css.js";
 import { normalSizeToString } from "../utils/utils.js";
 /** @private */
 export function applyMargin(j, marginTop, marginRight, marginBottom, marginLeft, image, marginIsLocked) {
     const margins = [marginTop, marginRight, marginBottom, marginLeft];
+    // Compared with the inline value, which is what `readMargins` showed, so a
+    // margin from a stylesheet is not overwritten when the field is unchanged
     const applyMargin = (key, value) => {
-        const oldValue = css(image, key);
+        const oldValue = normalSizeToString(cssInline(image, key) || 0);
         const v = normalSizeToString(value);
-        if (oldValue.toString() !== v.toString()) {
+        if (oldValue !== v) {
             css(image, key, v);
         }
     };

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

@@ -5,12 +5,27 @@
  */
 import { Dom } from "../../../../core/dom/index.js";
 import { isString } from "../../../../core/helpers/checker/is-string.js";
-import { hAlignElement } from "../../../../core/helpers/utils/align.js";
+import { 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;
+const currentAlign = (editor, elm) => (elm ? getHAlign(elm, alignClasses(editor, elm)) : 'normal');
 export const align = {
     name: 'left',
     childTemplate: (_, __, value) => value,
     list: ['Left', 'Right', 'Center', 'Normal'],
+    update: (editor, button) => {
+        const current = currentAlign(editor, button.target);
+        button.state.icon.name = current === 'normal' ? 'left' : current;
+    },
+    isActive: (editor, button) => currentAlign(editor, button.target) !== 'normal',
+    isChildActive: (editor, button) => {
+        var _a;
+        const [value] = (_a = button.control.args) !== null && _a !== void 0 ? _a : [];
+        return (isString(value) &&
+            currentAlign(editor, button.target) === value.toLowerCase());
+    },
     exec: (editor, elm, { control }) => {
         if (!Dom.isTag(elm, new Set(['img', 'jodit', 'jodit-media']))) {
             return;
@@ -21,7 +36,7 @@ export const align = {
         if (!command) {
             return false;
         }
-        hAlignElement(elm, command);
+        hAlignElement(elm, command, alignClasses(editor, elm));
         if (Dom.isTag(elm, new Set(['jodit', 'jodit-media'])) &&
             elm.firstElementChild) {
             hAlignElement(elm.firstElementChild, command);
@@ -54,6 +69,13 @@ export default [
         name: 'valign',
         list: ['Top', 'Middle', 'Bottom', 'Normal'],
         tooltip: 'Vertical align',
+        // `vertical-align` only moves an image in the line, not a floated or block one
+        isDisabled: (editor, button) => {
+            const image = button.target;
+            return Boolean(image &&
+                (['left', 'right'].includes(css(image, 'float')) ||
+                    css(image, 'display') === 'block'));
+        },
         exec: (editor, image, { control }) => {
             if (!Dom.isTag(image, 'img')) {
                 return;

package/esm/types/types.d.ts

@@ -187,6 +187,10 @@ 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 image alignment, see `imageAlignClasses`
+ */
+export type ImageAlignClasses = Partial<Record<Exclude<ImageHAlign, ''>, string>>;
 export interface ImageBox {
     w: number;
     h: number;

package/package.json

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

@@ -23,6 +23,8 @@ import type { Attributes } from "./types/index";
 import type { Controls } from "./types/index";
 import type { IAsyncStorageOptions } from "./types/index";
 import type { IExtraPlugin } from "./types/index";
+import type { ImageAlignClasses } from "./types/index";
+import type { ImageHAlign } from "./types/index";
 import type { IUIButtonState } from "./types/index";
 import type { IViewOptions } from "./types/index";
 import type { NodeFunction } from "./types/index";
@@ -631,6 +633,27 @@ declare class Config implements IViewOptions {
      * Default width (in pixels) applied to images inserted into the editor
      */
     imageDefaultWidth: number;
+    /**
+     * Alignment given to images inserted into the editor. `'normal'` leaves
+     * them unaligned
+     */
+    imageDefaultAlign: ImageHAlign;
+    /**
+     * 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.
+     *
+     * ```javascript
+     * Jodit.make('#editor', {
+     *   imageAlignClasses: {
+     *     left: 'align-left',
+     *     right: 'align-right',
+     *     center: 'align-center'
+     *   }
+     * });
+     * ```
+     */
+    imageAlignClasses: Nullable<ImageAlignClasses>;
     /**
      * Do not display these buttons that are on the list
      *

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

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

package/types/plugins/image-properties/readers/align.d.ts

@@ -3,8 +3,12 @@
  * 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/image-properties
+ */
+import type { ImageAlignClasses, Nullable } from "../../../types/index";
 import type { EditValues } from "../interface";
 /**
  * @private
  */
-export declare function readAlign(image: HTMLImageElement, values: EditValues): void;
+export declare function readAlign(image: HTMLImageElement, values: EditValues, classes?: Nullable<ImageAlignClasses>): void;

package/types/types/types.d.ts

@@ -187,6 +187,10 @@ 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 image alignment, see `imageAlignClasses`
+ */
+export type ImageAlignClasses = Partial<Record<Exclude<ImageHAlign, ''>, string>>;
 export interface ImageBox {
     w: number;
     h: number;