fix: cannot drag on the edge of the bookmark

src/js/popup/components/dragAndDrop/DragAndDropConsumer.tsx

@@ -16,14 +16,15 @@ const useDragEvents = ({
   onDragOver: (evt: React.MouseEvent<HTMLElement>, responseEvent: ResponseEvent) => void
   onDragStart: (evt: React.MouseEvent<HTMLElement>, responseEvent: ResponseEvent) => void
 }) => {
-  const {activeKey, pendingKey, setActiveKey, setPendingKey, unsetAllKeys} = React.useContext(
-    DragAndDropContext
-  )
-
-  const [mouseCoordinate, setMouseCoordinate] = React.useState({
-    x: 0,
-    y: 0
-  })
+  const {
+    activeKey,
+    mouseCoordinate,
+    pendingKey,
+    setActiveKey,
+    setMouseCoordinate,
+    setPendingKey,
+    unsetAllKeys
+  } = React.useContext(DragAndDropContext)
 
   return {
     handleDragOver: React.useCallback(
@@ -65,7 +66,7 @@ const useDragEvents = ({
           y: evt.clientY
         })
       },
-      [itemKey, setPendingKey]
+      [itemKey, setMouseCoordinate, setPendingKey]
     ),
     handleMouseUp: React.useCallback(() => {
       unsetAllKeys()
@@ -114,7 +115,7 @@ const DragAndDropConsumer = (props: Props) => {
   })
 
   const isDragging = context.activeKey !== null
-  const isPending = context.pendingKey === props.itemKey
+  const isPending = context.pendingKey !== null
   return (
     <div
       className={props.className}

src/js/popup/components/dragAndDrop/DragAndDropContext.ts

@@ -1,16 +1,28 @@
 import * as React from 'react'
 
+type MouseCoordinate = Readonly<{
+  x: number
+  y: number
+}>
+
 export interface DragAndDropContextType {
   activeKey: string | null
+  mouseCoordinate: MouseCoordinate
   pendingKey: string | null
   setActiveKey: (activeKey: string) => void
+  setMouseCoordinate: (mouseCoordinate: MouseCoordinate) => void
   setPendingKey: (pendingKey: string) => void
   unsetAllKeys: () => void
 }
 export default React.createContext<DragAndDropContextType>({
   activeKey: null,
+  mouseCoordinate: {
+    x: 0,
+    y: 0
+  },
   pendingKey: null,
   setActiveKey: () => {},
+  setMouseCoordinate: () => {},
   setPendingKey: () => {},
   unsetAllKeys: () => {}
 })

src/js/popup/components/dragAndDrop/DragAndDropProvider.tsx

@@ -3,8 +3,14 @@ import * as React from 'react'
 import useEventListener from '../../hooks/useEventListener'
 import DragAndDropContext, {DragAndDropContextType} from './DragAndDropContext'
 
-const useDragAndDropContextState = () => {
+const useDragAndDropContextState = (): DragAndDropContextType => {
   const [activeKey, setActiveKeyState] = React.useState<DragAndDropContextType['activeKey']>(null)
+  const [mouseCoordinate, setMouseCoordinate] = React.useState<
+  DragAndDropContextType['mouseCoordinate']
+  >({
+    x: 0,
+    y: 0
+  })
   const [pendingKey, setPendingKeyState] = React.useState<DragAndDropContextType['pendingKey']>(
     null
   )
@@ -25,12 +31,14 @@ const useDragAndDropContextState = () => {
   return React.useMemo(
     () => ({
       activeKey,
+      mouseCoordinate,
       pendingKey,
       setActiveKey,
+      setMouseCoordinate,
       setPendingKey,
       unsetAllKeys
     }),
-    [activeKey, pendingKey, setActiveKey, setPendingKey, unsetAllKeys]
+    [activeKey, mouseCoordinate, pendingKey, setActiveKey, setPendingKey, unsetAllKeys]
   )
 }