From 4a67fcd10b6095f62c777fe46f59c4e29d414a01 Mon Sep 17 00:00:00 2001
From: Martin Edenhofer <me@znuny.com>
Date: Wed, 30 Jan 2019 00:34:09 +0100
Subject: [PATCH] Fixes #2422 - Browser resize for pasted images is not
 resizing the image in edit view.

---
 .../app/lib/base/jquery.contenteditable.js    | 12 +++--
 .../base/jquery.enableObjectResizingShim.js   | 49 +++++++++++++------
 2 files changed, 42 insertions(+), 19 deletions(-)

diff --git a/app/assets/javascripts/app/lib/base/jquery.contenteditable.js b/app/assets/javascripts/app/lib/base/jquery.contenteditable.js
index f228ef845..e5c7dd1f7 100644
--- a/app/assets/javascripts/app/lib/base/jquery.contenteditable.js
+++ b/app/assets/javascripts/app/lib/base/jquery.contenteditable.js
@@ -296,7 +296,10 @@
           var result = e.target.result
           var img = document.createElement('img')
           img.src = result
-          maxWidth = this.$element.width() || 500
+          maxWidth = 1000
+          if (this.$element.width() > 1000) {
+            maxWidth = this.$element.width()
+          }
           scaleFactor = 2
           //scaleFactor = 1
           //if (window.isRetina && window.isRetina()) {
@@ -309,7 +312,7 @@
             this.log('image inserted')
             result = dataUrl
             if (this.options.imageWidth == 'absolute') {
-              img = "<img tabindex=\"0\" style=\"width: " + width + "px; height: " + height + "px\" src=\"" + result + "\">"
+              img = "<img tabindex=\"0\" style=\"width: " + width + "px; max-width: 100%;\" src=\"" + result + "\">"
             }
             else {
               img = "<img tabindex=\"0\" style=\"width: 100%; max-width: " + width + "px;\" src=\"" + result + "\">"
@@ -440,12 +443,11 @@
           this.log('image inserted')
           result = dataUrl
           if (this.options.imageWidth == 'absolute') {
-            img = $("<img tabindex=\"0\" style=\"width: " + width + "px; height: " + height + "px\" src=\"" + result + "\">")
+            img = "<img tabindex=\"0\" style=\"width: " + width + "px; max-width: 100%;\" src=\"" + result + "\">"
           }
           else {
-            img = $("<img tabindex=\"0\" style=\"width: 100%; max-width: " + width + "px;\" src=\"" + result + "\">")
+            img = "<img tabindex=\"0\" style=\"width: 100%; max-width: " + width + "px;\" src=\"" + result + "\">"
           }
-          img = img.get(0)
 
           if (document.caretPositionFromPoint) {
             var pos = document.caretPositionFromPoint(x, y)
diff --git a/app/assets/javascripts/app/lib/base/jquery.enableObjectResizingShim.js b/app/assets/javascripts/app/lib/base/jquery.enableObjectResizingShim.js
index 7f6ad9fd9..4490f8c54 100644
--- a/app/assets/javascripts/app/lib/base/jquery.enableObjectResizingShim.js
+++ b/app/assets/javascripts/app/lib/base/jquery.enableObjectResizingShim.js
@@ -23,10 +23,9 @@
     this._defaults  = defaults
     this._name      = pluginName
 
-    // only run if needed
-    if (!document.queryCommandSupported('enableObjectResizing')) {
-      this.bindEvents()
-    }
+    // disable browser based image resizing, use shim anyway
+    document.execCommand('enableObjectResizing', false, false);
+    this.bindEvents()
   }
 
   Plugin.prototype.bindEvents = function () {
@@ -46,15 +45,23 @@
 
   Plugin.prototype.destroyEditors = function () {
     this.$element.find('img.objectResizingEditorActive').each(function(i, img){
-      editor = $(img).data('objectResizingEditor')
+      $img = $(img)
+      editor = $img.data('objectResizingEditor')
+
+      // remove editor by object
       if(editor){
         editor.destroy()
       }
+
+      // remove editor fragments manually
+      else {
+        $img.removeClass('objectResizingEditorActive')
+        $img.siblings().remove()
+        $img.unwrap()
+      }
     })
   }
 
-
-
   /*
 
     Resize Editor
@@ -107,12 +114,13 @@
   }
 
   Editor.prototype.startResize = function (event) {
-    var $handle = $(event.currentTarget)
+    var $handle = $(event.currentTarget),
+      maxWidth = this.$element.closest('[contenteditable="true"]').width() || ''
     this.resizeCorner = $handle.index()
     this.resizeDir = this.resizeCorner == 0 || this.resizeCorner == 3 ? -1 : 1
     this.startX = event.pageX
     this.startWidth = this.$element.width()
-    this.$clone = this.$element.clone().css({width: '', height: ''}).addClass('enableObjectResizingShim-clone enableObjectResizingShim-clone--'+ this.resizeCorner)
+    this.$clone = this.$element.clone().css({width: '', height: '', 'max-width': maxWidth}).addClass('enableObjectResizingShim-clone enableObjectResizingShim-clone--'+ this.resizeCorner)
     this.$element.after(this.$clone)
     this.isResizing = true
     $(document).on('mousemove.enableObjectResizing', this.resize.bind(this))
@@ -121,17 +129,33 @@
 
   Editor.prototype.resize = function (event) {
     event.preventDefault()
+    event.stopPropagation()
     var dx = event.pageX - this.startX
     this.$clone.css('width', this.startWidth + (this.resizeDir * dx))
   }
 
   Editor.prototype.resizeEnd = function (event) {
+    var maxWidth = this.$element.closest('[contenteditable="true"]').width(),
+      width = this.$clone.width(),
+      height = this.$clone.height(),
+      naturalWidth = this.$clone.get(0).naturalWidth,
+      naturalHeight = this.$clone.get(0).naturalHeight
+
+    if (maxWidth && maxWidth < width + 10) {
+      height = ''
+      width = ''
+      if (naturalWidth) {
+        width = naturalWidth / 2
+      }
+    }
+
     $(document).off('mousemove.enableObjectResizing')
     $(document).off('mouseup.enableObjectResizing')
 
     this.$element.css({
-      width: this.$clone.width(),
-      height: this.$clone.height()
+      width: width,
+      height: height,
+      'max-width': '100%'
     })
     this.$clone.remove()
 
@@ -141,9 +165,6 @@
     }.bind(this))
   }
 
-
-
-
   $.fn[pluginName] = function (options) {
     return this.each(function () {
       if (!$.data(this, 'plugin_' + pluginName)) {