From c68996279bf9b3e36ea9bf43e7fdbc366ca1c74d Mon Sep 17 00:00:00 2001
From: Artur Arseniev <artur.catch@hotmail.it>
Date: Fri, 28 Aug 2020 21:23:04 +0200
Subject: [PATCH] Added `listenToEl` option to refresh editor on scrollable
 elements. Fixes #2722

---
 src/commands/view/SelectComponent.js | 11 ++++++++++-
 src/editor/config/config.js          |  8 ++++++++
 2 files changed, 18 insertions(+), 1 deletion(-)

diff --git a/src/commands/view/SelectComponent.js b/src/commands/view/SelectComponent.js
index 6f86b63c2..53a62af81 100644
--- a/src/commands/view/SelectComponent.js
+++ b/src/commands/view/SelectComponent.js
@@ -41,7 +41,8 @@ export default {
       'onOut',
       'onClick',
       'onFrameScroll',
-      'onFrameUpdated'
+      'onFrameUpdated',
+      'onContainerChange'
     );
   },
 
@@ -74,8 +75,11 @@ export default {
    * */
   toggleSelectComponent(enable) {
     const { em } = this;
+    const listenToEl = em.getConfig('listenToEl');
+    const { parentNode } = em.getContainer();
     const method = enable ? 'on' : 'off';
     const methods = { on, off };
+    !listenToEl.length && parentNode && listenToEl.push(parentNode);
     const trigger = (win, body) => {
       methods[method](body, 'mouseover', this.onHover);
       methods[method](body, 'mouseleave', this.onOut);
@@ -83,6 +87,7 @@ export default {
       methods[method](win, 'scroll', this.onFrameScroll);
     };
     methods[method](window, 'resize', this.onFrameUpdated);
+    methods[method](listenToEl, 'scroll', this.onContainerChange);
     em[method]('component:toggled', this.onSelect, this);
     em[method]('change:componentHovered', this.onHovered, this);
     em[method](
@@ -721,6 +726,10 @@ export default {
     this.updateGlobalPos();
   }),
 
+  onContainerChange: debounce(function() {
+    this.em.refreshCanvas();
+  }, 150),
+
   /**
    * Returns element's data info
    * @param {HTMLElement} el
diff --git a/src/editor/config/config.js b/src/editor/config/config.js
index 310fc16d2..aa724b04a 100644
--- a/src/editor/config/config.js
+++ b/src/editor/config/config.js
@@ -148,6 +148,14 @@ export default {
   // To get more about this feature read: https://github.com/artf/grapesjs/issues/1936
   dragMode: 0,
 
+  // When the editor is placed in a scrollable container (eg. modals) this might
+  // cause elements inside the canvas (eg. floating toolbars) to be misaligned.
+  // To avoid that, you can specify an array of DOM elements on which their scroll will
+  // trigger the canvas update.
+  // Be default, if the array is empty, the first parent element will be appended.
+  // listenToEl: [document.querySelector('#scrollable-el')],
+  listenToEl: [],
+
   // Import asynchronously CSS to use as icons
   cssIcons:
     'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css',