feat(web): enable block drag'n'drop in super editor (#2029)

packages/blocks-editor/src/Editor/BlocksEditor.tsx

@@ -31,8 +31,6 @@ import FloatingLinkEditorPlugin from '../Lexical/Plugins/FloatingLinkEditorPlugi
 import {truncateString} from './Utils';
 import {SuperEditorContentId} from './Constants';
 
-const BlockDragEnabled = false;
-
 type BlocksEditorProps = {
   onChange: (value: string, preview: string) => void;
   className?: string;
@@ -130,11 +128,9 @@ export const BlocksEditor: FunctionComponent<BlocksEditorProps> = ({
         <>
           <FloatingTextFormatToolbarPlugin anchorElem={floatingAnchorElem} />
           <FloatingLinkEditorPlugin />
+          <DraggableBlockPlugin anchorElem={floatingAnchorElem} />
         </>
       )}
-      {floatingAnchorElem && BlockDragEnabled && (
-        <>{<DraggableBlockPlugin anchorElem={floatingAnchorElem} />}</>
-      )}
     </>
   );
 };

packages/blocks-editor/src/Lexical/Plugins/DraggableBlockPlugin/index.scss

@@ -10,10 +10,9 @@
 }
 
 .draggable-block-menu .icon {
-  width: 16px;
-  height: 16px;
-  opacity: 0.3;
-  background-image: url(#{$blocks-editor-icons-path}/draggable-block-menu.svg);
+  width: 1rem;
+  height: 1rem;
+  opacity: 0.4;
 }
 
 .draggable-block-menu:active {
@@ -21,13 +20,14 @@
 }
 
 .draggable-block-menu:hover {
-  background-color: #efefef;
+  background-color: var(--sn-stylekit-contrast-background-color);
+  padding: 3px;
 }
 
 .draggable-block-target-line {
   pointer-events: none;
-  background: deepskyblue;
-  height: 4px;
+  background: var(--sn-stylekit-info-color);
+  height: 0.25rem;
   position: absolute;
   left: 0;
   top: 0;

packages/blocks-editor/src/Lexical/Plugins/DraggableBlockPlugin/index.tsx

@@ -19,16 +19,18 @@ import {
 } from 'lexical';
 import {DragEvent as ReactDragEvent, useEffect, useRef, useState} from 'react';
 import {createPortal} from 'react-dom';
+import {LexicalDraggableBlockMenu} from '@standardnotes/icons';
 
 import {isHTMLElement} from '../../Utils/guard';
 import {Point} from '../../Utils/point';
 import {Rect} from '../../Utils/rect';
 
-const SPACE = 4;
+const SPACE = -16;
 const TARGET_LINE_HALF_HEIGHT = 2;
 const DRAGGABLE_BLOCK_MENU_CLASSNAME = 'draggable-block-menu';
 const DRAG_DATA_FORMAT = 'application/x-lexical-drag-block';
 const TEXT_BOX_HORIZONTAL_PADDING = 28;
+const TARGET_LINE_SPACE_FROM_LEFT = 0;
 
 const Downward = 1;
 const Upward = -1;
@@ -179,7 +181,7 @@ function setTargetLine(
   }
 
   const top = lineTop - anchorTop - TARGET_LINE_HALF_HEIGHT;
-  const left = TEXT_BOX_HORIZONTAL_PADDING - SPACE;
+  const left = TARGET_LINE_SPACE_FROM_LEFT;
 
   targetLineElem.style.transform = `translate(${left}px, ${top}px)`;
   targetLineElem.style.width = `${
@@ -347,7 +349,9 @@ function useDraggableBlockMenu(
         draggable={true}
         onDragStart={onDragStart}
         onDragEnd={onDragEnd}>
-        <div className={isEditable ? 'icon' : ''} />
+        <div className={isEditable ? 'icon' : ''}>
+          <LexicalDraggableBlockMenu className="text-text pointer-events-none" />
+        </div>
       </div>
       <div className="draggable-block-target-line" ref={targetLineRef} />
     </>,