Drag and Drop don't work

[ruimarcosjoao]

Description

drag and drop is not working properly, even in the documentation and editors that are in plate, drag and drop does not work: https://platejs.org/docs/dnd

Reproduction URL

https://platejs.org/docs/dnd

Reproduction steps

1. Go to 'https://platejs.org/docs/dnd
2. Click on editor
3. and try to use drag and drop

Plate version

^42.0.0

Slate React version

i don't have slate

Screenshots

Logs

Browsers

No response

[zbeyens]

2025-02-01.at.21.40.06.mp4

Could you give more details on how to reproduce?

[ruimarcosjoao]

In zen browser and firefox don't work, i don't know why

[ruimarcosjoao]

output-github.mp4

2025-02-01.at.21.40.06.mp4

Could you give more details on how to reproduce?

[ruimarcosjoao]

in chrome work perfectly but in zen and firefox not!

But other drag and drop lib works

[SafaAlfulaij]

Known issue for buttons in Firefox: https://bugzilla.mozilla.org/show_bug.cgi?id=568313#c16

Workaround:

const DragHandle = React.memo(() => {
  const editor = useEditorRef();
  const element = useElement();

  return (
    <TooltipButton
      asChild // <
      role="button" // <
      variant="ghost"
      className={styles.dragHandle}
      onClick={() => {
        editor
          .getApi(BlockSelectionPlugin)
          .blockSelection.set(element.id as string);
      }}
      data-plate-prevent-deselect
      tooltip="Drag to move"
      draggable={false}
    >
      <div> {/* < */}
        <GripVertical />
      </div>
    </TooltipButton>
  );
});