roosterjs-content-model-plugins 9.6.0 → 9.7.0

package/lib-amd/edit/EditPlugin.d.ts

@@ -1,4 +1,13 @@
 import type { EditorPlugin, IEditor, PluginEvent } from 'roosterjs-content-model-types';
+/**
+ * Options to customize the keyboard handling behavior of Edit plugin
+ */
+export declare type EditOptions = {
+    /**
+     * Whether to handle Tab key in keyboard. @default true
+     */
+    handleTabKey?: boolean;
+};
 /**
  * Edit plugins helps editor to do editing operation on top of content model.
  * This includes:
@@ -7,11 +16,17 @@ import type { EditorPlugin, IEditor, PluginEvent } from 'roosterjs-content-model
  * 3. Tab Key
  */
 export declare class EditPlugin implements EditorPlugin {
+    private options;
     private editor;
     private disposer;
     private shouldHandleNextInputEvent;
     private selectionAfterDelete;
     private handleNormalEnter;
+    /**
+     * @param options An optional parameter that takes in an object of type EditOptions, which includes the following properties:
+     * handleTabKey: A boolean that enables or disables Tab key handling. Defaults to true.
+     */
+    constructor(options?: EditOptions);
     /**
      * Get name of this plugin
      */

package/lib-amd/edit/EditPlugin.js

@@ -4,6 +4,9 @@ define(["require", "exports", "./keyboardDelete", "./keyboardEnter", "./keyboard
     exports.EditPlugin = void 0;
     var BACKSPACE_KEY = 8;
     var DELETE_KEY = 46;
+    var DefaultOptions = {
+        handleTabKey: true,
+    };
     /**
      * Edit plugins helps editor to do editing operation on top of content model.
      * This includes:
@@ -12,7 +15,13 @@ define(["require", "exports", "./keyboardDelete", "./keyboardEnter", "./keyboard
      * 3. Tab Key
      */
     var EditPlugin = /** @class */ (function () {
-        function EditPlugin() {
+        /**
+         * @param options An optional parameter that takes in an object of type EditOptions, which includes the following properties:
+         * handleTabKey: A boolean that enables or disables Tab key handling. Defaults to true.
+         */
+        function EditPlugin(options) {
+            if (options === void 0) { options = DefaultOptions; }
+            this.options = options;
             this.editor = null;
             this.disposer = null;
             this.shouldHandleNextInputEvent = false;
@@ -85,6 +94,7 @@ define(["require", "exports", "./keyboardDelete", "./keyboardEnter", "./keyboard
          */
         EditPlugin.prototype.willHandleEventExclusively = function (event) {
             if (this.editor &&
+                this.options.handleTabKey &&
                 event.eventType == 'keyDown' &&
                 event.rawEvent.key == 'Tab' &&
                 !event.rawEvent.shiftKey) {
@@ -126,7 +136,9 @@ define(["require", "exports", "./keyboardDelete", "./keyboardEnter", "./keyboard
                         }
                         break;
                     case 'Tab':
-                        (0, keyboardTab_1.keyboardTab)(editor, rawEvent);
+                        if (this.options.handleTabKey) {
+                            (0, keyboardTab_1.keyboardTab)(editor, rawEvent);
+                        }
                         break;
                     case 'Unidentified':
                         if (editor.getEnvironment().isAndroid) {

package/lib-amd/edit/EditPlugin.js.map

@@ -1 +1 @@
-{"version":3,"file":"EditPlugin.js","sourceRoot":"","sources":["../../../../packages/roosterjs-content-model-plugins/lib/edit/EditPlugin.ts"],"names":[],"mappings":"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","sourcesContent":["import { keyboardDelete } from './keyboardDelete';\nimport { keyboardEnter } from './keyboardEnter';\nimport { keyboardInput } from './keyboardInput';\nimport { keyboardTab } from './keyboardTab';\nimport { parseTableCells } from 'roosterjs-content-model-dom';\nimport type {\n    DOMSelection,\n    EditorPlugin,\n    IEditor,\n    KeyDownEvent,\n    PluginEvent,\n} from 'roosterjs-content-model-types';\n\nconst BACKSPACE_KEY = 8;\nconst DELETE_KEY = 46;\n\n/**\n * Edit plugins helps editor to do editing operation on top of content model.\n * This includes:\n * 1. Delete Key\n * 2. Backspace Key\n * 3. Tab Key\n */\nexport class EditPlugin implements EditorPlugin {\n    private editor: IEditor | null = null;\n    private disposer: (() => void) | null = null;\n    private shouldHandleNextInputEvent = false;\n    private selectionAfterDelete: DOMSelection | null = null;\n    private handleNormalEnter = false;\n\n    /**\n     * Get name of this plugin\n     */\n    getName() {\n        return 'Edit';\n    }\n\n    /**\n     * The first method that editor will call to a plugin when editor is initializing.\n     * It will pass in the editor instance, plugin should take this chance to save the\n     * editor reference so that it can call to any editor method or format API later.\n     * @param editor The editor object\n     */\n    initialize(editor: IEditor) {\n        this.editor = editor;\n        this.handleNormalEnter = this.editor.isExperimentalFeatureEnabled('PersistCache');\n\n        if (editor.getEnvironment().isAndroid) {\n            this.disposer = this.editor.attachDomEvent({\n                beforeinput: {\n                    beforeDispatch: e => this.handleBeforeInputEvent(editor, e),\n                },\n            });\n        }\n    }\n\n    /**\n     * The last method that editor will call to a plugin before it is disposed.\n     * Plugin can take this chance to clear the reference to editor. After this method is\n     * called, plugin should not call to any editor method since it will result in error.\n     */\n    dispose() {\n        this.editor = null;\n        this.disposer?.();\n        this.disposer = null;\n    }\n\n    /**\n     * Core method for a plugin. Once an event happens in editor, editor will call this\n     * method of each plugin to handle the event as long as the event is not handled\n     * exclusively by another plugin.\n     * @param event The event to handle:\n     */\n    onPluginEvent(event: PluginEvent) {\n        if (this.editor) {\n            switch (event.eventType) {\n                case 'keyDown':\n                    this.handleKeyDownEvent(this.editor, event);\n                    break;\n                case 'keyUp':\n                    if (this.selectionAfterDelete) {\n                        this.editor.setDOMSelection(this.selectionAfterDelete);\n                        this.selectionAfterDelete = null;\n                    }\n                    break;\n            }\n        }\n    }\n\n    /**\n     * Check if the plugin should handle the given event exclusively.\n     * Handle an event exclusively means other plugin will not receive this event in\n     * onPluginEvent method.\n     * If two plugins will return true in willHandleEventExclusively() for the same event,\n     * the final result depends on the order of the plugins are added into editor\n     * @param event The event to check:\n     */\n    willHandleEventExclusively(event: PluginEvent) {\n        if (\n            this.editor &&\n            event.eventType == 'keyDown' &&\n            event.rawEvent.key == 'Tab' &&\n            !event.rawEvent.shiftKey\n        ) {\n            const selection = this.editor.getDOMSelection();\n            const startContainer =\n                selection?.type == 'range' && selection.range.collapsed\n                    ? selection.range.startContainer\n                    : null;\n            const table = startContainer\n                ? this.editor.getDOMHelper().findClosestElementAncestor(startContainer, 'table')\n                : null;\n            const parsedTable = table && parseTableCells(table);\n\n            if (parsedTable) {\n                const lastRow = parsedTable[parsedTable.length - 1];\n                const lastCell = lastRow && lastRow[lastRow.length - 1];\n\n                if (typeof lastCell == 'object' && lastCell.contains(startContainer)) {\n                    // When TAB in the last cell of a table, we will generate new table row, so prevent other plugins handling this event\n                    // e.g. SelectionPlugin will move the focus out of table, which is conflict with this behavior\n                    return true;\n                }\n            }\n        }\n\n        return false;\n    }\n\n    private handleKeyDownEvent(editor: IEditor, event: KeyDownEvent) {\n        const rawEvent = event.rawEvent;\n\n        if (!rawEvent.defaultPrevented && !event.handledByEditFeature) {\n            switch (rawEvent.key) {\n                case 'Backspace':\n                    // Use our API to handle BACKSPACE/DELETE key.\n                    // No need to clear cache here since if we rely on browser's behavior, there will be Input event and its handler will reconcile cache\n                    keyboardDelete(editor, rawEvent);\n                    break;\n\n                case 'Delete':\n                    // Use our API to handle BACKSPACE/DELETE key.\n                    // No need to clear cache here since if we rely on browser's behavior, there will be Input event and its handler will reconcile cache\n                    // And leave it to browser when shift key is pressed so that browser will trigger cut event\n                    if (!event.rawEvent.shiftKey) {\n                        keyboardDelete(editor, rawEvent);\n                    }\n                    break;\n\n                case 'Tab':\n                    keyboardTab(editor, rawEvent);\n                    break;\n                case 'Unidentified':\n                    if (editor.getEnvironment().isAndroid) {\n                        this.shouldHandleNextInputEvent = true;\n                    }\n                    break;\n\n                case 'Enter':\n                    keyboardEnter(editor, rawEvent, this.handleNormalEnter);\n                    break;\n\n                default:\n                    keyboardInput(editor, rawEvent);\n                    break;\n            }\n        }\n    }\n\n    private handleBeforeInputEvent(editor: IEditor, rawEvent: Event) {\n        // Some Android IMEs doesn't fire correct keydown event for BACKSPACE/DELETE key\n        // Here we translate input event to BACKSPACE/DELETE keydown event to be compatible with existing logic\n        if (\n            !this.shouldHandleNextInputEvent ||\n            !(rawEvent instanceof InputEvent) ||\n            rawEvent.defaultPrevented\n        ) {\n            return;\n        }\n        this.shouldHandleNextInputEvent = false;\n\n        let handled = false;\n        switch (rawEvent.inputType) {\n            case 'deleteContentBackward':\n                handled = keyboardDelete(\n                    editor,\n                    new KeyboardEvent('keydown', {\n                        key: 'Backspace',\n                        keyCode: BACKSPACE_KEY,\n                        which: BACKSPACE_KEY,\n                    })\n                );\n                break;\n            case 'deleteContentForward':\n                handled = keyboardDelete(\n                    editor,\n                    new KeyboardEvent('keydown', {\n                        key: 'Delete',\n                        keyCode: DELETE_KEY,\n                        which: DELETE_KEY,\n                    })\n                );\n                break;\n        }\n\n        if (handled) {\n            rawEvent.preventDefault();\n\n            // Restore the selection on keyup event to avoid the cursor jump issue\n            // See: https://issues.chromium.org/issues/330596261\n            this.selectionAfterDelete = editor.getDOMSelection();\n        }\n    }\n}\n"]}
+{"version":3,"file":"EditPlugin.js","sourceRoot":"","sources":["../../../../packages/roosterjs-content-model-plugins/lib/edit/EditPlugin.ts"],"names":[],"mappings":";;;;IAuBA,IAAM,aAAa,GAAG,CAAC,CAAC;IACxB,IAAM,UAAU,GAAG,EAAE,CAAC;IAEtB,IAAM,cAAc,GAAyB;QACzC,YAAY,EAAE,IAAI;KACrB,CAAC;IAEF;;;;;;OAMG;IACH;QAOI;;;WAGG;QACH,oBAAoB,OAAqC;YAArC,wBAAA,EAAA,wBAAqC;YAArC,YAAO,GAAP,OAAO,CAA8B;YAVjD,WAAM,GAAmB,IAAI,CAAC;YAC9B,aAAQ,GAAwB,IAAI,CAAC;YACrC,+BAA0B,GAAG,KAAK,CAAC;YACnC,yBAAoB,GAAwB,IAAI,CAAC;YACjD,sBAAiB,GAAG,KAAK,CAAC;QAM0B,CAAC;QAE7D;;WAEG;QACH,4BAAO,GAAP;YACI,OAAO,MAAM,CAAC;QAClB,CAAC;QAED;;;;;WAKG;QACH,+BAAU,GAAV,UAAW,MAAe;YAA1B,iBAWC;YAVG,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC;YACrB,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC,MAAM,CAAC,4BAA4B,CAAC,cAAc,CAAC,CAAC;YAElF,IAAI,MAAM,CAAC,cAAc,EAAE,CAAC,SAAS,EAAE;gBACnC,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,MAAM,CAAC,cAAc,CAAC;oBACvC,WAAW,EAAE;wBACT,cAAc,EAAE,UAAA,CAAC,IAAI,OAAA,KAAI,CAAC,sBAAsB,CAAC,MAAM,EAAE,CAAC,CAAC,EAAtC,CAAsC;qBAC9D;iBACJ,CAAC,CAAC;aACN;QACL,CAAC;QAED;;;;WAIG;QACH,4BAAO,GAAP;;YACI,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;YACnB,MAAA,IAAI,CAAC,QAAQ,+CAAb,IAAI,CAAa,CAAC;YAClB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;QACzB,CAAC;QAED;;;;;WAKG;QACH,kCAAa,GAAb,UAAc,KAAkB;YAC5B,IAAI,IAAI,CAAC,MAAM,EAAE;gBACb,QAAQ,KAAK,CAAC,SAAS,EAAE;oBACrB,KAAK,SAAS;wBACV,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;wBAC5C,MAAM;oBACV,KAAK,OAAO;wBACR,IAAI,IAAI,CAAC,oBAAoB,EAAE;4BAC3B,IAAI,CAAC,MAAM,CAAC,eAAe,CAAC,IAAI,CAAC,oBAAoB,CAAC,CAAC;4BACvD,IAAI,CAAC,oBAAoB,GAAG,IAAI,CAAC;yBACpC;wBACD,MAAM;iBACb;aACJ;QACL,CAAC;QAED;;;;;;;WAOG;QACH,+CAA0B,GAA1B,UAA2B,KAAkB;YACzC,IACI,IAAI,CAAC,MAAM;gBACX,IAAI,CAAC,OAAO,CAAC,YAAY;gBACzB,KAAK,CAAC,SAAS,IAAI,SAAS;gBAC5B,KAAK,CAAC,QAAQ,CAAC,GAAG,IAAI,KAAK;gBAC3B,CAAC,KAAK,CAAC,QAAQ,CAAC,QAAQ,EAC1B;gBACE,IAAM,SAAS,GAAG,IAAI,CAAC,MAAM,CAAC,eAAe,EAAE,CAAC;gBAChD,IAAM,cAAc,GAChB,CAAA,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,IAAI,KAAI,OAAO,IAAI,SAAS,CAAC,KAAK,CAAC,SAAS;oBACnD,CAAC,CAAC,SAAS,CAAC,KAAK,CAAC,cAAc;oBAChC,CAAC,CAAC,IAAI,CAAC;gBACf,IAAM,KAAK,GAAG,cAAc;oBACxB,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,YAAY,EAAE,CAAC,0BAA0B,CAAC,cAAc,EAAE,OAAO,CAAC;oBAChF,CAAC,CAAC,IAAI,CAAC;gBACX,IAAM,WAAW,GAAG,KAAK,IAAI,IAAA,6CAAe,EAAC,KAAK,CAAC,CAAC;gBAEpD,IAAI,WAAW,EAAE;oBACb,IAAM,OAAO,GAAG,WAAW,CAAC,WAAW,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;oBACpD,IAAM,QAAQ,GAAG,OAAO,IAAI,OAAO,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;oBAExD,IAAI,OAAO,QAAQ,IAAI,QAAQ,IAAI,QAAQ,CAAC,QAAQ,CAAC,cAAc,CAAC,EAAE;wBAClE,qHAAqH;wBACrH,8FAA8F;wBAC9F,OAAO,IAAI,CAAC;qBACf;iBACJ;aACJ;YAED,OAAO,KAAK,CAAC;QACjB,CAAC;QAEO,uCAAkB,GAA1B,UAA2B,MAAe,EAAE,KAAmB;YAC3D,IAAM,QAAQ,GAAG,KAAK,CAAC,QAAQ,CAAC;YAEhC,IAAI,CAAC,QAAQ,CAAC,gBAAgB,IAAI,CAAC,KAAK,CAAC,oBAAoB,EAAE;gBAC3D,QAAQ,QAAQ,CAAC,GAAG,EAAE;oBAClB,KAAK,WAAW;wBACZ,8CAA8C;wBAC9C,qIAAqI;wBACrI,IAAA,+BAAc,EAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;wBACjC,MAAM;oBAEV,KAAK,QAAQ;wBACT,8CAA8C;wBAC9C,qIAAqI;wBACrI,2FAA2F;wBAC3F,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,QAAQ,EAAE;4BAC1B,IAAA,+BAAc,EAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;yBACpC;wBACD,MAAM;oBAEV,KAAK,KAAK;wBACN,IAAI,IAAI,CAAC,OAAO,CAAC,YAAY,EAAE;4BAC3B,IAAA,yBAAW,EAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;yBACjC;wBACD,MAAM;oBACV,KAAK,cAAc;wBACf,IAAI,MAAM,CAAC,cAAc,EAAE,CAAC,SAAS,EAAE;4BACnC,IAAI,CAAC,0BAA0B,GAAG,IAAI,CAAC;yBAC1C;wBACD,MAAM;oBAEV,KAAK,OAAO;wBACR,IAAA,6BAAa,EAAC,MAAM,EAAE,QAAQ,EAAE,IAAI,CAAC,iBAAiB,CAAC,CAAC;wBACxD,MAAM;oBAEV;wBACI,IAAA,6BAAa,EAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;wBAChC,MAAM;iBACb;aACJ;QACL,CAAC;QAEO,2CAAsB,GAA9B,UAA+B,MAAe,EAAE,QAAe;YAC3D,gFAAgF;YAChF,uGAAuG;YACvG,IACI,CAAC,IAAI,CAAC,0BAA0B;gBAChC,CAAC,CAAC,QAAQ,YAAY,UAAU,CAAC;gBACjC,QAAQ,CAAC,gBAAgB,EAC3B;gBACE,OAAO;aACV;YACD,IAAI,CAAC,0BAA0B,GAAG,KAAK,CAAC;YAExC,IAAI,OAAO,GAAG,KAAK,CAAC;YACpB,QAAQ,QAAQ,CAAC,SAAS,EAAE;gBACxB,KAAK,uBAAuB;oBACxB,OAAO,GAAG,IAAA,+BAAc,EACpB,MAAM,EACN,IAAI,aAAa,CAAC,SAAS,EAAE;wBACzB,GAAG,EAAE,WAAW;wBAChB,OAAO,EAAE,aAAa;wBACtB,KAAK,EAAE,aAAa;qBACvB,CAAC,CACL,CAAC;oBACF,MAAM;gBACV,KAAK,sBAAsB;oBACvB,OAAO,GAAG,IAAA,+BAAc,EACpB,MAAM,EACN,IAAI,aAAa,CAAC,SAAS,EAAE;wBACzB,GAAG,EAAE,QAAQ;wBACb,OAAO,EAAE,UAAU;wBACnB,KAAK,EAAE,UAAU;qBACpB,CAAC,CACL,CAAC;oBACF,MAAM;aACb;YAED,IAAI,OAAO,EAAE;gBACT,QAAQ,CAAC,cAAc,EAAE,CAAC;gBAE1B,sEAAsE;gBACtE,oDAAoD;gBACpD,IAAI,CAAC,oBAAoB,GAAG,MAAM,CAAC,eAAe,EAAE,CAAC;aACxD;QACL,CAAC;QACL,iBAAC;IAAD,CAAC,AAvMD,IAuMC;IAvMY,gCAAU","sourcesContent":["import { keyboardDelete } from './keyboardDelete';\nimport { keyboardEnter } from './keyboardEnter';\nimport { keyboardInput } from './keyboardInput';\nimport { keyboardTab } from './keyboardTab';\nimport { parseTableCells } from 'roosterjs-content-model-dom';\nimport type {\n    DOMSelection,\n    EditorPlugin,\n    IEditor,\n    KeyDownEvent,\n    PluginEvent,\n} from 'roosterjs-content-model-types';\n\n/**\n * Options to customize the keyboard handling behavior of Edit plugin\n */\nexport type EditOptions = {\n    /**\n     * Whether to handle Tab key in keyboard. @default true\n     */\n    handleTabKey?: boolean;\n};\n\nconst BACKSPACE_KEY = 8;\nconst DELETE_KEY = 46;\n\nconst DefaultOptions: Partial<EditOptions> = {\n    handleTabKey: true,\n};\n\n/**\n * Edit plugins helps editor to do editing operation on top of content model.\n * This includes:\n * 1. Delete Key\n * 2. Backspace Key\n * 3. Tab Key\n */\nexport class EditPlugin implements EditorPlugin {\n    private editor: IEditor | null = null;\n    private disposer: (() => void) | null = null;\n    private shouldHandleNextInputEvent = false;\n    private selectionAfterDelete: DOMSelection | null = null;\n    private handleNormalEnter = false;\n\n    /**\n     * @param options An optional parameter that takes in an object of type EditOptions, which includes the following properties:\n     * handleTabKey: A boolean that enables or disables Tab key handling. Defaults to true.\n     */\n    constructor(private options: EditOptions = DefaultOptions) {}\n\n    /**\n     * Get name of this plugin\n     */\n    getName() {\n        return 'Edit';\n    }\n\n    /**\n     * The first method that editor will call to a plugin when editor is initializing.\n     * It will pass in the editor instance, plugin should take this chance to save the\n     * editor reference so that it can call to any editor method or format API later.\n     * @param editor The editor object\n     */\n    initialize(editor: IEditor) {\n        this.editor = editor;\n        this.handleNormalEnter = this.editor.isExperimentalFeatureEnabled('PersistCache');\n\n        if (editor.getEnvironment().isAndroid) {\n            this.disposer = this.editor.attachDomEvent({\n                beforeinput: {\n                    beforeDispatch: e => this.handleBeforeInputEvent(editor, e),\n                },\n            });\n        }\n    }\n\n    /**\n     * The last method that editor will call to a plugin before it is disposed.\n     * Plugin can take this chance to clear the reference to editor. After this method is\n     * called, plugin should not call to any editor method since it will result in error.\n     */\n    dispose() {\n        this.editor = null;\n        this.disposer?.();\n        this.disposer = null;\n    }\n\n    /**\n     * Core method for a plugin. Once an event happens in editor, editor will call this\n     * method of each plugin to handle the event as long as the event is not handled\n     * exclusively by another plugin.\n     * @param event The event to handle:\n     */\n    onPluginEvent(event: PluginEvent) {\n        if (this.editor) {\n            switch (event.eventType) {\n                case 'keyDown':\n                    this.handleKeyDownEvent(this.editor, event);\n                    break;\n                case 'keyUp':\n                    if (this.selectionAfterDelete) {\n                        this.editor.setDOMSelection(this.selectionAfterDelete);\n                        this.selectionAfterDelete = null;\n                    }\n                    break;\n            }\n        }\n    }\n\n    /**\n     * Check if the plugin should handle the given event exclusively.\n     * Handle an event exclusively means other plugin will not receive this event in\n     * onPluginEvent method.\n     * If two plugins will return true in willHandleEventExclusively() for the same event,\n     * the final result depends on the order of the plugins are added into editor\n     * @param event The event to check:\n     */\n    willHandleEventExclusively(event: PluginEvent) {\n        if (\n            this.editor &&\n            this.options.handleTabKey &&\n            event.eventType == 'keyDown' &&\n            event.rawEvent.key == 'Tab' &&\n            !event.rawEvent.shiftKey\n        ) {\n            const selection = this.editor.getDOMSelection();\n            const startContainer =\n                selection?.type == 'range' && selection.range.collapsed\n                    ? selection.range.startContainer\n                    : null;\n            const table = startContainer\n                ? this.editor.getDOMHelper().findClosestElementAncestor(startContainer, 'table')\n                : null;\n            const parsedTable = table && parseTableCells(table);\n\n            if (parsedTable) {\n                const lastRow = parsedTable[parsedTable.length - 1];\n                const lastCell = lastRow && lastRow[lastRow.length - 1];\n\n                if (typeof lastCell == 'object' && lastCell.contains(startContainer)) {\n                    // When TAB in the last cell of a table, we will generate new table row, so prevent other plugins handling this event\n                    // e.g. SelectionPlugin will move the focus out of table, which is conflict with this behavior\n                    return true;\n                }\n            }\n        }\n\n        return false;\n    }\n\n    private handleKeyDownEvent(editor: IEditor, event: KeyDownEvent) {\n        const rawEvent = event.rawEvent;\n\n        if (!rawEvent.defaultPrevented && !event.handledByEditFeature) {\n            switch (rawEvent.key) {\n                case 'Backspace':\n                    // Use our API to handle BACKSPACE/DELETE key.\n                    // No need to clear cache here since if we rely on browser's behavior, there will be Input event and its handler will reconcile cache\n                    keyboardDelete(editor, rawEvent);\n                    break;\n\n                case 'Delete':\n                    // Use our API to handle BACKSPACE/DELETE key.\n                    // No need to clear cache here since if we rely on browser's behavior, there will be Input event and its handler will reconcile cache\n                    // And leave it to browser when shift key is pressed so that browser will trigger cut event\n                    if (!event.rawEvent.shiftKey) {\n                        keyboardDelete(editor, rawEvent);\n                    }\n                    break;\n\n                case 'Tab':\n                    if (this.options.handleTabKey) {\n                        keyboardTab(editor, rawEvent);\n                    }\n                    break;\n                case 'Unidentified':\n                    if (editor.getEnvironment().isAndroid) {\n                        this.shouldHandleNextInputEvent = true;\n                    }\n                    break;\n\n                case 'Enter':\n                    keyboardEnter(editor, rawEvent, this.handleNormalEnter);\n                    break;\n\n                default:\n                    keyboardInput(editor, rawEvent);\n                    break;\n            }\n        }\n    }\n\n    private handleBeforeInputEvent(editor: IEditor, rawEvent: Event) {\n        // Some Android IMEs doesn't fire correct keydown event for BACKSPACE/DELETE key\n        // Here we translate input event to BACKSPACE/DELETE keydown event to be compatible with existing logic\n        if (\n            !this.shouldHandleNextInputEvent ||\n            !(rawEvent instanceof InputEvent) ||\n            rawEvent.defaultPrevented\n        ) {\n            return;\n        }\n        this.shouldHandleNextInputEvent = false;\n\n        let handled = false;\n        switch (rawEvent.inputType) {\n            case 'deleteContentBackward':\n                handled = keyboardDelete(\n                    editor,\n                    new KeyboardEvent('keydown', {\n                        key: 'Backspace',\n                        keyCode: BACKSPACE_KEY,\n                        which: BACKSPACE_KEY,\n                    })\n                );\n                break;\n            case 'deleteContentForward':\n                handled = keyboardDelete(\n                    editor,\n                    new KeyboardEvent('keydown', {\n                        key: 'Delete',\n                        keyCode: DELETE_KEY,\n                        which: DELETE_KEY,\n                    })\n                );\n                break;\n        }\n\n        if (handled) {\n            rawEvent.preventDefault();\n\n            // Restore the selection on keyup event to avoid the cursor jump issue\n            // See: https://issues.chromium.org/issues/330596261\n            this.selectionAfterDelete = editor.getDOMSelection();\n        }\n    }\n}\n"]}

package/lib-amd/imageEdit/ImageEditPlugin.d.ts

@@ -12,7 +12,7 @@ export declare class ImageEditPlugin implements ImageEditor, EditorPlugin {
     protected editor: IEditor | null;
     private shadowSpan;
     private selectedImage;
-    wrapper: HTMLSpanElement | null;
+    protected wrapper: HTMLSpanElement | null;
     private imageEditInfo;
     private imageHTMLOptions;
     private dndHelpers;
@@ -25,6 +25,7 @@ export declare class ImageEditPlugin implements ImageEditor, EditorPlugin {
     private croppers;
     private zoomScale;
     private disposer;
+    protected isEditing: boolean;
     constructor(options?: ImageEditOptions);
     /**
      * Get name of this plugin
@@ -49,18 +50,23 @@ export declare class ImageEditPlugin implements ImageEditor, EditorPlugin {
      * exclusively by another plugin.
      * @param event The event to handle:
      */
-    onPluginEvent(_event: PluginEvent): void;
+    onPluginEvent(event: PluginEvent): void;
+    private isImageSelection;
+    private mouseUpHandler;
+    private selectBeforeEditingImage;
+    private keyDownHandler;
+    private applyFormatWithContentModel;
     private startEditing;
-    startRotateAndResize(editor: IEditor, image: HTMLImageElement, apiOperation?: 'resize' | 'rotate'): void;
+    startRotateAndResize(editor: IEditor, image: HTMLImageElement): void;
     private updateRotateHandleState;
     isOperationAllowed(operation: ImageEditOperation): boolean;
     canRegenerateImage(image: HTMLImageElement): boolean;
+    private startCropMode;
     cropImage(): void;
     private editImage;
     private cleanInfo;
-    private formatImageWithContentModel;
     private removeImageWrapper;
     flipImage(direction: 'horizontal' | 'vertical'): void;
     rotateImage(angleRad: number): void;
-    getWrapper(): HTMLSpanElement | null;
+    get isEditingImage(): boolean;
 }

package/lib-amd/imageEdit/ImageEditPlugin.js

@@ -1,4 +1,4 @@
-define(["require", "exports", "tslib", "./utils/applyChange", "./utils/canRegenerateImage", "./utils/imageEditUtils", "./utils/createImageWrapper", "./Cropper/cropperContext", "./utils/getDropAndDragHelpers", "./utils/getHTMLImageOptions", "./utils/updateImageEditInfo", "./types/ImageEditElementClass", "./Resizer/resizerContext", "./Rotator/rotatorContext", "./Rotator/updateRotateHandle", "./utils/updateWrapper", "roosterjs-content-model-dom"], function (require, exports, tslib_1, applyChange_1, canRegenerateImage_1, imageEditUtils_1, createImageWrapper_1, cropperContext_1, getDropAndDragHelpers_1, getHTMLImageOptions_1, updateImageEditInfo_1, ImageEditElementClass_1, resizerContext_1, rotatorContext_1, updateRotateHandle_1, updateWrapper_1, roosterjs_content_model_dom_1) {
+define(["require", "exports", "tslib", "./utils/applyChange", "./utils/canRegenerateImage", "./utils/imageEditUtils", "./utils/createImageWrapper", "./Cropper/cropperContext", "./utils/findEditingImage", "./utils/getDropAndDragHelpers", "./utils/getHTMLImageOptions", "./utils/getSelectedImage", "./utils/updateImageEditInfo", "./types/ImageEditElementClass", "./Resizer/resizerContext", "./Rotator/rotatorContext", "./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, getDropAndDragHelpers_1, getHTMLImageOptions_1, getSelectedImage_1, updateImageEditInfo_1, ImageEditElementClass_1, resizerContext_1, rotatorContext_1, updateRotateHandle_1, updateWrapper_1, roosterjs_content_model_dom_1) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.ImageEditPlugin = void 0;
@@ -9,9 +9,9 @@ define(["require", "exports", "tslib", "./utils/applyChange", "./utils/canRegene
         preserveRatio: true,
         disableRotate: false,
         disableSideResize: false,
-        onSelectState: 'resize',
+        onSelectState: ['resize', 'rotate'],
     };
-    var IMAGE_EDIT_CHANGE_SOURCE = 'ImageEdit';
+    var MouseRightButton = 2;
     /**
      * ImageEdit plugin handles the following image editing features:
      * - Resize image
@@ -39,6 +39,8 @@ define(["require", "exports", "tslib", "./utils/applyChange", "./utils/canRegene
             this.croppers = [];
             this.zoomScale = 1;
             this.disposer = null;
+            //EXPOSED FOR TEST ONLY
+            this.isEditing = false;
         }
         /**
          * Get name of this plugin
@@ -58,7 +60,9 @@ define(["require", "exports", "tslib", "./utils/applyChange", "./utils/canRegene
             this.disposer = editor.attachDomEvent({
                 blur: {
                     beforeDispatch: function () {
-                        _this.formatImageWithContentModel(editor, true /* shouldSelectImage */, true /* shouldSelectAsImageSelection*/);
+                        if (_this.editor) {
+                            _this.applyFormatWithContentModel(_this.editor, _this.isCropMode, true /* shouldSelectImage */);
+                        }
                     },
                 },
             });
@@ -70,6 +74,7 @@ define(["require", "exports", "tslib", "./utils/applyChange", "./utils/canRegene
          */
         ImageEditPlugin.prototype.dispose = function () {
             this.editor = null;
+            this.isEditing = false;
             this.cleanInfo();
             if (this.disposer) {
                 this.disposer();
@@ -82,16 +87,145 @@ define(["require", "exports", "tslib", "./utils/applyChange", "./utils/canRegene
          * exclusively by another plugin.
          * @param event The event to handle:
          */
-        ImageEditPlugin.prototype.onPluginEvent = function (_event) { };
-        ImageEditPlugin.prototype.startEditing = function (editor, image, apiOperation) {
-            var imageSpan = image.parentElement;
-            if (!imageSpan || (imageSpan && !(0, roosterjs_content_model_dom_1.isElementOfType)(imageSpan, 'span'))) {
+        ImageEditPlugin.prototype.onPluginEvent = function (event) {
+            if (!this.editor) {
                 return;
             }
-            this.imageEditInfo = (0, updateImageEditInfo_1.getSelectedImageMetadata)(editor, image);
+            switch (event.eventType) {
+                case 'mouseUp':
+                    this.mouseUpHandler(this.editor, event);
+                    break;
+                case 'keyDown':
+                    this.keyDownHandler(this.editor, event);
+                    break;
+            }
+        };
+        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);
+            }
+        };
+        //Sometimes the cursor can be inside the editing image and inside shadow dom, then the cursor need to moved out of shadow dom
+        ImageEditPlugin.prototype.selectBeforeEditingImage = function (editor, element) {
+            var parent = element.parentNode;
+            if (parent && (0, roosterjs_content_model_dom_1.isNodeOfType)(parent, 'ELEMENT_NODE') && parent.shadowRoot) {
+                element = parent;
+                parent = parent.parentNode;
+            }
+            var index = parent && (0, roosterjs_content_model_dom_1.toArray)(parent.childNodes).indexOf(element);
+            if (index !== null && index >= 0 && parent) {
+                var doc = editor.getDocument();
+                var range = doc.createRange();
+                range.setStart(parent, index);
+                range.collapse();
+                editor.setDOMSelection({
+                    type: 'range',
+                    range: range,
+                    isReverted: false,
+                });
+            }
+        };
+        ImageEditPlugin.prototype.keyDownHandler = function (editor, event) {
+            if (this.isEditing) {
+                if (event.rawEvent.key === 'Escape') {
+                    this.removeImageWrapper();
+                }
+                else {
+                    var selection = editor.getDOMSelection();
+                    var isImageSelection = (selection === null || selection === void 0 ? void 0 : selection.type) == 'image';
+                    if (isImageSelection) {
+                        this.selectBeforeEditingImage(editor, selection.image);
+                    }
+                    this.applyFormatWithContentModel(editor, this.isCropMode, ((0, roosterjs_content_model_dom_1.isModifierKey)(event.rawEvent) || event.rawEvent.shiftKey) && isImageSelection //if it's a modifier key over a image, the image should select the image
+                    );
+                }
+            }
+        };
+        ImageEditPlugin.prototype.applyFormatWithContentModel = function (editor, isCropMode, shouldSelectImage, isApiOperation) {
+            var _this = this;
+            var editingImageModel;
+            var selection = editor.getDOMSelection();
+            editor.formatContentModel(function (model) {
+                var editingImage = (0, getSelectedImage_1.getSelectedImage)(model);
+                var previousSelectedImage = isApiOperation
+                    ? editingImage
+                    : (0, findEditingImage_1.findEditingImage)(model);
+                var result = false;
+                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.dataset.isEditing) ||
+                    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) {
+                            (0, applyChange_1.applyChange)(editor, selectedImage_1, image, imageEditInfo_1, lastSrc_1, _this.wasImageResized || _this.isCropMode, clonedImage_1);
+                            delete image.dataset.isEditing;
+                            image.isSelected = shouldSelectImage;
+                            image.isSelectedAsImageSelection = shouldSelectImage;
+                        });
+                        _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;
+                            _this.imageEditInfo = (0, updateImageEditInfo_1.updateImageEditInfo)(image, selection.image);
+                            image.dataset.isEditing = 'true';
+                        });
+                        result = true;
+                    }
+                }
+                return result;
+            }, {
+                onNodeCreated: function (model, node) {
+                    if (!isApiOperation &&
+                        editingImageModel &&
+                        editingImageModel == model &&
+                        editingImageModel.dataset.isEditing &&
+                        (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);
+                        }
+                        else {
+                            _this.startRotateAndResize(editor, node);
+                        }
+                    }
+                },
+            }, {
+                tryGetFromCache: true,
+            });
+        };
+        ImageEditPlugin.prototype.startEditing = function (editor, image, apiOperation) {
+            if (!this.imageEditInfo) {
+                this.imageEditInfo = (0, updateImageEditInfo_1.getSelectedImageMetadata)(editor, image);
+            }
             this.lastSrc = image.getAttribute('src');
             this.imageHTMLOptions = (0, getHTMLImageOptions_1.getHTMLImageOptions)(editor, this.options, this.imageEditInfo);
-            var _a = (0, createImageWrapper_1.createImageWrapper)(editor, image, imageSpan, this.options, this.imageEditInfo, this.imageHTMLOptions, apiOperation || this.options.onSelectState), resizers = _a.resizers, rotators = _a.rotators, wrapper = _a.wrapper, shadowSpan = _a.shadowSpan, imageClone = _a.imageClone, croppers = _a.croppers;
+            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;
@@ -105,34 +239,33 @@ define(["require", "exports", "tslib", "./utils/applyChange", "./utils/canRegene
                 "span:has(>img#" + this.selectedImage.id + ")",
             ]);
         };
-        ImageEditPlugin.prototype.startRotateAndResize = function (editor, image, apiOperation) {
+        ImageEditPlugin.prototype.startRotateAndResize = function (editor, image) {
             var _this = this;
             var _a;
-            if (this.wrapper && this.selectedImage && this.shadowSpan) {
-                this.removeImageWrapper();
-            }
-            this.startEditing(editor, image, apiOperation);
-            if (this.selectedImage && this.imageEditInfo && this.wrapper && this.clonedImage) {
-                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);
-                        _this.wasImageResized = true;
-                    }
-                }, this.zoomScale)), 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;
-                    if (_this.imageEditInfo &&
-                        _this.selectedImage &&
-                        _this.wrapper &&
-                        _this.clonedImage) {
-                        (0, updateWrapper_1.updateWrapper)(_this.imageEditInfo, _this.options, _this.selectedImage, _this.clonedImage, _this.wrapper, _this.rotators);
-                        _this.updateRotateHandleState(editor, _this.selectedImage, _this.wrapper, _this.rotators, (_a = _this.imageEditInfo) === null || _a === void 0 ? void 0 : _a.angleRad);
-                    }
-                }, this.zoomScale)), false);
-                (0, updateWrapper_1.updateWrapper)(this.imageEditInfo, this.options, this.selectedImage, this.clonedImage, this.wrapper, this.resizers);
-                this.updateRotateHandleState(editor, this.selectedImage, this.wrapper, this.rotators, (_a = this.imageEditInfo) === null || _a === void 0 ? void 0 : _a.angleRad);
+            if (this.imageEditInfo) {
+                this.startEditing(editor, image, ['resize', 'rotate']);
+                if (this.selectedImage && this.imageEditInfo && this.wrapper && this.clonedImage) {
+                    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);
+                            _this.wasImageResized = true;
+                        }
+                    }, this.zoomScale)), 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;
+                        if (_this.imageEditInfo &&
+                            _this.selectedImage &&
+                            _this.wrapper &&
+                            _this.clonedImage) {
+                            (0, updateWrapper_1.updateWrapper)(_this.imageEditInfo, _this.options, _this.selectedImage, _this.clonedImage, _this.wrapper);
+                            _this.updateRotateHandleState(editor, _this.selectedImage, _this.wrapper, _this.rotators, (_a = _this.imageEditInfo) === null || _a === void 0 ? void 0 : _a.angleRad);
+                        }
+                    }, this.zoomScale)), false);
+                    (0, updateWrapper_1.updateWrapper)(this.imageEditInfo, this.options, this.selectedImage, this.clonedImage, this.wrapper, this.resizers);
+                    this.updateRotateHandleState(editor, this.selectedImage, this.wrapper, this.rotators, (_a = this.imageEditInfo) === null || _a === void 0 ? void 0 : _a.angleRad);
+                }
             }
         };
         ImageEditPlugin.prototype.updateRotateHandleState = function (editor, image, wrapper, rotators, angleRad) {
@@ -148,49 +281,52 @@ define(["require", "exports", "tslib", "./utils/applyChange", "./utils/canRegene
             }
         };
         ImageEditPlugin.prototype.isOperationAllowed = function (operation) {
-            return operation === 'resize' || operation === 'rotate' || operation === 'flip';
+            return (operation === 'resize' ||
+                operation === 'rotate' ||
+                operation === 'flip' ||
+                operation === 'crop');
         };
         ImageEditPlugin.prototype.canRegenerateImage = function (image) {
             return (0, canRegenerateImage_1.canRegenerateImage)(image);
         };
-        ImageEditPlugin.prototype.cropImage = function () {
+        ImageEditPlugin.prototype.startCropMode = function (editor, image) {
             var _this = this;
-            var _a, _b;
-            var selection = (_a = this.editor) === null || _a === void 0 ? void 0 : _a.getDOMSelection();
-            if (!this.editor || !selection || selection.type !== 'image') {
+            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, _this.croppers);
+                            _this.isCropMode = true;
+                        }
+                    }, this.zoomScale)), false);
+                    (0, updateWrapper_1.updateWrapper)(this.imageEditInfo, this.options, this.selectedImage, this.clonedImage, this.wrapper, undefined, this.croppers);
+                }
+            }
+        };
+        ImageEditPlugin.prototype.cropImage = function () {
+            if (!this.editor) {
                 return;
             }
-            var image = selection.image;
-            if (this.wrapper && this.selectedImage && this.shadowSpan) {
-                image = (_b = this.removeImageWrapper()) !== null && _b !== void 0 ? _b : image;
+            if (!this.editor.getEnvironment().isSafari) {
+                this.editor.focus(); // Safari will keep the selection when click crop, then the focus() call should not be called
             }
-            this.startEditing(this.editor, image, 'crop');
-            if (!this.selectedImage || !this.imageEditInfo || !this.wrapper || !this.clonedImage) {
-                return;
+            var selection = this.editor.getDOMSelection();
+            if ((selection === null || selection === void 0 ? void 0 : selection.type) == 'image') {
+                this.applyFormatWithContentModel(this.editor, true /* isCropMode */, false /* shouldSelectImage */);
             }
-            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, _this.croppers);
-                    _this.isCropMode = true;
-                }
-            }, this.zoomScale)), false);
-            (0, updateWrapper_1.updateWrapper)(this.imageEditInfo, this.options, this.selectedImage, this.clonedImage, this.wrapper, undefined, this.croppers);
         };
         ImageEditPlugin.prototype.editImage = function (editor, image, apiOperation, operation) {
-            var _a;
-            if (this.wrapper && this.selectedImage && this.shadowSpan) {
-                image = (_a = this.removeImageWrapper()) !== null && _a !== void 0 ? _a : image;
-            }
             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.formatImageWithContentModel(editor, true /* shouldSelect*/, true /* shouldSelectAsImageSelection*/);
+            this.applyFormatWithContentModel(editor, false /* isCrop */, true /* shouldSelect*/, true /* isApiOperation */);
         };
         ImageEditPlugin.prototype.cleanInfo = function () {
             var _a;
@@ -210,42 +346,6 @@ define(["require", "exports", "tslib", "./utils/applyChange", "./utils/canRegene
             this.rotators = [];
             this.croppers = [];
         };
-        ImageEditPlugin.prototype.formatImageWithContentModel = function (editor, shouldSelectImage, shouldSelectAsImageSelection) {
-            var _this = this;
-            if (this.lastSrc &&
-                this.selectedImage &&
-                this.imageEditInfo &&
-                this.clonedImage &&
-                this.shadowSpan) {
-                editor.formatContentModel(function (model) {
-                    var selectedSegmentsAndParagraphs = (0, roosterjs_content_model_dom_1.getSelectedSegmentsAndParagraphs)(model, false);
-                    if (!selectedSegmentsAndParagraphs[0]) {
-                        return false;
-                    }
-                    var segment = selectedSegmentsAndParagraphs[0][0];
-                    var paragraph = selectedSegmentsAndParagraphs[0][1];
-                    if (paragraph && segment.segmentType == 'Image') {
-                        (0, roosterjs_content_model_dom_1.mutateSegment)(paragraph, segment, function (image) {
-                            if (_this.lastSrc &&
-                                _this.selectedImage &&
-                                _this.imageEditInfo &&
-                                _this.clonedImage) {
-                                (0, applyChange_1.applyChange)(editor, _this.selectedImage, image, _this.imageEditInfo, _this.lastSrc, _this.wasImageResized || _this.isCropMode, _this.clonedImage);
-                                image.isSelected = shouldSelectImage;
-                                image.isSelectedAsImageSelection = shouldSelectAsImageSelection;
-                            }
-                        });
-                        return true;
-                    }
-                    return false;
-                }, {
-                    changeSource: IMAGE_EDIT_CHANGE_SOURCE,
-                    onNodeCreated: function () {
-                        _this.cleanInfo();
-                    },
-                });
-            }
-        };
         ImageEditPlugin.prototype.removeImageWrapper = function () {
             var image = null;
             if (this.shadowSpan && this.shadowSpan.parentElement) {
@@ -268,7 +368,7 @@ define(["require", "exports", "tslib", "./utils/applyChange", "./utils/canRegene
             }
             var image = selection.image;
             if (this.editor) {
-                this.editImage(this.editor, image, 'flip', function (imageEditInfo) {
+                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);
@@ -299,15 +399,19 @@ define(["require", "exports", "tslib", "./utils/applyChange", "./utils/canRegene
             }
             var image = selection.image;
             if (this.editor) {
-                this.editImage(this.editor, image, 'rotate', function (imageEditInfo) {
+                this.editImage(this.editor, image, [], function (imageEditInfo) {
                     imageEditInfo.angleRad = (imageEditInfo.angleRad || 0) + angleRad;
                 });
             }
         };
-        //EXPOSED FOR TEST ONLY
-        ImageEditPlugin.prototype.getWrapper = function () {
-            return this.wrapper;
-        };
+        Object.defineProperty(ImageEditPlugin.prototype, "isEditingImage", {
+            //EXPOSED FOR TEST ONLY
+            get: function () {
+                return this.isEditing;
+            },
+            enumerable: false,
+            configurable: true
+        });
         return ImageEditPlugin;
     }());
     exports.ImageEditPlugin = ImageEditPlugin;