search

steven-tey / novel

Notion-style WYSIWYG editor with AI-powered autocompletion.
https://novel.sh
Apache License 2.0
13.25k stars 1.08k forks source link

Bug on novel.sh demo, image does not move when dragged #275

Closed chinnuu05 closed 9 months ago

chinnuu05 commented 10 months ago

When moving with the dot handle the image does not move, but dragging with the image itself works.

Video of bug:

https://github.com/steven-tey/novel/assets/136545841/228c5475-94c3-4f7b-915b-1a89a87b1c24

Seems like it only happens with the bottom image

assimovt commented 9 months ago

yep, same here. there is also another one with dragging, check this out:

https://github.com/steven-tey/novel/assets/5113/e2480c0e-8d21-4f11-92d5-5db2ba47f5ea

brunocroh commented 9 months ago

The problem is with rounded-lg in the img element.

https://github.com/steven-tey/novel/assets/13812512/05d0ac77-9f2d-4554-88e6-bef8bee7eb39

If you remove the rounded-lg (it has 0.5rem), this start to working and after move for the first time the element receive the class .ProseMirror-selectednode(with 0.2rem) making the element dragging working.

https://github.com/steven-tey/novel/blob/74dc2c8c28a94fcbb383c768b0e6c13b8dcdc947/apps/web/styles/prosemirror.css#L124-L130

This is because when trying to get the original position of element with code below, when this element has a border-radius greater than 0.2 it starts to return -1 over the position of element, changing 1 to 10, make it working, but I believe this is not the best workaround here, so I'm trying discovery a better approach for that.

https://github.com/steven-tey/novel/blob/74dc2c8c28a94fcbb383c768b0e6c13b8dcdc947/packages/headless/src/extensions/drag-and-drop.tsx#L38-L41

Increasing this magic number 1, I can solve the issue, but I believe this is not the best workaround here, so I'm trying to discovery a better approach for that.

eturn view.posAtCoords({ 
   left: boundingRect.left + 10, 
   top: boundingRect.top + 10, 
 })?.inside;