dnd

Author: ShravanKarnati

src/components/modules/blockDragNDrop.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,

src/components/modules/index.ts

@@ -11,6 +11,7 @@ import { IconMenu, IconPlus } from '@codexteam/icons';
 import { BlockHovered } from '../../events/BlockHovered';
 import { beautifyShortcut } from '../../utils';
 import { getKeyboardKeyForCode } from '../../utils/keyboard';
+import Selection from '../../selection';
 
 /**
  * @todo Tab on non-empty block should open Block Settings of the hoveredBlock (not where caret is set)
@@ -233,6 +234,13 @@ export default class Toolbar extends Module<ToolbarNodes> {
         this.enableModuleBindings();
       }, { timeout: 2000 });
     } else {
+      const { BlockDragNDrop } = this.Editor;
+      const dragHandle = this.nodes.settingsToggler;
+
+      if (dragHandle != null) {
+        BlockDragNDrop.disableDragHandleModuleBindings(dragHandle);
+      }
+
       this.destroy();
       this.Editor.BlockSettings.destroy();
       this.disableModuleBindings();
@@ -469,18 +477,7 @@ export default class Toolbar extends Module<ToolbarNodes> {
 
     $.append(this.nodes.actions, this.nodes.settingsToggler);
 
-    const blockTunesTooltip = $.make('div');
-    const blockTunesTooltipEl = $.text(I18n.ui(I18nInternalNS.ui.blockTunes.toggler, 'Click to tune'));
-    const slashRealKey = await getKeyboardKeyForCode('Slash', '/');
-
-    blockTunesTooltip.appendChild(blockTunesTooltipEl);
-    blockTunesTooltip.appendChild($.make('div', this.CSS.plusButtonShortcut, {
-      textContent: beautifyShortcut(`CMD + ${slashRealKey}`),
-    }));
-
-    tooltip.onHover(this.nodes.settingsToggler, blockTunesTooltip, {
-      hidingDelay: 400,
-    });
+    await this.makeSettingsTogglerTooltip();
 
     /**
      * Appending Toolbar components to itself
@@ -494,6 +491,39 @@ export default class Toolbar extends Module<ToolbarNodes> {
     $.append(this.Editor.UI.nodes.wrapper, this.nodes.wrapper);
   }
 
+  /**
+   * Creates and configures a tooltip for the settings toggler button in the toolbar.
+   *
+   * @returns {Promise<void>} A promise that resolves when the tooltip is successfully created.
+   */
+  private async makeSettingsTogglerTooltip(): Promise<void> {
+    const { BlockDragNDrop } = this.Editor;
+    const tooltipTextParts: string[] = [
+      I18n.ui(I18nInternalNS.ui.blockTunes.toggler, 'Click to tune'),
+    ];
+
+    if (BlockDragNDrop.isEnabled) {
+      tooltipTextParts.push(
+        I18n.ui(I18nInternalNS.ui.blockTunes.toggler, 'or drag to move')
+      );
+    }
+
+    const blockTunesTooltip = $.make('div');
+    const blockTunesTooltipEl = $.text(tooltipTextParts.join(' '));
+    const slashRealKey = await getKeyboardKeyForCode('Slash', '/');
+
+    blockTunesTooltip.appendChild(blockTunesTooltipEl);
+    blockTunesTooltip.appendChild(
+      $.make('div', this.CSS.plusButtonShortcut, {
+        textContent: beautifyShortcut(`CMD + ${slashRealKey}`),
+      })
+    );
+
+    tooltip.onHover(this.nodes.settingsToggler, blockTunesTooltip, {
+      hidingDelay: 400,
+    });
+  }
+
   /**
    * Creates the Toolbox instance and return it's rendered element
    */
@@ -598,6 +628,28 @@ export default class Toolbar extends Module<ToolbarNodes> {
         this.moveAndOpen(data.block);
       });
     }
+
+    const { BlockDragNDrop } = this.Editor;
+    const dragHandle = this.nodes.settingsToggler;
+
+    if  (dragHandle != null)  {
+      const { dragstart, dragend } = BlockDragNDrop.getDragHandleModuleBindings(dragHandle);
+
+      this.readOnlyMutableListeners.on(
+        dragHandle,
+        'dragstart',
+        (event) => dragstart(event, () => this.hoveredBlock),
+        true
+      );
+      this.readOnlyMutableListeners.on(
+        dragHandle,
+        'dragend',
+        () => dragend(),
+        true
+      );
+
+      this.makeSettingsTogglerTooltip();
+    }
   }
 
   /**

src/components/modules/toolbar/index.ts

@@ -416,10 +416,10 @@ export function isValidMimeType(type: string): boolean {
  * @param {boolean} immediate - call now
  * @returns {Function}
  */
-export function debounce(func: (...args: unknown[]) => void, wait?: number, immediate?: boolean): () => void {
+export function debounce<T =(...args: unknown[]) => void>(func: T, wait?: number, immediate?: boolean): T {
   let timeout;
 
-  return (...args: unknown[]): void => {
+  return ((...args: unknown[]): void => {
     // eslint-disable-next-line @typescript-eslint/no-this-alias
     const context = this;
 
@@ -438,7 +438,7 @@ export function debounce(func: (...args: unknown[]) => void, wait?: number, imme
     if (callNow) {
       func.apply(context, args);
     }
-  };
+  }) as T;
 }
 
 /**
@@ -451,7 +451,7 @@ export function debounce(func: (...args: unknown[]) => void, wait?: number, imme
  *                  but if you'd like to disable the execution on the leading edge, pass
  *                  `{leading: false}`. To disable execution on the trailing edge, ditto.
  */
-export function throttle(func, wait, options: {leading?: boolean; trailing?: boolean} = undefined): () => void {
+export function throttle<T =(...args:unknown[]) => void>(func: T, wait: number, options: {leading?: boolean; trailing?: boolean} = undefined): T {
   let context, args, result;
   let timeout = null;
   let previous = 0;
@@ -470,7 +470,7 @@ export function throttle(func, wait, options: {leading?: boolean; trailing?: boo
     }
   };
 
-  return function (): unknown {
+  return (function () {
     const now = Date.now();
 
     if (!previous && options.leading === false) {
@@ -501,7 +501,7 @@ export function throttle(func, wait, options: {leading?: boolean; trailing?: boo
     }
 
     return result;
-  };
+  }) as T;
 }
 
 /**

src/components/utils.ts

@@ -88,4 +88,4 @@
   i {
     font-style: italic;
   }
-}
+}

src/styles/block.css

@@ -0,0 +1,30 @@
+.ce-drag-wrapper {
+    &.ce-drag-image {
+        position: absolute;
+        pointer-events: none;
+        z-index: 9999;
+        opacity: 0.5;
+        transition: none;
+        user-select: none;
+        width: fit-content;
+        top: -10000px;
+        left: -10000px;
+        background: var(--selectionColor);
+    }
+
+    &.ce-drop-holder {
+        position: relative;
+
+        &::before {
+            content: '';
+            position: absolute;
+            left: 0;
+            bottom: 0;
+            width: 100%;
+            height: 5px;
+            background-color: #388ae5;
+            opacity: 0.5;
+            z-index: 9999;
+        }
+    }
+}

src/styles/blockDragNDrop.css

@@ -12,4 +12,4 @@
 @import './popover.css';
 @import './popover-inline.css';
 @import './placeholders.css';
-
+@import './blockDragNDrop.css';

src/styles/main.css

@@ -37,6 +37,7 @@ import Saver from '../components/modules/saver';
 import Tools from '../components/modules/tools';
 import UI from '../components/modules/ui';
 import ToolsAPI from '../components/modules/api/tools';
+import BlockDragNDrop from '../components/modules/blockDragNDrop';
 
 export interface EditorModules {
   // API Modules
@@ -64,6 +65,7 @@ export interface EditorModules {
   InlineToolbar: InlineToolbar,
 
   // Modules
+  BlockDragNDrop: BlockDragNDrop,
   BlockEvents: BlockEvents,
   BlockManager: BlockManager,
   BlockSelection: BlockSelection,