jodit 4.15.16 → 4.15.18

package/es2021.en/jodit.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
  */
@@ -728,6 +728,25 @@ let ConfigPrototype = {};
         /**
 	 * Default width (in pixels) applied to images inserted into the editor
 	 */ (0,_swc_helpers_define_property__WEBPACK_IMPORTED_MODULE_0__._)(this, "imageDefaultWidth", 300);
+        /**
+	 * Alignment given to images inserted into the editor. `'normal'` leaves
+	 * them unaligned
+	 */ (0,_swc_helpers_define_property__WEBPACK_IMPORTED_MODULE_0__._)(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'
+	 *   }
+	 * });
+	 * ```
+	 */ (0,_swc_helpers_define_property__WEBPACK_IMPORTED_MODULE_0__._)(this, "imageAlignClasses", null);
         /**
 	 * Do not display these buttons that are on the list
 	 *
@@ -1780,7 +1799,7 @@ __webpack_require__.r(__webpack_exports__);
  * ```
  * @packageDocumentation
  * @module constants
- */ const APP_VERSION = "4.15.16";
+ */ const APP_VERSION = "4.15.18";
 // prettier-ignore
 const ES = "es2021";
 const IS_ES_MODERN = true;
@@ -7535,6 +7554,7 @@ function trimChars(value, chars) {
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
 /* harmony export */   alignElement: function() { return /* binding */ alignElement; },
 /* harmony export */   clearAlign: function() { return /* binding */ clearAlign; },
+/* harmony export */   getHAlign: function() { return /* binding */ getHAlign; },
 /* harmony export */   hAlignElement: function() { return /* binding */ hAlignElement; }
 /* harmony export */ });
 /* harmony import */ var jodit_core_dom__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(27795);
@@ -7549,9 +7569,25 @@ function trimChars(value, chars) {
  */ 
 
 
+const classNames = (value)=>(value ?? '').split(/\s+/).filter(Boolean);
 /**
- * Align image
- */ function hAlignElement(image, align) {
+ * Align image, with `classes` (see `imageAlignClasses`) instead of inline
+ * styles when they are given
+ */ 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)=>{
+            if (!(0,jodit_core_helpers_utils_attr__WEBPACK_IMPORTED_MODULE_1__.attr)(image, name)?.trim()) {
+                (0,jodit_core_helpers_utils_attr__WEBPACK_IMPORTED_MODULE_1__.attr)(image, name, null);
+            }
+        });
+        return;
+    }
     if (align && align !== 'normal') {
         if (align !== 'center') {
             (0,jodit_core_helpers_utils_css__WEBPACK_IMPORTED_MODULE_2__.css)(image, 'float', align);
@@ -7574,6 +7610,31 @@ function trimChars(value, chars) {
         ;(0,jodit_core_helpers_utils_css__WEBPACK_IMPORTED_MODULE_2__.clearCenterAlign)(image);
     }
 }
+/**
+ * The alignment `hAlignElement` has set on an element
+ */ 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 = (0,jodit_core_helpers_utils_css__WEBPACK_IMPORTED_MODULE_2__.cssInline)(elm, 'float').toLowerCase();
+    if (float === 'left' || float === 'right') {
+        return float;
+    }
+    if ((0,jodit_core_helpers_utils_css__WEBPACK_IMPORTED_MODULE_2__.css)(elm, 'display') === 'block' && (0,jodit_core_helpers_utils_css__WEBPACK_IMPORTED_MODULE_2__.cssInline)(elm, 'margin-left') === 'auto' && (0,jodit_core_helpers_utils_css__WEBPACK_IMPORTED_MODULE_2__.cssInline)(elm, 'margin-right') === 'auto') {
+        return 'center';
+    }
+    return 'normal';
+}
 /**
  * Remove text-align style for all selected children
  */ function clearAlign(node) {
@@ -8736,6 +8797,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   get: function() { return /* reexport safe */ _get__WEBPACK_IMPORTED_MODULE_15__.get; },
 /* harmony export */   getClassName: function() { return /* reexport safe */ _get_class_name__WEBPACK_IMPORTED_MODULE_16__.getClassName; },
 /* harmony export */   getDataTransfer: function() { return /* reexport safe */ _utils__WEBPACK_IMPORTED_MODULE_27__.getDataTransfer; },
+/* harmony export */   getHAlign: function() { return /* reexport safe */ _align__WEBPACK_IMPORTED_MODULE_0__.getHAlign; },
 /* harmony export */   getPropertyDescriptor: function() { return /* reexport safe */ _utils__WEBPACK_IMPORTED_MODULE_27__.getPropertyDescriptor; },
 /* harmony export */   getXPathByElement: function() { return /* reexport safe */ _selector__WEBPACK_IMPORTED_MODULE_24__.getXPathByElement; },
 /* harmony export */   hAlignElement: function() { return /* reexport safe */ _align__WEBPACK_IMPORTED_MODULE_0__.hAlignElement; },
@@ -8766,7 +8828,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _assert__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(28712);
 /* harmony import */ var _assert__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_assert__WEBPACK_IMPORTED_MODULE_2__);
 /* harmony reexport (unknown) */ var __WEBPACK_REEXPORT_OBJECT__ = {};
-/* harmony reexport (unknown) */ for(var __WEBPACK_IMPORT_KEY__ in _assert__WEBPACK_IMPORTED_MODULE_2__) if(["default","alignElement","clearAlign","hAlignElement","alreadyLoadedList","appendScriptAsync","appendStyleAsync","loadNext","loadNextStyle"].indexOf(__WEBPACK_IMPORT_KEY__) < 0) __WEBPACK_REEXPORT_OBJECT__[__WEBPACK_IMPORT_KEY__] = function(key) { return _assert__WEBPACK_IMPORTED_MODULE_2__[key]; }.bind(0, __WEBPACK_IMPORT_KEY__)
+/* harmony reexport (unknown) */ for(var __WEBPACK_IMPORT_KEY__ in _assert__WEBPACK_IMPORTED_MODULE_2__) if(["default","alignElement","clearAlign","getHAlign","hAlignElement","alreadyLoadedList","appendScriptAsync","appendStyleAsync","loadNext","loadNextStyle"].indexOf(__WEBPACK_IMPORT_KEY__) < 0) __WEBPACK_REEXPORT_OBJECT__[__WEBPACK_IMPORT_KEY__] = function(key) { return _assert__WEBPACK_IMPORTED_MODULE_2__[key]; }.bind(0, __WEBPACK_IMPORT_KEY__)
 /* harmony reexport (unknown) */ __webpack_require__.d(__webpack_exports__, __WEBPACK_REEXPORT_OBJECT__);
 /* harmony import */ var _attr__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(7909);
 /* harmony import */ var _browser__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(26136);
@@ -10666,11 +10728,12 @@ function findCorrectCurrentNode(node, range, rightMode, isCollapsed, checkChild,
 /* harmony import */ var jodit_core_dom_dom__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(23211);
 /* harmony import */ var jodit_core_helpers__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(65946);
 /* harmony import */ var jodit_core_helpers_checker__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(28686);
-/* harmony import */ var jodit_core_helpers_utils_assert__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(28712);
-/* harmony import */ var jodit_core_helpers_utils_assert__WEBPACK_IMPORTED_MODULE_7___default = /*#__PURE__*/__webpack_require__.n(jodit_core_helpers_utils_assert__WEBPACK_IMPORTED_MODULE_7__);
-/* harmony import */ var jodit_core_selection_helpers_move_the_node_along_the_edge_outward__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(7470);
-/* harmony import */ var _style_commit_style__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(84578);
-/* harmony import */ var _helpers__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(42259);
+/* harmony import */ var jodit_core_helpers_utils_align__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(16849);
+/* harmony import */ var jodit_core_helpers_utils_assert__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(28712);
+/* harmony import */ var jodit_core_helpers_utils_assert__WEBPACK_IMPORTED_MODULE_8___default = /*#__PURE__*/__webpack_require__.n(jodit_core_helpers_utils_assert__WEBPACK_IMPORTED_MODULE_8__);
+/* harmony import */ var jodit_core_selection_helpers_move_the_node_along_the_edge_outward__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(7470);
+/* harmony import */ var _style_commit_style__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(84578);
+/* harmony import */ var _helpers__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(42259);
 /*!
  * Jodit Editor (https://xdsoft.net/jodit/)
  * Released under MIT see LICENSE.txt in the project root for license information.
@@ -10692,6 +10755,7 @@ function findCorrectCurrentNode(node, range, rightMode, isCollapsed, checkChild,
 
 
 
+
 class Selection {
     /**
 	 * Short alias for this.jodit
@@ -11124,7 +11188,7 @@ class Selection {
             return node;
         }
         if (!jodit_core_dom_dom__WEBPACK_IMPORTED_MODULE_4__.Dom.isText(node)) {
-            const ret = (0,_helpers__WEBPACK_IMPORTED_MODULE_10__.findCorrectCurrentNode)(node, range, rightMode, sel.isCollapsed, checkChild, child);
+            const ret = (0,_helpers__WEBPACK_IMPORTED_MODULE_11__.findCorrectCurrentNode)(node, range, rightMode, sel.isCollapsed, checkChild, child);
             node = ret.node;
             rightMode = ret.rightMode;
         }
@@ -11265,6 +11329,10 @@ class Selection {
         if (styles && typeof styles === 'object') {
             (0,jodit_core_helpers__WEBPACK_IMPORTED_MODULE_5__.css)(image, styles);
         }
+        const { imageDefaultAlign, imageAlignClasses } = this.j.o;
+        if (imageDefaultAlign && imageDefaultAlign !== 'normal') {
+            (0,jodit_core_helpers_utils_align__WEBPACK_IMPORTED_MODULE_7__.hAlignElement)(image, imageDefaultAlign, imageAlignClasses);
+        }
         const onload = ()=>{
             if (image.naturalHeight < image.offsetHeight || image.naturalWidth < image.offsetWidth) {
                 (0,jodit_core_helpers__WEBPACK_IMPORTED_MODULE_5__.css)(image, {
@@ -11388,7 +11456,7 @@ class Selection {
         const isSignificant = (elm)=>Boolean(elm && !jodit_core_dom_dom__WEBPACK_IMPORTED_MODULE_4__.Dom.isTag(elm, 'br') && !jodit_core_dom_dom__WEBPACK_IMPORTED_MODULE_4__.Dom.isEmptyTextNode(elm) && !jodit_core_dom_dom__WEBPACK_IMPORTED_MODULE_4__.Dom.isTemporary(elm) && !(jodit_core_dom_dom__WEBPACK_IMPORTED_MODULE_4__.Dom.isElement(elm) && this.j.e.fire('isInvisibleForCursor', elm) === true));
         // check right offset
         if (jodit_core_dom_dom__WEBPACK_IMPORTED_MODULE_4__.Dom.isText(container)) {
-            if ((0,_helpers__WEBPACK_IMPORTED_MODULE_10__.cursorInTheEdgeOfString)(container, offset, start, end)) {
+            if ((0,_helpers__WEBPACK_IMPORTED_MODULE_11__.cursorInTheEdgeOfString)(container, offset, start, end)) {
                 return false;
             }
         } else {
@@ -11776,8 +11844,8 @@ class Selection {
 	 * }) // will remove `color:red` from `span`
 	 * ```
 	 */ commitStyle(options) {
-        ;(0,jodit_core_helpers_utils_assert__WEBPACK_IMPORTED_MODULE_7__.assert)((0,jodit_core_helpers__WEBPACK_IMPORTED_MODULE_5__.size)(options) > 0, 'Need to pass at least one option');
-        const styleElm = new _style_commit_style__WEBPACK_IMPORTED_MODULE_9__.CommitStyle(options);
+        ;(0,jodit_core_helpers_utils_assert__WEBPACK_IMPORTED_MODULE_8__.assert)((0,jodit_core_helpers__WEBPACK_IMPORTED_MODULE_5__.size)(options) > 0, 'Need to pass at least one option');
+        const styleElm = new _style_commit_style__WEBPACK_IMPORTED_MODULE_10__.CommitStyle(options);
         styleElm.apply(this.j);
     }
     /**
@@ -11827,7 +11895,7 @@ class Selection {
             }
             const fragment = leftRange.extractContents();
             const clearEmpties = (node)=>jodit_core_dom_dom__WEBPACK_IMPORTED_MODULE_4__.Dom.each(node, (node)=>jodit_core_dom_dom__WEBPACK_IMPORTED_MODULE_4__.Dom.isEmptyTextNode(node) && jodit_core_dom_dom__WEBPACK_IMPORTED_MODULE_4__.Dom.safeRemove(node));
-            (0,jodit_core_helpers_utils_assert__WEBPACK_IMPORTED_MODULE_7__.assert)(currentBox.parentNode, 'Splitting fails');
+            (0,jodit_core_helpers_utils_assert__WEBPACK_IMPORTED_MODULE_8__.assert)(currentBox.parentNode, 'Splitting fails');
             try {
                 clearEmpties(fragment);
                 clearEmpties(currentBox);
@@ -11880,7 +11948,7 @@ class Selection {
             const r = range.cloneRange();
             r.collapse(start);
             jodit_core_dom_dom__WEBPACK_IMPORTED_MODULE_4__.Dom.safeInsertNode(r, fake);
-            (0,jodit_core_selection_helpers_move_the_node_along_the_edge_outward__WEBPACK_IMPORTED_MODULE_8__.moveTheNodeAlongTheEdgeOutward)(fake, start, this.j.editor);
+            (0,jodit_core_selection_helpers_move_the_node_along_the_edge_outward__WEBPACK_IMPORTED_MODULE_9__.moveTheNodeAlongTheEdgeOutward)(fake, start, this.j.editor);
             return fake;
         };
         const leftFake = moveMaxEdgeFake(true);
@@ -31596,14 +31664,28 @@ jodit_core_global__WEBPACK_IMPORTED_MODULE_1__.pluginSystem.add('file', file);
  */ jodit_config__WEBPACK_IMPORTED_MODULE_2__.Config.prototype.saveSelectionOnBlur = true;
 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 = ()=>{
@@ -32629,11 +32711,12 @@ jodit_config__WEBPACK_IMPORTED_MODULE_0__.Config.prototype.imageProcessor = {
 /* harmony import */ var _swc_helpers_ts_decorate__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(31635);
 /* harmony import */ var jodit_core_constants__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(81937);
 /* harmony import */ var jodit_core_decorators__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(84839);
-/* harmony import */ var jodit_core_global__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(28077);
-/* harmony import */ var jodit_core_helpers__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(65946);
-/* harmony import */ var jodit_core_plugin__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(91206);
-/* harmony import */ var jodit_modules_uploader_helpers_data_uri_to_blob__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(23112);
-/* harmony import */ var _config__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(51034);
+/* harmony import */ var jodit_core_dom_dom__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(23211);
+/* harmony import */ var jodit_core_global__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(28077);
+/* harmony import */ var jodit_core_helpers__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(65946);
+/* harmony import */ var jodit_core_plugin__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(91206);
+/* harmony import */ var jodit_modules_uploader_helpers_data_uri_to_blob__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(23112);
+/* harmony import */ var _config__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(51034);
 /*!
  * Jodit Editor (https://xdsoft.net/jodit/)
  * Released under MIT see LICENSE.txt in the project root for license information.
@@ -32650,11 +32733,12 @@ jodit_config__WEBPACK_IMPORTED_MODULE_0__.Config.prototype.imageProcessor = {
 
 
 
+
 const JODIT_IMAGE_PROCESSOR_BINDED = '__jodit_imageprocessor_binded';
 const JODIT_IMAGE_BLOB_ID = JODIT_IMAGE_PROCESSOR_BINDED + 'blob-id';
 /**
  * Change editor's size after load all images
- */ class imageProcessor extends jodit_core_plugin__WEBPACK_IMPORTED_MODULE_5__.Plugin {
+ */ class imageProcessor extends jodit_core_plugin__WEBPACK_IMPORTED_MODULE_6__.Plugin {
     afterInit(jodit) {}
     beforeDestruct(jodit) {
         const buffer = (0,jodit_core_decorators__WEBPACK_IMPORTED_MODULE_2__.cached)(jodit, 'buffer');
@@ -32692,9 +32776,9 @@ const JODIT_IMAGE_BLOB_ID = JODIT_IMAGE_PROCESSOR_BINDED + 'blob-id';
         if (!editor.editor) {
             return;
         }
-        ;(0,jodit_core_helpers__WEBPACK_IMPORTED_MODULE_4__.$$)('img', editor.editor).forEach((elm)=>{
-            if (!(0,jodit_core_helpers__WEBPACK_IMPORTED_MODULE_4__.dataBind)(elm, JODIT_IMAGE_PROCESSOR_BINDED)) {
-                (0,jodit_core_helpers__WEBPACK_IMPORTED_MODULE_4__.dataBind)(elm, JODIT_IMAGE_PROCESSOR_BINDED, true);
+        ;(0,jodit_core_helpers__WEBPACK_IMPORTED_MODULE_5__.$$)('img', editor.editor).forEach((elm)=>{
+            if (!(0,jodit_core_helpers__WEBPACK_IMPORTED_MODULE_5__.dataBind)(elm, JODIT_IMAGE_PROCESSOR_BINDED)) {
+                (0,jodit_core_helpers__WEBPACK_IMPORTED_MODULE_5__.dataBind)(elm, JODIT_IMAGE_PROCESSOR_BINDED, true);
                 if (!elm.complete) {
                     editor.e.on(elm, 'load', function ElementOnLoad() {
                         !editor.isInDestruct && editor.e?.fire('resize');
@@ -32705,6 +32789,7 @@ const JODIT_IMAGE_BLOB_ID = JODIT_IMAGE_PROCESSOR_BINDED + 'blob-id';
                     replaceDataURIToBlobUUID(editor, elm);
                 }
                 editor.e.on(elm, 'mousedown touchstart', ()=>{
+                    removeCaretText(elm);
                     editor.s.select(elm);
                 });
             }
@@ -32725,6 +32810,23 @@ const JODIT_IMAGE_BLOB_ID = JODIT_IMAGE_PROCESSOR_BINDED + 'blob-id';
     ]),
     (0,jodit_core_decorators__WEBPACK_IMPORTED_MODULE_2__.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) {
+    for (const side of [
+        'previousSibling',
+        'nextSibling'
+    ]){
+        let node = elm[side];
+        while(jodit_core_dom_dom__WEBPACK_IMPORTED_MODULE_3__.Dom.isText(node) && !node.nodeValue?.replace((0,jodit_core_constants__WEBPACK_IMPORTED_MODULE_1__.INVISIBLE_SPACE_REG_EXP)(), '')){
+            const next = node[side];
+            jodit_core_dom_dom__WEBPACK_IMPORTED_MODULE_3__.Dom.safeRemove(node);
+            node = next;
+        }
+    }
+}
 function replaceDataURIToBlobUUID(editor, elm) {
     if (!editor.o.imageProcessor.replaceDataURIToBlobIdInView) {
         return;
@@ -32735,7 +32837,7 @@ function replaceDataURIToBlobUUID(editor, elm) {
     const dataUri = elm.src;
     let blob;
     try {
-        blob = (0,jodit_modules_uploader_helpers_data_uri_to_blob__WEBPACK_IMPORTED_MODULE_6__.dataURItoBlob)(dataUri);
+        blob = (0,jodit_modules_uploader_helpers_data_uri_to_blob__WEBPACK_IMPORTED_MODULE_7__.dataURItoBlob)(dataUri);
     } catch  {
         // A data URI the browser accepts but we cannot decode is not worth
         // breaking the editor over — keep the image as it is
@@ -32748,7 +32850,7 @@ function replaceDataURIToBlobUUID(editor, elm) {
     list[elm.src] = dataUri;
     editor.buffer.set(JODIT_IMAGE_BLOB_ID, list);
 }
-jodit_core_global__WEBPACK_IMPORTED_MODULE_3__.pluginSystem.add('imageProcessor', imageProcessor);
+jodit_core_global__WEBPACK_IMPORTED_MODULE_4__.pluginSystem.add('imageProcessor', imageProcessor);
 
 
 /***/ }),
@@ -33051,7 +33153,7 @@ jodit_core_global__WEBPACK_IMPORTED_MODULE_4__.pluginSystem.add('imageProperties
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
 /* harmony export */   readAlign: function() { return /* binding */ readAlign; }
 /* harmony export */ });
-/* harmony import */ var jodit_core_helpers_utils_css__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(80991);
+/* harmony import */ var jodit_core_helpers_utils_align__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(16849);
 /*!
  * Jodit Editor (https://xdsoft.net/jodit/)
  * Released under MIT see LICENSE.txt in the project root for license information.
@@ -33061,20 +33163,9 @@ jodit_core_global__WEBPACK_IMPORTED_MODULE_4__.pluginSystem.add('imageProperties
  */ 
 /**
  * @private
- */ function readAlign(image, values) {
-    // Align
-    if ((0,jodit_core_helpers_utils_css__WEBPACK_IMPORTED_MODULE_0__.cssInline)(image, 'float') && [
-        'left',
-        'right'
-    ].indexOf((0,jodit_core_helpers_utils_css__WEBPACK_IMPORTED_MODULE_0__.cssInline)(image, 'float').toLowerCase()) !== -1) {
-        values.align = (0,jodit_core_helpers_utils_css__WEBPACK_IMPORTED_MODULE_0__.css)(image, 'float');
-    } else {
-        if ((0,jodit_core_helpers_utils_css__WEBPACK_IMPORTED_MODULE_0__.css)(image, 'display') === 'block' && (0,jodit_core_helpers_utils_css__WEBPACK_IMPORTED_MODULE_0__.cssInline)(image, 'margin-left') === 'auto' && (0,jodit_core_helpers_utils_css__WEBPACK_IMPORTED_MODULE_0__.cssInline)(image, 'margin-right') === 'auto') {
-            values.align = 'center';
-        } else {
-            values.align = '';
-        }
-    }
+ */ function readAlign(image, values, classes) {
+    const align = (0,jodit_core_helpers_utils_align__WEBPACK_IMPORTED_MODULE_0__.getHAlign)(image, classes);
+    values.align = align === 'normal' ? '' : align;
 }
 
 
@@ -33110,7 +33201,7 @@ jodit_core_global__WEBPACK_IMPORTED_MODULE_4__.pluginSystem.add('imageProperties
  * @private
  */ async function readValuesFromImage(j, state) {
     const { sourceImage: image, values } = state;
-    (0,_align__WEBPACK_IMPORTED_MODULE_2__.readAlign)(image, values);
+    (0,_align__WEBPACK_IMPORTED_MODULE_2__.readAlign)(image, values, j.o.imageAlignClasses);
     // Border radius
     values.borderRadius = parseInt((0,jodit_core_helpers_utils_css__WEBPACK_IMPORTED_MODULE_1__.cssInline)(image, 'border-radius') || '0', 10) || 0;
     // Id
@@ -34151,7 +34242,7 @@ UIImagePositionTab = (0,_swc_helpers_ts_decorate__WEBPACK_IMPORTED_MODULE_1__.__
         (0,jodit_core_helpers_utils__WEBPACK_IMPORTED_MODULE_1__.attr)(image, 'id', id || null);
     }
     if (opt.image.editAlign) {
-        (0,jodit_core_helpers_utils__WEBPACK_IMPORTED_MODULE_1__.hAlignElement)(image, align);
+        (0,jodit_core_helpers_utils__WEBPACK_IMPORTED_MODULE_1__.hAlignElement)(image, align, j.o.imageAlignClasses);
     }
 }
 
@@ -34222,10 +34313,12 @@ UIImagePositionTab = (0,_swc_helpers_ts_decorate__WEBPACK_IMPORTED_MODULE_1__.__
         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 = (0,jodit_core_helpers_utils_css__WEBPACK_IMPORTED_MODULE_0__.css)(image, key);
+        const oldValue = (0,_utils_utils__WEBPACK_IMPORTED_MODULE_1__.normalSizeToString)((0,jodit_core_helpers_utils_css__WEBPACK_IMPORTED_MODULE_0__.cssInline)(image, key) || 0);
         const v = (0,_utils_utils__WEBPACK_IMPORTED_MODULE_1__.normalSizeToString)(value);
-        if (oldValue.toString() !== v.toString()) {
+        if (oldValue !== v) {
             (0,jodit_core_helpers_utils_css__WEBPACK_IMPORTED_MODULE_0__.css)(image, key, v);
         }
     };
@@ -34989,6 +35082,10 @@ const cmd = (control)=>control.args && (0,jodit_core_helpers_checker__WEBPACK_IM
 
 
 
+// Images align with `imageAlignClasses`; the wrappers of iframes and media
+// keep inline styles
+const alignClasses = (editor, elm)=>jodit_core_dom__WEBPACK_IMPORTED_MODULE_0__.Dom.isTag(elm, 'img') ? editor.o.imageAlignClasses : null;
+const currentAlign = (editor, elm)=>elm ? (0,jodit_core_helpers_utils_align__WEBPACK_IMPORTED_MODULE_2__.getHAlign)(elm, alignClasses(editor, elm)) : 'normal';
 const align = {
     name: 'left',
     childTemplate: (_, __, value)=>value,
@@ -34998,6 +35095,15 @@ const align = {
         '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)=>{
+        const [value] = button.control.args ?? [];
+        return (0,jodit_core_helpers_checker_is_string__WEBPACK_IMPORTED_MODULE_1__.isString)(value) && currentAlign(editor, button.target) === value.toLowerCase();
+    },
     exec: (editor, elm, { control })=>{
         if (!jodit_core_dom__WEBPACK_IMPORTED_MODULE_0__.Dom.isTag(elm, new Set([
             'img',
@@ -35010,7 +35116,7 @@ const align = {
         if (!command) {
             return false;
         }
-        ;(0,jodit_core_helpers_utils_align__WEBPACK_IMPORTED_MODULE_2__.hAlignElement)(elm, command);
+        ;(0,jodit_core_helpers_utils_align__WEBPACK_IMPORTED_MODULE_2__.hAlignElement)(elm, command, alignClasses(editor, elm));
         if (jodit_core_dom__WEBPACK_IMPORTED_MODULE_0__.Dom.isTag(elm, new Set([
             'jodit',
             'jodit-media'
@@ -35050,6 +35156,14 @@ const align = {
             '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((0,jodit_core_helpers_utils_css__WEBPACK_IMPORTED_MODULE_3__.css)(image, 'float')) || (0,jodit_core_helpers_utils_css__WEBPACK_IMPORTED_MODULE_3__.css)(image, 'display') === 'block'));
+        },
         exec: (editor, image, { control })=>{
             if (!jodit_core_dom__WEBPACK_IMPORTED_MODULE_0__.Dom.isTag(image, 'img')) {
                 return;