Drag n drop text

[bumpingChris]

Hi @imnapo
Thank you for creating this module.

I would like to be able to drag blocks of text from one location on the editor to another. I can do this for custom blots, but not for typed text on 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/focus anywhere. It's still responsive but I cannot type. It's as if the draggable attribute makes the editor non-editable.

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 after Quill has been initiated, 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);
    });

Hope someone can shed some light. I'm trying to get text (p tags) to be draggable in the editor, or change the text to be encapsulated in custom blots.

Thanks for any input.