feat(edit-page-2): Allow drag and drop functionality for images in dotcms

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

@@ -25,7 +25,8 @@ import {
 
 import {
     Container,
-    ContentletArea
+    ContentletArea,
+    EmaDragItem
 } from '../../edit-ema-editor/components/ema-page-dropzone/types';
 import {
     DotPageApiParams,
@@ -96,6 +97,7 @@ export class EditEmaStore extends ComponentStore<EditEmaState> {
      *******************/
 
     readonly clientHost$ = this.select((state) => state.clientHost);
+    readonly dragItem$ = this.select((state) => state.dragItem);
 
     private readonly stateLoad$ = this.select((state) => state.editorState);
     private readonly code$ = this.select((state) => state.editor.page.rendered);
@@ -217,6 +219,7 @@ export class EditEmaStore extends ComponentStore<EditEmaState> {
         this.iframeURL$,
         this.isEnterpriseLicense$,
         this.pageURL$,
+        this.dragItem$,
         (
             bounds,
             clientHost,
@@ -228,7 +231,8 @@ export class EditEmaStore extends ComponentStore<EditEmaState> {
             favoritePageURL,
             iframeURL,
             isEnterpriseLicense,
-            pageURL
+            pageURL,
+            dragItem
         ) => {
             return {
                 apiURL: `${window.location.origin}/api/v1/page/json/${pageURL}`,
@@ -247,7 +251,8 @@ export class EditEmaStore extends ComponentStore<EditEmaState> {
                 favoritePageURL,
                 iframeURL,
                 isEnterpriseLicense,
-                state: currentState
+                state: currentState,
+                dragItem
             };
         }
     );
@@ -297,6 +302,11 @@ export class EditEmaStore extends ComponentStore<EditEmaState> {
         }
     );
 
+    readonly dragState$ = this.select(this.stateLoad$, this.dragItem$, (editorState, dragItem) => ({
+        editorState,
+        dragItem
+    }));
+
     /**
      * Concurrently loads page and license data to updat the state.
      *
@@ -585,6 +595,23 @@ export class EditEmaStore extends ComponentStore<EditEmaState> {
         );
     });
 
+    readonly setDragItem = this.updater((state, dragItem: EmaDragItem) => {
+        return {
+            ...state,
+            dragItem,
+            editorState: EDITOR_STATE.DRAGGING
+        };
+    });
+
+    readonly resetDragProperties = this.updater((state) => {
+        return {
+            ...state,
+            dragItem: undefined,
+            bounds: [],
+            contentletArea: undefined
+        };
+    });
+
     private createPageURL(state: EditEmaState): string {
         const params = {
             url: state.editor.page.pageURI,

core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/components/edit-ema-palette/components/edit-ema-palette-content-type/edit-ema-palette-content-type.component.html

@@ -24,15 +24,15 @@
             *ngFor="let contenttype of contentTypes; let i = index"
             [attr.data-item]="
                 {
-                    variable: contenttype.variable,
-                    name: contenttype.name,
-                    contentType: contenttype.variable,
-                    baseType: contenttype.baseType
+                    contentType: {
+                        variable: contenttype.variable,
+                        name: contenttype.name,
+                        baseType: contenttype.baseType,
+                    },
+                    move: false
                 } | json
             "
             [attr.data-testId]="'content-type-' + i"
-            (dragstart)="dragStart.emit($event)"
-            (dragend)="dragEnd.emit($event)"
             data-type="content-type"
             draggable="true">
             <button

core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/components/edit-ema-palette/components/edit-ema-palette-content-type/edit-ema-palette-content-type.component.spec.ts

@@ -50,40 +50,6 @@ describe('EditEmaPaletteContentTypeComponent', () => {
         });
     });
 
-    it('should emit dragStart event on drag start', () => {
-        const dragSpy = jest.spyOn(spectator.component.dragStart, 'emit');
-
-        spectator.triggerEventHandler('[data-testId="content-type-0"]', 'dragstart', {
-            variable: 'test',
-            name: 'Test',
-            contentType: 'test',
-            baseType: 'CONTENT'
-        });
-        expect(dragSpy).toHaveBeenCalledWith({
-            variable: 'test',
-            name: 'Test',
-            contentType: 'test',
-            baseType: 'CONTENT'
-        });
-    });
-
-    it('should emit dragEnd event on drag end', () => {
-        const dragSpy = jest.spyOn(spectator.component.dragEnd, 'emit');
-
-        spectator.triggerEventHandler('[data-testId="content-type-0"]', 'dragend', {
-            variable: 'test',
-            name: 'Test',
-            contentType: 'test',
-            baseType: 'CONTENT'
-        });
-        expect(dragSpy).toHaveBeenCalledWith({
-            variable: 'test',
-            name: 'Test',
-            contentType: 'test',
-            baseType: 'CONTENT'
-        });
-    });
-
     it('should emit showContentlets event with contentTypeName', () => {
         const spy = jest.spyOn(spectator.component.showContentlets, 'emit');
         spectator.click('[data-testId="content-type-0-button-go-content"]');
@@ -98,10 +64,12 @@ describe('EditEmaPaletteContentTypeComponent', () => {
         expect(spectator.query('[data-testId="content-type-0"]')).not.toBeNull();
         expect(spectator.query('[data-testId="content-type-0"]')).toHaveAttribute('data-item');
         expect(data).toEqual({
-            variable: 'Test1',
-            name: 'Test Content Type',
-            contentType: 'Test1',
-            baseType: 'CONTENT'
+            contentType: {
+                variable: 'Test1',
+                name: 'Test Content Type',
+                baseType: 'CONTENT'
+            },
+            move: false
         });
     });
 

core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/components/edit-ema-palette/components/edit-ema-palette-content-type/edit-ema-palette-content-type.component.ts

@@ -42,8 +42,6 @@ export class EditEmaPaletteContentTypeComponent implements OnInit, OnDestroy {
     @Input() filter = '';
     @Input() paletteStatus: EditEmaPaletteStoreStatus;
 
-    @Output() dragStart = new EventEmitter();
-    @Output() dragEnd = new EventEmitter();
     @Output() showContentlets = new EventEmitter<string>();
     @Output() search = new EventEmitter<string>();
 

core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/components/edit-ema-palette/components/edit-ema-palette-contentlets/edit-ema-palette-contentlets.component.html

@@ -32,14 +32,17 @@
                     *ngFor="let contentlet of contentlets.items; let i = index"
                     [attr.data-item]="
                         {
-                            contentlet: { identifier: contentlet.identifier },
-                            contentType: contentlet?.contentType,
-                            baseType: contentlet.baseType
+                            contentlet: {
+                                identifier: contentlet.identifier,
+                                contentType: contentlet.contentType,
+                                baseType: contentlet.baseType,
+                                inode: contentlet.inode,
+                                title: contentlet.title
+                            },
+                            move: false
                         } | json
                     "
                     [attr.data-testId]="'contentlet-' + i"
-                    (dragstart)="dragStart.emit($event)"
-                    (dragend)="dragEnd.emit($event)"
                     data-type="contentlet"
                     draggable="true">
                     <dot-icon [size]="20" name="drag_indicator"></dot-icon>

core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/components/edit-ema-palette/components/edit-ema-palette-contentlets/edit-ema-palette-contentlets.component.spec.ts

@@ -46,24 +46,6 @@ describe('EditEmaPaletteContentletsComponent', () => {
         });
     });
 
-    it('should emit dragStart event on drag start', () => {
-        const dragSpy = jest.spyOn(spectator.component.dragStart, 'emit');
-        spectator.triggerEventHandler('[data-testId="contentlet-0"]', 'dragstart', {
-            identifier: '123',
-            contentType: 'Activity'
-        });
-        expect(dragSpy).toHaveBeenCalledWith({ identifier: '123', contentType: 'Activity' });
-    });
-
-    it('should emit dragEnd event on drag end', () => {
-        const dragSpy = jest.spyOn(spectator.component.dragEnd, 'emit');
-        spectator.triggerEventHandler('[data-testId="contentlet-0"]', 'dragend', {
-            identifier: '123',
-            contentType: 'Activity'
-        });
-        expect(dragSpy).toHaveBeenCalledWith({ identifier: '123', contentType: 'Activity' });
-    });
-
     it('should emit showContentTypes event on backToContentTypes', () => {
         const spy = jest.spyOn(spectator.component.showContentTypes, 'emit');
         const button = spectator.query(byTestId('contentlet-back-button'));
@@ -87,10 +69,13 @@ describe('EditEmaPaletteContentletsComponent', () => {
         expect(spectator.query('[data-testId="contentlet-0"]')).toHaveAttribute('data-item');
         expect(data).toEqual({
             contentlet: {
-                identifier: CONTENTLETS_MOCK[0].identifier
+                identifier: CONTENTLETS_MOCK[0].identifier,
+                contentType: CONTENTLETS_MOCK[0].contentType,
+                baseType: CONTENTLETS_MOCK[0].baseType,
+                title: CONTENTLETS_MOCK[0].title,
+                inode: CONTENTLETS_MOCK[0].inode
             },
-            contentType: CONTENTLETS_MOCK[0].contentType,
-            baseType: CONTENTLETS_MOCK[0].baseType
+            move: false
         });
     });
 

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

@@ -47,8 +47,6 @@ export class EditEmaPaletteContentletsComponent implements OnInit, OnDestroy {
     @Input() contentlets;
     @Input() paletteStatus: EditEmaPaletteStoreStatus;
 
-    @Output() dragStart = new EventEmitter();
-    @Output() dragEnd = new EventEmitter();
     @Output() paginate = new EventEmitter();
     @Output() showContentTypes = new EventEmitter();
     @Output() search = new EventEmitter<string>();

core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/components/edit-ema-palette/edit-ema-palette.component.html

@@ -5,17 +5,13 @@
         [filter]="vm.contenttypes.filter"
         [paletteStatus]="vm.status"
         (search)="loadContentTypes($event, vm.allowedTypes)"
-        (showContentlets)="showContentletsFromContentType($event)"
-        (dragStart)="onDragStart($event)"
-        (dragEnd)="onDragEnd($event)" />
+        (showContentlets)="showContentletsFromContentType($event)" />
 
     <dot-edit-ema-palette-contentlets
         *ngIf="vm.currentPaletteType === PALETTE_TYPES_ENUM.CONTENTLET"
         [contentlets]="vm.contentlets"
         [paletteStatus]="vm.status"
         (paginate)="onPaginate($event)"
         (search)="loadContentlets($event, vm.currentContentType)"
-        (showContentTypes)="showContentTypes()"
-        (dragStart)="onDragStart($event)"
-        (dragEnd)="onDragEnd($event)" />
+        (showContentTypes)="showContentTypes()" />
 </ng-container>

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

@@ -224,33 +224,6 @@ describe('EditEmaPaletteComponent', () => {
             expect(spectator.query(EditEmaPaletteContentletsComponent)).toBeNull();
         });
 
-        it('should emit dragStart event on drag start', () => {
-            const dragSpy = jest.spyOn(spectator.component.dragStart, 'emit');
-
-            spectator.triggerEventHandler(EditEmaPaletteContentTypeComponent, 'dragStart', {
-                variable: 'test',
-                name: 'Test'
-            });
-
-            expect(dragSpy).toHaveBeenCalledWith({
-                variable: 'test',
-                name: 'Test'
-            });
-        });
-
-        it('should emit dragEnd event on drag end', () => {
-            const dragSpy = jest.spyOn(spectator.component.dragEnd, 'emit');
-
-            spectator.triggerEventHandler(EditEmaPaletteContentTypeComponent, 'dragEnd', {
-                variable: 'test',
-                name: 'Test'
-            });
-            expect(dragSpy).toHaveBeenCalledWith({
-                variable: 'test',
-                name: 'Test'
-            });
-        });
-
         it('should show contentlets from content type', () => {
             const storeSpy = jest.spyOn(store, 'loadContentlets');
             spectator.triggerEventHandler(
@@ -332,27 +305,5 @@ describe('EditEmaPaletteComponent', () => {
 
             expect(resetContentLetsSpy).toHaveBeenCalled();
         });
-
-        it('should emit dragStart event on drag start', () => {
-            const dragSpy = jest.spyOn(spectator.component.dragStart, 'emit');
-
-            spectator.triggerEventHandler(EditEmaPaletteContentletsComponent, 'dragStart', {
-                inode: '123'
-            });
-            expect(dragSpy).toHaveBeenCalledWith({
-                inode: '123'
-            });
-        });
-
-        it('should emit dragEnd event on drag end', () => {
-            const dragSpy = jest.spyOn(spectator.component.dragEnd, 'emit');
-
-            spectator.triggerEventHandler(EditEmaPaletteContentletsComponent, 'dragEnd', {
-                inode: '123'
-            });
-            expect(dragSpy).toHaveBeenCalledWith({
-                inode: '123'
-            });
-        });
     });
 });

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

@@ -4,11 +4,9 @@ import { AsyncPipe, NgIf } from '@angular/common';
 import {
     ChangeDetectionStrategy,
     Component,
-    EventEmitter,
     Input,
     OnDestroy,
     OnInit,
-    Output,
     inject
 } from '@angular/core';
 
@@ -37,9 +35,6 @@ export class EditEmaPaletteComponent implements OnInit, OnDestroy {
     @Input() languageId: number;
     @Input() containers: DotPageContainerStructure;
 
-    @Output() dragStart = new EventEmitter();
-    @Output() dragEnd = new EventEmitter();
-
     private readonly store = inject(DotPaletteStore);
     private destroy$ = new Subject<void>();
 
@@ -51,22 +46,6 @@ export class EditEmaPaletteComponent implements OnInit, OnDestroy {
         this.store.loadAllowedContentTypes({ containers: this.containers });
     }
 
-    /**
-     * Event handler for the drag start event.
-     * @param event The drag event.
-     */
-    onDragStart(event: DragEvent) {
-        this.dragStart.emit(event);
-    }
-
-    /**
-     * Handles the drag end event.
-     * @param event The drag event.
-     */
-    onDragEnd(event: DragEvent) {
-        this.dragEnd.emit(event);
-    }
-
     /**
      * Shows contentlets from a specific content type.
      *