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

[chacalonjr]

trafficstars

Has this bug been raised before?

• [X] I have checked "open" AND "closed" issues and this is not a duplicate

Description

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

• Added reproducing issue example ( reproducing error video)
• Added how to Notion editor resolve the issue (notion video)

Steps to Reproduce

Videos attached

Environment

• OS: Mac
• Browser:
• safari
• chrome

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]

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]

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]

@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]

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]

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]

@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

[WindRunnerMax]

@Darginec05 I have another idea. If we set all the editor instance modules to read-only, it could solve the selection issue. However, this would require re-implementing the input module, simulating the cursor, and using a hidden input to enter content. This might involve a lot of compatibility work.

Looking forward to solving this problem :D

[Darginec05]

Multi-selection is available in v4.8.0

https://github.com/user-attachments/assets/ef45e34e-bf7e-43ef-a1a0-d902bb131f66