roosterjs-content-model-plugins 9.45.0 → 9.45.1

package/lib-amd/imageEdit/ImageEditPlugin.js

@@ -1,567 +1,567 @@
-define(["require", "exports", "tslib", "./utils/applyChange", "./utils/canRegenerateImage", "./utils/imageEditUtils", "./utils/createImageWrapper", "./Cropper/cropperContext", "./utils/findEditingImage", "./utils/filterInnerResizerHandles", "./utils/getDropAndDragHelpers", "./utils/getHTMLImageOptions", "./utils/getSelectedImage", "./utils/updateImageEditInfo", "./types/ImageEditElementClass", "./utils/normalizeImageSelection", "./Resizer/resizerContext", "./Rotator/rotatorContext", "./utils/updateHandleCursor", "./Rotator/updateRotateHandle", "./utils/updateWrapper", "roosterjs-content-model-dom"], function (require, exports, tslib_1, applyChange_1, canRegenerateImage_1, imageEditUtils_1, createImageWrapper_1, cropperContext_1, findEditingImage_1, filterInnerResizerHandles_1, getDropAndDragHelpers_1, getHTMLImageOptions_1, getSelectedImage_1, updateImageEditInfo_1, ImageEditElementClass_1, normalizeImageSelection_1, resizerContext_1, rotatorContext_1, updateHandleCursor_1, updateRotateHandle_1, updateWrapper_1, roosterjs_content_model_dom_1) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-    exports.ImageEditPlugin = void 0;
-    var DefaultOptions = {
-        borderColor: '#DB626C',
-        minWidth: 10,
-        minHeight: 10,
-        preserveRatio: true,
-        disableRotate: false,
-        disableSideResize: false,
-        onSelectState: ['resize', 'rotate'],
-    };
-    var MouseRightButton = 2;
-    var DRAG_ID = '_dragging';
-    var IMAGE_EDIT_CLASS = 'imageEdit';
-    var IMAGE_EDIT_CLASS_CARET = 'imageEditCaretColor';
-    var IMAGE_EDIT_FORMAT_EVENT = 'ImageEditEvent';
-    /**
-     * ImageEdit plugin handles the following image editing features:
-     * - Resize image
-     * - Crop image
-     * - Rotate image
-     * - Flip image
-     */
-    var ImageEditPlugin = /** @class */ (function () {
-        function ImageEditPlugin(options) {
-            this.editor = null;
-            this.shadowSpan = null;
-            this.selectedImage = null;
-            this.wrapper = null;
-            this.imageEditInfo = null;
-            this.imageHTMLOptions = null;
-            this.dndHelpers = [];
-            this.clonedImage = null;
-            this.lastSrc = null;
-            this.wasImageResized = false;
-            this.isCropMode = false;
-            this.resizers = [];
-            this.rotators = [];
-            this.croppers = [];
-            this.zoomScale = 1;
-            this.disposer = null;
-            this.isEditing = false;
-            this.options = (0, tslib_1.__assign)((0, tslib_1.__assign)({}, DefaultOptions), options);
-        }
-        /**
-         * Get name of this plugin
-         */
-        ImageEditPlugin.prototype.getName = function () {
-            return 'ImageEdit';
-        };
-        /**
-         * The first method that editor will call to a plugin when editor is initializing.
-         * It will pass in the editor instance, plugin should take this chance to save the
-         * editor reference so that it can call to any editor method or format API later.
-         * @param editor The editor object
-         */
-        ImageEditPlugin.prototype.initialize = function (editor) {
-            var _this = this;
-            this.editor = editor;
-            this.disposer = editor.attachDomEvent({
-                blur: {
-                    beforeDispatch: function () {
-                        if (_this.isEditing && _this.editor && !_this.editor.isDisposed()) {
-                            _this.applyFormatWithContentModel(_this.editor, _this.isCropMode, true /* shouldSelectImage */);
-                        }
-                    },
-                },
-                dragstart: {
-                    beforeDispatch: function (ev) {
-                        if (_this.editor) {
-                            var target = ev.target;
-                            if (_this.isImageSelection(target)) {
-                                target.id = target.id + DRAG_ID;
-                            }
-                        }
-                    },
-                },
-                dragend: {
-                    beforeDispatch: function (ev) {
-                        if (_this.editor) {
-                            var target = ev.target;
-                            if (_this.isImageSelection(target) && target.id.includes(DRAG_ID)) {
-                                target.id = target.id.replace(DRAG_ID, '').trim();
-                            }
-                        }
-                    },
-                },
-            });
-        };
-        /**
-         * The last method that editor will call to a plugin before it is disposed.
-         * Plugin can take this chance to clear the reference to editor. After this method is
-         * called, plugin should not call to any editor method since it will result in error.
-         */
-        ImageEditPlugin.prototype.dispose = function () {
-            if (this.disposer) {
-                this.disposer();
-                this.disposer = null;
-            }
-            this.isEditing = false;
-            this.cleanInfo();
-            this.editor = null;
-        };
-        /**
-         * Core method for a plugin. Once an event happens in editor, editor will call this
-         * method of each plugin to handle the event as long as the event is not handled
-         * exclusively by another plugin.
-         * @param event The event to handle:
-         */
-        ImageEditPlugin.prototype.onPluginEvent = function (event) {
-            if (!this.editor) {
-                return;
-            }
-            switch (event.eventType) {
-                case 'mouseDown':
-                    this.mouseDownHandler(this.editor, event);
-                    break;
-                case 'mouseUp':
-                    this.mouseUpHandler(this.editor, event);
-                    break;
-                case 'keyDown':
-                    this.keyDownHandler(this.editor, event);
-                    break;
-                case 'contentChanged':
-                    this.contentChangedHandler(this.editor, event);
-                    break;
-                case 'extractContentWithDom':
-                    this.removeImageEditing(event.clonedRoot);
-                    break;
-                case 'beforeLogicalRootChange':
-                    this.handleBeforeLogicalRootChange();
-                    break;
-            }
-        };
-        ImageEditPlugin.prototype.handleBeforeLogicalRootChange = function () {
-            if (this.isEditing && this.editor && !this.editor.isDisposed()) {
-                this.applyFormatWithContentModel(this.editor, this.isCropMode, false /* shouldSelectImage */);
-                this.removeImageWrapper();
-                this.cleanInfo();
-            }
-        };
-        ImageEditPlugin.prototype.removeImageEditing = function (clonedRoot) {
-            var images = clonedRoot.querySelectorAll('img');
-            images.forEach(function (image) {
-                if (image.dataset.editingInfo) {
-                    delete image.dataset.editingInfo;
-                }
-            });
-        };
-        ImageEditPlugin.prototype.isImageSelection = function (target) {
-            return ((0, roosterjs_content_model_dom_1.isNodeOfType)(target, 'ELEMENT_NODE') &&
-                ((0, roosterjs_content_model_dom_1.isElementOfType)(target, 'img') ||
-                    !!((0, roosterjs_content_model_dom_1.isElementOfType)(target, 'span') &&
-                        target.firstElementChild &&
-                        (0, roosterjs_content_model_dom_1.isNodeOfType)(target.firstElementChild, 'ELEMENT_NODE') &&
-                        (0, roosterjs_content_model_dom_1.isElementOfType)(target.firstElementChild, 'img'))));
-        };
-        ImageEditPlugin.prototype.mouseUpHandler = function (editor, event) {
-            var selection = editor.getDOMSelection();
-            if ((selection && selection.type == 'image') || this.isEditing) {
-                var shouldSelectImage = this.isImageSelection(event.rawEvent.target) &&
-                    event.rawEvent.button === MouseRightButton;
-                this.applyFormatWithContentModel(editor, this.isCropMode, shouldSelectImage);
-            }
-        };
-        ImageEditPlugin.prototype.mouseDownHandler = function (editor, event) {
-            if (this.isEditing &&
-                this.isImageSelection(event.rawEvent.target) &&
-                event.rawEvent.button !== MouseRightButton &&
-                !this.isCropMode) {
-                this.applyFormatWithContentModel(editor, this.isCropMode);
-            }
-        };
-        ImageEditPlugin.prototype.onDropHandler = function (editor) {
-            var selection = editor.getDOMSelection();
-            if ((selection === null || selection === void 0 ? void 0 : selection.type) == 'image') {
-                editor.formatContentModel(function (model) {
-                    var imageDragged = (0, findEditingImage_1.findEditingImage)(model, selection.image.id);
-                    var imageDropped = (0, findEditingImage_1.findEditingImage)(model, selection.image.id.replace(DRAG_ID, '').trim());
-                    if (imageDragged && imageDropped) {
-                        var draggedIndex = imageDragged.paragraph.segments.indexOf(imageDragged.image);
-                        (0, roosterjs_content_model_dom_1.mutateBlock)(imageDragged.paragraph).segments.splice(draggedIndex, 1);
-                        var segment = imageDropped.image;
-                        var paragraph = imageDropped.paragraph;
-                        (0, roosterjs_content_model_dom_1.mutateSegment)(paragraph, segment, function (image) {
-                            image.isSelected = true;
-                            image.isSelectedAsImageSelection = true;
-                        });
-                        return true;
-                    }
-                    return false;
-                });
-            }
-        };
-        ImageEditPlugin.prototype.keyDownHandler = function (editor, event) {
-            if (this.isEditing) {
-                if (event.rawEvent.key === 'Escape' ||
-                    event.rawEvent.key === 'Delete' ||
-                    event.rawEvent.key === 'Backspace') {
-                    if (event.rawEvent.key === 'Escape') {
-                        this.removeImageWrapper();
-                    }
-                    this.cleanInfo();
-                }
-                else {
-                    if (event.rawEvent.key == 'Enter' && this.isCropMode) {
-                        event.rawEvent.preventDefault();
-                    }
-                    this.applyFormatWithContentModel(editor, this.isCropMode, true /** should selectImage */, false /* isApiOperation */);
-                }
-            }
-        };
-        ImageEditPlugin.prototype.setContentHandler = function () {
-            if (this.selectedImage) {
-                this.cleanInfo();
-                (0, roosterjs_content_model_dom_1.setImageState)(this.selectedImage, '');
-                this.isEditing = false;
-                this.isCropMode = false;
-            }
-        };
-        ImageEditPlugin.prototype.formatEventHandler = function (event) {
-            if (this.isEditing && event.formatApiName !== IMAGE_EDIT_FORMAT_EVENT) {
-                this.cleanInfo();
-                this.isEditing = false;
-                this.isCropMode = false;
-            }
-        };
-        ImageEditPlugin.prototype.contentChangedHandler = function (editor, event) {
-            switch (event.source) {
-                case roosterjs_content_model_dom_1.ChangeSource.SetContent:
-                    this.setContentHandler();
-                    break;
-                case roosterjs_content_model_dom_1.ChangeSource.Format:
-                    this.formatEventHandler(event);
-                    break;
-                case roosterjs_content_model_dom_1.ChangeSource.Drop:
-                    this.onDropHandler(editor);
-                    break;
-            }
-        };
-        /**
-         * EXPOSED FOR TESTING PURPOSE ONLY
-         */
-        ImageEditPlugin.prototype.applyFormatWithContentModel = function (editor, isCropMode, shouldSelectImage, isApiOperation) {
-            var _this = this;
-            var editingImageModel;
-            var selection = editor.getDOMSelection();
-            var isRTL = false;
-            editor.formatContentModel(function (model, context) {
-                var editingImage = (0, getSelectedImage_1.getSelectedImage)(model);
-                var previousSelectedImage = isApiOperation
-                    ? editingImage
-                    : (0, findEditingImage_1.findEditingImage)(model);
-                var result = false;
-                // Skip adding undo snapshot for now. If we detect any changes later, we will reset it
-                context.skipUndoSnapshot = 'SkipAll';
-                if (shouldSelectImage ||
-                    (previousSelectedImage === null || previousSelectedImage === void 0 ? void 0 : previousSelectedImage.image) != (editingImage === null || editingImage === void 0 ? void 0 : editingImage.image) ||
-                    (previousSelectedImage === null || previousSelectedImage === void 0 ? void 0 : previousSelectedImage.image.format.imageState) == findEditingImage_1.EDITING_MARKER ||
-                    isApiOperation) {
-                    var _a = _this, lastSrc_1 = _a.lastSrc, selectedImage_1 = _a.selectedImage, imageEditInfo_1 = _a.imageEditInfo, clonedImage_1 = _a.clonedImage;
-                    if ((_this.isEditing || isApiOperation) &&
-                        previousSelectedImage &&
-                        lastSrc_1 &&
-                        selectedImage_1 &&
-                        imageEditInfo_1 &&
-                        clonedImage_1) {
-                        (0, roosterjs_content_model_dom_1.mutateSegment)(previousSelectedImage.paragraph, previousSelectedImage.image, function (image) {
-                            var changeState = (0, applyChange_1.applyChange)(editor, selectedImage_1, image, imageEditInfo_1, lastSrc_1, _this.wasImageResized || _this.isCropMode, clonedImage_1);
-                            if (_this.wasImageResized || changeState == 'FullyChanged') {
-                                context.skipUndoSnapshot = false;
-                            }
-                            var isSameImage = (previousSelectedImage === null || previousSelectedImage === void 0 ? void 0 : previousSelectedImage.image) === (editingImage === null || editingImage === void 0 ? void 0 : editingImage.image);
-                            image.isSelected = isSameImage || shouldSelectImage;
-                            image.isSelectedAsImageSelection = isSameImage || shouldSelectImage;
-                            image.format.imageState = undefined;
-                            if ((selection === null || selection === void 0 ? void 0 : selection.type) == 'range' && !selection.range.collapsed) {
-                                var selectedParagraphs = (0, roosterjs_content_model_dom_1.getSelectedParagraphs)(model, true);
-                                var isImageInRange = selectedParagraphs.some(function (paragraph) {
-                                    return paragraph.segments.includes(image);
-                                });
-                                if (isImageInRange) {
-                                    image.isSelected = true;
-                                }
-                            }
-                        });
-                        if (shouldSelectImage) {
-                            (0, normalizeImageSelection_1.normalizeImageSelection)(previousSelectedImage);
-                        }
-                        _this.cleanInfo();
-                        result = true;
-                    }
-                    _this.isEditing = false;
-                    _this.isCropMode = false;
-                    if (editingImage &&
-                        (selection === null || selection === void 0 ? void 0 : selection.type) == 'image' &&
-                        !shouldSelectImage &&
-                        !isApiOperation) {
-                        _this.isEditing = true;
-                        _this.isCropMode = isCropMode;
-                        (0, roosterjs_content_model_dom_1.mutateSegment)(editingImage.paragraph, editingImage.image, function (image) {
-                            editingImageModel = image;
-                            isRTL = editingImage.paragraph.format.direction == 'rtl';
-                            _this.imageEditInfo = (0, updateImageEditInfo_1.updateImageEditInfo)(image, selection.image);
-                            image.format.imageState = 'isEditing';
-                        });
-                        result = true;
-                    }
-                }
-                return result;
-            }, {
-                onNodeCreated: function (model, node) {
-                    if (!isApiOperation &&
-                        editingImageModel &&
-                        editingImageModel == model &&
-                        editingImageModel.format.imageState == findEditingImage_1.EDITING_MARKER &&
-                        (0, roosterjs_content_model_dom_1.isNodeOfType)(node, 'ELEMENT_NODE') &&
-                        (0, roosterjs_content_model_dom_1.isElementOfType)(node, 'img')) {
-                        if (isCropMode) {
-                            _this.startCropMode(editor, node, isRTL);
-                        }
-                        else {
-                            _this.startRotateAndResize(editor, node, isRTL);
-                        }
-                    }
-                },
-                apiName: IMAGE_EDIT_FORMAT_EVENT,
-            }, {
-                tryGetFromCache: true,
-            });
-        };
-        ImageEditPlugin.prototype.startEditing = function (editor, image, apiOperation) {
-            var _this = this;
-            if (!this.imageEditInfo) {
-                this.imageEditInfo = (0, updateImageEditInfo_1.getSelectedImageMetadata)(editor, image);
-            }
-            if ((this.imageEditInfo.widthPx == 0 || this.imageEditInfo.heightPx == 0) &&
-                !image.complete) {
-                // Image dimensions are zero and loading is incomplete, wait for image to load.
-                image.onload = function () {
-                    _this.updateImageDimensionsIfZero(image);
-                    _this.startEditingInternal(editor, image, apiOperation);
-                    image.onload = null;
-                    image.onerror = null;
-                };
-                image.onerror = function () {
-                    image.onload = null;
-                    image.onerror = null;
-                };
-            }
-            else {
-                this.updateImageDimensionsIfZero(image);
-                this.startEditingInternal(editor, image, apiOperation);
-            }
-        };
-        ImageEditPlugin.prototype.updateImageDimensionsIfZero = function (image) {
-            var _a, _b;
-            if (((_a = this.imageEditInfo) === null || _a === void 0 ? void 0 : _a.widthPx) === 0 || ((_b = this.imageEditInfo) === null || _b === void 0 ? void 0 : _b.heightPx) === 0) {
-                this.imageEditInfo.widthPx = image.clientWidth;
-                this.imageEditInfo.heightPx = image.clientHeight;
-            }
-        };
-        ImageEditPlugin.prototype.startEditingInternal = function (editor, image, apiOperation) {
-            if (!this.imageEditInfo) {
-                this.imageEditInfo = (0, updateImageEditInfo_1.getSelectedImageMetadata)(editor, image);
-            }
-            this.imageHTMLOptions = (0, getHTMLImageOptions_1.getHTMLImageOptions)(editor, this.options, this.imageEditInfo);
-            this.lastSrc = image.getAttribute('src');
-            var _a = (0, createImageWrapper_1.createImageWrapper)(editor, image, this.options, this.imageEditInfo, this.imageHTMLOptions, apiOperation), resizers = _a.resizers, rotators = _a.rotators, wrapper = _a.wrapper, shadowSpan = _a.shadowSpan, imageClone = _a.imageClone, croppers = _a.croppers;
-            this.shadowSpan = shadowSpan;
-            this.selectedImage = image;
-            this.wrapper = wrapper;
-            this.clonedImage = imageClone;
-            this.wasImageResized = (0, imageEditUtils_1.checkIfImageWasResized)(image);
-            this.resizers = resizers;
-            this.rotators = rotators;
-            this.croppers = croppers;
-            this.zoomScale = editor.getDOMHelper().calculateZoomScale();
-            editor.setEditorStyle(IMAGE_EDIT_CLASS, "outline-style:none!important;", [
-                "span:has(>img" + (0, roosterjs_content_model_dom_1.getSafeIdSelector)(this.selectedImage.id) + ")",
-            ]);
-            editor.setEditorStyle(IMAGE_EDIT_CLASS_CARET, "caret-color: transparent;");
-        };
-        ImageEditPlugin.prototype.startRotateAndResize = function (editor, image, isRTL) {
-            var _this = this;
-            var _a, _b;
-            if (this.imageEditInfo) {
-                this.startEditing(editor, image, ['resize', 'rotate']);
-                if (this.selectedImage && this.imageEditInfo && this.wrapper && this.clonedImage) {
-                    var isMobileOrTable = !!editor.getEnvironment().isMobileOrTablet;
-                    this.dndHelpers = (0, tslib_1.__spreadArray)((0, tslib_1.__spreadArray)([], (0, tslib_1.__read)((0, getDropAndDragHelpers_1.getDropAndDragHelpers)(this.wrapper, this.imageEditInfo, this.options, ImageEditElementClass_1.ImageEditElementClass.ResizeHandle, resizerContext_1.Resizer, function () {
-                        if (_this.imageEditInfo &&
-                            _this.selectedImage &&
-                            _this.wrapper &&
-                            _this.clonedImage) {
-                            (0, updateWrapper_1.updateWrapper)(_this.imageEditInfo, _this.options, _this.selectedImage, _this.clonedImage, _this.wrapper, _this.resizers, undefined /* croppers */, isRTL);
-                            _this.wasImageResized = true;
-                        }
-                    }, this.zoomScale, isMobileOrTable)), false), (0, tslib_1.__read)((0, getDropAndDragHelpers_1.getDropAndDragHelpers)(this.wrapper, this.imageEditInfo, this.options, ImageEditElementClass_1.ImageEditElementClass.RotateHandle, rotatorContext_1.Rotator, function () {
-                        var _a, _b;
-                        if (_this.imageEditInfo &&
-                            _this.selectedImage &&
-                            _this.wrapper &&
-                            _this.clonedImage) {
-                            (0, updateWrapper_1.updateWrapper)(_this.imageEditInfo, _this.options, _this.selectedImage, _this.clonedImage, _this.wrapper, undefined /* resizers */, undefined /* croppers */, isRTL, true /* isRotating */);
-                            _this.updateRotateHandleState(editor, _this.selectedImage, _this.wrapper, _this.rotators, (_a = _this.imageEditInfo) === null || _a === void 0 ? void 0 : _a.angleRad, !!((_b = _this.options) === null || _b === void 0 ? void 0 : _b.disableSideResize));
-                            _this.updateResizeHandleDirection(_this.resizers, _this.imageEditInfo.angleRad);
-                        }
-                    }, this.zoomScale, isMobileOrTable)), false);
-                    (0, updateWrapper_1.updateWrapper)(this.imageEditInfo, this.options, this.selectedImage, this.clonedImage, this.wrapper, this.resizers, undefined /* croppers */, isRTL);
-                    this.updateRotateHandleState(editor, this.selectedImage, this.wrapper, this.rotators, (_a = this.imageEditInfo) === null || _a === void 0 ? void 0 : _a.angleRad, !!((_b = this.options) === null || _b === void 0 ? void 0 : _b.disableSideResize));
-                }
-            }
-        };
-        ImageEditPlugin.prototype.updateResizeHandleDirection = function (resizers, angleRad) {
-            var resizeHandles = (0, filterInnerResizerHandles_1.filterInnerResizerHandles)(resizers);
-            if (angleRad !== undefined) {
-                (0, updateHandleCursor_1.updateHandleCursor)(resizeHandles, angleRad);
-            }
-        };
-        ImageEditPlugin.prototype.updateRotateHandleState = function (editor, image, wrapper, rotators, angleRad, disableSideResize) {
-            var viewport = editor.getVisibleViewport();
-            var smallImage = (0, imageEditUtils_1.isASmallImage)(image.width, image.height);
-            if (viewport && rotators && rotators.length > 0) {
-                var rotator = rotators[0];
-                var rotatorHandle = rotator.firstElementChild;
-                if ((0, roosterjs_content_model_dom_1.isNodeOfType)(rotatorHandle, 'ELEMENT_NODE') &&
-                    (0, roosterjs_content_model_dom_1.isElementOfType)(rotatorHandle, 'div')) {
-                    (0, updateRotateHandle_1.updateRotateHandle)(viewport, angleRad !== null && angleRad !== void 0 ? angleRad : 0, wrapper, rotator, rotatorHandle, smallImage, disableSideResize);
-                }
-            }
-        };
-        ImageEditPlugin.prototype.isOperationAllowed = function (operation) {
-            return (operation === 'resize' ||
-                operation === 'rotate' ||
-                operation === 'flip' ||
-                operation === 'crop');
-        };
-        ImageEditPlugin.prototype.canRegenerateImage = function (image) {
-            return (0, canRegenerateImage_1.canRegenerateImage)(image);
-        };
-        ImageEditPlugin.prototype.startCropMode = function (editor, image, isRTL) {
-            var _this = this;
-            if (this.imageEditInfo) {
-                this.startEditing(editor, image, ['crop']);
-                if (this.imageEditInfo && this.selectedImage && this.wrapper && this.clonedImage) {
-                    this.dndHelpers = (0, tslib_1.__spreadArray)([], (0, tslib_1.__read)((0, getDropAndDragHelpers_1.getDropAndDragHelpers)(this.wrapper, this.imageEditInfo, this.options, ImageEditElementClass_1.ImageEditElementClass.CropHandle, cropperContext_1.Cropper, function () {
-                        if (_this.imageEditInfo &&
-                            _this.selectedImage &&
-                            _this.wrapper &&
-                            _this.clonedImage) {
-                            (0, updateWrapper_1.updateWrapper)(_this.imageEditInfo, _this.options, _this.selectedImage, _this.clonedImage, _this.wrapper, undefined /* resizers */, _this.croppers, isRTL);
-                            _this.isCropMode = true;
-                        }
-                    }, this.zoomScale, !!editor.getEnvironment().isMobileOrTablet)), false);
-                    (0, updateWrapper_1.updateWrapper)(this.imageEditInfo, this.options, this.selectedImage, this.clonedImage, this.wrapper, undefined /* resizers */, this.croppers, isRTL);
-                }
-            }
-        };
-        ImageEditPlugin.prototype.cropImage = function () {
-            if (!this.editor) {
-                return;
-            }
-            if (!this.editor.getEnvironment().isSafari) {
-                this.editor.focus(); // Safari will keep the selection when click crop, then the focus() call should not be called
-            }
-            var selection = this.editor.getDOMSelection();
-            if ((selection === null || selection === void 0 ? void 0 : selection.type) == 'image') {
-                this.applyFormatWithContentModel(this.editor, true /* isCropMode */, false /* shouldSelectImage */);
-            }
-        };
-        ImageEditPlugin.prototype.editImage = function (editor, image, apiOperation, operation) {
-            this.startEditing(editor, image, apiOperation);
-            if (!this.selectedImage || !this.imageEditInfo || !this.wrapper || !this.clonedImage) {
-                return;
-            }
-            operation(this.imageEditInfo);
-            (0, updateWrapper_1.updateWrapper)(this.imageEditInfo, this.options, this.selectedImage, this.clonedImage, this.wrapper);
-            this.applyFormatWithContentModel(editor, false /* isCrop */, true /* shouldSelect*/, true /* isApiOperation */);
-        };
-        /**
-         * Exported for testing purpose only
-         */
-        ImageEditPlugin.prototype.cleanInfo = function () {
-            var _a, _b;
-            (_a = this.editor) === null || _a === void 0 ? void 0 : _a.setEditorStyle(IMAGE_EDIT_CLASS, null);
-            (_b = this.editor) === null || _b === void 0 ? void 0 : _b.setEditorStyle(IMAGE_EDIT_CLASS_CARET, null);
-            this.selectedImage = null;
-            this.shadowSpan = null;
-            this.wrapper = null;
-            this.imageEditInfo = null;
-            this.imageHTMLOptions = null;
-            this.dndHelpers.forEach(function (helper) { return helper.dispose(); });
-            this.dndHelpers = [];
-            this.clonedImage = null;
-            this.lastSrc = null;
-            this.wasImageResized = false;
-            this.isCropMode = false;
-            this.resizers = [];
-            this.rotators = [];
-            this.croppers = [];
-        };
-        ImageEditPlugin.prototype.removeImageWrapper = function () {
-            var image = null;
-            if (this.shadowSpan && this.shadowSpan.parentElement) {
-                if (this.shadowSpan.firstElementChild &&
-                    (0, roosterjs_content_model_dom_1.isNodeOfType)(this.shadowSpan.firstElementChild, 'ELEMENT_NODE') &&
-                    (0, roosterjs_content_model_dom_1.isElementOfType)(this.shadowSpan.firstElementChild, 'img')) {
-                    image = this.shadowSpan.firstElementChild;
-                }
-                (0, roosterjs_content_model_dom_1.unwrap)(this.shadowSpan);
-                this.shadowSpan = null;
-                this.wrapper = null;
-            }
-            return image;
-        };
-        ImageEditPlugin.prototype.flipImage = function (direction) {
-            var _a;
-            var selection = (_a = this.editor) === null || _a === void 0 ? void 0 : _a.getDOMSelection();
-            if (!this.editor || !selection || selection.type !== 'image') {
-                return;
-            }
-            var image = selection.image;
-            if (this.editor) {
-                this.editImage(this.editor, image, ['flip'], function (imageEditInfo) {
-                    var angleRad = imageEditInfo.angleRad || 0;
-                    var isInVerticalPostion = (angleRad >= Math.PI / 2 && angleRad < (3 * Math.PI) / 4) ||
-                        (angleRad <= -Math.PI / 2 && angleRad > (-3 * Math.PI) / 4);
-                    if (isInVerticalPostion) {
-                        if (direction === 'horizontal') {
-                            imageEditInfo.flippedVertical = !imageEditInfo.flippedVertical;
-                        }
-                        else {
-                            imageEditInfo.flippedHorizontal = !imageEditInfo.flippedHorizontal;
-                        }
-                    }
-                    else {
-                        if (direction === 'vertical') {
-                            imageEditInfo.flippedVertical = !imageEditInfo.flippedVertical;
-                        }
-                        else {
-                            imageEditInfo.flippedHorizontal = !imageEditInfo.flippedHorizontal;
-                        }
-                    }
-                });
-            }
-        };
-        ImageEditPlugin.prototype.rotateImage = function (angleRad) {
-            var _a;
-            var selection = (_a = this.editor) === null || _a === void 0 ? void 0 : _a.getDOMSelection();
-            if (!this.editor || !selection || selection.type !== 'image') {
-                return;
-            }
-            var image = selection.image;
-            if (this.editor) {
-                this.editImage(this.editor, image, [], function (imageEditInfo) {
-                    imageEditInfo.angleRad = (imageEditInfo.angleRad || 0) + angleRad;
-                });
-            }
-        };
-        return ImageEditPlugin;
-    }());
-    exports.ImageEditPlugin = ImageEditPlugin;
-});
+define(["require", "exports", "tslib", "./utils/applyChange", "./utils/canRegenerateImage", "./utils/imageEditUtils", "./utils/createImageWrapper", "./Cropper/cropperContext", "./utils/findEditingImage", "./utils/filterInnerResizerHandles", "./utils/getDropAndDragHelpers", "./utils/getHTMLImageOptions", "./utils/getSelectedImage", "./utils/updateImageEditInfo", "./types/ImageEditElementClass", "./utils/normalizeImageSelection", "./Resizer/resizerContext", "./Rotator/rotatorContext", "./utils/updateHandleCursor", "./Rotator/updateRotateHandle", "./utils/updateWrapper", "roosterjs-content-model-dom"], function (require, exports, tslib_1, applyChange_1, canRegenerateImage_1, imageEditUtils_1, createImageWrapper_1, cropperContext_1, findEditingImage_1, filterInnerResizerHandles_1, getDropAndDragHelpers_1, getHTMLImageOptions_1, getSelectedImage_1, updateImageEditInfo_1, ImageEditElementClass_1, normalizeImageSelection_1, resizerContext_1, rotatorContext_1, updateHandleCursor_1, updateRotateHandle_1, updateWrapper_1, roosterjs_content_model_dom_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.ImageEditPlugin = void 0;
+    var DefaultOptions = {
+        borderColor: '#DB626C',
+        minWidth: 10,
+        minHeight: 10,
+        preserveRatio: true,
+        disableRotate: false,
+        disableSideResize: false,
+        onSelectState: ['resize', 'rotate'],
+    };
+    var MouseRightButton = 2;
+    var DRAG_ID = '_dragging';
+    var IMAGE_EDIT_CLASS = 'imageEdit';
+    var IMAGE_EDIT_CLASS_CARET = 'imageEditCaretColor';
+    var IMAGE_EDIT_FORMAT_EVENT = 'ImageEditEvent';
+    /**
+     * ImageEdit plugin handles the following image editing features:
+     * - Resize image
+     * - Crop image
+     * - Rotate image
+     * - Flip image
+     */
+    var ImageEditPlugin = /** @class */ (function () {
+        function ImageEditPlugin(options) {
+            this.editor = null;
+            this.shadowSpan = null;
+            this.selectedImage = null;
+            this.wrapper = null;
+            this.imageEditInfo = null;
+            this.imageHTMLOptions = null;
+            this.dndHelpers = [];
+            this.clonedImage = null;
+            this.lastSrc = null;
+            this.wasImageResized = false;
+            this.isCropMode = false;
+            this.resizers = [];
+            this.rotators = [];
+            this.croppers = [];
+            this.zoomScale = 1;
+            this.disposer = null;
+            this.isEditing = false;
+            this.options = (0, tslib_1.__assign)((0, tslib_1.__assign)({}, DefaultOptions), options);
+        }
+        /**
+         * Get name of this plugin
+         */
+        ImageEditPlugin.prototype.getName = function () {
+            return 'ImageEdit';
+        };
+        /**
+         * The first method that editor will call to a plugin when editor is initializing.
+         * It will pass in the editor instance, plugin should take this chance to save the
+         * editor reference so that it can call to any editor method or format API later.
+         * @param editor The editor object
+         */
+        ImageEditPlugin.prototype.initialize = function (editor) {
+            var _this = this;
+            this.editor = editor;
+            this.disposer = editor.attachDomEvent({
+                blur: {
+                    beforeDispatch: function () {
+                        if (_this.isEditing && _this.editor && !_this.editor.isDisposed()) {
+                            _this.applyFormatWithContentModel(_this.editor, _this.isCropMode, true /* shouldSelectImage */);
+                        }
+                    },
+                },
+                dragstart: {
+                    beforeDispatch: function (ev) {
+                        if (_this.editor) {
+                            var target = ev.target;
+                            if (_this.isImageSelection(target)) {
+                                target.id = target.id + DRAG_ID;
+                            }
+                        }
+                    },
+                },
+                dragend: {
+                    beforeDispatch: function (ev) {
+                        if (_this.editor) {
+                            var target = ev.target;
+                            if (_this.isImageSelection(target) && target.id.includes(DRAG_ID)) {
+                                target.id = target.id.replace(DRAG_ID, '').trim();
+                            }
+                        }
+                    },
+                },
+            });
+        };
+        /**
+         * The last method that editor will call to a plugin before it is disposed.
+         * Plugin can take this chance to clear the reference to editor. After this method is
+         * called, plugin should not call to any editor method since it will result in error.
+         */
+        ImageEditPlugin.prototype.dispose = function () {
+            if (this.disposer) {
+                this.disposer();
+                this.disposer = null;
+            }
+            this.isEditing = false;
+            this.cleanInfo();
+            this.editor = null;
+        };
+        /**
+         * Core method for a plugin. Once an event happens in editor, editor will call this
+         * method of each plugin to handle the event as long as the event is not handled
+         * exclusively by another plugin.
+         * @param event The event to handle:
+         */
+        ImageEditPlugin.prototype.onPluginEvent = function (event) {
+            if (!this.editor) {
+                return;
+            }
+            switch (event.eventType) {
+                case 'mouseDown':
+                    this.mouseDownHandler(this.editor, event);
+                    break;
+                case 'mouseUp':
+                    this.mouseUpHandler(this.editor, event);
+                    break;
+                case 'keyDown':
+                    this.keyDownHandler(this.editor, event);
+                    break;
+                case 'contentChanged':
+                    this.contentChangedHandler(this.editor, event);
+                    break;
+                case 'extractContentWithDom':
+                    this.removeImageEditing(event.clonedRoot);
+                    break;
+                case 'beforeLogicalRootChange':
+                    this.handleBeforeLogicalRootChange();
+                    break;
+            }
+        };
+        ImageEditPlugin.prototype.handleBeforeLogicalRootChange = function () {
+            if (this.isEditing && this.editor && !this.editor.isDisposed()) {
+                this.applyFormatWithContentModel(this.editor, this.isCropMode, false /* shouldSelectImage */);
+                this.removeImageWrapper();
+                this.cleanInfo();
+            }
+        };
+        ImageEditPlugin.prototype.removeImageEditing = function (clonedRoot) {
+            var images = clonedRoot.querySelectorAll('img');
+            images.forEach(function (image) {
+                if (image.dataset.editingInfo) {
+                    delete image.dataset.editingInfo;
+                }
+            });
+        };
+        ImageEditPlugin.prototype.isImageSelection = function (target) {
+            return ((0, roosterjs_content_model_dom_1.isNodeOfType)(target, 'ELEMENT_NODE') &&
+                ((0, roosterjs_content_model_dom_1.isElementOfType)(target, 'img') ||
+                    !!((0, roosterjs_content_model_dom_1.isElementOfType)(target, 'span') &&
+                        target.firstElementChild &&
+                        (0, roosterjs_content_model_dom_1.isNodeOfType)(target.firstElementChild, 'ELEMENT_NODE') &&
+                        (0, roosterjs_content_model_dom_1.isElementOfType)(target.firstElementChild, 'img'))));
+        };
+        ImageEditPlugin.prototype.mouseUpHandler = function (editor, event) {
+            var selection = editor.getDOMSelection();
+            if ((selection && selection.type == 'image') || this.isEditing) {
+                var shouldSelectImage = this.isImageSelection(event.rawEvent.target) &&
+                    event.rawEvent.button === MouseRightButton;
+                this.applyFormatWithContentModel(editor, this.isCropMode, shouldSelectImage);
+            }
+        };
+        ImageEditPlugin.prototype.mouseDownHandler = function (editor, event) {
+            if (this.isEditing &&
+                this.isImageSelection(event.rawEvent.target) &&
+                event.rawEvent.button !== MouseRightButton &&
+                !this.isCropMode) {
+                this.applyFormatWithContentModel(editor, this.isCropMode);
+            }
+        };
+        ImageEditPlugin.prototype.onDropHandler = function (editor) {
+            var selection = editor.getDOMSelection();
+            if ((selection === null || selection === void 0 ? void 0 : selection.type) == 'image') {
+                editor.formatContentModel(function (model) {
+                    var imageDragged = (0, findEditingImage_1.findEditingImage)(model, selection.image.id);
+                    var imageDropped = (0, findEditingImage_1.findEditingImage)(model, selection.image.id.replace(DRAG_ID, '').trim());
+                    if (imageDragged && imageDropped) {
+                        var draggedIndex = imageDragged.paragraph.segments.indexOf(imageDragged.image);
+                        (0, roosterjs_content_model_dom_1.mutateBlock)(imageDragged.paragraph).segments.splice(draggedIndex, 1);
+                        var segment = imageDropped.image;
+                        var paragraph = imageDropped.paragraph;
+                        (0, roosterjs_content_model_dom_1.mutateSegment)(paragraph, segment, function (image) {
+                            image.isSelected = true;
+                            image.isSelectedAsImageSelection = true;
+                        });
+                        return true;
+                    }
+                    return false;
+                });
+            }
+        };
+        ImageEditPlugin.prototype.keyDownHandler = function (editor, event) {
+            if (this.isEditing) {
+                if (event.rawEvent.key === 'Escape' ||
+                    event.rawEvent.key === 'Delete' ||
+                    event.rawEvent.key === 'Backspace') {
+                    if (event.rawEvent.key === 'Escape') {
+                        this.removeImageWrapper();
+                    }
+                    this.cleanInfo();
+                }
+                else {
+                    if (event.rawEvent.key == 'Enter' && this.isCropMode) {
+                        event.rawEvent.preventDefault();
+                    }
+                    this.applyFormatWithContentModel(editor, this.isCropMode, true /** should selectImage */, false /* isApiOperation */);
+                }
+            }
+        };
+        ImageEditPlugin.prototype.setContentHandler = function () {
+            if (this.selectedImage) {
+                this.cleanInfo();
+                (0, roosterjs_content_model_dom_1.setImageState)(this.selectedImage, '');
+                this.isEditing = false;
+                this.isCropMode = false;
+            }
+        };
+        ImageEditPlugin.prototype.formatEventHandler = function (event) {
+            if (this.isEditing && event.formatApiName !== IMAGE_EDIT_FORMAT_EVENT) {
+                this.cleanInfo();
+                this.isEditing = false;
+                this.isCropMode = false;
+            }
+        };
+        ImageEditPlugin.prototype.contentChangedHandler = function (editor, event) {
+            switch (event.source) {
+                case roosterjs_content_model_dom_1.ChangeSource.SetContent:
+                    this.setContentHandler();
+                    break;
+                case roosterjs_content_model_dom_1.ChangeSource.Format:
+                    this.formatEventHandler(event);
+                    break;
+                case roosterjs_content_model_dom_1.ChangeSource.Drop:
+                    this.onDropHandler(editor);
+                    break;
+            }
+        };
+        /**
+         * EXPOSED FOR TESTING PURPOSE ONLY
+         */
+        ImageEditPlugin.prototype.applyFormatWithContentModel = function (editor, isCropMode, shouldSelectImage, isApiOperation) {
+            var _this = this;
+            var editingImageModel;
+            var selection = editor.getDOMSelection();
+            var isRTL = false;
+            editor.formatContentModel(function (model, context) {
+                var editingImage = (0, getSelectedImage_1.getSelectedImage)(model);
+                var previousSelectedImage = isApiOperation
+                    ? editingImage
+                    : (0, findEditingImage_1.findEditingImage)(model);
+                var result = false;
+                // Skip adding undo snapshot for now. If we detect any changes later, we will reset it
+                context.skipUndoSnapshot = 'SkipAll';
+                if (shouldSelectImage ||
+                    (previousSelectedImage === null || previousSelectedImage === void 0 ? void 0 : previousSelectedImage.image) != (editingImage === null || editingImage === void 0 ? void 0 : editingImage.image) ||
+                    (previousSelectedImage === null || previousSelectedImage === void 0 ? void 0 : previousSelectedImage.image.format.imageState) == findEditingImage_1.EDITING_MARKER ||
+                    isApiOperation) {
+                    var _a = _this, lastSrc_1 = _a.lastSrc, selectedImage_1 = _a.selectedImage, imageEditInfo_1 = _a.imageEditInfo, clonedImage_1 = _a.clonedImage;
+                    if ((_this.isEditing || isApiOperation) &&
+                        previousSelectedImage &&
+                        lastSrc_1 &&
+                        selectedImage_1 &&
+                        imageEditInfo_1 &&
+                        clonedImage_1) {
+                        (0, roosterjs_content_model_dom_1.mutateSegment)(previousSelectedImage.paragraph, previousSelectedImage.image, function (image) {
+                            var changeState = (0, applyChange_1.applyChange)(editor, selectedImage_1, image, imageEditInfo_1, lastSrc_1, _this.wasImageResized || _this.isCropMode, clonedImage_1);
+                            if (_this.wasImageResized || changeState == 'FullyChanged') {
+                                context.skipUndoSnapshot = false;
+                            }
+                            var isSameImage = (previousSelectedImage === null || previousSelectedImage === void 0 ? void 0 : previousSelectedImage.image) === (editingImage === null || editingImage === void 0 ? void 0 : editingImage.image);
+                            image.isSelected = isSameImage || shouldSelectImage;
+                            image.isSelectedAsImageSelection = isSameImage || shouldSelectImage;
+                            image.format.imageState = undefined;
+                            if ((selection === null || selection === void 0 ? void 0 : selection.type) == 'range' && !selection.range.collapsed) {
+                                var selectedParagraphs = (0, roosterjs_content_model_dom_1.getSelectedParagraphs)(model, true);
+                                var isImageInRange = selectedParagraphs.some(function (paragraph) {
+                                    return paragraph.segments.includes(image);
+                                });
+                                if (isImageInRange) {
+                                    image.isSelected = true;
+                                }
+                            }
+                        });
+                        if (shouldSelectImage) {
+                            (0, normalizeImageSelection_1.normalizeImageSelection)(previousSelectedImage);
+                        }
+                        _this.cleanInfo();
+                        result = true;
+                    }
+                    _this.isEditing = false;
+                    _this.isCropMode = false;
+                    if (editingImage &&
+                        (selection === null || selection === void 0 ? void 0 : selection.type) == 'image' &&
+                        !shouldSelectImage &&
+                        !isApiOperation) {
+                        _this.isEditing = true;
+                        _this.isCropMode = isCropMode;
+                        (0, roosterjs_content_model_dom_1.mutateSegment)(editingImage.paragraph, editingImage.image, function (image) {
+                            editingImageModel = image;
+                            isRTL = editingImage.paragraph.format.direction == 'rtl';
+                            _this.imageEditInfo = (0, updateImageEditInfo_1.updateImageEditInfo)(image, selection.image);
+                            image.format.imageState = 'isEditing';
+                        });
+                        result = true;
+                    }
+                }
+                return result;
+            }, {
+                onNodeCreated: function (model, node) {
+                    if (!isApiOperation &&
+                        editingImageModel &&
+                        editingImageModel == model &&
+                        editingImageModel.format.imageState == findEditingImage_1.EDITING_MARKER &&
+                        (0, roosterjs_content_model_dom_1.isNodeOfType)(node, 'ELEMENT_NODE') &&
+                        (0, roosterjs_content_model_dom_1.isElementOfType)(node, 'img')) {
+                        if (isCropMode) {
+                            _this.startCropMode(editor, node, isRTL);
+                        }
+                        else {
+                            _this.startRotateAndResize(editor, node, isRTL);
+                        }
+                    }
+                },
+                apiName: IMAGE_EDIT_FORMAT_EVENT,
+            }, {
+                tryGetFromCache: true,
+            });
+        };
+        ImageEditPlugin.prototype.startEditing = function (editor, image, apiOperation) {
+            var _this = this;
+            if (!this.imageEditInfo) {
+                this.imageEditInfo = (0, updateImageEditInfo_1.getSelectedImageMetadata)(editor, image);
+            }
+            if ((this.imageEditInfo.widthPx == 0 || this.imageEditInfo.heightPx == 0) &&
+                !image.complete) {
+                // Image dimensions are zero and loading is incomplete, wait for image to load.
+                image.onload = function () {
+                    _this.updateImageDimensionsIfZero(image);
+                    _this.startEditingInternal(editor, image, apiOperation);
+                    image.onload = null;
+                    image.onerror = null;
+                };
+                image.onerror = function () {
+                    image.onload = null;
+                    image.onerror = null;
+                };
+            }
+            else {
+                this.updateImageDimensionsIfZero(image);
+                this.startEditingInternal(editor, image, apiOperation);
+            }
+        };
+        ImageEditPlugin.prototype.updateImageDimensionsIfZero = function (image) {
+            var _a, _b;
+            if (((_a = this.imageEditInfo) === null || _a === void 0 ? void 0 : _a.widthPx) === 0 || ((_b = this.imageEditInfo) === null || _b === void 0 ? void 0 : _b.heightPx) === 0) {
+                this.imageEditInfo.widthPx = image.clientWidth;
+                this.imageEditInfo.heightPx = image.clientHeight;
+            }
+        };
+        ImageEditPlugin.prototype.startEditingInternal = function (editor, image, apiOperation) {
+            if (!this.imageEditInfo) {
+                this.imageEditInfo = (0, updateImageEditInfo_1.getSelectedImageMetadata)(editor, image);
+            }
+            this.imageHTMLOptions = (0, getHTMLImageOptions_1.getHTMLImageOptions)(editor, this.options, this.imageEditInfo);
+            this.lastSrc = image.getAttribute('src');
+            var _a = (0, createImageWrapper_1.createImageWrapper)(editor, image, this.options, this.imageEditInfo, this.imageHTMLOptions, apiOperation), resizers = _a.resizers, rotators = _a.rotators, wrapper = _a.wrapper, shadowSpan = _a.shadowSpan, imageClone = _a.imageClone, croppers = _a.croppers;
+            this.shadowSpan = shadowSpan;
+            this.selectedImage = image;
+            this.wrapper = wrapper;
+            this.clonedImage = imageClone;
+            this.wasImageResized = (0, imageEditUtils_1.checkIfImageWasResized)(image);
+            this.resizers = resizers;
+            this.rotators = rotators;
+            this.croppers = croppers;
+            this.zoomScale = editor.getDOMHelper().calculateZoomScale();
+            editor.setEditorStyle(IMAGE_EDIT_CLASS, "outline-style:none!important;", [
+                "span:has(>img" + (0, roosterjs_content_model_dom_1.getSafeIdSelector)(this.selectedImage.id) + ")",
+            ]);
+            editor.setEditorStyle(IMAGE_EDIT_CLASS_CARET, "caret-color: transparent;");
+        };
+        ImageEditPlugin.prototype.startRotateAndResize = function (editor, image, isRTL) {
+            var _this = this;
+            var _a, _b;
+            if (this.imageEditInfo) {
+                this.startEditing(editor, image, ['resize', 'rotate']);
+                if (this.selectedImage && this.imageEditInfo && this.wrapper && this.clonedImage) {
+                    var isMobileOrTable = !!editor.getEnvironment().isMobileOrTablet;
+                    this.dndHelpers = (0, tslib_1.__spreadArray)((0, tslib_1.__spreadArray)([], (0, tslib_1.__read)((0, getDropAndDragHelpers_1.getDropAndDragHelpers)(this.wrapper, this.imageEditInfo, this.options, ImageEditElementClass_1.ImageEditElementClass.ResizeHandle, resizerContext_1.Resizer, function () {
+                        if (_this.imageEditInfo &&
+                            _this.selectedImage &&
+                            _this.wrapper &&
+                            _this.clonedImage) {
+                            (0, updateWrapper_1.updateWrapper)(_this.imageEditInfo, _this.options, _this.selectedImage, _this.clonedImage, _this.wrapper, _this.resizers, undefined /* croppers */, isRTL);
+                            _this.wasImageResized = true;
+                        }
+                    }, this.zoomScale, isMobileOrTable)), false), (0, tslib_1.__read)((0, getDropAndDragHelpers_1.getDropAndDragHelpers)(this.wrapper, this.imageEditInfo, this.options, ImageEditElementClass_1.ImageEditElementClass.RotateHandle, rotatorContext_1.Rotator, function () {
+                        var _a, _b;
+                        if (_this.imageEditInfo &&
+                            _this.selectedImage &&
+                            _this.wrapper &&
+                            _this.clonedImage) {
+                            (0, updateWrapper_1.updateWrapper)(_this.imageEditInfo, _this.options, _this.selectedImage, _this.clonedImage, _this.wrapper, undefined /* resizers */, undefined /* croppers */, isRTL, true /* isRotating */);
+                            _this.updateRotateHandleState(editor, _this.selectedImage, _this.wrapper, _this.rotators, (_a = _this.imageEditInfo) === null || _a === void 0 ? void 0 : _a.angleRad, !!((_b = _this.options) === null || _b === void 0 ? void 0 : _b.disableSideResize));
+                            _this.updateResizeHandleDirection(_this.resizers, _this.imageEditInfo.angleRad);
+                        }
+                    }, this.zoomScale, isMobileOrTable)), false);
+                    (0, updateWrapper_1.updateWrapper)(this.imageEditInfo, this.options, this.selectedImage, this.clonedImage, this.wrapper, this.resizers, undefined /* croppers */, isRTL);
+                    this.updateRotateHandleState(editor, this.selectedImage, this.wrapper, this.rotators, (_a = this.imageEditInfo) === null || _a === void 0 ? void 0 : _a.angleRad, !!((_b = this.options) === null || _b === void 0 ? void 0 : _b.disableSideResize));
+                }
+            }
+        };
+        ImageEditPlugin.prototype.updateResizeHandleDirection = function (resizers, angleRad) {
+            var resizeHandles = (0, filterInnerResizerHandles_1.filterInnerResizerHandles)(resizers);
+            if (angleRad !== undefined) {
+                (0, updateHandleCursor_1.updateHandleCursor)(resizeHandles, angleRad);
+            }
+        };
+        ImageEditPlugin.prototype.updateRotateHandleState = function (editor, image, wrapper, rotators, angleRad, disableSideResize) {
+            var viewport = editor.getVisibleViewport();
+            var smallImage = (0, imageEditUtils_1.isASmallImage)(image.width, image.height);
+            if (viewport && rotators && rotators.length > 0) {
+                var rotator = rotators[0];
+                var rotatorHandle = rotator.firstElementChild;
+                if ((0, roosterjs_content_model_dom_1.isNodeOfType)(rotatorHandle, 'ELEMENT_NODE') &&
+                    (0, roosterjs_content_model_dom_1.isElementOfType)(rotatorHandle, 'div')) {
+                    (0, updateRotateHandle_1.updateRotateHandle)(viewport, angleRad !== null && angleRad !== void 0 ? angleRad : 0, wrapper, rotator, rotatorHandle, smallImage, disableSideResize);
+                }
+            }
+        };
+        ImageEditPlugin.prototype.isOperationAllowed = function (operation) {
+            return (operation === 'resize' ||
+                operation === 'rotate' ||
+                operation === 'flip' ||
+                operation === 'crop');
+        };
+        ImageEditPlugin.prototype.canRegenerateImage = function (image) {
+            return (0, canRegenerateImage_1.canRegenerateImage)(image);
+        };
+        ImageEditPlugin.prototype.startCropMode = function (editor, image, isRTL) {
+            var _this = this;
+            if (this.imageEditInfo) {
+                this.startEditing(editor, image, ['crop']);
+                if (this.imageEditInfo && this.selectedImage && this.wrapper && this.clonedImage) {
+                    this.dndHelpers = (0, tslib_1.__spreadArray)([], (0, tslib_1.__read)((0, getDropAndDragHelpers_1.getDropAndDragHelpers)(this.wrapper, this.imageEditInfo, this.options, ImageEditElementClass_1.ImageEditElementClass.CropHandle, cropperContext_1.Cropper, function () {
+                        if (_this.imageEditInfo &&
+                            _this.selectedImage &&
+                            _this.wrapper &&
+                            _this.clonedImage) {
+                            (0, updateWrapper_1.updateWrapper)(_this.imageEditInfo, _this.options, _this.selectedImage, _this.clonedImage, _this.wrapper, undefined /* resizers */, _this.croppers, isRTL);
+                            _this.isCropMode = true;
+                        }
+                    }, this.zoomScale, !!editor.getEnvironment().isMobileOrTablet)), false);
+                    (0, updateWrapper_1.updateWrapper)(this.imageEditInfo, this.options, this.selectedImage, this.clonedImage, this.wrapper, undefined /* resizers */, this.croppers, isRTL);
+                }
+            }
+        };
+        ImageEditPlugin.prototype.cropImage = function () {
+            if (!this.editor) {
+                return;
+            }
+            if (!this.editor.getEnvironment().isSafari) {
+                this.editor.focus(); // Safari will keep the selection when click crop, then the focus() call should not be called
+            }
+            var selection = this.editor.getDOMSelection();
+            if ((selection === null || selection === void 0 ? void 0 : selection.type) == 'image') {
+                this.applyFormatWithContentModel(this.editor, true /* isCropMode */, false /* shouldSelectImage */);
+            }
+        };
+        ImageEditPlugin.prototype.editImage = function (editor, image, apiOperation, operation) {
+            this.startEditing(editor, image, apiOperation);
+            if (!this.selectedImage || !this.imageEditInfo || !this.wrapper || !this.clonedImage) {
+                return;
+            }
+            operation(this.imageEditInfo);
+            (0, updateWrapper_1.updateWrapper)(this.imageEditInfo, this.options, this.selectedImage, this.clonedImage, this.wrapper);
+            this.applyFormatWithContentModel(editor, false /* isCrop */, true /* shouldSelect*/, true /* isApiOperation */);
+        };
+        /**
+         * Exported for testing purpose only
+         */
+        ImageEditPlugin.prototype.cleanInfo = function () {
+            var _a, _b;
+            (_a = this.editor) === null || _a === void 0 ? void 0 : _a.setEditorStyle(IMAGE_EDIT_CLASS, null);
+            (_b = this.editor) === null || _b === void 0 ? void 0 : _b.setEditorStyle(IMAGE_EDIT_CLASS_CARET, null);
+            this.selectedImage = null;
+            this.shadowSpan = null;
+            this.wrapper = null;
+            this.imageEditInfo = null;
+            this.imageHTMLOptions = null;
+            this.dndHelpers.forEach(function (helper) { return helper.dispose(); });
+            this.dndHelpers = [];
+            this.clonedImage = null;
+            this.lastSrc = null;
+            this.wasImageResized = false;
+            this.isCropMode = false;
+            this.resizers = [];
+            this.rotators = [];
+            this.croppers = [];
+        };
+        ImageEditPlugin.prototype.removeImageWrapper = function () {
+            var image = null;
+            if (this.shadowSpan && this.shadowSpan.parentElement) {
+                if (this.shadowSpan.firstElementChild &&
+                    (0, roosterjs_content_model_dom_1.isNodeOfType)(this.shadowSpan.firstElementChild, 'ELEMENT_NODE') &&
+                    (0, roosterjs_content_model_dom_1.isElementOfType)(this.shadowSpan.firstElementChild, 'img')) {
+                    image = this.shadowSpan.firstElementChild;
+                }
+                (0, roosterjs_content_model_dom_1.unwrap)(this.shadowSpan);
+                this.shadowSpan = null;
+                this.wrapper = null;
+            }
+            return image;
+        };
+        ImageEditPlugin.prototype.flipImage = function (direction) {
+            var _a;
+            var selection = (_a = this.editor) === null || _a === void 0 ? void 0 : _a.getDOMSelection();
+            if (!this.editor || !selection || selection.type !== 'image') {
+                return;
+            }
+            var image = selection.image;
+            if (this.editor) {
+                this.editImage(this.editor, image, ['flip'], function (imageEditInfo) {
+                    var angleRad = imageEditInfo.angleRad || 0;
+                    var isInVerticalPostion = (angleRad >= Math.PI / 2 && angleRad < (3 * Math.PI) / 4) ||
+                        (angleRad <= -Math.PI / 2 && angleRad > (-3 * Math.PI) / 4);
+                    if (isInVerticalPostion) {
+                        if (direction === 'horizontal') {
+                            imageEditInfo.flippedVertical = !imageEditInfo.flippedVertical;
+                        }
+                        else {
+                            imageEditInfo.flippedHorizontal = !imageEditInfo.flippedHorizontal;
+                        }
+                    }
+                    else {
+                        if (direction === 'vertical') {
+                            imageEditInfo.flippedVertical = !imageEditInfo.flippedVertical;
+                        }
+                        else {
+                            imageEditInfo.flippedHorizontal = !imageEditInfo.flippedHorizontal;
+                        }
+                    }
+                });
+            }
+        };
+        ImageEditPlugin.prototype.rotateImage = function (angleRad) {
+            var _a;
+            var selection = (_a = this.editor) === null || _a === void 0 ? void 0 : _a.getDOMSelection();
+            if (!this.editor || !selection || selection.type !== 'image') {
+                return;
+            }
+            var image = selection.image;
+            if (this.editor) {
+                this.editImage(this.editor, image, [], function (imageEditInfo) {
+                    imageEditInfo.angleRad = (imageEditInfo.angleRad || 0) + angleRad;
+                });
+            }
+        };
+        return ImageEditPlugin;
+    }());
+    exports.ImageEditPlugin = ImageEditPlugin;
+});
 //# sourceMappingURL=ImageEditPlugin.js.map