React-native-cn-quill getting drag and drop of text to work

Question

Hope someone can shed some light. I'm using react-native-cn-quill which is a wrapper for quilljs. I'm trying to get text (which by default are in "p" tags) to be draggable in the editor.

I tried extending the Block blot so that p tags have the draggable attribute set to true. Once I do this, the editor behaves strangely - I can no longer type anywhere. It's still responsive but I cannot type.

const Block = Quill.import('blots/block');

class MyBlock extends Block {        
        static create(value) {
          let node = super.create();
          node.setAttribute('draggable', true);
          node.setAttribute('id',value.id);
          node.addEventListener('dragstart', function(e) {
            event.dataTransfer.setData("text/plain", value.id);
          })
          return node;
        }
}
      
MyBlock.tagName = 'P';
Quill.register(MyBlock, true);

Then I set listeners for the drop event:

document.querySelector('#editor-container').addEventListener('dragenter', (event) => {
      event.preventDefault();
    });
    
document.querySelector('#editor-container').addEventListener('dragover', (event) => {
      event.preventDefault();
    });

document.querySelector('#editor-container').addEventListener('drop', (event) => {
      event.preventDefault();
      const uniqId = event.dataTransfer.getData("text/plain");
      let draggedElement = document.getElementById(uniqId);
      draggedElement.parentNode.removeChild(draggedElement);
      event.target.appendChild(draggedElement);
    });

Is there some way to get P tags to be draggable or change the default blot for typed text to be a custom blot?

Does someone have any insights into this?

Thanks for any input.