Darginec05 / Yoopta-Editor

Build Notion-like, Craft-like, Coda-like, Medium-like editors with Yoopta
https://yoopta.dev/
MIT License
778 stars 61 forks source link

[BUG] <Can't select text outside the same paragraph> #120

Open chacalonjr opened 2 months ago

chacalonjr commented 2 months ago

Has this bug been raised before?

Description

When selecting text isn't possible to select more than one line/paragraph at the same time.

Steps to Reproduce

Videos attached

Environment

https://github.com/Darginec05/Yoopta-Editor/assets/99447732/c65f7395-cb43-4322-a8dc-5420ce9f6551

https://github.com/Darginec05/Yoopta-Editor/assets/99447732/11e464cf-7271-4579-aace-798cbcb52e5f

Screenshots

No response

Do you want to work on this issue?

No

If "yes" to above, please explain how you would technically implement this

No response

maZahaca commented 2 months ago

I've realised that selection works, when you start selection outside all blocks on the right side, but it doesn't work if you're in the editing mode of any block

chacalonjr commented 2 months ago

I've realised that selection works, when you start selection outside all blocks on the right side, but it doesn't work if you're in the editing mode of any block

Works selecting outside the blocks, but the toolbar doesn't work that way including its options like bolding words

Darginec05 commented 2 months ago

@chacalonjr Yes, this is definitely bug, but related to browser limitations. This is happening because Yoopta now has list of blocks, each with contenteditable="true" attribute. Browser can't make selection between contenteditable="true" blocks

Darginec05 commented 2 months ago

But I have some ideas of how to solve this issue.

Possible solutions:

  1. Make contenteditable="true" for the root block on selectionchange or mousedown event and return back to contenteditable="false" when mouseup event fired
  2. Drop default browser selection behaviour and programmatically handle selection

The first solution is preferable for me

WindrunnerMax commented 2 weeks ago

I've got a similar issue. Adding 'contenteditable' to the root DOM node can fix the selection problem, but then you've got to take control of the selection behavior yourself, which could turn into an even more complicated problem.

Darginec05 commented 2 weeks ago

@WindrunnerMax yeap, this is challenge :D The contenteditable for root element can bring more problems. But I have some ideas how to solve it, I hope it will be ready for the next major version