chore(edit-page-2): Fix scrolling issue #28469

core-web/libs/portlets/edit-ema/portlet/src/lib/dot-ema-shell/store/dot-ema.store.spec.ts

@@ -548,9 +548,9 @@ describe('EditEmaStore', () => {
                 });
             });
 
-            it('should update editor state to dragginf when  have dragItem', (done) => {
+            it('should update editor state to dragging when  have dragItem', (done) => {
                 spectator.service.setDragItem({} as EmaDragItem);
-                spectator.service.updateEditorScrollState();
+                spectator.service.updateEditorDragState();
 
                 spectator.service.editorState$.subscribe((state) => {
                     expect(state).toEqual({
@@ -561,6 +561,31 @@ describe('EditEmaStore', () => {
                     done();
                 });
             });
+
+            it('should update editor state to idle when dont have dragItem', (done) => {
+                spectator.service.updateEditorDragState();
+
+                spectator.service.editorState$.subscribe((state) => {
+                    expect(state).toEqual({
+                        ...state,
+                        state: EDITOR_STATE.IDLE
+                    });
+                    done();
+                });
+            });
+
+            it('should update editor state to scroll-drag when have dragItem', () => {
+                spectator.service.setDragItem({} as EmaDragItem);
+                spectator.service.updateEditorScrollState();
+
+                spectator.service.editorState$.subscribe((state) => {
+                    expect(state).toEqual({
+                        ...state,
+                        bounds: [],
+                        state: EDITOR_STATE.SCROLL_DRAG
+                    });
+                });
+            });
         });
 
         describe('effects', () => {

core-web/libs/portlets/edit-ema/portlet/src/lib/dot-ema-shell/store/dot-ema.store.ts

@@ -300,7 +300,7 @@ export class EditEmaStore extends ComponentStore<EditEmaState> {
                     editorData.canEditVariant &&
                     !editorData.device &&
                     (currentState === EDITOR_STATE.DRAGGING ||
-                        currentState === EDITOR_STATE.SCROLLING),
+                        currentState === EDITOR_STATE.SCROLL_DRAG),
                 showPalette:
                     editorData.canEditVariant &&
                     isEnterpriseLicense &&
@@ -736,7 +736,7 @@ export class EditEmaStore extends ComponentStore<EditEmaState> {
     readonly setScrollingState = this.updater((state) => {
         return {
             ...state,
-            editorState: EDITOR_STATE.SCROLLING,
+            editorState: EDITOR_STATE.SCROLL_DRAG,
             bounds: []
         };
     });
@@ -765,6 +765,22 @@ export class EditEmaStore extends ComponentStore<EditEmaState> {
      * @returns The updated dot-ema store state.
      */
     readonly updateEditorScrollState = this.updater((state) => {
+        const newState = state.dragItem
+            ? {
+                  ...state,
+                  editorState: EDITOR_STATE.SCROLL_DRAG
+              }
+            : {
+                  ...state,
+                  editorState: EDITOR_STATE.IDLE,
+                  bounds: [],
+                  contentletArea: undefined
+              };
+
+        return newState;
+    });
+
+    readonly updateEditorDragState = this.updater((state) => {
         return {
             ...state,
             editorState: state.dragItem ? EDITOR_STATE.DRAGGING : EDITOR_STATE.IDLE

core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/edit-ema-editor.component.ts

@@ -992,10 +992,10 @@ export class EditEmaEditorComponent implements OnInit, OnDestroy {
                 });
             },
             [CUSTOMER_ACTIONS.IFRAME_SCROLL]: () => {
-                this.store.updateEditorState(EDITOR_STATE.SCROLLING);
+                this.store.updateEditorScrollState();
             },
             [CUSTOMER_ACTIONS.IFRAME_SCROLL_END]: () => {
-                this.store.updateEditorScrollState();
+                this.store.updateEditorDragState();
             },
             [CUSTOMER_ACTIONS.PING_EDITOR]: () => {
                 this.iframe?.nativeElement?.contentWindow.postMessage(

core-web/libs/portlets/edit-ema/portlet/src/lib/shared/enums.ts

@@ -26,7 +26,7 @@ export enum EDITOR_STATE {
     DRAGGING = 'dragging',
     ERROR = 'error',
     OUT_OF_BOUNDS = 'out-of-bounds',
-    SCROLLING = 'scrolling'
+    SCROLL_DRAG = 'scroll-drag'
 }
 
 export enum EDITOR_MODE {