Draggable Modal with CK Editor

Question

I have a react-bootstrap modal that contains a CK Editor component within (using the classic editor). I want to make the modal draggable so I'm using the react-draggable library.

That part is working well. The issue is that, when I try to select text within the CK editor by dragging the mouse across the content, the text doesn't get selected. Instead, the modal starts to move.

I need to figure out how to prevent the drag events for the CK editor reaching the react-draggable component.

I've setup the modal like so:

<Modal className="no-transition" dialogAs={ p => <Draggable><ModalDialog { ...p }></ModalDialog></Draggable> } show={ props.show } size="lg">

...
<CKEditor config={{ height: '500px' }} editor={ ClassicEditor } data={ editorState } onReady={ editor => onEditorReady(editor) }/>
...
</Modal>

In the onEditorReady event handler, I'm attempting to intercept, and then stop the drag event

function onEditorReady(editor) {        
    let el = document.querySelector(".ck-content");
        
    if(el) {
    el.addEventListener("dragstart", (e) => e.stopPropagation());
    }

    editorRef.current = editor;
}

However, the dragstart event never seems to actually fire. Is there a better way to prevent the modal from dragging when selecting text in the editor?

Answer 1

Okay, within minutes of posting this question, I see the cancel property for the Draggable component can be set to a css class that, when it matches, will prevent it from initiating the drag.

I set the cancel property to .ck-editor and it now allows for the text to be selected.