From 9334cb922ff9b214ab631aa751a534bbfeacacae Mon Sep 17 00:00:00 2001
From: Adnan Saiyed <adsa@odoo.com>
Date: Tue, 4 Jul 2023 07:22:18 +0000
Subject: [PATCH] [FIX] web_editor: enter should be caught by image editor

Current behaviour before commit:

When cropping an image, pressing ENTER creates new paragraph behind the
widget, due to this, changes are not getting applied on image and it disappears.

Desired behaviour after commit:

Now hitting ENTER works same as apply button, Changes are getting applied
when pressing ENTER.

task-3383447

closes odoo/odoo#138789

X-original-commit: add0d782fceebb84285a5f16952b852a29cf5a10
Signed-off-by: David Monjoie (dmo) <dmo@odoo.com>
---
 .../static/src/js/wysiwyg/widgets/image_crop.js | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/addons/web_editor/static/src/js/wysiwyg/widgets/image_crop.js b/addons/web_editor/static/src/js/wysiwyg/widgets/image_crop.js
index 8458471fdbf..5e53abc7af5 100644
--- a/addons/web_editor/static/src/js/wysiwyg/widgets/image_crop.js
+++ b/addons/web_editor/static/src/js/wysiwyg/widgets/image_crop.js
@@ -76,6 +76,7 @@ export class ImageCrop extends Component {
         if (this.$cropperImage) {
             this.$cropperImage.cropper('destroy');
             this.document.removeEventListener('mousedown', this._onDocumentMousedown, {capture: true});
+            this.document.removeEventListener('keydown', this._onDocumentKeydown, {capture: true});
         }
         this.media.setAttribute('src', this.initialSrc);
         this.$media.trigger('image_cropper_destroyed');
@@ -151,6 +152,9 @@ export class ImageCrop extends Component {
         this.$cropperImage = this.$('.o_we_cropper_img');
         const cropperImage = this.$cropperImage[0];
         [cropperImage.style.width, cropperImage.style.height] = [this.$media.width() + 'px', this.$media.height() + 'px'];
+        
+        const sel = this.document.getSelection();
+        sel && sel.removeAllRanges();
 
         // Overlaying the cropper image over the real image
         const offset = this.$media.offset();
@@ -166,9 +170,11 @@ export class ImageCrop extends Component {
         await activateCropper(cropperImage, this.aspectRatios[this.aspectRatio].value, this.media.dataset);
 
         this._onDocumentMousedown = this._onDocumentMousedown.bind(this);
+        this._onDocumentKeydown = this._onDocumentKeydown.bind(this);
         // We use capture so that the handler is called before other editor handlers
         // like save, such that we can restore the src before a save.
         this.document.addEventListener('mousedown', this._onDocumentMousedown, {capture: true});
+        this.document.addEventListener('keydown', this._onDocumentKeydown, {capture: true});
     }
     /**
      * Updates the DOM image with cropped data and associates required
@@ -263,6 +269,17 @@ export class ImageCrop extends Component {
             return this._closeCropper();
         }
     }
+    /**
+     * Save crop if user hits enter.
+     * 
+     * @private
+     * @param {KeyboardEvent} ev
+     */
+    _onDocumentKeydown(ev) {
+        if(ev.key === 'Enter') {
+            return this._save();
+        }
+    }
     /**
      * Resets the cropbox on zoom to prevent crop box overflowing.
      *