feat(ui) : the block can be drag n drop

package.json

@@ -65,6 +65,7 @@
     "css-loader": "^3.5.3",
     "cssnano": "^4.1.10",
     "cypress": "^6.8.0",
+    "cypress-file-upload": "^5.0.8",
     "cypress-intellij-reporter": "^0.0.6",
     "eslint": "^8.28.0",
     "eslint-config-codex": "^1.7.1",

src/components/block/index.ts

@@ -83,6 +83,15 @@ export enum BlockToolAPI {
   ON_PASTE = 'onPaste',
 }
 
+/**
+ * Available block drop zones position w.r.t. focused block.
+ */
+export enum BlockDropZonePosition {
+  Top = 'top',
+  Bottom = 'bottom',
+  // @todo - Left, Right could be added in the future
+}
+
 /**
  * Names of events supported by Block class
  */
@@ -108,6 +117,8 @@ export default class Block extends EventsDispatcher<BlockEvents> {
       focused: 'ce-block--focused',
       selected: 'ce-block--selected',
       dropTarget: 'ce-block--drop-target',
+      dropTargetTop: 'ce-block--drop-target-top',
+      dropTargetBottom: 'ce-block--drop-target-bottom',
     };
   }
 
@@ -544,12 +555,41 @@ export default class Block extends EventsDispatcher<BlockEvents> {
   }
 
   /**
-   * Toggle drop target state
+   * Toggle drop target state.
    *
-   * @param {boolean} state - 'true' if block is drop target, false otherwise
+   * @param {undefined | BlockDropZonePosition} state - 'undefined' if block is not a drop target or
+   * position of drop zone.
    */
-  public set dropTarget(state) {
-    this.holder.classList.toggle(Block.CSS.dropTarget, state);
+  public set dropTarget(state: undefined | BlockDropZonePosition) {
+    if (!state || this.selected) {
+      /**
+       * If state is undefined or block is selected for drag
+       * then remove the drop target style
+       */
+      this.holder.classList.remove(Block.CSS.dropTarget, Block.CSS.dropTargetTop, Block.CSS.dropTargetBottom);
+    } else {
+      /**
+       * Otherwise, toggle the block's drop target and drop zone position.
+       */
+      this.holder.classList.toggle(Block.CSS.dropTarget, !!state);
+      this.holder.classList.toggle(Block.CSS.dropTargetTop, state === BlockDropZonePosition.Top);
+      this.holder.classList.toggle(Block.CSS.dropTargetBottom, state === BlockDropZonePosition.Bottom);
+    }
+  }
+
+  /**
+   * Return Block's dropTarget state.
+   *
+   * @returns {BlockDropZonePosition | undefined}
+   */
+  public get dropTarget(): undefined | BlockDropZonePosition {
+    if (this.holder.classList.contains(Block.CSS.dropTargetTop)) {
+      return BlockDropZonePosition.Top;
+    } else if (this.holder.classList.contains(Block.CSS.dropTargetBottom)) {
+      return BlockDropZonePosition.Bottom;
+    }
+
+    return undefined;
   }
 
   /**

src/components/modules/blockEvents.ts

@@ -5,6 +5,7 @@ import Module from '../__module';
 import * as _ from '../utils';
 import SelectionUtils from '../selection';
 import Flipper from '../flipper';
+import { BlockDropZonePosition } from '../block';
 
 /**
  *
@@ -142,25 +143,43 @@ export default class BlockEvents extends Module {
   }
 
   /**
-   * Add drop target styles
-   *
+   * All drag enter on block
+   *  - use to clear previous drop target zone style.
+   * 
    * @param {DragEvent} event - drag over event
    */
-  public dragOver(event: DragEvent): void {
-    const block = this.Editor.BlockManager.getBlockByChildNode(event.target as Node);
+  public dragEnter(event: DragEvent): void {
 
-    block.dropTarget = true;
+    const { BlockManager } = this.Editor;
+    const block = BlockManager.getBlockByChildNode(event.target as Node);
+
+    /**
+     * Scroll to make element inside the viewport.
+     */
+    _.scrollToView(block.holder);
+
+    /**
+     * Clear previous drop target zone for every block.
+     */
+    this.Editor.BlockManager.clearDropTargets();
   }
 
   /**
-   * Remove drop target style
+   * All drag over on block.
+   *  - Check the position of drag and suggest drop zone accordingly.
    *
-   * @param {DragEvent} event - drag leave event
+   * @param {DragEvent} event - drag over event
    */
-  public dragLeave(event: DragEvent): void {
+  public dragOver(event: DragEvent): void {
     const block = this.Editor.BlockManager.getBlockByChildNode(event.target as Node);
+    const rect = block.holder.getBoundingClientRect();
 
-    block.dropTarget = false;
+    /**
+     * Add style for target drop zone position.
+     */
+    block.dropTarget = (rect.top + rect.height / 2 >= event.clientY) ?
+      BlockDropZonePosition.Top :
+      BlockDropZonePosition.Bottom;
   }
 
   /**
@@ -424,7 +443,7 @@ export default class BlockEvents extends Module {
         if (this.Editor.BlockManager.currentBlock) {
           this.Editor.BlockManager.currentBlock.updateCurrentInput();
         }
-      // eslint-disable-next-line @typescript-eslint/no-magic-numbers
+        // eslint-disable-next-line @typescript-eslint/no-magic-numbers
       }, 20)();
     }
 
@@ -483,7 +502,7 @@ export default class BlockEvents extends Module {
         if (this.Editor.BlockManager.currentBlock) {
           this.Editor.BlockManager.currentBlock.updateCurrentInput();
         }
-      // eslint-disable-next-line @typescript-eslint/no-magic-numbers
+        // eslint-disable-next-line @typescript-eslint/no-magic-numbers
       }, 20)();
     }
 

src/components/modules/blockManager.ts

@@ -624,6 +624,15 @@ export default class BlockManager extends Module {
     });
   }
 
+  /**
+   * Remove drop targets style from all Blocks.
+   */
+  public clearDropTargets(): void {
+    this.blocks.forEach((block) => {
+      block.dropTarget = undefined;
+    });
+  }
+
   /**
    * 1) Find first-level Block from passed child Node
    * 2) Mark it as current
@@ -798,12 +807,12 @@ export default class BlockManager extends Module {
       BlockEvents.keyup(event);
     });
 
-    this.readOnlyMutableListeners.on(block.holder, 'dragover', (event: DragEvent) => {
-      BlockEvents.dragOver(event);
+    this.readOnlyMutableListeners.on(block.holder, 'dragenter', (event: DragEvent) => {
+      BlockEvents.dragEnter(event);
     });
 
-    this.readOnlyMutableListeners.on(block.holder, 'dragleave', (event: DragEvent) => {
-      BlockEvents.dragLeave(event);
+    this.readOnlyMutableListeners.on(block.holder, 'dragover', (event: DragEvent) => {
+      BlockEvents.dragOver(event);
     });
 
     block.on('didMutated', (affectedBlock: Block) => {

src/components/modules/blockSelection.ts

@@ -225,7 +225,7 @@ export default class BlockSelection extends Module {
    * @param {boolean} restoreSelection - if true, restore saved selection
    */
   public clearSelection(reason?: Event, restoreSelection = false): void {
-    const { BlockManager, Caret, RectangleSelection } = this.Editor;
+    const { BlockManager, Caret, RectangleSelection, Toolbar } = this.Editor;
 
     this.needToSelectAll = false;
     this.nativeInputSelected = false;
@@ -234,6 +234,16 @@ export default class BlockSelection extends Module {
     const isKeyboard = reason && (reason instanceof KeyboardEvent);
     const isPrintableKey = isKeyboard && _.isPrintableKey((reason as KeyboardEvent).keyCode);
 
+    /**
+     * Don't clear the selection during multiple element dragging.
+     */
+    const isMouse = reason && (reason instanceof MouseEvent);
+    const isClickedOnSettingsToggler = isMouse && Toolbar.nodes.settingsToggler.contains(reason.target as HTMLElement);
+
+    if (isMouse && isClickedOnSettingsToggler) {
+      return;
+    }
+
     /**
      * If reason caused clear of the selection was printable key and any block is selected,
      * remove selected blocks and insert pressed key