Drag Handle not hiding properly

[mmmarsela]

Encountered some funky Drag Handle behavior.

The Drag Handle doesn't hide when scrolling while the cursor is outside of the editor bounds

https://github.com/steven-tey/novel/assets/142061566/bbdc870a-876a-4b8a-870a-8cbf3b614335

It also doesn't hide if the user leaves the bounds of editor. In the video below, when I move the cursor out of the editor, I would expect the Drag Handle to hide since the cursor is no longer active on that node.

https://github.com/steven-tey/novel/assets/142061566/1d3d6247-1970-48ad-9aee-f6c69da36aee

Even with the changes in https://github.com/steven-tey/novel/pull/225 incorporated, I'm still experiencing this issue

[remusris]

I have the same problem, I'm trying to debug it myself but to no avail.

My idea is that you need to deselect the active node on a scroll event, but you're not able to listen to the entire window scrolling within the dragAndDrop extension, you have to do that in the page that it's being imported into either in the page.tsx file or the index.tsx file (app or pages router). You have to put up a context provider to make that happen though.

[remusris]

I figured out a solution of how to solve this bug

I added this line in the globals.css

@tailwind base;
@tailwind components;
@tailwind utilities;

body {
  background-color: var(--novel-white);
}

.hidden {
  display: none
}

.opacity-zero {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease-in-out;
}

The in the dragAnddrop file I made this change

 function hideDragHandle() {
    console.log("hideDragHandleFired")
    console.log("hideDragHandle called, dragHandleElement:", dragHandleElement);

    /* if (dragHandleElement) {
      dragHandleElement.classList.add("hidden");

      // dragHandleElement.style.opacity = '0';
    } */

    if (dragHandleElement) {
      dragHandleElement.classList.add("opacity-zero");
    }
  }

and once again here

function showDragHandle() {
    console.log("showDragHandleFired")

    /* if (dragHandleElement) {
      dragHandleElement.classList.remove("hidden");
      // dragHandleElement.style.opacity = '';
    } */

    if (dragHandleElement) {
      dragHandleElement.classList.remove("opacity-zero");
    }
  }

[andrewdoro]

this should be fixed now