Drop event default prevented when dragging nodes

I want to reorder two nodes of the same type and something strange is happening. When I drop the node, in prosemirror-view the drop event does not belong to view because of defaultPrevented set to true and hece the drop handler is not called at all.

I have a normal react Editor component and there is actually no problem - the event is not prevented and everything works fine. I also have a FormEditor component defined as below:


export const FormEditor = function <T extends FieldValues>({
  control,
  name,
  errors,
  editorRef,
  label,
  description,
  ...props
}: FormEditorProps<T>) {
  return (
    <Controller
      name={name}
      control={control}
      render={({ field }) => (
        <div className='flex flex-col gap-2'>
          {label ? <Label htmlFor={name}>{label}</Label> : null}
          {description ? (
            <Label className='text-xs text-muted-foreground' htmlFor={name}>
              {description}
            </Label>
          ) : null}
          <Editor onUpdate={field.onChange} {...props} ref={editorRef} />
          <FormError errors={errors} name={name} />
        </div>
      )}
    />
  );
};

and when dragging in this editor, the defaultPrevented is set to true. Why is that a case? What might drive it? Can I debug somehow the code to see where exactly the preventing default is happening? Not sure whether this is the root cause of the problem but currently thats my only idea. Actually, I can’t event drag a simple text from one place to another :frowning: Any tips? Is that something react specifici?

That eventBelongsToEditor function is called right at the start of the ProseMirror code that interacts with the event. So whatever is calling preventDefault is likely not ProseMirror. Do you have any custom dragging code active, possibly coming from one of those React components?

Indeed, the HTML5Backend from react-dnd was the problematic part (I used it in my Tree component to enable dragging) :slight_smile: