Disable drag and drop based on custom data

[nevoxx]

Hi,

I have a TextNode Element which reads a custom data attribute called editMode, based on which it shows the Text if editMode is disabled, otherwise it renders a text editor.

The problem i facing is that i cannot select or mark text using the mouse in the textfield, because it triggers the drag and drop of the entire element.

What i want to do is, only enable Drag and Drop, if editMode === false.

I already took a look at rules: { canDrag: ... }, but this only disallows the dragging of the element, but the events are still there and prevent interaction with the textfield.

Is there any way to completely disable the drag feature dynamically?

export const TextNode = ({ text = 'This is a <TextNode>', fontSize = 16, textAlign = 'left', ...props }) => {
  const {
    connectors: { connect, drag },
    selected,
    actions: { setProp, setCustom },
    id,
    editMode,
  } = useNode((state) => ({
    // ....
    editMode: state.data.custom.editMode,
  }));

  return (
    <Box
      {...props}
      ref={(ref: any) => connect(drag(ref))}
    >
        {editMode ? (
          <TextField
            multiline
            value={text}
            fullWidth
            onChange={(e) =>
              setProp(
                (props: any) =>
                  (props.text = e.target.value.replace(/<\/?[^>]+(>|$)/g, '')),
                500,
              )
            }
          />
        ) : <Box sx={{ fontSize }}>{text}</Box>}
      </Card>
    </Box>
  );
};

TextNode.craft = {
  // ....
  custom: {
    editMode: false,
  },

This gif demonstrates that drag and drop works fine, but i can't select text inside the component in editMode:

Does anyone have an idea on how this could be fixed?