Merge pull request #11921 from opf/bug/45782-dropping-files-into-description-field-causes-drop-zone-in-file-tab-to-not-vanish

[#45782] moved drag event handling in ckeditor

frontend/src/app/shared/components/editor/components/ckeditor-augmented-textarea/ckeditor-augmented-textarea.component.ts

@@ -175,19 +175,9 @@ export class CkeditorAugmentedTextareaComponent extends UntilDestroyedMixin impl
     return editor;
   }
 
-  private stopDragging() {
-    // The attachment list listens globally for drag events, but when
-    // an item gets dropped in the editor, this event never makes it to the list.
-    // Manually dispatching the event makes sure the `op-attachments` component
-    // knows we are certainly not dragging anymore.
-    const event = new DragEvent('dragleave');
-    document.body.dispatchEvent(event);
-  }
-
   private setupAttachmentAddedCallback(editor:ICKEditorInstance) {
     editor.model.on('op:attachment-added', () => {
       this.states.forResource(this.resource!)!.putValue(this.resource);
-      this.stopDragging();
     });
   }
 
@@ -210,7 +200,6 @@ export class CkeditorAugmentedTextareaComponent extends UntilDestroyedMixin impl
         }
 
         this.attachments = _.clone(resource!.attachments.elements);
-        this.stopDragging();
       });
   }
 

frontend/src/app/shared/components/editor/components/ckeditor/op-ckeditor.component.ts

@@ -27,14 +27,22 @@
 //++
 
 import {
-  Component, ElementRef, EventEmitter, Input, OnDestroy, OnInit, Output, ViewChild,
+  Component,
+  ElementRef,
+  EventEmitter,
+  Input,
+  OnDestroy,
+  OnInit,
+  Output,
+  ViewChild,
 } from '@angular/core';
 import { ToastService } from 'core-app/shared/components/toaster/toast.service';
 import { I18nService } from 'core-app/core/i18n/i18n.service';
 import { ConfigurationService } from 'core-app/core/config/configuration.service';
 import {
   ICKEditorContext,
-  ICKEditorInstance, ICKEditorWatchdog,
+  ICKEditorInstance,
+  ICKEditorWatchdog,
 } from 'core-app/shared/components/editor/components/ckeditor/ckeditor.types';
 import { CKEditorSetupService } from 'core-app/shared/components/editor/components/ckeditor/ckeditor-setup.service';
 
@@ -209,6 +217,19 @@ export class OpCkeditorComponent implements OnInit, OnDestroy {
         watchdog.editor.on('op:source-code-enabled', () => this.enableManualMode());
         watchdog.editor.on('op:source-code-disabled', () => this.disableManualMode());
 
+        // Emit global dragend events for other drop zones to react.
+        // This is needed, as CKEditor does not bubble any drag events
+        const model = watchdog.editor.model as unknown&{ on:(ev:string, callback:() => unknown) => void };
+        model.on('op:attachment-added', () => document.body.dispatchEvent(new DragEvent('dragend')));
+        model.on('op:attachment-removed', () => document.body.dispatchEvent(new DragEvent('dragend')));
+
+        // Emitting a global dragleave on every dragleave of the ckeditor element
+        // IMPORTANT: This emits much more dragleave events then dragenter events.
+        // In the end, this leads to a break in every drop zone that listens to those two global events
+        // to determine its state. Without it, if no dragleave is fired, the drop zones enter a failed state,
+        // not vanishing after ending the drag.
+        this.$element.on('dragleave', () => document.body.dispatchEvent(new DragEvent('dragleave')));
+
         this.onInitialized.emit(watchdog.editor);
         return watchdog.editor;
       });

frontend/src/app/shared/components/fields/edit/field/editable-attribute-field.component.html

@@ -4,7 +4,7 @@
       active && '-active' || '',
       wrapperClasses || '-small'
      ]"
-     (dragover)="startDragOverActivation($event)">
+     (dragover)="startDragActivation($event)">
 
   <div #editContainer
        [hidden]="!active">

frontend/src/app/shared/components/fields/edit/field/editable-attribute-field.component.ts

@@ -127,14 +127,13 @@ export class EditableAttributeFieldComponent extends UntilDestroyedMixin impleme
   }
 
   // Open the field when its closed and relay drag & drop events to it.
-  public startDragOverActivation(event:JQuery.TriggeredEvent):boolean {
+  public startDragActivation(event:DragEvent):void {
     if (!this.isDropTarget || !this.isEditable || this.active) {
-      return true;
+      return;
     }
 
     this.handleUserActivate(null);
     event.preventDefault();
-    return false;
   }
 
   public render():void {