atlassian / pragmatic-drag-and-drop

Fast drag and drop for any experience on any tech stack
https://atlassian.design/components/pragmatic-drag-and-drop
Other
9.53k stars 213 forks source link

Show caret when dragging an element in text editor #142

Open martinhonza opened 1 week ago

martinhonza commented 1 week ago

Hi, https://codesandbox.io/p/sandbox/slate-reproductions-forked-hlvpjh i am trying to implement drag and drop with slatejs where I wanna drag elements and drop them inside the editor itself, problem is that when I am dragging an element the caret is not showing at the destination. In the example I have draggable elements, text in contenteditable and image, text and image do show an caret but draggable element no. I am thinking that it's because of the type of dataTransfer ? Is it possible to somehow resolve this, maybe change the type of dataTransfer to plain text where I would drag an json or something like that ? implementing drop indicator instead of browser caret seems difficult, as it would need to be correctly positioned on line, move by the width of letter, etc...

martinhonza commented 2 days ago

Maybe a bit of progress, I tried to put getInitialDataForExternal: (args) => ({ 'text/plain': 'hello' }) which makes the caret work at the beginning/end of line or in my app it works even if I am slightly under or on top of the line, I can then position the caret inside text. But If I hover directly over the line/text then it doesnt register, onDrag/onDrop event doesn't fire.