Update code to use draggable nodes in vscode

Author: goanpeca

packages/lexical/src/plugins/DraggableBlockPlugin.tsx

@@ -191,15 +191,71 @@ function setMenuPosition(
   const floatingElemRect = floatingElem.getBoundingClientRect();
   const anchorElementRect = anchorElem.getBoundingClientRect();
 
-  const top =
-    targetRect.top +
-    (parseInt(targetStyle.lineHeight, 10) - floatingElemRect.height) / 2 -
-    anchorElementRect.top;
+  // BUGFIX: Find the actual scrolling container
+  // The scrolling element could be anchorElem itself OR its parent, depending on the implementation
+  // We need to check which element actually has scrollable overflow
+  function getScrollingElement(elem: HTMLElement): {
+    element: HTMLElement;
+    scrollTop: number;
+    scrollLeft: number;
+  } {
+    // Check if the element itself is scrollable
+    const style = window.getComputedStyle(elem);
+    const hasScrollY =
+      style.overflowY === 'auto' || style.overflowY === 'scroll';
+    const hasScrollX =
+      style.overflowX === 'auto' || style.overflowX === 'scroll';
+
+    if (hasScrollY || hasScrollX) {
+      return {
+        element: elem,
+        scrollTop: elem.scrollTop || 0,
+        scrollLeft: elem.scrollLeft || 0,
+      };
+    }
+
+    // Check parent element
+    const parent = elem.parentElement;
+    if (parent) {
+      const parentStyle = window.getComputedStyle(parent);
+      const parentHasScrollY =
+        parentStyle.overflowY === 'auto' || parentStyle.overflowY === 'scroll';
+      const parentHasScrollX =
+        parentStyle.overflowX === 'auto' || parentStyle.overflowX === 'scroll';
+
+      if (parentHasScrollY || parentHasScrollX) {
+        return {
+          element: parent,
+          scrollTop: parent.scrollTop || 0,
+          scrollLeft: parent.scrollLeft || 0,
+        };
+      }
+    }
+
+    // No scrolling container found
+    return {
+      element: elem,
+      scrollTop: 0,
+      scrollLeft: 0,
+    };
+  }
+
+  const { scrollTop } = getScrollingElement(anchorElem);
+
+  // Calculate position
+  const lineHeight = parseInt(targetStyle.lineHeight, 10);
+  const topOffset = (lineHeight - floatingElemRect.height) / 2;
+
+  // Original calculation (without scroll compensation)
+  const topOriginal = targetRect.top + topOffset - anchorElementRect.top;
+
+  // With scroll compensation
+  const topWithScroll = topOriginal + scrollTop;
 
   const left = SPACE;
 
   floatingElem.style.opacity = '1';
-  floatingElem.style.transform = `translate(${left}px, ${top}px)`;
+  floatingElem.style.transform = `translate(${left}px, ${topWithScroll}px)`;
 }
 
 function setDragImage(
@@ -228,14 +284,34 @@ function setTargetLine(
   const { top: anchorTop, width: anchorWidth } =
     anchorElem.getBoundingClientRect();
   const { marginTop, marginBottom } = getCollapsedMargins(targetBlockElem);
+
+  // BUGFIX: Get scroll offset using the same logic as setMenuPosition
+  function getScrollTop(elem: HTMLElement): number {
+    const style = window.getComputedStyle(elem);
+    const hasScroll =
+      style.overflowY === 'auto' || style.overflowY === 'scroll';
+    if (hasScroll) return elem.scrollTop || 0;
+
+    const parent = elem.parentElement;
+    if (parent) {
+      const parentStyle = window.getComputedStyle(parent);
+      const parentHasScroll =
+        parentStyle.overflowY === 'auto' || parentStyle.overflowY === 'scroll';
+      if (parentHasScroll) return parent.scrollTop || 0;
+    }
+    return 0;
+  }
+
+  const scrollTop = getScrollTop(anchorElem);
+
   let lineTop = targetBlockElemTop;
   if (mouseY >= targetBlockElemTop) {
     lineTop += targetBlockElemHeight + marginBottom / 2;
   } else {
     lineTop -= marginTop / 2;
   }
 
-  const top = lineTop - anchorTop - TARGET_LINE_HALF_HEIGHT;
+  const top = lineTop - anchorTop - TARGET_LINE_HALF_HEIGHT + scrollTop;
   const left = TEXT_BOX_HORIZONTAL_PADDING - SPACE;
 
   targetLineElem.style.transform = `translate(${left}px, ${top}px)`;
@@ -265,6 +341,11 @@ function useDraggableBlockMenu(
   const [draggableBlockElem, setDraggableBlockElem] =
     useState<HTMLElement | null>(null);
 
+  // Get theme classes from editor config
+  const theme = editor._config.theme;
+  const menuThemeClass = theme.draggableBlockMenu || '';
+  const targetLineThemeClass = theme.draggableBlockTargetLine || '';
+
   useEffect(() => {
     function onMouseMove(event: MouseEvent) {
       const target = event.target;
@@ -286,12 +367,15 @@ function useDraggableBlockMenu(
       setDraggableBlockElem(null);
     }
 
-    scrollerElem?.addEventListener('mousemove', onMouseMove);
-    scrollerElem?.addEventListener('mouseleave', onMouseLeave);
+    // BUGFIX: Attach to document instead of scrollerElem to ensure mouse events
+    // work even after scrolling. The scrollerElem approach fails when content scrolls
+    // because the mouse event coordinates become misaligned with element positions.
+    document.addEventListener('mousemove', onMouseMove);
+    document.addEventListener('mouseleave', onMouseLeave);
 
     return () => {
-      scrollerElem?.removeEventListener('mousemove', onMouseMove);
-      scrollerElem?.removeEventListener('mouseleave', onMouseLeave);
+      document.removeEventListener('mousemove', onMouseMove);
+      document.removeEventListener('mouseleave', onMouseLeave);
     };
   }, [scrollerElem, anchorElem, editor]);
 
@@ -412,15 +496,18 @@ function useDraggableBlockMenu(
   return createPortal(
     <>
       <div
-        className="icon draggable-block-menu"
+        className={`icon draggable-block-menu ${menuThemeClass}`}
         ref={menuRef}
         draggable
         onDragStart={onDragStart}
         onDragEnd={onDragEnd}
       >
         <div className={isEditable ? 'icon' : ''} />
       </div>
-      <div className="draggable-block-target-line" ref={targetLineRef} />
+      <div
+        className={`draggable-block-target-line ${targetLineThemeClass}`}
+        ref={targetLineRef}
+      />
     </>,
     anchorElem,
   );

packages/lexical/style/lexical/DraggableBlockPlugin.css

@@ -18,16 +18,24 @@
 .draggable-block-menu .icon {
   width: 16px;
   height: 16px;
-  opacity: 0.3;
+  opacity: 0.4;
   background-image: url(./icons/draggable-block-menu.svg);
+  background-size: contain;
+  background-position: center;
+  background-repeat: no-repeat;
 }
 
 .draggable-block-menu:active {
   cursor: grabbing;
 }
 
 .draggable-block-menu:hover {
-  background-color: #efefef;
+  background-color: rgba(128, 128, 128, 0.1);
+  opacity: 1;
+}
+
+.draggable-block-menu:hover .icon {
+  opacity: 0.8;
 }
 
 .draggable-block-target-line {