dnd

Author: ShravanKarnati

src/components/modules/blockDragNDrop.ts

@@ -0,0 +1,315 @@
+import Module from '../__module';
+import Block from '../block';
+import { throttle } from '../utils';
+
+enum DropPosition {
+  Top,
+  Bottom,
+}
+
+/**
+ * Module that handles drag and drop functionality for blocks.
+ */
+export default class BlockDragNDrop extends Module {
+  public isEnabled = false;
+
+  private static CSS = {
+    dragWrapper: 'ce-drag-wrapper',
+    dragImage: 'ce-drag-image',
+    dropHolder: 'ce-drop-holder',
+  };
+
+  private dragSourceBlockId: string | null = null;
+
+  // eslint-disable-next-line @typescript-eslint/no-magic-numbers
+  private THROTTLE_SCROLL_TIMEOUT = 100;
+
+  private dropTargetArgs: ReturnType<typeof this.findDropTarget> | null = null;
+
+  private dropTargetEvents = {
+    dragover: (event: DragEvent) => {
+      if (event.dataTransfer) {
+        event.dataTransfer.dropEffect = 'move';
+      }
+
+      if (this.isDragOverEventSame(event)) {
+        return;
+      }
+
+      this.removeDropHolder();
+      this.createDropHolder();
+    },
+
+    dragleave: () => {
+      this.removeDropHolder();
+      this.dropTargetArgs = null;
+    },
+
+    drop: () => {
+      if (this.dropTargetArgs == null || this.dragSourceBlockId == null) {
+        return;
+      }
+
+      const { BlockManager } = this.Editor;
+      const { block, position } = this.dropTargetArgs;
+
+      const dragSource = BlockManager.getBlockById(this.dragSourceBlockId);
+      const dropTarget = block;
+
+      if (dragSource != null && dropTarget != null) {
+        const sourceBlockIndex = BlockManager.getBlockIndex(dragSource);
+        let targetBlockIndex = BlockManager.getBlockIndex(dropTarget);
+
+        if (position === DropPosition.Bottom) {
+          targetBlockIndex++;
+        }
+
+        if (sourceBlockIndex < targetBlockIndex) {
+          targetBlockIndex--;
+        }
+
+        if (targetBlockIndex !== sourceBlockIndex) {
+          BlockManager.move(targetBlockIndex, sourceBlockIndex);
+        }
+      }
+
+      setTimeout(() => {
+        this.removeDropHolder();
+
+        this.removeDragImage();
+        this.dropTargetArgs = null;
+        this.dragSourceBlockId = null;
+      }, this.THROTTLE_SCROLL_TIMEOUT);
+    },
+  };
+
+  private dragHandleEvents = {
+    dragstart: (event: Event, getDragSourceBlock: () => Block | null) => {
+      const dragSourceBlock = getDragSourceBlock();
+
+      if (
+        dragSourceBlock != null &&
+        event instanceof DragEvent &&
+        event.dataTransfer
+      ) {
+        this.registerBlockEvents();
+
+        this.dragSourceBlockId = dragSourceBlock.id;
+        const dragImage = this.createDragImage(dragSourceBlock);
+
+        event.dataTransfer.setDragImage(dragImage, 0, 0);
+        event.dataTransfer.effectAllowed = 'move';
+      }
+    },
+
+    dragend: () => this.destroy(),
+  } as const;
+
+  private bringElementIntoViewThrottled = throttle(
+    (element: HTMLElement) =>
+      element.scrollIntoView({
+        behavior: 'smooth',
+        block: 'center',
+      }),
+    this.THROTTLE_SCROLL_TIMEOUT
+  );
+
+  /**
+   * Enables the drag handle by setting its draggable attribute and returns the associated event bindings.
+   *
+   * @param dragHandle - The HTML element that serves as the drag handle.
+   * @returns The drag handle event bindings.
+   */
+  public getDragHandleModuleBindings(
+    dragHandle: HTMLElement
+  ): typeof this.dragHandleEvents {
+    dragHandle.setAttribute('draggable', 'true');
+    this.isEnabled = true;
+
+    return this.dragHandleEvents;
+  }
+
+  /**
+   * Disables the drag handle by removing its draggable attribute and cleans up event listeners.
+   *
+   * @param dragHandle - The HTML element acting as the drag handle.
+   */
+  public disableDragHandleModuleBindings(dragHandle: HTMLElement): void {
+    dragHandle.removeAttribute('draggable');
+    this.isEnabled = false;
+
+    this.destroy();
+  }
+
+  /**
+   * Registers drag event listeners for each block in the BlockManager.
+   * Iterates over all blocks and attaches listeners for dragover, dragleave, and drop events.
+   *
+   * @private
+   */
+  private registerBlockEvents(): void {
+    const { UI } = this.Editor;
+
+    const dropTarget = UI.nodes.redactor;
+
+    for (const [eventName, eventHandler] of Object.entries(
+      this.dropTargetEvents
+    )) {
+      this.readOnlyMutableListeners.on(
+        dropTarget,
+        eventName,
+        (event: Event) => {
+          if (event instanceof DragEvent) {
+            eventHandler(event);
+          }
+        }
+      );
+    }
+  }
+
+  private createDropHolder = (): HTMLElement | null => {
+    if (!this.dropTargetArgs) {
+      return null;
+    }
+
+    const { block, position } = this.dropTargetArgs;
+
+    const dropHolder = document.createElement('div');
+
+    dropHolder.classList.add(
+      BlockDragNDrop.CSS.dragWrapper,
+      BlockDragNDrop.CSS.dropHolder
+    );
+
+    block.holder.insertAdjacentElement(
+      position === DropPosition.Top ? 'beforebegin' : 'afterend',
+      dropHolder
+    );
+
+    this.bringElementIntoViewThrottled(dropHolder);
+
+    return dropHolder;
+  };
+
+  private removeDropHolder = (): void => {
+    this.Editor.UI.nodes.redactor
+      .querySelectorAll(
+        `.${BlockDragNDrop.CSS.dragWrapper}.${BlockDragNDrop.CSS.dropHolder}`
+      )
+      .forEach((dropHolder) => {
+        dropHolder.remove();
+      });
+  };
+
+  /**
+   * Cleans up the drag and drop state by removing drag images, resetting internal state,
+   * and clearing all event listeners attached to block holders.
+   *
+   * @returns A promise that resolves once the cleanup is complete.
+   * @private
+   */
+  private async destroy(): Promise<void> {
+    this.removeDragImage();
+    this.removeDropHolder();
+
+    this.dragSourceBlockId = null;
+    this.dropTargetArgs = null;
+
+    this.readOnlyMutableListeners.clearAll();
+  }
+
+  private createDragImage = (block: Block): HTMLElement => {
+    const dragImage = block.holder.cloneNode(true) as HTMLElement;
+
+    dragImage.classList.add(
+      BlockDragNDrop.CSS.dragWrapper,
+      BlockDragNDrop.CSS.dragImage
+    );
+    this.Editor.UI.nodes.redactor.appendChild(dragImage);
+
+    return dragImage;
+  };
+
+  /**
+   * Removes any existing drag image elements from the editor's redactor.
+   *
+   * @private
+   */
+  private removeDragImage(): void {
+    this.Editor.UI.nodes.redactor
+      .querySelectorAll(
+        `.${BlockDragNDrop.CSS.dragWrapper}.${BlockDragNDrop.CSS.dragImage}`
+      )
+      .forEach((dragImage) => {
+        dragImage.remove();
+      });
+  }
+
+  /**
+   * optimizes dragover event by checking if the closest block and drop position are the same
+   * as the last dragover event.
+   * If they are, it returns true to avoid unnecessary processing.
+   *
+   * @param event - The drag event
+   */
+  private isDragOverEventSame(event: DragEvent): boolean {
+    const dropTargetArgs = this.findDropTarget(event);
+
+    if (dropTargetArgs == null) {
+      return false;
+    }
+
+    if (
+      dropTargetArgs.block === this.dropTargetArgs?.block &&
+      dropTargetArgs.position === this.dropTargetArgs?.position
+    ) {
+      // if the closest blocks are the same, return true
+      return true;
+    }
+
+    this.dropTargetArgs = dropTargetArgs;
+
+    return false;
+  }
+
+  /**
+   * Finds the closest blocks above and below the mouse event.
+   *
+   * @param mouseEvent - The mouse event.
+   * @returns An object with the closest top and bottom blocks.
+   */
+  private findDropTarget = (
+    mouseEvent: MouseEvent
+  ): { block: Block; position: DropPosition } | null => {
+    const { BlockManager } = this.Editor;
+
+    const { clientX, clientY } = mouseEvent;
+    const elementAtMouseEvent = document.elementFromPoint(clientX, clientY);
+
+    if (elementAtMouseEvent != null) {
+      const closestElement = elementAtMouseEvent.closest(
+        `.${Block.CSS.wrapper}`
+      );
+      const block = BlockManager.blocks.find((_block) => {
+        return _block.holder === closestElement;
+      });
+
+      if (block) {
+        const { top, bottom } = block.holder.getBoundingClientRect();
+
+        return {
+          block,
+          position:
+            clientY < (top + bottom) / 2
+              ? DropPosition.Top
+              : DropPosition.Bottom,
+        };
+      }
+    }
+
+    return null;
+  };
+}
+
+// TODO
+// 1 - fix scroll - use rectangle selection logic

src/components/modules/index.ts

@@ -37,6 +37,7 @@ import Renderer from './renderer';
 import Saver from './saver';
 import Tools from './tools';
 import UI from './ui';
+import BlockDragNDrop from './blockDragNDrop';
 
 export default {
   // API Modules
@@ -64,6 +65,7 @@ export default {
   InlineToolbar,
 
   // Modules
+  BlockDragNDrop,
   BlockEvents,
   BlockManager,
   BlockSelection,